├── favicon.ico
├── .gitignore
├── .env
├── assets
└── icons
│ ├── icon-128x128.png
│ ├── icon-144x144.png
│ ├── icon-152x152.png
│ ├── icon-192x192.png
│ ├── icon-384x384.png
│ ├── icon-512x512.png
│ ├── icon-72x72.png
│ └── icon-96x96.png
├── views
├── 404.js
└── main.js
├── index.js
├── components
├── image.js
├── progress.js
├── config.js
└── button.js
├── stores
├── translate.js
└── ocr.js
├── index.html
├── manifest.json
├── sw.js
├── readme.md
├── license
├── package.json
└── bundle.css
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/favicon.ico
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | npm-debug.log*
4 | .nyc_output
5 | *.log
--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | YANDEX_KEY=trnsl.1.1.20180724T203851Z.d5ea8b1018c495fe.cf05ff3d9733d6c5b890288eb9331ce1931b1404
--------------------------------------------------------------------------------
/assets/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-128x128.png
--------------------------------------------------------------------------------
/assets/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-144x144.png
--------------------------------------------------------------------------------
/assets/icons/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-152x152.png
--------------------------------------------------------------------------------
/assets/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-192x192.png
--------------------------------------------------------------------------------
/assets/icons/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-384x384.png
--------------------------------------------------------------------------------
/assets/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-512x512.png
--------------------------------------------------------------------------------
/assets/icons/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-72x72.png
--------------------------------------------------------------------------------
/assets/icons/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YerkoPalma/pangea/master/assets/icons/icon-96x96.png
--------------------------------------------------------------------------------
/views/404.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 |
3 | var TITLE = 'welcome - route not found'
4 |
5 | module.exports = view
6 |
7 | function view (state, emit) {
8 | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
9 | return html`
10 |
11 | Route not found.
12 | Back to main.
13 |
14 | `
15 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var choo = require('choo')
2 | var css = require('sheetify')
3 |
4 | css('tachyons')
5 | css`
6 | html, body {
7 | height: 100%;
8 | }
9 | input:invalid {
10 | border: solid 1px red;
11 | }
12 | `
13 |
14 | var app = choo()
15 |
16 | if (process.env.NODE_ENV !== 'production') {
17 | app.use(require('choo-devtools')())
18 | } else {
19 | app.use(require('choo-service-worker')())
20 | }
21 |
22 | app.use(require('./stores/ocr'))
23 | app.use(require('./stores/translate'))
24 |
25 | app.route('/', require('./views/main'))
26 | app.route('/*', require('./views/404'))
27 | app.mount('body')
28 |
--------------------------------------------------------------------------------
/components/image.js:
--------------------------------------------------------------------------------
1 | var Component = require('choo/component')
2 | var html = require('choo/html')
3 |
4 | class Image extends Component {
5 | constructor (id, state, emit) {
6 | super(id)
7 | this.local = state.components[id] = {}
8 | this.emit = emit
9 | this.state = state
10 | }
11 |
12 | createElement (state) {
13 | return html`
14 | ![]()
this.state.src && this.emit('ocr:recognize')} src="${this.state.src ? this.state.src : ''}" class="${this.state.src ? 'db' : 'dn'} h-100 center mw-100"/>
15 | `
16 | }
17 |
18 | update (state) {
19 | return state.src !== this.element.src
20 | }
21 | }
22 |
23 | module.exports = Image
--------------------------------------------------------------------------------
/components/progress.js:
--------------------------------------------------------------------------------
1 | var Component = require('choo/component')
2 | var html = require('choo/html')
3 | var css = require('sheetify')
4 |
5 | var div = css`
6 | :host {
7 | text-align: left;
8 | position: absolute;
9 | background: rgba(255,255,255, 0.8);
10 | padding: 0 0.5rem;
11 | }
12 | `
13 |
14 | class Progress extends Component {
15 | constructor (id, state, emit) {
16 | super(id)
17 | this.local = state.components[id] = {
18 | status: '',
19 | progress: ''
20 | }
21 | }
22 |
23 | createElement () {
24 | return html`
25 |
26 | ${this.local.status ? this.local.status : ''}
27 | ${this.local.progress ? this.local.progress : ''}
28 |
29 | `
30 | }
31 |
32 | update () {
33 | return true
34 | }
35 | }
36 |
37 | module.exports = Progress
--------------------------------------------------------------------------------
/stores/translate.js:
--------------------------------------------------------------------------------
1 | var Config = require('../components/config')
2 |
3 | module.exports = store
4 |
5 | store.storeName = 'translate'
6 | function store (state, emitter) {
7 | var config = state.cache(Config, 'config')
8 | emitter.on('translate:translate', function (text) {
9 | fetch('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180724T203851Z.d5ea8b1018c495fe.cf05ff3d9733d6c5b890288eb9331ce1931b1404&text='+text+'&lang='+(state.currentLanguage || 'es')+'-'+(state.translateLanguage || 'en')+'&format=plain')
10 | .then(response => response.json())
11 | .then(({ text }) => {
12 | state.translation = text[0]
13 | emitter.emit('render')
14 | })
15 | })
16 | emitter.on('DOMContentLoaded', function () {
17 | fetch('https://translate.yandex.net/api/v1.5/tr.json/getLangs?ui=en&key=trnsl.1.1.20180724T203851Z.d5ea8b1018c495fe.cf05ff3d9733d6c5b890288eb9331ce1931b1404')
18 | .then(response => response.json())
19 | .then(({ langs }) => {
20 | config.local.langs = langs
21 | config.render(state, emitter.emit)
22 | })
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/views/main.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 | var Button = require('../components/button')
3 | var Image = require('../components/image')
4 | var Progress = require('../components/progress')
5 | var Config = require('../components/config')
6 | var css = require('sheetify')
7 |
8 | var TITLE = 'welcome - main'
9 |
10 | module.exports = view
11 |
12 | var result = css`
13 | :host {
14 | position: absolute;
15 | left: 0;
16 | right: 0;
17 | bottom: 8rem;
18 | display: inline-block;
19 | background: rgba(255, 255, 255, 0.8);
20 | }
21 | `
22 | function view (state, emit) {
23 | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
24 |
25 | return html`
26 |
27 |
28 | ${state.cache(Progress, 'progress').render(state, emit)}
29 | ${state.cache(Config, 'config').render(state, emit)}
30 | ${state.cache(Image, 'image').render(state, emit)}
31 | ${state.translation || ''}
32 | ${state.cache(Button, 'button').render(state, emit)}
33 |
34 |
35 | `
36 | }
37 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | pangea
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pangea",
3 | "short_name": "pangea",
4 | "description": "translate images of text",
5 | "theme_color": "#f26328",
6 | "background_color": "#41838e",
7 | "display": "standalone",
8 | "start_url": "/",
9 | "icons": [
10 | {
11 | "src": "icons/icon-72x72.png",
12 | "sizes": "72x72",
13 | "type": "image/png"
14 | },
15 | {
16 | "src": "icons/icon-96x96.png",
17 | "sizes": "96x96",
18 | "type": "image/png"
19 | },
20 | {
21 | "src": "icons/icon-128x128.png",
22 | "sizes": "128x128",
23 | "type": "image/png"
24 | },
25 | {
26 | "src": "icons/icon-144x144.png",
27 | "sizes": "144x144",
28 | "type": "image/png"
29 | },
30 | {
31 | "src": "icons/icon-152x152.png",
32 | "sizes": "152x152",
33 | "type": "image/png"
34 | },
35 | {
36 | "src": "icons/icon-192x192.png",
37 | "sizes": "192x192",
38 | "type": "image/png"
39 | },
40 | {
41 | "src": "icons/icon-384x384.png",
42 | "sizes": "384x384",
43 | "type": "image/png"
44 | },
45 | {
46 | "src": "icons/icon-512x512.png",
47 | "sizes": "512x512",
48 | "type": "image/png"
49 | }
50 | ]
51 | }
--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
1 | /* eslint-env serviceworker */
2 |
3 | var VERSION = require('./package.json').version
4 | var URLS = require('./package.json').env.FILE_LIST
5 |
6 | // Respond with cached resources
7 | self.addEventListener('fetch', function (e) {
8 | var url = new URL(e.request.url)
9 | if (URLS.indexOf(url.pathname) > -1) {
10 | e.respondWith(self.caches.match(e.request).then(function (request) {
11 | if (request) return request
12 | else return self.fetch(e.request)
13 | }))
14 | } else if (/[content|assets]\/.+/.test(url.pathname)) {
15 | e.respondWith(self.caches.open('static-cache').then(function (cache) {
16 | return cache.match(e.request).then(function (response) {
17 | var fetchPromise = fetch(e.request).then(function (networkResponse) {
18 | cache.put(e.request, networkResponse.clone())
19 | return networkResponse
20 | })
21 | return response || fetchPromise
22 | })
23 | }))
24 | }
25 | })
26 |
27 | // Register worker
28 | self.addEventListener('install', function (e) {
29 | self.skipWaiting()
30 | e.waitUntil(self.caches.open(VERSION).then(function (cache) {
31 | return cache.addAll(URLS)
32 | }))
33 | })
34 |
35 | // Remove outdated resources
36 | self.addEventListener('activate', function (e) {
37 | e.waitUntil(self.caches.keys().then(function (keyList) {
38 | return Promise.all(keyList.map(function (key, i) {
39 | if (keyList[i] !== VERSION) return self.caches.delete(keyList[i])
40 | }))
41 | }))
42 | })
--------------------------------------------------------------------------------
/components/config.js:
--------------------------------------------------------------------------------
1 | var Component = require('choo/component')
2 | var html = require('choo/html')
3 |
4 | class Config extends Component {
5 | constructor (id, state, emit) {
6 | super(id)
7 | this.local = state.components[id] = {
8 | langs: {}
9 | }
10 | this.state = state
11 | }
12 |
13 | createElement () {
14 | return html`
15 |
16 |
17 | this.state.currentLanguage = e.target.value} value="es" list="input-lang-lists" name="input-lang" id="input-lang" pattern="${Object.keys(this.local.langs).join('|')}"/>
18 |
23 |
24 |
25 | this.state.translateLanguage = e.target.value} value="en" list="output-lang-lists" name="output-lang" id="input-lang" pattern="${Object.keys(this.local.langs).join('|')}"/>
26 |
31 |
32 | `
33 | }
34 |
35 | update () {
36 | return true
37 | }
38 | }
39 |
40 | module.exports = Config
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # pangea
2 | [](https://travis-ci.org/YerkoPalma/pangea) [](https://github.com/feross/standard)
3 |
4 | > translate images of text
5 |
6 | 
7 |
8 | ## What is this?
9 |
10 | A litle app that recognize some text from an image and translate it. Recognition
11 | is made with [tesseract.js][tesseract.js] and translation is provided by
12 | [yandex][yandex].
13 |
14 | Yandex is a free software, but, as most free cloud apis, has some limited rate,
15 | so if you want to use this, it is a good idea to register and generate your own
16 | [key][key] and replace it in the [translate store](/stores/translate.js).
17 |
18 | ## Development
19 |
20 | There is a lot to improve or add, so if you want to develop on top of it or
21 | contribute, you mus:
22 |
23 | ```bash
24 | $ git clone https://github.com/YerkoPalma/pangea.git
25 | $ cd pangea
26 | $ npm install
27 | $ npm start
28 | ```
29 |
30 | ## What does pangea means?
31 |
32 | [Pangea][pangea] is the name of a super continent that existed before the earth
33 | splited into the current continents. I liked the idea of a single earth, with no
34 | countries nor borders.
35 |
36 | ## License
37 | [MIT](/license)
38 |
39 | [tesseract.js]: https://github.com/naptha/tesseract.js
40 | [yandex]: https://tech.yandex.com/translate/
41 | [key]: https://translate.yandex.com/developers/keys
42 | [pangea]: https://en.wikipedia.org/wiki/Pangaea
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | Copyright (c) 2018 Yerko Palma
2 |
3 | The following license is modified from the MIT license.
4 |
5 | ANTI-FASCIST LICENSE:
6 |
7 | The following conditions must be met by any person obtaining a copy of this
8 | software:
9 |
10 | - You MAY NOT be a fascist.
11 | - You MUST not financially support fascists.
12 | - You MUST not publicly voice support for fascists.
13 |
14 | "Fascist" can be understood as any entity which supports radical authoritarian
15 | nationalism. Example: Donald Trump is a fascist, if you donated to his
16 | campaign then all rights provided by this license are not granted to you.
17 |
18 | MIT LICENSE:
19 |
20 | Permission is hereby granted, free of charge, to any person obtaining a copy
21 | of this software and associated documentation files (the "Software"), to deal
22 | in the Software without restriction, including without limitation the rights
23 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
24 | copies of the Software, and to permit persons to whom the Software is
25 | furnished to do so, subject to the following conditions:
26 |
27 | The above copyright notice and this permission notice shall be included in all
28 | copies or substantial portions of the Software.
29 |
30 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
31 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
32 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
33 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
34 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
35 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
36 | SOFTWARE.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pangea",
3 | "description": "translate images of text",
4 | "author": "YerkoPalma",
5 | "version": "0.1.0",
6 | "main": "index.js",
7 | "private": true,
8 | "files": [
9 | "index.js"
10 | ],
11 | "env": {
12 | "FILE_LIST": [
13 | "/",
14 | "/bundle.js",
15 | "/bundle.css"
16 | ]
17 | },
18 | "scripts": {
19 | "test": "standard --verbose | snazzy && npm run deps",
20 | "gen": "choo-scaffold",
21 | "deps": "dependency-check .",
22 | "start": "budo index.js:bundle.js -H 0.0.0.0 -p 8080 -- -t brfs -t sheetify -p [ css-extract -o bundle.css ]",
23 | "build": "npm run build:static && npm run build:sw && npm run build:js",
24 | "build:static": "mkdir -p dist && cp favicon.ico index.html manifest.json dist && cp -R assets/* dist",
25 | "build:js": "browserify -p tinyify -t brfs -t sheetify -p [ css-extract -o dist/bundle.css ] -e index.js -o dist/bundle.js",
26 | "build:sw": "browserify -p tinyify -e sw.js -o dist/sw.js",
27 | "deploy": "npm run build && touch dist/.nojekyll && gh-pages -d dist -a -t"
28 | },
29 | "repository": "YerkoPalma/pangea",
30 | "license": "MIT",
31 | "dependencies": {
32 | "choo": "^6.13.0",
33 | "choo-service-worker": "^2.4.0",
34 | "sheetify": "^7.3.3",
35 | "tachyons": "^4.11.1",
36 | "tesseract.js": "^1.0.10"
37 | },
38 | "devDependencies": {
39 | "brfs": "^2.0.0",
40 | "browserify": "^16.2.2",
41 | "budo": "^11.3.2",
42 | "choo-devtools": "^2.5.1",
43 | "choo-scaffold": "^1.2.0",
44 | "css-extract": "^1.3.0",
45 | "dependency-check": "^3.2.0",
46 | "dotenv": "^6.0.0",
47 | "gh-pages": "^1.2.0",
48 | "snazzy": "^7.1.1",
49 | "standard": "^11.0.1",
50 | "tinyify": "^2.4.3"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/stores/ocr.js:
--------------------------------------------------------------------------------
1 | var Tesseract = require('tesseract.js')
2 | var Progress = require('../components/progress')
3 |
4 | // map yandex langs to tesseract langs
5 | const langs = {
6 | af: 'afr',
7 | ar: 'ara',
8 | az: 'aze',
9 | be: 'bel',
10 | bn: 'ben',
11 | bg: 'bul',
12 | ca: 'cat',
13 | cs: 'ces',
14 | zh: 'chi_tra',
15 | da: 'dan',
16 | de: 'deu',
17 | el: 'ell',
18 | en: 'eng' ,
19 | eo: 'epo' ,
20 | et: 'est',
21 | eu: 'eus' ,
22 | fi: 'fin',
23 | fr: 'fra' ,
24 | gl: 'glg' ,
25 | he: 'heb',
26 | hi: 'hin',
27 | hr: 'hrv',
28 | hu: 'hun',
29 | id: 'ind',
30 | is: 'isl',
31 | it: 'ita' ,
32 | ja: 'jpn',
33 | kn: 'kan',
34 | ko: 'kor',
35 | lv: 'lav',
36 | lt: 'lit',
37 | ml: 'mal',
38 | mk: 'mkd',
39 | mt: 'mlt',
40 | ms: 'msa',
41 | nl: 'nld',
42 | no: 'nor',
43 | pl: 'pol',
44 | pt: 'por',
45 | ro: 'ron',
46 | ru: 'rus' ,
47 | sl: 'slv',
48 | es: 'spa' ,
49 | sq: 'sqi' ,
50 | sw: 'swa',
51 | sv: 'swe',
52 | ta: 'tam',
53 | te: 'tel',
54 | tl: 'tgl',
55 | th: 'tha',
56 | tr: 'tur',
57 | uk: 'ukr',
58 | vi: 'vie'
59 | }
60 | module.exports = store
61 |
62 | store.storeName = 'ocr'
63 | function store (state, emitter) {
64 | emitter.on('ocr:detect', function () {
65 | Tesseract.detect(document.querySelector('img'))
66 | .progress(function (message){
67 | var progressComponent = state.cache(Progress, 'progress')
68 | progressComponent.local = message
69 | progressComponent.render(state, emitter.emit)
70 | }).then(function (result){
71 | console.log(result)
72 | }).catch(function (error) {
73 | console.log(error)
74 | })
75 | })
76 | emitter.on('ocr:recognize', function () {
77 | Tesseract.recognize(document.querySelector('img'), {lang: langs[state.currentLanguage] || 'spa'})
78 | .progress(function (message){
79 | var progressComponent = state.cache(Progress, 'progress')
80 | progressComponent.local = message
81 | progressComponent.render(state, emitter.emit)
82 | }).then(function (result){
83 | emitter.emit('translate:translate', result.text)
84 | Tesseract.terminate()
85 | }).catch(function (error) {
86 | console.log(error)
87 | })
88 | })
89 | }
--------------------------------------------------------------------------------
/components/button.js:
--------------------------------------------------------------------------------
1 | var Component = require('choo/component')
2 | var html = require('choo/html')
3 | var css = require('sheetify')
4 | var Image = require('./image')
5 |
6 | var svg = css`
7 | :host {
8 | position: absolute;
9 | left: 1rem;
10 | top: 0.5rem;
11 | }
12 | `
13 | class Button extends Component {
14 | constructor (id, state, emit) {
15 | super(id)
16 | this.local = state.components[id] = {}
17 | this.cache = state.cache
18 | this.state = state
19 | this.emit = emit
20 |
21 | this.loadImage = this.loadImage.bind(this)
22 | }
23 |
24 | loadImage (event) {
25 | var self = this
26 | var file = event.target.files[0]
27 | var reader = new FileReader()
28 | reader.readAsDataURL(file)
29 |
30 | var filename = file.name;
31 | if (filename.indexOf('-') > -1) {
32 | var nameWithoutExt = filename.substring(0, filename.indexOf('.'))
33 | var splittedName = nameWithoutExt.split("-");
34 |
35 | // if there are more than one dash then splittedName will return more than one word
36 | // so this variable will get the language, which is the last element of the array.
37 | var suffixLang = splittedName[splittedName.length - 1]
38 |
39 | if (suffixLang in self.state.components.config.langs) {
40 | self.state.currentLanguage = suffixLang
41 | document.getElementById("input-lang").value = suffixLang
42 | }
43 | }
44 |
45 |
46 | reader.onload = function (e) {
47 | self.state.src = e.target.result
48 | self.cache(Image, 'image').render(self.state, self.emit)
49 | }
50 | }
51 |
52 | createElement (state) {
53 | this.state = state
54 | return html`
55 |
56 |
62 |
63 |