Spaces:

prodevroger
/

handwritten

Runtime error

App Files Files Community

IZERE HIRWA Roger commited on Jul 25, 2025

Commit

5753ed4

1 Parent(s): dd5d745

po

Browse files

Files changed (3) hide show

app.py +125 -115
static/index.html +166 -110
static/styles.css +134 -86

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify, render_template_string, send_from_directory
 from werkzeug.utils import secure_filename
 from werkzeug.security import generate_password_hash, check_password_hash
 import pytesseract
@@ -190,117 +190,11 @@ def save_uploaded_file(file_content: bytes, filename: str) -> str:
 # Routes
 @app.route("/")
 def dashboard():
-    return render_template_string('''
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>Document Classification System</title>
-        <style>
-            body { font-family: Arial, sans-serif; margin: 40px; }
-            .container { max-width: 800px; margin: 0 auto; }
-            .form-group { margin: 20px 0; }
-            input, button { padding: 10px; margin: 5px; }
-            button { background: #007bff; color: white; border: none; cursor: pointer; }
-            .result { margin: 20px 0; padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <h1>Document Classification System</h1>
-            <div class="form-group">
-                <h3>Login</h3>
-                <form id="loginForm">
-                    <input type="text" id="username" placeholder="Username" required>
-                    <input type="password" id="password" placeholder="Password" required>
-                    <button type="submit">Login</button>
-                </form>
-            </div>
-            <div id="mainContent" style="display:none;">
-                <div class="form-group">
-                    <h3>Upload Category</h3>
-                    <form id="categoryForm" enctype="multipart/form-data">
-                        <input type="file" id="categoryFile" accept="image/*,.pdf" required>
-                        <input type="text" id="categoryLabel" placeholder="Category Label" required>
-                        <button type="submit">Add Category</button>
-                    </form>
-                </div>
-                <div class="form-group">
-                    <h3>Classify Document</h3>
-                    <form id="classifyForm" enctype="multipart/form-data">
-                        <input type="file" id="classifyFile" accept="image/*,.pdf" required>
-                        <button type="submit">Classify</button>
-                    </form>
-                </div>
-                <div id="result" class="result" style="display:none;"></div>
-            </div>
-        </div>
-        <script>
-            let token = null;
-            document.getElementById('loginForm').onsubmit = async (e) => {
-                e.preventDefault();
-                const formData = new FormData();
-                formData.append('username', document.getElementById('username').value);
-                formData.append('password', document.getElementById('password').value);
-                const response = await fetch('/api/login', {
-                    method: 'POST',
-                    body: formData
-                });
-                const result = await response.json();
-                if (response.ok) {
-                    token = result.access_token;
-                    document.getElementById('mainContent').style.display = 'block';
-                    document.getElementById('result').innerHTML = 'Login successful!';
-                    document.getElementById('result').style.display = 'block';
-                } else {
-                    document.getElementById('result').innerHTML = 'Login failed: ' + result.detail;
-                    document.getElementById('result').style.display = 'block';
-                }
-            };
-            document.getElementById('categoryForm').onsubmit = async (e) => {
-                e.preventDefault();
-                const formData = new FormData();
-                formData.append('file', document.getElementById('categoryFile').files[0]);
-                formData.append('label', document.getElementById('categoryLabel').value);
-                const response = await fetch('/api/upload-category', {
-                    method: 'POST',
-                    body: formData,
-                    headers: {'Authorization': 'Bearer ' + token}
-                });
-                const result = await response.json();
-                document.getElementById('result').innerHTML = JSON.stringify(result, null, 2);
-                document.getElementById('result').style.display = 'block';
-            };
-            document.getElementById('classifyForm').onsubmit = async (e) => {
-                e.preventDefault();
-                const formData = new FormData();
-                formData.append('file', document.getElementById('classifyFile').files[0]);
-                const response = await fetch('/api/classify-document', {
-                    method: 'POST',
-                    body: formData,
-                    headers: {'Authorization': 'Bearer ' + token}
-                });
-                const result = await response.json();
-                document.getElementById('result').innerHTML = JSON.stringify(result, null, 2);
-                document.getElementById('result').style.display = 'block';
-            };
-        </script>
-    </body>
-    </html>
-    ''')
 @app.route("/api/login", methods=["POST"])
 def login():
