Update app.py

app.py

@@ -166,13 +166,10 @@ def chat(user_input, history):
 
 import gradio as gr
 
-background_images = [
-    f"https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family{i}.jpg" for i in range(10)
-]
-background_css_rules = "".join([
-    f"    {i * 10}% {{ background-image: url('{img}'); }}\n" for i, img in enumerate(background_images)
-])
+background_images = [f"https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family{i}.jpg" for i in ["",1,2,3,4,5,6,7,8,9]]
+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"
@@ -180,145 +177,228 @@ music2 = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/PGY.mp3"
 bark_sound = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/voice.mp3"
 gift_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/gift.jpg"
 popup_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/srkl.jpg"
-balloon_url = "https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/ballon.jpg"
+
+# ==== HTML / CSS / JS ====
 html_template = '''
 <style>
-  body {
-    margin: 0;
-    animation: backgroundCycle 60s infinite;
-    background-size: cover;
-    background-position: center;
-    transition: background-image 1s ease-in-out;
-  }
-  {background_css}
-
-  /* 半透明聊天气泡 */
-  .gradio-container .chatbot .message .bubble {
-    background-color: rgba(255,255,255,0.5) !important;
-    backdrop-filter: blur(8px);
-  }
-  /* 隐藏默认的背景画布 */
-  canvas#fireworks_old { display: none !important; }
+    body {
+        margin: 0;
+        animation: backgroundCycle 60s infinite;
+        background-size: cover;
+        background-position: center;
+        transition: background-image 1s ease-in-out;
+    }
+    {background_css}
+    .gr-chatbot {
+        background: rgba(255, 255, 255, 0.5) !important;
+        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: 40px;
+        left: 30px;
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        z-index: 9999;
+        cursor: grab;
+        animation: spinBounce 4s infinite;
+    }
+    @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); }
+    }
+    #gift {
+        position: fixed;
+        width: 60px;
+        cursor: pointer;
+        z-index: 9998;
+        transition: transform 0.5s;
+    }
+    #popup {
+        display: none;
+        position: fixed;
+        top: 50%; left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 80vw;
+        max-height: 80vh;
+        z-index: 10000;
+        border: 4px solid #fff;
+        border-radius: 12px;
+        box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    }
+    #popup-close {
+        position: absolute;
+        top: 8px; right: 12px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+        z-index: 10001;
+    }
+    #firework {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        width: 120px;
+        height: 120px;
+        background: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/firework.gif") no-repeat center center;
+        background-size: contain;
+        z-index: 99999;
+        animation: fadeOut 1s ease-out forwards;
+    }
+    @keyframes fadeOut {
+        0% { opacity: 1; }
+        100% { opacity: 0; }
+    }
+    #balloon {
+        position: fixed;
+        top: 100%;
+        left: 50%;
+        width: 50px;
+        height: 80px;
+        background: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon.png") no-repeat center;
+        background-size: contain;
+        animation: floatBalloon 10s linear infinite;
+        z-index: 9999;
+    }
+    @keyframes floatBalloon {
+        0% { transform: translate(-50%, 0); }
+        100% { transform: translate(-50%, -120vh); }
+    }
+    #music-toggle {
+        position: fixed;
+        bottom: 20px;
+        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}" />
 <img id="gift" src="{gift_url}" />
-<div id="popup-close" style="display:none;">×</div>
-
-<button id="music-control" style="position:fixed;bottom:20px;left:20px;width:50px;border:none;background:url('music.jpg')center/contain no-repeat;cursor:pointer;z-index:9999;opacity:1;">
-</button>
-
-<audio id="bg-music" loop></audio>
+<img id="popup" src="{popup_url}" />
+<div id="popup-close">×</div>
+<div id="music-toggle">⏸️音乐</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>
-  // 背景音乐 手动触发 （移除 autoplay）
-  const audio = document.getElementById('bg-music');
-  const tracks = ['{music1}','{music2}'];
-  document.getElementById('music-control').addEventListener('click',()=>{
-    if(audio.paused){
-      audio.src = tracks[Math.floor(Math.random()*tracks.length)];
-      audio.play();
-      document.getElementById('music-control').style.opacity=0.6;
-    } else {
-      audio.pause();
-      document.getElementById('music-control').style.opacity=1;
-    }
-  });
-
-  // 头像拖拽与 bark 播放
-  const avatar = document.getElementById('sophia-avatar');
-  const bark = document.getElementById('bark');
-  avatar.onmousedown = e=>{
-    const dx=e.clientX-avatar.getBoundingClientRect().left;
-    const dy=e.clientY-avatar.getBoundingClientRect().top;
-    const move=e=>{ avatar.style.left=e.pageX-dx+'px'; avatar.style.top=e.pageY-dy+'px'; };
-    document.addEventListener('mousemove',move);
-    avatar.onmouseup=()=>document.removeEventListener('mousemove',move);
-  };
-  avatar.ondragstart=()=>false;
-  avatar.onclick=()=>{ bark.pause(); bark.currentTime=0; bark.play(); };
-
-  // 蛋糕弹跳已留存，无需修改
-
-  // 礼物随机移动 & 点击切换弹窗
-  const gift = document.getElementById('gift');
-  let showPopup=false;
-  setInterval(()=>{
-    const x=Math.random()*(window.innerWidth-gift.offsetWidth);
-    const y=Math.random()*(window.innerHeight-gift.offsetHeight);
-    gift.style.left=x+'px'; gift.style.top=y+'px';
-  },2000);
-  gift.onclick=()=>{
-    showPopup=!showPopup;
-    const pop=document.getElementById('popup');
-    document.getElementById('popup-close').style.display=showPopup?'block':'none';
-    if(showPopup){
-      pop.style.display='block';
-      pop.src='{popup_url}';
-      pop.style.position='fixed'; pop.style.top='50%'; pop.style.left='50%';
-      pop.style.transform='translate(-50%,-50%)';
-      pop.style.maxWidth='80vw'; pop.style.maxHeight='80vh';
-      pop.style.border='4px solid white'; pop.style.borderRadius='12px';
-      pop.style.boxShadow='0 0 20px rgba(0,0,0,0.5)'; pop.style.zIndex='10000';
-    } else {
-      pop.style.display='none';
+    // 背景音乐轮播
+    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();
+    });
+
+    // 音乐开关按钮
+    const toggleBtn = document.getElementById("music-toggle");
+    toggleBtn.addEventListener("click", () => {
+        if (audio.paused) {
+            audio.play();
+            toggleBtn.textContent = "⏸️音乐";
+        } else {
+            audio.pause();
+            toggleBtn.textContent = "▶️音乐";
+        }
+    });
+
+    // 头像拖拽 & Bark 音效
+    const avatar = document.getElementById("sophia-avatar");
+    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) {
+            avatar.style.left = e.pageX - shiftX + 'px';
+            avatar.style.top = e.pageY - shiftY + 'px';
+        }
+        document.addEventListener('mousemove', moveAt);
+        avatar.onmouseup = () => { document.removeEventListener('mousemove', moveAt); avatar.onmouseup = null; };
+    };
+    avatar.ondragstart = () => false;
+    avatar.addEventListener("click", () => {
+        bark.pause(); bark.currentTime = 0; bark.play();
+        const fw = document.createElement("div");
+        fw.id = "firework";
+        document.body.appendChild(fw);
+        setTimeout(() => fw.remove(), 1200);
+    });
+
+    // 礼物弹窗 + 自动消失
+    const gift = document.getElementById("gift");
+    const popup = document.getElementById("popup");
+    const closeBtn = document.getElementById("popup-close");
+    function moveGift() {
+        const x = Math.random() * (window.innerWidth - gift.offsetWidth);
+        const y = Math.random() * (window.innerHeight - gift.offsetHeight);
+        gift.style.transform = `translate(${x}px, ${y}px)`;
     }
-  };
-
-  // 点击关闭弹窗也可二次点击礼物或点击 close
-  document.getElementById('popup-close').onclick=()=>gift.onclick();
-
-  // 漂浮气球
-  for(let i=0;i<5;i++){
-    const b=new Image(); b.src='{balloon_url}'; b.className='balloon';
-    b.style.position='fixed'; b.style.width='40px'; b.style.bottom='-50px';
-    b.style.left=Math.random()*90+'vw'; b.style.opacity=0.8;
-    b.style.animation=`floatUp ${(5+Math.random()*5)}s linear infinite`;
-    document.body.appendChild(b);
-  }
-  const style=document.createElement('style'); style.textContent="@keyframes floatUp{0%{transform:translateY(0)}100%{transform:translateY(-120vh)}}";
-  document.head.appendChild(style);
-
-  // 点击触发 HSL 烟花动画
-  const canvas=document.createElement('canvas');
-  canvas.id='fireworks'; canvas.style='position:fixed;top:0;left:0;pointer-events:none;z-index:0;';
-  document.body.appendChild(canvas);
-  const ctx=canvas.getContext('2d'); function resize(){canvas.width=window.innerWidth; canvas.height=window.innerHeight;} resize(); window.addEventListener('resize',resize);
-  function firework(x,y){ for(let i=0;i<50;i++){ const a=Math.random()*2*Math.PI, s=2+Math.random()*3, dx=Math.cos(a)*s, dy=Math.sin(a)*s, h=Math.random()*360; let t=0; const id=setInterval(()=>{ if(t>15){clearInterval(id);return;} ctx.beginPath(); ctx.arc(x+dx*t,y+dy*t,2,0,2*Math.PI); ctx.fillStyle=`hsl(${h},100%,50%)`; ctx.fill(); t++; },30);} }
-  document.body.addEventListener('click',e=>firework(e.clientX,e.clientY));
+    setInterval(moveGift, 2000);
+    gift.addEventListener("click", () => {
+        popup.style.display = 'block';
+        closeBtn.style.display = 'block';
+        setTimeout(() => {
+            popup.style.display = 'none';
+            closeBtn.style.display = 'none';
+        }, 2000);
+    });
+    closeBtn.addEventListener("click", () => {
+        popup.style.display = 'none';
+        closeBtn.style.display = 'none';
+    });
 </script>
 '''
 
-html_content = html_template.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)
-html_content = html_content.replace('{gift_url}',gift_url)
-html_content = html_content.replace('{popup_url}',popup_url)
-html_content = html_content.replace('{balloon_url}',balloon_url)
-
+# 插值填充
+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) \
+    .replace("{gift_url}", gift_url) \
+    .replace("{popup_url}", popup_url)
+
+# ==== Gradio UI ====
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.HTML(html_content)
-
-    gr.Markdown("### 🎂 🐎Gallery")
-    gallery = gr.Gallery(
-        value=background_images,
-        label="🐎",
-        show_label=False,
-        columns=5,
-        height=200
-    )
-
-    gr.Markdown("## 🌸 Horse and 7 Agent：欢迎进入豌豆的世界 ")
-    chatbot = gr.Chatbot(label="Pea", type="messages", show_copy_button=True)
-    msg = gr.Textbox(label="想对豌豆说啥？", placeholder="小勾巴，你想说什么？", lines=2)
+    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("投喂")
     btn.click(chat, inputs=[msg, state], outputs=[chatbot, state])
     msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])