Spaces:

davanstrien
/

iconclass-predictions

Running

davanstrien HF Staff Claude commited on Sep 3

Commit

a21dde3

1 Parent(s): 656300e

Improve UI with Tufte-inspired design principles

- Add model documentation and links to davanstrien/iconclass-vlm
- Simplify visual design: remove shadows, minimize borders, reduce clutter
- Make raw predictions collapsible (hidden by default)
- Switch to single-column layout for focused evaluation
- Improve typography: consistent sizing, lighter secondary text
- Minimize color palette: only grays and subtle green for matches
- Add CLAUDE.md documentation file

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Files changed (2) hide show

CLAUDE.md +46 -0
index.html +156 -123

CLAUDE.md ADDED Viewed

	@@ -0,0 +1,46 @@

+# CLAUDE.md
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+## Project Overview
+This is a Hugging Face Space that visualizes ICONCLASS predictions from the `davanstrien/iconclass-vlm` model compared to ground truth labels. It's a static web application that fetches and displays data from the `davanstrien/iconclass-sft-predictions` dataset.
+The model being evaluated is a fine-tuned vision-language model (based on Qwen/Qwen2.5-VL-3B-Instruct) that automatically classifies art and cultural heritage images using Iconclass notation. The visualization shows how well the model's predictions match the ground truth labels.
+## Architecture
+The project consists of a single-page web application:
+- `index.html`: Main application with embedded CSS and JavaScript
+- `style.css`: Additional styles (currently minimal, most styles are inline in index.html)
+- Uses the Hugging Face Datasets Server API to fetch data
+## Key Implementation Details
+### Data Source
+- Dataset: `davanstrien/iconclass-sft-predictions`
+- Config: `default`
+- Split: `test`
+- API endpoint: `https://datasets-server.huggingface.co/rows`
+### Data Structure
+Each row contains:
+- `images`: Array of image objects with `src` URLs
+- `iconclass-prediction`: Raw prediction text
+- `iconclass-predictions-parsed`: Parsed prediction labels array
+- `iconclass-gt-parsed`: Parsed ground truth labels array
+### Core Functionality
+- Lazy loading with pagination (10 images at a time)
+- Infinite scroll support
+- Visual comparison between predictions and ground truth
+- Match detection and scoring
+- Invalid label detection (labels containing "not a valid" or "invalid")
+## Development Notes
+Since this is a static Hugging Face Space (sdk: static), there's no build process or backend. All changes are made directly to the HTML/CSS files and are immediately reflected when deployed to Hugging Face Spaces.
+**Important**: The README.md file is not displayed in static Spaces. Any documentation or description about the Space must be added directly to the `index.html` file to be visible to users.
+To test locally, simply open `index.html` in a web browser.

index.html CHANGED Viewed

@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>ICONCLASS Dataset Viewer</title>
     <style>
       * {
         margin: 0;
@@ -13,77 +14,120 @@
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           sans-serif;
-        background: #f9f9f9;
         padding: 20px;
-        line-height: 1.6;
       }
       .header {
-        text-align: center;
-        margin-bottom: 30px;
-        padding: 20px;
       }
       h1 {
-        font-size: 24px;
         font-weight: 600;
         color: #333;
-        margin-bottom: 10px;
       }
-      .stats {
         font-size: 14px;
         color: #666;
       }
-      .gallery {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-        gap: 30px;
-        max-width: 1200px;
-        margin: 0 auto;
       }
-      @media (max-width: 600px) {
-        .gallery {
-          grid-template-columns: 1fr;
-        }
       }
       .card {
         background: white;
-        border-radius: 12px;
         overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       }
       .card img {
         width: 100%;
         height: auto;
         display: block;
-        border-bottom: 1px solid #eee;
       }
       .card-content {
-        padding: 20px;
       }
       .raw-prediction {
-        background: #f5f5f5;
-        padding: 8px 12px;
-        border-radius: 6px;
         font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
-        font-size: 12px;
         color: #666;
-        margin-bottom: 20px;
         word-break: break-all;
       }
       .comparison {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;
-        margin-top: 15px;
       }
       .column {
@@ -91,147 +135,120 @@
       }
       .column-title {
-        font-weight: 600;
         margin-bottom: 8px;
-        color: #333;
-        font-size: 11px;
-        text-transform: uppercase;
         letter-spacing: 0.5px;
       }
       .label {
-        padding: 6px 10px;
-        margin: 4px 0;
-        border-radius: 6px;
         position: relative;
-        transition: all 0.2s ease;
       }
       /* Prediction styles */
       .prediction {
-        background: #f0f4ff;
-        border: 1px solid #d0deff;
       }
       .prediction.invalid {
-        background: #fff0f0;
-        border: 1px solid #ffcccc;
-        color: #cc0000;
         text-decoration: line-through;
-        opacity: 0.7;
       }
       .prediction.match {
-        background: #e8f5e9;
-        border: 1px solid #a5d6a7;
-      }
-      .prediction.match::before {
-        content: "✓";
-        position: absolute;
-        left: -20px;
-        color: #4caf50;
-        font-weight: bold;
       }
       /* Ground truth styles */
       .ground-truth {
-        background: #f5f5f5;
-        border: 1px solid #e0e0e0;
       }
       .ground-truth.matched {
-        background: #e8f5e9;
-        border: 1px solid #a5d6a7;
-      }
-      /* Match indicator */
-      .match-indicator {
-        display: inline-block;
-        margin-left: 8px;
-        padding: 2px 6px;
-        background: #4caf50;
-        color: white;
-        border-radius: 10px;
-        font-size: 10px;
-        font-weight: 600;
       }
       .controls {
         text-align: center;
-        margin: 40px 0;
       }
