Spaces:

gahanmakwana
/

my-ocr-demo

Running

App Files Files Community

gahanmakwana commited on Apr 27

Commit

98bb570

1 Parent(s): 37e0465

Fixed file upload and OCR functionality

Browse files

Files changed (2) hide show

app.py +2 -1
templates/index.html +10 -14

app.py CHANGED Viewed

@@ -6,6 +6,7 @@ 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)
@@ -40,7 +41,7 @@ def upload_file():
     return render_template('index.html')
-# Serve the uploaded file
 @app.route('/uploads/<filename>')
 def uploaded_file(filename):
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

 # Create uploads directory if it doesn't exist
 UPLOAD_FOLDER = 'uploads'
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER  # Set the uploads folder in app config
 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
     return render_template('index.html')
+# Serve the uploaded file (from the uploads directory)
 @app.route('/uploads/<filename>')
 def uploaded_file(filename):
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

templates/index.html CHANGED Viewed

@@ -3,21 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OCR Application</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
     <div class="container mt-5">
-        <h1 class="text-center">OCR Application</h1>
         <!-- Form to upload file -->
-        <form method="post" enctype="multipart/form-data" class="upload-form">
-            <div class="upload-box">
-                <label for="file" class="file-label">Choose an image</label>
-                <input type="file" name="file" id="file" required class="file-input">
             </div>
-            <button type="submit" class="btn btn-primary mt-3">Upload</button>
         </form>
         <!-- Error Message Display -->
@@ -30,19 +29,16 @@
         <!-- Display OCR Result -->
         {% if text %}
             <h3 class="mt-4">Extracted Text:</h3>
-            <div class="output-box">
-                <pre>{{ text }}</pre>
-            </div>
         {% endif %}
-        <!-- Display Uploaded Image -->
         {% if filename %}
-            <h4 class="mt-3">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 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

 <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 -->
         <!-- Display OCR Result -->
         {% if text %}
             <h3 class="mt-4">Extracted Text:</h3>
+            <pre>{{ text }}</pre>
         {% endif %}
         {% if filename %}
+            <h4>Uploaded Image:</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>