Upload streamlit_app.py

streamlit_app.py

@@ -1,7 +1,7 @@
-# streamlit_app.py — Fit Studio AI (Fashion & Apparel) v0.6 UI
+# streamlit_app.py — Fit Studio AI (Fashion & Apparel) v0.7 UI
 # 9:16 dikey kadraj — Still Image (VTO) → (optional) Runway Video
-# Demo: aynı klasörde input.jpg, tryon.jpg, fitstudio_video.mp4 varsa otomatik önizleme
-# Bu sürümde tüm “Input / Look / Video” kutuları aynı boyutta, yan yana ve merkezde.
+# DÜZELTME: “Input + Look + Video” tek satır sabit 3 sütun grid; boşluk yok, hepsi aynı boy.
+# Demo: aynı klasörde input.jpg, tryon.jpg, fitstudio_video.mp4 varsa ilk bölümde önizleme.
 
 import os, io, base64, zipfile, requests, streamlit as st
 from pathlib import Path
@@ -18,23 +18,24 @@ API_BASE = (
 ).rstrip("/") if (_env("FITSTUDIO_API") or _env("AI_LIGHTBOX_API") or _env("LUXFIT_API")) else ""
 
 HF_TOKEN = (_env("FITSTUDIO_TOKEN") or _env("AI_LIGHTBOX_TOKEN") or _env("LUXFIT_TOKEN"))
+HEADERS = {"Authorization": f"Bearer {HF_TOKEN}"} if HF_TOKEN else {}
 
 if not API_BASE:
     st.error("API_BASE bulunamadı. Settings > Variables: FITSTUDIO_API (veya AI_LIGHTBOX_API / LUXFIT_API) tanımlayın.")
     st.stop()
 
-HEADERS = {"Authorization": f"Bearer {HF_TOKEN}"} if HF_TOKEN else {}
-
-# Tek tip 9:16 kart ölçüsü
-PREVIEW_H = int(os.getenv("PREVIEW_H", "640"))   # piksel
-PREVIEW_W = int(round(PREVIEW_H * 9 / 16))       # 360
+# Tek tip 9:16 kart ölçüsü (yan yana eşit)
+PREVIEW_H = int(os.getenv("PREVIEW_H", "640"))       # px
+PREVIEW_W = int(round(PREVIEW_H * 9 / 16))           # 360 px
 PREVIEW_BG = (255, 255, 255)
 
 # ============== State =====================
+st.set_page_config(page_title="Fit Studio AI", layout="wide", page_icon="🧵")
 for k, v in {
     "results": None,
     "job_counter": 0,
     "duration": "6",
+    "input_preview_bytes": None,
 }.items():
     st.session_state.setdefault(k, v)
 
@@ -104,7 +105,7 @@ def post_image_edit(data: dict, files_payload):
     r.raise_for_status(); return r.json()
 
 def post_chain(data: dict, files_payload):
-    payload = {**data, "to_video": "false"}
+    payload = {**data, "to_video": "false"}  # video ayrı
     r = requests.post(f"{API_BASE}/v1/tryon/chain", data=payload, files=files_payload or None,
                       headers=HEADERS if HF_TOKEN else None, timeout=600)
     r.raise_for_status(); return r.json()
@@ -121,61 +122,50 @@ def make_zip(named_bytes: list[tuple[str, bytes]]) -> bytes:
             if b: z.writestr(fname, b)
     buf.seek(0); return buf.read()
 
-# ============== Common CSS (kartlar sabit, merkezde, yan yana) ==============
-st.set_page_config(page_title="Fit Studio AI", layout="wide", page_icon="🧵")
+# ============== CSS (sabit 3 sütun grid) ==============
 st.markdown(f"""
 <style>
 :root {{
   --frameW: {PREVIEW_W}px;
   --frameH: {PREVIEW_H}px;
 }}
-.media-grid {{
+.media-row {{
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--frameW), 1fr));
+  grid-template-columns: repeat(3, var(--frameW)); /* HER ZAMAN 3 sütun */
   gap: 28px;
-  justify-content: center;
+  justify-content: center;   /* ortala, sağda boşluk yok */
   align-items: start;
+  margin: 8px 0 18px 0;
 }}
 .media-card {{
   width: var(--frameW);
-  margin: 0 auto;
-}}
-.media-title {{
-  font-weight: 600;
-  margin-bottom: 8px;
+  margin: 0;
 }}
+.media-title {{ font-weight: 600; margin-bottom: 8px; }}
 .media-frame {{
-  width: var(--frameW);
-  height: var(--frameH);
-  background: #fff;
-  border: 1px solid #e9e9ec;
-  border-radius: 12px;
-  overflow: hidden;
-  display:flex;
-  align-items:center;
-  justify-content:center;
+  width: var(--frameW); height: var(--frameH);
+  background: #fff; border: 1px solid #e9e9ec; border-radius: 12px;
+  overflow: hidden; display:flex; align-items:center; justify-content:center;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
 }}
 .media-frame img, .media-frame video {{
-  width: 100%; height: 100%; object-fit: contain;
-  display:block;
-}}
-.media-actions {{
-  margin-top: 6px; font-size: 12px; color: #666; text-align:center;
+  width: 100%; height: 100%; object-fit: contain; display:block;
 }}
+.media-actions {{ margin-top: 6px; font-size: 12px; color: #666; text-align:center; }}
 .media-actions a {{
   text-decoration: none; color: #444; border:1px solid #ddd; padding:4px 8px;
   border-radius: 6px; display:inline-block;
 }}
+.ph {{ color:#9aa; font-size: 13px; }}
 </style>
 """, unsafe_allow_html=True)
 
