add inspect-ai

app.py

@@ -219,8 +219,10 @@ def render_cards(tasks: list[TaskDoc]) -> str:
         mod_path = t.module.replace("\\", "/")
         source_html = f'<a href="https://github.com/huggingface/lighteval/blob/main/{mod_path}" target="_blank" rel="noopener">source</a>'
         paper_html = f'<a href="{t.paper}" target="_blank" rel="noopener">paper</a>' if t.paper else ""
-        tags_html = " ".join([f'<span class="chip" title="tag: {tag}">{tag}</span>' for tag in t.tags]) if t.tags else ""
-        langs_html = " ".join([f'<span class="chip chip-lang" title="language: {lang}">{lang}</span>' for lang in t.languages]) if t.languages else ""
+        tags_html = " ".join([f'<span class=\"chip\" title=\"tag: {tag}\">{tag}</span>' for tag in t.tags]) if t.tags else ""
+        langs_html = " ".join([f'<span class=\"chip chip-lang\" title=\"language: {lang}\">{lang}</span>' for lang in t.languages]) if t.languages else ""
+        chips_tags_html = f'<div class="chips chips-tags">{tags_html}</div>' if tags_html else ""
+        chips_langs_html = f'<div class="chips chips-langs">{langs_html}</div>' if langs_html else ""
         abstract_html = (t.abstract or "-").replace("\n", "<br/>")
         sep_html = ' <span class="sep">|</span> ' if paper_html else ""
         links_html = f"{source_html}{sep_html}{paper_html}"
@@ -233,7 +235,8 @@ def render_cards(tasks: list[TaskDoc]) -> str:
             f"""
             <article class="card" tabindex="0" aria-label="Task {task_name}">
               <div class="title"><span class="title-text">{task_name}</span> <span class="dataset-inline">{dataset_html}</span></div>
-              <div class="chips">{tags_html} {langs_html}</div>
+              {chips_tags_html}
+              {chips_langs_html}
               <div class="abstract">{abstract_html}</div>
               <div class="links">{links_html}</div>
             </article>
@@ -253,9 +256,11 @@ def render_cards(tasks: list[TaskDoc]) -> str:
       .title-text { font-weight: 600; font-size: 16px; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
       .dataset-inline { font-size: 12px; }
 
-      .chips { margin: 8px 0 6px 0; display:flex; gap:8px; flex-wrap:wrap; }
-      .chip { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background: rgba(99,102,241,0.08); color: #3730a3; }
-      .chip-lang { background: rgba(14,165,233,0.08); color: #0369a1; }
+      .chips { margin: 6px 0 4px 0; display:flex; gap:2px; flex-wrap:wrap; }
+      .chips-tags { margin: 6px 0 2px 0; }
+      .chips-langs { margin: 0 0 4px 0; }
+      .chip { display:inline-block; padding:1px 2px; border-radius:999px; font-size:12px; background: #e6f2ff; color: #1e3a8a; }
+      .chip-lang { background: #e8f5e9; color: #166534; }
 
       .abstract { color: #475569; font-size: 13.5px; line-height: 1.35; margin-top: 6px; min-height: 48px; }
       .links { margin-top: 10px; font-size:12px; }
@@ -295,11 +300,12 @@ def render_cards(tasks: list[TaskDoc]) -> str:
       .title-text { color: var(--title-color); }
       .abstract { color: var(--muted); }
       .links a { color: var(--link); }
-      .chip { background: rgba(255,255,255,0.03); }
+      .chips-tags .chip { background: #e6f2ff; color: #1e3a8a; }
+      .chips-langs .chip { background: #e8f5e9; color: #166534; }
       /* tweak chips for dark mode for better contrast */
       @media (prefers-color-scheme: dark) {
-        .chip { background: rgba(255,255,255,0.04); color: var(--text-color); border: 1px solid rgba(255,255,255,0.02); }
-        .chip-lang { background: rgba(255,255,255,0.02); }
+        .chips-tags .chip { background: rgba(29,78,216,0.35); color: #e6eef8; border: 1px solid rgba(148,163,184,0.15); }
+        .chips-langs .chip { background: rgba(22,101,52,0.35); color: #e6eef8; border: 1px solid rgba(148,163,184,0.15); }
       }
 
       /* small screens adjustments */