Spaces:

gahanmakwana
/

my-ocr-demo

Running

App Files Files Community

gahanmakwana commited on Apr 27

Commit

0bd0f00

1 Parent(s): 4cca3cd

Updated app.py and index.html for file upload functionality

Browse files

Files changed (2) hide show

app.py +28 -26
templates/index.html +25 -18

app.py CHANGED Viewed

@@ -1,40 +1,42 @@
-import os
-from flask import Flask, render_template, request, send_from_directory
 from paddleocr import PaddleOCR
 app = Flask(__name__)
 UPLOAD_FOLDER = 'uploads'
-app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-ocr = PaddleOCR(use_angle_cls=True, lang='en')
 @app.route('/', methods=['GET', 'POST'])
 def upload_file():
-    text = None
-    filename = None
     if request.method == 'POST':
         file = request.files['file']
         if file:
-            filename = file.filename
-            img_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
             file.save(img_path)
-            # Run OCR
-            result = ocr.ocr(img_path, cls=True)
-            extracted_text = ""
-            for line in result:
-                for word_info in line:
-                    extracted_text += word_info[1][0] + " "
-            text = extracted_text
-    return render_template('index.html', text=text, filename=filename)
-@app.route('/uploads/<filename>')
-def uploaded_file(filename):
-    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 if __name__ == '__main__':
-    port = int(os.environ.get("PORT", 5000))  # Corrected indentation here
-    # Run the app, binding to all IP addresses and the correct port
-    app.run(host="0.0.0.0", port=port)

+from flask import Flask, render_template, request
 from paddleocr import PaddleOCR
+import os
 app = Flask(__name__)
+# Create uploads directory if it doesn't exist
 UPLOAD_FOLDER = 'uploads'
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+ocr = PaddleOCR(lang='en')
 @app.route('/', methods=['GET', 'POST'])
 def upload_file():
     if request.method == 'POST':
+        if 'file' not in request.files:
+            return render_template('index.html', error='No file selected')
         file = request.files['file']
+        if file.filename == '':
+            return render_template('index.html', error='No file selected')
         if file:
+            # Save the file to uploads directory
+            img_path = os.path.join(UPLOAD_FOLDER, file.filename)
             file.save(img_path)
+            # Perform OCR
+            result = ocr.ocr(img_path)
+            # Extract text from OCR result
+            text = ""
+            for line in result[0]:
+                text += line[1][0] + "\n"
+            return render_template('index.html', text=text, filename=file.filename)
+    return render_template('index.html')
 if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000)

templates/index.html CHANGED Viewed

@@ -2,36 +2,43 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>OCR App</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
-    <div class="container">
-        <h1>📝 OCR Text Recognition</h1>
-        <form method="POST" enctype="multipart/form-data">
-            <label for="file-upload" class="custom-file-upload">
-                📂 Choose an image
-            </label>
-            <input id="file-upload" type="file" name="file" onchange="this.form.submit()" />
         </form>
-        {% if filename %}
-        <div class="image-preview">
-            <h2>🖼 Uploaded Image:</h2>
-            <img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
-        </div>
         {% endif %}
         {% if text %}
-        <div class="output-box">
-            <h2>📋 Extracted Text:</h2>
-            <p>{{ text }}</p>
-        </div>
         {% endif %}
     </div>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OCR App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
 </head>
 <body>
+    <div class="container mt-5">
+        <h1>OCR Application</h1>
+        <!-- Form to upload file -->
+        <form method="post" enctype="multipart/form-data">
+            <div class="mb-3">
+                <label for="file" class="form-label">Choose a file</label>
+                <input type="file" class="form-control" name="file" id="file" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Upload</button>
         </form>
+        <!-- Error Message Display -->
+        {% if error %}
+            <div class="alert alert-danger mt-3" role="alert">
+                {{ error }}
+            </div>
         {% endif %}
+        <!-- Display OCR Result -->
         {% if text %}
+            <h3 class="mt-4">Extracted Text:</h3>
+            <pre>{{ text }}</pre>
         {% endif %}
+        {% if filename %}
+            <h4>Uploaded Image: {{ filename }}</h4>
+            <img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image" class="img-fluid mt-3">
+        {% endif %}
     </div>
+    <!-- Optional: Bootstrap JavaScript for interaction (such as form validation) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>