https://seeingculture-benchmark.github.io/visualizer/explore.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Seeing Culture Explorer</title>
7  <meta name="description" content="Browse real samples from the Seeing Culture Benchmark: culturally grounded questions and images from seven Southeast Asian countries.">
8  <link rel="canonical" href="https://seeingculture-benchmark.github.io/visualizer/explore.html">
9  <link rel="icon" href="../static/images/favicon.png">
10  <link rel="stylesheet" href="../static/css/bulma.min.css">
11  <style>
12    .scb-card img { width: 100%; height: 240px; object-fit: cover; border-radius: 6px 6px 0 0; }
13    .scb-card { height: 100%; display: flex; flex-direction: column; }
14    .scb-card .card-content { flex-grow: 1; }
15    .scb-chips .tag { margin-right: 0.3rem; margin-bottom: 0.3rem; }
16    .scb-question { font-weight: 600; }
17    .scb-rationale { font-size: 0.85rem; }
18  </style>
19  

19<script src="data/data_public.js" defer></script>

19
20</head>
21<body>
22
23<nav class="navbar is-light" role="navigation" aria-label="main navigation">
24  <div class="navbar-brand">
25    <a class="navbar-item" href="../index.html">
26      <img src="../static/images/logo-sea-white.webp" alt="Seeing Culture logo" style="max-height: 2rem;">
27      <b>&nbsp;Seeing Culture Explorer</b>
28    </a>
29  </div>
30  <div class="navbar-menu is-active">
31    <div class="navbar-end">
32      <a class="navbar-item" href="../index.html">Home</a>
33      <a class="navbar-item" href="../index.html#leaderboard">Leaderboard</a>
34      <a class="navbar-item" href="https://huggingface.co/datasets/Multimedia-SMU/seeingculture-benchmark">Full dataset</a>
35    </div>
36  </div>
37</nav>
38
39<section class="section">
40  <div class="container">
41    <h1 class="title is-3 has-text-centered">Explore the benchmark</h1>
42    <p class="has-text-centered" style="max-width: 720px; margin: 0 auto 1.5rem;">
43      A browsable sample from the Seeing Culture Benchmark: culturally grounded questions
44      about artifacts from seven Southeast Asian countries. The full benchmark has 1,065 images and 3,178 questions;
45      get it on <a href="https://huggingface.co/datasets/Multimedia-SMU/seeingculture-benchmark">HuggingFace</a>.
46    </p>
47
48    <div class="field is-grouped is-grouped-centered is-grouped-multiline">
49      <div class="control">
50        <div class="select"><select id="filter-country"><option value="">All countries</option></select></div>
51      </div>
52      <div class="control">
53        <div class="select"><select id="filter-category"><option value="">All categories</option></select></div>
54      </div>
55      <div class="control">
56        <button class="button is-link" id="refresh-btn">Show other samples</button>
57      </div>
58    </div>
59    <p class="has-text-centered is-size-7" id="pool-count"></p>
60
61    <div class="columns is-multiline" id="cards" style="margin-top: 0.5rem;"></div>
62
63    <p class="has-text-centered is-size-7" style="margin-top: 1.5rem;">
64      Images are collected from the internet and are not owned by the authors; each card links its original source.
65      Annotations are CC BY-NC-SA 4.0.
66    </p>
67  </div>
68</section>
69

70<script>
71document.addEventListener("DOMContentLoaded", function() {
72  if (typeof scb_data === "undefined") { return; }
73  var all = Object.values(scb_data);
74  var countrySel = document.getElementById("filter-country");
75  var categorySel = document.getElementById("filter-category");
76  var cards = document.getElementById("cards");
77  var poolCount = document.getElementById("pool-count");
78
79  function uniq(key) {
80    return Array.from(new Set(all.map(function(d) { return d[key]; }))).sort();
81  }
82  uniq("country").forEach(function(v) {
83    countrySel.insertAdjacentHTML("beforeend", '<option value="' + v + '">' + v + "</option>");
84  });
85  uniq("category").forEach(function(v) {
86    categorySel.insertAdjacentHTML("beforeend", '<option value="' + v + '">' + v + "</option>");
87  });
88
89  function esc(s) {
90    var div = document.createElement("div");
91    div.textContent = s || "";
92    return div.innerHTML.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
93  }
94
95  function render() {
96    var pool = all.filter(function(d) {
97      return d.question
98          && (!countrySel.value || d.country === countrySel.value)
99          && (!categorySel.value || d.category === categorySel.value);
100    });
101    poolCount.textContent = pool.length + " matching samples";
102    var picks = pool.slice().sort(function() { return Math.random() - 0.5; }).slice(0, 6);
103    cards.innerHTML = "";
104    picks.forEach(function(d) {
105      cards.insertAdjacentHTML("beforeend",
106        '<div class="column is-one-third">'
107        + '<div class="card scb-card">'
108        + '<img src="' + d.image + '" alt="' + esc(d.concept) + '" loading="lazy">'
109        + '<div class="card-content">'
110        + '<div class="scb-chips">'
111        + '<span class="tag is-link is-light">' + esc(d.country) + '</span>'
112        + '<span class="tag is-warning is-light">' + esc(d.category) + '</span>'
113        + '<span class="tag is-success is-light">' + esc(d.concept) + '</span>'
114        + '</div>'
115        + '<p class="scb-question">' + esc(d.question) + '</p>'
116        + (d.rationale ? '<details class="scb-rationale"><summary>Rationale</summary><p>' + esc(d.rationale) + '</p></details>' : '')
117        + '</div>'
118        + '<footer class="card-footer">'
119        + '<a class="card-footer-item is-size-7" href="' + esc(d.source) + '">Image source</a>'
120        + (d.reference ? '<a class="card-footer-item is-size-7" href="' + esc(d.reference) + '">Reference</a>' : '')
121        + '</footer>'
122        + '</div></div>');
123    });
124  }
125
126  countrySel.addEventListener("change", render);
127  categorySel.addEventListener("change", render);
128  document.getElementById("refresh-btn").addEventListener("click", render);
129  render();
130});
131</script>

131
132</body>
133</html>