Use high quality PNG showcase images

app.py

@@ -249,9 +249,9 @@ body, .gradio-container {
   align-items: center;
 }
 .tryon-logo {
-  width: 182px;
+  width: 273px;
   height: auto;
-  max-height: 86px;
+  max-height: 129px;
   border-radius: 0;
   object-fit: contain;
   box-shadow: none;
@@ -262,7 +262,7 @@ body, .gradio-container {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 92px 20px 24px;
+  padding: 112px 20px 34px;
 }
 .tryon-title {
   font-size: 32px;
@@ -273,20 +273,33 @@ body, .gradio-container {
   margin-bottom: 18px;
 }
 .prompt-shell {
-  max-width: 1520px;
-  width: min(1520px, calc(100vw - 120px));
-  margin: 0 auto;
-  min-height: 112px;
-  border: 2.5px solid #9ec2ff;
+  --block-background-fill: transparent;
+  --block-border-color: transparent;
+  --input-background-fill: #fff;
+  --input-border-color: #d7d7d7;
+  --input-shadow: none;
+  max-width: 980px;
+  width: min(980px, calc(100vw - 640px));
+  margin: 0 auto !important;
+  min-height: 40px;
+  padding: 0 !important;
+  border: 1.5px solid #d7d7d7 !important;
   border-radius: 999px !important;
   background: #fff !important;
-  box-shadow: none !important;
+  box-shadow: 8px 10px 22px rgba(0, 0, 0, .12) !important;
   filter: none !important;
-  overflow: hidden;
+  overflow: visible;
 }
 .prompt-shell:focus-within {
-  border-color: #3677e8;
+  box-shadow: 9px 11px 24px rgba(0, 0, 0, .14) !important;
+}
+.tryon-hero .block:has(.prompt-shell),
+.tryon-hero .form:has(.prompt-shell),
+.tryon-hero .wrap:has(.prompt-shell) {
+  border: 0 !important;
+  background: transparent !important;
   box-shadow: none !important;
+  filter: none !important;
 }
 .prompt-shell .block,
 .prompt-shell .wrap,
@@ -298,18 +311,39 @@ body, .gradio-container {
   box-shadow: none !important;
   filter: none !important;
 }
-.prompt-shell,
 .prompt-shell > *,
 .prompt-shell .block,
-.prompt-shell .wrap {
+.prompt-shell .wrap,
+.prompt-shell label,
+.prompt-shell fieldset {
+  background: transparent !important;
+  box-shadow: none !important;
+  filter: none !important;
+}
+.prompt-shell textarea,
+.prompt-shell [contenteditable="true"],
+.prompt-shell .input-container,
+.prompt-shell .textarea-container,
+.prompt-shell [data-testid="textbox"],
+.prompt-shell [data-testid="textbox"] > div {
+  background: transparent !important;
+}
+.prompt-shell .wrap,
+.prompt-shell .input-container,
+.prompt-shell .textarea-container,
+.prompt-shell [data-testid="textbox"] {
+  min-height: 40px !important;
+  border: 0 !important;
   border-radius: 999px !important;
+  box-shadow: none !important;
+  overflow: visible !important;
 }
 .prompt-shell img,
 .prompt-shell video {
-  width: 56px !important;
-  height: 56px !important;
+  width: 42px !important;
+  height: 42px !important;
   object-fit: cover !important;
-  border-radius: 18px !important;
+  border-radius: 14px !important;
   border: 2px solid #d9e7ff !important;
 }
 .prompt-shell .file-preview,
@@ -326,50 +360,70 @@ body, .gradio-container {
 }
 .prompt-shell textarea,
 .prompt-shell [contenteditable="true"] {
-  min-height: 86px !important;
+  min-height: 38px !important;
   border: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   resize: none !important;
   color: #111 !important;
   caret-color: #111 !important;
-  font-size: 20px !important;
+  font-size: 18px !important;
   line-height: 1.45 !important;
-  padding: 24px 92px 34px 74px !important;
+  padding: 8px 74px 5px 64px !important;
 }
 .prompt-shell textarea::placeholder {
   color: #8b8b8b !important;
   opacity: 1 !important;
 }
-.prompt-shell > label button,
-.prompt-shell .wrap > button,
-.prompt-shell button[aria-label*="Upload"],
-.prompt-shell button[aria-label*="Submit"],
-.prompt-shell button[title*="Upload"],
-.prompt-shell button[title*="Submit"] {
-  width: 46px !important;
-  min-width: 46px !important;
-  height: 46px !important;
-  padding: 0 !important;
-  border-radius: 999px !important;
-  border: 0 !important;
-  background: #dbeaff !important;
-  color: #3677e8 !important;
-  font-size: 26px !important;
-  box-shadow: none !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
+.prompt-shell button,
+.prompt-shell label,
+.prompt-shell input[type="file"] {
+  pointer-events: auto !important;
   cursor: pointer !important;
 }
-.prompt-shell > label button:hover,
-.prompt-shell .wrap > button:hover,
-.prompt-shell button[aria-label*="Upload"]:hover,
-.prompt-shell button[aria-label*="Submit"]:hover,
-.prompt-shell button[title*="Upload"]:hover,
-.prompt-shell button[title*="Submit"]:hover {
-  background: #c9ddff !important;
-  color: #1f63d2 !important;
+.prompt-shell button {
+  box-shadow: none !important;
+}
+.prompt-shell .upload-button,
+.prompt-shell .submit-button {
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  z-index: 4 !important;
+  margin: 0 !important;
+}
+.prompt-shell .upload-button {
+  left: 14px !important;
+  width: 34px !important;
+  min-width: 34px !important;
+  height: 34px !important;
+  border-radius: 999px !important;
+  background: #050505 !important;
+  color: #fff !important;
+}
+.prompt-shell .upload-button svg {
+  width: 22px !important;
+  height: 22px !important;
+  color: #fff !important;
+  stroke: #fff !important;
+}
+.prompt-shell .submit-button {
+  right: 8px !important;
+  width: 34px !important;
+  min-width: 34px !important;
+  height: 34px !important;
+  border-radius: 999px !important;
+  background: #050505 !important;
+  color: #fff !important;
+  font-size: 0 !important;
+  overflow: hidden !important;
+}
+.prompt-shell .submit-button::before {
+  content: "↑";
+  display: block;
+  font-size: 22px;
+  line-height: 1;
+  color: #fff;
 }
 .workspace {
   max-width: 1180px;
@@ -432,11 +486,11 @@ body, .gradio-container {
 }
 @media (max-width: 760px) {
   .tryon-topbar { top: 14px; left: 16px; }
-  .tryon-logo { width: 118px; max-height: 56px; }
+  .tryon-logo { width: 177px; max-height: 84px; }
   .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: 86px !important; }
+  .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; }
 }
 """
@@ -453,13 +507,13 @@ with gr.Blocks(title="JoyAI Virtual Try-On", css=CSS) as demo:
     )
 
     with gr.Column(elem_classes=["tryon-hero"]):
-        gr.HTML('<div class="tryon-title">开始虚拟试穿之旅，放入图像或写指令来看效果</div>')
+        gr.HTML('<div class="tryon-title">开始虚拟试穿之旅，上传图像或写指令来看效果</div>')
         prompt_box = gr.MultimodalTextbox(
             label="",
             placeholder="描述你想要的试穿效果",
             file_count="multiple",
             file_types=["image"],
-            lines=2,
+            lines=1,
             max_lines=2,
             show_label=False,
             interactive=True,