feat: minor frontend metrics/slack-help/model-logos

robmsmt · web-flow · commit e5fe3effca2c · 2026-04-04T12:42:56.000+02:00
* add frontend changes for logo/tweaks/help
* added metrics badge
diff --git a/frontend/src/components/Footer.astro b/frontend/src/components/Footer.astro
@@ -18,6 +18,18 @@ import BackToTop from "@components/BackToTop.astro";
       </div>
 
       <div class="flex items-center gap-3">
+        <a
+          href="https://swissai-initiative.slack.com/archives/C07DHJFRE2X"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50 transition-colors"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.527 2.527 0 0 1 2.52-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>
+          </svg>
+          Get Help
+        </a>
+        <span class="text-slate-300 dark:text-slate-600">|</span>
         <button
           id="light-theme-button"
           aria-label="Light theme"
diff --git a/frontend/src/components/Header.astro b/frontend/src/components/Header.astro
@@ -62,6 +62,17 @@ import { SITE } from "@consts";
         >
           Research
         </Link>
+        <a
+          href="https://swissai-initiative.slack.com/archives/C07DHJFRE2X"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50 transition-colors"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.527 2.527 0 0 1 2.52-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>
+          </svg>
+          Get Help
+        </a>
       </nav>
 
       <!-- Mobile Menu Button -->
@@ -133,6 +144,17 @@ import { SITE } from "@consts";
       >
         Research
       </Link>
+      <a
+        href="https://swissai-initiative.slack.com/archives/C07DHJFRE2X"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50 transition-colors w-fit"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.527 2.527 0 0 1 2.52-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>
+        </svg>
+        Get Help
+      </a>
     </nav>
   </Container>
 </header>
