Update index.html

index.html

@@ -92,6 +92,10 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
 .clear-btn{width:100%;padding:8px;border-radius:var(--r-xs);background:var(--fog);border:1.5px solid var(--line);color:var(--ink3);font-family:var(--fb);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px;}
 .clear-btn:hover{border-color:rgba(225,29,72,.3);color:var(--rose);}
 
+.model-sel-btn{flex:1;padding:8px 6px;border-radius:var(--r-xs);border:1.5px solid var(--line);background:var(--fog);color:var(--ink3);font-family:var(--fb);font-size:10px;cursor:pointer;transition:all .22s;display:flex;flex-direction:column;align-items:center;gap:2px;}
+.model-sel-btn:hover{border-color:rgba(109,40,217,.25);background:rgba(109,40,217,.04);}
+.model-sel-btn.active{border-color:rgba(109,40,217,.5);background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(16,185,129,.04));color:var(--v);box-shadow:0 2px 8px rgba(109,40,217,.12);}
+
 .section-lbl{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink4);margin-bottom:10px;padding:0 2px;}
 
 /* MAIN CHAT */
@@ -260,6 +264,21 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
       </div>
     </div>
 
+    <!-- Model Selector -->
+    <div style="padding:0 14px;margin-bottom:4px;">
+      <span class="field-lbl">Model</span>
+      <div id="modelSelector" style="display:flex;gap:6px;">
+        <button class="model-sel-btn active" data-model="Darwin-35B-A3B-Opus" onclick="selectModel(this)">
+          <span style="font-weight:700;">Original</span>
+          <span style="font-size:8px;opacity:.7;">BF16 · Vision ✅</span>
+        </button>
+        <button class="model-sel-btn" data-model="Darwin-35B-A3B-Opus-Q8-GGUF" onclick="selectModel(this)">
+          <span style="font-weight:700;">Q8 GGUF</span>
+          <span style="font-size:8px;opacity:.7;">37GB · llama.cpp</span>
+        </button>
+      </div>
+    </div>
+
     <!-- Single Model Card -->
     <div class="model-card">
       <div class="mc-top">
@@ -274,6 +293,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
       </div>
       <div class="mc-desc">MRI-guided evolutionary merge · Surpassed both parents · 201 languages · 262K context</div>
       <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;font-weight:700;color:var(--v);text-decoration:none;padding:4px 10px;border-radius:16px;background:var(--vg);border:1px solid rgba(109,40,217,.15);transition:all .2s;">🤗 Model Card ↗</a>
+      <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus-Q8-GGUF" target="_blank" style="display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:10px;font-weight:700;color:#d97706;text-decoration:none;padding:4px 10px;border-radius:16px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);transition:all .2s;">📦 Q8 GGUF ↗</a>
       <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
         <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:#059669;text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.15);transition:all .2s;">🏆 FINAL Bench</a>
         <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--amber);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.15);transition:all .2s;">📊 ALL Bench</a>
@@ -404,7 +424,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
       <div class="input-hint">
         <span><span class="kbd">Enter</span> send</span>
         <span><span class="kbd">Shift+Enter</span> new line</span>
-        <span class="model-hint">35B MoE · 3B active · 262K ctx</span>
+        <span class="model-hint" id="modelHint">35B MoE · 3B active · 262K ctx</span>
       </div>
     </div>
   </main>
@@ -414,6 +434,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
 
 <script>
 const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,searchResults:null,
+  selectedModel:'Darwin-35B-A3B-Opus',
   presets:{
     general:'You are Darwin-35B-A3B-Opus, a highly capable reasoning model created by VIDRAFT via evolutionary merge. Think step by step for complex questions.',
     code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing.',
@@ -426,6 +447,29 @@ const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,se
 
 function apiBase(){return'/gradio';}
 
+// Model selector
+function selectModel(btn){
+  document.querySelectorAll('.model-sel-btn').forEach(b=>b.classList.remove('active'));
+  btn.classList.add('active');
+  S.selectedModel=btn.dataset.model;
+  const isGGUF=S.selectedModel.includes('GGUF');
+  document.getElementById('hdrModel').textContent=S.selectedModel;
+  // GGUF doesn't support vision
+  if(isGGUF){
+    document.getElementById('visionToggle').checked=false;
+    document.getElementById('visionToggle').disabled=true;
+    S.vision=false;
+    const l=document.getElementById('fileLabel');l.style.opacity='.35';l.style.pointerEvents='none';
+    removeImg();
+  }else{
+    document.getElementById('visionToggle').disabled=false;
+    document.getElementById('visionToggle').checked=true;
+    S.vision=true;
+    const l=document.getElementById('fileLabel');l.style.opacity='1';l.style.pointerEvents='auto';
+  }
+  showToast(isGGUF?'📦 Q8 GGUF model selected':'🧬 Original BF16 model selected');
+}
+
 // Toggles
 document.getElementById('visionToggle').addEventListener('change',function(){
   S.vision=this.checked;
@@ -556,6 +600,7 @@ async function sendMsg(){
     parseInt(document.getElementById('tokSl').value),
     parseFloat(document.getElementById('tempSl').value),
     parseFloat(document.getElementById('topPSl').value),
+    S.selectedModel,
   ];
 
   const botDiv=appendBot();