@@ -440,8 +334,27 @@ def classify_document():
     except Exception as e:
         return jsonify({"error": str(e)}), 500
-@app.route("/api/documents", methods=["GET"])
-def get_all_documents():
     # Verify token
     auth_header = request.headers.get('Authorization')
     if not auth_header or not auth_header.startswith('Bearer '):
@@ -454,7 +367,7 @@ def get_all_documents():
     conn = sqlite3.connect(DATABASE_PATH)
     cursor = conn.cursor()
-    cursor.execute('SELECT * FROM documents ORDER BY upload_date DESC')
     documents = []
     for row in cursor.fetchall():
         documents.append({
@@ -471,5 +384,102 @@ def get_all_documents():
     return jsonify({"documents": documents, "count": len(documents)})
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=True)

+from flask import Flask, request, jsonify, send_from_directory
 from werkzeug.utils import secure_filename
 from werkzeug.security import generate_password_hash, check_password_hash
 import pytesseract
 # Routes
 @app.route("/")
 def dashboard():
+    return send_from_directory('static', 'index.html')
+@app.route("/static/<path:filename>")
+def static_files(filename):
+    return send_from_directory('static', filename)
 @app.route("/api/login", methods=["POST"])
 def login():
     except Exception as e:
         return jsonify({"error": str(e)}), 500
+@app.route("/api/categories", methods=["GET"])
+def get_categories():
+    # Verify token
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith('Bearer '):
+        return jsonify({"error": "Missing or invalid token"}), 401
+    token = auth_header.split(' ')[1]
+    username = verify_token(token)
+    if not username:
+        return jsonify({"error": "Invalid token"}), 401
+    categories = list(set(labels))  # Remove duplicates
+    category_counts = {}
+    for label in labels:
+        category_counts[label] = category_counts.get(label, 0) + 1
+    return jsonify({"categories": categories, "counts": category_counts})
+@app.route("/api/documents/<category>", methods=["GET"])
+def get_documents_by_category(category):
     # Verify token
     auth_header = request.headers.get('Authorization')
     if not auth_header or not auth_header.startswith('Bearer '):
     conn = sqlite3.connect(DATABASE_PATH)
     cursor = conn.cursor()
+    cursor.execute('SELECT * FROM documents WHERE category = ? ORDER BY upload_date DESC', (category,))
     documents = []
     for row in cursor.fetchall():
         documents.append({
     return jsonify({"documents": documents, "count": len(documents)})
+@app.route("/api/documents/<document_id>", methods=["DELETE"])
+def delete_document(document_id):
+    # Verify token
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith('Bearer '):
+        return jsonify({"error": "Missing or invalid token"}), 401
+    token = auth_header.split(' ')[1]
+    username = verify_token(token)
+    if not username:
+        return jsonify({"error": "Invalid token"}), 401
+    try:
+        conn = sqlite3.connect(DATABASE_PATH)
+        cursor = conn.cursor()
+        # Get document info first
+        cursor.execute('SELECT file_path FROM documents WHERE id = ?', (document_id,))
+        result = cursor.fetchone()
+        if not result:
+            conn.close()
+            return jsonify({"error": "Document not found"}), 404
+        file_path = result[0]
+        # Delete physical file
+        if file_path and os.path.exists(file_path):
+            os.remove(file_path)
+        # Delete from database
+        cursor.execute('DELETE FROM documents WHERE id = ?', (document_id,))
+        conn.commit()
+        conn.close()
+        return jsonify({"message": "Document deleted successfully", "status": "success"})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+@app.route("/api/ocr", methods=["POST"])
+def ocr_document():
+    # Verify token
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith('Bearer '):
+        return jsonify({"error": "Missing or invalid token"}), 401
+    token = auth_header.split(' ')[1]
+    username = verify_token(token)
+    if not username:
+        return jsonify({"error": "Invalid token"}), 401
+    try:
+        file = request.files.get("file")
+        if not file:
+            return jsonify({"error": "Missing file"}), 400
+        file_content = file.read()
+        if file.content_type and file.content_type.startswith('application/pdf'):
+            image = image_from_pdf(file_content)
+        else:
+            image = Image.open(io.BytesIO(file_content))
+        if image is None:
+            return jsonify({"error": "Failed to process image"}), 400
+        text = extract_text(image)
+        return jsonify({"text": text, "status": "success"})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+@app.route("/api/stats", methods=["GET"])
+def get_stats():
+    # Verify token
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith('Bearer '):
+        return jsonify({"error": "Missing or invalid token"}), 401
+    token = auth_header.split(' ')[1]
+    username = verify_token(token)
+    if not username:
+        return jsonify({"error": "Invalid token"}), 401
+    conn = sqlite3.connect(DATABASE_PATH)
+    cursor = conn.cursor()
+    cursor.execute('SELECT category, COUNT(*) FROM documents GROUP BY category')
+    category_stats = dict(cursor.fetchall())
+    cursor.execute('SELECT COUNT(*) FROM documents')
+    total_documents = cursor.fetchone()[0]
+    conn.close()
+    return jsonify({
+        "total_categories": len(set(labels)),
+        "total_documents": total_documents,
+        "category_distribution": category_stats
+    })
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=True)

static/index.html CHANGED Viewed

@@ -4,158 +4,214 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Handwritten Archive Document Digitalization System</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/styles.css">
 </head>
 <body>
     <!-- Login Modal -->
-    <div id="loginModal" class="modal">
-        <div class="modal-content">
-            <h2><i class="fas fa-lock"></i> Login Required</h2>
-            <form id="loginForm">
-                <div class="form-group">
-                    <label for="username">Username</label>
-                    <input type="text" id="username" class="form-control" required value="admin">
                 </div>
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password" id="password" class="form-control" required value="admin123">
                 </div>
-                <button type="submit" class="btn btn-primary">
-                    <i class="fas fa-sign-in-alt"></i> Login
-                </button>
-            </form>
-            <div id="loginResult"></div>
         </div>
     </div>
     <!-- Main Application -->
     <div id="mainApp" style="display: none;">
-        <div class="container">
-            <div class="header">
-                <div class="header-content">
-                    <div>
-                        <h1><i class="fas fa-archive"></i> Archive Digitalization System</h1>
-                        <p>Handwritten Document Classification & Storage</p>
-                    </div>
-                    <div class="user-info">
-                        <span id="welcomeUser"></span>
-                        <button class="btn btn-secondary" onclick="logout()">
-                            <i class="fas fa-sign-out-alt"></i> Logout
-                        </button>
-                    </div>
                 </div>
             </div>
-            <div class="dashboard-stats" id="stats">
                 <!-- Stats will be loaded here -->
             </div>
-            <div class="tabs">
-                <button class="tab-button active" onclick="showTab('upload')">
-                    <i class="fas fa-upload"></i> Upload Categories
-                </button>
-                <button class="tab-button" onclick="showTab('classify')">
-                    <i class="fas fa-search"></i> Classify Documents
-                </button>
-                <button class="tab-button" onclick="showTab('browse')">
-                    <i class="fas fa-folder-open"></i> Browse Archive
-                </button>
-                <button class="tab-button" onclick="showTab('ocr')">
-                    <i class="fas fa-eye"></i> OCR Text
-                </button>
-            </div>
             <!-- Upload Categories Tab -->
             <div id="upload" class="tab-content active">
-                <h2><i class="fas fa-tags"></i> Upload Document Categories</h2>
-                <p>Upload sample documents for each category to train the classification system.</p>
-                <form id="uploadForm">
-                    <div class="form-group">
-                        <label for="categoryFile">Document File (Image or PDF)</label>
-                        <div class="file-upload" id="categoryUpload">
-                            <i class="fas fa-cloud-upload-alt fa-2x"></i>
-                            <p>Click to select or drag & drop files here</p>
-                            <input type="file" id="categoryFile" accept="image/*,.pdf" style="display: none;">
-                        </div>
                     </div>
-                    <div class="form-group">
-                        <label for="categoryLabel">Category Label</label>
-                        <input type="text" id="categoryLabel" class="form-control" placeholder="e.g., birth_certificate, passport, diploma">
                     </div>
-                    <button type="submit" class="btn btn-primary">
-                        <i class="fas fa-plus"></i> Add Category
-                    </button>
-                </form>
-                <div id="uploadResult"></div>
             </div>
             <!-- Classify Documents Tab -->
             <div id="classify" class="tab-content">
-                <h2><i class="fas fa-robot"></i> Classify & Store Documents</h2>
-                <p>Upload documents to automatically classify and store them in the archive (min. 35% confidence).</p>
-                <form id="classifyForm">
-                    <div class="form-group">
-                        <label for="classifyFile">Document to Classify</label>
-                        <div class="file-upload" id="classifyUpload">
-                            <i class="fas fa-file fa-2x"></i>
-                            <p>Click to select or drag & drop files here</p>
-                            <input type="file" id="classifyFile" accept="image/*,.pdf" style="display: none;">
-                        </div>
                     </div>
-                    <button type="submit" class="btn btn-success">
-                        <i class="fas fa-search"></i> Classify Document
-                    </button>
-                </form>
-                <div id="classifyResult"></div>
             </div>
             <!-- Browse Archive Tab -->
             <div id="browse" class="tab-content">
-                <h2><i class="fas fa-archive"></i> Browse Document Archive</h2>
-                <p>Browse and search through your classified documents by category.</p>
-                <div class="category-buttons" id="categoryButtons">
-                    <!-- Category buttons will be loaded here -->
-                </div>
-                <div id="documentsContainer">
-                    <!-- Documents will be loaded here -->
                 </div>
             </div>
             <!-- OCR Text Tab -->
             <div id="ocr" class="tab-content">
-                <h2><i class="fas fa-eye"></i> OCR Text Extraction</h2>
-                <p>Extract text from documents using Optical Character Recognition.</p>
-                <form id="ocrForm">
-                    <div class="form-group">
-                        <label for="ocrFile">Document File</label>
-                        <div class="file-upload" id="ocrUpload">
-                            <i class="fas fa-file-alt fa-2x"></i>
-                            <p>Click to select or drag & drop files here</p>
-                            <input type="file" id="ocrFile" accept="image/*,.pdf" style="display: none;">
-                        </div>
                     </div>
-                    <button type="submit" class="btn btn-primary">
-                        <i class="fas fa-search"></i> Extract Text
-                    </button>
-                </form>
-                <div id="ocrResult"></div>
             </div>
         </div>
     </div>
     <script src="/static/script.js"></script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Handwritten Archive Document Digitalization System</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <!-- Custom CSS -->
     <link rel="stylesheet" href="/static/styles.css">
 </head>
 <body>
     <!-- Login Modal -->
+    <div id="loginModal" class="modal fade show" style="display: block; background: rgba(0,0,0,0.8);">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content shadow-lg">
+                <div class="modal-header bg-primary text-white">
+                    <h4 class="modal-title"><i class="fas fa-lock me-2"></i>Login Required</h4>
                 </div>
+                <div class="modal-body p-4">
+                    <form id="loginForm">
+                        <div class="mb-3">
+                            <label for="username" class="form-label">Username</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                <input type="text" id="username" class="form-control" required value="admin" placeholder="Enter username">
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="password" class="form-label">Password</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
+                                <input type="password" id="password" class="form-control" required value="admin123" placeholder="Enter password">
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100">
+                            <i class="fas fa-sign-in-alt me-2"></i>Login
+                        </button>
+                    </form>
+                    <div id="loginResult" class="mt-3"></div>
                 </div>
+            </div>
         </div>
     </div>
     <!-- Main Application -->
     <div id="mainApp" style="display: none;">
+        <!-- Navigation Header -->
+        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div class="container">
+                <a class="navbar-brand" href="#">
+                    <i class="fas fa-archive me-2"></i>Archive Digitalization System
+                </a>
+                <div class="navbar-nav ms-auto">
+                    <span class="navbar-text me-3" id="welcomeUser"></span>
+                    <button class="btn btn-outline-light btn-sm" onclick="logout()">
+                        <i class="fas fa-sign-out-alt me-1"></i>Logout
+                    </button>
                 </div>
             </div>
+        </nav>
+        <div class="container mt-4">
+            <!-- Dashboard Stats -->
+            <div class="row mb-4" id="stats">
                 <!-- Stats will be loaded here -->
             </div>
+            <!-- Navigation Tabs -->
+            <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" onclick="showTab('upload')" type="button">
+                        <i class="fas fa-upload me-2"></i>Upload Categories
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" onclick="showTab('classify')" type="button">
+                        <i class="fas fa-search me-2"></i>Classify Documents
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" onclick="showTab('browse')" type="button">
+                        <i class="fas fa-folder-open me-2"></i>Browse Archive
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" onclick="showTab('ocr')" type="button">
+                        <i class="fas fa-eye me-2"></i>OCR Text
+                    </button>
+                </li>
+            </ul>
             <!-- Upload Categories Tab -->
             <div id="upload" class="tab-content active">
+                <div class="card">
+                    <div class="card-header bg-primary text-white">
+                        <h4><i class="fas fa-tags me-2"></i>Upload Document Categories</h4>
                     </div>
+                    <div class="card-body">
+                        <p class="text-muted">Upload sample documents for each category to train the classification system.</p>
+                        <form id="uploadForm" class="row g-3">
+                            <div class="col-md-6">
+                                <label for="categoryFile" class="form-label">Document File (Image or PDF)</label>
+                                <div class="file-upload border rounded p-4 text-center" id="categoryUpload">
+                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
+                                    <p class="mb-0">Click to select or drag & drop files here</p>
+                                    <input type="file" id="categoryFile" accept="image/*,.pdf" class="d-none">
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <label for="categoryLabel" class="form-label">Category Label</label>
+                                <input type="text" id="categoryLabel" class="form-control" placeholder="e.g., birth_certificate, passport, diploma">
+                                <div class="form-text">Use descriptive names without spaces</div>
+                            </div>
+                            <div class="col-12">
+                                <button type="submit" class="btn btn-primary">
+                                    <i class="fas fa-plus me-2"></i>Add Category
+                                </button>
+                            </div>
+                        </form>
+                        <div id="uploadResult" class="mt-3"></div>
                     </div>
+                </div>
             </div>
             <!-- Classify Documents Tab -->
             <div id="classify" class="tab-content">
+                <div class="card">
+                    <div class="card-header bg-success text-white">
+                        <h4><i class="fas fa-robot me-2"></i>Classify & Store Documents</h4>
                     </div>
+                    <div class="card-body">
+                        <p class="text-muted">Upload documents to automatically classify and store them in the archive (min. 35% confidence).</p>
+                        <form id="classifyForm" class="row g-3">
+                            <div class="col-12">
+                                <label for="classifyFile" class="form-label">Document to Classify</label>
+                                <div class="file-upload border rounded p-4 text-center" id="classifyUpload">
+                                    <i class="fas fa-file fa-3x text-success mb-3"></i>
+                                    <p class="mb-0">Click to select or drag & drop files here</p>
+                                    <input type="file" id="classifyFile" accept="image/*,.pdf" class="d-none">
+                                </div>
+                            </div>
+                            <div class="col-12">
+                                <button type="submit" class="btn btn-success">
+                                    <i class="fas fa-search me-2"></i>Classify Document
+                                </button>
+                            </div>
+                        </form>
+                        <div id="classifyResult" class="mt-3"></div>
+                    </div>
+                </div>
             </div>
             <!-- Browse Archive Tab -->
             <div id="browse" class="tab-content">
+                <div class="card">
+                    <div class="card-header bg-info text-white">
+                        <h4><i class="fas fa-archive me-2"></i>Browse Document Archive</h4>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted">Browse and search through your classified documents by category.</p>
+                        <div class="mb-3" id="categoryButtons">
+                            <!-- Category buttons will be loaded here -->
+                        </div>
+                        <div id="documentsContainer">
+                            <!-- Documents will be loaded here -->
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- OCR Text Tab -->
             <div id="ocr" class="tab-content">
+                <div class="card">
+                    <div class="card-header bg-warning text-dark">
+                        <h4><i class="fas fa-eye me-2"></i>OCR Text Extraction</h4>
                     </div>
+                    <div class="card-body">
+                        <p class="text-muted">Extract text from documents using Optical Character Recognition.</p>
+                        <form id="ocrForm" class="row g-3">
+                            <div class="col-12">
+                                <label for="ocrFile" class="form-label">Document File</label>
+                                <div class="file-upload border rounded p-4 text-center" id="ocrUpload">
+                                    <i class="fas fa-file-alt fa-3x text-warning mb-3"></i>
+                                    <p class="mb-0">Click to select or drag & drop files here</p>
+                                    <input type="file" id="ocrFile" accept="image/*,.pdf" class="d-none">
+                                </div>
+                            </div>
+                            <div class="col-12">
+                                <button type="submit" class="btn btn-warning">
+                                    <i class="fas fa-search me-2"></i>Extract Text
+                                </button>
+                            </div>
+                        </form>
+                        <div id="ocrResult" class="mt-3"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
     <script src="/static/script.js"></script>
 </body>
 </html>

static/styles.css CHANGED Viewed

@@ -1,14 +1,9 @@
 :root {
-    --primary-color: #2563eb;
-    --secondary-color: #1e40af;
-    --success-color: #10b981;
-    --warning-color: #f59e0b;
-    --error-color: #ef4444;
-    --bg-color: #f8fafc;
-    --card-bg: #ffffff;
-    --text-primary: #1f2937;
-    --text-secondary: #6b7280;
-    --border-color: #e5e7eb;
 }
 * {
@@ -18,8 +13,8 @@
 }
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--bg-color);
     color: var(--text-primary);
     line-height: 1.6;
 }