diff --git a/frontend/src/components/ui/ModelCard.svelte b/frontend/src/components/ui/ModelCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getModelLogo } from '../../lib/modelLogos';
+  import { getModelMetricsUrl } from '../../lib/modelMetrics';
 
   interface ModelCardProps {
       entry: {
@@ -17,6 +18,7 @@
   
   // Get the logo URL for this model
   const logoUrl = getModelLogo(entry.data.title);
+  const metricsUrl = getModelMetricsUrl(entry.data.title);
 
   let copied = false;
 
@@ -68,6 +70,18 @@ class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-
           </svg>
         {/if}
       </button>
+      {#if metricsUrl}
+        <a
+          href={metricsUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          on:click|stopPropagation
+          class="metrics-badge"
+          title="View metrics dashboard"
+        >
+          Metrics
+        </a>
+      {/if}
       {#if entry.data.instanceCount > 1}
         <span class="instance-count" title="Number of launched instances for higher throughput">
           x{entry.data.instanceCount}
@@ -104,6 +118,21 @@ class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-
     border-radius: 4px;
   }
 
+  .metrics-badge {
+    background-color: #16a34a;
+    color: white;
+    font-weight: bold;
+    font-size: 0.75em;
+    padding: 0 6px;
+    border-radius: 4px;
+    text-decoration: none;
+    flex-shrink: 0;
+  }
+
+  .metrics-badge:hover {
+    background-color: #15803d;
+  }
+
   @keyframes check-bounce {
     0% {
       transform: scale(1);
diff --git a/frontend/src/components/ui/ModelList.svelte b/frontend/src/components/ui/ModelList.svelte
@@ -4,6 +4,7 @@
     import { getApiUrl } from "../../lib/config";
 
     let models = [];
+    let modelCount = 0;
     let loading = true;
     let error = null;
     onMount(async () => {
@@ -27,6 +28,7 @@
                 existing.count++;
             }
 
+            modelCount = modelsMap.size;
             models = Array.from(modelsMap.values()).map(groupedModel => ({
                 data: {
                     title: groupedModel.id,
@@ -46,6 +48,17 @@
 </script>
 
 <div>
+    <div class="text-center mb-8">
+        <h2 class="text-3xl font-bold text-slate-900 dark:text-white mb-4">
+            Available Models
+            {#if !loading && !error}
+                <span style="display:inline-flex;align-items:center;justify-content:center;font-size:0.65em;font-weight:bold;line-height:1;padding:0.15em 0.5em;border-radius:4px;background-color:#6366f1;color:#fff;vertical-align:middle;margin-left:0.3em">{modelCount}</span>
+            {/if}
+        </h2>
+        <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+            Access state-of-the-art language models from leading AI research organizations
+        </p>
+    </div>
     {#if loading}
         <div class="loading">Loading...</div>
     {:else if error}
diff --git a/frontend/src/lib/modelLogos.ts b/frontend/src/lib/modelLogos.ts
@@ -39,7 +39,13 @@ const orgLogos: Record<string, string | null> = {
   'hf': 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg',
   'openai': 'https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png',
   'Snowflake': 'https://cdn-avatars.huggingface.co/v1/production/uploads/64dc52cf858f8a41c12fc819/O9-MWzRjWzbNP_DQlMb-7.png',
-  'zai-org': 'https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png'
+  'zai-org': 'https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png',
+  'moonshotai': "https://cdn-avatars.huggingface.co/v1/production/uploads/641c1e77c3983aa9490f8121/X1yT2rsaIbR9cdYGEVu0X.jpeg",
+  "BAAI": "https://cdn-avatars.huggingface.co/v1/production/uploads/1664511063789-632c234f42c386ebd2710434.png",
+  "MiniMaxAI": "https://cdn-avatars.huggingface.co/v1/production/uploads/676e38ad04af5bec20bc9faf/dUd-LsZEX0H_d4qefO_g6.jpeg",
+  "codellama": "https://cdn-avatars.huggingface.co/v1/production/uploads/5ff5d596f244529b3ec0fb89/d3KMtMG5-XAS2uhbp82Qz.png",
+  "arcee-ai": "https://cdn-avatars.huggingface.co/v1/production/uploads/6435718aaaef013d1aec3b8b/GZPnGkfMn8Ino6JbkL4fJ.png",
+  "cais": "https://cdn-avatars.huggingface.co/v1/production/uploads/5fbfd09ee366524fe8e97cd3/rQf-w-qSxQgwmXAA3YBfe.jpeg"
 };
 
 // Specific model mappings for arena data and custom models
diff --git a/frontend/src/lib/modelMetrics.ts b/frontend/src/lib/modelMetrics.ts
@@ -0,0 +1,27 @@
+const SGLANG_BASE = "https://metrics.swissai.svc.cscs.ch/d/sglang-monitoring/sglang-monitoring?orgId=1&from=now-15m&to=now&timezone=browser&refresh=5s&var-model=";
+const VLLM_BASE = "https://metrics.swissai.svc.cscs.ch/d/vllm-master-v2/vllm-monitoring-v2?orgId=1&from=now-15m&to=now&timezone=browser&refresh=5s&var-model_name=";
+
+type Engine = "sglang" | "vllm";
+
+const modelEngines: Record<string, Engine> = {
+  "swiss-ai/Apertus-8B-Instruct-2509": "sglang",
+  "zai-org/GLM-4.7-Flash": "sglang",
+  "Snowflake/snowflake-arctic-embed-l-v2.0": "vllm",
+  "cais/HarmBench-Llama-2-13b-cls": "vllm",
+  "meta-llama/Llama-3.3-70B-Instruct": "vllm",
+  "meta-llama/Llama-Guard-4-12B": "vllm",
+  "swiss-ai/Apertus-70B-Instruct-2509": "vllm",
+};
+
+/**
+ * Get the metrics dashboard URL for a model, or null if none exists
+ */
+export function getModelMetricsUrl(modelName: string): string | null {
+  const engine = modelEngines[modelName];
+  if (!engine) return null;
+
+  const encoded = encodeURIComponent(modelName);
+  return engine === "sglang"
+    ? `${SGLANG_BASE}${encoded}`
+    : `${VLLM_BASE}${encoded}`;
+}
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
@@ -159,21 +159,19 @@ const sponsors = [
               </svg>
               Swiss AI Chat
             </a>
+            <a href="https://swissai-initiative.slack.com/archives/C07DHJFRE2X" target="_blank" rel="noopener noreferrer"
+               class="group flex items-center justify-center gap-3 bg-white hover:bg-slate-50 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold py-4 px-8 rounded-xl shadow-lg hover:shadow-xl border border-slate-200 dark:border-slate-700 transition-all duration-300 transform hover:-translate-y-1">
+              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.527 2.527 0 0 1 2.52-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>
+              </svg>
+              Get Help
+            </a>
           </div>
         </div>
       </section>
 
       <!-- Available Models Section -->
       <section class="animate space-y-8">
-        <div class="text-center">
-          <h2 class="text-3xl font-bold text-slate-900 dark:text-white mb-4">
-            Available Models
-          </h2>
-          <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-8">
-            Access state-of-the-art language models from leading AI research organizations
-          </p>
-        </div>
-        
         <div class="card p-8">
           <ModelList client:load />
         </div>
