release: freeze Nexus One AI 1.0.0-rc1

cezen-portal/model-compare.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Model Comparison — Nexus One AI</title>
+  <title>Response Comparison — Nexus One AI</title>
   <link rel="stylesheet" href="style.css?v=12">
   <style>
     :root {
@@ -256,24 +256,16 @@
         <a href="admin.html">Admin Guide</a>
         <span class="nav-drop-cat">MONITOR /</span>
         <a href="dashboard.html">Dashboard</a>
-        <a href="analytics.html">Usage Analytics</a>
         <a href="audit.html">Governance & Audit</a>
         <a href="health.html">Health Center</a>
-        <a href="feedback.html">Feedback &amp; Ratings</a>
         <span class="nav-drop-cat">MANAGE /</span>
         <a href="users.html">Users</a>
         <a href="teams.html">Teams</a>
         <a href="models-admin.html">Model Catalog</a>
-        <a href="training.html">Training</a>
-        <a href="knowledge.html">Knowledge Base</a>
         <span class="nav-drop-cat">TOOLS /</span>
         <a href="apikeys.html">API Keys</a>
-        <a href="benchmark.html">Benchmarking</a>
-        <a href="model-compare.html" class="active">Model Compare</a>
+        <a href="model-compare.html" class="active">Response Comparison</a>
         <a href="guardrails.html">Guardrails</a>
-        <a href="rag-quality.html">RAG Quality</a>
-        <a href="router.html">Model Router</a>
-        <a href="connectors.html">MCP & Enterprise Connectors</a>
         <span class="nav-drop-cat">SYSTEM /</span>
         <a href="appliance.html">Appliance Ops</a>
         <a href="console.html">Console</a>
@@ -283,6 +275,9 @@
     <div class="nav-dropdown">
       <button class="nav-drop-btn">AI Tools ▾</button>
       <div class="nav-drop-menu">
+        <span class="nav-drop-cat">MODEL BUILD /</span>
+        <a href="dataset-creation.html">Dataset Creation</a>
+        <a href="training.html">Model Training</a>
         <span class="nav-drop-cat">INTELLIGENCE /</span>
         <a href="documents.html">Document Intelligence</a>
         <a href="chat-multi.html">AI Workspace</a>
@@ -375,7 +370,7 @@
 <div id="mc-toast"></div>
 
 <script>
-const MODELS = [
+const MODEL_CATALOG = [
   { id: 'llama3.1:8b',  label: 'LLaMA 3.1 8B',  short: 'LLaMA·8B',  color: '#7C3AED' },
   { id: 'llama3.1:70b', label: 'LLaMA 3.1 70B',  short: 'LLaMA·70B', color: '#0EA5E9' },
   { id: 'mistral:7b',   label: 'Mistral 7B',      short: 'Mistral',   color: '#F59E0B' },
@@ -385,9 +380,33 @@ const MODELS = [
   { id: 'llama3.2:3b',  label: 'LLaMA 3.2 3B',   short: 'LLaMA·3B',  color: '#64748B' },
 ];
 
-let selectedModels = new Set(['llama3.1:8b', 'mistral:7b']);
+let MODELS = [];
+let selectedModels = new Set();
 let runResults = [];
 
+async function loadAvailableModels() {
+  try {
+    const res = await fetch('/api/models/list', { credentials:'include' });
+    if (!res.ok) throw new Error(`Unable to load models (${res.status})`);
+    const data = await res.json();
+    const names = (data.models || []).map(m => typeof m === 'string' ? m : m.name || m.model || '').filter(Boolean);
+    MODELS = names.map((id, index) => {
+      const known = MODEL_CATALOG.find(m => m.id === id);
+      return known || { id, label:id, short:id, color:['#7C3AED','#0EA5E9','#F59E0B','#10B981'][index % 4] };
+    });
+    selectedModels = new Set(MODELS.slice(0, Math.min(2, MODELS.length)).map(m => m.id));
+    buildPills();
+    buildColumns(false);
+    document.getElementById('mc-limit-msg').textContent = MODELS.length ? `(select 2–4) — ${selectedModels.size} selected` : '(no installed models)';
+  } catch (e) {
+    MODELS = [];
+    selectedModels.clear();
+    buildPills();
+    buildColumns(false);
+    showToast(e.message || 'Unable to load installed models');
+  }
+}
+
 // ── Build Pills ───────────────────────────────────────────────────────────────
 function buildPills() {
   const container = document.getElementById('mc-model-pills');
@@ -451,8 +470,8 @@ function buildColumns(withContent) {
 
 buildColumns(false);
 
-// ── Mock Responses ────────────────────────────────────────────────────────────
-const MOCK_RESPONSES_MC = {
+// ── Example response templates retained for documentation only ───────────────
+const EXAMPLE_RESPONSES_MC = {
   'llama3.1:8b': (user, temp) => `## LLaMA 3.1 8B Response
 
 This is a fast, efficient response from the 8B model. It processes your query quickly with good general knowledge.
@@ -628,36 +647,22 @@ async function runModel(id, system, user, temp, maxTok) {
   try {
     const res = await fetch('/api/chat', {
       method: 'POST',
+      credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ model: id, system_prompt: system, message: user, temperature: temp, max_tokens: maxTok })
     });
-    if (!res.ok) throw new Error();
+    if (!res.ok) {
+      const detail = await res.json().catch(() => ({}));
+      throw new Error(detail.detail || `Request failed (${res.status})`);
+    }
     const data = await res.json();
     const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
     const tokens = data.usage?.total_tokens || Math.floor((data.response||'').length / 4);
     finishCol(id, resp, statsDiv, data.response || '', elapsed, tokens, body);
-  } catch {
-    const mockFn = MOCK_RESPONSES_MC[id] || ((u) => `Response from ${id}: ${u.slice(0,100)}`);
-    const mockText = mockFn(user, temp);
-    // Vary speeds per model
-    const speed = { 'llama3.1:8b': 15, 'llama3.1:70b': 40, 'mistral:7b': 18, 'codellama:34b': 35, 'llava:13b': 25, 'gemma2:9b': 20, 'llama3.2:3b': 10 };
-    const delay = speed[id] || 20;
-
-    await new Promise(resolve => {
-      let i = 0;
-      const iv = setInterval(() => {
-        i = Math.min(i + Math.floor(Math.random()*6)+3, mockText.length);
-        resp.innerHTML = renderMd(mockText.slice(0, i)) + (i < mockText.length ? '<span class="mc-streaming-cursor"></span>' : '');
-        body.scrollTop = body.scrollHeight;
-        if (i >= mockText.length) {
-          clearInterval(iv);
-          const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-          const tokens = Math.floor(mockText.length / 3.5);
-          finishCol(id, resp, statsDiv, mockText, elapsed, tokens, body);
-          resolve();
-        }
-      }, delay);
-    });
+  } catch (e) {
+    body.classList.remove('streaming');
+    resp.innerHTML = `<div style="color:#B91C1C"><strong>Request failed:</strong> ${escapeHtml(e.message || 'The model API could not be reached.')}</div>`;
+    statsDiv.innerHTML = '<span class="mc-col-stat" style="color:#B91C1C">failed</span>';
   }
 }
 
@@ -767,6 +772,10 @@ function renderMd(raw) {
   return `<p>${html}</p>`;
 }
 
+function escapeHtml(raw) {
+  return String(raw || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
 // ── Init ──────────────────────────────────────────────────────────────────────
 // Load import from compare button in other pages
 const compareImport = localStorage.getItem('cezen_compare_import');
@@ -776,9 +785,10 @@ if (compareImport) {
   if (d.user)   document.getElementById('mc-user').value   = d.user;
   localStorage.removeItem('cezen_compare_import');
 }
+loadAvailableModels();
 </script>
 
-<script src="auth.js"></script>
-<script src="branding.js?v=3"></script>
+<script src="auth.js?v=20260721-consolidated"></script>
+<script src="branding.js?v=20260721-consolidated"></script>
 </body>
 </html>