Upload streamlit_app.py

streamlit_app.py

@@ -1,12 +1,13 @@
-# streamlit_app.py — Fit Studio AI (Fashion & Apparel) v0.5 UI
+# streamlit_app.py — Fit Studio AI (Fashion & Apparel) v0.6 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.
 
 import os, io, base64, zipfile, requests, streamlit as st
 from pathlib import Path
 from PIL import Image
 
-# ================= Env & API (robust) =================
+# ============== Env & API =================
 def _env(k): 
     return (os.getenv(k) or "").strip().strip("'\"")
 
@@ -24,28 +25,25 @@ if not API_BASE:
 
 HEADERS = {"Authorization": f"Bearer {HF_TOKEN}"} if HF_TOKEN else {}
 
-# Tüm görsel/video kadrajları için tek tip 9:16 boyut (yan yana eşit)
-PREVIEW_H = int(os.getenv("PREVIEW_H", "640"))    # 640 px yükseklik
-PREVIEW_W = int(round(PREVIEW_H * 9 / 16))        # 360 px genişlik
+# 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
 PREVIEW_BG = (255, 255, 255)
 
-# ================= Session State (ilk yük) =================
-defaults = {
+# ============== State =====================
+for k, v in {
     "results": None,
     "job_counter": 0,
     "duration": "6",
-}
-for k, v in defaults.items():
-    if k not in st.session_state:
-        st.session_state[k] = v
+}.items():
+    st.session_state.setdefault(k, v)
 
-# ================= Yardımcılar =================
+# ============== Helpers ===================
 def _needs_auth(url: str) -> bool:
     return (url.startswith(API_BASE) or url.startswith("outputs/"))
 
 @st.cache_data(ttl=300, show_spinner=False)
 def fetch_bytes(url_or_path: str | None):
-    """URL, outputs/ yolu veya bulunduğumuz klasörden dosyayı okur."""
     if not url_or_path:
         return None
     try:
@@ -77,7 +75,6 @@ def infer_ext(data: bytes) -> str:
 
 @st.cache_data(ttl=300, show_spinner=False)
 def vertical_preview_9x16(img_bytes: bytes, out_w: int = PREVIEW_W, out_h: int = PREVIEW_H, bg_rgb=PREVIEW_BG) -> bytes:
-    """Görüntüyü 9:16 canvas’a (out_w×out_h) pad’ler, crop yapmaz."""
     im = Image.open(io.BytesIO(img_bytes)).convert("RGB")
     w, h = im.size
     scale = min(out_w / w, out_h / h)
