Update app.py

app.py

@@ -211,73 +211,72 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     msg = gr.Textbox(label="想对豌豆说啥？", placeholder="比如：你在干嘛？", lines=2)
     btn = gr.Button("投喂")
 
-    # 页面美化注入 HTML + JS + CSS
-    html_content = f"""
-    <style>
-        body {{
-            margin: 0;
-            animation: backgroundCycle 60s infinite;
-            background-size: cover;
-            background-position: center;
-            transition: background-image 1s ease-in-out;
-        }}
-        @keyframes backgroundCycle {{
-            {background_css}
-        }}
-        .gr-chatbot {{
-            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: 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(0px); }}
-            50% {{ transform: rotate(180deg) translateY(-10px); }}
-            100% {{ transform: rotate(360deg) translateY(0px); }}
-        }}
-        #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); }}
-        }}
-    </style>
-
-    <!-- 动态头像 + 生日蛋糕 -->
-    <img id="sophia-avatar" src="{avatar_url}" />
-    <img id="birthday-cake" src="{cake_url}" />
-    <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>
-    <canvas id="fireworks" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;"></canvas>
+html_content = f"""
+<style>
+    body {{
+        margin: 0;
+        animation: backgroundCycle 60s infinite;
+        background-size: cover;
+        background-position: center;
+        transition: background-image 1s ease-in-out;
+    }}
+    @keyframes backgroundCycle {{
+        {background_css}
+    }}
+    .gr-chatbot {{
+        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: 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(0px); }}
+        50% {{ transform: rotate(180deg) translateY(-10px); }}
+        100% {{ transform: rotate(360deg) translateY(0px); }}
+    }}
+    #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); }}
+    }}
+</style>
+
+<!-- 动态头像 + 生日蛋糕 -->
+<img id="sophia-avatar" src="{avatar_url}" />
+<img id="birthday-cake" src="{cake_url}" />
+<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>
+<canvas id="fireworks" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;"></canvas>
 
 <script>
     const tracks = ["{music1}", "{music2}"];
@@ -320,7 +319,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             setTimeout(() => {{
                 ctx.beginPath();
                 ctx.arc(x, y, Math.random() * 3 + 2, 0, Math.PI * 2);
-                ctx.fillStyle = `hsl(${Math.random() * 360}, 100%, 60%)`;
+                ctx.fillStyle = 'hsl(' + (Math.random() * 360) + ', 100%, 60%)';
                 ctx.fill();
             }}, i * 20);
         }}
@@ -328,7 +327,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     setInterval(firework, 1800);
 </script>
-    """
+"""
+
     # 替换掉HTML模板中的变量部分
     html_content = html_content.replace("{background_css}", background_css)
     html_content = html_content.replace("{avatar_url}", avatar_url)