Hugging Face's logo

Spaces:
usmanyousaf
/
image-to-text
Sleeping

App Files Community
usmanyousaf commited on
Commit
9600354
·
verified ·
1 Parent(s): 26ca40f

Update main.py

Browse files
Files changed (1) hide show
  1. main.py +143 -25
main.py CHANGED
@@ -3,14 +3,11 @@ from fastapi.responses import HTMLResponse
3
  from io import BytesIO
4
  import pytesseract
5
  from PIL import Image
6
- import cv2
7
- import numpy as np
8
 
9
  # Initialize FastAPI app
10
  app = FastAPI()
11
 
12
- import subprocess
13
-
14
  def install_tesseract():
15
  try:
16
  subprocess.run(['apt-get', 'update'], check=True)
@@ -20,9 +17,6 @@ def install_tesseract():
20
 
21
  install_tesseract()
22
 
23
- # Serve static files (images, etc.)
24
- # app.mount("/static", StaticFiles(directory="static"), name="static") # Not needed if you're not saving the images
25
-
26
  # Home route
27
  @app.get("/", response_class=HTMLResponse)
28
  async def home():
@@ -34,23 +28,82 @@ async def home():
34
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
35
  <title>Image to Text Converter</title>
36
  <style>
37
- body { font-family: Arial, sans-serif; background-color: #000000; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
38
- .container { text-align: center; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; }
39
- h1 { font-size: 24px; color: #4CAF50; }
40
- p { color: #666; }
41
- .upload-box { margin: 20px auto; padding: 30px; border: 2px dashed #ccc; border-radius: 10px; background-color: #f9f9f9; cursor: pointer; position: relative; }
42
- .upload-box:hover { background-color: #f4f4f4; }
43
- .upload-box span { color: #888; font-size: 14px; display: block; }
44
- .upload-box input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
45
- .process-button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
46
- .process-button:hover { background-color: #45a049; }
47
- .result-box { margin-top: 20px; text-align: left; }
48
- .result-box img { max-width: 100%; border-radius: 5px; margin-top: 10px; }
49
- .actions { margin-top: 20px; }
50
- .actions button { margin: 5px; background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; }
51
- .actions button:hover { background-color: #45a049; }
52
- pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
53
- .error { color: red; font-weight: bold; margin-bottom: 20px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </style>
55
  </head>
56
  <body>
@@ -83,4 +136,69 @@ async def upload_image(image: UploadFile = File(...)):
83
  # Process the image and extract text
84
  extracted_text = pytesseract.image_to_string(img)
85
 
86
- return {"extracted_text": extracted_text}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  from io import BytesIO
4
  import pytesseract
5
  from PIL import Image
6
+ import subprocess
 
7
 
8
  # Initialize FastAPI app
9
  app = FastAPI()
10
 
 
 
11
  def install_tesseract():
12
  try:
13
  subprocess.run(['apt-get', 'update'], check=True)
 
17
 
18
  install_tesseract()
19
 
 
 
 
20
  # Home route
21
  @app.get("/", response_class=HTMLResponse)
22
  async def home():
 
28
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
29
  <title>Image to Text Converter</title>
30
  <style>
31
+ body {
32
+ font-family: Arial, sans-serif;
33
+ background-color: #000000;
34
+ color: #333;
35
+ margin: 0;
36
+ padding: 0;
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ height: 100vh;
41
+ }
42
+ .container {
43
+ text-align: center;
44
+ background: #fff;
45
+ padding: 30px;
46
+ border-radius: 10px;
47
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
48
+ width: 90%;
49
+ max-width: 600px;
50
+ }
51
+ h1 {
52
+ font-size: 24px;
53
+ color: #4CAF50;
54
+ }
55
+ p {
56
+ color: #666;
57
+ }
58
+ .upload-box {
59
+ margin: 20px auto;
60
+ padding: 30px;
61
+ border: 2px dashed #ccc;
62
+ border-radius: 10px;
63
+ background-color: #f9f9f9;
64
+ cursor: pointer;
65
+ position: relative;
66
+ }
67
+ .upload-box:hover {
68
+ background-color: #f4f4f4;
69
+ }
70
+ .upload-box span {
71
+ color: #888;
72
+ font-size: 14px;
73
+ display: block;
74
+ }
75
+ .upload-box input[type="file"] {
76
+ position: absolute;
77
+ width: 100%;
78
+ height: 100%;
79
+ top: 0;
80
+ left: 0;
81
+ opacity: 0;
82
+ cursor: pointer;
83
+ }
84
+ .process-button {
85
+ background-color: #4CAF50;
86
+ color: white;
87
+ padding: 10px 20px;
88
+ border: none;
89
+ border-radius: 5px;
90
+ cursor: pointer;
91
+ font-size: 16px;
92
+ }
93
+ .process-button:hover {
94
+ background-color: #45a049;
95
+ }
96
+ .result-box {
97
+ margin-top: 20px;
98
+ text-align: left;
99
+ }
100
+ pre {
101
+ background-color: #f4f4f4;
102
+ padding: 10px;
103
+ border-radius: 5px;
104
+ white-space: pre-wrap;
105
+ word-wrap: break-word;
106
+ }
107
  </style>
108
  </head>
109
  <body>
 
136
  # Process the image and extract text
137
  extracted_text = pytesseract.image_to_string(img)
138
 
139
+ html_response = f"""
140
+ <!DOCTYPE html>
141
+ <html lang="en">
142
+ <head>
143
+ <meta charset="UTF-8">
144
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
145
+ <title>Extracted Text</title>
146
+ <style>
147
+ body {{
148
+ font-family: Arial, sans-serif;
149
+ background-color: #000000;
150
+ color: #333;
151
+ margin: 0;
152
+ padding: 0;
153
+ display: flex;
154
+ justify-content: center;
155
+ align-items: center;
156
+ height: 100vh;
157
+ }}
158
+ .container {{
159
+ text-align: center;
160
+ background: #fff;
161
+ padding: 30px;
162
+ border-radius: 10px;
163
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
164
+ width: 90%;
165
+ max-width: 600px;
166
+ }}
167
+ h1 {{
168
+ font-size: 24px;
169
+ color: #4CAF50;
170
+ }}
171
+ pre {{
172
+ background-color: #f4f4f4;
173
+ padding: 10px;
174
+ border-radius: 5px;
175
+ white-space: pre-wrap;
176
+ word-wrap: break-word;
177
+ }}
178
+ .process-button {{
179
+ background-color: #4CAF50;
180
+ color: white;
181
+ padding: 10px 20px;
182
+ border: none;
183
+ border-radius: 5px;
184
+ cursor: pointer;
185
+ font-size: 16px;
186
+ }}
187
+ .process-button:hover {{
188
+ background-color: #45a049;
189
+ }}
190
+ </style>
191
+ </head>
192
+ <body>
193
+ <div class="container">
194
+ <h1>Extracted Text</h1>
195
+ <p>Here is the text extracted from the image you uploaded:</p>
196
+ <pre>{extracted_text}</pre>
197
+ <form action="/" method="get">
198
+ <button class="process-button" type="submit">Upload Another Image</button>
199
+ </form>
200
+ </div>
201
+ </body>
202
+ </html>
203
+ """
204
+ return HTMLResponse(content=html_response)