Spaces:
Sleeping
Sleeping
| from fastapi import FastAPI, File, UploadFile | |
| from fastapi.responses import HTMLResponse | |
| from io import BytesIO | |
| import pytesseract | |
| from PIL import Image | |
| import subprocess | |
| # Initialize FastAPI app | |
| app = FastAPI() | |
| def install_tesseract(): | |
| try: | |
| subprocess.run(['apt-get', 'update'], check=True) | |
| subprocess.run(['apt-get', 'install', '-y', 'tesseract-ocr'], check=True) | |
| except subprocess.CalledProcessError as e: | |
| print(f"Error installing Tesseract: {e}") | |
| install_tesseract() | |
| # Home route | |
| async def home(): | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image to Text Converter</title> | |
| <style> | |
| 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; | |
| } | |
| .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; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| color: #4CAF50; | |
| } | |
| p { | |
| color: #666; | |
| } | |
| .upload-box { | |
| margin: 20px auto; | |
| padding: 30px; | |
| border: 2px dashed #ccc; | |
| border-radius: 10px; | |
| background-color: #f9f9f9; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .upload-box:hover { | |
| background-color: #f4f4f4; | |
| } | |
| .upload-box span { | |
| color: #888; | |
| font-size: 14px; | |
| display: block; | |
| } | |
| .upload-box input[type="file"] { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| cursor: pointer; | |
| } | |
| .process-button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .process-button:hover { | |
| background-color: #45a049; | |
| } | |
| .result-box { | |
| margin-top: 20px; | |
| text-align: left; | |
| } | |
| pre { | |
| background-color: #f4f4f4; | |
| padding: 10px; | |
| border-radius: 5px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Image to Text Converter</h1> | |
| <p>Quickly extract text from your uploaded images!</p> | |
| <form action="/upload_image/" method="POST" enctype="multipart/form-data"> | |
| <div class="upload-box"> | |
| <span>Drag & Drop the Images<br>Or Click to Browse</span> | |
| <input type="file" name="image" accept="image/*" id="image-file"> | |
| </div> | |
| <button class="process-button" type="submit">Upload Image</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| return HTMLResponse(content=html_content) | |
| # Upload image route (image is processed directly in memory) | |
| async def upload_image(image: UploadFile = File(...)): | |
| # Read the image file directly into memory | |
| image_bytes = await image.read() | |
| image_stream = BytesIO(image_bytes) | |
| # Open the image with PIL (Pillow) | |
| img = Image.open(image_stream) | |
| # Process the image and extract text | |
| extracted_text = pytesseract.image_to_string(img) | |
| # Convert image to base64 for displaying in HTML | |
| import base64 | |
| buffered = BytesIO() | |
| img.save(buffered, format="PNG") | |
| img_str = base64.b64encode(buffered.getvalue()).decode("utf-8") | |
| # HTML response with image and extracted text | |
| html_response = f""" | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Extracted Text</title> | |
| <style> | |
| 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; | |
| }} | |
| .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; | |
| }} | |
| h1 {{ | |
| font-size: 24px; | |
| color: #4CAF50; | |
| }} | |
| pre {{ | |
| background-color: #f4f4f4; | |
| padding: 10px; | |
| border-radius: 5px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| }} | |
| .process-button {{ | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| }} | |
| .process-button:hover {{ | |
| background-color: #45a049; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Extracted Text</h1> | |
| <p>Here is the text extracted from the image you uploaded:</p> | |
| <img src="data:image/png;base64,{img_str}" alt="Uploaded Image" style="max-width: 100%; margin-bottom: 20px;"> | |
| <pre>{extracted_text}</pre> | |
| <form action="/" method="get"> | |
| <button class="process-button" type="submit">Upload Another Image</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| return HTMLResponse(content=html_response) | |