@@ -103,22 +98,23 @@ body {
 }
 .stat-card {
-    background: var(--card-bg);
     padding: 1.5rem;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--border-color);
 }
 .stat-card h3 {
-    font-size: 2rem;
-    color: var(--primary-color);
     margin-bottom: 0.5rem;
 }
 .stat-card p {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
 }
 .tabs {
@@ -159,6 +155,25 @@ body {
     display: block;
 }
 .form-group {
     margin-bottom: 1.5rem;
 }
@@ -184,6 +199,7 @@ body {
     border-color: var(--primary-color);
 }
 .btn {
     padding: 0.75rem 1.5rem;
     border: none;
@@ -222,107 +238,94 @@ body {
     background: #dc2626;
 }
-.file-upload {
-    border: 2px dashed var(--border-color);
-    border-radius: 8px;
-    padding: 2rem;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-.file-upload:hover {
-    border-color: var(--primary-color);
-    background-color: #f0f9ff;
-}
-.file-upload.dragover {
-    border-color: var(--primary-color);
-    background-color: #f0f9ff;
-}
 .result-box {
-    margin-top: 1rem;
     padding: 1rem;
-    border-radius: 8px;
-    font-family: monospace;
     white-space: pre-wrap;
 }
 .result-success {
-    background-color: #f0fdf4;
-    border: 1px solid var(--success-color);
-    color: #166534;
 }
 .result-error {
-    background-color: #fef2f2;
-    border: 1px solid var(--error-color);
-    color: #dc2626;
 }
 .result-warning {
-    background-color: #fffbeb;
-    border: 1px solid var(--warning-color);
-    color: #92400e;
 }
 .document-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1rem;
-    margin-top: 1rem;
 }
 .document-card {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
     padding: 1rem;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
 }
-.document-card h4 {
-    color: var(--primary-color);
-    margin-bottom: 0.5rem;
-}
-.document-actions {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
 }
 .category-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-    margin-bottom: 1rem;
 }
 .category-btn {
-    padding: 0.5rem 1rem;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: 20px;
     cursor: pointer;
-    transition: all 0.3s ease;
 }
-.category-btn:hover, .category-btn.active {
-    background: var(--primary-color);
-    color: white;
     border-color: var(--primary-color);
 }
 .loading {
     display: inline-block;
-    width: 20px;
-    height: 20px;
     border: 2px solid #f3f3f3;
     border-top: 2px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
 @keyframes spin {
@@ -330,29 +333,43 @@ body {
     100% { transform: rotate(360deg); }
 }
 .similarity-badge {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 12px;
-    font-size: 0.8rem;
     font-weight: 600;
 }
 .similarity-high {
-    background: #dcfce7;
-    color: #166534;
 }
 .similarity-medium {
-    background: #fef3c7;
-    color: #92400e;
 }
 .similarity-low {
-    background: #fecaca;
-    color: #dc2626;
 }
 @media (max-width: 768px) {
     .header-content {
         text-align: center;
@@ -369,4 +386,35 @@ body {
     .tab-button {
         text-align: center;
     }
 }

 :root {
+    --primary-color: #0d6efd;
+    --success-color: #198754;
+    --warning-color: #ffc107;
+    --danger-color: #dc3545;
+    --info-color: #0dcaf0;
 }
 * {
 }
 body {
+    background-color: #f8f9fa;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: var(--text-primary);
     line-height: 1.6;
 }
 }
 .stat-card {
+    background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
+    color: white;
+    border-radius: 0.5rem;
     padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .stat-card h3 {
+    font-size: 2.5rem;
+    font-weight: 700;
     margin-bottom: 0.5rem;
 }
 .stat-card p {
+    margin-bottom: 0;
+    opacity: 0.9;
 }
 .tabs {
     display: block;
 }
+/* File Upload Styling */
+.file-upload {
+    border: 2px dashed #dee2e6 !important;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: #f8f9fa;
+}
+.file-upload:hover {
+    border-color: var(--primary-color) !important;
+    background-color: #e3f2fd;
+}
+.file-upload.dragover {
+    border-color: var(--primary-color) !important;
+    background-color: #e3f2fd;
+}
+/* Form Styles */
 .form-group {
     margin-bottom: 1.5rem;
 }
     border-color: var(--primary-color);
 }
+/* Button Styles */
 .btn {
     padding: 0.75rem 1.5rem;
     border: none;
     background: #dc2626;
 }
+/* Result Boxes */
 .result-box {
     padding: 1rem;
+    border-radius: 0.375rem;
+    font-family: 'Courier New', monospace;
     white-space: pre-wrap;
+    word-wrap: break-word;
 }
 .result-success {
+    background-color: #d1e7dd;
+    border: 1px solid #badbcc;
+    color: #0f5132;
 }
 .result-error {
+    background-color: #f8d7da;
+    border: 1px solid #f5c2c7;
+    color: #842029;
 }
 .result-warning {
+    background-color: #fff3cd;
+    border: 1px solid #ffecb5;
+    color: #664d03;
 }
+.result-info {
+    background-color: #cff4fc;
+    border: 1px solid #b6effb;
+    color: #055160;
+}
+/* Document Cards */
 .document-grid {
     display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 1rem;
 }
 .document-card {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
     padding: 1rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    transition: box-shadow 0.15s ease-in-out;
 }
+.document-card:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
+/* Category Buttons */
 .category-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }
 .category-btn {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #dee2e6;
+    border-radius: 1.5rem;
+    background-color: white;
+    color: #6c757d;
     cursor: pointer;
+    transition: all 0.15s ease-in-out;
+    text-decoration: none;
 }
+.category-btn:hover,
+.category-btn.active {
+    background-color: var(--primary-color);
     border-color: var(--primary-color);
+    color: white;
 }
+/* Loading Spinner */
 .loading {
     display: inline-block;
+    width: 1rem;
+    height: 1rem;
     border: 2px solid #f3f3f3;
     border-top: 2px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
+    margin-right: 0.5rem;
 }
 @keyframes spin {
     100% { transform: rotate(360deg); }
 }
+/* OCR Text Display */
+.ocr-text {
+    max-height: 300px;
+    overflow-y: auto;
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 0.375rem;
+    border: 1px solid #dee2e6;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+/* Similarity Badges */
 .similarity-badge {
+    font-size: 0.75rem;
     font-weight: 600;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
 }
 .similarity-high {
+    background-color: #d1e7dd;
+    color: #0f5132;
 }
 .similarity-medium {
+    background-color: #fff3cd;
+    color: #664d03;
 }
 .similarity-low {
+    background-color: #f8d7da;
+    color: #842029;
 }
+/* Responsive adjustments */
 @media (max-width: 768px) {
     .header-content {
         text-align: center;
     .tab-button {
         text-align: center;
     }
+    .document-grid {
+        grid-template-columns: 1fr;
+    }
+    .category-buttons {
+        justify-content: center;
+    }
+    .navbar-brand {
+        font-size: 1rem;
+    }
+}
+/* Custom scrollbar */
+.ocr-text::-webkit-scrollbar {
+    width: 8px;
+}
+.ocr-text::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+.ocr-text::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+.ocr-text::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }