Spaces:

davanstrien
/

iconclass-predictions

Running

App Files Files Community

davanstrien HF Staff commited on Sep 3

Commit

656300e

verified ·

1 Parent(s): e6788d4

Update index.html

Browse files

Files changed (1) hide show

index.html +442 -17

index.html CHANGED Viewed

@@ -1,19 +1,444 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ICONCLASS Dataset Viewer</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      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 {
+        font-size: 13px;
+      }
+      .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>
+      // Configuration
+      const DATASET = "davanstrien/iconclass-sft-predictions";
+      const CONFIG = "default";
+      const SPLIT = "test";
+      const PAGE_SIZE = 10;
+      // State
+      let currentOffset = 0;
+      let totalRows = null;
+      let isLoading = false;
+      async function loadDatasetPage() {
+        if (isLoading) return;
+        isLoading = true;
+        const loadingDiv = document.getElementById("loading");
+        loadingDiv.classList.remove("hidden");
+        try {
+          const response = await fetch(
+            `https://datasets-server.huggingface.co/rows?dataset=${DATASET}&config=${CONFIG}&split=${SPLIT}&offset=${currentOffset}&length=${PAGE_SIZE}`
+          );
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const data = await response.json();
+          // Update stats
+          if (data.num_rows_total) {
+            totalRows = data.num_rows_total;
+            document.getElementById("totalCount").textContent = totalRows;
+          }
+          // Display rows
+          displayRows(data.rows);
+          // Update counter
+          currentOffset += data.rows.length;
+          document.getElementById("loadedCount").textContent = currentOffset;
+          // Update button
+          const loadMoreBtn = document.getElementById("loadMore");
+          if (currentOffset >= totalRows) {
+            loadMoreBtn.disabled = true;
+            loadMoreBtn.textContent = "All Images Loaded";
+          } else {
+            loadMoreBtn.textContent = `Load More (${
+              totalRows - currentOffset
+            } remaining)`;
+          }
+        } catch (error) {
+          console.error("Error:", error);
+        } finally {
+          isLoading = false;
+          loadingDiv.classList.add("hidden");
+        }
+      }
+      function displayRows(rows) {
+        const gallery = document.getElementById("gallery");
+        rows.forEach((item) => {
+          const row = item.row;
+          // Create card
+          const card = document.createElement("div");
+          card.className = "card";
+          // Add image
+          if (row.images && row.images.length > 0) {
+            const img = document.createElement("img");
+            img.src = row.images[0].src;
+            img.loading = "lazy";
+            card.appendChild(img);
+          }
+          // Create content
+          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);
+          }
+          // Parse predictions and ground truth
+          const predictions = row["iconclass-predictions-parsed"] || [];
+          const groundTruth = row["iconclass-gt-parsed"] || [];
+          // Check for invalid labels (simple heuristic)
+          const invalidPredictions = predictions.map((pred) => {
+            // If it says "Not a valid iconclass label" or similar
+            return (
+              pred.toLowerCase().includes("not a valid") ||
+              pred.toLowerCase().includes("invalid")
+            );
+          });
+          // Find matches
+          const matches = predictions.filter((pred) =>
+            groundTruth.some(
+              (gt) =>
+                gt.toLowerCase().includes(pred.toLowerCase()) ||
+                pred.toLowerCase().includes(gt.toLowerCase())
+            )
+          );
+          // Create comparison view
+          const comparison = document.createElement("div");
+          comparison.className = "comparison";
+          // Predictions column
+          const predColumn = document.createElement("div");
+          predColumn.className = "column";
+          const predTitle = document.createElement("div");
+          predTitle.className = "column-title";
+          predTitle.textContent = "Predictions";
+          predColumn.appendChild(predTitle);
+          predictions.forEach((pred, idx) => {
+            const label = document.createElement("div");
+            const isInvalid = invalidPredictions[idx];
+            const isMatch = matches.includes(pred);
+            label.className = `label prediction ${isInvalid ? "invalid" : ""} ${
+              isMatch && !isInvalid ? "match" : ""
+            }`;
+            label.textContent = pred;
+            predColumn.appendChild(label);
+          });
+          // Ground truth column
+          const gtColumn = document.createElement("div");
+          gtColumn.className = "column";
+          const gtTitle = document.createElement("div");
+          gtTitle.className = "column-title";
+          gtTitle.textContent = "Ground Truth";
+          gtColumn.appendChild(gtTitle);
+          groundTruth.forEach((gt) => {
+            const label = document.createElement("div");
+            const isMatched = matches.some(
+              (pred) =>
+                gt.toLowerCase().includes(pred.toLowerCase()) ||
+                pred.toLowerCase().includes(gt.toLowerCase())
+            );
+            label.className = `label ground-truth ${
+              isMatched ? "matched" : ""
+            }`;
+            label.textContent = gt;
+            gtColumn.appendChild(label);
+          });
+          comparison.appendChild(predColumn);
+          comparison.appendChild(gtColumn);
+          content.appendChild(comparison);
+          // Add match score
+          const validPredictions = predictions.filter(
+            (_, idx) => !invalidPredictions[idx]
+          );
+          const matchScore =
+            validPredictions.length > 0
+              ? 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);
+        });
+      }
+      // Event listeners
+      document
+        .getElementById("loadMore")
+        .addEventListener("click", loadDatasetPage);
+      // Infinite scroll
+      window.addEventListener("scroll", () => {
+        if (
+          window.innerHeight + window.scrollY >=
+          document.body.offsetHeight - 100
+        ) {
+          if (!isLoading && currentOffset < totalRows) {
+            loadDatasetPage();
+          }
+        }
+      });
+      // Load first page
+      loadDatasetPage();
+    </script>
+  </body>
 </html>