From 47fbdb20eb858c1bb0857431bdfd052e753733bb Mon Sep 17 00:00:00 2001
From: Krikorios <99836218+Krikorios@users.noreply.github.com>
Date: Sun, 25 May 2025 03:25:47 +0300
Subject: [PATCH] Add enhanced implementation of the Ollama Vision Chat
 application

---
 index.html | 1233 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 1059 insertions(+), 174 deletions(-)
diff --git a/index.html b/index.html
index 3f77b1e..bccf62a 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ollama Vision Chat</title>
+    <title>Ollama Vision Chat Pro</title>
     <style>
         * {
             margin: 0;
@@ -11,42 +11,69 @@
             box-sizing: border-box;
         }
 
+        :root {
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --bg-primary: #ffffff;
+            --bg-secondary: #f9fafb;
+            --border-color: #e5e7eb;
+            --glass-bg: rgba(255, 255, 255, 0.95);
+            --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+
+        [data-theme="dark"] {
+            --text-primary: #f9fafb;
+            --text-secondary: #d1d5db;
+            --bg-primary: #111827;
+            --bg-secondary: #1f2937;
+            --border-color: #374151;
+            --glass-bg: rgba(17, 24, 39, 0.95);
+        }
+
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--primary-gradient);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 20px;
+            padding: 10px;
+            transition: all 0.3s ease;
         }
 
         .container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            box-shadow: var(--shadow-heavy);
             width: 100%;
-            max-width: 1200px;
-            height: 90vh;
+            max-width: 1400px;
+            height: 95vh;
             display: grid;
-            grid-template-columns: 1fr 400px;
+            grid-template-columns: 1fr 420px;
             overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
+        /* Video Section */
         .video-section {
             position: relative;
             background: #000;
             display: flex;
             flex-direction: column;
-            align-items: center;
-            justify-content: center;
+            overflow: hidden;
         }
 
         .video-container {
             position: relative;
-            width: 100%;
-            height: 100%;
+            flex: 1;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -56,7 +83,6 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
-            border-radius: 20px 0 0 20px;
         }
 
         .video-overlay {
@@ -66,16 +92,25 @@
             right: 20px;
             display: flex;
             justify-content: space-between;
-            align-items: center;
+            align-items: flex-start;
             z-index: 10;
+            gap: 15px;
         }
 
-        .status-indicator {
-            background: rgba(0, 0, 0, 0.7);
+        .status-panel {
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
             color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
+            padding: 12px 16px;
+            border-radius: 16px;
             font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            min-width: 200px;
+        }
+
+        .status-row {
             display: flex;
             align-items: center;
             gap: 8px;
@@ -85,33 +120,44 @@
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: #ff4444;
+            background: var(--error-color);
             animation: pulse 2s infinite;
         }
 
-        .status-dot.connected {
-            background: #44ff44;
-        }
+        .status-dot.connected { background: var(--success-color); }
+        .status-dot.warning { background: var(--warning-color); }
 
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
         }
 
