Spaces:

gahanmakwana
/

my-ocr-demo

Running

App Files Files Community

gahanmakwana commited on Apr 27

Commit

37e0465

1 Parent(s): e302e06

Fixed file upload and OCR functionality

Browse files

Files changed (3) hide show

app.py +4 -1
static/style.css +33 -32
templates/index.html +14 -13

app.py CHANGED Viewed

@@ -9,6 +9,7 @@ UPLOAD_FOLDER = 'uploads'
 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
 ocr = PaddleOCR(lang='en')
 @app.route('/', methods=['GET', 'POST'])
@@ -20,7 +21,7 @@ def upload_file():
         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)
@@ -34,10 +35,12 @@ def upload_file():
             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')
 @app.route('/uploads/<filename>')
 def uploaded_file(filename):
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
+# Initialize the OCR model
 ocr = PaddleOCR(lang='en')
 @app.route('/', methods=['GET', 'POST'])
         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)
             for line in result[0]:
                 text += line[1][0] + "\n"
+            # Return the rendered template with the extracted text and image
             return render_template('index.html', text=text, filename=file.filename)
     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)

static/style.css CHANGED Viewed

@@ -8,53 +8,38 @@ body {
 .container {
     background: white;
     border-radius: 16px;
-    box-shadow: 0px 10px 30px rgba(0,0,0,0.2);
     padding: 40px;
     display: inline-block;
     max-width: 700px;
-    animation: fadeIn 1s ease-in;
 }
 h1 {
     margin-bottom: 20px;
     color: #333;
-    font-size: 2.5em;
 }
-form {
-    margin-bottom: 30px;
-}
-.custom-file-upload {
-    background-color: #007bff;
-    border: none;
-    color: white;
-    padding: 14px 28px;
-    border-radius: 8px;
     cursor: pointer;
-    font-size: 18px;
     transition: background 0.3s;
 }
-.custom-file-upload:hover {
-    background-color: #0056b3;
 }
-input[type="file"] {
     display: none;
 }
-.image-preview {
-    margin-top: 30px;
-}
-.image-preview img {
-    width: 100%;
-    max-height: 400px;
-    object-fit: contain;
-    border-radius: 12px;
-    margin-top: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .output-box {
@@ -66,11 +51,27 @@ input[type="file"] {
     word-wrap: break-word;
 }
-.output-box p {
     white-space: pre-wrap;
 }
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
 }

 .container {
     background: white;
     border-radius: 16px;
+    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
     padding: 40px;
     display: inline-block;
     max-width: 700px;
 }
 h1 {
     margin-bottom: 20px;
     color: #333;
 }
+.upload-box {
+    background-color: #f8f9fa;
+    padding: 40px;
+    border-radius: 12px;
+    border: 2px dashed #007bff;
     cursor: pointer;
     transition: background 0.3s;
 }
+.upload-box:hover {
+    background-color: #e9ecef;
 }
+.file-input {
     display: none;
 }
+.file-label {
+    font-size: 16px;
+    font-weight: 600;
+    color: #007bff;
 }
 .output-box {
     word-wrap: break-word;
 }
+.output-box pre {
     white-space: pre-wrap;
 }
+img {
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    margin-top: 20px;
+}
+button {
+    background-color: #007bff;
+    border: none;
+    color: white;
+    padding: 12px 30px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+button:hover {
+    background-color: #0056b3;
 }

templates/index.html CHANGED Viewed

@@ -3,21 +3,21 @@
 <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">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.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 -->
@@ -30,18 +30,19 @@
         <!-- Display OCR Result -->
         {% if text %}
             <h3 class="mt-4">Extracted Text:</h3>
-            <pre>{{ text }}</pre>
         {% endif %}
-        <!-- Display Image -->
         {% if filename %}
-            <h4>Uploaded Image: {{ filename }}</h4>
-            <div class="image-preview">
-                <img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
-            </div>
         {% endif %}
     </div>
     <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 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 -->
         <!-- 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>