-# ============== Header & Controls =================
+# ============== UI: Header & Controls ================= 
 st.title("🧵 Fit Studio AI")
 st.caption("Fashion & Apparel — Dikey 9:16 Still Image (VTO) → (opsiyonel) Runway Video")
 
 ok = backend_ok()
-c0, c1, c2, c3, c4, c5 = st.columns([1.0, 1.5, 1.5, 1.2, 1.6, 1.6])
+c0, c1, c2, c3, c4, c5 = st.columns([1.0, 1.5, 1.5, 1.2, 1.8, 1.6])
 with c0:
     category = st.selectbox("Kategori", ["general","underwear"], index=0, key="category")
 with c1:
@@ -198,8 +188,8 @@ with cB:
     run_image = st.button("Çalıştır (Sadece Foto)", type="primary", use_container_width=True, key="run_img_btn")
     run_chain = st.button("Zincir (Foto → Video hazırlık)", use_container_width=True, key="run_chain_btn")
 
-# ============== Demo Preview (aynı satırda, eşit kadraj) =================
-def card_html_img(title: str, raw_bytes: bytes, fname: str):
+# ============== Demo Preview (çalıştırmadan önce) =================
+def card_img(title: str, raw_bytes: bytes, fname: str):
     pv = vertical_preview_9x16(raw_bytes, PREVIEW_W, PREVIEW_H, PREVIEW_BG)
     data_url = b64_img_png(pv)
     dl_url  = "data:image/jpeg;base64," + base64.b64encode(raw_bytes).decode("utf-8")
@@ -211,7 +201,7 @@ def card_html_img(title: str, raw_bytes: bytes, fname: str):
     </div>
     """
 
-def card_html_video(title: str, video_bytes: bytes, fname: str="fitstudio_video.mp4"):
+def card_video(title: str, video_bytes: bytes, fname: str="fitstudio_video.mp4"):
     vurl = b64_video_mp4(video_bytes)
     return f"""
     <div class="media-card">
