Upload app.py with huggingface_hub

app.py

@@ -86,57 +86,152 @@ def do_everything(poem: str, greeting: str, style_id: str, song_style: str, dura
     yield understanding, brief_en, card, painting, audio, video
 
 
+THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.red,
+    neutral_hue=gr.themes.colors.stone,
+    font=[gr.themes.GoogleFont("Noto Serif SC"), "Songti SC", "serif"],
+).set(
+    body_background_fill="#FDFBF7",
+    body_text_color="#3e3a39",
+    block_background_fill="#FFFEFB",
+    block_border_color="#E7DCCC",
+    block_label_text_color="#6f655d",
+    input_background_fill="#FCFAF4",
+    input_border_color="#E7DCCC",
+    button_primary_background_fill="#8c3a38",
+    button_primary_background_fill_hover="#9c4240",
+    button_primary_text_color="#FDF6EF",
+)
+
+# Distinctive layer the theme tokens can't express: brush-calligraphy title,
+# vermilion seal-stamp step markers, chip-style radios, rice-paper atmosphere.
 CSS = """
-:root { --ink: #2b2620; --vermilion: #a63a2b; --paper: #f6f1e5; --paper-deep: #efe7d4; }
-.gradio-container {
+@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;500;700;900&display=swap');
+
+:root{
+  --paper:#FDFBF7; --paper-card:#FFFEFB; --paper-input:#FCFAF4;
+  --ink:#3e3a39; --ink-soft:#6f655d; --ink-faint:#9a8f83;
+  --seal:#8c3a38; --line:#E7DCCC;
+  --serif:"Noto Serif SC","Songti SC","STSong",serif;
+  --brush:"Ma Shan Zheng",var(--serif);
+}
+.gradio-container, .gradio-container *{ font-family: var(--serif); }
+.gradio-container{
   background:
-    radial-gradient(1200px 500px at 80% -10%, #fbf7ec 0%, transparent 60%),
-    radial-gradient(900px 400px at -10% 110%, #f1e8d2 0%, transparent 55%),
+    radial-gradient(58rem 24rem at 90% -10%, rgba(140,58,56,.05), transparent 60%),
+    radial-gradient(46rem 22rem at -6% 110%, rgba(62,58,57,.045), transparent 55%),
     var(--paper) !important;
-  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif !important;
   color: var(--ink);
 }
-#title-block h1 {
-  font-size: 2.6rem; letter-spacing: 0.35rem; color: var(--ink);
-  border-bottom: 1px solid #d8cdb4; padding-bottom: 0.6rem;
+#app-root{ max-width: 860px; margin: 0 auto; }
+footer{ display:none !important; }
+
+/* hero */
+#hero{ text-align:center; padding: 2.2rem 0 1rem; }
+#hero .brush{
+  font-family:var(--brush); font-size: clamp(3.2rem,10vw,5rem);
+  color:var(--ink); letter-spacing:.3rem; line-height:1; margin:0;
+}
+#hero .stamp{
+  display:inline-grid; place-items:center; width:2.5rem; height:2.5rem;
+  margin-left:.55rem; vertical-align:.4rem; background:var(--seal); color:#fbf3ec;
+  border-radius:8px; font-size:1.15rem; font-weight:700; transform:rotate(-4deg);
+  box-shadow:0 4px 12px -2px rgba(140,58,56,.45);
+}
+#hero .sub{ margin:1.05rem auto 0; max-width:34rem; color:var(--ink-soft);
+  font-size:1.06rem; line-height:1.8; letter-spacing:.02rem; }
+#hero .rule{ width:60px; height:3px; margin:1.1rem auto 0; background:var(--seal);
+  opacity:.85; border-radius:2px; }
+
+/* step cards */
+.step{
+  background:var(--paper-card) !important; border:1px solid var(--line) !important;
+  border-radius:16px !important; padding:1.5rem 1.4rem 1.3rem !important;
+  margin:0 0 1.35rem !important;
+  box-shadow:0 1px 0 #fff inset, 0 14px 32px -22px rgba(62,58,57,.5) !important;
+}
+/* let the step-head HTML sit directly on the paper card, no Gradio block chrome.
+   the .styler wrapper around the HTML block carries a tan fill — clear it. */
+.step .styler:has(.step-head){ background:transparent !important; border:none !important;
+  box-shadow:none !important; padding:0 !important; }
+.step-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
+.step-seal{
+  flex:0 0 auto; width:2.4rem; height:2.4rem; display:grid; place-items:center;
+  background:var(--seal); color:#fbf3ec; border-radius:9px; font-size:1.25rem;
+  font-weight:700; box-shadow:0 4px 10px -3px rgba(140,58,56,.5);
+}
+.step-title{ font-size:1.34rem; font-weight:700; color:var(--ink); line-height:1.2; }
+.step-sub{ font-size:.94rem; color:var(--ink-faint); margin-top:.1rem; }
+
+/* inputs */
+textarea, input[type="text"]{
+  font-size:1.16rem !important; line-height:1.9 !important; color:var(--ink) !important;
+  border-radius:10px !important;
+}
+textarea:focus, input[type="text"]:focus{
+  border-color:var(--seal) !important; box-shadow:0 0 0 3px rgba(140,58,56,.12) !important;
+}
+
+/* buttons */
+button.primary, button.secondary{
+  min-height:58px !important; font-size:1.14rem !important; font-weight:700 !important;
+  letter-spacing:.12rem !important; border-radius:12px !important;
+}
+button.primary{ box-shadow:0 9px 22px -12px rgba(140,58,56,.7) !important; }
+button.primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
+button.secondary{
+  background:var(--paper-card) !important; color:var(--ink) !important;
+  border:1px solid var(--line) !important;
 }
-#title-block .seal {
-  display: inline-block; background: var(--vermilion); color: #faf5eb;
-  padding: 0.1rem 0.45rem; border-radius: 4px; margin-left: 0.6rem;
-  font-size: 1.4rem; vertical-align: middle;
+.run-all button, .run-all.secondary{
+  background:linear-gradient(180deg,#4a4441,#322d2b) !important; color:#f3ece2 !important;
+  border:none !important; letter-spacing:.2rem !important;
 }
-.step-card {
-  background: rgba(255, 252, 244, 0.82) !important;
-  border: 1px solid #ddd2b8 !important; border-radius: 14px !important;
-  box-shadow: 0 2px 14px rgba(90, 70, 40, 0.08) !important;
-  padding: 1rem !important; margin-top: 1rem !important;
+.run-all button:hover{ filter:brightness(1.08); }
+
+/* radios as paper chips */
+.step fieldset label, .step .wrap label{
+  background:var(--paper-input) !important; border:1px solid var(--line) !important;
+  border-radius:999px !important; padding:.5rem 1.05rem !important; cursor:pointer;
+  font-size:1.05rem !important; color:var(--ink) !important; transition:all .15s ease;
 }
-.step-card .label-wrap span, .step-card label span { font-size: 1.05rem !important; }
-button.primary, .primary {
-  background: var(--vermilion) !important; border: none !important;
-  font-size: 1.15rem !important; letter-spacing: 0.2rem;
+.step fieldset label:has(input:checked), .step .wrap label:has(input:checked){
+  background:var(--seal) !important; border-color:var(--seal) !important; color:#fdf6ef !important;
 }
-button.primary:hover { filter: brightness(1.08); }
-textarea, input[type="text"] { font-size: 1.15rem !important; line-height: 1.8 !important; }
-.step-number {
-  color: var(--vermilion); font-size: 1.2rem; letter-spacing: 0.2rem; margin-bottom: 0;
+
+/* understanding panel */
+#understanding{
+  background:var(--paper-input); border:1px solid var(--line);
+  border-left:3px solid var(--seal); border-radius:10px;
+  padding:1rem 1.15rem; font-size:1.12rem; line-height:1.9; color:var(--ink);
 }
-footer { display: none !important; }
+#understanding h3{ color:var(--seal); margin-top:0; letter-spacing:.06rem; }
 """
 
