Update app.py

app.py

@@ -152,64 +152,41 @@ def chat(user_input, history):
 
 import gradio as gr
 
-# 音频文件 URL
-audio_url_1 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/FNG.mp3"
-audio_url_2 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/PGY.mp3"
-
-# HTML 和 JavaScript 用于音频循环播放
-html_audio_player = f"""
-    <audio id="audio-player" autoplay loop>
-        <source src="{audio_url_1}" type="audio/mp3">
-    </audio>
-    <script>
-        var audioPlayer = document.getElementById('audio-player');
-        var audioFiles = ['{audio_url_1}', '{audio_url_2}'];
-        var currentTrack = 0;
-
-        audioPlayer.addEventListener('ended', function() {{
-            currentTrack = (currentTrack + 1) % audioFiles.length;
-            audioPlayer.src = audioFiles[currentTrack];
-            audioPlayer.play();
-        }});
-    </script>
-"""
+# === 背景图与音乐 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"
+]
+avatar_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/bean.jpg"
+music1 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/FNG.mp3"
+music2 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/PGY.mp3"
 
-# Gradio界面显示
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown("# 🎀 Sophia Chat Agent")
     gr.Markdown("欢迎来到 **Sophia Jr**，相信你也是马＋7大家庭中的一员。快来和我聊聊吧！💬")
-    
-    # 背景图片路径
-    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"
-    ]
-    
-    # 头像图片链接
-    avatar_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/bean.jpg"
-    
-    # Chatbot 组件
-    chatbot = gr.Chatbot(label="Sophia", type="messages")
+
+    chatbot = gr.Chatbot(label="Sophia", type="messages", show_copy_button=True)
     msg = gr.Textbox(label="你想说啥子哦～", placeholder="快点跟 Sophia 开始聊天吧！", lines=2)
     state = gr.State([{"role": "assistant", "content": "你好，我是 Sophia～你想聊啥？"}])
     btn = gr.Button("发送")
 
-    # Gradio界面显示，应用背景图片和头像
+    # 插入 CSS、背景图轮播、头像动画、聊天框美化、背景音乐播放
     gr.HTML(f"""
     <style>
         body {{
-            background-image: url({background_images[0]});
-            background-size: cover;
-            background-repeat: no-repeat;
+            margin: 0;
             animation: backgroundCycle 30s infinite;
+            background-size: cover;
+            background-position: center;
+            transition: background-image 1s ease-in-out;
         }}
         @keyframes backgroundCycle {{
             0% {{ background-image: url({background_images[0]}); }}
@@ -223,61 +200,55 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             80% {{ background-image: url({background_images[8]}); }}
             90% {{ background-image: url({background_images[9]}); }}
         }}
-        
-        /* 动态头像样式 */
+
+        .gr-chatbot {{
+            background: linear-gradient(135deg, #fbd3e9, #bb377d);
+            border-radius: 12px;
+            padding: 10px;
+        }}
+
         #sophia-avatar {{
+            position: fixed;
+            top: 10px;
+            left: 10px;
             width: 60px;
             height: 60px;
             border-radius: 50%;
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            animation: jump 2s ease-in-out infinite, rotate 4s linear infinite;
-        }}
-        
-        @keyframes jump {{
-            0%, 100% {{
-                transform: translateY(0);
-            }}
-            50% {{
-                transform: translateY(-10px);
-            }}
+            animation: bounceSpin 4s infinite;
+            z-index: 9999;
         }}
-        
-        @keyframes rotate {{
-            0% {{
-                transform: rotate(0deg);
-            }}
-            100% {{
-                transform: rotate(360deg);
-            }}
+
+        @keyframes bounceSpin {{
+            0%, 100% {{ transform: translateY(0) rotate(0deg); }}
+            25% {{ transform: translateY(-10px) rotate(90deg); }}
+            50% {{ transform: translateY(0) rotate(180deg); }}
+            75% {{ transform: translateY(10px) rotate(270deg); }}
         }}
-        
-        /* 自定义聊天框样式 */
-        .gradio-chatbot .message { 
-            display: flex;
-            align-items: center;
-            background-color: rgba(255, 182, 193, 0.8); /* 浪漫粉色 */
-            border-radius: 10px;
-            margin-bottom: 10px;
-            padding: 8px;
-        }
-        
-        .gradio-chatbot .message .user-message img { 
-            margin-right: 10px; 
-        }
-
-        /* 提高聊天框和背景的对比*/
-        .gradio-chatbot .message.sophia { 
-            background-color: rgba(173, 216, 230, 0.8); /* 浅蓝色 */
-        }
     </style>
-    """)
 
-    # 插入音频播放器
-    gr.HTML(html_audio_player)
+    <img id="sophia-avatar" src="{avatar_url}" />
+
+    <audio id="bg-music" autoplay loop>
+        <source src="{music1}" type="audio/mpeg">
+        <source src="{music2}" type="audio/mpeg">
+        Your browser does not support the audio tag.
+    </audio>
+
+    <script>
+        // 自动循环播放多首歌曲
+        const musicList = ["{music1}", "{music2}"];
+        let currentTrack = 0;
+        const audio = document.getElementById("bg-music");
+        audio.src = musicList[currentTrack];
+        audio.addEventListener("ended", () => {{
+            currentTrack = (currentTrack + 1) % musicList.length;
+            audio.src = musicList[currentTrack];
+            audio.play();
+        }});
+    </script>
+    """)
 
-    # 聊天回调（不修改）
+    # 聊天逻辑按钮触发
     btn.click(chat, inputs=[msg, state], outputs=[chatbot, state])
     msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])