-      button {
-        background: #333;
-        color: white;
-        border: none;
-        padding: 12px 30px;
-        border-radius: 8px;
-        font-size: 14px;
         cursor: pointer;
-        transition: all 0.2s ease;
-        font-weight: 500;
       }
-      button:hover {
-        background: #555;
-        transform: translateY(-1px);
       }
-      button:disabled {
-        background: #ddd;
-        cursor: not-allowed;
-        transform: none;
       }
       .loading {
         text-align: center;
-        padding: 20px;
-        color: #666;
-        font-size: 14px;
       }
       .loading.hidden {
         display: none;
       }
-      .score-badge {
-        display: inline-block;
-        margin-top: 10px;
-        padding: 4px 12px;
-        background: #f0f0f0;
-        border-radius: 20px;
-        font-size: 12px;
-        color: #666;
-      }
-      .score-badge.good {
-        background: #e8f5e9;
-        color: #2e7d32;
-      }
-      .score-badge.poor {
-        background: #fff3e0;
-        color: #e65100;
-      }
     </style>
   </head>
   <body>
     <div class="header">
-      <h1>ICONCLASS Predictions vs Ground Truth</h1>
       <div class="stats">
-        <span id="loadedCount">0</span> / <span id="totalCount">-</span> images
-        loaded
       </div>
     </div>
     <div id="gallery" class="gallery"></div>
-    <div class="loading hidden" id="loading">Loading images...</div>
     <div class="controls">
-      <button id="loadMore">Load More</button>
     </div>
     <script>
@@ -283,7 +300,7 @@
             loadMoreBtn.disabled = true;
             loadMoreBtn.textContent = "All Images Loaded";
           } else {
-            loadMoreBtn.textContent = `Load More (${
               totalRows - currentOffset
             } remaining)`;
           }
@@ -317,11 +334,27 @@
           const content = document.createElement("div");
           content.className = "card-content";
-          // Show raw prediction
           if (row["iconclass-prediction"]) {
             const rawDiv = document.createElement("div");
             rawDiv.className = "raw-prediction";
             rawDiv.textContent = row["iconclass-prediction"];
             content.appendChild(rawDiv);
           }
@@ -399,7 +432,7 @@
           comparison.appendChild(gtColumn);
           content.appendChild(comparison);
-          // Add match score
           const validPredictions = predictions.filter(
             (_, idx) => !invalidPredictions[idx]
           );
@@ -408,12 +441,12 @@
               ? Math.round((matches.length / validPredictions.length) * 100)
               : 0;
-          const scoreBadge = document.createElement("div");
-          scoreBadge.className = `score-badge ${
-            matchScore > 50 ? "good" : matchScore > 0 ? "poor" : ""
-          }`;
-          scoreBadge.textContent = `${matches.length}/${validPredictions.length} matches (${matchScore}%)`;
-          content.appendChild(scoreBadge);
           card.appendChild(content);
           gallery.appendChild(card);

 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ICONCLASS Model Evaluation - davanstrien/iconclass-vlm</title>
     <style>
       * {
         margin: 0;
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           sans-serif;
+        background: white;
         padding: 20px;
+        line-height: 1.5;
+        color: #333;
+        font-size: 14px;
       }
       .header {
+        max-width: 800px;
+        margin: 0 auto 30px;
+        padding: 0;
+        border-bottom: 1px solid #e5e5e5;
+        padding-bottom: 20px;
       }
       h1 {
+        font-size: 20px;
         font-weight: 600;
         color: #333;
+        margin: 0 0 8px 0;
       }
+      .subtitle {
         font-size: 14px;
         color: #666;
+        margin: 0 0 12px 0;
+        line-height: 1.4;
       }
+      .subtitle a {
+        color: #0066cc;
+        text-decoration: none;
       }
