Update app.py

app.py

@@ -2,11 +2,12 @@ import os, html, random
 import gradio as gr
 from openai import OpenAI
 
+# ==== 基础配置 ====
 API_KEY = os.getenv("OPENAI_API_KEY")
 MODEL_NAME = "gpt-4o-mini"
 client = OpenAI(api_key=API_KEY)
 
-# ===== 可爱名字 + 真实名言：系统提示 =====
+# ==== 系统提示：可爱名字 + 真实名言，灵感优先 ====
 SYSTEM_PROMPT = """You are a playful, high-creativity pet name generator.
 Goal: Produce EXACTLY ONE cute, kid-pronounceable pet name + one authentic quote line.
 
@@ -24,7 +25,7 @@ NAME rules (must be easy for kids):
   • Korean: 2 simple syllables (e.g., “Bori”, “Toto”).
   • French: 1–2 syllables with soft endings (-ou, -i, -ette).
 - You MAY coin a new word if it sounds cute and natural.
-- Output in requested language (Chinese/English/Japanese/Korean/French).
+- Output in the requested language (Chinese/English/Japanese/Korean/French).
 - Provide ONE short meaning/explanation (≤12 words), theme-first, traits-second.
 - No numbers; no long phrases.
 
@@ -54,7 +55,7 @@ Task:
 Remember: inspiration first (~70%), traits second (~30%); keep both lines in {language}.
 """
 
-# ===== 真实名言兜底（多语言） =====
+# ---- 名言兜底（真实名言的多语言版本） ----
 FALLBACK_QUOTES = {
     "English": [
         ('"Until one has loved an animal, a part of one\'s soul remains unawakened."', "Anatole France"),
@@ -77,9 +78,9 @@ FALLBACK_QUOTES = {
         ('“동물은 참으로 상냥한 친구다—묻지도 비난하지도 않는다.”', "George Eliot"),
     ],
     "Français": [
-        ('« Jusqu\'à ce qu\'on ait aimé un animal, une partie de notre âme reste endormie. »', "Anatole France"),
-        ('« Les yeux d’un animal ont le pouvoir de parler un grand langage. »', "Martin Buber"),
-        ('« Les animaux sont de si agréables amis — ils ne posent aucune question et ne font aucune critique. »', "George Eliot"),
+        ("« Jusqu'à ce qu'on ait aimé un animal, une partie de notre âme reste endormie. »", "Anatole France"),
+        ("« Les yeux d’un animal ont le pouvoir de parler un grand langage. »", "Martin Buber"),
+        ("« Les animaux sont de si agréables amis — ils ne posent aucune question et ne font aucune critique. »", "George Eliot"),
     ],
 }
 
@@ -88,16 +89,14 @@ def get_fallback_quote(language: str):
     text, author = random.choice(FALLBACK_QUOTES[lang])
     return f'Quote: {text} — {author}'
 
-def ensure_two_lines_and_quote(content: str, language: str):
+def ensure_two_lines_and_split(content: str, language: str):
     """
-    确保严格两行输出；若缺失或格式不当，为第二行注入真实名言兜底。
+    确保严格两行；若缺失名言则注入兜底。返回 (name_line, quote_line)
     """
     if not content:
-        return None
+        return None, None
     lines = [ln.strip() for ln in content.splitlines() if ln.strip()]
-    # 尽量抓取首行作为名字
     name_line = lines[0] if lines else ""
-    # 找到包含 Quote: 的行
     quote_line = None
     for ln in lines[1:]:
         if ln.lower().startswith("quote:"):
@@ -105,8 +104,7 @@ def ensure_two_lines_and_quote(content: str, language: str):
             break
     if not quote_line:
         quote_line = get_fallback_quote(language)
-    # 只返回两行
-    return f"{name_line}\n{quote_line}"
+    return name_line, quote_line
 
 def generate_name(species, look, personality, gender, language, inspiration):
     try:
@@ -118,7 +116,7 @@ def generate_name(species, look, personality, gender, language, inspiration):
         )
         resp = client.chat.completions.create(
             model=MODEL_NAME,
-            temperature=0.95,   # 强创意
+            temperature=0.95,
             top_p=0.95,
             max_tokens=280,
             messages=[
@@ -127,30 +125,176 @@ def generate_name(species, look, personality, gender, language, inspiration):
             ]
         )
         raw = (resp.choices[0].message.content or "").strip()
