Update app.py

app.py

@@ -766,7 +766,81 @@ with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as
     <div id="stars2"></div>
     <div id="stars3"></div>
     """)
-    gr.HTML('<canvas id="pb-binary"></canvas>')
+    gr.HTML(r"""
+<canvas id="pb-binary"></canvas>
+<script>
+(function () {
+  const COLORS = ["#118188", "#233cad"]; // camgöbeği + codeblue
+  const PHRASE = "CICIKUŞ  PROMETECH  DAVRANIŞSAL  BİLİNÇ  MOTORU";
+
+  function init() {
+    const canvas = document.getElementById("pb-binary");
+    if (!canvas) return false;
+
+    const ctx = canvas.getContext("2d", { alpha: true });
+    let w=0, h=0, cols=0, drops=[], fontSize=16;
+
+    function resize() {
+      const dpr = Math.max(1, window.devicePixelRatio || 1);
+      w = Math.floor(window.innerWidth);
+      h = Math.floor(window.innerHeight);
+
+      canvas.style.width = w + "px";
+      canvas.style.height = h + "px";
+      canvas.width = Math.floor(w * dpr);
+      canvas.height = Math.floor(h * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      fontSize = Math.max(14, Math.min(20, Math.floor(w / 80)));
+      cols = Math.max(12, Math.floor(w / fontSize));
+      drops = new Array(cols).fill(0).map(() => Math.random() * h);
+    }
+
+    function pickChar() {
+      if (Math.random() < 0.06) return PHRASE[Math.floor(Math.random() * PHRASE.length)];
+      return Math.random() < 0.5 ? "0" : "1";
+    }
+
+    function draw() {
+      // trail bırak, ama öldürme
+      ctx.fillStyle = "rgba(0,0,0,0.06)";
+      ctx.fillRect(0, 0, w, h);
+
+      ctx.font = fontSize + "px VT323, monospace";
+
+      for (let i = 0; i < cols; i++) {
+        const x = i * fontSize;
+        const y = drops[i];
+        const ch = pickChar();
+        const c = COLORS[(i + Math.floor(y / fontSize)) % COLORS.length];
+
+        ctx.shadowColor = c;
+        ctx.shadowBlur = 12;
+        ctx.fillStyle = c;
+        ctx.fillText(ch, x, y);
+
+        drops[i] += fontSize * (0.9 + Math.random() * 0.55);
+        if (drops[i] > h + 80 && Math.random() > 0.985) drops[i] = -Math.random() * 320;
+      }
+
+      requestAnimationFrame(draw);
+    }
+
+    resize();
+    window.addEventListener("resize", resize, { passive: true });
+    draw();
+    return true;
+  }
+
+  // Gradio DOM bazen geç geliyor → retry
+  let tries = 0;
+  const t = setInterval(() => {
+    tries++;
+    if (init() || tries > 60) clearInterval(t);
+  }, 150);
+})();
+</script>
+""")
 
     gr.Markdown(HEADER_MD)
 
@@ -837,80 +911,5 @@ with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as
             elem_classes=["pb-audio"]
         )
 
-    BINARY_JS = r"""
-() => {
-  // bazen DOM geç geliyor; küçük retry
-  const tryInit = (tries=0) => {
-    const canvas = document.getElementById("pb-binary");
-    if (!canvas) {
-      if (tries < 40) setTimeout(() => tryInit(tries+1), 150);
-      return;
-    }
-
-    const ctx = canvas.getContext("2d", { alpha: true });
-    const COLORS = ["#118188", "#233cad"];
-    const PHRASE = "CICIKUŞ  PROMETECH  DAVRANIŞSAL  BİLİNÇ  MOTORU";
-
-    let w=0, h=0, cols=0, drops=[], fontSize=16;
-
-    const resize = () => {
-      const dpr = Math.max(1, window.devicePixelRatio || 1);
-      w = Math.floor(window.innerWidth);
-      h = Math.floor(window.innerHeight);
-
-      canvas.style.width = w + "px";
-      canvas.style.height = h + "px";
-      canvas.width = Math.floor(w * dpr);
-      canvas.height = Math.floor(h * dpr);
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-      fontSize = Math.max(14, Math.min(20, Math.floor(w / 80)));
-      cols = Math.max(10, Math.floor(w / fontSize));
-      drops = new Array(cols).fill(0).map(() => Math.random() * h);
-    };
-
-    const pickChar = () => {
-      if (Math.random() < 0.06) return PHRASE[Math.floor(Math.random() * PHRASE.length)];
-      return Math.random() < 0.5 ? "0" : "1";
-    };
-
-    const draw = () => {
-      // iz bırakma: çok karartmasın diye alpha düşük
-      ctx.fillStyle = "rgba(0,0,0,0.05)";
-      ctx.fillRect(0, 0, w, h);
-
-      ctx.font = fontSize + "px VT323, monospace";
-
-      for (let i = 0; i < cols; i++) {
-        const x = i * fontSize;
-        const y = drops[i];
-        const ch = pickChar();
-        const c = COLORS[(i + Math.floor(y / fontSize)) % COLORS.length];
-
-        ctx.shadowColor = c;
-        ctx.shadowBlur = 10;
-        ctx.fillStyle = c;
-        ctx.fillText(ch, x, y);
-
-        // orta hız
-        drops[i] += fontSize * (0.9 + Math.random() * 0.5);
-
-        if (drops[i] > h + 60 && Math.random() > 0.985) {
-          drops[i] = -Math.random() * 300;
-        }
-      }
-      requestAnimationFrame(draw);
-    };
-
-    resize();
-    window.addEventListener("resize", resize, { passive: true });
-    draw();
-  };
-
-  tryInit();
-}
-"""
-
 if __name__ == "__main__":
     demo.launch()
-    demo.load(None, None, None, js=BINARY_JS)