Update app.py

app.py

@@ -183,23 +183,15 @@ 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",
-    "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"
+    f"https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/family{i}.jpg" for i in range(10)
 ]
-# 生成 background keyframes
+# 生成背景轮播 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"
@@ -207,163 +199,148 @@ 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 模板（使用 .replace 安全插值） ====
+# ==== HTML/CSS/JS 模板，合并优化，并移除旧烟花 canvas 与 autoplay ====
 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}
-    .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;
-    }
+  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; }
 </style>
+
+<!-- 控件元素 -->
 <img id="sophia-avatar" src="{avatar_url}" />
 <img id="birthday-cake" src="{cake_url}" />
 <img id="gift" src="{gift_url}" />
-<img id="popup" src="{popup_url}" />
-<div id="popup-close">×</div>
-<audio id="bg-music" autoplay loop>
-    <source src="{music1}" type="audio/mpeg" />
-    <source src="{music2}" type="audio/mpeg" />
-</audio>
+<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>
 <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();
-    });
-    // 头像拖拽 & 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 gift = document.getElementById("gift");
-    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)`;
+  // 背景音乐 手动触发 （移除 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';
     }
-    setInterval(moveGift, 2000);
-    gift.addEventListener("click", () => {
-        document.getElementById("popup").style.display = 'block';
-        document.getElementById("popup-close").style.display = 'block';
-    });
-    document.getElementById("popup-close").addEventListener("click", () => {
-        document.getElementById("popup").style.display = 'none';
-        document.getElementById("popup-close").style.display = 'none';
-    });
+  };
+
+  // 点击关闭弹窗也可二次点击礼物或点击 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));
 </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) \
-    .replace("{gift_url}", gift_url) \
-    .replace("{popup_url}", popup_url)
+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)
 
 # ==== 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)
+    # 注入定制 HTML/CSS/JS
+    gr.HTML(html_content)
+
+    # 寿星照片墙
+    gr.Markdown("### 🎂 寿星照片墙")
+    gallery = gr.Gallery(value=background_images, label="照片墙", show_label=False).style(grid=[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)
     state = gr.State([])
     btn = gr.Button("投喂")
-    btn.click(chat, inputs=[msg, state], outputs=[chatbot, state])
-    msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])
+    btn.click(chat, inputs=[msg,state], outputs=[chatbot,state])
+    msg.submit(chat, inputs=[msg,state], outputs=[chatbot,state])
 
-if __name__ == "__main__":
-    demo.launch()
+if __name__ == '__main__':
+    demo.launch()