Upload index.html with huggingface_hub

index.html

@@ -157,6 +157,14 @@
       cursor: pointer;
       accent-color: #4361ee;
     }
+    .checkbox-item .color-dot {
+      cursor: pointer;
+      border: 1px solid transparent;
+      transition: border-color 0.15s;
+    }
+    .checkbox-item .color-dot:hover {
+      border-color: #888;
+    }
     .checkbox-item .model-name.missing {
       text-decoration: line-through;
       opacity: 0.5;
@@ -1081,7 +1089,7 @@
           }
           lastCkpt = m.is_checkpoint;
 
-          const lbl = document.createElement('label');
+          const lbl = document.createElement('div');
           lbl.className = 'checkbox-item';
 
           const cb = document.createElement('input');
@@ -1092,7 +1100,24 @@
           cb.addEventListener('change', () => this.renderChart());
 
           const dot = document.createElement('span');
-          dot.style.cssText = `display:inline-block;width:9px;height:9px;border-radius:50%;background:${MODEL_COLORS[m.model_display_name]}`;
+          dot.className = 'color-dot';
+          dot.dataset.model = m.model_display_name;
+          dot.style.cssText = `display:inline-block;width:9px;height:9px;border-radius:50%;background:${MODEL_COLORS[m.model_display_name]};position:relative`;
+
+          const colorInput = document.createElement('input');
+          colorInput.type = 'color';
+          colorInput.value = MODEL_COLORS[m.model_display_name];
+          colorInput.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0';
+          colorInput.addEventListener('click', (e) => e.stopPropagation());
+          colorInput.addEventListener('input', (e) => {
+            const newColor = e.target.value;
+            MODEL_COLORS[m.model_display_name] = newColor;
+            document.querySelectorAll(`.color-dot[data-model="${CSS.escape(m.model_display_name)}"]`).forEach(d => {
+              d.style.background = newColor;
+            });
+            panels.forEach((p) => p.renderChart());
+          });
+          dot.appendChild(colorInput);
 
           const name = document.createElement('span');
           name.className = 'model-name';
@@ -1122,6 +1147,12 @@
             }
           });
 
+          // Click on name or container (but not dot) toggles checkbox
+          name.addEventListener('click', () => { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); });
+          lbl.addEventListener('click', (e) => {
+            if (e.target === lbl) { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); }
+          });
+
           lbl.append(cb, dot, name);
           container.appendChild(lbl);
         }