Update app.py

app.py

@@ -180,37 +180,36 @@ def chat(user_input, history):
 
 
 import gradio as gr
-import gradio as gr
-import os
-# === 背景图与音乐 URL ===
+
+# ==== 静态资源 ====
 background_images = [
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family1.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family2.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family3.jpg",
     "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family4.jpg",
-    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family5.jpg",
-    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family6.jpg",
-    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family7.jpg",
-    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family8.jpg",
-    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family9.jpg"
+    "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family5.jpg"
 ]
+background_css = "".join([
+    f"{i * 20}% {{ background-image: url({img}); }}\n"
+    for i, img in enumerate(background_images)
+])
 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"
-cake_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/birthday.jpg"
+bark_sound = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/voice.mp3"
 
-# ==== Gradio 页面 ====
+# ==== Gradio 页面构建 ====
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🎀Horse And 7 Agent🎀")
-    gr.Markdown("欢迎来到 **豌豆的家**，相信你也是马＋7大家庭中的一员。我能在家里拉粑粑吗！💬")
+    gr.Markdown("## 🌸 Horse and 7 Agent：欢迎进入豌豆的世界 🌸")
 
     chatbot = gr.Chatbot(label="Sophia", type="messages", show_copy_button=True)
-    msg = gr.Textbox(label="旺~你想说啥子哦～", placeholder="快点跟豌豆开始聊天吧！", lines=2)
+    msg = gr.Textbox(label="想对豌豆说啥？", placeholder="比如：你在干嘛？", lines=2)
     state = gr.State([{"role": "assistant", "content": "勾巴，我是豌豆，你想聊啥？"}])
     btn = gr.Button("投喂")
 
-    # === 页面美化部分 ===
+    # 页面美化注入 HTML + JS + CSS
     gr.HTML(f"""
     <style>
         body {{
@@ -221,84 +220,101 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             transition: background-image 1s ease-in-out;
         }}
         @keyframes backgroundCycle {{
-            {''.join([f"{i*10}% {{ background-image: url({img}); }}\n" for i, img in enumerate(background_images)])}
+            {background_css}
         }}
-
         .gr-chatbot {{
-            background: rgba(255, 255, 255, 0.5); /* 半透明 */
+            background: rgba(255, 255, 255, 0.5);
             border-radius: 16px;
             padding: 10px;
         }}
-
+        .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 {{
             position: fixed;
-            top: 60px;
+            top: 40px;
             left: 30px;
             width: 80px;
             height: 80px;
             border-radius: 50%;
             z-index: 9999;
-            cursor: move;
+            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 {{
             position: fixed;
-            bottom: 10px;
-            right: 10px;
+            bottom: 20px;
+            right: 20px;
             width: 80px;
-            animation: bounce 2s infinite ease-in-out alternate;
+            animation: bounce 1.5s infinite;
             z-index: 9999;
         }}
-
         @keyframes bounce {{
-            0% {{ transform: translateY(0px); }}
-            100% {{ transform: translateY(-20px); }}
+            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}" />
-
-    <canvas id="fireworks" style="position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:999;"></canvas>
-
     <audio id="bg-music" autoplay loop>
-        <source src="{music1}" type="audio/mpeg">
-        <source src="{music2}" type="audio/mpeg">
+        <source src="{music1}" type="audio/mpeg" />
+        <source src="{music2}" type="audio/mpeg" />
     </audio>
+    <audio id="bark" src="{bark_sound}"></audio>
+    <canvas id="fireworks" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;"></canvas>
 
     <script>
-        // 音乐自动切换
-        const musicList = ["{music1}", "{music2}"];
-        let currentTrack = 0;
+        // 播放背景音乐轮播
+        const tracks = ["{music1}", "{music2}"];
         const audio = document.getElementById("bg-music");
-        audio.src = musicList[currentTrack];
+        let current = 0;
         audio.addEventListener("ended", () => {{
-            currentTrack = (currentTrack + 1) % musicList.length;
-            audio.src = musicList[currentTrack];
+            current = (current + 1) % tracks.length;
+            audio.src = tracks[current];
             audio.play();
         }});
 
         // 拖动头像
         const avatar = document.getElementById("sophia-avatar");
         avatar.onmousedown = function(e) {{
-            const offsetX = e.clientX - avatar.offsetLeft;
-            const offsetY = e.clientY - avatar.offsetTop;
-            function move(e) {{
-                avatar.style.left = (e.clientX - offsetX) + 'px';
-                avatar.style.top = (e.clientY - offsetY) + 'px';
+            const shiftX = e.clientX - avatar.getBoundingClientRect().left;
+            const shiftY = e.clientY - avatar.getBoundingClientRect().top;
+            function moveAt(e) {{
+                avatar.style.left = e.pageX - shiftX + 'px';
+                avatar.style.top = e.pageY - shiftY + 'px';
             }}
-            document.addEventListener('mousemove', move);
-            document.addEventListener('mouseup', () => {{
-                document.removeEventListener('mousemove', move);
-            }}, {{ once: true }});
+            document.addEventListener('mousemove', moveAt);
+            avatar.onmouseup = function() {{
+                document.removeEventListener('mousemove', moveAt);
+                avatar.onmouseup = null;
+            }};
         }};
+        avatar.ondragstart = () => false;
 
-        // 简易烟花（伪特效）
+        // 点击头像播放汪汪叫
+        avatar.addEventListener("click", () => {{
+            document.getElementById("bark").play();
+        }});
+
+        // 烟花特效
         const canvas = document.getElementById("fireworks");
         const ctx = canvas.getContext("2d");
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
-
         function firework() {{
             const x = Math.random() * canvas.width;
             const y = Math.random() * canvas.height;
@@ -311,12 +327,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 }}, i * 20);
             }}
         }}
-        setInterval(firework, 1500);
+        setInterval(firework, 1800);
     </script>
     """)
-    # === 按钮绑定 ===
+
+    # 绑定交互
     btn.click(chat_with_log, inputs=[msg, state], outputs=[chatbot, state])
     msg.submit(chat_with_log, inputs=[msg, state], outputs=[chatbot, state])
 
 demo.launch()
-