changes

app.py

@@ -1,55 +1,48 @@
+# app.py
+from flask import Flask, render_template, request, redirect, flash, url_for
 import os
-from flask import Flask, render_template, request, send_from_directory
-from werkzeug.utils import secure_filename
 from paddleocr import PaddleOCR
+from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
-
-# Configuration
-UPLOAD_FOLDER = 'uploads'
+app.secret_key = os.environ.get('SECRET_KEY', 'change-this')  # Replace in production
+UPLOAD_FOLDER = os.path.join('static', 'uploads')
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-os.makedirs(UPLOAD_FOLDER, exist_ok=True)
-ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
 
-def allowed_file(filename):
-    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
-# Initialize PaddleOCR (CPU mode)
-ocr = PaddleOCR(use_angle_cls=True, lang='en')
+# Initialize PaddleOCR once (CPU mode, English; angle_cls=False speeds up simple text)
+ocr = PaddleOCR(use_angle_cls=False, use_gpu=False, lang='en')
 
 @app.route('/', methods=['GET', 'POST'])
 def index():
-    filename = None
     extracted_text = None
-    error = None
+    image_file = None
 
     if request.method == 'POST':
-        file = request.files.get('image')
-        if not file or file.filename == '' or not allowed_file(file.filename):
-            error = "Please upload a valid image file (png/jpg/jpeg/gif)."
-        else:
-            # Save the uploaded file
-            filename = secure_filename(file.filename)
-            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            file.save(filepath)
-
-            # Run OCR on the saved image
-            result = ocr.ocr(filepath, cls=True)
-            # Flatten nested results if needed
-            if isinstance(result, list) and len(result) == 1 and isinstance(result[0], list):
-                result = result[0]
-            # Extract text lines
-            lines = [line[1][0] for line in result]
-            extracted_text = "\n".join(lines) if lines else "No text detected."
-
-    return render_template('index.html', filename=filename,
-                           extracted_text=extracted_text, error=error)
-
-@app.route('/uploads/<filename>')
-def uploaded_file(filename):
-    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
-
-if __name__ == '__main__':
-    # Use the PORT environment variable if provided by Render, else 5000
-    port = int(os.environ.get('PORT', 5000))
-    app.run(host='0.0.0.0', port=port)
+        # Check file in request
+        if 'image' not in request.files:
+            flash('No file part in the request.')
+            return redirect(request.url)
+        file = request.files['image']
+        if file.filename == '':
+            flash('No image selected.')
+            return redirect(request.url)
+
+        # Save uploaded file
+        filename = secure_filename(file.filename)
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(file_path)
+
+        # Run PaddleOCR on the saved image (CPU mode)
+        result = ocr.ocr(file_path, cls=False)
+        # Collect recognized text lines
+        lines = []
+        for res_line in result:
+            for box, (txt, prob) in res_line:
+                lines.append(txt)
+        extracted_text = "\n".join(lines)
+        image_file = filename
+
+    return render_template('index.html', extracted_text=extracted_text, image_file=image_file)

requirements.txt

@@ -1,5 +1,5 @@
-Flask>=2.0
-gunicorn
-paddlepaddle
+Flask>=2.0.0
+gunicorn>=20.1.0
 paddleocr>=2.0.1
-opencv-python-headless
+paddlepaddle>=2.0.0
+opencv-python-headless>=4.8.0

static/style.css

@@ -103,70 +103,76 @@ button:hover {
   transform: translate(-50%, -50%);
   z-index: 1000;
 } */
+/* static/style.css */
 body {
-    font-family: 'Poppins', sans-serif;
-    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    background: #f0f2f5;
+    font-family: 'Segoe UI', Tahoma, sans-serif;
+    color: #333;
     margin: 0;
+    padding: 0;
   }
