How RealtimeCRM built a business card reader using machine learning

  npm i browser-image-compression

  import imageCompression from 'browser-image-compression';
async function(event) {
 // Get the file from the JS event
 const file = event.target.files[0];
 // We can safely reduce the quality of images to reduce load time
 const maxSize = 0.5;
 const maxWidthOrHeight = 640;
 const compressedFile = await imageCompression(file, maxSize, maxWidthOrHeight);
 const reader = new FileReader();
 reader.onload = async readerEvent => {
     // We read the image as a data URL to send to Google cloud so strip out the part we need
     const imgString = _.chain(readerEvent)
       .get('target.result')
       .split(',')
       .last()
       .value();
     try {
       // Call your server method that will interpret the image using APIs
       const cardData = await SERVER_METHOD();
       // Display cardData in some way in your UI
       console.log(cardData);
     } catch (err) {
       // Handle errors
       console.log(err);
     }
   };
   // Call the function we just defined above
   reader.readAsDataURL(compressedFile);
}

  npm i @google-cloud/language @google-cloud/vision

  /**
* Parse matches from string and remove any line containing a match
* @param {string} str The string to parse
* @returns {Object} result
* @returns {string[]} result.matches
* @returns {string} result.cleanedText
*/
const removeByRegex = (str, regex) => {
 const matches = [];
 const cleanedText = str
   .split('\n')
   .filter(line => {
     const hits = line.match(regex);
     if (hits != null) {
       matches.push(hits[0]);
       return false;
     }
     return true;
   })
   .join('\n');
 return { matches, cleanedText };
};
// from http://emailregex.com
const emailRegex = /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
export const removeEmails = str => {
 const { matches, cleanedText } = removeByRegex(str, emailRegex);
 return { emails: matches, stringWithoutEmails: cleanedText };
};
// Regex taken from https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom#Validation
const postcodeRegex = /([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))\s?[0-9][A-Za-z]{2})/i;
export const removePostcodes = str => {
 const { matches, cleanedText } = removeByRegex(str, postcodeRegex);
 return { postcodes: matches.map(s => s.toUpperCase()), stringWithoutPostcodes: cleanedText };
};
// from http://www.regexlib.com/REDetails.aspx?regexp_id=589
const UKphoneRegex = /((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?/;
export const removePhonenumbers = str => {
 const { matches, cleanedText } = removeByRegex(str, UKphoneRegex);
 return { phonenumbers: matches, stringWithoutPhonenumbers: cleanedText };
};
// from https://stackoverflow.com/a/20046959
const domainRegex = /[a-zA-Z0-9][a-zA-Z0-9-_]{0,61}[a-zA-Z0-9]{0,1}\.([a-zA-Z]{1,6}|[a-zA-Z0-9-]{1,30}\.[a-zA-Z]{2,3})/;
export const removeDomains = str => {
 const { matches, cleanedText } = removeByRegex(str, domainRegex);
 return { domains: matches, stringWithoutDomains: cleanedText };
};

  import vision from '@google-cloud/vision';
import language from '@google-cloud/language';
import {
 removeDomains,
 removePhonenumbers,
 removePostcodes,
 removeEmails,
} from '/path/to/functions.js';
// Import your Google Cloud Keyfile
import GOOGLE_CLOUD_KEYFILE = '/path/to/keyfile.json'
async function(file) {
 // Send image to Image API for OCR
 const visionClient = new vision.ImageAnnotatorClient({
   keyFilename: GOOGLE_CLOUD_KEYFILE,
 });
 let visionResults;
 try {
   const buf = Buffer.from(file, 'base64');
   visionResults = await visionClient.textDetection(buf);
 } catch (err) {
   // Throw error
   console.log(err);
 }
 // Text will be a string of all the text detected in the image.
 // E.g "John Smith\n Test Company\n 01234567890\n 1 Random Place\n P0S TC0DE\n www.johnsmith.com\n john.smith@testcompany.com\n" (Note the newlines)
 let { text } = visionResults[0].fullTextAnnotation;
 // Take a copy of the original text to reference later
 const originalText = _.cloneDeep(text);
 // Remove postcodes
 const { stringWithoutPostcodes } = removePostcodes(text);
 text = stringWithoutPostcodes;
 // Remove phonenumbers
 const { phonenumbers, stringWithoutPhonenumbers } = removePhonenumbers(text);
 text = stringWithoutPhonenumbers;
 // Remove detected emails
 const { emails, stringWithoutEmails } = removeEmails(text);
 text = stringWithoutEmails;
 // Remove detected domains
 const { stringWithoutDomains } = removeDomains(text);
 text = stringWithoutDomains;
 // Clean text and send to natural language API
 const cleanedText = _.replace(_.cloneDeep(text), /\r?\n|\r/g, ' ');
 const languageClient = new language.LanguageServiceClient({
   keyFilename: GOOGLE_CLOUD_KEYFILE,
 });
 let languageResults;
 try {
   languageResults = await languageClient.analyzeEntities({
     document: {
       content: cleanedText,
       type: 'PLAIN_TEXT',
     },
   });
 } catch (err) {
   // Throw an error
 }
 // Go through detected entities
 const { entities } = languageResults[0];
 const requiredEntities = { ORGANIZATION: '', PERSON: '', LOCATION: '' };
 _.each(entities, entity => {
   const { type } = entity;
   if (_.has(requiredEntities, type)) {
     requiredEntities[type] += ` ${entity.name}`;
   }
 });
 // return your data
}