Update app.py

app.py

@@ -180,7 +180,8 @@ def chat(user_input, history):
 
 import gradio as gr
 
-# ==== 静态资源 ====
+
+# ==== 静态资源 ==== 
 background_images = [
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family1.jpg",
@@ -193,51 +194,45 @@ background_images = [
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family8.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family9.jpg"
 ]
-background_css = "".join([
-    f"{i * 10}% {{ background-image: url({img}); }}\n"
-    for i, img in enumerate(background_images)
+# 生成 background keyframes
+background_css_rules = "".join([
+    f"    {i * 10}% {{ background-image: url('{img}'); }}\n" for i, img in enumerate(background_images)
 ])
+background_css = f"@keyframes backgroundCycle {{\n{background_css_rules}}}"
+
 avatar_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/bean.jpg"
 cake_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/birthday.jpg"
 music1 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/FNG.mp3"
 music2 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/PGY.mp3"
 bark_sound = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/voice.mp3"
 
-# ==== Gradio 页面构建 ====
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("## 🌸 Horse and 7 Agent：欢迎进入豌豆的世界 🌸")
-
-    chatbot = gr.Chatbot(label="Horse and 7", type="messages", show_copy_button=True)
-    msg = gr.Textbox(label="想对豌豆说啥？", placeholder="比如：你在干嘛？", lines=2)
-    btn = gr.Button("投喂")
-
-html_content = f"""
+# ==== HTML/CSS/JS 模板（使用 .replace 安全插值） ====
+html_template = '''
 <style>
-    body {{
+    body {
         margin: 0;
         animation: backgroundCycle 60s infinite;
         background-size: cover;
         background-position: center;
         transition: background-image 1s ease-in-out;
-    }}
-    @keyframes backgroundCycle {{
-        {background_css}
-    }}
-    .gr-chatbot {{
+    }
+    {background_css}
+
+    .gr-chatbot {
         background: rgba(255, 255, 255, 0.5);
         border-radius: 16px;
         padding: 10px;
-    }}
-    .gr-textbox textarea {{
+    }
+    .gr-textbox textarea {
         font-family: monospace;
         font-size: 1.1em;
         animation: typewriter 1s steps(40, end);
-    }}
-    @keyframes typewriter {{
-        from {{ width: 0 }}
-        to {{ width: 100% }}
-    }}
-    #sophia-avatar {{
+    }
+    @keyframes typewriter {
+        from { width: 0 }
+        to { width: 100% }
+    }
+    #sophia-avatar {
         position: fixed;
         top: 40px;
         left: 30px;
@@ -247,28 +242,27 @@ html_content = f"""
         z-index: 9999;
         cursor: grab;
         animation: spinBounce 4s infinite;
-    }}
-    @keyframes spinBounce {{
-        0% {{ transform: rotate(0deg) translateY(0px); }}
-        50% {{ transform: rotate(180deg) translateY(-10px); }}
-        100% {{ transform: rotate(360deg) translateY(0px); }}
-    }}
-    #birthday-cake {{
+    }
+    @keyframes spinBounce {
+        0% { transform: rotate(0deg) translateY(0); }
+        50% { transform: rotate(180deg) translateY(-10px); }
+        100% { transform: rotate(360deg) translateY(0); }
+    }
+    #birthday-cake {
         position: fixed;
         bottom: 20px;
         right: 20px;
         width: 80px;
         animation: bounce 1.5s infinite;
         z-index: 9999;
-    }}
-    @keyframes bounce {{
-        0% {{ transform: translateY(0); }}
-        50% {{ transform: translateY(-15px); }}
-        100% {{ transform: translateY(0); }}
-    }}
+    }
+    @keyframes bounce {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-15px); }
+        100% { transform: translateY(0); }
+    }
 </style>
 
-<!-- 动态头像 + 生日蛋糕 -->
 <img id="sophia-avatar" src="{avatar_url}" />
 <img id="birthday-cake" src="{cake_url}" />
 <audio id="bg-music" autoplay loop>
