Update app.py

app.py

@@ -10,6 +10,10 @@ REPO_ID = "pthcorp/prettybird_bce_basic_simplesecurity"
 MODEL_FILENAME = "prettybird_bce_basic_asena_fp16.gguf"
 
 LOGO_URL = "https://prometech.net.tr/wp-content/uploads/2025/10/pthheader.png"
+MUSIC_TITLE = "Planet Elimination"
+MUSIC_ARTIST = "MuzaProduction"
+MUSIC_LINK = "https://elements.envato.com/planet-elimination-6KSM6KT"
+MUSIC_FILE_REL = "planet_elimination.mp3"  # ana klasörde OK
 
 HEADER_MD = f"""
 <div class="pb-header">
@@ -528,70 +532,22 @@ textarea, input, .gr-textbox, .gr-textbox * {
 }
 
 /* ===== MUSIC CORE ===== */
-/* Stars never block clicks */
-#stars, #stars2, #stars3{ pointer-events:none !important; }
-
-/* Music widget – ALWAYS visible */
-#pb-music-widget{
-  position: fixed;
-  right: 18px;
-  bottom: 18px;
-  z-index: 2147483647; /* max */
-  pointer-events: auto;
-}
-
-/* Single neon button */
-#pb-play-btn{
-  position: relative;
-  width: 66px;
-  height: 66px;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.92);
-  border: 2px solid var(--terminal-fg);
-  color: var(--terminal-fg);
-  cursor: pointer;
-  box-shadow: 0 0 12px rgba(0,255,65,0.55), 0 0 22px rgba(0,255,65,0.25) inset;
-  font-family: var(--terminal-font);
-  overflow: visible; /* rings can overflow */
-}
-
-#pb-play-btn:focus{ outline:none; }
-
-#pb-play-btn .pb-icon{
-  font-size: 24px;
-  line-height: 1;
-  text-shadow: 0 0 10px rgba(0,255,65,0.5);
-}
-
-/* Halo EQ rings */
-#pb-play-btn .eq-ring{
-  position: absolute;
-  inset: -8px;
-  border-radius: 50%;
-  border: 1px solid rgba(0,255,65,0.55);
-  opacity: 0;
-  pointer-events: none;
-}
-
-#pb-play-btn.playing .eq-ring{
-  opacity: 1;
-  animation: eqPulse 1.6s ease-out infinite;
-}
-
-#pb-play-btn.playing .r2{ animation-delay: .35s; }
-#pb-play-btn.playing .r3{ animation-delay: .7s; }
-
-@keyframes eqPulse{
-  0%   { transform: scale(1);   opacity: 0.75; }
-  65%  { transform: scale(1.65);opacity: 0.05; }
-  100% { transform: scale(1.75);opacity: 0; }
-}
-
-@media (max-width:520px){
-  #pb-music-widget{ right: 12px; bottom: 12px; }
-  #pb-play-btn{ width: 60px; height: 60px; }
-}
-
+.pb-music-wrap{
+  position:fixed;
+  right:14px;
+  bottom:14px;
+  z-index:9999;
+  width:min(360px, 92vw);
+  background:rgba(0,0,0,0.75);
+  border:1px solid rgba(0,255,65,0.35);
+  border-radius:14px;
+  padding:10px 12px;
+  box-shadow:0 0 14px rgba(0,0,0,0.85);
+  backdrop-filter: blur(6px);
+}
+.pb-music-title{ color:#d9ffe0; margin:0 0 6px 0; font-size:0.95rem; letter-spacing:0.06em; }
+.pb-music-wrap a{ color:#9affc0; text-decoration:none; }
+.pb-music-wrap a:hover{ text-decoration:underline; }
 </style>
 """
 
@@ -642,64 +598,24 @@ with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as
                 '</div>'
             )
 # Music
-gr.HTML("""
-<div id="pb-music-anchor"></div>
-
-<script>
-(function(){
-  // Avoid double-inject on hot reload
-  if (document.getElementById("pb-music-widget")) return;
-
-  const html = `
-    <div id="pb-music-widget">
-      <button id="pb-play-btn" aria-label="Play/Pause">
-        <span class="pb-icon">▶</span>
-        <span class="eq-ring r1"></span>
-        <span class="eq-ring r2"></span>
-        <span class="eq-ring r3"></span>
-      </button>
-
-      <audio id="pb-audio" preload="auto" loop>
-        <source src="/file=planet_elimination.mp3" type="audio/mpeg">
-      </audio>
-    </div>
-  `;
-
-  document.body.insertAdjacentHTML("beforeend", html);
-
-  const audio = document.getElementById("pb-audio");
-  const btn = document.getElementById("pb-play-btn");
-  const icon = btn.querySelector(".pb-icon");
-
-  let playing = false;
-
-  function setState(isPlaying){
-    playing = isPlaying;
-    btn.classList.toggle("playing", isPlaying);
-    icon.textContent = isPlaying ? "❚❚" : "▶";
-  }
+    # Music: use gr.Audio so file actually serves
+    with gr.Group(elem_classes=["pb-music-wrap"]):
+        gr.HTML(
+            f"""
+            <div class="pb-music-title">
+              🎵 {MUSIC_TITLE} — {MUSIC_ARTIST}
+              • <a href="{MUSIC_LINK}" target="_blank" rel="noopener">Source</a>
+            </div>
+            """
+        )
+        music = gr.Audio(
+            value=MUSIC_FILE_REL,  # relative path in repo
+            autoplay=True,
+            loop=True,
+            interactive=True,
+            show_label=False,
+        )
 
-  btn.addEventListener("click", async () => {
-    try{
-      if(!playing){
-        await audio.play(); // requires user gesture, this is it
-        setState(true);
-      }else{
-        audio.pause();
-        setState(false);
-      }
-    }catch(e){
-      console.log("Audio play blocked or error:", e);
-      // If still blocked, keep as paused
-      setState(false);
-    }
-  });
-
-  audio.addEventListener("pause", () => setState(false));
-  audio.addEventListener("play", () => setState(true));
-
-  setState(false);
-})();
 </script>
 """)