upadted comparison

app/src/content/embeds/comparison.html

@@ -56,9 +56,9 @@
 
       // Known filenames in /public/data/comparison
       const FILES = {
-        '1': { 1: 'id_1_rank_1_sim_1.000.png', 2: 'id_1_rank_2_sim_0.165.png', 3: 'id_1_rank_3_sim_0.143.png' },
-        '2': { 1: 'id_2_rank_1_sim_1.000.png', 2: 'id_2_rank_2_sim_0.978.png', 3: 'id_2_rank_3_sim_0.975.png' },
-        '3': { 1: 'id_3_rank_1_sim_0.936.png', 2: 'id_3_rank_2_sim_0.686.png', 3: 'id_3_rank_3_sim_0.676.png' },
+        '1': { query: 'id_1_query.png', 1: 'id_1_rank_1_sim_1.000.png', 2: 'id_1_rank_2_sim_0.165.png', 3: 'id_1_rank_3_sim_0.143.png' },
+        '2': { query: 'id_2_query.png', 1: 'id_2_rank_1_sim_1.000.png', 2: 'id_2_rank_2_sim_0.978.png', 3: 'id_2_rank_3_sim_0.975.png' },
+        '3': { query: 'id_3_query.png', 1: 'id_3_rank_1_sim_0.936.png', 2: 'id_3_rank_2_sim_0.686.png', 3: 'id_3_rank_3_sim_0.676.png' },
       };
 
       // Images served from [domain]/public/data/comparison/*.png → path is /data/comparison/
@@ -78,7 +78,7 @@
       const controls = document.createElement('div'); controls.className = 'controls';
       const label = document.createElement('label'); label.textContent = 'Example';
       const select = document.createElement('select');
-      const EXAMPLE_LABELS = { '1': 'photo', '2': 'chart', '3': 'drawing' };
+      const EXAMPLE_LABELS = { '1': 'Photo', '2': 'Chart', '3': 'Drawing' };
       ['1','2','3'].forEach((id)=>{ const o=document.createElement('option'); o.value=id; o.textContent=EXAMPLE_LABELS[id]; select.appendChild(o); });
       label.appendChild(select); controls.appendChild(label); container.appendChild(controls);
 
@@ -100,29 +100,33 @@
 
       const render = (id) => {
         const files = FILES[id]; if (!files) return;
-        const ordered = [files[1], files[1], files[2], files[3]]; // rank_1 twice then rank_2 and rank_3
+        const ordered = [files.query, files[1], files[2], files[3]]; // query, then matches 1, 2, 3
         grid.innerHTML = '';
         ordered.forEach((fname, idx) => {
           const { sim } = parseInfo(fname);
-          const isFirst = idx === 0;
-          const isDuplicateOfFirst = idx === 1;
+          const isQuery = idx === 0;
           const card = document.createElement('div'); card.className = 'card';
           const media = document.createElement('div'); media.className = 'media';
-          const img = document.createElement('img'); img.alt = `example ${id} image ${idx+1}${isDuplicateOfFirst ? ' identical' : ''}`; img.loading = 'lazy'; img.src = basePath + fname; media.appendChild(img);
+          const img = document.createElement('img'); img.alt = `example ${id} ${isQuery ? 'query' : `match ${idx}`}`; img.loading = 'lazy'; img.src = basePath + fname; media.appendChild(img);
           const meta = document.createElement('div'); meta.className = 'meta';
-          const left = document.createElement('span'); left.className = 'label'; left.textContent = isFirst ? 'Query' : 'Similarity';
-          meta.appendChild(left);
-          if (!isFirst) {
-            const right = document.createElement('span'); right.className = 'value'; right.textContent = isDuplicateOfFirst ? '1.000 identical' : formatSim(sim);
-            meta.appendChild(right);
+          
+          if (isQuery) {
+            const label = document.createElement('span'); label.className = 'label'; label.textContent = 'Query';
+            meta.appendChild(label);
+          } else {
+            const label = document.createElement('span'); label.className = 'label'; label.textContent = `Match ${idx}:`;
+            const similarity = document.createElement('span'); similarity.className = 'value'; similarity.textContent = `Similarity: ${formatSim(sim)}`;
+            meta.appendChild(label);
+            meta.appendChild(similarity);
           }
+          
           card.appendChild(media); card.appendChild(meta); grid.appendChild(card);
         });
       };
 
       (async () => {
         // Resolve a working base then initial render
-        basePath = await resolveBase(CANDIDATE_BASES, FILES['1'][1]);
+        basePath = await resolveBase(CANDIDATE_BASES, FILES['1'].query);
         render('1');
       })();