Update app.py

app.py

@@ -766,84 +766,7 @@ 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>
-
-<script>
-(() => {
-  const canvas = document.getElementById("pb-binary");
-  if (!canvas) return;
-
-  const ctx = canvas.getContext("2d", { alpha: true });
-
-  const COLORS = ["#118188", "#233cad"]; // camgöbeği + codeblue
-  const PHRASE = "CICIKUŞ  PROMETECH  DAVRANIŞSAL  BİLİNÇ  MOTORU";
-
-  let w, h, cols, drops, fontSize;
-
-  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))); // responsive
-    cols = Math.floor(w / fontSize);
-    drops = new Array(cols).fill(0).map(() => Math.random() * h);
-  }
-
-  // random: 0/1 ve araya nadiren phrase’ten karakter
-  function pickChar() {
-    if (Math.random() < 0.06) {
-      return PHRASE[Math.floor(Math.random() * PHRASE.length)];
-    }
-    return Math.random() < 0.5 ? "0" : "1";
-  }
-
-  function draw() {
-    // fade (iz bırakma)
-    ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
-    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];
-
-      // glow
-      ctx.shadowColor = c;
-      ctx.shadowBlur = 10;
-
-      ctx.fillStyle = c;
-      ctx.fillText(ch, x, y);
-
-      // hız (orta): 0.9–1.4 arası
-      drops[i] += fontSize * (0.9 + Math.random() * 0.5);
-
-      // reset
-      if (drops[i] > h + 50 && Math.random() > 0.985) {
-        drops[i] = -Math.random() * 300;
-      }
-    }
-
-    requestAnimationFrame(draw);
-  }
-
-  resize();
-  window.addEventListener("resize", resize, { passive: true });
-  draw();
-})();
-</script>
-""")
+    gr.HTML('<canvas id="pb-binary"></canvas>')
 
     gr.Markdown(HEADER_MD)
 
@@ -914,5 +837,80 @@ 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)