Update app.py

app.py

@@ -93,28 +93,29 @@ html_content = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OCR Studio</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     
     <style>
         :root {
-            --bg-dark: #0f172a;
-            --bg-card: rgba(30, 41, 59, 0.75);
-            --primary: #818cf8;
-            --primary-glow: rgba(129, 140, 248, 0.5);
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --border: rgba(255, 255, 255, 0.1);
-            --glass: blur(16px);
+            /* Minimalist Palette - No Gradients */
+            --bg-main: #09090b;       /* Deepest black/gray */
+            --bg-panel: #18181b;      /* Slightly lighter panel */
+            --border: #27272a;        /* Subtle borders */
+            --accent: #ffffff;        /* Stark white for key actions */
+            --accent-dim: #a1a1aa;    /* Secondary text */
+            --highlight: #6366f1;     /* Primary Action Color (Indigo) */
+            --success: #10b981;
+            --font-ui: 'Inter', sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
 
         * { box-sizing: border-box; outline: none; }
         
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-dark);
-            background-image: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.15) 0px, transparent 50%);
-            color: var(--text-main);
+            font-family: var(--font-ui);
+            background-color: var(--bg-main);
+            color: #e4e4e7;
             margin: 0;
             height: 100vh;
             display: flex;
@@ -123,235 +124,290 @@ html_content = """
         }
 
         /* --- ANIMATIONS --- */
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes scanLaser { 
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+        @keyframes scan { 
             0% { top: 0%; opacity: 0; } 
-            10% { opacity: 1; box-shadow: 0 0 15px var(--primary); }
-            90% { opacity: 1; box-shadow: 0 0 15px var(--primary); }
+            10% { opacity: 1; box-shadow: 0 0 10px var(--highlight); }
+            90% { opacity: 1; box-shadow: 0 0 10px var(--highlight); }
             100% { top: 100%; opacity: 0; } 
         }
+        @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
 
-        /* --- LAYOUT --- */
+        /* --- HEADER --- */
         header {
-            padding: 15px 30px;
+            height: 50px;
+            background: var(--bg-main);
             border-bottom: 1px solid var(--border);
-            background: rgba(15, 23, 42, 0.85);
-            backdrop-filter: var(--glass);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 0 20px;
             z-index: 50;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
         }
 
-        .logo { 
-            font-weight: 800; font-size: 1.2rem; 
-            background: linear-gradient(90deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-            display: flex; align-items: center; gap: 10px;
+        .brand { 
+            font-weight: 600; 
+            font-size: 0.95rem; 
+            letter-spacing: -0.02em;
+            display: flex; align-items: center; gap: 8px;
+            color: var(--accent);
+        }
+        
+        .status-dot {
+            width: 6px; height: 6px; 
+            background: var(--success); 
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--success);
+            animation: pulse 2s infinite;
         }
 
         main { flex: 1; display: flex; overflow: hidden; }
 
+        /* --- SIDEBAR --- */
         .sidebar {
-            width: 280px;
-            background: var(--bg-card);
+            width: 260px;
+            background: var(--bg-main);
             border-right: 1px solid var(--border);
-            padding: 20px;
-            display: flex; flex-direction: column; gap: 20px;
-            backdrop-filter: var(--glass);
-            z-index: 10;
+            display: flex; flex-direction: column;
+            padding: 15px;
+            gap: 20px;
+            z-index: 20;
         }
 
-        .upload-area {
-            border: 2px dashed var(--border);
-            border-radius: 12px;
-            padding: 30px 20px;
+        .upload-zone {
+            border: 1px dashed var(--border);
+            background: var(--bg-panel);
+            border-radius: 6px;
+            padding: 25px 15px;
             text-align: center;
             cursor: pointer;
-            transition: all 0.3s ease;
-            background: rgba(255,255,255,0.02);
-            position: relative; overflow: hidden;
+            transition: all 0.2s ease;
+        }
+        .upload-zone:hover { border-color: var(--highlight); background: #1e1e24; }
+        .upload-zone i { font-size: 24px; color: var(--accent-dim); margin-bottom: 8px; display: block; }
+        .upload-zone span { font-size: 0.8rem; color: var(--accent-dim); font-weight: 500; }
+
+        .control-section { display: flex; flex-direction: column; gap: 10px; }
+        .control-label { 
+            font-size: 0.7rem; 
+            text-transform: uppercase; 
+            letter-spacing: 0.05em; 
+            color: #52525b; 
+            font-weight: 600; 
+            margin-bottom: 5px;
+        }
+
+        /* Minimal Inputs */
+        .toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
+        input[type="checkbox"] { accent-color: var(--highlight); }
+        input[type="range"] { width: 100%; height: 4px; background: var(--border); border-radius: 2px; -webkit-appearance: none; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; cursor: pointer; }
+
+        /* Buttons Grid */
+        .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+        .btn {
+            background: var(--bg-panel);
+            border: 1px solid var(--border);
+            color: var(--accent-dim);
+            padding: 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: 0.2s;
+            display: flex; align-items: center; justify-content: center; gap: 6px;
         }
-        .upload-area:hover { border-color: var(--primary); background: rgba(129, 140, 248, 0.1); transform: scale(1.02); }
-        .upload-area i { font-size: 32px; color: var(--primary); margin-bottom: 10px; }
+        .btn:hover { border-color: var(--highlight); color: var(--highlight); }
+        .btn:active { transform: translateY(1px); }
+        .btn.primary { background: var(--highlight); color: white; border: none; }
+        .btn.primary:hover { background: #4f46e5; }
 
-        /* WORKSPACE */
+        /* --- WORKSPACE --- */
         .workspace {
             flex: 1;
             display: flex;
+            background: #000; /* Pitch black for contrast */
             position: relative;
-            background: #020617;
         }
 
-        .preview-pane {
+        /* LEFT: Canvas */
+        .preview-area {
             flex: 1;
             position: relative;
-            overflow: auto; /* SCROLL ENABLED */
+            overflow: auto;
             display: grid;
             place-items: center;
-            padding: 40px; 
+            padding: 40px;
         }
-
-        /* Scrollbar */
-        ::-webkit-scrollbar { width: 8px; height: 8px; }
-        ::-webkit-scrollbar-track { background: #0f172a; }
-        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: #475569; }
-
+        
         .canvas-wrapper {
             position: relative;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+            box-shadow: 0 0 0 1px #333; /* Very subtle outline */
             transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s ease;
-            width: 80%; /* Default zoom */
+            width: 80%;
             transform-origin: center center;
         }
         
-        /* FIX: Canvas MUST be 100% width/height to scale with the image */
         canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
         img { display: block; width: 100%; height: auto; }
 
-        /* SCAN EFFECT */
         .scan-line {
-            position: absolute; width: 100%; height: 2px;
-            background: var(--primary); z-index: 5;
-            display: none; pointer-events: none;
-        }
-        .scan-line.active { display: block; animation: scanLaser 2s linear infinite; }
-
-        /* PAGINATION */
-        .pagination-bar {
-            position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
-            background: rgba(15, 23, 42, 0.9); border: 1px solid var(--border);
-            padding: 8px 16px; border-radius: 30px;
-            display: flex; align-items: center; gap: 15px;
-            z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-            display: none;
-        }
-        .page-btn {
-            background: transparent; border: none; color: white; cursor: pointer;
-            display: flex; align-items: center; justify-content: center;
-            padding: 5px; border-radius: 50%; transition: 0.2s;
-        }
-        .page-btn:hover { background: rgba(255,255,255,0.1); }
-
-        /* RESULTS PANE */
-        .results-pane {
-            width: 400px;
-            background: var(--bg-card);
+            position: absolute; width: 100%; height: 1px;
+            background: var(--highlight);
+            box-shadow: 0 0 10px var(--highlight);
+            z-index: 5; display: none; pointer-events: none;
+        }
+        .scan-line.active { display: block; animation: scan 1.5s linear infinite; }
+
+        /* Floating Controls */
+        .floating-bar {
+            position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);
+            background: rgba(24, 24, 27, 0.9);
+            border: 1px solid var(--border);
+            padding: 6px 12px;
+            border-radius: 8px;
+            display: flex; gap: 12px; align-items: center;
+            backdrop-filter: blur(8px);
+            z-index: 30;
+        }
+        .icon-btn { background: none; border: none; color: var(--accent-dim); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
+        .icon-btn:hover { color: var(--accent); background: rgba(255,255,255,0.1); }
+
+        /* RIGHT: Results */
+        .results-panel {
+            width: 380px;
+            background: var(--bg-panel);
             border-left: 1px solid var(--border);
             display: flex; flex-direction: column;
-            backdrop-filter: var(--glass);
             z-index: 20;
         }
 
-        .results-content { flex: 1; overflow-y: auto; padding: 15px; }
-        
-        .text-block {
-            padding: 10px; margin-bottom: 6px;
-            border-radius: 6px;
-            border: 1px solid rgba(255,255,255,0.05);
-            background: rgba(255,255,255,0.02);
-            cursor: pointer; transition: 0.2s;
-            animation: fadeIn 0.3s ease-out backwards;
+        .panel-header {
+            padding: 10px 15px;
+            border-bottom: 1px solid var(--border);
+            display: flex; justify-content: space-between; align-items: center;
+            font-size: 0.8rem; font-weight: 600; color: var(--accent-dim);
         }
-        .text-block:hover { 
-            background: rgba(129, 140, 248, 0.15); 
-            border-color: var(--primary); 
-            transform: translateX(5px);
+
+        .tab-group { display: flex; gap: 10px; }
+        .tab-btn { background: none; border: none; cursor: pointer; color: #52525b; font-size: 0.8rem; font-weight: 600; transition: 0.2s; }
+        .tab-btn:hover { color: var(--accent-dim); }
+        .tab-btn.active { color: var(--highlight); }
+
+        .results-content { flex: 1; overflow-y: auto; padding: 10px; }
+        
+        .result-item {
+            display: flex; justify-content: space-between;
+            padding: 10px;
+            border-bottom: 1px solid var(--border);
+            font-size: 0.85rem;
+            color: var(--accent-dim);
+            cursor: pointer;
+            transition: 0.15s;
+            animation: slideInRight 0.3s backwards;
         }
+        .result-item:hover { background: #27272a; color: var(--accent); padding-left: 14px; }
+        .result-item span { font-family: var(--font-mono); }
+        .conf-tag { font-size: 0.7rem; color: #52525b; }
 
         /* LOADER */
         .loader-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(15, 23, 42, 0.85); z-index: 100;
+            background: rgba(9, 9, 11, 0.9); z-index: 100;
             display: flex; justify-content: center; align-items: center; flex-direction: column;
-            backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: 0.3s;
+            opacity: 0; pointer-events: none; transition: 0.3s;
         }
         .loader-overlay.active { opacity: 1; pointer-events: all; }
-        .spinner {
-            width: 50px; height: 50px; border: 3px solid rgba(255,255,255,0.1);
-            border-top-color: var(--primary); border-radius: 50%;
-            animation: spin 1s linear infinite; margin-bottom: 15px;
-            box-shadow: 0 0 20px var(--primary-glow);
+        .loader-bar {
+            width: 200px; height: 2px; background: #333;
+            overflow: hidden; border-radius: 2px; margin-top: 10px;
         }
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-        
-        .raw-text-area {
-            width: 100%; height: 100%; background: transparent; border: none;
-            color: #cbd5e1; resize: none; font-family: 'JetBrains Mono', monospace; line-height: 1.5; white-space: pre-wrap;
-        }
-        
-        .zoom-controls {
-            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
-            background: rgba(0,0,0,0.8); padding: 8px; border-radius: 20px;
-            display: flex; gap: 10px; border: 1px solid var(--border); z-index: 20;
+        .loader-progress {
+            width: 100%; height: 100%; background: var(--highlight);
+            transform: translateX(-100%);
+            animation: loading 1.5s infinite ease-in-out;
         }
+        @keyframes loading { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }
+
+        .raw-text { width: 100%; height: 100%; background: transparent; border: none; color: var(--accent-dim); resize: none; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; padding: 5px; }
     </style>
 </head>
 <body>
 
     <header>
-        <div class="logo"><i class="ph-bold ph-aperture"></i> OCR STUDIO</div>
-        <div style="font-size: 0.8rem; color: var(--text-muted); display:flex; align-items:center; gap:6px;">
-            <div style="width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 8px #10b981;"></div>
-            Online
+        <div class="brand">
+            <i class="ph-bold ph-read-cv-logo"></i> OCR STUDIO <span style="font-weight:400; opacity:0.5; font-size:0.8em; margin-left:5px;">PRO</span>
+        </div>
+        <div style="display:flex; align-items:center; gap:8px; font-size:0.75rem; color:#71717a;">
+            <div class="status-dot"></div> READY
         </div>
     </header>
 
     <main>
+        <!-- SIDEBAR -->
         <aside class="sidebar">
-            <div class="upload-area" id="drop-zone">
-                <i class="ph-duotone ph-cloud-arrow-up"></i>
-                <p><strong>Click to Upload</strong><br>or Drag & Drop</p>
+            <div class="upload-zone" id="drop-zone">
+                <i class="ph ph-upload-simple"></i>
+                <span>Open File</span>
                 <input type="file" id="file-input" hidden accept="image/*,application/pdf">
             </div>
 
-            <div style="padding: 15px; border-bottom: 1px solid var(--border);">
-                <label style="font-size: 0.8rem; color: #94a3b8; display: block; margin-bottom: 5px;">Auto-Rotate</label>
-                <input type="checkbox" id="angle-cls"> <span style="font-size: 0.8rem; color: #fff;">Enable</span>
+            <div class="control-section">
+                <div class="control-label">Settings</div>
+                <div class="toggle-row">
+                    <span>Auto-Rotate</span>
+                    <input type="checkbox" id="angle-cls">
+                </div>
+                <div class="toggle-row" style="margin-top:10px;">
+                    <span>Contrast Mode</span>
+                    <input type="checkbox" id="contrast-mode" onchange="toggleContrast()">
+                </div>
             </div>
-            
-            <div style="padding: 15px;">
-                 <label style="font-size: 0.8rem; color: #94a3b8; display: block; margin-bottom: 5px;">Confidence Filter</label>
-                 <input type="range" id="conf-slider" min="0" max="100" value="0" style="width:100%">
+
+            <div class="control-section">
+                <div class="control-label">Confidence Threshold <span id="conf-val" style="float:right">0%</span></div>
+                <input type="range" id="conf-slider" min="0" max="100" value="0">
             </div>
-            
-            <div style="margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                <button onclick="downloadJSON()" style="padding: 10px; background: #334155; border: none; color: white; border-radius: 6px; cursor: pointer;">JSON</button>
-                <button onclick="location.reload()" style="padding: 10px; background: #334155; border: none; color: white; border-radius: 6px; cursor: pointer;">Reset</button>
+
+            <div class="control-section" style="margin-top:auto">
+                <div class="control-label">Tools</div>
+                <div class="action-grid">
+                    <button class="btn" onclick="readAloud()"><i class="ph-bold ph-speaker-high"></i> Read</button>
+                    <button class="btn" onclick="copyText()"><i class="ph-bold ph-copy"></i> Copy</button>
+                    <button class="btn" onclick="downloadJSON()"><i class="ph-bold ph-file-json"></i> JSON</button>
+                    <button class="btn" onclick="resetUI()"><i class="ph-bold ph-trash"></i> Reset</button>
+                </div>
             </div>
         </aside>
 
+        <!-- WORKSPACE -->
         <div class="workspace">
-            <div class="preview-pane">
-                <!-- Pagination -->
-                <div class="pagination-bar" id="pagination-bar">
-                    <button class="page-btn" onclick="changePage(-1)"><i class="ph-bold ph-caret-left"></i></button>
-                    <span id="page-indicator" style="font-variant-numeric: tabular-nums;">Page 1 / 1</span>
-                    <button class="page-btn" onclick="changePage(1)"><i class="ph-bold ph-caret-right"></i></button>
-                </div>
-
+            <div class="preview-area">
                 <div class="canvas-wrapper" id="canvas-wrapper">
                     <img id="source-image" src="">
                     <canvas id="overlay"></canvas>
                     <div class="scan-line" id="scan-line"></div>
                 </div>
 
-                <div class="zoom-controls">
-                    <button class="page-btn" onclick="rotateView()" title="Rotate View"><i class="ph-bold ph-arrow-clockwise"></i></button>
-                    <div style="width:1px; background:rgba(255,255,255,0.2); margin:0 5px;"></div>
-                    <button class="page-btn" onclick="zoom(-10)"><i class="ph-bold ph-minus"></i></button>
-                    <button class="page-btn" onclick="resetZoom()">100%</button>
-                    <button class="page-btn" onclick="zoom(10)"><i class="ph-bold ph-plus"></i></button>
+                <!-- Floating Toolbar -->
+                <div class="floating-bar" id="pagination-bar" style="display:none">
+                    <button class="icon-btn" onclick="changePage(-1)"><i class="ph-bold ph-caret-left"></i></button>
+                    <span id="page-indicator" style="font-size:0.8rem; font-variant-numeric: tabular-nums; color:white;">1 / 1</span>
+                    <button class="icon-btn" onclick="changePage(1)"><i class="ph-bold ph-caret-right"></i></button>
+                    <div style="width:1px; height:14px; background:#333; margin:0 5px;"></div>
+                    <button class="icon-btn" onclick="rotateView()"><i class="ph-bold ph-arrow-clockwise"></i></button>
+                    <button class="icon-btn" onclick="zoom(-10)"><i class="ph-bold ph-minus"></i></button>
+                    <button class="icon-btn" onclick="resetZoom()" style="font-size:0.7rem; width:30px;">100%</button>
+                    <button class="icon-btn" onclick="zoom(10)"><i class="ph-bold ph-plus"></i></button>
                 </div>
             </div>
 
-            <div class="results-pane">
-                <div style="padding: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items:center;">
-                    <strong>Extracted Text</strong>
-                    <div>
-                        <button onclick="setView('blocks')" id="btn-blocks" style="background:transparent; border:none; color:var(--primary); cursor:pointer; font-weight:600;">Blocks</button>
-                        <button onclick="setView('raw')" id="btn-raw" style="background:transparent; border:none; color:#64748b; cursor:pointer;">Raw</button>
+            <div class="results-panel">
+                <div class="panel-header">
+                    <span>DATA</span>
+                    <div class="tab-group">
+                        <button class="tab-btn active" id="tab-blocks" onclick="setView('blocks')">LIST</button>
+                        <button class="tab-btn" id="tab-raw" onclick="setView('raw')">RAW</button>
                     </div>
                 </div>
                 <div class="results-content" id="results-content"></div>
@@ -359,9 +415,12 @@ html_content = """
         </div>
     </main>
 
