Update app.py

app.py

@@ -197,6 +197,7 @@ def faiss_filtered_search(query_emb, top_k=3, exclude_idx=None, gender=None, age
             if idx == -1 or (exclude_idx is not None and idx == exclude_idx):
                 continue
             row = df.iloc[idx]
+            # FIXED: Syntax error resolved from '&&' to python's standard 'and' keyword
             if require_gender and gender and str(row["gender"]).lower() != str(gender).lower():
                 continue
             if require_age and age_group and str(row["age_group"]).lower() != str(age_group).lower():
@@ -259,7 +260,7 @@ def generate_new_outfit_image(pil_image, row, target_gender=None):
     resized_face_crop = base.resize((head_w, head_h))
     resized_protect_img = Image.fromarray(protect.astype(np.uint8) * 255).resize((head_w, head_h), resample=Image.NEAREST)
     
-    # תיקון הלוגיקה: הגדרת מיקומי ההדבקה מתרחשת עכשיו לפני השימוש בהם בקנבס
+    # FIXED: Layout initialization ordered cleanly to solve NameErrors
     paste_x = (canvas_w - head_w) // 2
     paste_y = int(canvas_h * 0.03)
     
@@ -308,4 +309,226 @@ def build_outfit_component_cards_html(row):
         {"category": "DRESS", "name": "Classic Slip Midi Dress", "retailer": "zara", "query": "terracotta slip midi dress"}
     ]
     
