Update main.py

main.py

@@ -1,16 +1,21 @@
 from fastapi import FastAPI, File, UploadFile
-from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.responses import HTMLResponse
 from io import BytesIO
 import pytesseract
 from PIL import Image
-import os
+import subprocess
 
 # Initialize FastAPI app
 app = FastAPI()
 
-# Directory for storing uploaded images
-UPLOAD_DIR = "uploaded_images"
-os.makedirs(UPLOAD_DIR, exist_ok=True)
+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
 @app.get("/", response_class=HTMLResponse)
@@ -23,23 +28,82 @@ async def home():
         <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; }
-            .result-box img { max-width: 100%; border-radius: 5px; margin-top: 10px; }
-            .actions { margin-top: 20px; }
-            .actions button { margin: 5px; background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; }
-            .actions button:hover { background-color: #45a049; }
-            pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
-            .error { color: red; font-weight: bold; margin-bottom: 20px; }
+            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>
@@ -60,67 +124,89 @@ async def home():
     return HTMLResponse(content=html_content)
 
 # Upload image route (image is processed directly in memory)
-@app.post("/upload_image/", response_class=HTMLResponse)
+@app.post("/upload_image/")
 async def upload_image(image: UploadFile = File(...)):
-    # Save the uploaded image to the server
+    # Read the image file directly into memory
     image_bytes = await image.read()
-    file_path = os.path.join(UPLOAD_DIR, image.filename)
-    
-    with open(file_path, "wb") as f:
-        f.write(image_bytes)
-    
+    image_stream = BytesIO(image_bytes)
+
     # Open the image with PIL (Pillow)
-    img = Image.open(BytesIO(image_bytes))
+    img = Image.open(image_stream)
 
     # Process the image and extract text
     extracted_text = pytesseract.image_to_string(img)
 
-    # Generate URL for the image
-    image_url = f"/uploaded_images/{image.filename}"
+    # 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_content = f"""
+    # 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>Image to Text Converter</title>
+        <title>Extracted Text</title>
         <style>
-            /* Include the same styles as before */
+            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>Image to Text Converter</h1>
-            <p>Quickly extract text from your uploaded images!</p>
-            <div class="result-box">
-                <h2>Uploaded Image:</h2>
-                <img src="{image_url}" alt="Uploaded Image">
-            </div>
-            <div class="result-box">
-                <h2>Extracted Text:</h2>
-                <pre>{extracted_text}</pre>
-            </div>
-            <div class="actions">
-                <button onclick="copyToClipboard()">Copy to Clipboard</button>
-                <button onclick="window.location.href='/'">Upload Another Image</button>
-            </div>
+            <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>
-        <script>
-            function copyToClipboard() {
-                const text = document.querySelector('pre').textContent;
-                navigator.clipboard.writeText(text).then(() => {
-                    alert('Text copied to clipboard!');
-                });
-            }
-        </script>
     </body>
     </html>
     """
-    return HTMLResponse(content=html_content)
-
-# Serve the uploaded images statically
-@app.get("/uploaded_images/{filename}")
-async def serve_image(filename: str):
-    file_path = os.path.join(UPLOAD_DIR, filename)
-    return FileResponse(file_path)
+    return HTMLResponse(content=html_response)