ai model page should scroll - Initial Deployment

index.html

@@ -6,23 +6,25 @@
     <title>Forge - AI Hub</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-primary: #0A0A0A;
-            --bg-secondary: #101010;
-            --bg-tertiary: #151515;
-            --text-primary: #E0E0E0;
-            --text-secondary: #A0A0A0;
-            --text-accent: #C62828;
-            --border-color: #1E1E1E;
-            --success: #388E3C;
-            --warning: #FFA000;
+            --bg-primary: #000800;
+            --bg-secondary: #001000;
+            --bg-tertiary: #001800;
+            --text-primary: #004d00;
+            --text-secondary: #003300;
+            --text-accent: #006600;
+            --border-color: #001a00;
+            --success: #004000;
+            --warning: #669900;
         }
 
         body {
             background-color: var(--bg-primary);
             color: var(--text-primary);
-            font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+            font-family: 'Turret Road', monospace;
+            font-weight: 500;
             height: 100vh;
             overflow: hidden;
             line-height: 1.5;
@@ -51,11 +53,22 @@
         .loading-text {
             margin-top: 20px;
             letter-spacing: 0.1em;
-            font-weight: 300;
+            font-weight: 500;
             font-size: 0.9rem;
             color: var(--text-secondary);
         }
 
+        .sidebar {
+            width: 0;
+            transition: width 0.3s ease;
+        }
+        
+        .sidebar.expanded,
+        .sidebar:hover {
+            width: 250px;
+            padding: 16px;
+        }
+
         .tab-button {
             transition: all 0.3s ease;
             border-bottom: 2px solid transparent;
@@ -67,14 +80,14 @@
         }
 
         .card {
-            background-color: var(--bg-tertiary);
-            border: 1px solid var(--border-color);
+            background-color: var(--bg-secondary);
+            border: 1px solid var(--text-secondary);
             transition: all 0.2s ease-out;
         }
 
         .card:hover {
-            border-color: var(--text-accent);
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+            border-color: var(--text-primary);
+            box-shadow: 0 0 8px var(--text-accent);
         }
 
         .status-connected {
@@ -110,44 +123,56 @@
         }
 
         .tag-purpose {
-            background-color: rgba(185, 28, 28, 0.3);
-            color: #F9A825;
+            background-color: #002200;
+            color: #00FF00;
+            border: 1px solid var(--text-secondary);
         }
 
         .tag-finetuned {
-            background-color: rgba(249, 168, 37, 0.2);
-            color: #FB8C00;
+            background-color: #003300;
+            color: #00FF66;
+            border: 1px solid var(--text-secondary);
         }
 
         .tag-original {
-            background-color: rgba(241, 81, 30, 0.2);
-            color: #F4511E;
+            background-color: #001100;
+            color: #009900;
+            border: 1px solid var(--text-secondary);
         }
 
         .tag-parameters {
-            background-color: rgba(229, 57, 53, 0.2);
-            color: #E53935;
+            background-color: #002200;
+            color: #00FF44;
+            border: 1px solid var(--text-secondary);
         }
 
         .tag-distilled {
-            background-color: rgba(118, 224, 80, 0.2);
-            color: #76E050;
+            background-color: #003300;
+            color: #00FF88;
+            border: 1px solid var(--text-secondary);
         }
 
         .code-block {
-            background-color: #1E1E1E;
-            font-family: 'Courier New', Courier, monospace;
-            border-radius: 4px;
+            background-color: #000000;
+            font-family: 'Courier New', monospace;
+            border: 1px solid var(--border-color);
             padding: 1rem;
             overflow-x: auto;
         }
 
-        .code-keyword { color: #569CD6; }
-        .code-function { color: #DCDCAA; }
-        .code-string { color: #CE9178; }
-        .code-number { color: #B5CEA8; }
-        .code-comment { color: #6A9955; }
-        .code-operator { color: #D4D4D4; }
+        .code-keyword { color: #008800; }
+        .code-function { color: #006600; }
+        .code-string { color: #00AA00; }
+        .code-number { color: #00CC44; }
+        .code-comment { color: #003300; }
+        .code-operator { color: #008800; }
+
+        .filter-btn.active {
+            background-color: var(--bg-secondary);
+            border-color: var(--text-accent);
+            color: var(--text-accent);
+            font-weight: bold;
+        }
 
         .typing-indicator {
             display: flex;
@@ -157,7 +182,7 @@
         .typing-dot {
             width: 8px;
             height: 8px;
-            background-color: var(--primary-accent);
+            background-color: var(--text-primary);
             border-radius: 50%;
             margin: 0 2px;
             animation: typingAnimation 1.4s infinite ease-in-out;
@@ -189,12 +214,12 @@
         }
 
         ::-webkit-scrollbar-thumb {
-            background: var(--primary-accent);
+            background: var(--text-secondary);
             border-radius: 3px;
         }
 
         ::-webkit-scrollbar-thumb:hover {
-            background: var(--secondary-accent);
+            background: var(--text-primary);
         }
     </style>
 </head>
@@ -217,13 +242,30 @@
                 <h1 class="text-lg font-medium tracking-wider">FORGE</h1>
             </div>
             <div class="flex items-center space-x-4">
-                <div class="flex items-center space-x-2">
-                    <span class="text-sm">Active Model:</span>
-                    <span class="font-medium text-[#F9A825]" id="activeModelIndicator">None</span>
+                <div class="group relative">
+                    <button class="flex items-center space-x-2">
+                        <span class="text-sm">Active Model:</span>
+                        <span class="font-medium text-[#F9A825] hover:text-[#FFC107]" id="activeModelIndicator">None</span>
+                        <i class="fas fa-chevron-down text-xs"></i>
+                    </button>
+                    <div class="absolute left-0 mt-2 w-48 bg-[#121212] border border-[#1E1E1E] rounded shadow-lg hidden group-hover:block z-10">
+                        <div class="px-3 py-2 text-xs text-[#A0A0A0]">Foundation Models</div>
+                        <button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="gemini-1.5-flash">
+                            <i class="fas fa-bolt mr-2 text-[#006600]"></i>gemini-1.5-flash
+                        </button>
+                        <button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="gpt-4o-mini">
+                            <i class="fas fa-bolt mr-2 text-[#F4511E]"></i>gpt-4o-mini
+                        </button>
+                        <div class="px-3 py-2 text-xs text-[#A0A0A0]">Local Models</div>
+                        <button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="llama3-8b">
+                            <i class="fas fa-server mr-2 text-[#76E050]"></i>llama3-8b
+                        </button>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-xs mr-1">v</span>
+                    <span class="text-xs text-[#A0A0A0] hover:text-white cursor-pointer">1.2.0</span>
                 </div>
-                <button class="text-sm bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded" id="modelChangeBtn">
-                    Change
-                </button>
             </div>
         </header>
 
@@ -260,16 +302,34 @@
                         <!-- Gemini Card -->
                         <div class="card rounded-lg p-4 cursor-pointer" data-service="gemini">
                             <div class="flex items-center mb-3">
-                                <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
-                                    <i class="fas fa-robot text-[#FB8C00]"></i>
+                                <div class="w-10 h-10 rounded-full bg-[#004d00] flex items-center justify-center mr-3">
+                                    <span class="text-white font-bold">G</span>
+                                </div>
+                                <div>
+                                    <h3 class="font-bold">Gemini</h3>
+                                    <div class="flex items-center">
+                                        <span class="text-xs text-[#006600] mr-2">▲ 78ms</span>
+                                        <span class="text-xs text-[#A0A0A0]">90% uptime</span>
+                                    </div>
                                 </div>
-                                <h3 class="font-bold">Gemini</h3>
                             </div>
+                            <div class="text-xs mb-1 text-[#A0A0A0]">Model: <span class="text-[#006600]">gemini-pro</span></div>
+                            <div class="text-xs mb-1 text-[#A0A0A0]">Max Tokens: <span class="text-[#006600]">32,768</span></div>
+                            <div class="text-xs mb-1 text-[#A0A0A0]">Input: $0.50/1M tokens</div>
+                            <div class="text-xs mb-1 text-[#A0A0A0]">Output: $1.50/1M tokens</div>
                             <div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div>
-                            <div class="text-xs mb-4 truncate" id="geminiEndpoint">Not configured</div>
-                            <div class="flex items-center">
-                                <span class="status-indicator w-3 h-3 rounded-full mr-2" id="geminiStatus"></span>
-                                <span class="text-xs" id="geminiStatusText">Not configured</span>
+                            <div class="text-xs mb-3 py-1 px-2 bg-[#001a00] rounded truncate" id="geminiEndpoint">Not configured</div>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <span class="status-indicator w-3 h-3 rounded-full mr-2" id="geminiStatus"></span>
+                                    <span class="text-xs" id="geminiStatusText">Not configured</span>
+                                </div>
+                                <div class="flex space-x-1">
+                                    <button class="text-xs bg-[#001a00] px-2 py-0.5 rounded" title="Pricing info">
+                                        <i class="fas fa-dollar-sign"></i>
+                                    </button>
+                                    <span class="text-xs bg-[#001a00] px-2 py-0.5 rounded">API</span>
+                                </div>
                             </div>
                         </div>
 
@@ -342,27 +402,81 @@
                 <!-- Models Tab -->
                 <div id="modelsTab" class="tab-content p-4 flex-1 overflow-y-auto hidden">
                     <div class="flex justify-between items-center mb-6">
-                        <h2 class="text-xl font-bold text-[#F9A825]">AI Models</h2>
+                        <div class="flex items-center space-x-4">
+                            <h2 class="text-xl font-bold text-[#F9A825]">AI Models</h2>
+                            <div class="flex space-x-2">
+                                <button class="filter-btn active px-3 py-1 rounded bg-[#002200] text-[#00FF00] border border-[#003300] text-sm" data-filter="all">
+                                    All
+                                </button>
+                                <button class="filter-btn px-3 py-1 rounded bg-[#0E0E0E] hover:bg-[#1E1E1E] border border-[#1E1E1E] text-sm" data-filter="local">
+                                    Local
+                                </button>
+                                <button class="filter-btn px-3 py-1 rounded bg-[#0E0E0E] hover:bg-[#1E1E1E] border border-[#1E1E1E] text-sm" data-filter="api">
+                                    API
+                                </button>
+                            </div>
+                        </div>
                         <button id="filterBtn" class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-4 py-2 rounded flex items-center">
                             <i class="fas fa-filter mr-2"></i>
                             <span>Filters</span>
                         </button>
+                        <!-- Add after the filter button -->
+                        <div id="filtersModal" class="modal fixed inset-0 z-50 items-center justify-center hidden">
+                            <div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-lg font-bold">Filter Models</h3>
+                                    <button id="closeFiltersModal" class="text-xl">&times;</button>
+                                </div>
+                                <div class="space-y-4">
+                                    <div>
+                                        <label class="block text-sm mb-2">Model Type</label>
+                                        <div class="flex flex-wrap gap-2">
+                                            <button class="filter-tag active" data-filter="all">All</button>
+                                            <button class="filter-tag" data-filter="api">API</button>
+                                            <button class="filter-tag" data-filter="local">Local</button>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm mb-2">Purpose</label>
+                                        <div class="flex flex-wrap gap-2">
+                                            <button class="filter-tag" data-filter="text">Text</button>
+                                            <button class="filter-tag" data-filter="code">Code</button>
+                                            <button class="filter-tag" data-filter="multimodal">Multimodal</button>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm mb-2">Size</label>
+                                        <input type="range" min="0" max="100" value="50" class="w-full parameter-slider">
+                                    </div>
+                                </div>
+                                <div class="mt-6 flex justify-end space-x-3">
+                                    <button id="resetFiltersBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm">
+                                        Reset
+                                    </button>
+                                    <button id="applyFiltersBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm">
+                                        Apply
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
 
-                    <div class="grid grid-cols-1 gap-4">
-                        <!-- Example Model Cards -->
+                    <div class="grid grid-cols-1 gap-4 model-container">
                         <div class="card rounded-lg p-4">
                             <div class="flex justify-between items-start mb-2">
                                 <h3 class="font-bold">gemini-1.5-flash</h3>
-                                <button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm">
-                                    Select
-                                </button>
+                                <div class="flex items-center">
+                                    <span class="status-indicator w-2 h-2 rounded-full mr-2 bg-green-500"></span>
+                                    <button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm">
+                                        Select
+                                    </button>
+                                </div>
                             </div>
-                            <p class="text-sm text-[#A0A0A0] mb-3">Lightweight version of Gemini 1.5 optimized for speed with minimal quality loss.</p>
+                            <p class="text-sm text-[#A0A0A0] mb-3">Ultra-fast Gemini 2.5 optimized for speed and quality with 128K token context.</p>
                             <div class="flex flex-wrap mb-3">
                                 <span class="tag tag-purpose">Text & Code</span>
                                 <span class="tag tag-original">Google</span>
-                                <span class="tag tag-parameters">32K context</span>
+                                <span class="tag tag-parameters">128K context</span>
                                 <span class="tag tag-distilled">Distilled</span>
                             </div>
                             <div class="flex justify-between text-xs text-[#A0A0A0]">
@@ -472,34 +586,78 @@
 
                 <!-- Chat Tab -->
                 <div id="chatTab" class="tab-content flex-1 flex flex-col overflow-hidden hidden">
-                    <!-- Chat Header -->
-                    <div class="border-b border-[#1E1E1E] p-3 flex justify-between items-center">
-                        <div class="flex items-center space-x-2">
-                            <span class="text-sm">System Prompt:</span>
-                            <span class="font-medium text-[#F9A825]" id="activePromptIndicator">General Assistant</span>
-                        </div>
-                        <button id="promptSelectBtn" class="text-sm bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded">
-                            Change
+                    <!-- Prompt Tabs -->
+                    <div class="flex border-b border-[#1E1E1E]">
+                        <button class="prompt-tab active px-4 py-2 text-sm border-b-2 border-[#007700]" data-prompt="general">
+                            General
+                        </button>
+                        <button class="prompt-tab px-4 py-2 text-sm" data-prompt="code">
+                            Code
+                        </button>
+                        <button class="prompt-tab px-4 py-2 text-sm" data-prompt="writer">
+                            Writer
                         </button>
+                        <div class="flex-1 border-b border-[#1E1E1E]"></div>
                     </div>
 
                     <!-- Chat Messages Area -->
-                    <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
+                    <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4" style="max-height: calc(100vh - 200px);">
                         <!-- Example messages -->
                         <div class="message-user rounded p-4">
-                            <div class="flex items-center mb-2">
-                                <div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div>
-                                <span class="text-sm font-medium">User</span>
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center">
+                                    <div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div>
+                                    <span class="text-sm font-medium">User</span>
+                                </div>
+                                <div class="flex space-x-1">
+                                    <button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Copy">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                    <button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Edit">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                </div>
                             </div>
                             <p class="text-sm">Explain quantum computing in simple terms.</p>
+                            <div class="mt-2 pt-2 border-t border-[#1E1E1E]">
+                                <span class="text-xs text-[#A0A0A0]">Today at 2:15 PM</span>
+                            </div>
                         </div>
 
-                        <div class="message-ai rounded p-4">
-                            <div class="flex items-center mb-2">
-                                <div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div>
-                                <span class="text-sm font-medium">Gemini-1.5-flash</span>
+                        <div class="message-ai rounded p-4 group">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center">
+                                    <div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div>
+                                    <span class="text-sm font-medium" id="assistantName">Gemini-1.5-flash</span>
+                                </div>
+                                <div class="flex items-center space-x-1">
+                                    <button class="text-xs bg-[#1E1E1E] px-2 py-0.5 rounded" title="Tokens: 87">
+                                        <span class="text-xs">87 t</span>
+                                    </button>
+                                    <button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Copy">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                    <button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Regenerate">
+                                        <i class="fas fa-sync-alt"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="text-sm">
+                                <p>Quantum computing is an area of computing focused on developing computer technologies centered around quantum theory principles. Unlike classical computers that use bits (0s or 1s), quantum computers use quantum bits or qubits that can represent and store information in both 0 and 1 simultaneously (superposition).</p>
+                                <div class="mt-3 flex items-center space-x-2">
+                                    <button class="text-xs bg-[#001a00] hover:bg-[#002200] px-2 py-1 rounded flex items-center">
+                                        <i class="fas fa-thumbs-up mr-1"></i>
+                                        <span>Good</span>
+                                    </button>
+                                    <button class="text-xs bg-[#001a00] hover:bg-[#002200] px-2 py-1 rounded flex items-center">
+                                        <i class="fas fa-thumbs-down mr-1"></i>
+                                        <span>Bad</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mt-2 pt-2 border-t border-[#1E1E1E]">
+                                <span class="text-xs text-[#A0A0A0]">Today at 2:15 PM • 0.78s</span>
                             </div>
-                            <p class="text-sm">Quantum computing is an area of computing focused on developing computer technologies centered around quantum theory principles. Unlike classical computers that use bits (0s or 1s), quantum computers use quantum bits or qubits that can represent and store information in both 0 and 1 simultaneously (superposition).</p>
                         </div>
                     </div>
 
@@ -515,10 +673,22 @@
                         </div>
                         <div class="flex items-center justify-between mt-2">
                             <div class="flex space-x-2">
-                                <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
-                                    <i class="fas fa-paperclip mr-1"></i>
-                                    <span>Attach</span>
-                                </button>
+                                <label class="cursor-pointer">
+                                    <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
+                                        <i class="fas fa-paperclip mr-1"></i>
+                                        <span>Attach</span>
+                                    </button>
+                                    <input type="file" id="fileUpload" class="hidden" multiple>
+                                </label>
+                                <div id="filePreview" class="hidden fixed bottom-32 right-4 bg-[#1E1E1E] rounded-lg p-3 max-w-xs">
+                                    <div class="flex justify-between items-center mb-2">
+                                        <h4 class="text-sm font-medium">Attachments</h4>
+                                        <button id="clearFilesBtn" class="text-xs bg-[#2E2E2E] hover:bg-[#3E3E3E] px-1 rounded">
+                                            Clear All
+                                        </button>
+                                    </div>
+                                    <div id="fileList" class="text-xs space-y-1"></div>
+                                </div>
                                 <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
                                     <i class="fas fa-lock"></i>
                                 </button>
@@ -788,10 +958,23 @@
             }
         });
         
+        // Auto-scroll chat to bottom
+        function scrollToBottom() {
+            const container = document.getElementById('chatMessages');
+            container.scrollTop = container.scrollHeight;
+        }
+
+        // Ensure chat stays scrolled to bottom when resizing
+        window.addEventListener('resize', () => {
+            setTimeout(scrollToBottom, 100); // Small delay to account for layout
+        });
+
         function sendMessage() {
             const message = chatInput.value.trim();
             if (message) {
-                // Add user message
+                // Add user message and scroll
+                setTimeout(scrollToBottom, 10); // Small delay to ensure DOM update
+                
                 const userMessage = document.createElement('div');
                 userMessage.className = 'message-user rounded p-4';
                 userMessage.innerHTML = `
@@ -819,14 +1002,14 @@
                     aiMessage.innerHTML = `
                         <div class="flex items-center mb-2">
                             <div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div>
-                            <span class="text-sm font-medium" id="activeModelIndicator">Gemini-1.5-flash</span>
+                            <span class="text-sm font-medium" id="activeModelIndicator">${document.getElementById('assistantName').textContent}</span>
                         </div>
                         <p class="text-sm">${getDummyResponse(message)}</p>
                     `;
                     chatMessages.appendChild(aiMessage);
                     
-                    // Scroll to bottom
-                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                    // Scroll to bottom after response
+                    setTimeout(scrollToBottom, 10);
                 }, 1500);
             }
         }
@@ -862,11 +1045,58 @@
             });
         }
 
+        // Toggle sidebar on mobile
+        document.getElementById('sidebarToggle').addEventListener('click', () => {
+            document.querySelector('.sidebar').classList.toggle('expanded');
+        });
+
+        // Prompt tab switching
+        const promptTabs = document.querySelectorAll('.prompt-tab');
+        const assistantNames = {
+            general: 'General Assistant',
+            code: 'Code Expert',
+            writer: 'Creative Writer'
+        };
+
+        promptTabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                promptTabs.forEach(t => t.classList.remove('active', 'border-[#007700]'));
+                tab.classList.add('active', 'border-[#007700]');
+                document.getElementById('assistantName').textContent = assistantNames[tab.dataset.prompt];
+            });
+        });
+
+        // Model filtering
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                const filter = btn.dataset.filter;
+                const models = document.querySelectorAll('.model-container > .card');
+                
+                models.forEach(model => {
+                    const isLocal = model.querySelector('div.flex.justify-between.text-xs.text-[#A0A0A0] > span:first-child').textContent.includes('Local');
+                    const isAPI = model.querySelector('div.flex.justify-between.text-xs.text-[#A0A0A0] > span:first-child').textContent.includes('API');
+                    
+                    if (filter === 'all') {
+                        model.style.display = '';
+                    } else if (filter === 'local' && isLocal) {
+                        model.style.display = '';
+                    } else if (filter === 'api' && isAPI) {
+                        model.style.display = '';
+                    } else {
+                        model.style.display = 'none';
+                    }
+                });
+            });
+        });
+
         // Initialize on load
         window.addEventListener('DOMContentLoaded', () => {
             initStatusIndicators();
             document.getElementById('activeModelIndicator').textContent = 'None';
-            document.getElementById('activePromptIndicator').textContent = 'General Assistant';
+            document.getElementById('assistantName').textContent = 'General Assistant';
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PrometheusGroup/prometheus-forge-ai-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -0,0 +1 @@
+ai model page should scroll