-with gr.Blocks(title="诗成画 · Poem to Painting & Song") as demo:
-    with gr.Column(elem_id="title-block"):
-        gr.HTML(
-            "<h1>诗成画 <span class='seal'>印</span></h1>"
-            "<p style='font-size:1.1rem'>写一首小诗，我来替您读懂它、画出来、唱给您听，再让画活起来。"
-            "每一步用的都是开源小模型。</p>"
-        )
+
+def step_head(num: str, title: str, sub: str) -> str:
+    return (
+        f"<div class='step-head'><span class='step-seal'>{num}</span>"
+        f"<div><div class='step-title'>{title}</div>"
+        f"<div class='step-sub'>{sub}</div></div></div>"
+    )
+
+
+with gr.Blocks(title="Poetic · 诗成画") as demo:
+  with gr.Column(elem_id="app-root"):
+    gr.HTML(
+        "<div id='hero'>"
+        "<h1 class='brush'>诗成画<span class='stamp'>印</span></h1>"
+        "<p class='sub'>写一首小诗，我替您读懂它、为它作画、把它唱出来，"
+        "再让画轻轻动起来——做成一张可以送给家人的画卡。<br>每一步都用开源小模型生成。</p>"
+        "<div class='rule'></div></div>"
+    )
 
     brief_state = gr.State("")
     painting_state = gr.State(None)
 