+    <!-- LOADER -->
     <div class="loader-overlay" id="loader">
-        <div class="spinner"></div>
-        <h3 id="loader-msg" style="color: white;">Processing...</h3>
+        <div style="text-align:center">
+            <div style="font-size:0.9rem; letter-spacing:0.1em; color:var(--accent); font-weight:600; margin-bottom:10px" id="loader-msg">PROCESSING</div>
+            <div class="loader-bar"><div class="loader-progress"></div></div>
+        </div>
     </div>
 
     <script>
@@ -385,11 +444,16 @@ html_content = """
         const pageIndicator = document.getElementById('page-indicator');
         const ctx = canvas.getContext('2d');
         const scanLine = document.getElementById('scan-line');
+        const confSlider = document.getElementById('conf-slider');
+        const confVal = document.getElementById('conf-val');
 
         // --- EVENTS ---
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => startUpload(e.target.files[0]));
-        document.getElementById('conf-slider').addEventListener('input', () => renderCurrentPage());
+        confSlider.addEventListener('input', (e) => {
+            confVal.textContent = e.target.value + '%';
+            renderCurrentPage();
+        });
 
         // --- UPLOAD & STREAMING ---
         async function startUpload(file) {
@@ -404,7 +468,7 @@ html_content = """
             updateTransform();
             
             loader.classList.add('active');
