new files

app.py

@@ -9,43 +9,47 @@ app = Flask(__name__)
 UPLOAD_FOLDER = '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
 
-# Initialize OCR model
+# Initialize PaddleOCR (CPU mode)
 ocr = PaddleOCR(use_angle_cls=True, lang='en')
 
 @app.route('/', methods=['GET', 'POST'])
 def index():
     filename = None
     extracted_text = None
+    error = None
 
     if request.method == 'POST':
         file = request.files.get('image')
         if not file or file.filename == '' or not allowed_file(file.filename):
-            return render_template('index.html', error="Please upload a valid image file (png/jpg/jpeg/gif).")
-
-        # Save the uploaded file
-        filename = secure_filename(file.filename)
-        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-        file.save(filepath)
-
-        # Run OCR
-        result = ocr.ocr(filepath, cls=True)
-        # Flatten if nested
-        if isinstance(result, list) and len(result) == 1 and isinstance(result[0], list):
-            result = result[0]
-        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 = "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)

requirements.txt

@@ -1,7 +1,5 @@
 Flask>=2.0
 gunicorn
-paddleocr
-paddlepaddle==2.5.2
-opencv-python
-numpy
-Pillow
+paddlepaddle
+paddleocr>=2.0.1
+opencv-python-headless

static/style.css

@@ -104,59 +104,69 @@ button:hover {
   z-index: 1000;
 } */
 body {
-  font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #74ebd5, #ACB6E5);
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 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;
-}
-
-h1 { margin-bottom: 20px; color: #333; font-weight: 600; }
-
-.upload-form { 
-  display: flex; 
-  flex-direction: column; 
-  gap: 15px; 
-}
-
-#spinner {
-  position: fixed;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-}
-
-.preview img, #result-img {
-  max-width: 100%;
-  border-radius: 10px;
-  border: 1px solid #ddd;
-  margin-top: 10px;
-}
-
-.output, #extracted-text {
-  background: #f9f9f9;
-  padding: 15px;
-  border-radius: 10px;
-  text-align: left;
-  white-space: pre-wrap;
-  margin-top: 10px;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 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;
+  }
+  
+  h1 {
+    margin-bottom: 20px;
+    color: #333;
+    font-weight: 600;
+  }
+  
+  .upload-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 30px;
+  }
+  
+  #spinner {
+    position: fixed;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+  }
+  
+  .preview img, #result-img {
+    max-width: 100%;
+    border-radius: 10px;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+  }
+  
+  .output, #extracted-text {
+    background: #f9f9f9;
+    padding: 15px;
+    border-radius: 10px;
+    text-align: left;
+    white-space: pre-wrap;
+    margin-top: 10px;
+  }
+  
+  .error {
+    color: red;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+  
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  

templates/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>OCR Application</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- Bootstrap 5 -->
+  <!-- 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">
@@ -14,33 +14,42 @@
 <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 & Extract Text</button>
+      <button type="submit" class="btn btn-primary">Upload &amp; Extract Text</button>
     </form>
 
+    <!-- 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>
 
+    <!-- Error Message -->
+    {% if error %}
+    <div class="error mt-3">{{ error }}</div>
+    {% endif %}
+
+    <!-- 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>
+    <div class="preview mt-4">
+      <h4>Uploaded Image</h4>
+      <img id="result-img" src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
+    </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>
+    <div class="output mt-4">
+      <h4>Extracted Text</h4>
+      <pre id="extracted-text">{{ extracted_text }}</pre>
+    </div>
     {% endif %}
   </div>
 
+  <!-- Show spinner on form submit -->
   <script>
     document.getElementById('upload-form').onsubmit = () => {
       document.getElementById('spinner').classList.remove('d-none');