top of page
Writer's pictureKJ Ha

Text2Emoji

A web-based text converter where the text is translated into a set of emojis.




Text2Emoji is a web-based text converter where the text is translated into a set of emojis. Built with JavaScript, the app uses functionality from NLP libraries, RiTa and Compromise, to handle text input and to the development of the emoji dictionary.


The app is designed with the motivation to make a playful tool using emoji as a main ingredient. I've always interested in the power of emoji: the way it's been improving human communication in a flat text environment, and its ability to immediately elicit positive emotional responses from its users. My greatest hope for this project is that this app will be used to lower the bar of communication even at least a little and bring small joy to the users.


🙋 If your operating system is not up to date, some emojis may not show up. For more information, please refer to the set of newly approved emojis in 2020.



Please visit text2emoji.app to try it for yourself!



Goals

  • Create an entertaining/playful tool using emojis as the main ingredient

  • Translate text into a more visually appealing form

  • Develop a more polished web app from scratch (getting more familiar with HTML & CSS)

  • Build my own Node.js API

  • Practice regular expressions

  • Use NLP libraries



Navigation



Type any text in the input field.










Click the "get emoji" button. You may click the button several times until you get satisfying results.









Copy to clipboard. If you click the "📋" button, the most recent output (the top one) will be copied. You can paste it anywhere you want.





If you put any emojis in the input field and hit the "get emoji" button, the exact same emojis will be returned. Click the "clear" button to empty the output field.






Lastly, you may press the Esc key to clear the input field (not supported on mobile devices).










The API


The very first task was to figure out which dataset to use. I wasn't able to find the perfect dataset for the project so I decided to create my own emoji API using a full list of emojis (v13.1) downloaded from Unicode.org.


The video below shows how I formatted the original text file to create a new JSON file, using the Visual Studio Code.


Next, I built my own Node.js API using Glitch based on the class example. You can access my version of Emoji API at https://a2z-emoji-api.glitch.me/ .



Processing the Text Input


NUMBER, SPECIAL CHARACTER, AND MORE