-            loaderMsg.textContent = "Initializing Stream...";
+            loaderMsg.textContent = "INITIALIZING STREAM";
 
             const formData = new FormData();
             formData.append('file', file);
@@ -441,7 +505,7 @@ html_content = """
 
         function handleStreamData(data) {
             if (data.type === 'status') {
-                loaderMsg.textContent = data.message;
+                loaderMsg.textContent = data.message.toUpperCase();
             } else if (data.type === 'page') {
                 allPages.push(data);
                 if (allPages.length === 1) {
@@ -449,7 +513,7 @@ html_content = """
                     paginationBar.style.display = 'flex';
                     renderPage(0);
                     scanLine.classList.add('active');
-                    setTimeout(() => scanLine.classList.remove('active'), 2000);
+                    setTimeout(() => scanLine.classList.remove('active'), 1500);
                 }
                 updatePaginationUI();
             }
@@ -474,7 +538,7 @@ html_content = """
         function renderCurrentPage(highlightId = -1) {
             if (allPages.length === 0) return;
             const pageData = allPages[currentPageIdx];
-            const minConf = document.getElementById('conf-slider').value / 100;
+            const minConf = confSlider.value / 100;
             
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             
@@ -489,13 +553,13 @@ html_content = """
                     ctx.closePath();
                     
                     if (block.id === highlightId) {
-                        ctx.strokeStyle = '#818cf8';
+                        ctx.strokeStyle = '#6366f1';
                         ctx.lineWidth = 4;
-                        ctx.fillStyle = 'rgba(129, 140, 248, 0.4)';
+                        ctx.fillStyle = 'rgba(99, 102, 241, 0.3)';
                     } else {
-                        ctx.strokeStyle = 'rgba(129, 140, 248, 0.4)';
-                        ctx.lineWidth = 2;
-                        ctx.fillStyle = 'rgba(129, 140, 248, 0.05)';
+                        ctx.strokeStyle = 'rgba(99, 102, 241, 0.5)';
+                        ctx.lineWidth = 1;
+                        ctx.fillStyle = 'rgba(99, 102, 241, 0.02)';
                     }
                     ctx.fill();
                     ctx.stroke();