-  
   .container {
-    background: #fff;
-    padding: 30px 40px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     max-width: 600px;
-    width: 100%;
-    animation: fadeIn 1s ease-in;
+    margin: 40px auto;
+    background: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
-  
-  h1 {
-    margin-bottom: 20px;
-    color: #333;
-    font-weight: 600;
+  h1, h2 {
+    color: #444;
+    margin-bottom: 10px;
+  }
+  p {
+    color: #666;
   }
-  
-  .upload-form {
+  form {
+    margin-top: 20px;
     display: flex;
-    flex-direction: column;
-    gap: 15px;
-    margin-bottom: 30px;
+    gap: 10px;
   }
-  
-  #spinner {
-    position: fixed;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1000;
+  input[type="file"] {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
   }
-  
-  .preview img, #result-img {
-    max-width: 100%;
-    border-radius: 10px;
-    border: 1px solid #ddd;
-    margin-top: 10px;
+  button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
   }
-  
-  .output, #extracted-text {
-    background: #f9f9f9;
-    padding: 15px;
-    border-radius: 10px;
-    text-align: left;
+  button:hover {
+    background-color: #0056b3;
+  }
+  .result, .image-preview {
+    margin-top: 20px;
+    padding: 10px;
+    border-top: 1px solid #e1e1e1;
+  }
+  .result pre {
+    background: #f8f9fa;
+    padding: 10px;
+    border-radius: 4px;
     white-space: pre-wrap;
-    margin-top: 10px;
   }
-  
-  .error {
-    color: red;
-    font-weight: bold;
-    margin-top: 10px;
+  .flashes {
+    list-style: none;
+    padding: 10px;
+    background: #ffe0e0;
+    border: 1px solid #ffb3b3;
+    border-radius: 4px;
+    color: #a94442;
   }
-  
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+  .flashes li {
+    margin: 5px 0;
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
   }
   

templates/index.html

@@ -1,59 +1,43 @@
+<!-- templates/index.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-  <meta charset="UTF-8">
-  <title>OCR Application</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-  <!-- Google Font -->
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
-  <!-- Custom Styles -->
-  <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
+    <title>OCR App</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
-  <div class="container text-center">
-    <h1 class="mt-4">OCR with PaddleOCR</h1>
-    <!-- Upload Form -->
-    <form id="upload-form" method="post" enctype="multipart/form-data" class="upload-form mx-auto">
-      <input type="file" name="image" accept="image/*" class="form-control mb-3" required>
-      <button type="submit" class="btn btn-primary">Upload &amp; Extract Text</button>
-    </form>
+  <div class="container">
+    <h1>Image Text Extraction</h1>
+    <p>Upload an image to extract text using PaddleOCR.</p>
 
-    <!-- Spinner (shown while processing) -->
-    <div id="spinner" class="d-none">
-      <div class="spinner-border text-primary" role="status">
-        <span class="visually-hidden">Processing...</span>
-      </div>
-    </div>
+    {% with messages = get_flashed_messages() %}
+      {% if messages %}
+        <ul class="flashes">
+        {% for message in messages %}
+          <li>{{ message }}</li>
+        {% endfor %}
+        </ul>
+      {% endif %}
+    {% endwith %}
 
-    <!-- Error Message -->
-    {% if error %}
-    <div class="error mt-3">{{ error }}</div>
-    {% endif %}
+    <form method="POST" enctype="multipart/form-data">
+      <input type="file" name="image" accept="image/*" required>
+      <button type="submit">Extract Text</button>
+    </form>
 
-    <!-- Display Uploaded Image Preview -->
-    {% if filename %}
-    <div class="preview mt-4">
-      <h4>Uploaded Image</h4>
-      <img id="result-img" src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
-    </div>
+    {% if extracted_text %}
+      <div class="result">
+        <h2>Extracted Text:</h2>
+        <pre>{{ extracted_text }}</pre>
+      </div>
     {% endif %}
 
-    <!-- Display Extracted Text -->
-    {% if extracted_text %}
-    <div class="output mt-4">
-      <h4>Extracted Text</h4>
-      <pre id="extracted-text">{{ extracted_text }}</pre>
-    </div>
+    {% if image_file %}
+      <div class="image-preview">
+        <h2>Uploaded Image:</h2>
+        <img src="{{ url_for('static', filename='uploads/' + image_file) }}" alt="Uploaded Image">
+      </div>
     {% endif %}
   </div>
-
-  <!-- Show spinner on form submit -->
-  <script>
-    document.getElementById('upload-form').onsubmit = () => {
-      document.getElementById('spinner').classList.remove('d-none');
-    };
-  </script>
 </body>
 </html>