@@ -88,75 +85,11 @@ def vertical_preview_9x16(img_bytes: bytes, out_w: int = PREVIEW_W, out_h: int =
     canvas.paste(im_resized, off)
     buf = io.BytesIO(); canvas.save(buf, format="PNG"); return buf.getvalue()
 
-def first_present(d: dict, keys: list, default=None):
-    for k in keys:
-        v = d.get(k)
-        if v:
-            return v
-    return default
-
-def show_img_tile_9x16(col, title, src: str | None, filename_stub="image", key_prefix=""):
-    col.markdown(f"**{title}**")
-    if not src:
-        placeholder = Image.new("RGB", (PREVIEW_W, PREVIEW_H), PREVIEW_BG)
-        col.image(placeholder, width=PREVIEW_W)
-        col.caption("—"); return None, None
-
-    b = fetch_bytes(src)
-    if not b:
-        col.warning("Görsel yüklenemedi"); return None, None
-
-    pv = vertical_preview_9x16(b, PREVIEW_W, PREVIEW_H, PREVIEW_BG)
-    col.image(pv, width=PREVIEW_W)
-    sz = image_size_from_bytes(b)
-    if sz: col.caption(f"Gerçek: {sz[0]}×{sz[1]} px")
-
-    ext = infer_ext(b)
-    mime = "image/jpeg" if ext in [".jpg",".jpeg"] else ("image/png" if ext==".png" else "image/webp")
-    col.download_button(
-        "İndir (tam kalite)", data=b, file_name=f"{filename_stub}{ext}", mime=mime,
-        key=f"{key_prefix}_{filename_stub}_dl"
-    )
-    return src, b
-
-def _video_tag_from_bytes(vb: bytes, width: int = PREVIEW_W, height: int = PREVIEW_H, autoplay=True, loop=True, muted=True):
-    """HTML5 video tag (inline, loop)."""
-    b64 = base64.b64encode(vb).decode("utf-8")
-    auto = "autoplay" if autoplay else ""
-    loo = "loop" if loop else ""
-    mut = "muted" if muted else ""
-    return f"""
-    <video width="{width}" height="{height}" {auto} {loo} {mut} playsinline style="border-radius:8px; display:block;">
-      <source src="data:video/mp4;base64,{b64}" type="video/mp4" />
-      Tarayıcı video etiketini desteklemiyor.
-    </video>
-    """
-
-def show_video_tile_9x16(col, title, src_or_bytes: str | bytes | None, key_prefix=""):
-    col.markdown(f"**{title}**")
-    if not src_or_bytes:
-        col.caption("—"); return None
-    try:
-        if isinstance(src_or_bytes, (bytes, bytearray)):
-            vb = bytes(src_or_bytes)
-        else:
-            vb = fetch_bytes(src_or_bytes)
-        if not vb:
-            col.info("Video yüklenemedi."); return None
-        html = _video_tag_from_bytes(vb, PREVIEW_W, PREVIEW_H, autoplay=True, loop=True, muted=True)
-        col.markdown(html, unsafe_allow_html=True)
-        col.download_button("Video indir (MP4)", data=vb, file_name="fitstudio_video.mp4", mime="video/mp4",
-                            key=f"{key_prefix}_video_dl")
-        return vb
-    except Exception:
-        col.info("Video gösterilemedi."); return None
+def b64_img_png(png_bytes: bytes) -> str:
+    return "data:image/png;base64," + base64.b64encode(png_bytes).decode("utf-8")
 
-def make_zip(named_bytes: list[tuple[str, bytes]]) -> bytes:
-    buf = io.BytesIO()
-    with zipfile.ZipFile(buf, "w", compression=zipfile.ZIP_DEFLATED) as z:
-        for fname, b in named_bytes:
-            if b: z.writestr(fname, b)
-    buf.seek(0); return buf.read()
+def b64_video_mp4(mp4_bytes: bytes) -> str:
+    return "data:video/mp4;base64," + base64.b64encode(mp4_bytes).decode("utf-8")
 
 def backend_ok() -> bool:
     try:
@@ -171,7 +104,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"}  # video ayrı akış
+    payload = {**data, "to_video": "false"}
     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()
@@ -181,15 +114,68 @@ def post_video(data: dict):
                       headers=HEADERS if HF_TOKEN else None, timeout=600)
     r.raise_for_status(); return r.json()
 
-# ================= Sayfa =================
+def make_zip(named_bytes: list[tuple[str, bytes]]) -> bytes:
+    buf = io.BytesIO()
+    with zipfile.ZipFile(buf, "w", compression=zipfile.ZIP_DEFLATED) as z:
+        for fname, b in named_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="🧵")
+st.markdown(f"""
+<style>
+:root {{
+  --frameW: {PREVIEW_W}px;
+  --frameH: {PREVIEW_H}px;
+}}
+.media-grid {{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--frameW), 1fr));
+  gap: 28px;
+  justify-content: center;
+  align-items: start;
+}}
+.media-card {{
+  width: var(--frameW);
+  margin: 0 auto;
+}}
+.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;
+  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;
+}}
+.media-actions a {{
+  text-decoration: none; color: #444; border:1px solid #ddd; padding:4px 8px;
+  border-radius: 6px; display:inline-block;
+}}
+</style>
+""", unsafe_allow_html=True)
+
+# ============== Header & Controls =================
 st.title("🧵 Fit Studio AI")
 st.caption("Fashion & Apparel — Dikey 9:16 Still Image (VTO) → (opsiyonel) Runway Video")
 
-# ================= Üst Kontrol Şeridi =================
 ok = backend_ok()
-c0, c1, c2, c3, c4, c5 = st.columns([1.0, 1.8, 1.8, 1.2, 1.2, 1.2])
-
+c0, c1, c2, c3, c4, c5 = st.columns([1.0, 1.5, 1.5, 1.2, 1.6, 1.6])
 with c0:
     category = st.selectbox("Kategori", ["general","underwear"], index=0, key="category")
 with c1:
@@ -205,73 +191,70 @@ with c5:
 
 prompt_box = st.text_area("Özel prompt (boş bırak → varsayılan)", value="", height=90, key="custom_prompt")
 
-bA, bB = st.columns([1.0, 1.0])
-with bA:
+cA, cB = st.columns([1,1])
+with cA:
     st.info(f"Backend: {'Online' if ok else 'Offline'}", icon="🔌")