@@ -510,18 +574,18 @@ html_content = """
         function renderList() {
              resultsContent.innerHTML = '';
              if (currentView === 'raw') {
-                 resultsContent.innerHTML = `<textarea class="raw-text-area" readonly>${allPages[currentPageIdx].full_text}</textarea>`;
+                 resultsContent.innerHTML = `<textarea class="raw-text" readonly>${allPages[currentPageIdx].full_text}</textarea>`;
                  return;
              }
 
-             const minConf = document.getElementById('conf-slider').value / 100;
+             const minConf = confSlider.value / 100;
              allPages[currentPageIdx].blocks.forEach((block, index) => {
                 if (block.conf < minConf) return;
 
                 const div = document.createElement('div');
-                div.className = 'text-block';
-                div.style.animationDelay = `${index * 0.03}s`;
-                div.innerHTML = `<div style="display:flex; justify-content:space-between;"><span>${block.text}</span><small style="color:#64748b">${(block.conf*100).toFixed(0)}%</small></div>`;
+                div.className = 'result-item';
+                div.style.animationDelay = `${index * 0.02}s`;
+                div.innerHTML = `<span>${block.text}</span><span class="conf-tag">${(block.conf*100).toFixed(0)}%</span>`;
                 
                 div.addEventListener('mouseenter', () => drawCanvas(block.id));
                 div.addEventListener('mouseleave', () => drawCanvas(-1));
@@ -540,14 +604,14 @@ html_content = """
         }
 
         function updatePaginationUI() {
-            pageIndicator.textContent = `Page ${currentPageIdx + 1} / ${allPages.length}`;
+            pageIndicator.textContent = `${currentPageIdx + 1} / ${allPages.length}`;
             renderList();
         }
 
         function setView(view) {
             currentView = view;
-            document.getElementById('btn-blocks').style.color = view === 'blocks' ? '#818cf8' : '#64748b';
-            document.getElementById('btn-raw').style.color = view === 'raw' ? '#818cf8' : '#64748b';
+            document.getElementById('tab-blocks').classList.toggle('active', view === 'blocks');
+            document.getElementById('tab-raw').classList.toggle('active', view === 'raw');
             renderList();
             if(view === 'raw') ctx.clearRect(0, 0, canvas.width, canvas.height); 
         }
