Improve DeepFashion demo layout composition

.hyperview/extensions/fashion-search-readout/panel.js

@@ -348,7 +348,7 @@ function SearchResultComparison({ item, models, loadingKey, onSelectResult }) {
       React.createElement(
         "div",
         { style: { color: colors.mutedText, fontSize: 10, marginTop: 3 } },
-        "Green card = exact product. Map context is optional and hidden by default.",
+        "Green card = exact product. Ranked cards are the proof.",
       ),
     ),
     models.map((model) =>
@@ -428,6 +428,173 @@ function ExactTargetActions({ item, models, loadingKey, onSelectQuery }) {
   );
 }
 
+function RailBlock({ title, children }) {
+  return React.createElement(
+    "div",
+    {
+      style: {
+        border: `1px solid ${colors.border}`,
+        borderRadius: 6,
+        background: colors.cardBg,
+        padding: 10,
+        display: "flex",
+        flexDirection: "column",
+        gap: 7,
+      },
+    },
+    React.createElement(
+      "div",
+      { style: { color: colors.strongText, fontSize: 11, fontWeight: 700 } },
+      title,
+    ),
+    children,
+  );
+}
+
+function MiniStat({ label, value, accent = false }) {
+  return React.createElement(
+    "div",
+    {
+      style: {
+        border: `1px solid ${accent ? "#3f6f5b" : colors.border}`,
+        borderRadius: 5,
+        background: accent ? "rgba(134, 239, 172, 0.05)" : "#0f172a",
+        padding: 8,
+      },
+    },
+    React.createElement(
+      "div",
+      { style: { color: colors.mutedText, fontSize: 9, fontWeight: 700, textTransform: "uppercase" } },
+      label,
+    ),
+    React.createElement(
+      "div",
+      { style: { color: accent ? colors.success : colors.strongText, fontSize: 17, fontWeight: 800, marginTop: 3 } },
+      value,
+    ),
+  );
+}
+
+function BusinessRail({ item, metrics }) {
+  if (!item) return null;
+  const clipSummary = getSummary(item, "clip");
+  const candidateSummary = getSummary(item, "candidate");
+
+  return React.createElement(
+    "aside",
+    {
+      style: {
+        flex: "0 1 280px",
+        minWidth: 240,
+        maxWidth: 300,
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+      },
+    },
+    React.createElement(
+      RailBlock,
+      { title: "Buyer Readout" },
+      React.createElement(
+        "div",
+        { style: { color: colors.bodyText, fontSize: 11, lineHeight: 1.4 } },
+        item.targetTitle,
+      ),
+      React.createElement(
+        "div",
+        { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7 } },
+        React.createElement(MiniStat, {
+          label: "Hyper3 Target",
+          value: rankLabel(candidateSummary.rank),
+          accent: true,
+        }),
+        React.createElement(MiniStat, {
+          label: "CLIP Target",
+          value: rankLabel(clipSummary.rank),
+        }),
+      ),
+      React.createElement(
+        "div",
+        { style: { color: colors.mutedText, fontSize: 10, lineHeight: 1.4 } },
+        candidateSummary.text || "Exact target appears earlier in the ranked product results.",
+      ),
+    ),
+    React.createElement(
+      RailBlock,
+      { title: "Why This Query Matters" },
+      React.createElement(
+        "div",
+        { style: { color: colors.bodyText, fontSize: 11, lineHeight: 1.45 } },
+        "The search combines color, fit, construction, and item type. That is the kind of typed product search where returning the exact SKU early matters.",
+      ),
+    ),
+    React.createElement(
+      RailBlock,
+      { title: "Probe Signal" },
+      React.createElement(
+        "div",
+        { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7 } },
+        React.createElement(MiniStat, {
+          label: "Hit@10",
+          value: pct(metrics.typedHit10Hyper3),
+          accent: true,
+        }),
+        React.createElement(MiniStat, {
+          label: "CLIP",
+          value: pct(metrics.typedHit10Clip),
+        }),
+      ),
+      React.createElement(
+        "div",
+        { style: { color: colors.mutedText, fontSize: 10, lineHeight: 1.4 } },
+        "Benchmark details stay below the demo so the ranked cards remain the main evidence.",
+      ),
+    ),
+  );
+}
+
+function BenchmarkDetails({ typedMetricRows, imageMetricRows }) {
+  return React.createElement(
+    "details",
+    {
+      style: {
+        border: `1px solid ${colors.border}`,
+        borderRadius: 6,
+        background: colors.cardBg,
+        padding: 9,
+      },
+    },
+    React.createElement(
+      "summary",
+      {
+        style: {
+          color: colors.strongText,
+          fontSize: 12,
+          fontWeight: 700,
+          cursor: "pointer",
+        },
+      },
+      "Benchmark Details",
+    ),
+    React.createElement(
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 9 } },
+      React.createElement(
+        TextBlock,
+        null,
+        "Bottom reference only. The result strips above are the main demo; these numbers keep the probe traceable.",
+      ),
+      React.createElement(MetricGrid, { rows: typedMetricRows }),
+      React.createElement(
+        TextBlock,
+        null,
+        "Separate image-to-image check, shown only for context because it is not the typed shopper search task.",
+      ),
+      React.createElement(MetricGrid, { rows: imageMetricRows }),
+    ),
+  );
+}
+
 export default function FashionSearchComparisonPanel() {
   const client = usePanelClient();
   const selection = usePanelSelection();
@@ -566,102 +733,113 @@ export default function FashionSearchComparisonPanel() {
         style: {
           height: "100%",
           overflow: "auto",
-          padding: 12,
-          display: "flex",
-          flexDirection: "column",
-          gap: 14,
+          padding: 14,
           background: colors.panelBg,
         },
       },
       React.createElement(
-        Section,
-        { title: "Pick A Shopper Query" },
+        "div",
+        {
+          style: {
+            width: "100%",
+            maxWidth: 1130,
+            margin: "0 auto",
+            display: "flex",
+            gap: 12,
+            alignItems: "flex-start",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        },
         React.createElement(
-          TextBlock,
-          null,
-          "Choose a typed product search. The ranked cards are the demo; map context is secondary.",
-        ),
-        examples.length
-          ? React.createElement(ExampleChooser, {
-              examples,
-              selectedId: selectedExample?.id,
-              onSelect: setSelectedExampleId,
-            })
-          : React.createElement(
-              "div",
-              { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
-              "Demo examples are not configured.",
+          "main",
+          {
+            style: {
+              flex: "1 1 680px",
+              maxWidth: 820,
+              minWidth: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: 14,
+            },
+          },
+          React.createElement(
+            Section,
+            { title: "Pick A Shopper Query" },
+            React.createElement(
+              TextBlock,
+              null,
+              "Pick a typed product search and compare where each model ranks the exact item.",
             ),
-        selectedExample && models.length
-          ? React.createElement(SearchResultComparison, {
-              item: selectedExample,
-              models,
-              loadingKey,
-              onSelectResult: selectRankedResult,
-            })
-          : null,
-      ),
-      React.createElement(
-        Section,
-        { title: "Inspect Exact Target" },
-        React.createElement(
-          TextBlock,
-          null,
-          `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
-        ),
-        selectedExample && models.length
-          ? React.createElement(ExactTargetActions, {
-              item: selectedExample,
-              models,
-              loadingKey,
-              onSelectQuery: selectModelQuery,
-            })
-          : React.createElement(
-              "div",
-              { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
-              "Demo examples are not configured.",
+            examples.length
+              ? React.createElement(ExampleChooser, {
+                  examples,
+                  selectedId: selectedExample?.id,
+                  onSelect: setSelectedExampleId,
+                })
+              : React.createElement(
+                  "div",
+                  { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
+                  "Demo examples are not configured.",
+                ),
+            selectedExample && models.length
+              ? React.createElement(SearchResultComparison, {
+                  item: selectedExample,
+                  models,
+                  loadingKey,
+                  onSelectResult: selectRankedResult,
+                })
+              : null,
+          ),
+          React.createElement(
+            Section,
+            { title: "Inspect Exact Target" },
+            React.createElement(
+              TextBlock,
+              null,
+              `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
             ),
-      ),
-      warnings.length
-        ? React.createElement(
-            "div",
-            {
-              style: {
-                border: `1px solid ${colors.warningBorder}`,
-                borderRadius: 4,
-                background: colors.warningBg,
-                color: colors.warningText,
-                padding: 8,
-                fontSize: 11,
-                lineHeight: 1.35,
-              },
-            },
-            warnings[0],
-          )
-        : null,
-      React.createElement(
-        Section,
-        { title: "Benchmark Details" },
-        React.createElement(
-          TextBlock,
-          null,
-          "Bottom reference only. The result strips above are the main demo; these numbers keep the probe traceable.",
-        ),
-        React.createElement(MetricGrid, { rows: typedMetricRows }),
-        React.createElement(
-          TextBlock,
-          null,
-          "Separate image-to-image check, shown only for context because it is not the typed shopper search task.",
+            selectedExample && models.length
+              ? React.createElement(ExactTargetActions, {
+                  item: selectedExample,
+                  models,
+                  loadingKey,
+                  onSelectQuery: selectModelQuery,
+                })
+              : React.createElement(
+                  "div",
+                  { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
+                  "Demo examples are not configured.",
+                ),
+          ),
+          warnings.length
+            ? React.createElement(
+                "div",
+                {
+                  style: {
+                    border: `1px solid ${colors.warningBorder}`,
+                    borderRadius: 4,
+                    background: colors.warningBg,
+                    color: colors.warningText,
+                    padding: 8,
+                    fontSize: 11,
+                    lineHeight: 1.35,
+                  },
+                },
+                warnings[0],
+              )
+            : null,
+          React.createElement(BenchmarkDetails, { typedMetricRows, imageMetricRows }),
+          panelError
+            ? React.createElement(
+                "div",
+                { style: { color: colors.error, fontSize: 11, lineHeight: 1.35 } },
+                panelError,
+              )
+            : null,
         ),
-        React.createElement(MetricGrid, { rows: imageMetricRows }),
+        React.createElement(BusinessRail, { item: selectedExample, metrics }),
       ),
-      panelError
-        ? React.createElement(
-            "div",
-            { style: { color: colors.error, fontSize: 11, lineHeight: 1.35 } },
-            panelError,
-          )
-        : null,
     ),
   );
 }

Dockerfile

@@ -42,7 +42,7 @@ COPY --chown=user . .
 
 ENV HYPERVIEW_HOST=0.0.0.0 \
     HYPERVIEW_PORT=7860 \
-    HYPERVIEW_WORKSPACE_ID=fashion-deepfashion-text-search \
+    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-demo \
     HYPERVIEW_DATASETS_DIR=/home/user/app/demo_data/datasets \
     HYPERVIEW_MEDIA_DIR=/home/user/app/demo_data/media \
     DEEPFASHION_SAMPLES_PER_CATEGORY=10 \

demo.py

@@ -15,11 +15,10 @@ from PIL import Image, ImageOps
 
 import hyperview as hv
 
-
 SPACE_DIR = Path(__file__).resolve().parent
 SPACE_HOST = os.environ.get("HYPERVIEW_HOST", "127.0.0.1")
 SPACE_PORT = int(os.environ.get("HYPERVIEW_PORT", "6262"))
-WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-deepfashion-text-search")
+WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-retail-search-demo")
 DATASET_NAME = os.environ.get("HYPERVIEW_DATASET_NAME", "deepfashion_text_search_clip_hyper3clip")
 EXTENSION_DIR = SPACE_DIR / ".hyperview" / "extensions" / "fashion-search-readout"
 
@@ -222,8 +221,7 @@ def select_deepfashion_records() -> list[dict[str, Any]]:
 def add_deepfashion_samples(dataset: hv.Dataset) -> None:
     existing_ids = {sample.id for sample in dataset.samples}
     media_dir = media_root()
-    added = 0
-    updated = 0
+    image_rows: list[dict[str, Any]] = []
     records = select_deepfashion_records()
 
     for record in records:
@@ -245,13 +243,27 @@ def add_deepfashion_samples(dataset: hv.Dataset) -> None:
             "source_dataset": HF_DATASET,
             "split": HF_SPLIT,
         }
-        existed = sample_id in existing_ids
-        dataset.add_image(str(destination), label=category, metadata=metadata, sample_id=sample_id)
-        if existed:
-            updated += 1
-        else:
-            existing_ids.add(sample_id)
-            added += 1
+        image_rows.append(
+            {
+                "filepath": str(destination),
+                "label": category,
+                "metadata": metadata,
+                "sample_id": sample_id,
+            }
+        )
+
+    upserted, skipped_existing = dataset.add_images(
+        image_rows,
+        skip_existing=not FORCE_SAMPLE_REFRESH,
+    )
+    updated = (
+        sum(1 for row in image_rows if str(row["sample_id"]) in existing_ids)
+        if FORCE_SAMPLE_REFRESH
+        else 0
+    )
+    added = upserted - updated
+    if skipped_existing:
+        print(f"Skipped {skipped_existing} existing DeepFashion sample rows.", flush=True)
     print(f"Prepared DeepFashion samples ({added} added, {updated} updated).", flush=True)
 
 
@@ -413,7 +425,9 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
             "dockview": {
                 "closeSamplesPanel": True,
                 "hideExplorerPanel": True,
+                "initialWidth": int(os.environ.get("FASHION_READOUT_WIDTH", "760")),
                 "minimumWidth": 620,
+                "maximumWidth": int(os.environ.get("FASHION_READOUT_MAX_WIDTH", "860")),
             },
             "models": model_panel_props(layouts),
             "examples": build_examples(dataset),
@@ -442,12 +456,13 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
     clip_spec = MODEL_SPECS[0]
     candidate_spec = MODEL_SPECS[1]
     map_dockview = {
-        "initialWidth": int(os.environ.get("FASHION_MAP_CONTEXT_WIDTH", "340")),
+        "initialWidth": int(os.environ.get("FASHION_MAP_CONTEXT_WIDTH", "320")),
         "minimumWidth": 260,
+        "maximumWidth": int(os.environ.get("FASHION_MAP_CONTEXT_MAX_WIDTH", "380")),
     }
     clip_map = hv.ui.Scatter(
         id="fashion-map-clip",
-        title="Context Map: CLIP",
+        title="Optional Map: CLIP",
         layout_key=layouts["clip"],
         position="center",
         reference_panel_id="fashion-text-search-readout",
@@ -458,7 +473,7 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
     )
     candidate_map = hv.ui.Scatter(
         id="fashion-map-hyper3",
-        title="Context Map: Hyper3",
+        title="Optional Map: Hyper3",
         layout_key=layouts["candidate"],
         position="center",
         reference_panel_id="fashion-map-clip",
@@ -481,11 +496,12 @@ def launch_demo(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.Session:
     )
     print("Installing DeepFashion demo extension...", flush=True)
     session.ui.add_extension(EXTENSION_DIR, workspace_id=WORKSPACE_ID)
-    print("Applying DeepFashion side-by-side demo view...", flush=True)
+    print("Applying DeepFashion retail search demo view...", flush=True)
     session.ui.apply_view(build_demo_view(dataset, layouts), workspace_id=WORKSPACE_ID)
     session.ui.set_active_layout(None, workspace_id=WORKSPACE_ID)
     session.ui.set_selection([], workspace_id=WORKSPACE_ID)
     print(f"\nHyperView DeepFashion text-search demo is running at {session.url}", flush=True)
+    print("   Ranked search results are primary; scatter maps are narrow optional context tabs.", flush=True)
     return session