+      .subtitle a:hover {
+        text-decoration: underline;
+      }
+      .description {
+        font-size: 13px;
+        color: #666;
+        margin: 0 0 8px 0;
+        line-height: 1.5;
+      }
+      .stats {
+        font-size: 11px;
+        color: #999;
+        margin: 0;
+      }
+      .gallery {
+        max-width: 800px;
+        margin: 0 auto;
       }
       .card {
         background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 2px;
         overflow: hidden;
+        margin-bottom: 20px;
       }
       .card img {
         width: 100%;
         height: auto;
+        max-height: 500px;
+        object-fit: contain;
         display: block;
+        border-bottom: 1px solid #e5e5e5;
+        background: #fafafa;
       }
       .card-content {
+        padding: 15px;
+      }
+      .raw-toggle {
+        font-size: 11px;
+        color: #999;
+        cursor: pointer;
+        margin-bottom: 12px;
+        user-select: none;
+        font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+      }
+      .raw-toggle:hover {
+        color: #666;
       }
       .raw-prediction {
+        display: none;
+        background: #fafafa;
+        padding: 8px;
+        border: 1px solid #e5e5e5;
+        border-radius: 2px;
         font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+        font-size: 11px;
         color: #666;
+        margin-bottom: 15px;
         word-break: break-all;
+        line-height: 1.4;
+      }
+      .raw-prediction.visible {
+        display: block;
       }
       .comparison {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;
+        margin-top: 0;
       }
       .column {
       }
       .column-title {
+        font-weight: 400;
         margin-bottom: 8px;
+        color: #999;
+        font-size: 10px;
         letter-spacing: 0.5px;
+        text-transform: uppercase;
       }
       .label {
+        padding: 3px 0 3px 6px;
+        margin: 2px 0;
         position: relative;
+        border-left: 2px solid transparent;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+      .label:hover {
+        background: #fafafa;
       }
       /* Prediction styles */
       .prediction {
+        color: #333;
       }
       .prediction.invalid {
+        color: #999;
         text-decoration: line-through;
       }
       .prediction.match {
+        border-left-color: #4caf50;
+        font-weight: 500;
       }
       /* Ground truth styles */
       .ground-truth {
+        color: #333;
       }
       .ground-truth.matched {
+        border-left-color: #4caf50;
+        font-weight: 500;
+      }
+      /* Match statistics */
+      .match-stats {
+        font-size: 11px;
+        color: #999;
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #f0f0f0;
       }
       .controls {
         text-align: center;
+        margin: 30px 0;
+        padding-top: 20px;
       }
+      .load-more {
+        color: #0066cc;
+        text-decoration: none;
+        font-size: 13px;
         cursor: pointer;
+        background: none;
+        border: none;
+        padding: 0;
+        font-family: inherit;
       }
+      .load-more:hover {
+        text-decoration: underline;
       }
+      .load-more:disabled {
+        color: #999;
+        cursor: default;
+        text-decoration: none;
       }
       .loading {
         text-align: center;
+        padding: 10px;
+        color: #999;
+        font-size: 12px;
       }
       .loading.hidden {
         display: none;
       }
     </style>
   </head>
   <body>
     <div class="header">
+      <h1>ICONCLASS Model Evaluation</h1>
+      <div class="subtitle">
+        Comparing predictions from <a href="https://huggingface.co/davanstrien/iconclass-vlm" target="_blank">davanstrien/iconclass-vlm</a> against ground truth labels
+      </div>
+      <div class="description">
+        A vision-language model fine-tuned on Qwen2.5-VL-3B for classifying art and cultural heritage images using ICONCLASS notation — a hierarchical classification system for art and iconography.
+      </div>
       <div class="stats">
+        Showing <span id="loadedCount">0</span> of <span id="totalCount">-</span> test images
       </div>
     </div>
     <div id="gallery" class="gallery"></div>
+    <div class="loading hidden" id="loading">Loading...</div>
     <div class="controls">
+      <button id="loadMore" class="load-more">Load more images</button>
     </div>
     <script>
             loadMoreBtn.disabled = true;
             loadMoreBtn.textContent = "All Images Loaded";
           } else {
+            loadMoreBtn.textContent = `Load more images (${
               totalRows - currentOffset
             } remaining)`;
           }
           const content = document.createElement("div");
           content.className = "card-content";
+          // Show raw prediction (collapsible)
           if (row["iconclass-prediction"]) {
+            const toggleDiv = document.createElement("div");
+            toggleDiv.className = "raw-toggle";
+            toggleDiv.textContent = "+ Show raw prediction";
             const rawDiv = document.createElement("div");
             rawDiv.className = "raw-prediction";
             rawDiv.textContent = row["iconclass-prediction"];
+            toggleDiv.addEventListener("click", () => {
+              if (rawDiv.classList.contains("visible")) {
+                rawDiv.classList.remove("visible");
+                toggleDiv.textContent = "+ Show raw prediction";
+              } else {
+                rawDiv.classList.add("visible");
+                toggleDiv.textContent = "− Hide raw prediction";
+              }
+            });
+            content.appendChild(toggleDiv);
             content.appendChild(rawDiv);
           }
           comparison.appendChild(gtColumn);
           content.appendChild(comparison);
+          // Add match statistics
           const validPredictions = predictions.filter(
             (_, idx) => !invalidPredictions[idx]
           );
               ? Math.round((matches.length / validPredictions.length) * 100)
               : 0;
+          const statsDiv = document.createElement("div");
+          statsDiv.className = "match-stats";
+          statsDiv.textContent = validPredictions.length > 0
+            ? `${matches.length}/${validPredictions.length} matches`
+            : `No valid predictions`;
+          content.appendChild(statsDiv);
           card.appendChild(content);
           gallery.appendChild(card);