Guillermo
10 years ago
11 changed files with 692 additions and 301 deletions
@ -1,294 +1,333 @@ |
|||||||
@import 'explorer.css'; |
@import 'explorer.css'; |
||||||
|
|
||||||
.fullscreen { |
.fullscreen { |
||||||
width:100%; |
width: 100%; |
||||||
min-height: 100%; |
min-height: 100%; |
||||||
} |
} |
||||||
|
.stickyheader { |
||||||
|
position: fixed; |
||||||
.run, .running { |
width: 100%; |
||||||
width: 100%; |
z-index: 3; |
||||||
height: 42px; |
height: 50px; |
||||||
text-align: center; |
vertical-align: middle; |
||||||
|
text-align: right; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
.headernav { |
||||||
|
padding-right: 35px; |
||||||
|
vertical-align: middle; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.run, |
||||||
|
.running { |
||||||
|
width: 100%; |
||||||
|
height: 42px; |
||||||
|
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
.running { |
.running { |
||||||
display: none |
display: none |
||||||
} |
} |
||||||
|
|
||||||
#wow .notrunning { |
#wow .notrunning { |
||||||
display: none |
display: none |
||||||
} |
} |
||||||
|
|
||||||
#wow .running { |
#wow .running { |
||||||
display: block |
display: block |
||||||
} |
} |
||||||
|
|
||||||
.runbutton { |
.runbutton { |
||||||
padding-top: 6px; |
padding-top: 9px; |
||||||
padding-bottom: 10px; |
padding-bottom: 10px; |
||||||
font-weight: 500; |
font-weight: 500; |
||||||
text-align: center; |
text-align: center; |
||||||
|
color: #FFFFFF; |
||||||
|
cursor: pointer; |
||||||
|
-webkit-transition: all 0.7s ease; |
||||||
|
transition: all 0.7s ease; |
||||||
|
width: 100px; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
background-color: #6A6A6A; |
||||||
|
border-radius: 5px; |
||||||
|
margin-bottom: 9px; |
||||||
|
} |
||||||
|
.runbutton:hover { |
||||||
|
text-shadow: 0px 0px 10px #27C6F9; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
/*font-weight: bold;*/ |
color: #5BA9F2; |
||||||
|
/*font-weight: bold;*/ |
||||||
} |
} |
||||||
|
|
||||||
.display { |
.display { |
||||||
position: absolute; |
position: absolute; |
||||||
/*background: rgba(0,0,255,.1);*/ |
/*background: rgba(0,0,255,.1);*/ |
||||||
} |
} |
||||||
|
|
||||||
svg { |
svg { |
||||||
height: 100% |
height: 100% |
||||||
} |
} |
||||||
|
|
||||||
#marterial { |
#marterial { |
||||||
position: absolute; |
position: absolute; |
||||||
width: 100%; |
width: 100%; |
||||||
height: 330px; |
height: 330px; |
||||||
z-index: -1; |
z-index: -1; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
|
background-color: #00DB9D; |
||||||
|
/*background-image: url(../img/stars.jpeg);*/ |
||||||
|
background-size: cover; |
||||||
|
background-position: bottom; |
||||||
} |
} |
||||||
|
|
||||||
.out { |
.out { |
||||||
padding: 10px; |
padding: 10px; |
||||||
padding-bottom: 0px; |
padding-bottom: 0px; |
||||||
text-align: center; |
text-align: center; |
||||||
font-family: monospace; |
font-family: monospace; |
||||||
} |
} |
||||||
|
|
||||||
.hint { |
.hint { |
||||||
text-align: left; |
text-align: left; |
||||||
padding-left: 14px |
padding-left: 14px; |
||||||
|
font-size: 10px; |
||||||
|
color: #56607D; |
||||||
} |
} |
||||||
|
|
||||||
.langlabel { |
.langlabel { |
||||||
display: inline-block; |
display: inline-block; |
||||||
flex-grow: 1; |
flex-grow: 1; |
||||||
height: 40px; |
height: 40px; |
||||||
line-height: 40px; |
line-height: 40px; |
||||||
|
color: #fff; |
||||||
|
background-color: #6A6A6A; |
||||||
} |
} |
||||||
.bookend { |
|
||||||
display: inline-block; |
.selected { |
||||||
|
background-color: #00DB9D; |
||||||
|
font-weight: bold; |
||||||
} |
} |
||||||
|
|
||||||
|
.bookend { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
.prog { |
.prog { |
||||||
width: 400px; |
width: 400px; |
||||||
max-width: 100%; |
max-width: 100%; |
||||||
position: relative; |
position: relative; |
||||||
} |
} |
||||||
|
|
||||||
.demofooter { |
.demofooter { |
||||||
padding: 10px; |
padding: 10px; |
||||||
/*padding-top: 0px;*/ |
/*padding-top: 0px;*/ |
||||||
text-align: center; |
|
||||||
/*display: flex*/ |
text-align: center; |
||||||
|
/*display: flex*/ |
||||||
} |
} |
||||||
|
|
||||||
#wow .demofooter { |
#wow .demofooter { |
||||||
display: flex; |
display: flex; |
||||||
padding: 0px; |
padding: 0px; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
align-items: center; |
align-items: center; |
||||||
} |
} |
||||||
|
|
||||||
#logo { |
#logo { |
||||||
text-align: center; |
text-align: center; |
||||||
padding-top: 70px; |
padding-top: 70px; |
||||||
height: 182px; |
height: 182px; |
||||||
} |
} |
||||||
|
|
||||||
.to_ocr { |
.to_ocr { |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
#wow { |
#wow { |
||||||
margin-top: 25px; |
margin-top: 25px; |
||||||
} |
} |
||||||
|
|
||||||
.demo { |
.demo { |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
width:500px; |
width: 500px; |
||||||
text-align: left |
max-width: 100%; |
||||||
} |
text-align: left; |
||||||
|
|
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .2); |
||||||
|
position: relative; |
||||||
|
background-color: #f3f3f3; |
||||||
|
} |
||||||
.demoheader { |
.demoheader { |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
border-radius: 5px 5px 0px 0px |
border-radius: 5px 5px 0px 0px; |
||||||
|
font-size: 8.3px; |
||||||
} |
} |
||||||
|
|
||||||
#canvas { |
#canvas { |
||||||
margin-left: auto; |
margin-left: auto; |
||||||
margin-right: auto; |
margin-right: auto; |
||||||
pointer-events:none; |
pointer-events: none; |
||||||
z-index: 0; |
z-index: 0; |
||||||
background-image: url(../img/logowhite.png); |
background-image: url(../img/logowhite.png); |
||||||
background-size: cover; |
background-size: cover; |
||||||
} |
} |
||||||
|
|
||||||
#splash { |
#splash { |
||||||
text-align: center; |
text-align: center; |
||||||
position: relative; |
position: relative; |
||||||
} |
} |
||||||
|
|
||||||
.desc { |
.desc { |
||||||
text-align: left; |
text-align: left; |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
|
color: #343E70; |
||||||
} |
} |
||||||
|
|
||||||
.vr { |
.vr { |
||||||
display: inline-block; |
display: inline-block; |
||||||
height: 40px; |
height: 40px; |
||||||
|
border-left: 1px solid #ddd; |
||||||
|
} |
||||||
|
.getStarted { |
||||||
|
display: inline-block; |
||||||
|
background-color: #00DB9D; |
||||||
|
color: white; |
||||||
|
font-size: 40px; |
||||||
|
padding: 20px; |
||||||
|
padding-left: 50px; |
||||||
|
border-radius: 5px; |
||||||
|
margin-top: 40; |
||||||
|
padding-right: 50px; |
||||||
|
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
#notconvinced { |
#notconvinced { |
||||||
max-width: 960; |
max-width: 960; |
||||||
|
margin-left: auto; |
||||||
margin-left: auto; |
margin-right: auto; |
||||||
margin-right: auto; |
margin-top: 8%; |
||||||
margin-top: 8%; |
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.randombold { |
.randombold { |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
/*font-family: Georgia;*/ |
/*font-family: Georgia;*/ |
||||||
letter-spacing: .8px; |
|
||||||
line-height: 37px; |
letter-spacing: .8px; |
||||||
|
line-height: 37px; |
||||||
} |
} |
||||||
|
|
||||||
.rant { |
.rant { |
||||||
padding-left: 8%; |
padding-left: 8%; |
||||||
padding-right: 8%; |
padding-right: 8%; |
||||||
} |
} |
||||||
|
|
||||||
.npm { |
.npm { |
||||||
margin-top: 20px; |
margin-top: 20px; |
||||||
padding-left: 15px; |
padding-left: 15px; |
||||||
|
background-color: rgb(255, 238, 174); |
||||||
|
margin-bottom: 0px; |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
border-left: 10px solid #303061; |
||||||
|
color: rgb(48, 48, 97); |
||||||
|
font-size: 19px; |
||||||
|
font-family: monospace; |
||||||
|
} |
||||||
|
.longasstag { |
||||||
|
text-align: left; |
||||||
|
white-space: normal; |
||||||
|
word-break: break-all; |
||||||
} |
} |
||||||
|
|
||||||
.longasstag{ |
|
||||||
text-align: left; |
|
||||||
white-space: normal; |
|
||||||
word-break: break-all; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
#code { |
#code { |
||||||
text-align: center; |
text-align: center; |
||||||
width: 335px; |
width: 335px; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
margin-right: 40px; |
margin-right: 40px; |
||||||
margin-left: 40px; |
margin-left: 40px; |
||||||
margin-top: 120px; |
margin-top: 120px; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.woloasdf { |
.woloasdf { |
||||||
padding-top: 8%; |
padding-top: 8%; |
||||||
} |
} |
||||||
|
.fork { |
||||||
|
position: absolute; |
||||||
.fork{ |
top: 0; |
||||||
position: absolute; |
right: 0; |
||||||
top: 0; |
border: 0; |
||||||
right: 0; |
z-index: 2; |
||||||
border: 0; |
|
||||||
z-index: 2; |
|
||||||
} |
} |
||||||
|
|
||||||
.fork img { |
.fork img { |
||||||
width: 149px; |
width: 149px; |
||||||
} |
} |
||||||
|
|
||||||
.two { |
.two { |
||||||
width: 100%; |
width: 100%; |
||||||
display: flex; |
display: flex; |
||||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||||
justify-content: space-around; |
justify-content: space-around; |
||||||
max-width: 1100px; |
max-width: 1100px; |
||||||
margin-left: auto; |
margin-left: auto; |
||||||
margin-right: auto; |
margin-right: auto; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
#two { |
#two { |
||||||
margin-bottom: 8%; |
margin-bottom: 8%; |
||||||
} |
} |
||||||
|
|
||||||
.demoheader .CodeMirror { |
.demoheader .CodeMirror { |
||||||
padding-bottom: 9px; |
padding-bottom: 9px; |
||||||
padding-top: 9px; |
padding-top: 9px; |
||||||
padding-left: 13px; |
padding-left: 13px; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
hr { |
||||||
|
border: none; |
||||||
|
border-top: 1px solid #ddd; |
||||||
|
margin: 0px; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
#ocroutput { |
#ocroutput { |
||||||
position: relative; |
position: relative; |
||||||
} |
} |
||||||
|
|
||||||
.manyLanguages { |
.manyLanguages { |
||||||
font-size: 7px; |
font-size: 7px; |
||||||
padding-top: 10px; |
padding-top: 10px; |
||||||
|
opacity: .3; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
body { |
body { |
||||||
padding: 0px; |
padding: 0px; |
||||||
margin: 0px; |
margin: 0px; |
||||||
font-family: Lato;/*, Helvetica, Arial, sans-serif;*/ |
font-family: Lato; |
||||||
font-weight: 300; |
/*, Helvetica, Arial, sans-serif;*/ |
||||||
|
|
||||||
|
font-weight: 300; |
||||||
|
background-color: white; |
||||||
} |
} |
||||||
|
|
||||||
button { |
button { |
||||||
|
height: 60px; |
||||||
height: 60px; |
width: 240px; |
||||||
width: 240px; |
margin-top: 10px; |
||||||
|
font: inherit; |
||||||
margin-top: 10px; |
font-size: 30px; |
||||||
|
-webkit-transition: all 0.7s ease; |
||||||
font: inherit; |
transition: all 0.7s ease; |
||||||
font-size: 30px; |
outline: 0; |
||||||
|
color: #FFF; |
||||||
-webkit-transition: all 0.7s ease; |
background: #5A4E60; |
||||||
transition: all 0.7s ease; |
border-radius: 5px; |
||||||
|
border: solid 1px #fff; |
||||||
outline: 0; |
|
||||||
} |
} |
||||||
|
|
||||||
button:hover { |
button:hover { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
border: solid 1px #ddd; |
||||||
} |
} |
||||||
|
|
||||||
@media (max-width: 914px) { |
@media (max-width: 914px) { |
||||||
#logo { |
button { |
||||||
padding-top: 8%; |
color: #fff; |
||||||
height: auto; |
background-color: rgba(0, 0, 0, 0) |
||||||
} |
} |
||||||
|
.desc { |
||||||
#marterial { |
color: #FFFFFF; |
||||||
height: 100%; |
text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); |
||||||
} |
} |
||||||
|
.desc a { |
||||||
.demo { |
color: #B8EEFF; |
||||||
margin-right: 8%; |
} |
||||||
margin-left: 8%; |
.npm { |
||||||
} |
box-shadow: 0px 0px 20px 4px rgb(180, 146, 150); |
||||||
|
} |
||||||
#code { |
#logo { |
||||||
margin-top: 20px; |
padding-top: 8%; |
||||||
margin-bottom: 20px; |
height: auto; |
||||||
width: 400px; |
} |
||||||
} |
#marterial { |
||||||
|
height: 100%; |
||||||
#fork { |
} |
||||||
width: 28%; |
.demo { |
||||||
} |
margin-right: 8%; |
||||||
|
margin-left: 8%; |
||||||
|
} |
||||||
|
#code { |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
width: 400px; |
||||||
|
} |
||||||
|
#fork { |
||||||
|
width: 28%; |
||||||
|
} |
||||||
} |
} |
||||||
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
@ -0,0 +1,198 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Wau Demo</title> |
||||||
|
<link rel="stylesheet" type="text/css" href="./css/wau.css"> |
||||||
|
|
||||||
|
<script src="codemirror/codemirror.js"></script> |
||||||
|
<script src="codemirror/runmode.js"></script> |
||||||
|
<link rel="stylesheet" href="codemirror/codemirror.css"> |
||||||
|
<script src="codemirror/javascript.js"></script> |
||||||
|
<script src="codemirror/xml.js"></script> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||||
|
|
||||||
|
<script src="explorer/react.js"></script> |
||||||
|
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<!-- <a href="https://github.com/naptha/tesseract.js" class="fork"><img id="fork" src="img/fork.png" alt="Fork me on GitHub"></a> --> |
||||||
|
|
||||||
|
<div class="stickyheader"> |
||||||
|
<a class="headernav" href="#docs">Documentation</a> |
||||||
|
<a class="headernav" href="https://github.com/naptha/tesseract.js">GitHub</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="splash" class="fullscreen"> |
||||||
|
<div id ="marterial" class="header"></div> |
||||||
|
|
||||||
|
<div id="logo" class="header"> |
||||||
|
<canvas id="canvas"></canvas> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="two" class="two"> |
||||||
|
|
||||||
|
<div id="code"> |
||||||
|
<div id="d1desc" class="desc"> |
||||||
|
Tesseract.js is a <b>pure javascript</b> version of the <b><a href="https://github.com/tesseract-ocr/Tesseract">Tesseract OCR Engine</a> |
||||||
|
</b> that can recognize |
||||||
|
<a href="#eng">English</a>, |
||||||
|
<a href="#chi_sim">Chinese</a>, |
||||||
|
<a href="#rus">Russian</a>, |
||||||
|
<a href="#tha">Meme</a>, and <a>60 other languages</a>. |
||||||
|
<!-- <div class="manyLanguages"> |
||||||
|
(and |
||||||
|
<a href="#deu">German</a>, |
||||||
|
<a href="#jpn">Japanese</a>, |
||||||
|
<a href="#spa">Spanish</a>, |
||||||
|
<a href="#fra">French</a>, |
||||||
|
<a href="#chi_tra">Traditional Chinese</a>, |
||||||
|
<a href="#por">Portuguese</a>, |
||||||
|
<a href="#ita">Italian</a>, |
||||||
|
<a href="#pol">Polish</a>, |
||||||
|
<a href="#tur">Turkish</a>, |
||||||
|
<a href="#nld">Dutch</a>, |
||||||
|
<a href="#ara">Arabic</a>, |
||||||
|
<a href="#ces">Czech</a>, |
||||||
|
<a href="#kor">Korean</a>, |
||||||
|
<a href="#swe">Swedish</a>, |
||||||
|
<a href="#vie">Vietnamese</a>, |
||||||
|
<a href="#ron">Romanian</a>, |
||||||
|
<a href="#ell">Greek</a>, |
||||||
|
<a href="#ind">Indonesian</a>, |
||||||
|
<a href="#hun">Hungarian</a>, |
||||||
|
<a href="#dan">Danish</a>, |
||||||
|
<a href="#bul">Bulgarian</a>, |
||||||
|
<a href="#fin">Finnish</a>, |
||||||
|
<a href="#nor">Norwegian</a>, |
||||||
|
<a href="#ukr">Ukrainian</a>, |
||||||
|
<a href="#cat">Catalan</a>, |
||||||
|
<a href="#hrv">Croatian</a>, |
||||||
|
<a href="#heb">Hebrew</a>, |
||||||
|
<a href="#lit">Lithuanian</a>, |
||||||
|
<a href="#slv">Slovenian</a>, |
||||||
|
<a href="#hin">Hindi</a>, |
||||||
|
<a href="#ben">Bengali</a>, |
||||||
|
<a href="#tel">Telugu</a>, |
||||||
|
<a href="#tam">Tamil</a>, |
||||||
|
<a href="#kan">Kannada</a>, |
||||||
|
<a href="#mal">Malayalam</a>, |
||||||
|
<a href="#tgl">Tagalog</a>, |
||||||
|
<a href="#swa">Swahili</a>, |
||||||
|
<a href="#aze">Azerbaijani</a>, |
||||||
|
<a href="#bel">Belarusian</a>, |
||||||
|
<a href="#afr">Afrikaans</a>, |
||||||
|
<a href="#sqi">Albanian</a>, |
||||||
|
<a href="#eus">Basque</a>, |
||||||
|
<a href="#epo">Esperanto</a>, |
||||||
|
<a href="#est">Estonian</a>, |
||||||
|
<a href="#glg">Galician</a>, |
||||||
|
<a href="#isl">Icelandic</a>, |
||||||
|
<a href="#lav">Latvian</a>, |
||||||
|
<a href="#mkd">Macedonian</a>, |
||||||
|
<a href="#msa">Malay</a>, |
||||||
|
<a href="#mlt">Maltese</a>, |
||||||
|
<a href="#grc">Ancient Greek</a>, |
||||||
|
<a href="#chr">Cherokee</a>, |
||||||
|
<a href="#enm">English (Old)</a>, |
||||||
|
<a href="#epo_alt">Esperanto alternative</a>, |
||||||
|
<a href="#frk">Frankish</a>, |
||||||
|
<a href="#frm">French (Old)</a>, |
||||||
|
<a href="#ita_old">Italian (Old)</a>, |
||||||
|
<a href="#equ">Math</a>, |
||||||
|
<a href="#srp">Serbian (Latin)</a>, |
||||||
|
<a href="#slk">Slovakian</a>, |
||||||
|
and |
||||||
|
<a href="#spa_old">Old Spanish!</a>)</div> --> |
||||||
|
|
||||||
|
</div> |
||||||
|
<a href="#get_started"> |
||||||
|
<div class="getStarted"> |
||||||
|
Get Started |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="wow" class="demo"> |
||||||
|
<div class="demoheader"> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<div class="editor"></div> |
||||||
|
<div class="hint"> |
||||||
|
Hint: you can, like, edit this code yo |
||||||
|
</div> |
||||||
|
<div class="running"> |
||||||
|
<div class="out">Initializing Magic...</div> |
||||||
|
<progress class="prog" value="0" max="1"></progress> |
||||||
|
</div> |
||||||
|
<div class="notrunning"> |
||||||
|
<div class="runbutton">Run Code</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<canvas class="display"></canvas> |
||||||
|
|
||||||
|
<img src="img/poem.png" class="to_ocr"> |
||||||
|
<div class="demofooter"> |
||||||
|
<div class="bookend"></div> |
||||||
|
<div class="langlabel selected">English </div><div class="vr"></div> |
||||||
|
<div class="langlabel">Chinese</div> <div class="vr"></div> |
||||||
|
<div class="langlabel">Russian</div> <div class="vr"></div> |
||||||
|
<div class="langlabel">Meme</div> <div class="bookend"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<!-- <div class="fullscreen"> |
||||||
|
</div> |
||||||
|
--><div class="fullscreen"> |
||||||
|
<div class="two"> |
||||||
|
|
||||||
|
<div id="explorer">The output of the demo will magically appear here :)</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="desc"> |
||||||
|
click stuff to explore the rich creamy Tesseract.js output |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div id="notconvinced" class="fullscreen"> |
||||||
|
|
||||||
|
|
||||||
|
<div id="get_started"> |
||||||
|
<div class="npm" >npm install tesseract.js</div> |
||||||
|
<!-- <br> --> |
||||||
|
<!-- — or — --> |
||||||
|
<div class="npm longasstag"><script src="__tesseractjs__"></script></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- (and German, Japanese, Spanish, French, Traditional Chinese, Portuguese, Italian, Polish, Turkish, Dutch, Arabic, Czech, Korean, Swedish, Vietnamese, Romanian, Greek, Indonesian, Hungarian, Danish, Bulgarian, Finnish, Norwegian, Ukrainian, Catalan, Croatian, Hebrew, Lithuanian, Slovenian, Hindi, Bengali, Telugu, Tamil, Kannada, Malayalam, Tagalog, Swahili, Azerbaijani, Belarusian, Afrikaans, Albanian, Basque, Esperanto, Estonian, Galician, Icelandic, Latvian, Macedonian, Malay, Maltese, Ancient Greek, Cherokee, English (Old), Esperanto alternative, Frankish, French (Old), Italian (Old), Math, Serbian (Latin), Slovakian, and Old Spanish!) --> |
||||||
|
|
||||||
|
|
||||||
|
<div class="rant randombold"> |
||||||
|
"Last time I got here, before I <b>even</b> arrived, they had ‘fuck <b>Kanye’</b> on the motherfuckin’ <b>port-a-potties.</b> But this year, we gon’ piss on ‘em, on they motherfuckin’ port-a-potties. How many of <b>y'all</b> don't give a fuck about <b>what</b> the press <b>say?</b> It's 2014. College Dropout came out 2004. I want y'all to know, <b>every</b> time I go to the studio, every time I <b>do</b> <b>an</b> <b>interview,</b> every time I make a motherfuckin' <b>t-shirt,</b> the thing <b>I</b> do, I give it <b>everything</b> <b>I</b> got. And when I talk that shit, it's so that <b>you</b> can talk that shit. If you a fan of me, you a fan of your motherfuckin' self. You can do something that'll change the world. Look at how they try to make me look. They <b>try</b> to make me look crazy.", |
||||||
|
<b></b> "I <b>need</b> a new cool. <b>What's</b> the new shit out? What's the new shit <b>out</b> <b>with</b> the most commercials at the Super Bowl? <b>Let's</b> <b>just</b> stop the music and play a Bruno Mars song right <b>now,</b> how about that? <b>They</b> told me I would never play at the Super Bowl. They told me I could never play at the Super Bowl. Not until I'm <b>super</b> old. Not until I'm <b>super</b> old... They told me I would never play at the <b>Super</b> Bowl. They told <b>me</b> I would never play at the <b>Super</b> <b>Bowl,</b> at least not until I'm super old. So I think it's time–hold up, f—k that toast.", |
||||||
|
<b></b> "I know people get mad at me when I compare myself, but that's the only way I <b>can</b> explain what <b>my</b> aspirations are. When I'm talkin' 'bout Walt Disney, when I'm talkin' 'bout Howard Hughes, when I'm talkin' 'bout Henry Ford, when I'm talkin' 'bout Beethoven, when I talk about <b>Mozart,</b> when I talk about Shakespeare, and they all had their time on this earth. And I'm only 37. And right now I'm rockin' to 90,000, of y'all motherfuckers <b>right</b> now. So I ain't goin' at anybody on the radio. I'm goin' <b>after</b> Shakespeare. I'm <b>goin'</b> after <b>Walt</b> Disney. I'm <b>going</b> after <b>Howard</b> Hughes. I'm going after David Stern. I'm goin' <b>after</b> Henry Ford. I'm going <b>after</b> Elon Musk. Okay, he is living, but he's my boy.", |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- |
||||||
|
<script src="https://rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script> |
||||||
|
--> |
||||||
|
|
||||||
|
<script src="__tesseractjs__"></script> |
||||||
|
|
||||||
|
<script src="main.js"></script> |
||||||
|
|
||||||
|
<script src="animation/raf.js"></script> |
||||||
|
<script src="animation/mouse.js"></script> |
||||||
|
<script src="animation/dimensions.js"></script> |
||||||
|
<script src="animation/main.js"></script> |
||||||
|
|
||||||
|
<script src="explorer/explorer.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,197 @@ |
|||||||
|
function builddemo(id, val){ |
||||||
|
var demo = document.getElementById(id) |
||||||
|
var prog = demo.querySelector('.prog') |
||||||
|
var out = demo.querySelector('.out') |
||||||
|
|
||||||
|
var disp = demo.querySelector('.display') |
||||||
|
var dctx = disp.getContext('2d') |
||||||
|
disp.width = 0 |
||||||
|
disp.height = 0 |
||||||
|
|
||||||
|
demo.querySelector('.runbutton').onclick = function(){ |
||||||
|
setrunning(0) |
||||||
|
run(editor) |
||||||
|
} |
||||||
|
|
||||||
|
function show_progress(p){ |
||||||
|
|
||||||
|
setrunning(0) |
||||||
|
console.log(p) |
||||||
|
if(p.loaded_lang_model) prog.value = p.loaded_lang_model |
||||||
|
if(p.recognized) prog.value = p.recognized |
||||||
|
out.innerText = JSON.stringify(p) |
||||||
|
out.innerText = JSON.stringify(p) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function setrunning(v){ |
||||||
|
if (v == 1) { |
||||||
|
demo.querySelector('.running').style.display = 'none' |
||||||
|
demo.querySelector('.notrunning').style.display = 'block' |
||||||
|
// out.style.visibility = 'hidden'
|
||||||
|
} |
||||||
|
else { |
||||||
|
demo.querySelector('.running').style.display = 'block' |
||||||
|
demo.querySelector('.notrunning').style.display = 'none' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function display(result) { |
||||||
|
|
||||||
|
React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo"}), document.getElementById("explorer")); |
||||||
|
|
||||||
|
setrunning(1) |
||||||
|
|
||||||
|
out.innerText = "Lightning Speeeeeeed" |
||||||
|
prog.value = 0 |
||||||
|
|
||||||
|
console.log(result) |
||||||
|
|
||||||
|
disp.width = demo.querySelector('.to_ocr').naturalWidth |
||||||
|
disp.height = demo.querySelector('.to_ocr').naturalHeight |
||||||
|
|
||||||
|
disp.style.width = demo.querySelector('.to_ocr').offsetWidth |
||||||
|
disp.style.height = demo.querySelector('.to_ocr').offsetHeight |
||||||
|
|
||||||
|
|
||||||
|
dctx.shadowColor = "rgba(255,255,255,.1)" |
||||||
|
dctx.shadowOffsetX = 0; |
||||||
|
dctx.shadowOffsetY = 0; |
||||||
|
dctx.shadowBlur = 10; |
||||||
|
|
||||||
|
dctx.fillRect(0,0,disp.width, disp.height) |
||||||
|
|
||||||
|
var m = result.words.map(function(w){ |
||||||
|
|
||||||
|
var b = w.bbox |
||||||
|
dctx.font = '20px Times' |
||||||
|
var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times" |
||||||
|
|
||||||
|
|
||||||
|
var k = function(){ |
||||||
|
dctx.font = font |
||||||
|
dctx.fillText(w.text, b.x0, w.baseline.y0); |
||||||
|
return font |
||||||
|
} |
||||||
|
|
||||||
|
return k |
||||||
|
}) |
||||||
|
|
||||||
|
var times = 0 |
||||||
|
var maxtimes = m.length + 100 |
||||||
|
function draw(i){ |
||||||
|
|
||||||
|
times++ |
||||||
|
dctx.fillStyle="rgba(30, 29, 49, .8)" |
||||||
|
dctx.fillStyle="#00DB9D" |
||||||
|
// dctx.globalAlpha = .1;
|
||||||
|
dctx.clearRect(0,0,disp.width, disp.height) |
||||||
|
dctx.fillRect(0,0,disp.width, disp.height) |
||||||
|
|
||||||
|
for (var j = 0; j < Math.min(i,m.length); j++) { |
||||||
|
var asdf = Math.min(Math.max(i - j,0), 100) |
||||||
|
dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")" |
||||||
|
m[j]() |
||||||
|
}; |
||||||
|
|
||||||
|
if(i<maxtimes){ |
||||||
|
setTimeout(function(){ |
||||||
|
draw(i+1) |
||||||
|
},10) |
||||||
|
} |
||||||
|
else{ |
||||||
|
console.log('done') |
||||||
|
} |
||||||
|
} |
||||||
|
draw(0) |
||||||
|
// result.words.forEach(function(word, index){
|
||||||
|
// var wdiv = document.createElement('div')
|
||||||
|
// wdiv.innerText = word.text+' '
|
||||||
|
// wdiv.style['font-family'] = "Times"
|
||||||
|
// wdiv.style.position = 'absolute'
|
||||||
|
// var scale = document.getElementById('to_ocr').offsetHeight / document.getElementById('to_ocr').naturalHeight
|
||||||
|
// wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale
|
||||||
|
// wdiv.style.color = "rgba(0,0,0,0)"
|
||||||
|
// wdiv.style.top = word.bbox.y0 * scale
|
||||||
|
// wdiv.style.left = word.bbox.x0 * scale
|
||||||
|
// wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale
|
||||||
|
// wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale
|
||||||
|
// document.getElementById('ocroutput').appendChild(wdiv)
|
||||||
|
// })
|
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener('resize', function() { |
||||||
|
disp.style.width = demo.querySelector('.to_ocr').offsetWidth |
||||||
|
disp.style.height = demo.querySelector('.to_ocr').offsetHeight |
||||||
|
}) |
||||||
|
|
||||||
|
function run(c){ |
||||||
|
eval(c.getValue()) |
||||||
|
} |
||||||
|
|
||||||
|
var editor = CodeMirror(demo.querySelector('.editor'),{ |
||||||
|
// lineNumbers: true,
|
||||||
|
viewportMargin: Infinity, |
||||||
|
value: val |
||||||
|
}); |
||||||
|
|
||||||
|
var sc = demo.querySelector('.demoheader') |
||||||
|
var scdiv = document.createElement('div') |
||||||
|
sc.appendChild(scdiv) |
||||||
|
scdiv.className = 'CodeMirror cm-s-default' |
||||||
|
// scdiv.className = 'cm-s-default'
|
||||||
|
CodeMirror.runMode('<script src="__tesseractjs__"></script>', {name: 'xml', htmlMode: true}, scdiv) |
||||||
|
|
||||||
|
// var scripttag = CodeMirror(,{
|
||||||
|
// mode: {name: 'xml', htmlMode: true},
|
||||||
|
// readOnly: 'nocursor',
|
||||||
|
// value:
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
return { |
||||||
|
|
||||||
|
run: function(){ |
||||||
|
var img = demo.querySelector('.to_ocr') |
||||||
|
|
||||||
|
if (img.complete) { |
||||||
|
run(editor) |
||||||
|
} else{ |
||||||
|
img.onload = function(){ |
||||||
|
run(editor) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
builddemo('wow', |
||||||
|
"var img = demo.querySelector('img.to_ocr')\n\n\ |
||||||
|
Tesseract\n\ |
||||||
|
.recognize( img, {progress: show_progress} )\n\ |
||||||
|
.then( display )") |
||||||
|
.run() |
||||||
|
|
||||||
|
addEventListener('scroll', function(e){ |
||||||
|
//frum jcurry
|
||||||
|
var doc = document.documentElement; |
||||||
|
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); |
||||||
|
if(top >= 227) { |
||||||
|
document.querySelector('.stickyheader').style['background-color'] = '#00DB9D' |
||||||
|
} |
||||||
|
else { |
||||||
|
document.querySelector('.stickyheader').style['background-color'] = 'rgba(0,0,0,0)' |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// document.querySelector('.getStarted')[0].onclick = function(){
|
||||||
|
// location.href = '#'
|
||||||
|
// location.href = '#get_started'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// builddemo('demo2',
|
||||||
|
// "var img = demo.querySelector('img.to_ocr')\n\n\
|
||||||
|
// Tesseract\n\
|
||||||
|
// .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\
|
||||||
|
// .then( display )")
|
||||||
Loading…
Reference in new issue