-    cards = []
+    cards = []
+    for i, comp in enumerate(components):
+        if isinstance(comp, dict):
+            label, item_name, retailer = comp["category"], comp["name"], comp["retailer"]
+            link = to_shop_link(retailer, comp["query"], row["gender"])
+        else:
+            label, item_name, retailer, col = comp
+            link = to_shop_link(retailer, row.get(col, item_name), row["gender"])
+            
+        raw_color = _swatch_color(colors[i % len(colors)])
+        banner_color = _lighten_hex(raw_color, 0.88)
+        
+        card_html = f'<div class="product-card">'
+        card_html += f'<div class="card-color-header" style="background-color:{banner_color};">'
+        card_html += f'<div class="prod-bubble" style="background-color:{raw_color};"></div>'
+        card_html += f'</div>'
+        card_html += f'<div class="prod-meta">'
+        card_html += f'<span class="prod-cat">{label}</span>'
+        card_html += f'<p class="prod-title">{str(item_name).title()}</p>'
+        card_html += f'<span class="prod-brand">{retailer.upper()}</span>'
+        card_html += f'<a href="{link}" target="_blank" rel="noopener noreferrer" class="shop-btn">Shop ↗</a>'
+        card_html += f'</div>'
+        card_html += f'</div>'
+        cards.append(card_html)
+        
+    return f'<div class="outfit-grid">{"".join(cards)}</div>'
+
+def build_more_matches_html(matched_indices, similarities):
+    cards = []
+    for idx, sim in list(zip(matched_indices, similarities))[1:4]:
+        row = df.iloc[idx]
+        img_b64 = pil_to_base64(images[idx])
+        link = to_shop_link("zara", row.get("search_query_zara", "clothing"), row["gender"])
+        card_html = f'<div class="product-card">'
+        card_html += f'<img src="data:image/jpeg;base64,{img_b64}" style="width:100%;height:150px;object-fit:cover;display:block;"/>'
+        card_html += f'<div class="prod-meta">'
+        card_html += f'<span class="prod-brand">Match score: {sim}</span>'
+        card_html += f'<a href="{link}" target="_blank" rel="noopener noreferrer" class="shop-btn">Shop ↗</a>'
+        card_html += f'</div></div>'
+        cards.append(card_html)
+    return f'<div class="more-matches-label">MORE MATCHES LIKE THIS</div><div class="outfit-grid">{"".join(cards)}</div>'
+
+# ---------------------------------------------------------------------------
+# MAIN PIPELINES
+# ---------------------------------------------------------------------------
+def run_pipeline(matched_indices, matched_rows, matched_scores, base_image=None, question=None, expected_gender=None):
+    if len(matched_indices) == 0:
+        return "<i>No matches found — try different filters.</i>", None, "", "<div></div>"
+    similarity = [round(1.0 - (d / 2.0), 3) for d in matched_scores]
+    top_row = matched_rows.iloc[0]
+    edit_base_image = base_image if base_image is not None else images[matched_indices[0]]
+    gender_for_generation = expected_gender or top_row["gender"]
+
+    caption = generate_stylist_caption(top_row)
+    new_image, _ = generate_new_outfit_image(edit_base_image, top_row, target_gender=gender_for_generation)
+    answer = answer_question_about_image(edit_base_image, question) if question else ""
+
+    style_card_html = build_style_card_html(top_row, caption)
+    outfit_cards_html = build_outfit_component_cards_html(top_row) + build_more_matches_html(matched_indices, similarity)
+    return style_card_html, new_image, answer, outfit_cards_html
+
+def recommend_from_photo(photo, gender, age_group, question):
+    if photo is None:
+        return "<i>Please upload a photo or pick a Quick Starter.</i>", None, "", "<div></div>"
+    query_emb = embed_query_image(photo)
+    idx, rows, scores = faiss_filtered_search(query_emb, gender=gender or None, age_group=age_group or None)
+    return run_pipeline(idx, rows, scores, base_image=photo, question=question, expected_gender=gender)
+
+def recommend_from_features(skin_tone, undertone, style, gender, age_group, question):
+    sentence = build_feature_sentence(skin_tone, undertone, style, gender, age_group)
+    query_emb = embed_query_text(sentence)
+    idx, rows, scores = faiss_filtered_search(query_emb, gender=gender or None, age_group=age_group or None)
+    return run_pipeline(idx, rows, scores, base_image=None, question=question, expected_gender=gender)
+
+def build_feature_pills_html(labels, selected, title):
+    pills = ""
+    for label in labels:
+        active = str(label).strip().lower() == str(selected).strip().lower()
+        border = "2px solid #D2527F" if active else "1.5px solid #ECE4D6"
+        bg = "#FFF0F5" if active else "#FFFFFF"
+        tcol = "#D2527F" if active else "#2C2A29"
+        dot = _swatch_color(label) if title != "Style" else "#C69E6E"
+        pills += f'<div style="display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:30px;border:{border};background:{bg};margin:4px;"><div style="width:12px;height:12px;border-radius:50%;background:{dot};border:1px solid rgba(0,0,0,.1);"></div><span style="font-size:13px;font-weight:600;color:{tcol};">{str(label).title()}</span></div>'
+    return f'<div style="margin-bottom:14px;"><div style="font-size:11px;font-weight:700;color:#8A7F6E;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;">{title}</div><div style="display:flex;flex-wrap:wrap;margin:-4px;">{pills}</div></div>'
+
+def build_features_recap_html(skin_tone, undertone, style):
+    return f'<div style="background:#fff;border-radius:16px;padding:24px;margin-bottom:20px;border:1px solid #ECE4D6;"><div style="font-size:12px;font-weight:700;color:#D2527F;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;">Your Selected Specifications</div>{build_feature_pills_html(SKIN_TONES, skin_tone, "Skin tone")}{build_feature_pills_html(UNDERTONES, undertone, "Undertone")}{build_feature_pills_html(STYLES, style, "Style")}</div>'
+
+# ---------------------------------------------------------------------------
+# PREMIUM PASTEL LUXURY CSS THEME
+# ---------------------------------------------------------------------------
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght=600;700&family=Inter:wght=400;500;600;700&display=swap');
+body, .gradio-container { background-color: #F8F5F5 !important; font-family: 'Inter', sans-serif !important; }
+.gradio-container { max-width: 850px !important; margin: 0 auto !important; padding-top: 20px !important; }
+footer { display: none !important; }
+
+h1, h2, h3, p, span, label, input, select, textarea, button { color: #2C2A29 !important; }
+
+.tab-nav button { font-size: 14px !important; font-weight: 600 !important; padding: 14px 24px !important; color: #555 !important; }
+.tab-nav button.selected { color: #D2527F !important; border-bottom: 2px solid #D2527F !important; }
+
+#find-btn, .big-btn { background: #161617 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 14px !important; padding: 14px !important; text-transform: uppercase; letter-spacing: .08em !important; width: 100% !important; margin-top: 10px; }
+#find-btn:hover, .big-btn:hover { background: #2D2D2F !important; }
+
+.dark-panel { background: #FFFFFF !important; border-radius: 16px !important; padding: 24px !important; border: 1px solid #ECE4D6 !important; margin-bottom: 20px; }
+.dark-panel label, .dark-panel span { color: #2C2A29 !important; font-weight: 600; }
+
+input, select, .secondary, .wrap, .slots, .single-select, .select-wrap { 
+    color: #2C2A29 !important; 
+    background-color: #FFFFFF !important;
+    border: 1px solid #E3DFDA !important;
+    border-radius: 4px !important;
+}
+div.form { background: transparent !important; border: none !important; box-shadow: none !important; }
+fieldset { display: flex !important; justify-content: center !important; gap: 24px !important; border: none !important; background: transparent !important; }
+
+.palette-premium-banner { background: #FAF3ED; padding: 24px; border-radius: 12px; margin-bottom: 20px; border-left: 5px solid #C69E6E; }
+.section-split { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; margin-top: 20px !important; width: 100% !important; }
+@media (max-width: 768px) { .section-split { grid-template-columns: 1fr !important; } }
+
+.results-box { background: #FFFFFF; border-radius: 16px; padding: 24px; border: 1px solid #EFECE8; }
+.results-box h3 { font-size: 11px; font-weight: 700; color: #9C8E82 !important; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 14px; }
+.swatch-grid { display: flex; gap: 16px; flex-wrap: wrap; }
+.swatch-card { text-align: center; font-size: 12px; color: #666666 !important; width: 60px; }
+.color-bubble { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 6px; border: 1px solid rgba(0,0,0,.06); box-shadow: inset 0 0 0 2px #FFF; }
+.tip-text { font-size: 15px; color: #222222 !important; line-height: 1.6; margin: 0; font-style: italic; }
+
+.outfit-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 20px !important; width: 100% !important; }
+@media (max-width: 768px) { .outfit-grid { grid-template-columns: repeat(2, 1fr) !important; } }
+@media (max-width: 480px) { .outfit-grid { grid-template-columns: 1fr !important; } }
+
+.product-card { background: #FFFFFF; border: 1px solid #EFECE8; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.01); width: 100% !important; }
+.card-color-header { width: 100%; height: 95px; display: flex; align-items: center; justify-content: center; }
+.prod-bubble { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
+.prod-meta { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
+.prod-cat { font-size: 11px; font-weight: 700; color: #D2527F !important; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
+.prod-title { font-size: 15px; font-weight: 700; color: #111111 !important; margin: 0 0 4px 0; line-height: 1.3; min-height: 40px; display: flex; align-items: center; }
+.prod-brand { font-size: 13px; color: #999999 !important; margin-bottom: 14px; display: block; }
+
+.shop-btn { display: block; width: 100%; background: #161617; color: #FFFFFF !important; text-align: center; padding: 11px 0; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none !important; letter-spacing: 0.5px; }
+.shop-btn:hover { background: #2D2D2F; color: #FFFFFF !important; }
+.more-matches-label { font-size: 11px; font-weight: 700; color: #9C8E82 !important; letter-spacing: 1.6px; text-transform: uppercase; margin: 24px 0 12px; }
+.palette-name { font-family: 'Playfair Display', serif !important; }
+"""
+
+# ---------------------------------------------------------------------------
+# INTERFACE BUILD
+# ---------------------------------------------------------------------------
+with gr.Blocks(title="Personal Color Styling") as demo:
+    gr.HTML("""
+    <div style="text-align:center; padding:24px 20px 10px;">
+      <div style="font-size:11px; font-weight:700; color:#D2527F; letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px;">Personal Color Styling</div>
+      <div class="palette-name" style="font-size:38px; font-weight:700; color:#111; margin-bottom:6px;">LookMatch</div>
+      <div style="font-size:14px; color:#666; max-width:480px; margin:0 auto; line-height:1.6;">
+        Upload a photo or describe your features — receive a curated palette, a personal stylist note, and a brand-new look generated just for you.
+      </div>
+    </div>
+    """)
+
+    with gr.Tab("📸 Upload a Photo"):
+        with gr.Row():
+            photo_in = gr.Image(type="pil", label="Your photo")
+            with gr.Column():
+                gender_a = gr.Dropdown(GENDERS, label="Gender (optional)")
+                age_a = gr.Dropdown(AGE_GROUPS, label="Age group (optional)")
+                question_a = gr.Textbox(label="Ask the stylist a question about your photo (optional)", placeholder="e.g. What style would suit me best?")
+                btn_a = gr.Button("Get my look ✨", elem_id="find-btn", variant="primary")
+                
+        style_card_a = gr.HTML()
+        new_img_a = gr.Image(label="✨ Your New AI-Generated Look")
+        answer_a = gr.Textbox(label="Answer to your question")
+        outfit_cards_a = gr.HTML()
+
+        btn_a.click(
+            recommend_from_photo,
+            [photo_in, gender_a, age_a, question_a],
+            [style_card_a, new_img_a, answer_a, outfit_cards_a],
+        )
+
+        gr.Examples(
+            examples=[
+                [SAMPLE_PHOTOS[0], "woman", "adult", "What style would suit me best?"],
+                [SAMPLE_PHOTOS[1], "man", "adult", "What style would suit me best?"],
+                [SAMPLE_PHOTOS[2], "woman", "teen", "What style would suit me best?"]
+            ],
+            inputs=[photo_in, gender_a, age_a, question_a],
+            outputs=[style_card_a, new_img_a, answer_a, outfit_cards_a],
+            fn=recommend_from_photo,
+            cache_examples=False,
+            label="Quick Starters",
+        )
+
+    with gr.Tab("🎨 Choose Manually"):
+        gr.Markdown("Select your skin tone, undertone and style below.")
+        with gr.Group(elem_classes="dark-panel"):
+            with gr.Row():
+                skin_b = gr.Dropdown(SKIN_TONES, label="Skin tone", value=SKIN_TONES[0])
+                undertone_b = gr.Dropdown(UNDERTONES, label="Undertone", value=UNDERTONES[0])
+                style_b = gr.Dropdown(STYLES, label="Style preference", value=STYLES[0])
+            with gr.Row():
+                gender_b = gr.Dropdown(GENDERS, label="Gender", value=GENDERS[0])
+                age_b = gr.Dropdown(AGE_GROUPS, label="Age group", value=AGE_GROUPS[0])
+            question_b = gr.Textbox(label="Ask the stylist a question about the top match (optional)", placeholder="e.g. Is this outfit formal or casual?")
+            btn_b = gr.Button("Get my look ✨", elem_id="find-btn", variant="primary")
+            
+        features_recap_b = gr.HTML(build_features_recap_html(SKIN_TONES[0], UNDERTONES[0], STYLES[0]))
+        for _dropdown in (skin_b, undertone_b, style_b):
+            _dropdown.change(build_features_recap_html, [skin_b, undertone_b, style_b], features_recap_b)
+            
+        style_card_b = gr.HTML()
+        new_img_b = gr.Image(label="✨ Your New AI-Generated Look")
+        answer_b = gr.Textbox(label="Answer to your question")
+        outfit_cards_b = gr.HTML()
+        
+        btn_b.click(
+            recommend_from_features,
+            [skin_b, undertone_b, style_b, gender_b, age_b, question_b],
+            [style_card_b, new_img_b, answer_b, outfit_cards_b],
+        )
+
+if __name__ == "__main__":
+    demo.launch(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="amber"))