Update app.py

app.py

@@ -184,7 +184,7 @@ popup2_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/srkl
 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"
-# ==== HTML / CSS / JS ====
+
 html_template = '''
 <style>
     body {
@@ -240,10 +240,13 @@ html_template = '''
     }
     #gift {
         position: fixed;
+        bottom: 100px;
+        right: 20px;
         width: 60px;
         cursor: pointer;
         z-index: 9998;
         transition: transform 0.5s;
+        animation: bounce 1.2s infinite;
     }
     #popup, #popup2 {
         display: none;
@@ -306,6 +309,17 @@ html_template = '''
         cursor: pointer;
         z-index: 10000;
     }
+    #next-track {
+        position: fixed;
+        bottom: 60px;
+        left: 20px;
+        padding: 8px 12px;
+        font-size: 14px;
+        background: rgba(255,255,255,0.7);
+        border-radius: 8px;
+        cursor: pointer;
+        z-index: 10000;
+    }
 </style>
 <img id="sophia-avatar" src="{avatar_url}" />
 <img id="birthday-cake" src="{cake_url}" />
@@ -314,25 +328,24 @@ html_template = '''
 <img id="popup2" />
 <div id="popup-close">×</div>
 <div id="music-toggle">⏸️音乐</div>
+<div id="next-track">🎵切歌</div>
 <div id="balloon"></div>
 <audio id="bg-music" autoplay loop>
     <source src="{music1}" type="audio/mpeg" />
-    <source src="{music2}" type="audio/mpeg" />
 </audio>
 <audio id="bark" src="{bark_sound}"></audio>
 <script>
-    // 背景音乐轮播
     const tracks = ["{music1}", "{music2}"];
     const audio = document.getElementById("bg-music");
     let current = 0;
     audio.addEventListener("ended", () => {
         current = (current + 1) % tracks.length;
-        audio.src = tracks[current]; audio.load(); audio.play();
+        audio.src = tracks[current];
+        audio.load();
+        audio.play();
     });
 
-    // 音乐开关
-    const toggleBtn = document.getElementById("music-toggle");
-    toggleBtn.addEventListener("click", () => {
+    document.getElementById("music-toggle").addEventListener("click", () => {
         if (audio.paused) {
             audio.play();
             toggleBtn.textContent = "⏸️音乐";
@@ -342,7 +355,13 @@ html_template = '''
         }
     });
 
-    // 拖拽头像 + 狗叫 + 烟花
+    document.getElementById("next-track").addEventListener("click", () => {
+        current = (current + 1) % tracks.length;
+        audio.src = tracks[current];
+        audio.load();
+        audio.play();
+    });
+
     const avatar = document.getElementById("sophia-avatar");
     const bark = document.getElementById("bark");
     avatar.onmousedown = function(e) {
@@ -364,7 +383,6 @@ html_template = '''
         setTimeout(() => fw.remove(), 1200);
     });
 
-    // 礼物弹窗：srkl.jpg -> 2s 后弹 srkl1.jpg -> 1s 后全部关闭
     const gift = document.getElementById("gift");
     const popup = document.getElementById("popup");
     const popup2 = document.getElementById("popup2");
@@ -378,22 +396,14 @@ html_template = '''
         setTimeout(() => {
             popup2.src = "{popup2_url}";
             popup2.style.display = "block";
-            popup2.style.position = "fixed";
-            popup2.style.top = "calc(50% + 180px)";
-            popup2.style.left = "50%";
-            popup2.style.transform = "translate(-50%, 0)";
-            popup2.style.maxWidth = "80vw";
-            popup2.style.maxHeight = "80vh";
-            popup2.style.zIndex = "10000";
         }, 2000);
 
         setTimeout(() => {
             popup.style.display = "none";
             popup2.style.display = "none";
             closeBtn.style.display = "none";
-        }, 3000);
+        }, 5000);
     });
-
     closeBtn.addEventListener("click", () => {
         popup.style.display = "none";
         popup2.style.display = "none";
@@ -402,7 +412,6 @@ html_template = '''
 </script>
 '''
 
-# 插值填充
 html_content = html_template.replace("{background_css}", background_css) \
     .replace("{avatar_url}", avatar_url) \
     .replace("{cake_url}", cake_url) \
@@ -410,9 +419,9 @@ html_content = html_template.replace("{background_css}", background_css) \
     .replace("{music2}", music2) \
     .replace("{bark_sound}", bark_sound) \
     .replace("{gift_url}", gift_url) \
-    .replace("{popup_url}", popup_url)
+    .replace("{popup_url}", popup_url) \
+    .replace("{popup2_url}", popup2_url)
 
-# ==== Gradio UI ====
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.HTML(html_content)
     gr.Markdown("## 🌸 Horse and 7 Agent：欢迎进入豌豆的世界 🌸")
@@ -422,6 +431,5 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     btn = gr.Button("投喂")
     btn.click(chat, inputs=[msg, state], outputs=[chatbot, state])
     msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])
-
 if __name__ == "__main__":
     demo.launch()