showcase

app.py

@@ -59,20 +59,54 @@ def _image_data_uri(path: Path) -> str:
     return f"data:{mime};base64,{data}"
 
 
-def _showcase_marquee_html() -> str:
+def _showcase_marquee_html(compact: bool = False) -> str:
     cards = []
     for idx, path in enumerate(SHOWCASE_IMAGES):
         uri = _image_data_uri(path)
         if uri:
             cards.append(f'<img src="{uri}" alt="Try-on showcase {idx + 1}" />')
     row = "".join(cards)
+    compact_class = " compact" if compact else ""
     return f"""
-    <div class="showcase-marquee" aria-label="效果展示">
+    <div class="showcase-marquee{compact_class}" aria-label="效果展示">
       <div class="showcase-track">{row}{row}</div>
     </div>
     """
 
 
+RESULT_LAYOUT_CSS = """
+<style>
+.tryon-hero {
+  padding-top: 88px !important;
+  padding-bottom: 14px !important;
+}
+.workspace {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  padding-top: 16px !important;
+}
+.result-card-output {
+  width: min(1180px, calc(100vw - 56px)) !important;
+  margin: 0 auto !important;
+}
+.showcase-wrap {
+  padding-top: 12px !important;
+  padding-bottom: 24px !important;
+}
+@media (max-width: 760px) {
+  .tryon-hero {
+    padding-top: 86px !important;
+    padding-bottom: 10px !important;
+  }
+  .result-card-output {
+    width: min(100%, calc(100vw - 24px)) !important;
+  }
+}
+</style>
+"""
+
+
 def _file_path(item) -> str | None:
     if item is None:
         return None
@@ -237,6 +271,9 @@ def _predict_from_prompt_files(prompt: str, files):
             enhanced_prompt,
             pe_status,
             gr.update(value=display_status, visible=True),
+            gr.update(visible=False),
+            RESULT_LAYOUT_CSS,
+            _showcase_marquee_html(compact=True),
         )
 
     except gr.Error:
@@ -465,10 +502,14 @@ body, .gradio-container {
 .result-card-output {
   border: 0 !important;
   background: transparent !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
 }
 .result-card-output img {
   border-radius: 34px !important;
-  max-height: 620px !important;
+  width: min(100%, 1180px) !important;
+  max-height: min(68vh, 680px) !important;
   object-fit: contain !important;
   box-shadow: none !important;
 }
@@ -512,6 +553,23 @@ body, .gradio-container {
   transform: scale(1.055);
   box-shadow: 0 22px 56px rgba(0,0,0,.16);
 }
+.showcase-marquee.compact {
+  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
+.showcase-marquee.compact .showcase-track {
+  gap: 14px;
+  animation-duration: 92s;
+}
+.showcase-marquee.compact .showcase-track img {
+  width: min(19vw, 286px);
+  min-width: 220px;
+  border-radius: 10px !important;
+  box-shadow: 0 8px 22px rgba(0,0,0,.08);
+}
+.showcase-marquee.compact .showcase-track img:hover {
+  transform: scale(1.035);
+  box-shadow: 0 12px 30px rgba(0,0,0,.12);
+}
 @keyframes showcase-scroll {
   from { transform: translateX(0); }
   to { transform: translateX(calc(-50% - 17px)); }
@@ -524,6 +582,7 @@ body, .gradio-container {
   .prompt-shell { width: min(100%, calc(100vw - 28px)); }
   .prompt-shell textarea, .prompt-shell [contenteditable="true"] { font-size: 17px !important; min-height: 38px !important; padding-left: 58px !important; }
   .showcase-track img { width: 430px; min-width: 430px; }
+  .showcase-marquee.compact .showcase-track img { width: 168px; min-width: 168px; }
 }
 """
 
@@ -538,8 +597,10 @@ with gr.Blocks(title="JoyAI Virtual Try-On", css=CSS) as demo:
         """
     )
 
+    layout_css = gr.HTML("")
+
     with gr.Column(elem_classes=["tryon-hero"]):
-        gr.HTML('<div class="tryon-title">开始虚拟试穿之旅，放入图像或写指令来看效果</div>')
+        hero_title = gr.HTML('<div class="tryon-title">开始虚拟试穿之旅，放入图像或写指令来看效果</div>')
         prompt_box = gr.MultimodalTextbox(
             label="",
             placeholder="描述你想要的试穿效果",
@@ -563,9 +624,19 @@ with gr.Blocks(title="JoyAI Virtual Try-On", css=CSS) as demo:
             used_garment_index = gr.Number(label="Used Garment Index", precision=0)
 
     with gr.Column(elem_classes=["showcase-wrap"]):
-        gr.HTML(_showcase_marquee_html())
-
-    predict_outputs = [output_image, used_seed, used_garment_index, enhanced_prompt, pe_status, status]
+        showcase = gr.HTML(_showcase_marquee_html())
+
+    predict_outputs = [
+        output_image,
+        used_seed,
+        used_garment_index,
+        enhanced_prompt,
+        pe_status,
+        status,
+        hero_title,
+        layout_css,
+        showcase,
+    ]
 
     prompt_box.submit(
         fn=predict_from_message,