One of the earlier issues I faced was with processing numbers and special characters. Numbers and special characters are different from letters; they cannot just be split by whitespace. For special characters, I was first thinking about removing all of them using regular expressions but soon I realized that there are some special characters with the corresponding emojis. ((e.g. # => #️⃣, * => *️⃣). The code below is my solution to this issue.



// where words is "should I get 100 roses for mother's day" => 
// ["should", "i", "get", "", "1", "", "0", "", "0", "", "roses", "for", "mother", "day", "?", ""] => 💪 😄 🉐 1️⃣ 0️⃣ 0️⃣ 🌹 💁‍♀️ ☀️ ❔

 var del = ["'s", "'re", "'m", "'ve", "'ll", "'d", ",", ".", "\"", ":", ";", "@", "^", "(", ")", "{", "}", "]", "[", "<", ">", "~", "`", "%"];

 for (var j = 0; j < del.length; j++) {
 if (words.includes(del[j])) {
        words = words.replaceAll(del[j], "");
        }
    }

 var nums = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "?", "&", "#", "*", "$"];
 for (var k = 0; k < nums.length; k++) {
 if (words.includes(nums[k])) {
        words = words.replaceAll(nums[k], " " + nums[k] + " ");
        }
    }
  
splitted = words.split(" ");
splitted = splitted.filter(item => item);

COMPOUND WORDS


The next issue was with compound words with space between the words (e.g. "ice cream", "hot dog", "fountain pen," etc.). Previously, if I put the word "hot dog", the app would give me a set of emojis like 🌶 🐕 or 🧊🍦 for "ice cream." This issue was caused by the input sentences being automatically split on the whitespace. To prevent this issue, I needed to set a rule for the exceptions.



// where splitted is ["hot", "hot", "dog" "is", "hot"]
// => ["hot", "hot dog" "is", "hot"] => 🥵 🌭 🌶 

for (var i = 0; i < splitted.length; i++) {
  if (splitted[splitted.indexOf("dog") - 1] == "hot") {
    splitRule("dog");
  }
}

function splitRule(secondWord) {
  var firstWord = splitted[splitted.indexOf(secondWord) - 1];
  splitted[splitted.indexOf(secondWord)] = firstWord + " " + secondWord;
   splitted.splice(splitted.indexOf(firstWord), 1);
}
        

Some of the added exceptions are Santa Claus, hot dog, ice cream, computer mouse, United States, New York, South Korea, no smoking, and New Year.



NLP Libraries


There are two external NLP libraries used in the app: Compromise and RiTa libraries. The libraries are used to encompass different parts of speech of the words, especially of verbs and nouns. There is no single rule that applies to all of the words when it comes to making them into 3rd person present, past tense, or gerund or converting singular nouns to plural nouns. I've decided to use NLP libraries to do that conversion for me.



// getPOS("prohibit") => ["prohibit", "prohibit", "prohibits", "prohibit", "prohibiting", "prohibited", "prohibit"] => 🚫
// getPOS("foot") => ["foot", "foot", "feet"] => 🦶

function getPOS(text) {
 var pos = [];
 if (RiTa.isVerb(text) == true) {
     var a = nlp(text);
     var futureA = a.verbs().toFutureTense().out();
     var aBasic = futureA.substring(5, futureA.length);
     var pastA = a.verbs().toPastTense().out();
     var presentA = a.verbs().toPresentTense().out();
     pos.push(aBasic, text, presentA, pastA,     
     RiTa.getPresentParticiple(aBasic), 
     RiTa.getPastParticiple(aBasic));
    }
 if (RiTa.isNoun(text) == true) {
     pos.push(text, RiTa.singularize(text), 
     RiTa.pluralize(text));
    } else {
        pos.push(text)
    }
 return pos;
}


Developing a Web App


The app displays on multiple devices.

(1. macOS MacBook, 2. Window PC, 3. Samsung Android-1, 4. Samsung Android-2, 5, LG Android)



I started building the app on the P5.js web editor but after a certain point, I realized that I wasn't using any functionalities that are unique to P5.js. There I've decided to move away from the web editor and began to build a web app from scratch. Since I didn't have advanced knowledge of HTML or CSS, I referenced the W3Schools a lot. The website was helpful for figuring out how to create an input field where the text is automatically wrapped, how to make a web page look good on multiple devices, or how to create a button for copying the text. When I reached the point where I tried to implement click to copy function, I faced another issue that I wasn't able to have the span text (where the emoji output lives) automatically copied to the clipboard. Lather, I found a solution for this on Stack Overflow. This issue was caused by some security restrictions where the user should physically interact with the page before using a button to copy the text. The solution was to create an invisible text area to add the content of the span element and copy the value of the text area.


The final step is to use GitHub Pages to create a web page and link a custom domain to the page. GitHub has good documentation on how to work with GitHub pages.



Examples


I gave her roses for mother's day

😄 🤲 👩 🌹 💁‍♀️ ☀️


A magical cycle of life

🅰️ 🎩 🔄 ➡️ ⏳


I left New York because of COVID 19

😊 👈 🗽 ➡️ 🦠 1️⃣ 9️⃣


I miss my grandma's cherry pie

😃 😭 👵 🍒 🥧


I won't drink too much on new year's eve

😊 ❌ 🍹 💰 🔛 🆕🎊 🌉


I wanna play some fun games!

😄 🥺 ▶️ 😝 🎮 ❕


Will it snow for Christmas this year?

❄️ 🎄 💁 🗓 ❓



Demo Video



Next Step

  • Continue to develop the Emoji Dictionary.

  • Use React to enhance the performance of the app.

  • Translate my favorite songs/poems using the app like Emoji Dick

  • Add option for other languages to be an input.


Related Project


Similar projects by others

Comments


bottom of page