@@ -580,6 +644,50 @@ html_content = """
              node.remove();
         }
 
+        function readAloud() {
+            if (allPages.length === 0) return;
+            const text = currentView === 'raw' ? 
+                allPages[currentPageIdx].full_text : 
+                allPages[currentPageIdx].blocks.map(b => b.text).join(' ');
+            
+            if (!text) return alert("No text to read");
+            
+            window.speechSynthesis.cancel();
+            const utterance = new SpeechSynthesisUtterance(text);
+            window.speechSynthesis.speak(utterance);
+        }
+
+        function copyText() {
+            if (allPages.length === 0) return;
+            const text = allPages[currentPageIdx].full_text;
+            navigator.clipboard.writeText(text);
+            const btn = event.currentTarget;
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = `<i class="ph-bold ph-check"></i> Copied`;
+            setTimeout(() => btn.innerHTML = originalHTML, 2000);
+        }
+
+        function toggleContrast() {
+            const isContrast = document.getElementById('contrast-mode').checked;
+            if (isContrast) {
+                document.documentElement.style.setProperty('--bg-main', '#000000');
+                document.documentElement.style.setProperty('--bg-panel', '#000000');
+                document.documentElement.style.setProperty('--border', '#ffffff');
+                document.documentElement.style.setProperty('--accent', '#ffff00');
+                document.documentElement.style.setProperty('--accent-dim', '#ffffff');
+            } else {
+                document.documentElement.style.removeProperty('--bg-main');
+                document.documentElement.style.removeProperty('--bg-panel');
+                document.documentElement.style.removeProperty('--border');
+                document.documentElement.style.removeProperty('--accent');
+                document.documentElement.style.removeProperty('--accent-dim');
+            }
+        }
+
+        function resetUI() {
+            location.reload();
+        }
+
     </script>
 </body>
 </html>