Yay
This commit is contained in:
parent
2921070068
commit
ec393f1cde
5 changed files with 9136 additions and 28743 deletions
28700
package-lock.json
generated
28700
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -9,6 +9,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"tesseract.js": "^3.0.2",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
38
src/App.css
38
src/App.css
|
@ -1,38 +1,26 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
|
||||
.App-image {
|
||||
width: 60vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
|
||||
.App-main {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
font-size: calc(7px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
53
src/App.js
53
src/App.js
|
@ -1,25 +1,42 @@
|
|||
import logo from './logo.svg';
|
||||
import { useState} from 'react';
|
||||
import Tesseract from 'tesseract.js';
|
||||
import './App.css';
|
||||
|
||||
|
||||
function App() {
|
||||
const [imagePath, setImagePath] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const handleChange = (event) => {
|
||||
setImagePath(URL.createObjectURL(event.target.files[0]));
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
|
||||
Tesseract.recognize(
|
||||
imagePath,
|
||||
'eng',
|
||||
{ logger: m => console.log(m) }
|
||||
).then(({ data: { text } }) => {
|
||||
console.log(text);
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
<main className="App-main">
|
||||
<h3>Actual imagePath uploaded</h3>
|
||||
<img
|
||||
src={imagePath} className="App-image" alt="logo"/>
|
||||
|
||||
<h3>Extracted text</h3>
|
||||
<div className="text-box">
|
||||
<p> {text} </p>
|
||||
</div>
|
||||
<input type="file" onChange={handleChange} />
|
||||
<button onClick={handleClick} style={{height:50}}> convert to text</button>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
export default App
|
Loading…
Reference in a new issue