+        .model-info {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+
         .controls {
-            background: rgba(0, 0, 0, 0.7);
-            padding: 8px;
-            border-radius: 20px;
             display: flex;
+            flex-direction: column;
             gap: 10px;
         }
 
+        .control-row {
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 8px;
+            border-radius: 16px;
+            display: flex;
+            gap: 8px;
+        }
+
         .control-btn {
             background: rgba(255, 255, 255, 0.2);
             border: none;
             color: white;
             padding: 10px;
-            border-radius: 50%;
+            border-radius: 12px;
             cursor: pointer;
             transition: all 0.3s ease;
             width: 40px;
@@ -119,34 +165,217 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 16px;
+            position: relative;
         }
 
         .control-btn:hover {
             background: rgba(255, 255, 255, 0.3);
-            transform: scale(1.1);
+            transform: scale(1.05);
         }
 
+        .control-btn.active {
+            background: var(--success-color);
+        }
+
+        .control-btn.recording::after {
+            content: '';
+            position: absolute;
+            top: -2px;
+            right: -2px;
+            width: 8px;
+            height: 8px;
+            background: #ff4444;
+            border-radius: 50%;
+            animation: pulse 1s infinite;
+        }
+
+        /* Enhanced Settings Panel */
+        .settings-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(15px);
+            color: white;
+            padding: 20px;
+            border-radius: 16px;
+            min-width: 320px;
+            max-height: 80vh;
+            overflow-y: auto;
+            display: none;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .settings-panel.show { display: block; }
+
+        .settings-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .settings-title {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.3s ease;
+        }
+
+        .close-btn:hover { opacity: 1; }
+
+        .settings-section {
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: #fff;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .setting-item {
+            margin-bottom: 15px;
+        }
+
+        .setting-item label {
+            display: block;
+            font-size: 13px;
+            margin-bottom: 6px;
+            opacity: 0.9;
+        }
+
+        .setting-item input, .setting-item select {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            font-size: 14px;
+            transition: border-color 0.3s ease;
+        }
+
+        .setting-item input:focus, .setting-item select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .setting-item input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 24px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.2);
+            transition: .4s;
+            border-radius: 24px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+
+        input:checked + .slider {
+            background-color: var(--success-color);
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+
+        /* Chat Section */
         .chat-section {
             display: flex;
             flex-direction: column;
-            background: #f8f9fa;
+            background: var(--bg-secondary);
+            position: relative;
         }
 
         .chat-header {
-            background: #fff;
+            background: var(--bg-primary);
             padding: 20px;
-            border-bottom: 1px solid #e9ecef;
-            text-align: center;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
-        .chat-header h2 {
-            color: #495057;
-            margin-bottom: 5px;
+        .chat-title {
+            display: flex;
+            flex-direction: column;
         }
 
-        .chat-header p {
-            color: #6c757d;
+        .chat-title h2 {
+            color: var(--text-primary);
+            margin-bottom: 4px;
+            font-size: 20px;
+        }
+
+        .chat-title p {
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+
+        .chat-controls {
+            display: flex;
+            gap: 8px;
+        }
+
+        .header-btn {
+            background: none;
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+            padding: 8px 12px;
+            border-radius: 8px;
+            cursor: pointer;
             font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .header-btn:hover {
+            background: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .messages-container {
@@ -155,22 +384,24 @@
             padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 16px;
+            scroll-behavior: smooth;
         }
 
         .message {
-            max-width: 80%;
-            padding: 12px 16px;
-            border-radius: 18px;
+            max-width: 85%;
+            padding: 14px 18px;
+            border-radius: 20px;
             font-size: 14px;
-            line-height: 1.4;
-            animation: slideIn 0.3s ease;
+            line-height: 1.5;
+            animation: slideIn 0.4s ease;
+            word-wrap: break-word;
         }
 
         @keyframes slideIn {
             from {
                 opacity: 0;
-                transform: translateY(10px);
+                transform: translateY(15px);
             }
             to {
                 opacity: 1;
@@ -179,34 +410,113 @@
         }
 
         .message.user {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--primary-gradient);
             color: white;
             align-self: flex-end;
-            border-bottom-right-radius: 4px;
+            border-bottom-right-radius: 6px;
+            box-shadow: var(--shadow-light);
         }
 
         .message.assistant {
-            background: #fff;
-            color: #495057;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             align-self: flex-start;
-            border: 1px solid #e9ecef;
-            border-bottom-left-radius: 4px;
+            border: 1px solid var(--border-color);
+            border-bottom-left-radius: 6px;
+            box-shadow: var(--shadow-light);
         }
 
         .message.system {
-            background: #fff3cd;
-            color: #856404;
+            background: #fef3c7;
+            color: #92400e;
             align-self: center;
             font-size: 12px;
-            border: 1px solid #ffeaa7;
+            border: 1px solid #fcd34d;
+            text-align: center;
+            max-width: 90%;
         }
 
+        .message.error {
+            background: #fee2e2;
+            color: #dc2626;
+            border: 1px solid #fca5a5;
+        }
+
+        .message-time {
+            font-size: 11px;
+            opacity: 0.6;
+            margin-top: 4px;
+        }
+
+        .typing-indicator {
+            display: none;
+            padding: 14px 18px;
+            background: var(--bg-primary);
+            border-radius: 20px;
+            border-bottom-left-radius: 6px;
+            align-self: flex-start;
+            border: 1px solid var(--border-color);
+        }
+
+        .typing-indicator.show { display: block; }
+
+        .typing-dots {
+            display: flex;
+            gap: 4px;
+        }
+
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--text-secondary);
+            animation: typingPulse 1.4s infinite ease-in-out;
+        }
+
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+        @keyframes typingPulse {
+            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+            40% { opacity: 1; transform: scale(1); }
+        }
+
+        /* Enhanced Input Section */
         .input-container {
             padding: 20px;
-            background: #fff;
-            border-top: 1px solid #e9ecef;
+            background: var(--bg-primary);
+            border-top: 1px solid var(--border-color);
             display: flex;
-            gap: 10px;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .quick-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .quick-action {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .quick-action:hover {
+            background: var(--primary-gradient);
+            color: white;
+            border-color: transparent;
+        }
+
+        .input-row {
+            display: flex;
+            gap: 12px;
             align-items: flex-end;
         }
 
@@ -217,97 +527,220 @@
 
         #messageInput {
             width: 100%;
-            padding: 12px 16px;
-            border: 2px solid #e9ecef;
-            border-radius: 20px;
+            padding: 14px 50px 14px 16px;
+            border: 2px solid var(--border-color);
+            border-radius: 16px;
             font-size: 14px;
             resize: none;
-            max-height: 100px;
-            min-height: 44px;
-            transition: border-color 0.3s ease;
+            max-height: 120px;
+            min-height: 48px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+            font-family: inherit;
         }
 
         #messageInput:focus {
             outline: none;
             border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .input-actions {
+            position: absolute;
+            right: 8px;
+            bottom: 8px;
+            display: flex;
+            gap: 4px;
+        }
+
+        .input-btn {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            padding: 6px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .input-btn:hover {
+            background: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .send-btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--primary-gradient);
             border: none;
             color: white;
-            padding: 12px 16px;
-            border-radius: 20px;
+            padding: 14px 20px;
+            border-radius: 16px;
             cursor: pointer;
             font-weight: 600;
+            font-size: 14px;
             transition: all 0.3s ease;
             white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
         .send-btn:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+            transform: translateY(-1px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
         }
 
         .send-btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
+            transform: none;
         }
 
-        .settings-panel {
+        /* Theme Toggle */
+        .theme-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 18px;
+            width: 44px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+            box-shadow: var(--shadow-medium);
+        }
+
+        /* Image Preview */
+        .image-preview {
             position: absolute;
-            bottom: 20px;
-            left: 20px;
+            bottom: 80px;
+            right: 20px;
+            width: 150px;
+            height: 100px;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 12px;
+            overflow: hidden;
+            display: none;
+            z-index: 5;
+        }
+
+        .image-preview.show { display: block; }
+
+        .image-preview img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .preview-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
             background: rgba(0, 0, 0, 0.8);
             color: white;
-            padding: 15px;
-            border-radius: 10px;
-            min-width: 200px;
-            display: none;
+            font-size: 10px;
+            padding: 4px 8px;
+            text-align: center;
         }
 
-        .settings-panel.show {
-            display: block;
-        }
-
-        .setting-item {
-            margin-bottom: 10px;
-        }
-
-        .setting-item label {
-            display: block;
-            font-size: 12px;
-            margin-bottom: 5px;
-        }
-
-        .setting-item input, .setting-item select {
-            width: 100%;
-            padding: 5px;
-            border: none;
-            border-radius: 4px;
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
-        }
-
-        .setting-item input::placeholder {
-            color: rgba(255, 255, 255, 0.7);
-        }
-
-        @media (max-width: 768px) {
+        /* Responsive Design */
+        @media (max-width: 1024px) {
             .container {
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr 1fr;
                 max-width: 100%;
-                height: 95vh;
+                height: 98vh;
             }
 
-            #videoElement {
-                border-radius: 20px 20px 0 0;
+            .video-overlay {
+                flex-direction: column;
+                align-items: flex-start;
             }
+
+            .status-panel {
+                min-width: auto;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body { padding: 5px; }
+            
+            .container {
+                border-radius: 16px;
+                height: 99vh;
+            }
+
+            .video-overlay {
+                top: 10px;
+                left: 10px;
+                right: 10px;
+            }
+
+            .settings-panel {
+                bottom: 10px;
+                left: 10px;
+                right: 10px;
+                min-width: auto;
+            }
+
+            .chat-header {
+                padding: 15px;
+            }
+
+            .messages-container {
+                padding: 15px;
+            }
+
+            .input-container {
+                padding: 15px;
+            }
+
+            .quick-actions {
+                display: none;
+            }
+        }
+
+        /* Scrollbar Styling */
+        .messages-container::-webkit-scrollbar,
+        .settings-panel::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .messages-container::-webkit-scrollbar-track,
+        .settings-panel::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .messages-container::-webkit-scrollbar-thumb,
+        .settings-panel::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .messages-container::-webkit-scrollbar-thumb:hover,
+        .settings-panel::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
         }
     </style>
 </head>
 <body>
+    <button class="theme-toggle" id="themeToggle">🌙</button>
+    
     <div class="container">
         <div class="video-section">
             <div class="video-container">
@@ -315,34 +748,106 @@
                 <canvas id="captureCanvas" style="display: none;"></canvas>
                 
                 <div class="video-overlay">
-                    <div class="status-indicator">
-                        <div class="status-dot" id="statusDot"></div>
-                        <span id="statusText">Disconnected</span>
+                    <div class="status-panel">
+                        <div class="status-row">
+                            <div class="status-dot" id="statusDot"></div>
+                            <span id="statusText">Connecting...</span>
+                        </div>
+                        <div class="model-info" id="modelInfo">
+                            Model: <span id="currentModel">Loading...</span>
+                        </div>
+                        <div class="model-info" id="performanceInfo">
+                            Response time: <span id="responseTime">--</span>ms
+                        </div>
                     </div>
                     
                     <div class="controls">
-                        <button class="control-btn" id="settingsBtn" title="Settings">⚙️</button>
-                        <button class="control-btn" id="captureBtn" title="Take Photo">📸</button>
-                        <button class="control-btn" id="pauseBtn" title="Pause/Resume">⏸️</button>
+                        <div class="control-row">
+                            <button class="control-btn" id="settingsBtn" title="Settings">⚙️</button>
+                            <button class="control-btn" id="captureBtn" title="Take Photo">📸</button>
+                            <button class="control-btn" id="pauseBtn" title="Pause/Resume Auto-capture">⏸️</button>
+                        </div>
+                        <div class="control-row">
+                            <button class="control-btn" id="clearBtn" title="Clear Chat">🗑️</button>
+                            <button class="control-btn" id="exportBtn" title="Export Chat">💾</button>
+                            <button class="control-btn" id="fullscreenBtn" title="Toggle Fullscreen">⛶</button>
+                        </div>
                     </div>
                 </div>
 
+                <div class="image-preview" id="imagePreview">
+                    <img id="previewImg" alt="Last capture">
+                    <div class="preview-label">Last Capture</div>
+                </div>
+
                 <div class="settings-panel" id="settingsPanel">
-                    <div class="setting-item">
-                        <label>Ollama Server URL:</label>
-                        <input type="text" id="ollamaUrl" value="http://localhost:11434" placeholder="http://localhost:11434">
+                    <div class="settings-header">
+                        <div class="settings-title">Settings</div>
+                        <button class="close-btn" id="closeSettings">×</button>
                     </div>
-                    <div class="setting-item">
-                        <label>Vision Model:</label>
-                        <input type="text" id="modelName" value="llava" placeholder="llava">
+                    
+                    <div class="settings-section">
+                        <div class="section-title">Connection</div>
+                        <div class="setting-item">
+                            <label>Ollama Server URL:</label>
+                            <input type="text" id="ollamaUrl" value="http://localhost:11434" placeholder="http://localhost:11434">
+                        </div>
+                        <div class="setting-item">
+                            <label>Vision Model:</label>
+                            <select id="modelName">
+                                <option value="llava">LLaVA (Default)</option>
+                                <option value="llava:7b">LLaVA 7B</option>
+                                <option value="llava:13b">LLaVA 13B</option>
+                                <option value="bakllava">BakLLaVA</option>
+                                <option value="custom">Custom Model</option>
+                            </select>
+                        </div>
+                        <div class="setting-item" id="customModelItem" style="display: none;">
+                            <label>Custom Model Name:</label>
+                            <input type="text" id="customModel" placeholder="Enter model name">
+                        </div>
                     </div>
-                    <div class="setting-item">
-                        <label>Auto-capture Interval (seconds):</label>
-                        <input type="number" id="captureInterval" value="10" min="5" max="60">
+
+                    <div class="settings-section">
+                        <div class="section-title">Camera</div>
+                        <div class="setting-item">
+                            <label>Auto-capture Interval (seconds):</label>
+                            <input type="range" id="captureInterval" min="5" max="60" value="10" step="5">
+                            <div style="text-align: center; margin-top: 5px; font-size: 12px;">
+                                <span id="intervalValue">10</span>s
+                            </div>
+                        </div>
+                        <div class="setting-item">
+                            <label>Enable Auto-capture:</label>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="autoCapture" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <label>Image Quality:</label>
+                            <select id="imageQuality">
+                                <option value="0.6">Low (Fast)</option>
+                                <option value="0.8">Medium (Default)</option>
+                                <option value="1.0">High (Slow)</option>
+                            </select>
+                        </div>
                     </div>
-                    <div class="setting-item">
-                        <label>Enable Auto-capture:</label>
-                        <input type="checkbox" id="autoCapture" checked>
+
+                    <div class="settings-section">
+                        <div class="section-title">AI Behavior</div>
+                        <div class="setting-item">
+                            <label>System Prompt:</label>
+                            <textarea id="systemPrompt" rows="3" placeholder="You are a helpful AI assistant that can see through the camera...">You are a helpful AI assistant with vision capabilities. You can see what the user is showing you through their camera. Be conversational, helpful, and provide detailed observations when asked about what you can see.</textarea>
+                        </div>
+                        <div class="setting-item">
+                            <label>Context Memory:</label>
+                            <select id="contextMemory">
+                                <option value="3">Short (3 messages)</option>
+                                <option value="10">Medium (10 messages)</option>
+                                <option value="20">Long (20 messages)</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -350,31 +855,62 @@
 
         <div class="chat-section">
             <div class="chat-header">
-                <h2>Vision Chat</h2>
-                <p>I can see what you're doing and chat about it!</p>
+                <div class="chat-title">
+                    <h2>Vision Chat Pro</h2>
+                    <p>AI that can see and understand your world</p>
+                </div>
+                <div class="chat-controls">
+                    <button class="header-btn" id="voiceBtn">🎤 Voice</button>
+                    <button class="header-btn" id="modeBtn">💬 Chat</button>
+                </div>
             </div>
 
             <div class="messages-container" id="messagesContainer">
                 <div class="message system">
-                    Welcome! I'm connected to your camera and can see what you're doing. Ask me anything about what I can see, or just chat with me!
+                    🎉 Welcome to Vision Chat Pro! I can see through your camera and help with anything you need. Try asking me about what I can see, or just have a conversation!
+                </div>
+            </div>
+
+            <div class="typing-indicator" id="typingIndicator">
+                <div class="typing-dots">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
                 </div>
             </div>
 
             <div class="input-container">
-                <div class="input-wrapper">
-                    <textarea 
-                        id="messageInput" 
-                        placeholder="Type your message or ask about what I can see..."
-                        rows="1"
-                    ></textarea>
+                <div class="quick-actions" id="quickActions">
+                    <button class="quick-action" data-prompt="What do you see in my camera?">👁️ What do you see?</button>
+                    <button class="quick-action" data-prompt="Help me organize this space">🏠 Organize space</button>
+                    <button class="quick-action" data-prompt="What colors are prominent in this image?">🎨 Describe colors</button>
+                    <button class="quick-action" data-prompt="Can you read any text in this image?">📖 Read text</button>
+                    <button class="quick-action" data-prompt="Give me feedback on this setup">💡 Get feedback</button>
+                </div>
+                
+                <div class="input-row">
+                    <div class="input-wrapper">
+                        <textarea 
+                            id="messageInput" 
+                            placeholder="Ask me anything about what I can see, or just chat..."
+                            rows="1"
+                        ></textarea>
+                        <div class="input-actions">
+                            <button class="input-btn" id="emojiBtn" title="Add emoji">😊</button>
+                            <button class="input-btn" id="attachBtn" title="Attach image">📎</button>
+                        </div>
+                    </div>
+                    <button class="send-btn" id="sendBtn">
+                        <span>Send</span>
+                        <span>📤</span>
+                    </button>
                 </div>
-                <button class="send-btn" id="sendBtn">Send</button>
             </div>
         </div>
     </div>
 
     <script>
-        class VisionChatApp {
+        class EnhancedVisionChatApp {
             constructor() {
                 this.video = document.getElementById('videoElement');
                 this.canvas = document.getElementById('captureCanvas');
@@ -384,13 +920,25 @@
                 this.sendBtn = document.getElementById('sendBtn');
                 this.statusDot = document.getElementById('statusDot');
                 this.statusText = document.getElementById('statusText');
+                this.typingIndicator = document.getElementById('typingIndicator');
                 
+                // Settings
                 this.ollamaUrl = 'http://localhost:11434';
                 this.modelName = 'llava';
+                this.systemPrompt = 'You are a helpful AI assistant with vision capabilities.';
+                this.contextMemory = 10;
+                this.imageQuality = 0.8;
+                
+                // State
                 this.isConnected = false;
                 this.captureIntervalId = null;
                 this.lastCaptureTime = 0;
                 this.currentImageData = null;
+                this.messageHistory = [];
+                this.availableModels = [];
+                this.isDarkTheme = false;
+                this.isRecording = false;
+                this.lastResponseTime = 0;
                 
                 this.init();
             }
@@ -398,16 +946,18 @@
             async init() {
                 await this.setupCamera();
                 this.setupEventListeners();
+                this.loadSettings();
                 this.checkOllamaConnection();
                 this.startAutoCapture();
+                this.initializeTheme();
             }
 
             async setupCamera() {
                 try {
                     const stream = await navigator.mediaDevices.getUserMedia({
                         video: { 
-                            width: { ideal: 1280 }, 
-                            height: { ideal: 720 },
+                            width: { ideal: 1920 }, 
+                            height: { ideal: 1080 },
                             facingMode: 'user'
                         }
                     });
@@ -419,10 +969,10 @@
                         this.canvas.height = this.video.videoHeight;
                     });
                     
-                    this.addMessage('system', 'Camera connected successfully!');
+                    this.addMessage('system', '📹 Camera connected successfully!');
                 } catch (error) {
                     console.error('Camera setup failed:', error);
-                    this.addMessage('system', 'Failed to access camera. Please check permissions.');
+                    this.addMessage('error', '❌ Failed to access camera. Please check permissions and try again.');
                 }
             }
 
@@ -439,13 +989,24 @@
                 // Auto-resize textarea
                 this.messageInput.addEventListener('input', () => {
                     this.messageInput.style.height = 'auto';
-                    this.messageInput.style.height = this.messageInput.scrollHeight + 'px';
+                    this.messageInput.style.height = Math.min(this.messageInput.scrollHeight, 120) + 'px';
+                });
+
+                // Quick actions
+                document.querySelectorAll('.quick-action').forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        this.messageInput.value = btn.dataset.prompt;
+                        this.messageInput.focus();
+                        this.messageInput.style.height = 'auto';
+                        this.messageInput.style.height = this.messageInput.scrollHeight + 'px';
+                    });
                 });
 
                 // Control buttons
                 document.getElementById('captureBtn').addEventListener('click', () => {
                     this.captureFrame();
-                    this.addMessage('system', 'Photo captured!');
+                    this.showImagePreview();
+                    this.addMessage('system', '📸 Photo captured!');
                 });
 
                 document.getElementById('pauseBtn').addEventListener('click', () => {
@@ -453,18 +1014,52 @@
                 });
 
                 document.getElementById('settingsBtn').addEventListener('click', () => {
-                    const panel = document.getElementById('settingsPanel');
-                    panel.classList.toggle('show');
+                    this.toggleSettings();
                 });
 
-                // Settings
+                document.getElementById('closeSettings').addEventListener('click', () => {
+                    this.hideSettings();
+                });
+
+                document.getElementById('clearBtn').addEventListener('click', () => {
+                    this.clearChat();
+                });
+
+                document.getElementById('exportBtn').addEventListener('click', () => {
+                    this.exportChat();
+                });
+
+                document.getElementById('fullscreenBtn').addEventListener('click', () => {
+                    this.toggleFullscreen();
+                });
+
+                // Theme toggle
+                document.getElementById('themeToggle').addEventListener('click', () => {
+                    this.toggleTheme();
+                });
+
+                // Settings handlers
                 document.getElementById('ollamaUrl').addEventListener('change', (e) => {
                     this.ollamaUrl = e.target.value;
+                    this.saveSettings();
                     this.checkOllamaConnection();
                 });
 
                 document.getElementById('modelName').addEventListener('change', (e) => {
+                    if (e.target.value === 'custom') {
+                        document.getElementById('customModelItem').style.display = 'block';
+                    } else {
+                        document.getElementById('customModelItem').style.display = 'none';
+                        this.modelName = e.target.value;
+                        this.saveSettings();
+                        this.updateModelInfo();
+                    }
+                });
+
+                document.getElementById('customModel').addEventListener('change', (e) => {
                     this.modelName = e.target.value;
+                    this.saveSettings();
+                    this.updateModelInfo();
                 });
 
                 document.getElementById('autoCapture').addEventListener('change', (e) => {
@@ -473,58 +1068,149 @@
                     } else {
                         this.stopAutoCapture();
                     }
+                    this.saveSettings();
                 });
 
-                document.getElementById('captureInterval').addEventListener('change', (e) => {
+                document.getElementById('captureInterval').addEventListener('input', (e) => {
+                    document.getElementById('intervalValue').textContent = e.target.value;
                     this.stopAutoCapture();
                     if (document.getElementById('autoCapture').checked) {
                         this.startAutoCapture();
                     }
+                    this.saveSettings();
+                });
+
+                document.getElementById('imageQuality').addEventListener('change', (e) => {
+                    this.imageQuality = parseFloat(e.target.value);
+                    this.saveSettings();
+                });
+
+                document.getElementById('systemPrompt').addEventListener('change', (e) => {
+                    this.systemPrompt = e.target.value;
+                    this.saveSettings();
+                });
+
+                document.getElementById('contextMemory').addEventListener('change', (e) => {
+                    this.contextMemory = parseInt(e.target.value);
+                    this.saveSettings();
+                });
+
+                // Header buttons
+                document.getElementById('voiceBtn').addEventListener('click', () => {
+                    this.toggleVoiceMode();
+                });
+
+                document.getElementById('modeBtn').addEventListener('click', () => {
+                    this.toggleChatMode();
                 });
             }
 
             async checkOllamaConnection() {
                 try {
+                    this.setConnectionStatus('connecting');
                     const response = await fetch(`${this.ollamaUrl}/api/tags`);
+                    
                     if (response.ok) {
-                        this.setConnectionStatus(true);
                         const data = await response.json();
-                        const hasVisionModel = data.models.some(model => 
-                            model.name.includes(this.modelName) || 
-                            model.name.includes('llava') || 
-                            model.name.includes('vision')
+                        this.availableModels = data.models || [];
+                        this.setConnectionStatus('connected');
+                        this.updateAvailableModels();
+                        
+                        const hasCurrentModel = this.availableModels.some(model => 
+                            model.name.includes(this.modelName)
                         );
                         
-                        if (!hasVisionModel) {
-                            this.addMessage('system', `Warning: ${this.modelName} model not found. Available models: ${data.models.map(m => m.name).join(', ')}`);
+                        if (!hasCurrentModel) {
+                            this.addMessage('system', `⚠️ Model "${this.modelName}" not found. Available models: ${this.availableModels.map(m => m.name).join(', ')}`);
+                            this.setConnectionStatus('warning');
                         }
+                        
+                        this.updateModelInfo();
                     } else {
                         throw new Error('Connection failed');
                     }
                 } catch (error) {
                     console.error('Ollama connection failed:', error);
-                    this.setConnectionStatus(false);
-                    this.addMessage('system', 'Failed to connect to Ollama. Make sure it\'s running on ' + this.ollamaUrl);
+                    this.setConnectionStatus('disconnected');
+                    this.addMessage('error', `❌ Failed to connect to Ollama at ${this.ollamaUrl}. Make sure Ollama is running.`);
                 }
             }
 
-            setConnectionStatus(connected) {
-                this.isConnected = connected;
-                this.statusDot.classList.toggle('connected', connected);
-                this.statusText.textContent = connected ? 'Connected' : 'Disconnected';
+            setConnectionStatus(status) {
+                this.statusDot.className = 'status-dot';
+                
+                switch (status) {
+                    case 'connected':
+                        this.statusDot.classList.add('connected');
+                        this.statusText.textContent = 'Connected';
+                        this.isConnected = true;
+                        break;
+                    case 'connecting':
+                        this.statusText.textContent = 'Connecting...';
+                        this.isConnected = false;
+                        break;
+                    case 'warning':
+                        this.statusDot.classList.add('warning');
+                        this.statusText.textContent = 'Model Warning';
+                        this.isConnected = true;
+                        break;
+                    default:
+                        this.statusText.textContent = 'Disconnected';
+                        this.isConnected = false;
+                }
+            }
+
+            updateModelInfo() {
+                document.getElementById('currentModel').textContent = this.modelName;
+            }
+
+            updateAvailableModels() {
+                const select = document.getElementById('modelName');
+                const customOption = select.querySelector('option[value="custom"]');
+                
+                // Clear existing model options (except predefined ones)
+                const predefinedValues = ['llava', 'llava:7b', 'llava:13b', 'bakllava', 'custom'];
+                Array.from(select.options).forEach(option => {
+                    if (!predefinedValues.includes(option.value)) {
+                        option.remove();
+                    }
+                });
+
+                // Add available models
+                this.availableModels.forEach(model => {
+                    if (!predefinedValues.includes(model.name)) {
+                        const option = document.createElement('option');
+                        option.value = model.name;
+                        option.textContent = model.name;
+                        select.insertBefore(option, customOption);
+                    }
+                });
             }
 
             captureFrame() {
                 if (!this.video.videoWidth || !this.video.videoHeight) return null;
                 
                 this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
-                const imageData = this.canvas.toDataURL('image/jpeg', 0.8);
-                this.currentImageData = imageData.split(',')[1]; // Remove data:image/jpeg;base64, prefix
+                const imageData = this.canvas.toDataURL('image/jpeg', this.imageQuality);
+                this.currentImageData = imageData.split(',')[1];
                 this.lastCaptureTime = Date.now();
                 
                 return this.currentImageData;
             }
 
+            showImagePreview() {
+                if (this.currentImageData) {
+                    const preview = document.getElementById('imagePreview');
+                    const img = document.getElementById('previewImg');
+                    img.src = 'data:image/jpeg;base64,' + this.currentImageData;
+                    preview.classList.add('show');
+                    
+                    setTimeout(() => {
+                        preview.classList.remove('show');
+                    }, 3000);
+                }
+            }
+
             startAutoCapture() {
                 this.stopAutoCapture();
                 const interval = parseInt(document.getElementById('captureInterval').value) * 1000;
@@ -535,6 +1221,11 @@
                 
                 // Capture first frame immediately
                 this.captureFrame();
+                
+                // Update pause button
+                const pauseBtn = document.getElementById('pauseBtn');
+                pauseBtn.classList.add('active');
+                pauseBtn.innerHTML = '⏸️';
             }
 
             stopAutoCapture() {
@@ -542,6 +1233,11 @@
                     clearInterval(this.captureIntervalId);
                     this.captureIntervalId = null;
                 }
+                
+                // Update pause button
+                const pauseBtn = document.getElementById('pauseBtn');
+                pauseBtn.classList.remove('active');
+                pauseBtn.innerHTML = '▶️';
             }
 
             toggleAutoCapture() {
@@ -550,11 +1246,13 @@
                 
                 if (autoCapture.checked) {
                     this.startAutoCapture();
-                    this.addMessage('system', 'Auto-capture resumed');
+                    this.addMessage('system', '▶️ Auto-capture resumed');
                 } else {
                     this.stopAutoCapture();
-                    this.addMessage('system', 'Auto-capture paused');
+                    this.addMessage('system', '⏸️ Auto-capture paused');
                 }
+                
+                this.saveSettings();
             }
 
             async sendMessage() {
@@ -562,12 +1260,12 @@
                 if (!message) return;
 
                 if (!this.isConnected) {
-                    this.addMessage('system', 'Not connected to Ollama. Please check the connection.');
+                    this.addMessage('error', '❌ Not connected to Ollama. Please check the connection.');
                     return;
                 }
 
                 // Capture current frame if we don't have recent data
-                if (!this.currentImageData || (Date.now() - this.lastCaptureTime > 15000)) {
+                if (!this.currentImageData || (Date.now() - this.lastCaptureTime > 30000)) {
                     this.captureFrame();
                 }
 
@@ -575,23 +1273,35 @@
                 this.messageInput.value = '';
                 this.messageInput.style.height = 'auto';
                 this.setSendingState(true);
+                this.showTypingIndicator();
+
+                const startTime = Date.now();
 
                 try {
                     const response = await this.sendToOllama(message, this.currentImageData);
+                    this.lastResponseTime = Date.now() - startTime;
+                    document.getElementById('responseTime').textContent = this.lastResponseTime;
+                    
                     this.addMessage('assistant', response);
+                    this.updateMessageHistory(message, response);
                 } catch (error) {
                     console.error('Error sending message:', error);
-                    this.addMessage('system', 'Error: ' + error.message);
+                    this.addMessage('error', '❌ Error: ' + error.message);
                 } finally {
                     this.setSendingState(false);
+                    this.hideTypingIndicator();
                 }
             }
 
             async sendToOllama(message, imageData) {
                 const payload = {
                     model: this.modelName,
-                    prompt: message,
-                    stream: false
+                    prompt: this.buildContextualPrompt(message),
+                    stream: false,
+                    options: {
+                        temperature: 0.7,
+                        top_p: 0.9,
+                    }
                 };
 
                 if (imageData) {
@@ -614,27 +1324,202 @@
                 return data.response || 'No response received';
             }
 
+            buildContextualPrompt(currentMessage) {
+                let prompt = this.systemPrompt + '\n\n';
+                
+                // Add recent conversation history
+                const recentHistory = this.messageHistory.slice(-this.contextMemory);
+                if (recentHistory.length > 0) {
+                    prompt += 'Recent conversation:\n';
+                    recentHistory.forEach(({ user, assistant }) => {
+                        prompt += `Human: ${user}\nAssistant: ${assistant}\n\n`;
+                    });
+                }
+                
+                prompt += `Human: ${currentMessage}\nAssistant:`;
+                return prompt;
+            }
+
+            updateMessageHistory(userMessage, assistantResponse) {
+                this.messageHistory.push({
+                    user: userMessage,
+                    assistant: assistantResponse,
+                    timestamp: Date.now()
+                });
+                
+                // Keep only recent messages based on context memory setting
+                if (this.messageHistory.length > this.contextMemory) {
+                    this.messageHistory = this.messageHistory.slice(-this.contextMemory);
+                }
+            }
+
             addMessage(type, content) {
                 const messageDiv = document.createElement('div');
                 messageDiv.className = `message ${type}`;
-                messageDiv.textContent = content;
+                
+                const contentDiv = document.createElement('div');
+                contentDiv.textContent = content;
+                messageDiv.appendChild(contentDiv);
+                
+                if (type !== 'system' && type !== 'error') {
+                    const timeDiv = document.createElement('div');
+                    timeDiv.className = 'message-time';
+                    timeDiv.textContent = new Date().toLocaleTimeString();
+                    messageDiv.appendChild(timeDiv);
+                }
                 
                 this.messagesContainer.appendChild(messageDiv);
                 this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
             }
 
+            showTypingIndicator() {
+                this.typingIndicator.classList.add('show');
+                this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+            }
+
+            hideTypingIndicator() {
+                this.typingIndicator.classList.remove('show');
+            }
+
             setSendingState(sending) {
                 this.sendBtn.disabled = sending;
-                this.sendBtn.textContent = sending ? 'Sending...' : 'Send';
+                const btnText = this.sendBtn.querySelector('span');
+                const btnIcon = this.sendBtn.querySelector('span:last-child');
+                
+                if (sending) {
+                    btnText.textContent = 'Sending...';
+                    btnIcon.textContent = '⏳';
+                } else {
+                    btnText.textContent = 'Send';
+                    btnIcon.textContent = '📤';
+                }
+                
                 this.messageInput.disabled = sending;
             }
+
+            toggleSettings() {
+                const panel = document.getElementById('settingsPanel');
+                panel.classList.toggle('show');
+            }
+
+            hideSettings() {
+                const panel = document.getElementById('settingsPanel');
+                panel.classList.remove('show');
+            }
+
+            clearChat() {
+                if (confirm('Are you sure you want to clear the chat history?')) {
+                    this.messagesContainer.innerHTML = `
+                        <div class="message system">
+                            🔄 Chat cleared! I can still see through your camera and help with anything you need.
+                        </div>
+                    `;
+                    this.messageHistory = [];
+                }
+            }
+
+            exportChat() {
+                const messages = Array.from(this.messagesContainer.children);
+                const chatData = {
+                    timestamp: new Date().toISOString(),
+                    messages: messages.map(msg => ({
+                        type: msg.className.replace('message ', ''),
+                        content: msg.textContent,
+                        time: msg.querySelector('.message-time')?.textContent || ''
+                    }))
+                };
+                
+                const blob = new Blob([JSON.stringify(chatData, null, 2)], {
+                    type: 'application/json'
+                });
+                
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `vision-chat-${new Date().toISOString().slice(0, 10)}.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                
+                this.addMessage('system', '💾 Chat exported successfully!');
+            }
+
+            toggleFullscreen() {
+                if (!document.fullscreenElement) {
+                    document.documentElement.requestFullscreen();
+                } else {
+                    document.exitFullscreen();
+                }
+            }
+
+            toggleTheme() {
+                this.isDarkTheme = !this.isDarkTheme;
+                document.documentElement.setAttribute('data-theme', this.isDarkTheme ? 'dark' : 'light');
+                document.getElementById('themeToggle').textContent = this.isDarkTheme ? '☀️' : '🌙';
+                this.saveSettings();
+            }
+
+            initializeTheme() {
+                const savedTheme = localStorage.getItem('visionChatTheme');
+                if (savedTheme === 'dark') {
+                    this.toggleTheme();
+                }
+            }
+
+            toggleVoiceMode() {
+                // Placeholder for voice functionality
+                this.addMessage('system', '🎤 Voice mode coming soon!');
+            }
+
+            toggleChatMode() {
+                // Placeholder for different chat modes
+                this.addMessage('system', '💬 Chat mode options coming soon!');
+            }
+
+            saveSettings() {
+                const settings = {
+                    ollamaUrl: this.ollamaUrl,
+                    modelName: this.modelName,
+                    systemPrompt: this.systemPrompt,
+                    contextMemory: this.contextMemory,
+                    imageQuality: this.imageQuality,
+                    autoCapture: document.getElementById('autoCapture').checked,
+                    captureInterval: document.getElementById('captureInterval').value,
+                    theme: this.isDarkTheme ? 'dark' : 'light'
+                };
+                
+                localStorage.setItem('visionChatSettings', JSON.stringify(settings));
+            }
+
+            loadSettings() {
+                const saved = localStorage.getItem('visionChatSettings');
+                if (saved) {
+                    const settings = JSON.parse(saved);
+                    
+                    this.ollamaUrl = settings.ollamaUrl || this.ollamaUrl;
+                    this.modelName = settings.modelName || this.modelName;
+                    this.systemPrompt = settings.systemPrompt || this.systemPrompt;
+                    this.contextMemory = settings.contextMemory || this.contextMemory;
+                    this.imageQuality = settings.imageQuality || this.imageQuality;
+                    
+                    // Update UI elements
+                    document.getElementById('ollamaUrl').value = this.ollamaUrl;
+                    document.getElementById('modelName').value = this.modelName;
+                    document.getElementById('systemPrompt').value = this.systemPrompt;
+                    document.getElementById('contextMemory').value = this.contextMemory;
+                    document.getElementById('imageQuality').value = this.imageQuality;
+                    document.getElementById('autoCapture').checked = settings.autoCapture !== false;
+                    document.getElementById('captureInterval').value = settings.captureInterval || 10;
+                    document.getElementById('intervalValue').textContent = settings.captureInterval || 10;
+                }
+            }
         }
 
-        // Initialize the app
+        // Initialize the enhanced app
         document.addEventListener('DOMContentLoaded', () => {
-            new VisionChatApp();
+            new EnhancedVisionChatApp();
         });
     </script>
 </body>
-</html>
-
+</html>
\ No newline at end of file