@@ -279,64 +273,81 @@ html_content = f"""
 <canvas id="fireworks" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;"></canvas>
 
 <script>
+    // 背景音乐轮播
     const tracks = ["{music1}", "{music2}"];
     const audio = document.getElementById("bg-music");
     let current = 0;
-    audio.addEventListener("ended", () => {{
+    audio.addEventListener("ended", () => {
         current = (current + 1) % tracks.length;
         audio.src = tracks[current];
-        audio.play();
-    }});
+        audio.load(); audio.play();
+    });
 
+    // 头像拖拽 & Bark 音效
     const avatar = document.getElementById("sophia-avatar");
-    avatar.onmousedown = function(e) {{
+    const bark = document.getElementById("bark");
+    avatar.onmousedown = function(e) {
         const shiftX = e.clientX - avatar.getBoundingClientRect().left;
         const shiftY = e.clientY - avatar.getBoundingClientRect().top;
-        function moveAt(e) {{
+        function moveAt(e) {
             avatar.style.left = e.pageX - shiftX + 'px';
             avatar.style.top = e.pageY - shiftY + 'px';
-        }}
+        }
         document.addEventListener('mousemove', moveAt);
-        avatar.onmouseup = function() {{
+        avatar.onmouseup = function() {
             document.removeEventListener('mousemove', moveAt);
             avatar.onmouseup = null;
-        }};
-    }};
+        };
+    };
     avatar.ondragstart = () => false;
-    avatar.addEventListener("click", () => {{
-        document.getElementById("bark").play();
-    }});
+    avatar.addEventListener("click", () => {
+        bark.pause(); bark.currentTime = 0; bark.play();
+    });
 
+    // 简易烟花特效
     const canvas = document.getElementById("fireworks");
     const ctx = canvas.getContext("2d");
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-
-    function firework() {{
+    canvas.width = window.innerWidth; canvas.height = window.innerHeight;
+    function firework() {
         const x = Math.random() * canvas.width;
         const y = Math.random() * canvas.height;
-        for (let i = 0; i < 30; i++) {{
-            setTimeout(() => {{
+        for (let i = 0; i < 30; i++) {
+            setTimeout(() => {
                 ctx.beginPath();
                 ctx.arc(x, y, Math.random() * 3 + 2, 0, Math.PI * 2);
                 ctx.fillStyle = 'hsl(' + (Math.random() * 360) + ', 100%, 60%)';
                 ctx.fill();
-            }}, i * 20);
-        }}
-    }}
-
+            }, i * 20);
+        }
+    }
     setInterval(firework, 1800);
 </script>
-"""
+'''
 
+# 安全插值
+html_content = html_template.replace("{background_css}", background_css) \
+    .replace("{avatar_url}", avatar_url) \
+    .replace("{cake_url}", cake_url) \
+    .replace("{music1}", music1) \
+    .replace("{music2}", music2) \
+    .replace("{bark_sound}", bark_sound)
+
+# ==== Gradio 界面 ====
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    # 注入自定义样式和脚本，必须放在最前
+    gr.HTML(html_content)
+
+    # 标题和聊天组件
+    gr.Markdown("## 🌸 Horse and 7 Agent：欢迎进入豌豆的世界 🌸")
+    chatbot = gr.Chatbot(label="Sophia", type="messages", show_copy_button=True)
+    msg = gr.Textbox(label="想对豌豆说啥？", placeholder="比如：你在干嘛？", lines=2)
+    state = gr.State([])
+    btn = gr.Button("投喂")
 
-html_content = html_content.replace("{background_css}", background_css)
-html_content = html_content.replace("{avatar_url}", avatar_url)
-html_content = html_content.replace("{cake_url}", cake_url)
-html_content = html_content.replace("{music1}", music1)
-html_content = html_content.replace("{music2}", music2)
-html_content = html_content.replace("{bark_sound}", bark_sound)
+    # 绑定聊天函数
+    btn.click(chat, inputs=[msg, state], outputs=[chatbot, state])
+    msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])
 
-   
-gr.HTML(html_content)
-demo.launch()
+# 启动
+if __name__ == "__main__":
+    demo.launch()