-with bB:
+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ı klasörden) =================
+# ============== Demo Preview (aynı satırda, eşit kadraj) =================
+def card_html_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")
+    return f"""
+    <div class="media-card">
+      <div class="media-title">{title}</div>
+      <div class="media-frame"><img src="{data_url}" alt="{title}"/></div>
+      <div class="media-actions"><a download="{fname}" href="{dl_url}">İndir</a></div>
+    </div>
+    """
+
+def card_html_video(title: str, video_bytes: bytes, fname: str="fitstudio_video.mp4"):
+    vurl = b64_video_mp4(video_bytes)
+    return f"""
+    <div class="media-card">
+      <div class="media-title">{title}</div>
+      <div class="media-frame">
+        <video src="{vurl}" autoplay loop muted playsinline></video>
+      </div>
+      <div class="media-actions"><a download="{fname}" href="{vurl}">Video indir</a></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 kadrajlar 9:16 ve aynı boyutta.")
+st.caption("Aynı klasörden **input.jpg**, **tryon.jpg** ve **fitstudio_video.mp4** okunur. Tüm kartlar 9:16 ve aynı boyutta.")
 
-dp1, dp2, dp3 = st.columns([1,1,1])
+demo_cards = []
 in_b = fetch_bytes("input.jpg")
-if in_b:
-    pv = vertical_preview_9x16(in_b, PREVIEW_W, PREVIEW_H, PREVIEW_BG)
-    dp1.markdown("**Input**"); dp1.image(pv, width=PREVIEW_W)
-    sz = image_size_from_bytes(in_b); 
-    if sz: dp1.caption(f"Girdi: {sz[0]}×{sz[1]} px")
-    dp1.download_button("İndir (tam kalite)", data=in_b, file_name=f"input{infer_ext(in_b)}",
-                        mime="image/jpeg", key="demo_input_dl")
-else:
-    show_img_tile_9x16(dp1, "Input", None)
-
-try_b = fetch_bytes("tryon.jpg")
-if try_b:
-    pv2 = vertical_preview_9x16(try_b, PREVIEW_W, PREVIEW_H, PREVIEW_BG)
-    dp2.markdown("**Sample Output**"); dp2.image(pv2, width=PREVIEW_W)
-    sz2 = image_size_from_bytes(try_b); 
-    if sz2: dp2.caption(f"Örnek: {sz2[0]}×{sz2[1]} px")
-    dp2.download_button("İndir (tam kalite)", data=try_b, file_name=f"tryon{infer_ext(try_b)}",
-                        mime="image/jpeg", key="demo_try_dl")
+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:
-    show_img_tile_9x16(dp2, "Sample Output", None)
+    st.info("Demo içerik bulunamadı (input.jpg / tryon.jpg / fitstudio_video.mp4).")
 
-demo_vb = fetch_bytes("fitstudio_video.mp4")
-if demo_vb:
-    show_video_tile_9x16(dp3, "Sample Video", demo_vb, key_prefix="demo")
-else:
-    show_video_tile_9x16(dp3, "Sample Video", None)
-
-# ================= Girdi Önizleme =================
+# ============== Input preview (aynı kart stilinde) =================
 st.markdown("---")
-g1, g2, g3 = st.columns([1,1,1])
-white_bg = PREVIEW_BG
-
+in_cards = []
 input_preview = None
 if file_list:
-    try:
-        input_preview = file_list[0].getvalue()
-    except Exception:
-        input_preview = None
+    try: input_preview = file_list[0].getvalue()
+    except Exception: input_preview = None
 elif image_url:
     input_preview = fetch_bytes(image_url)
 
 if input_preview:
-    g1.markdown("**Input**")
-    g1.image(vertical_preview_9x16(input_preview, PREVIEW_W, PREVIEW_H, white_bg), width=PREVIEW_W)
-    try:
-        sz = Image.open(io.BytesIO(input_preview)).size
-        g1.caption(f"{sz[0]}×{sz[1]} px")
-    except Exception:
-        g1.caption("—")
-else:
-    show_img_tile_9x16(g1, "Input", None)
+    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)
 
-# ================ Çalıştır ================
+# ============== Run =================
 def _build_files_payload():
     files_payload = []
     if file_list:
@@ -310,13 +293,10 @@ if run_image or run_chain:
                     out = post_chain(form, files_payload)   # to_video=false
                     image_json = out.get("image_step") or out
 
-            # ---- Çıktılar ----
             imgs_norm = (image_json.get("result") or {}).get("images_9_16") or []
-            # Fallback: raw images
             if not imgs_norm:
                 imgs_raw = (image_json.get("result") or {}).get("images") or []
                 imgs_norm = [{"url": i.get("url")} for i in imgs_raw if isinstance(i, dict) and i.get("url")]
-
             urls = [i.get("url") for i in imgs_norm if isinstance(i, dict) and i.get("url")]
 
             st.session_state["job_counter"] += 1
@@ -326,51 +306,51 @@ if run_image or run_chain:
                 "image_urls": urls,
                 "video_url": None,
             }
-
         except requests.HTTPError as e:
             st.error(f"HTTP {e.response.status_code}")
         except Exception as e:
             st.error(f"Hata: {e}")
 
-# ================ Sonuçlar (yan yana 9:16) ================
+# ============== Results grid (Look1/2/3 + Video) =================
 res = st.session_state.get("results") or {}
 if res:
-    key_prefix = f"job{st.session_state['job_counter']}"
-    img_urls = res.get("image_urls") or []
+    urls = res.get("image_urls") or []
     video_url = res.get("video_url")
 
-    # 1. satır: 3 görsel + 1 video (hepsi 9:16, aynı boyut)
-    c1, c2, c3, c4 = st.columns([1,1,1,1])
+    cards = []
     named = []
 
-    for idx, col in enumerate([c1, c2, c3]):
-        if idx < len(img_urls):
-            u = img_urls[idx]
-            title = "Look" if idx == 0 else f"Look #{idx+1}"
-            _, b = show_img_tile_9x16(col, title, u, filename_stub=f"look_{idx+1}", key_prefix=f"{key_prefix}_{idx}")
-            if b: named.append((f"look_{idx+1}{infer_ext(b)}", b))
-        else:
-            show_img_tile_9x16(col, f"Look #{idx+1}", None)
+    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 = show_video_tile_9x16(c4, "Video", video_url, key_prefix=key_prefix)
-    else:
-        c4.markdown("**Video**")
-        c4.caption("Henüz üretilmedi.")
+        vbytes = fetch_bytes(video_url)
+        if vbytes: cards.append(card_html_video("Video", vbytes))
 
-    # 2. satır: Video üretim kontrolleri
     st.markdown("---")
-    colv1, colv2, colv3 = st.columns([1.1, 1.0, 1.2])
-    with colv1:
+    st.subheader("Sonuçlar")
+    if cards:
+        st.markdown('<div class="media-grid">' + "\n".join(cards) + "</div>", unsafe_allow_html=True)
+    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 colv2:
+    with ctl2:
         st.selectbox("Video süresi", ["6","10"], index=(0 if st.session_state["duration"]=="6" else 1), key="duration_select")
-    with colv3:
+    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 = img_urls[0] if img_urls else None
+        src_for_video = urls[0] if urls else None
         if not src_for_video:
             st.warning("Video için kaynak görsel yok.")
         else:
@@ -387,22 +367,22 @@ if res:
             vurl = (v.get("result") or {}).get("video", {}).get("url")
             if vurl:
                 st.session_state["results"]["video_url"] = vurl
-                video_url = vurl
-                vbytes = show_video_tile_9x16(c4, "Video", video_url, key_prefix=key_prefix)
+                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
+    # ZIP indir (Streamlit butonu)
     if named or vbytes:
-        if vbytes:
-            named.append(("video.mp4", vbytes))
-        zip_bytes = make_zip(named)
+        if vbytes: named.append(("video.mp4", vbytes))
         st.download_button(
             "Tümünü indir (ZIP)",
-            data=zip_bytes,
+            data=make_zip(named),
             file_name="fitstudio_outputs.zip",
             mime="application/zip",
-            key=f"{key_prefix}_zip_dl"
+            key=f"zip_{st.session_state['job_counter']}"
         )
 
     # Debug
@@ -412,27 +392,23 @@ if res:
             "schema_version": res.get("schema_version"),
             "api_base": API_BASE,
             "has_auth_header": bool(HF_TOKEN),
-            "image_urls": img_urls,
+            "image_urls": urls,
             "video_url": res.get("video_url"),
-            "preview_size": f"{PREVIEW_W}×{PREVIEW_H}",
+            "frame": f"{PREVIEW_W}×{PREVIEW_H} (9:16)"
         })
 
-# ================= Sidebar (teşhis) =================
+# ============== Sidebar =================
 with st.sidebar:
     st.caption(f"Resolved API_BASE: {API_BASE}")
     st.caption("Auth header: " + ("ON" if HF_TOKEN else "OFF"))
-
     if st.button("Ping /health"):
         try:
             r = requests.get(f"{API_BASE}/health", headers=HEADERS if HF_TOKEN else None, timeout=10)
             st.write(r.status_code)
-            try:
-                st.json(r.json())
-            except Exception:
-                st.code((r.text or "")[:1000])
+            try: st.json(r.json())
+            except Exception: st.code((r.text or "")[:1000])
         except Exception as e:
             st.error(f"Health error: {e}")
-
     if st.button("Clear cache"):
         st.cache_data.clear(); st.success("Cache cleared.")
     if st.button("Clear results"):