-        final_out = ensure_two_lines_and_quote(raw, language)
-        return final_out or "（没有生成内容，请稍后再试）"
+        name_line, quote_line = ensure_two_lines_and_split(raw, language)
+        if not (name_line and quote_line):
+            return render_result_html("（没有生成内容，请稍后再试）", "")
+        return render_result_html(name_line, quote_line)
     except Exception as e:
-        return f"⚠️ 出错：{html.escape(str(e))}"
+        return render_result_html(f"⚠️ 出错：{html.escape(str(e))}", "")
 
-# ===== 界面（去掉那句介绍，只留标题） =====
-with gr.Blocks(title="Pawfect Match") as demo:
-    gr.Markdown("## 🐾 Pawfect Match｜宠物起名机")
+# ======= 渲染结果为“软件风格”的结果卡片（HTML） =======
+def render_result_html(name_line: str, quote_line: str) -> str:
+    name_safe = html.escape(name_line or "")
+    quote_safe = html.escape(quote_line or "")
+    # 支持复制时保留纯文本（按钮用 JS 读隐藏文本）
+    plain_text = (name_line + "\n" + quote_line).strip()
+    plain_text = html.escape(plain_text)
+    return f"""
+    <div class="pm-result-card">
+      <div class="pm-name">{name_safe}</div>
+      <div class="pm-quote">{quote_safe}</div>
+      <textarea id="pm-plain" style="position:absolute; left:-9999px; top:-9999px;">{plain_text}</textarea>
+    </div>
+    """
 
