Update app.py

app.py

@@ -259,7 +259,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)
     
-    # FIX: Calculation of coordinates performed BEFORE pasting inside the canvas space
+    # תיקון הלוגיקה: הגדרת מיקומי ההדבקה מתרחשת עכשיו לפני השימוש בהם בקנבס
     paste_x = (canvas_w - head_w) // 2
     paste_y = int(canvas_h * 0.03)
     
@@ -308,227 +308,4 @@ def build_outfit_component_cards_html(row):
         {"category": "DRESS", "name": "Classic Slip Midi Dress", "retailer": "zara", "query": "terracotta slip midi dress"}
     ]
     
-    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>'
-
-# ---------------------------------------------------------------------------
-# FIXED GRADIO 6 COMPLIANT LUXURY 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"))
-    
+    cards = []