Fixed file upload and OCR functionality

app.py

@@ -4,44 +4,39 @@ import os
 
 app = Flask(__name__)
 
-# Create uploads directory if it doesn't exist
+# Upload folder
 UPLOAD_FOLDER = 'uploads'
-app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER  # Set the uploads folder in app config
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
 
-# Initialize the OCR model
-ocr = PaddleOCR(lang='en')
+# Initialize OCR
+ocr = PaddleOCR(use_angle_cls=True, lang='en')
 
 @app.route('/', methods=['GET', 'POST'])
 def upload_file():
+    text = None
+    filename = None
     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 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 (from the uploads directory)
+        file = request.files.get('file')
+        if not file or file.filename == '':
+            return render_template('index.html', error="No file selected")
+
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+        file.save(filepath)
+
+        # Run OCR
+        result = ocr.ocr(filepath, cls=True)
+        extracted_text = ""
+        for line in result:
+            for word_info in line:
+                extracted_text += word_info[1][0] + " "
+
+        text = extracted_text
+        filename = file.filename
+
+    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)

static/style.css

@@ -1,77 +1,81 @@
 body {
     font-family: 'Poppins', sans-serif;
-    background: linear-gradient(135deg, #74ebd5, #acb6e5);
-    text-align: center;
-    padding: 30px;
+    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .container {
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
+    background: #ffffff;
     padding: 40px;
-    display: inline-block;
+    border-radius: 20px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
     max-width: 700px;
+    width: 90%;
+    animation: fadeIn 1s ease-in;
 }
 
 h1 {
     margin-bottom: 20px;
     color: #333;
+    font-weight: 600;
 }
 
-.upload-box {
-    background-color: #f8f9fa;
-    padding: 40px;
-    border-radius: 12px;
-    border: 2px dashed #007bff;
-    cursor: pointer;
-    transition: background 0.3s;
+.upload-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 30px;
 }
 
-.upload-box:hover {
-    background-color: #e9ecef;
+input[type="file"] {
+    padding: 10px;
+    background: #f5f5f5;
+    border: 2px dashed #ccc;
+    border-radius: 10px;
 }
 
-.file-input {
-    display: none;
+button {
+    padding: 12px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s;
 }
 
-.file-label {
-    font-size: 16px;
-    font-weight: 600;
-    color: #007bff;
+button:hover {
+    background: #0056b3;
 }
 
-.output-box {
-    margin-top: 30px;
-    background: #f0f0f0;
-    padding: 20px;
+.preview img {
+    max-width: 100%;
+    max-height: 400px;
     border-radius: 10px;
-    text-align: left;
-    word-wrap: break-word;
+    margin-top: 20px;
 }
 
-.output-box pre {
-    white-space: pre-wrap;
+.output {
+    margin-top: 30px;
+    background: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    word-break: break-word;
 }
 
-img {
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    max-width: 100%;
+.error {
     margin-top: 20px;
+    color: red;
+    font-weight: bold;
 }
 
-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;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(30px);}
+    to { opacity: 1; transform: translateY(0);}
 }

templates/index.html

@@ -3,42 +3,37 @@
 <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">
+    <title>OCR Application</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div class="container mt-5">
-        <h1>OCR Application</h1>
+    <div class="container">
+        <h1>Image Text Extractor</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>
+        <!-- Upload Form -->
+        <form method="POST" enctype="multipart/form-data" class="upload-form">
+            <input type="file" name="file" id="file" required>
+            <button type="submit">Upload Image</button>
         </form>
 
-        <!-- Error Message Display -->
         {% if error %}
-            <div class="alert alert-danger mt-3" role="alert">
-                {{ error }}
-            </div>
+            <div class="error">{{ error }}</div>
         {% endif %}
 
-        <!-- Display OCR Result -->
-        {% if text %}
-            <h3 class="mt-4">Extracted Text:</h3>
-            <pre>{{ text }}</pre>
+        {% if filename %}
+            <div class="preview">
+                <h2>Uploaded Image</h2>
+                <img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
+            </div>
         {% endif %}
 
-        {% if filename %}
-            <h4>Uploaded Image:</h4>
-            <img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image" class="img-fluid mt-3">
+        {% if text %}
+            <div class="output">
+                <h2>Extracted Text</h2>
+                <p>{{ text }}</p>
+            </div>
         {% 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>