Guillermo
10 years ago
11 changed files with 692 additions and 301 deletions
@ -1,294 +1,333 @@
@@ -1,294 +1,333 @@
|
||||
@import 'explorer.css'; |
||||
|
||||
.fullscreen { |
||||
width:100%; |
||||
min-height: 100%; |
||||
} |
||||
|
||||
|
||||
.run, .running { |
||||
width: 100%; |
||||
height: 42px; |
||||
text-align: center; |
||||
width: 100%; |
||||
min-height: 100%; |
||||
} |
||||
.stickyheader { |
||||
position: fixed; |
||||
width: 100%; |
||||
z-index: 3; |
||||
height: 50px; |
||||
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 { |
||||
display: none |
||||
display: none |
||||
} |
||||
|
||||
#wow .notrunning { |
||||
display: none |
||||
display: none |
||||
} |
||||
|
||||
#wow .running { |
||||
display: block |
||||
display: block |
||||
} |
||||
|
||||
.runbutton { |
||||
padding-top: 6px; |
||||
padding-bottom: 10px; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
padding-top: 9px; |
||||
padding-bottom: 10px; |
||||
font-weight: 500; |
||||
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 { |
||||
text-decoration: none; |
||||
/*font-weight: bold;*/ |
||||
text-decoration: none; |
||||
color: #5BA9F2; |
||||
/*font-weight: bold;*/ |
||||
} |
||||
|
||||
.display { |
||||
position: absolute; |
||||
/*background: rgba(0,0,255,.1);*/ |
||||
position: absolute; |
||||
/*background: rgba(0,0,255,.1);*/ |
||||
} |
||||
|
||||
svg { |
||||
height: 100% |
||||
height: 100% |
||||
} |
||||
|
||||
#marterial { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 330px; |
||||
z-index: -1; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 330px; |
||||
z-index: -1; |
||||
overflow: hidden; |
||||
background-color: #00DB9D; |
||||
/*background-image: url(../img/stars.jpeg);*/ |
||||
background-size: cover; |
||||
background-position: bottom; |
||||
} |
||||
|
||||
.out { |
||||
padding: 10px; |
||||
padding-bottom: 0px; |
||||
text-align: center; |
||||
font-family: monospace; |
||||
padding: 10px; |
||||
padding-bottom: 0px; |
||||
text-align: center; |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.hint { |
||||
text-align: left; |
||||
padding-left: 14px |
||||
|
||||
text-align: left; |
||||
padding-left: 14px; |
||||
font-size: 10px; |
||||
color: #56607D; |
||||
} |
||||
|
||||
.langlabel { |
||||
display: inline-block; |
||||
flex-grow: 1; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
display: inline-block; |
||||
flex-grow: 1; |
||||
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 { |
||||
width: 400px; |
||||
max-width: 100%; |
||||
position: relative; |
||||
width: 400px; |
||||
max-width: 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
.demofooter { |
||||
padding: 10px; |
||||
/*padding-top: 0px;*/ |
||||
text-align: center; |
||||
/*display: flex*/ |
||||
} |
||||
padding: 10px; |
||||
/*padding-top: 0px;*/ |
||||
|
||||
text-align: center; |
||||
/*display: flex*/ |
||||
} |
||||
#wow .demofooter { |
||||
display: flex; |
||||
padding: 0px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
display: flex; |
||||
padding: 0px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
#logo { |
||||
text-align: center; |
||||
padding-top: 70px; |
||||
height: 182px; |
||||
text-align: center; |
||||
padding-top: 70px; |
||||
height: 182px; |
||||
} |
||||
|
||||
.to_ocr { |
||||
width: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
#wow { |
||||
margin-top: 25px; |
||||
margin-top: 25px; |
||||
} |
||||
|
||||
.demo { |
||||
border-radius: 5px; |
||||
width:500px; |
||||
text-align: left |
||||
} |
||||
border-radius: 5px; |
||||
width: 500px; |
||||
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 { |
||||
overflow: hidden; |
||||
border-radius: 5px 5px 0px 0px |
||||
overflow: hidden; |
||||
border-radius: 5px 5px 0px 0px; |
||||
font-size: 8.3px; |
||||
} |
||||
|
||||
#canvas { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
pointer-events:none; |
||||
z-index: 0; |
||||
background-image: url(../img/logowhite.png); |
||||
background-size: cover; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
pointer-events: none; |
||||
z-index: 0; |
||||
background-image: url(../img/logowhite.png); |
||||
background-size: cover; |
||||
} |
||||
|
||||
#splash { |
||||
text-align: center; |
||||
position: relative; |
||||
text-align: center; |
||||
position: relative; |
||||
} |
||||
|
||||
.desc { |
||||
text-align: left; |
||||
font-size: 18px; |
||||
text-align: left; |
||||
font-size: 18px; |
||||
color: #343E70; |
||||
} |
||||
|
||||
.vr { |
||||
display: inline-block; |
||||
height: 40px; |
||||
display: inline-block; |
||||
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 { |
||||
max-width: 960; |
||||
|
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-top: 8%; |
||||
|
||||
|
||||
max-width: 960; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-top: 8%; |
||||
} |
||||
|
||||
|
||||
.randombold { |
||||
font-size: 18px; |
||||
/*font-family: Georgia;*/ |
||||
letter-spacing: .8px; |
||||
line-height: 37px; |
||||
} |
||||
font-size: 18px; |
||||
/*font-family: Georgia;*/ |
||||
|
||||
letter-spacing: .8px; |
||||
line-height: 37px; |
||||
} |
||||
.rant { |
||||
padding-left: 8%; |
||||
padding-right: 8%; |
||||
padding-left: 8%; |
||||
padding-right: 8%; |
||||
} |
||||
|
||||
.npm { |
||||
margin-top: 20px; |
||||
padding-left: 15px; |
||||
} |
||||
|
||||
.longasstag{ |
||||
text-align: left; |
||||
white-space: normal; |
||||
word-break: break-all; |
||||
margin-top: 20px; |
||||
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; |
||||
} |
||||
|
||||
|
||||
#code { |
||||
text-align: center; |
||||
width: 335px; |
||||
border-radius: 5px; |
||||
margin-right: 40px; |
||||
margin-left: 40px; |
||||
margin-top: 120px; |
||||
|
||||
text-align: center; |
||||
width: 335px; |
||||
border-radius: 5px; |
||||
margin-right: 40px; |
||||
margin-left: 40px; |
||||
margin-top: 120px; |
||||
} |
||||
|
||||
.woloasdf { |
||||
padding-top: 8%; |
||||
padding-top: 8%; |
||||
} |
||||
|
||||
|
||||
.fork{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
border: 0; |
||||
z-index: 2; |
||||
.fork { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
border: 0; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.fork img { |
||||
width: 149px; |
||||
width: 149px; |
||||
} |
||||
|
||||
.two { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-around; |
||||
max-width: 1100px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-around; |
||||
max-width: 1100px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
|
||||
#two { |
||||
margin-bottom: 8%; |
||||
margin-bottom: 8%; |
||||
} |
||||
|
||||
.demoheader .CodeMirror { |
||||
padding-bottom: 9px; |
||||
padding-top: 9px; |
||||
padding-left: 13px; |
||||
padding-bottom: 9px; |
||||
padding-top: 9px; |
||||
padding-left: 13px; |
||||
background-color: transparent; |
||||
} |
||||
hr { |
||||
border: none; |
||||
border-top: 1px solid #ddd; |
||||
margin: 0px; |
||||
} |
||||
|
||||
|
||||
#ocroutput { |
||||
position: relative; |
||||
position: relative; |
||||
} |
||||
|
||||
.manyLanguages { |
||||
font-size: 7px; |
||||
padding-top: 10px; |
||||
font-size: 7px; |
||||
padding-top: 10px; |
||||
opacity: .3; |
||||
} |
||||
|
||||
|
||||
body { |
||||
padding: 0px; |
||||
margin: 0px; |
||||
font-family: Lato;/*, Helvetica, Arial, sans-serif;*/ |
||||
font-weight: 300; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
font-family: Lato; |
||||
/*, Helvetica, Arial, sans-serif;*/ |
||||
|
||||
font-weight: 300; |
||||
background-color: white; |
||||
} |
||||
|
||||
button { |
||||
|
||||
height: 60px; |
||||
width: 240px; |
||||
|
||||
margin-top: 10px; |
||||
|
||||
font: inherit; |
||||
font-size: 30px; |
||||
|
||||
-webkit-transition: all 0.7s ease; |
||||
transition: all 0.7s ease; |
||||
|
||||
outline: 0; |
||||
height: 60px; |
||||
width: 240px; |
||||
margin-top: 10px; |
||||
font: inherit; |
||||
font-size: 30px; |
||||
-webkit-transition: all 0.7s ease; |
||||
transition: all 0.7s ease; |
||||
outline: 0; |
||||
color: #FFF; |
||||
background: #5A4E60; |
||||
border-radius: 5px; |
||||
border: solid 1px #fff; |
||||
} |
||||
|
||||
button:hover { |
||||
cursor: pointer; |
||||
cursor: pointer; |
||||
background: rgba(255, 255, 255, 1); |
||||
border: solid 1px #ddd; |
||||
} |
||||
|
||||
@media (max-width: 914px) { |
||||
#logo { |
||||
padding-top: 8%; |
||||
height: auto; |
||||
} |
||||
|
||||
#marterial { |
||||
height: 100%; |
||||
} |
||||
|
||||
.demo { |
||||
margin-right: 8%; |
||||
margin-left: 8%; |
||||
} |
||||
|
||||
#code { |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
width: 400px; |
||||
} |
||||
|
||||
#fork { |
||||
width: 28%; |
||||
} |
||||
button { |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0) |
||||
} |
||||
.desc { |
||||
color: #FFFFFF; |
||||
text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); |
||||
} |
||||
.desc a { |
||||
color: #B8EEFF; |
||||
} |
||||
.npm { |
||||
box-shadow: 0px 0px 20px 4px rgb(180, 146, 150); |
||||
} |
||||
#logo { |
||||
padding-top: 8%; |
||||
height: auto; |
||||
} |
||||
#marterial { |
||||
height: 100%; |
||||
} |
||||
.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 @@
@@ -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 @@
@@ -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