-    with gr.Group(elem_classes="step-card"):
-        gr.Markdown("**一 · 写诗**", elem_classes="step-number")
+    with gr.Group(elem_classes="step"):
+        gr.HTML(step_head("一", "写诗", "把心里的话写成几句，长短都可以"))
         poem_box = gr.Textbox(
             label="您的诗", lines=4, placeholder="把您想说的写成几句小诗，长短都可以。"
         )
@@ -144,12 +239,16 @@ with gr.Blocks(title="诗成画 · Poem to Painting & Song") as demo:
             label="想送的问候（可以不填）", placeholder="例如：早安，或一句祝福的话"
         )
         with gr.Row():
-            interpret_btn = gr.Button("读诗", variant="primary")
-            everything_btn = gr.Button("一气呵成（读诗·作画·唱诗·入画）")
+            interpret_btn = gr.Button("读诗", variant="primary", scale=1)
+            everything_btn = gr.Button(
+                "一气呵成 · 读诗 作画 唱诗 入画", scale=2, elem_classes="run-all"
+            )
 
-    with gr.Group(elem_classes="step-card"):
-        gr.Markdown("**二 · 画中之意**", elem_classes="step-number")
-        understanding_md = gr.Markdown("点「读诗」后，我会把读到的画面说给您听。")
+    with gr.Group(elem_classes="step"):
+        gr.HTML(step_head("二", "画中之意", "我把读到的画面说给您听，读错了可以纠正我"))
+        understanding_md = gr.Markdown(
+            "点「读诗」后，我会把读到的画面说给您听。", elem_id="understanding"
+        )
         correction_box = gr.Textbox(
             label="如果我没读对，请告诉我", placeholder="例如：我想要更温暖的颜色"
         )
@@ -157,16 +256,16 @@ with gr.Blocks(title="诗成画 · Poem to Painting & Song") as demo:
         with gr.Accordion("给画师的英文说明（看看也无妨）", open=False):
             brief_md = gr.Markdown("")
 
-    with gr.Group(elem_classes="step-card"):
-        gr.Markdown("**三 · 作画**", elem_classes="step-number")
+    with gr.Group(elem_classes="step"):
+        gr.HTML(step_head("三", "作画", "选一种画风，为这首诗画一幅画卡"))
         style_radio = gr.Radio(
             IMAGE_STYLE_CHOICES, value=DEFAULT_IMAGE_STYLE, label="选一种画风"
         )
         paint_btn = gr.Button("作画", variant="primary")
         card_image = gr.Image(label="您的画卡", type="pil", interactive=False)
 
-    with gr.Group(elem_classes="step-card"):
-        gr.Markdown("**四 · 唱诗**", elem_classes="step-number")
+    with gr.Group(elem_classes="step"):
+        gr.HTML(step_head("四", "唱诗", "把这首诗唱成一首歌"))
         with gr.Row():
             song_radio = gr.Radio(
                 SONG_STYLE_CHOICES, value=DEFAULT_SONG_STYLE, label="选一种曲风"
@@ -175,9 +274,8 @@ with gr.Blocks(title="诗成画 · Poem to Painting & Song") as demo:
         sing_btn = gr.Button("唱诗", variant="primary")
         song_audio = gr.Audio(label="您的诗，唱出来了", type="filepath", interactive=False)
 
-    with gr.Group(elem_classes="step-card"):
-        gr.Markdown("**五 · 入画**", elem_classes="step-number")
-        gr.Markdown("让画轻轻动起来，配上您的歌，做成一段可以发给家人的小影片。")
+    with gr.Group(elem_classes="step"):
+        gr.HTML(step_head("五", "入画", "让画轻轻动起来，配上您的歌，做成一段小影片"))
         animate_btn = gr.Button("让画活起来", variant="primary")
         video_out = gr.Video(label="会唱歌的画", interactive=False)
 
@@ -220,4 +318,4 @@ with gr.Blocks(title="诗成画 · Poem to Painting & Song") as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(css=CSS)
+    demo.launch(theme=THEME, css=CSS)