Add google transliterate input

aslamplr · Mar 11, 2020 · a3a7b6e · a3a7b6e
1 parent 7d22a4d
commit a3a7b6e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 11 deletions.
diff --git a/todo b/todo
@@ -4,5 +4,6 @@ Backend Features:
 - [x] Add long text for test case
 
 Frontend Features:
-- [ ] Add Optional Google transliterate for input https://developers.google.com/transliterate/v1/getting_started
+- [ ] Add menu to select transliteration options for text, when enabled
+- [x] Add Optional Google transliterate for input https://developers.google.com/transliterate/v1/getting_started
 - [x] Add MLTT font viewer http://www.fontsquirrel.com/tools/webfont-generator
diff --git a/www/index.html b/www/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="eng">
 
 <head>
   <meta charset="utf-8">
   <title>Malayalam Unicode to ML-TT Converter</title>
   <meta name="description"
     content="Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to corresponding ML-TT encoding.">
   <meta name="robots" content="index, follow" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="public/fonts/mlttkarthika/stylesheet.css" type="text/css" charset="utf-8" />
   <style>

diff --git a/www/index.js b/www/index.js
@@ -1,8 +1,9 @@
 import * as mlttConverter from 'unicode-to-mltt-converter';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as googleTransliterate from "google-input-tool";
 
-import { Box, Button, Heading, Grommet, TextArea, Paragraph } from 'grommet';
+import { Box, Button, Heading, Grommet, TextArea, Paragraph, CheckBox } from 'grommet';
 import { Sync, Copy } from 'grommet-icons';
 
 const theme = {
@@ -47,7 +48,9 @@ const App = _ => {
     const [charmapValue, setCharMapValue] = React.useState('');
     const [inputValue, setInputValue] = React.useState('');
     const [value, setValue] = React.useState('');
-
+    const [doTransliterate, setDoTransliterate] = React.useState(false);
+    const [showCharMap, setShowCharMap] = React.useState(false);
+
     React.useEffect(() => {
         fetch("public/karthika.map").then((resp) => resp.text()).then((defaultCharmapVal) => {
             setCharMapValue(defaultCharmapVal);
@@ -56,6 +59,26 @@ const App = _ => {
 
     const resultTextAreaEl = React.useRef(null);
 
+    const transliterateAndSetInputValue = (text) => {
+        if (doTransliterate) {
+            const lastChar = text && text.substring(text.length - 1);
+            if (lastChar && lastChar === " " && text.length > inputValue.length) {
+                const words = text.split(" ");
+                const lastWord = words[words.length - 2];
+                const request = new XMLHttpRequest();
+                const inputLanguage = "ml-t-i0-und"; // malayalam
+                googleTransliterate(request, lastWord, inputLanguage, 8).then((transliteration) => {
+                    const [first_one] = transliteration;
+                    const newText = [...words.slice(0, words.length - 2), first_one, " "].join(" ");
+                    setInputValue(newText);
+                }).catch((err) => {
+                    console.error("[🛑 transliteration] ➡️ ", err);
+                });
+            }
+        }
+        setInputValue(text);
+    }
+
     const convert = () => {
         const text = mlttConverter.convert(inputValue, charmapValue);
         setValue(text);
@@ -81,25 +104,37 @@ const App = _ => {
                         pad={{ left: 'medium', right: 'small', vertical: 'small' }}
                         gap='small'
                     >
-                        <Paragraph fill>
-                        Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to 
-                        corresponding ML-TT encoding. It uses default Karthika font character mapping. 
+                        <Paragraph fill="horizontal">
+                            Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to
+                            corresponding ML-TT encoding. It uses default Karthika font character mapping.
                         </Paragraph>
-                        <TextArea
+                        <Box fill="horizontal" direction="row" gap="medium">
+                            <CheckBox
+                                checked={doTransliterate}
+                                label="Enable transliterate"
+                                onChange={event => setDoTransliterate(event.target.checked)}
+                            />
+                            <CheckBox
+                                checked={showCharMap}
+                                label="Show char map"
+                                onChange={event => setShowCharMap(event.target.checked)}
+                            />
+                        </Box>
+                        {showCharMap && <TextArea
                             rows="10"
                             size='xsmall'
                             placeholder='loading default char map...'
                             value={charmapValue}
                             onChange={event => setCharMapValue(event.target.value)}
-                        />
+                        />}
                         <TextArea
                             rows="10"
                             placeholder='type/paste unicode input here!'
                             value={inputValue}
-                            onChange={event => setInputValue(event.target.value)}
+                            onChange={event => transliterateAndSetInputValue(event.target.value)}
                         />
                         <TextArea
-                            style={value ? {fontFamily: "ml-ttkarthikanormal"} : {}}
+                            style={value ? { fontFamily: "ml-ttkarthikanormal" } : {}}
                             rows="10"
                             ref={resultTextAreaEl}
                             placeholder='click Convert to see the results here!'

diff --git a/www/package-lock.json b/www/package-lock.json
diff --git a/www/package.json b/www/package.json
@@ -13,6 +13,7 @@
   "author": "Aslam Ahammed <aslamplr@gmail.com>",
   "license": "(MIT OR Apache-2.0)",
   "dependencies": {
+    "google-input-tool": "^1.1.0",
     "grommet": "^2.11.1",
     "polished": "^3.4.4",
     "react": "^16.13.0",