@@ -223,36 +213,37 @@ def card_html_video(title: str, video_bytes: bytes, fname: str="fitstudio_video.
     </div>
     """
 
+def card_placeholder(title: str, text: str="Hazır değil"):
+    return f"""
+    <div class="media-card">
+      <div class="media-title">{title}</div>
+      <div class="media-frame"><div class="ph">{text}</div></div>
+      <div class="media-actions">&nbsp;</div>
+    </div>
+    """
+
 st.markdown("---")
 st.subheader("Demo preview (çalıştırmadan önce)")
-st.caption("Aynı klasörden **input.jpg**, **tryon.jpg** ve **fitstudio_video.mp4** okunur. Tüm kartlar 9:16 ve aynı boyutta.")
-
-demo_cards = []
-in_b = fetch_bytes("input.jpg")
-if in_b: demo_cards.append(card_html_img("Input", in_b, f"input{infer_ext(in_b)}"))
-tr_b = fetch_bytes("tryon.jpg")
-if tr_b: demo_cards.append(card_html_img("Sample Output", tr_b, f"tryon{infer_ext(tr_b)}"))
-dv_b = fetch_bytes("fitstudio_video.mp4")
-if dv_b: demo_cards.append(card_html_video("Sample Video", dv_b))
-
-if demo_cards:
-    st.markdown('<div class="media-grid">' + "\n".join(demo_cards) + "</div>", unsafe_allow_html=True)
-else:
-    st.info("Demo içerik bulunamadı (input.jpg / tryon.jpg / fitstudio_video.mp4).")
-
-# ============== Input preview (aynı kart stilinde) =================
-st.markdown("---")
-in_cards = []
-input_preview = None
+st.caption("Aynı klasörden **input.jpg**, **tryon.jpg**, **fitstudio_video.mp4** okunur. Tüm kartlar 9:16 ve aynı boyutta.")
+
+demo_left  = fetch_bytes("input.jpg")
+demo_mid   = fetch_bytes("tryon.jpg")
+demo_right = fetch_bytes("fitstudio_video.mp4")
+
+demo_row = []
+demo_row.append(card_img("Input", demo_left, f"input{infer_ext(demo_left)}") if demo_left else card_placeholder("Input"))
+demo_row.append(card_img("Sample Output", demo_mid, f"tryon{infer_ext(demo_mid)}") if demo_mid else card_placeholder("Sample Output"))
+demo_row.append(card_video("Sample Video", demo_right) if demo_right else card_placeholder("Sample Video"))
+st.markdown('<div class="media-row">' + "\n".join(demo_row) + "</div>", unsafe_allow_html=True)
+
+# ============== Input preview (state’e yaz) =================
 if file_list:
-    try: input_preview = file_list[0].getvalue()
-    except Exception: input_preview = None
+    try:
+        st.session_state["input_preview_bytes"] = file_list[0].getvalue()
+    except Exception:
+        st.session_state["input_preview_bytes"] = None
 elif image_url:
-    input_preview = fetch_bytes(image_url)
-
-if input_preview:
-    in_cards.append(card_html_img("Input", input_preview, f"input_runtime{infer_ext(input_preview)}"))
-st.markdown('<div class="media-grid">' + "\n".join(in_cards) + "</div>", unsafe_allow_html=True)
+    st.session_state["input_preview_bytes"] = fetch_bytes(image_url)
 
 # ============== Run =================
 def _build_files_payload():
@@ -311,91 +302,74 @@ if run_image or run_chain:
         except Exception as e:
             st.error(f"Hata: {e}")
 
-# ============== Results grid (Look1/2/3 + Video) =================
+# ============== STUDIO — Tek satırda Input + Look + Video =================
+st.markdown("---")
+st.subheader("Studio")
+
+# 1) Input kartı (her zaman dolu veya placeholder)
+row_cards = []
+in_bytes = st.session_state.get("input_preview_bytes")
+row_cards.append(card_img("Input", in_bytes, f"input_runtime{infer_ext(in_bytes)}") if in_bytes else card_placeholder("Input", "Görsel seç"))
+
+# 2) Look (ilk çıktı veya placeholder ya da tryon.jpg fallback)
 res = st.session_state.get("results") or {}
-if res:
-    urls = res.get("image_urls") or []
-    video_url = res.get("video_url")
-
-    cards = []
-    named = []
-
-    for idx in range(min(3, len(urls))):
-        u = urls[idx]
-        b = fetch_bytes(u)
-        if not b: continue
-        cards.append(card_html_img("Look" if idx==0 else f"Look #{idx+1}", b, f"look_{idx+1}{infer_ext(b)}"))
-        named.append((f"look_{idx+1}{infer_ext(b)}", b))
-
-    # Video hücresi (küçük kadraj, otomatik loop)
-    vbytes = None
-    if video_url:
-        vbytes = fetch_bytes(video_url)
-        if vbytes: cards.append(card_html_video("Video", vbytes))
-
-    st.markdown("---")
-    st.subheader("Sonuçlar")
-    if cards:
-        st.markdown('<div class="media-grid">' + "\n".join(cards) + "</div>", unsafe_allow_html=True)
+urls = (res.get("image_urls") or [])
+look_url = urls[0] if urls else None
+look_bytes = fetch_bytes(look_url) if look_url else (demo_mid if demo_mid else None)
+row_cards.append(card_img("Look", look_bytes, f"look_1{infer_ext(look_bytes)}") if look_bytes else card_placeholder("Look"))
+
+# 3) Video (üretilmiş → URL / yoksa örnek / yoksa placeholder)
+vurl = res.get("video_url")
+vbytes = fetch_bytes(vurl) if vurl else (demo_right if demo_right else None)
+row_cards.append(card_video("Video", vbytes) if vbytes else card_placeholder("Video"))
+
+# Satırı çiz — 3 sütun sabit → sağda/ solda boşluk oluşmaz
+st.markdown('<div class="media-row">' + "\n".join(row_cards) + "</div>", unsafe_allow_html=True)
+
+# ============== Video üretim kontrolleri (aynı sayfada) =================
+ctl1, ctl2, ctl3 = st.columns([1.1, 1.0, 1.2])
+with ctl1:
+    gen_video = st.checkbox("Bu sonuçtan video üret (loop)", value=False, key="video_toggle")
+with ctl2:
+    st.selectbox("Video süresi", ["6","10"], index=(0 if st.session_state["duration"]=="6" else 1), key="duration_select")
+with ctl3:
+    go_video = st.button("Video Oluştur", use_container_width=True, key="video_btn")
+
+if gen_video and go_video:
+    src_for_video = urls[0] if urls else None
+    if not src_for_video:
+        st.warning("Video için kaynak görsel yok.")
     else:
-        st.info("Gösterilecek sonuç bulunamadı.")
-
-    # Video üretim kontrolleri
-    ctl1, ctl2, ctl3 = st.columns([1.1, 1.0, 1.2])
-    with ctl1:
-        gen_video = st.checkbox("Bu sonuçtan video üret (loop)", value=False, key="video_toggle")
-    with ctl2:
-        st.selectbox("Video süresi", ["6","10"], index=(0 if st.session_state["duration"]=="6" else 1), key="duration_select")
-    with ctl3:
-        go_video = st.button("Video Oluştur", use_container_width=True, key="video_btn")
-
-    if gen_video and go_video:
-        src_for_video = urls[0] if urls else None
-        if not src_for_video:
-            st.warning("Video için kaynak görsel yok.")
+        with st.spinner("Video üretiliyor…"):
+            v = post_video({
+                "image_url": src_for_video,
+                "duration": st.session_state.get("duration_select","6"),
+                "resolution": "768P",
+                "prompt_optimizer": "true",
+                "gender": st.session_state["gender"],
+                "age_group": st.session_state["age_group"],
+                "frame_aspect": "9:16",
+            })
+        vurl = (v.get("result") or {}).get("video", {}).get("url")
+        if vurl:
+            st.session_state["results"]["video_url"] = vurl
+            # satırı yeniden çizmek yerine bilgi ver
+            st.success("Video hazır — üstteki Video kartında otomatik oynar.")
         else:
-            with st.spinner("Video üretiliyor…"):
-                v = post_video({
-                    "image_url": src_for_video,
-                    "duration": st.session_state.get("duration_select","6"),
-                    "resolution": "768P",
-                    "prompt_optimizer": "true",
-                    "gender": st.session_state["gender"],
-                    "age_group": st.session_state["age_group"],
-                    "frame_aspect": "9:16",
-                })
-            vurl = (v.get("result") or {}).get("video", {}).get("url")
-            if vurl:
-                st.session_state["results"]["video_url"] = vurl
-                vbytes = fetch_bytes(vurl)
-                # tekrar kartları çiz
-                cards.append(card_html_video("Video", vbytes if vbytes else b""))
-                st.markdown('<div class="media-grid">' + "\n".join(cards) + "</div>", unsafe_allow_html=True)
-            else:
-                st.info("Video URL gelmedi.")
-
-    # ZIP indir (Streamlit butonu)
-    if named or vbytes:
-        if vbytes: named.append(("video.mp4", vbytes))
-        st.download_button(
-            "Tümünü indir (ZIP)",
-            data=make_zip(named),
-            file_name="fitstudio_outputs.zip",
-            mime="application/zip",
-            key=f"zip_{st.session_state['job_counter']}"
-        )
-
-    # Debug
-    with st.expander("Debug"):
-        st.json({
-            "job_id": res.get("job_id"),
-            "schema_version": res.get("schema_version"),
-            "api_base": API_BASE,
-            "has_auth_header": bool(HF_TOKEN),
-            "image_urls": urls,
-            "video_url": res.get("video_url"),
-            "frame": f"{PREVIEW_W}×{PREVIEW_H} (9:16)"
-        })
+            st.info("Video URL gelmedi.")
+
+# ============== ZIP indir (Look + Video varsa) =================
+named = []
+if look_bytes: named.append((f"look_1{infer_ext(look_bytes)}", look_bytes))
+if vbytes:    named.append(("video.mp4", vbytes))
+if named:
+    st.download_button(
+        "Tümünü indir (ZIP)",
+        data=make_zip(named),
+        file_name="fitstudio_outputs.zip",
+        mime="application/zip",
+        key=f"zip_{st.session_state['job_counter']}"
+    )
 
 # ============== Sidebar =================
 with st.sidebar:
@@ -412,4 +386,4 @@ with st.sidebar:
     if st.button("Clear cache"):
         st.cache_data.clear(); st.success("Cache cleared.")
     if st.button("Clear results"):
-        st.session_state["results"] = None; st.success("Results cleared.")
+        st.session_state["results"] = None; st.session_state["input_preview_bytes"] = None; st.success("Results cleared.")