feat(ui): garment detail panel and real-time load logs

- Clicking a wardrobe card opens an overlay with the full garment
attributes (type, color, material, pattern, season, formality) and
the AI-generated natural-language description.
- api_load_dataset converted from a blocking call to a streaming
generator that yields progress per garment (count, log lines,
preview URL).
- loadDataset() in the frontend now uses gradioClient.submit() to
iterate SSE events; a live log console (dark monospace) and a row
of thumbnail previews update in real time as each garment is
processed.
- Wardrobe is refreshed automatically once loading completes.

Co-authored-by: Cursor <cursoragent@cursor.com>

app.py

@@ -863,7 +863,12 @@ def _build_custom_server():
         return ask(question.strip())
 
     @server.api(name="load_dataset")
-    def api_load_dataset(dataset_key: str) -> dict:
+    def api_load_dataset(dataset_key: str):
+        """Stream dataset processing progress as each garment is analyzed.
+
+        Yields progress dicts with: done, count, log[], preview_url.
+        The final yield has done=True with the total count.
+        """
         from datasets import load_dataset as hf_load
 
         ds_configs = {
@@ -872,10 +877,22 @@ def _build_custom_server():
         }
         config = ds_configs.get(dataset_key)
         if not config:
-            return {"error": "Unknown dataset", "count": 0}
+            yield {"done": True, "error": "Unknown dataset", "count": 0, "log": ["Error: dataset not recognized."], "preview_url": None}
+            return
+
+        log_lines: list[str] = [f"Downloading {config['hf_id']}..."]
+        yield {"done": False, "count": 0, "log": log_lines[:], "preview_url": None}
+
+        try:
+            ds = hf_load(config["hf_id"], split="train")
+        except Exception as e:
+            yield {"done": True, "error": str(e), "count": 0, "log": [f"Error downloading dataset: {e}"], "preview_url": None}
+            return
 
