Use high quality PNG showcase images

app.py

@@ -273,33 +273,43 @@ body, .gradio-container {
   margin-bottom: 18px;
 }
 .prompt-shell {
-  max-width: 1280px;
-  width: min(1280px, calc(100vw - 120px));
+  max-width: 1520px;
+  width: min(1520px, calc(100vw - 120px));
   margin: 0 auto;
-  min-height: 172px;
-  border: 3px solid #86b5ff;
-  border-radius: 32px !important;
+  min-height: 112px;
+  border: 2.5px solid #9ec2ff;
+  border-radius: 999px !important;
   background: #fff !important;
-  box-shadow: 0 0 0 1px rgba(54, 119, 232, .14), 12px 16px 34px rgba(93, 150, 255, .18) !important;
-  overflow: visible;
+  box-shadow: none !important;
+  filter: none !important;
+  overflow: hidden;
 }
 .prompt-shell:focus-within {
   border-color: #3677e8;
-  box-shadow: 0 0 0 4px rgba(54, 119, 232, .14), 12px 16px 34px rgba(93, 150, 255, .2) !important;
+  box-shadow: none !important;
 }
 .prompt-shell .block,
 .prompt-shell .wrap,
-.prompt-shell .form {
+.prompt-shell .form,
+.prompt-shell label,
+.prompt-shell fieldset {
   border: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
+  filter: none !important;
+}
+.prompt-shell,
+.prompt-shell > *,
+.prompt-shell .block,
+.prompt-shell .wrap {
+  border-radius: 999px !important;
 }
 .prompt-shell img,
 .prompt-shell video {
-  width: 68px !important;
-  height: 68px !important;
+  width: 56px !important;
+  height: 56px !important;
   object-fit: cover !important;
-  border-radius: 14px !important;
+  border-radius: 18px !important;
   border: 2px solid #d9e7ff !important;
 }
 .prompt-shell .file-preview,
@@ -316,16 +326,16 @@ body, .gradio-container {
 }
 .prompt-shell textarea,
 .prompt-shell [contenteditable="true"] {
-  min-height: 104px !important;
+  min-height: 86px !important;
   border: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   resize: none !important;
   color: #111 !important;
   caret-color: #111 !important;
-  font-size: 22px !important;
+  font-size: 20px !important;
   line-height: 1.45 !important;
-  padding: 22px 92px 56px 28px !important;
+  padding: 24px 92px 34px 74px !important;
 }
 .prompt-shell textarea::placeholder {
   color: #8b8b8b !important;
@@ -426,7 +436,7 @@ body, .gradio-container {
   .tryon-hero { padding-top: 104px; }
   .tryon-title { font-size: 24px; }
   .prompt-shell { width: min(100%, calc(100vw - 28px)); }
-  .prompt-shell textarea, .prompt-shell [contenteditable="true"] { font-size: 18px !important; min-height: 126px !important; }
+  .prompt-shell textarea, .prompt-shell [contenteditable="true"] { font-size: 18px !important; min-height: 86px !important; }
   .showcase-track img { width: 430px; min-width: 430px; }
 }
 """
@@ -449,8 +459,8 @@ with gr.Blocks(title="JoyAI Virtual Try-On", css=CSS) as demo:
             placeholder="描述你想要的试穿效果",
             file_count="multiple",
             file_types=["image"],
-            lines=3,
-            max_lines=3,
+            lines=2,
+            max_lines=2,
             show_label=False,
             interactive=True,
             submit_btn="↑",