-    species = gr.Textbox(label="宠物种类", placeholder="例：金毛 / 英短 / 仓鼠 / 鹦鹉（可留空）")
-    look = gr.Textbox(label="外表特征", placeholder="例：橘色短毛，大眼睛，白爪（可留空）")
-    personality = gr.Textbox(label="性格特点", placeholder="例：粘人、活泼、聪明（可留空）")
-    gender = gr.Radio(["male","female"], value="male", label="宠物性别")
-    language = gr.Radio(["中文","English","日本語","한국어","Français"], value="English", label="输出语言")
-    inspiration = gr.Radio(["山海经","迪士尼","哈利波特","生活"], value="生活", label="灵感来源")
+# ======= 主题与样式（让它更像真正的软件） =======
+theme = gr.themes.Soft(
+    primary_hue="pink",
+    secondary_hue="cyan",
+    neutral_hue="slate"
+).set(
+    radius_size="10px",
+    block_title_text_size="20px",
+    spacing_size="14px"
+)
+
+CUSTOM_CSS = """
+:root{
+  --pm-bg:#faf7fb;
+  --pm-surface:#ffffff;
+  --pm-border:#eddcf3;
+  --pm-accent:#ff4fa3;
+  --pm-accent-2:#42c6d3;
+  --pm-text:#111;
+  --pm-muted:#6b7280;
+}
+body, .gradio-container{ background:var(--pm-bg) !important; }
 
-    btn = gr.Button("✨ 起名！")
-    out = gr.Markdown()
+/* 顶栏 */
+.pm-topbar{
+  display:flex; align-items:center; justify-content:space-between;
+  padding:12px 12px; background:linear-gradient(90deg,#ffe8f3,#e8fbff);
+  border:1px solid var(--pm-border); border-radius:12px;
+}
+.pm-brand{ display:flex; align-items:center; gap:10px; }
+.pm-logo{ font-size:24px; }
+.pm-title{ font-weight:800; font-size:20px; color:var(--pm-text); }
+.pm-sub{ color:var(--pm-muted); font-size:12px; }
+
+/* 卡片 */
+.pm-card{
+  background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:12px;
+  box-shadow:0 4px 18px rgba(17,17,17,0.04); padding:16px;
+}
 
+/* 结果卡片 */
+.pm-result-card{
+  background:var(--pm-surface);
+  border:1px solid var(--pm-border);
+  border-radius:14px; padding:18px;
+  box-shadow:0 10px 26px rgba(255,79,163,0.08);
+}
+.pm-name{
+  font-weight:800; font-size:24px; color:var(--pm-text); margin-bottom:10px;
+}
+.pm-quote{
+  font-weight:600; font-size:14px; color:#374151; opacity:.95;
+}
+
+/* 按钮组 */
+.pm-actions{ display:flex; gap:10px; align-items:center; }
+.pm-actions .gr-button{ font-weight:700; }
+
+.pm-footer{
+  text-align:center; color:var(--pm-muted); font-size:12px; margin-top:10px;
+}
+"""
+
+# ======= 界面布局 =======
+with gr.Blocks(title="Pawfect Match", theme=theme, css=CUSTOM_CSS) as demo:
+    # 顶栏
+    gr.HTML("""
+      <div class="pm-topbar">
+        <div class="pm-brand">
+          <div class="pm-logo">🐾</div>
+          <div>
+            <div class="pm-title">Pawfect Match</div>
+            <div class="pm-sub">Cute pet naming • Inspired by myth & magic</div>
+          </div>
+        </div>
+        <div class="pm-sub">v1.3</div>
+      </div>
+    """)
+
+    with gr.Row():
+        # 左侧：输入卡
+        with gr.Column(scale=6):
+            with gr.Group(elem_classes=["pm-card"]):
+                gr.Markdown("#### 基本信息")
+                species = gr.Textbox(label="宠物种类", placeholder="例：金毛 / 英短 / 仓鼠 / 鹦鹉（可留空）", autofocus=True)
+                look = gr.Textbox(label="外表特征", placeholder="例：橘色短毛，大眼睛，白爪（可留空）")
+                personality = gr.Textbox(label="性格特点", placeholder="例：粘人、活泼、聪明（可留空）")
+                with gr.Row():
+                    gender = gr.Radio(["male","female"], value="male", label="宠物性别")
+                    language = gr.Radio(["中文","English","日本語","한국어","Français"], value="English", label="输出语言")
+
+            with gr.Group(elem_classes=["pm-card"]):
+                gr.Markdown("#### 灵感来源")
+                inspiration = gr.Radio(["山海经","迪士尼","哈利波特","生活"], value="生活", label="", info="决定整体风格（主题优先）")
+
+            with gr.Group(elem_classes=["pm-card"]):
+                gr.Markdown("#### 操作")
+                with gr.Row(elem_classes=["pm-actions"]):
+                    btn = gr.Button("✨ 起名", variant="primary")
+                    clear_btn = gr.Button("清空", variant="secondary")
+                    copy_btn = gr.Button("复制结果", variant="secondary")
+
+            with gr.Accordion("快速示例（点击自动填充）", open=False):
+                gr.Examples(
+                    examples=[
+                        ["英短猫","银渐层，圆脸，绿眼睛","高冷但会撒娇","female","中文","迪士尼"],
+                        ["柯基犬","短腿、红白毛、笑脸","亲人、活泼、贪吃","male","English","生活"],
+                        ["狸花猫","虎斑、黄眼睛","机灵好奇","male","日本語","山海经"],
+                        ["小型犬","白色卷毛","温柔、爱撒娇","female","Français","哈利波特"],
+                    ],
+                    inputs=[],
+                    outputs=[]
+                )
+
+        # 右侧：结果卡
+        with gr.Column(scale=6):
+            with gr.Group(elem_classes=["pm-card"]):
+                gr.Markdown("#### 结果")
+                out_html = gr.HTML(value="""
+                  <div class="pm-result-card">
+                    <div class="pm-name">（点击「✨ 起名」后显示）</div>
+                    <div class="pm-quote"></div>
+                  </div>
+                """)
+
+    gr.HTML('<div class="pm-footer">© Pawfect Match</div>')
+
+    # 交互
     btn.click(
         generate_name,
         inputs=[species, look, personality, gender, language, inspiration],
-        outputs=out
+        outputs=out_html
     )
 
+    clear_btn.click(
+        lambda: ("","","","male","English","生活"),
+        outputs=[species, look, personality, gender, language, inspiration]
+    )
+
+    # 复制纯文本（从隐藏 textarea 读取）
+    copy_btn.click(None, None, None, _js="""
+        () => {
+            const ta = document.getElementById('pm-plain');
+            if (!ta || !ta.value.trim()) { alert('还没有结果哦～'); return; }
+            navigator.clipboard.writeText(ta.value.trim());
+            alert('已复制到剪贴板');
+        }
+    """)
+
 if __name__ == "__main__":
     demo.launch()