-        ds = hf_load(config["hf_id"], split="train")
-        target = 50
+        log_lines.append(f"Dataset loaded: {len(ds)} images. Starting processing...")
+        yield {"done": False, "count": 0, "log": log_lines[:], "preview_url": None}
+
+        target = TARGET_GARMENTS
         step = max(1, len(ds) // (target * 2))
         indices = list(range(0, len(ds), step))[:target * 3]
         garments_processed: list[tuple[dict, bytes]] = []
@@ -910,6 +927,11 @@ def _build_custom_server():
                     garment = _extract_single_garment(crop_bytes)
                     if garment:
                         garments_processed.append((garment, crop_bytes))
+                        n = len(garments_processed)
+                        preview_path = _save_temp_preview(crop_bytes, n)
+                        preview_url = f"/garments/_preview_{n:03d}.jpg" if preview_path else None
+                        log_lines.append(f"{n}/{target} — {garment.get('color', '?')} {garment.get('type', '?')}")
+                        yield {"done": False, "count": n, "log": log_lines[-12:], "preview_url": preview_url}
             else:
                 if max(image.size) > 512:
                     image.thumbnail((512, 512), Image.LANCZOS)
@@ -919,11 +941,19 @@ def _build_custom_server():
                 garment = _extract_single_garment(crop_bytes)
                 if garment:
                     garments_processed.append((garment, crop_bytes))
+                    n = len(garments_processed)
+                    preview_path = _save_temp_preview(crop_bytes, n)
+                    preview_url = f"/garments/_preview_{n:03d}.jpg" if preview_path else None
+                    log_lines.append(f"{n}/{target} — {garment.get('color', '?')} {garment.get('type', '?')}")
+                    yield {"done": False, "count": n, "log": log_lines[-12:], "preview_url": preview_url}
 
         if not garments_processed:
-            return {"error": "No garments extracted", "count": 0}
+            yield {"done": True, "error": "No garments extracted", "count": 0, "log": log_lines + ["No garments could be extracted."], "preview_url": None}
+            return
+
         added = add_garments(garments_processed)
-        return {"count": len(added), "garments": [g.get("id") for g in added]}
+        log_lines.append(f"Done: {len(added)} garments added to your wardrobe.")
+        yield {"done": True, "count": len(added), "log": log_lines[-12:], "preview_url": None}
 
     @server.get("/")
     async def homepage():

src/ui/index.html

@@ -33,7 +33,7 @@
 
       <div class="garment-grid" x-show="garments.length > 0">
         <template x-for="g in garments" :key="g.id">
-          <div class="garment-card">
+          <div class="garment-card" @click="selectGarment(g)">
             <img :src="g.image_url" :alt="g.type" loading="lazy">
             <div class="info">
               <div class="type" x-text="g.type || 'garment'"></div>
@@ -49,6 +49,46 @@
       </div>
     </section>
 
+    <!-- Garment Detail Overlay -->
+    <div class="detail-overlay" x-show="selectedGarment" @click.self="closeDetail()" @keydown.escape.window="closeDetail()">
+      <div class="detail-panel" x-show="selectedGarment">
+        <button class="detail-close" @click="closeDetail()" aria-label="Close">✕</button>
+        <div class="detail-image">
+          <img :src="selectedGarment?.image_url" :alt="selectedGarment?.type" loading="lazy">
+        </div>
+        <div class="detail-info">
+          <h3 class="detail-title" x-text="selectedGarment ? `${selectedGarment.color} ${selectedGarment.type}` : ''"></h3>
+          <p class="detail-description" x-show="selectedGarment?.description" x-text="selectedGarment?.description"></p>
+          <div class="attr-list">
+            <div class="attr-row">
+              <span class="attr-key">Type</span>
+              <span class="attr-val" x-text="selectedGarment?.type || '—'"></span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-key">Color</span>
+              <span class="attr-val" x-text="selectedGarment?.color || '—'"></span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-key">Material</span>
+              <span class="attr-val" x-text="selectedGarment?.material || '—'"></span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-key">Pattern</span>
+              <span class="attr-val" x-text="selectedGarment?.pattern || '—'"></span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-key">Season</span>
+              <span class="attr-val" x-text="selectedGarment?.season || '—'"></span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-key">Formality</span>
+              <span class="attr-val" x-text="selectedGarment?.formality || '—'"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Add Clothes -->
     <section x-show="tab === 'add'">
       <h2>Add Clothes</h2>
@@ -79,6 +119,18 @@
           </button>
         </div>
         <div class="status" :class="datasetStatus.type" x-show="datasetStatus.message" x-text="datasetStatus.message"></div>
+
+        <div class="log-console" x-show="datasetLog.length > 0" x-ref="logConsole">
+          <template x-for="(line, i) in datasetLog" :key="i">
+            <div class="log-line" x-text="line"></div>
+          </template>
+        </div>
+
+        <div class="dataset-previews" x-show="datasetPreviews.length > 0">
+          <template x-for="(url, i) in datasetPreviews" :key="i">
+            <img :src="url" :alt="`Garment ${i + 1}`" loading="lazy">
+          </template>
+        </div>
       </div>
     </section>
 
@@ -149,6 +201,12 @@
         datasetKey: 'second-hand',
         datasetLoading: false,
         datasetStatus: { type: '', message: '' },
+        datasetLog: [],
+        datasetPreviews: [],
+        datasetCount: 0,
+
+        // Garment detail
+        selectedGarment: null,
 
         // Outfits
         context: '',
@@ -200,14 +258,44 @@
 
         async loadDataset() {
           this.datasetLoading = true;
-          this.datasetStatus = { type: 'loading', message: 'Loading dataset... This may take a few minutes.' };
+          this.datasetLog = [];
+          this.datasetPreviews = [];
+          this.datasetCount = 0;
+          this.datasetStatus = { type: 'loading', message: 'Starting...' };
+
           try {
-            const result = await window.gradioClient.predict("/load_dataset", { dataset_key: this.datasetKey });
-            const data = result.data[0];
-            if (data.error) {
-              this.datasetStatus = { type: 'error', message: data.error };
-            } else {
-              this.datasetStatus = { type: 'success', message: `Loaded ${data.count} garments into your wardrobe!` };
+            const job = window.gradioClient.submit("/load_dataset", { dataset_key: this.datasetKey });
+            for await (const event of job) {
+              if (event.type !== "data") continue;
+              const data = event.data[0];
+              if (!data) continue;
+
+              if (Array.isArray(data.log) && data.log.length) {
+                this.datasetLog = data.log;
+                this.$nextTick(() => {
+                  const el = this.$refs.logConsole;
+                  if (el) el.scrollTop = el.scrollHeight;
+                });
+              }
+              if (typeof data.count === "number") this.datasetCount = data.count;
+              if (data.preview_url && !this.datasetPreviews.includes(data.preview_url)) {
+                this.datasetPreviews.push(data.preview_url);
+              }
+
+              if (data.done) {
+                if (data.error) {
+                  this.datasetStatus = { type: 'error', message: data.error };
+                } else {
+                  this.datasetStatus = { type: 'success', message: `Loaded ${data.count} garments into your wardrobe!` };
+                  await this.loadWardrobe();
+                }
+                break;
+              } else {
+                this.datasetStatus = {
+                  type: 'loading',
+                  message: data.count > 0 ? `Processing garments... ${data.count}/50` : 'Downloading dataset...',
+                };
+              }
             }
           } catch (e) {
             this.datasetStatus = { type: 'error', message: 'Failed to load dataset.' };
@@ -282,6 +370,14 @@
           div.textContent = str;
           return div.innerHTML;
         },
+
+        selectGarment(g) {
+          this.selectedGarment = g;
+        },
+
+        closeDetail() {
+          this.selectedGarment = null;
+        },
       };
     }
   </script>

src/ui/style.css

@@ -137,6 +137,10 @@ section h2 .count {
   transition: transform var(--transition), box-shadow var(--transition);
 }
 
+.garment-card {
+  cursor: pointer;
+}
+
 .garment-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
@@ -509,6 +513,165 @@ nav button.active {
   display: none !important;
 }
 
+/* Garment detail overlay */
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.detail-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+  position: relative;
+}
+
+.detail-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+  z-index: 1;
+}
+
+.detail-close:hover {
+  background: #f3f4f6;
+  color: var(--text);
+}
+
+.detail-image {
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.detail-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--radius) 0 0 var(--radius);
+  background: #f3f4f6;
+  display: block;
+  min-height: 260px;
+}
+
+.detail-info {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
+}
+
+.detail-title {
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  margin-bottom: 0.5rem;
+  padding-right: 2rem;
+}
+
+.detail-description {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin-bottom: 1rem;
+  font-style: italic;
+}
+
+.attr-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.attr-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.82rem;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.attr-row:last-child {
+  border-bottom: none;
+}
+
+.attr-key {
+  color: var(--text-muted);
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-right: 0.75rem;
+}
+
+.attr-val {
+  text-transform: capitalize;
+  text-align: right;
+  font-weight: 500;
+}
+
+/* Log console */
+.log-console {
+  background: #1e1e2e;
+  border-radius: var(--radius-sm);
+  padding: 0.75rem 1rem;
+  margin-top: 0.75rem;
+  max-height: 180px;
+  overflow-y: auto;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.78rem;
+  line-height: 1.6;
+  scroll-behavior: smooth;
+}
+
+.log-line {
+  color: #a6e3a1;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-line:first-child {
+  color: #89b4fa;
+}
+
+/* Dataset previews */
+.dataset-previews {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.dataset-previews img {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  background: #f3f4f6;
+}
+
 @media (max-width: 640px) {
   .app {
     padding: 1.5rem 1rem 3rem;
@@ -525,4 +688,27 @@ nav button.active {
   .context-input {
     flex-direction: column;
   }
+
+  .detail-panel {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    max-height: 85vh;
+  }
+
+  .detail-image {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .detail-image img {
+    border-radius: var(--radius) var(--radius) 0 0;
+    min-height: 200px;
+    max-height: 220px;
+  }
+
+  .detail-info {
+    grid-column: 1;
+    grid-row: 2;
+    padding: 1rem;
+  }
 }