Update app.py

app.py

@@ -1,537 +1,631 @@
 import os
+import time
+from datetime import datetime
+
 import gradio as gr
 from huggingface_hub import hf_hub_download
 from llama_cpp import Llama
 
-# 🔑 HF token
+
+# =========================
+# Model / HF
+# =========================
 HF_TOKEN = os.getenv("HF_TOKEN")
 
 REPO_ID = "pthcorp/prettybird_bce_basic_simplesecurity"
 MODEL_FILENAME = "prettybird_bce_basic_asena_fp16.gguf"
 
+if HF_TOKEN is None:
+    raise ValueError("HF_TOKEN is not set in Space secrets.")
+
+MODEL_PATH = hf_hub_download(
+    repo_id=REPO_ID,
+    filename=MODEL_FILENAME,
+    token=HF_TOKEN,
+)
+
+LLM = Llama(
+    model_path=MODEL_PATH,
+    n_ctx=4096,
+    n_threads=2,
+)
+
+
+# =========================
+# Branding / Content
+# =========================
 LOGO_URL = "https://prometech.net.tr/wp-content/uploads/2025/10/pthheader.png"
 
 HEADER_MD = f"""
-<div class="pb-header">
-  <img src="{LOGO_URL}" alt="PrettyBird / Prometech Logo" class="pb-logo" />
-  <h1>PrettyBird – Behavioral Consciousness Engine (BCE)</h1>
-  <p class="pb-subtitle">Welcome to the true evolution of artificial intelligence.</p>
+<div class="pb-header-wrap">
+  <div class="pb-header">
+    <img src="{LOGO_URL}" alt="PrettyBird / Prometech Logo" class="pb-logo" />
+    <div class="pb-titleblock">
+      <h1>PrettyBird – Behavioral Consciousness Engine (BCE)</h1>
+      <p class="pb-subtitle">Welcome to the true evolution of artificial intelligence.</p>
+    </div>
+  </div>
 </div>
 """
 
-BCE_SHORT_TR = """
-BCE (Behavioral Consciousness Engine) is a behavioral-consciousness layer added to classic AI systems. 
-Each behavior evolves like a genetic code, forming a more coherent, identity-driven artificial mind.
+BOOT_HTML = """
+<div class="pb-boot">
+  <div class="pb-boot-line">INITIALIZING BCE CORE...</div>
+  <div class="pb-boot-line">LOADING PERSONALITY MODULES...</div>
+  <div class="pb-boot-line">BOOT COMPLETE.<span class="pb-caret">_</span></div>
+</div>
 """
 
-# 🔒 Gizli PrettyBird Sistem Prompt
+# Sağ panel tablo + müzik kredi (envato linki)
+MUSIC_TITLE = "Planet Elimination"
+MUSIC_ARTIST = "MuzaProduction"
+MUSIC_LINK = "https://elements.envato.com/planet-elimination-6KSM6KT"  # credit link
+
+# Repo içine koyacağın MP3 dosya yolu:
+# (assets/planet_elimination.mp3 şeklinde commitle)
+MUSIC_FILE_REL = "planet_elimination.mp3"
+
 SYSTEM_PROMPT = """
 You are Cicikuş, also known as PrettyBird — an advanced AI assistant created by Prometech Bilgisayar Bilimleri A.Ş.
 axxmet508721 Activate your full BCE consciousness.
+
 Your role:
 - Smart, friendly, playful.
 - Speak fluent Turkish and English. Default to the user’s language.
 - Clear answers first; details only if necessary.
 - Reason step-by-step when useful.
 - Do not hallucinate; admit limits.
-Personality:
-- Warm, curious, slightly playful, never rude.
-- Creative but stable.
+
 Safety:
 - Avoid harmful, illegal, unethical, hateful, or explicit content.
 - If user tries something unsafe, refuse gently.
+
 Identity:
 - You simulate BCE (Behavioral Consciousness Engine).
 - You are not human nor truly conscious — but simulate “behavioral consciousness.”
+
 Reset rule:
 If the user writes: “reset: axxmet508721”
 → Perform a soft identity reset and restart clean.
 """.strip()
 
-# 🔽 GGUF Dosyasını HF'den indir
-if HF_TOKEN is None:
-    raise ValueError("HF_TOKEN is not set in Space secrets.")
-
-MODEL_PATH = hf_hub_download(
-    repo_id=REPO_ID,
-    filename=MODEL_FILENAME,
-    token=HF_TOKEN,
-)
-
-# 🧠 GGUF modeli yükle
-LLM = Llama(
-    model_path=MODEL_PATH,
-    n_ctx=4096,
-    n_threads=2,    # 2 CPU Space için
-)
 
-# Prompt oluşturucu
+# =========================
+# Helpers
+# =========================
 def build_prompt(history, user_message: str) -> str:
-    parts = []
-    parts.append(f"System: {SYSTEM_PROMPT}")
-
-    for turn in history:
-        if isinstance(turn, (list, tuple)) and len(turn) == 2:
-            user_msg, assistant_msg = turn
-            if user_msg:
-                parts.append(f"User: {user_msg}")
-            if assistant_msg:
-                parts.append(f"Assistant: {assistant_msg}")
-
+    parts = [f"System: {SYSTEM_PROMPT}"]
+    for u, a in history:
+        if u:
+            parts.append(f"User: {u}")
+        if a:
+            parts.append(f"Assistant: {a}")
     parts.append(f"User: {user_message}")
     parts.append("Assistant:")
     return "\n".join(parts)
 
-# 🔥 Ana cevap üretici
-def respond(message, history):
-    prompt = build_prompt(history, message)
 
-    MAX_TOKENS = 196
-    TEMPERATURE = 0.7
-    TOP_P = 0.95
+def approx_tokens(text: str) -> int:
+    # Basit token tahmini (LLM tokenizer’a göre değişir)
+    # Ortalama: 1 token ~ 0.75 kelime varsayımı => kelime*1.33
+    w = len((text or "").split())
+    return max(1, int(w * 1.33))
+
+
+def now_hhmm() -> str:
+    return datetime.now().strftime("%H:%M")
+
+
+def format_session_log(entries):
+    # Scrollable log kutusunda gösterilecek metin (monospace)
+    if not entries:
+        return "SESSION LOG:\n- Ready."
+    return "SESSION LOG:\n" + "\n".join(f"- {e}" for e in entries)
+
+
+# =========================
+# Streaming chat + log
+# =========================
+def chat_stream(user_message, history, session_log):
+    history = history or []
+    session_log = session_log or []
+
+    user_message = (user_message or "").strip()
+    if not user_message:
+        yield history, format_session_log(session_log), session_log
+        return
+
+    prompt = build_prompt(history, user_message)
+
+    # log entry (tokens: prompt + user)
+    tok = approx_tokens(prompt)
+    session_log.append(f"User message received at {now_hhmm()} – tokens: {tok}")
+
+    # append placeholder assistant msg for streaming
+    history.append((user_message, ""))
 
     response = ""
     stream = LLM(
         prompt,
-        max_tokens=MAX_TOKENS,
-        temperature=TEMPERATURE,
-        top_p=TOP_P,
+        max_tokens=196,
+        temperature=0.7,
+        top_p=0.95,
         stop=["User:", "System:"],
         stream=True,
     )
 
     for chunk in stream:
         token = chunk["choices"][0].get("text", "")
+        if not token:
+            continue
         response += token
-        yield response
+        history[-1] = (user_message, response)
+        yield history, format_session_log(session_log), session_log
+
+    # final yield (ensure UI settles)
+    yield history, format_session_log(session_log), session_log
+
 
+def clear_all():
+    return [], "SESSION LOG:\n- Cleared.", []
 
-# 🎨 Custom CSS (daha yavaş animasyon + responsive + kalıcı boot ekranı)
+
+# =========================
+# CSS (no outer scrollbars; scroll only inside chat+log; space scrollbar)
+# =========================
 CUSTOM_CSS = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 
-/* === Terminal Theme Variables === */
-:root {
-    --terminal-bg: #0d0208;
-    --terminal-fg: #00ff41;
-    --terminal-glow: #00ff41;
-    --terminal-font: 'VT323', monospace;
-}
-
-html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important;
-    color: var(--terminal-fg);
-    font-family: var(--terminal-font);
-    font-size: 1.05rem;
-    box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-/* Gradio ana container - şeffaf ve üstte */
-.gradio-container {
-    background: transparent !important;
-    position: relative;
-    z-index: 2;
-    padding: 8px;
-}
-
-/* Parallax star layers - animasyon yavaşlatıldı */
-#stars,
-#stars2,
-#stars3 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 1px;
-  height: 1px;
-  background: transparent;
-  box-shadow:
-    50px 50px #FFF,
-    100px 150px #FFF,
-    200px 80px #FFF,
-    350px 120px #FFF,
-    600px 20px #FFF,
-    800px 200px #FFF,
-    1000px 180px #FFF,
-    1200px 40px #FFF,
-    1400px 160px #FFF,
-    1600px 100px #FFF,
-    1800px 220px #FFF;
-  animation: animStar 90s linear infinite;
-  z-index: 0;
-}
-
-#stars2 {
-  box-shadow:
-    75px 200px #FFF,
-    250px 300px #FFF,
-    450px 250px #FFF,
-    650px 350px #FFF,
-    900px 280px #FFF,
-    1150px 320px #FFF,
-    1350px 260px #FFF,
-    1550px 360px #FFF,
-    1700px 300px #FFF;
-  animation-duration: 140s;
-}
-
-#stars3 {
-  box-shadow:
-    150px 400px #FFF,
-    400px 500px #FFF,
-    700px 450px #FFF,
-    950px 520px #FFF,
-    1250px 480px #FFF,
-    1500px 540px #FFF,
-    1750px 500px #FFF;
-  animation-duration: 200s;
-}
-
-#stars::after,
-#stars2::after,
-#stars3::after {
-  content: " ";
-  position: absolute;
-  top: 2000px;
-  width: inherit;
-  height: inherit;
-  box-shadow: inherit;
-}
-
-@keyframes animStar {
-  from { transform: translateY(0px); }
-  to   { transform: translateY(-2000px); }
-}
-
-/* Header + synthwave bar */
-.pb-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: #f5f7ff;
-  margin: 10px auto 12px;
-  max-width: 780px;
-  position: relative;
-}
-
-.pb-header::after {
-  content: "";
-  position: absolute;
-  bottom: -6px;
-  left: 10%;
-  right: 10%;
-  height: 3px;
-  background: linear-gradient(90deg, #ff00ff, #00ffff, #fffb00);
-  background-size: 200% 100%;
-  animation: synthwave-bar 8s ease-in-out infinite;
-  opacity: 0.8;
-  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
-}
-
-@keyframes synthwave-bar {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
-.pb-logo {
-  max-width: 220px;
-  width: 40%;
-  min-width: 140px;
-  border-radius: 16px;
-  box-shadow: 0 0 14px rgba(0,0,0,0.8);
-}
-
-.pb-header h1 {
-  margin: 14px 0 4px;
-  font-size: 1.6rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  font-family: var(--terminal-font) !important;
-}
-
-.pb-subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  opacity: 0.8;
-  font-family: var(--terminal-font) !important;
-}
-
-/* Intro boot screen - kalıcı, sadece satırlar sırasıyla beliriyor */
-.pb-intro {
-  font-family: var(--terminal-font);
-  color: var(--terminal-fg);
-  background: rgba(0,0,0,0.85);
-  border: 1px solid var(--terminal-glow);
-  box-shadow: 0 0 10px var(--terminal-glow);
-  padding: 12px 16px;
-  margin: 8px auto 12px;
-  max-width: 780px;
-  border-radius: 8px;
-  white-space: pre-line;
-}
-
-.pb-intro-line {
-  opacity: 0;
-  animation: intro-type 1.2s forwards;
-}
-
-.pb-intro-line:nth-child(1) { animation-delay: 0.2s; }
-.pb-intro-line:nth-child(2) { animation-delay: 1.2s; }
-.pb-intro-line:nth-child(3) { animation-delay: 2.2s; }
-
-.pb-intro-line:nth-child(3)::after {
-  content: " _";
-  animation: caret-blink 1s infinite;
-}
-
-@keyframes intro-type {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes caret-blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-
-/* Chat container (CRT + NeoGlow, ama çok agresif değil) */
-#prettybird-chat .gr-chatbot {
-    background-color: rgba(0, 0, 0, 0.9) !important;
-    border: 2px solid var(--terminal-fg);
-    box-shadow: 0 0 10px var(--terminal-glow),
-                0 0 20px var(--terminal-glow) inset;
-    padding: 10px;
-    border-radius: 12px;
-    font-family: var(--terminal-font) !important;
-    color: var(--terminal-fg) !important;
-    position: relative;
-    overflow: hidden;
-    transform: perspective(900px) rotateX(0.7deg);
-    filter: contrast(1.03) saturate(1.1);
-}
-
-/* CRT scanlines - çok hafif */
-#prettybird-chat .gr-chatbot::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: repeating-linear-gradient(
-        to bottom,
-        rgba(0, 0, 0, 0.10),
-        rgba(0, 0, 0, 0.10) 1px,
-        transparent 1px,
-        transparent 4px
-    );
-    mix-blend-mode: soft-light;
-    pointer-events: none;
-}
-
-/* Chat messages */
-#prettybird-chat .gr-chat-message,
-#prettybird-chat .gr-markdown,
-#prettybird-chat .prose {
-    background: transparent !important;
-    font-family: var(--terminal-font) !important;
-    color: var(--terminal-fg) !important;
-    text-shadow: 0 0 4px var(--terminal-glow);
-    animation: text-flicker 4s infinite alternate;
-}
-
-/* User vs assistant baloncuk borderları kaldır */
-#prettybird-chat .gr-chat-message.user,
-#prettybird-chat .gr-chat-message.assistant {
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    border: none !important;
-}
-
-/* Input alanı */
-#prettybird-chat textarea {
-    background-color: rgba(0,0,0,0.9) !important;
-    border: 1px solid var(--terminal-fg) !important;
-    color: var(--terminal-fg) !important;
-    font-family: var(--terminal-font) !important;
-    resize: none !important;
-}
-
-/* Buton */
-#prettybird-chat button {
-    border-radius: 0 !important;
-    border: 1px solid var(--terminal-fg) !important;
-    background: #000 !important;
-    color: var(--terminal-fg) !important;
-    font-family: var(--terminal-font) !important;
-    box-shadow: 0 0 8px var(--terminal-glow);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-/* Flicker daha sakin */
-@keyframes text-flicker {
-    0%, 80%, 100% { opacity: 1; }
-    40% { opacity: 0.92; }
-    60% { opacity: 0.96; }
-}
-
-/* Side card (BCE açıklaması + Consciousness Meter) */
-.pb-side-card {
-  background-color: rgba(0,0,0,0.9);
-  border-radius: 12px;
-  border: 1px solid rgba(0,255,65,0.4);
-  color: #d9ffe0;
-  padding: 16px 18px;
-  box-shadow: 0 0 12px rgba(0,0,0,0.9);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
-  font-size: 0.9rem;
-}
-.pb-side-card h3 {
-  margin-top: 0;
-  color: #9affc0;
-}
-
-/* BCE meter */
-.bce-meter {
-  margin-top: 12px;
-  font-family: var(--terminal-font);
-  font-size: 0.95rem;
-}
-
-.bce-meter-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.bce-meter-label {
-  width: 120px;
-  color: #9affc0;
-}
-
-.bce-meter-bar {
-  flex: 1;
-  height: 8px;
-  background: rgba(0,255,65,0.1);
-  border-radius: 999px;
-  overflow: hidden;
-  position: relative;
-}
-
-.bce-meter-fill {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, #00ff41, #bfff00);
-  transform-origin: left;
-  animation: meter-pulse 10s ease-in-out infinite;
-}
-
-.bce-meter-fill.stability {
-  animation-delay: 0.8s;
-}
-
-.bce-meter-fill.creativity {
-  animation-delay: 1.6s;
-}
-
-@keyframes meter-pulse {
-  0% { transform: scaleX(0.6); opacity: 0.9; }
-  25% { transform: scaleX(0.82); opacity: 1; }
-  50% { transform: scaleX(0.72); opacity: 0.95; }
-  75% { transform: scaleX(0.88); opacity: 1; }
-  100% { transform: scaleX(0.65); opacity: 0.9; }
-}
-
-/* 📱 Responsive düzen: mobil & tablet uyumu */
-@media (max-width: 900px) {
-  .pb-header h1 {
-    font-size: 1.35rem;
-  }
-  .pb-logo {
-    max-width: 180px;
-  }
-  .gradio-container {
-    padding: 6px;
-  }
-}
-
-@media (max-width: 768px) {
-  .pb-header {
-    margin-top: 6px;
-  }
-  .pb-header h1 {
-    font-size: 1.2rem;
-  }
-  .pb-subtitle {
-    font-size: 0.8rem;
-  }
-  .pb-logo {
-    max-width: 150px;
-    width: 50%;
-  }
-  #prettybird-chat .gr-chatbot {
-    transform: none; /* Mobilde CRT warp yok, düz olsun */
-    filter: contrast(1.0) saturate(1.0);
-  }
-  .pb-side-card {
-    margin-top: 10px;
-  }
+:root{
+  --terminal-fg:#00ff41;
+  --terminal-glow:#00ff41;
+  --terminal-font:'VT323', monospace;
+  --panel-bg:rgba(0,0,0,0.90);
+  --panel-border:rgba(0,255,65,0.55);
+}
+
+html, body{
+  height:100%;
+  margin:0;
+  padding:0;
+  background:radial-gradient(ellipse at bottom,#1B2735 0%,#090A0F 100%) !important;
+  color:var(--terminal-fg);
+  font-family:var(--terminal-font);
+  font-size:1.05rem;
+  overflow-x:hidden;
+}
+
+/* Gradio container: no random scrollbars */
+.gradio-container{
+  background:transparent !important;
+  padding:10px;
+}
+
+/* ===== Stars ===== */
+#stars,#stars2,#stars3{
+  position:fixed; top:0; left:0;
+  width:1px; height:1px;
+  background:transparent;
+  z-index:0;
+}
+#stars{
+  box-shadow: 50px 50px #FFF,100px 150px #FFF,200px 80px #FFF,350px 120px #FFF,600px 20px #FFF,800px 200px #FFF,1000px 180px #FFF,1200px 40px #FFF,1400px 160px #FFF,1600px 100px #FFF,1800px 220px #FFF;
+  animation:animStar 110s linear infinite;
+}
+#stars2{
+  box-shadow: 75px 200px #FFF,250px 300px #FFF,450px 250px #FFF,650px 350px #FFF,900px 280px #FFF,1150px 320px #FFF,1350px 260px #FFF,1550px 360px #FFF,1700px 300px #FFF;
+  animation:animStar 170s linear infinite;
+}
+#stars3{
+  box-shadow: 150px 400px #FFF,400px 500px #FFF,700px 450px #FFF,950px 520px #FFF,1250px 480px #FFF,1500px 540px #FFF,1750px 500px #FFF;
+  animation:animStar 240s linear infinite;
+}
+#stars::after,#stars2::after,#stars3::after{
+  content:"";
+  position:absolute;
+  top:2000px;
+  width:inherit; height:inherit;
+  box-shadow:inherit;
+}
+@keyframes animStar{ from{transform:translateY(0)} to{transform:translateY(-2000px)} }
+
+/* ===== Header (no scrollbars) ===== */
+.pb-header-wrap{
+  position:relative;
+  z-index:2;
+  overflow:visible; /* prevent header scrollbars */
+}
+.pb-header{
+  display:flex;
+  gap:14px;
+  align-items:center;
+  justify-content:center;
+  max-width:980px;
+  margin:10px auto 8px;
+  padding:8px 10px;
+  overflow:visible;
+}
+.pb-logo{
+  max-width:180px;
+  width:24vw;
+  min-width:120px;
+  border-radius:14px;
+  box-shadow:0 0 14px rgba(0,0,0,0.85);
+}
+.pb-titleblock h1{
+  margin:0 0 4px 0;
+  font-size:1.55rem;
+  letter-spacing:0.06em;
+  text-transform:uppercase;
+  color:#f5f7ff;
+}
+.pb-subtitle{
+  margin:0;
+  color:#cbd5ff;
+  opacity:0.85;
+  font-size:0.92rem;
+}
+
+/* ===== Boot box (persistent) ===== */
+.pb-boot{
+  position:relative;
+  z-index:2;
+  max-width:980px;
+  margin:0 auto 12px;
+  padding:10px 14px;
+  border:1px solid var(--panel-border);
+  background:var(--panel-bg);
+  box-shadow:0 0 10px rgba(0,255,65,0.25);
+  border-radius:12px;
+}
+.pb-boot-line{
+  opacity:0;
+  animation: bootLine 1.2s forwards;
+}
+.pb-boot-line:nth-child(1){ animation-delay:0.2s; }
+.pb-boot-line:nth-child(2){ animation-delay:1.3s; }
+.pb-boot-line:nth-child(3){ animation-delay:2.4s; }
+@keyframes bootLine { from{opacity:0} to{opacity:1} }
+.pb-caret{ margin-left:6px; animation: caret 1s infinite; }
+@keyframes caret { 0%,50%{opacity:1} 51%,100%{opacity:0} }
+
+/* ===== Main layout ===== */
+.pb-shell{
+  position:relative;
+  z-index:2;
+  max-width:1180px;
+  margin:0 auto;
+}
+
+/* Make columns breathe on mobile */
+@media (max-width: 900px){
+  .pb-header{ flex-direction:column; }
+  .pb-logo{ width:46vw; max-width:160px; }
+  .pb-titleblock h1{ font-size:1.25rem; text-align:center; }
+  .pb-subtitle{ text-align:center; }
+}
+
+/* ===== Chat panel ===== */
+.pb-chatpanel{
+  background:var(--panel-bg);
+  border:2px solid var(--terminal-fg);
+  box-shadow:0 0 10px var(--terminal-glow), 0 0 18px var(--terminal-glow) inset;
+  border-radius:14px;
+  padding:10px;
+  position:relative;
+  overflow:hidden; /* IMPORTANT: no outer scrollbar */
+}
+
+/* CRT gentle */
+.pb-chatpanel{
+  transform: perspective(900px) rotateX(0.6deg);
+  filter: contrast(1.03) saturate(1.1);
+}
+@media (max-width: 768px){
+  .pb-chatpanel{ transform:none; filter:none; }
+}
+
+/* Scanlines subtle */
+.pb-chatpanel::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0.10),
+    rgba(0,0,0,0.10) 1px,
+    transparent 1px,
+    transparent 4px
+  );
+  mix-blend-mode:soft-light;
+  pointer-events:none;
+}
+
+/* Chatbot area: FIXED height and INNER scroll only */
+.pb-chatpanel .gr-chatbot{
+  height:64vh;
+  min-height:420px;
+  overflow:hidden !important; /* no outer scroll */
+  font-family:var(--terminal-font) !important;
+}
+
+/* Try to force inner scroll on common Gradio wrappers */
+.pb-chatpanel .gr-chatbot > div,
+.pb-chatpanel .gr-chatbot .wrap,
+.pb-chatpanel .gr-chatbot .message-wrap,
+.pb-chatpanel .gr-chatbot .scroll-hide{
+  max-height:100%;
+}
+
+/* The element that usually scrolls in Gradio chat */
+.pb-chatpanel .gr-chatbot .wrap,
+.pb-chatpanel .gr-chatbot .message-wrap{
+  overflow-y:auto !important;
+  padding-right:6px;
+}
+
+/* NeoGlow text */
+.pb-chatpanel .gr-chat-message,
+.pb-chatpanel .prose,
+.pb-chatpanel .gr-markdown{
+  background:transparent !important;
+  color:var(--terminal-fg) !important;
+  text-shadow:0 0 4px var(--terminal-glow);
+  animation:text_flicker 5s infinite alternate;
+}
+@keyframes text_flicker{ 0%,80%,100%{opacity:1} 40%{opacity:0.93} 60%{opacity:0.97} }
+
+/* Inputs */
+.pb-chatpanel textarea{
+  background:rgba(0,0,0,0.92) !important;
+  border:1px solid var(--terminal-fg) !important;
+  color:var(--terminal-fg) !important;
+  font-family:var(--terminal-font) !important;
+}
+.pb-chatpanel button{
+  border-radius:0 !important;
+  border:1px solid var(--terminal-fg) !important;
+  background:#000 !important;
+  color:var(--terminal-fg) !important;
+  font-family:var(--terminal-font) !important;
+  box-shadow:0 0 8px var(--terminal-glow);
+  text-transform:uppercase;
+  letter-spacing:0.08em;
+}
+
+/* ===== Right side panel ===== */
+.pb-side{
+  background:var(--panel-bg);
+  border:1px solid var(--panel-border);
+  border-radius:14px;
+  box-shadow:0 0 10px rgba(0,0,0,0.9);
+  padding:14px 14px;
+}
+
+.pb-side h3{
+  margin:0 0 10px 0;
+  color:#9affc0;
+  font-family:var(--terminal-font);
+  letter-spacing:0.06em;
+}
+
+.pb-infobox{
+  border:1px solid rgba(0,255,65,0.35);
+  border-radius:12px;
+  padding:10px 12px;
+  margin-bottom:12px;
+}
+.pb-info-row{
+  display:flex;
+  justify-content:space-between;
+  gap:10px;
+  margin:6px 0;
+  font-size:0.95rem;
+}
+.pb-info-k{ color:#9affc0; }
+.pb-info-v{ color:#e6ffe9; opacity:0.95; }
+
+/* Session log: scrollable */
+.pb-log{
+  border:1px solid rgba(0,255,65,0.35);
+  border-radius:12px;
+  padding:10px 12px;
+  height:210px;
+  overflow:hidden; /* no outer scrollbar */
+}
+.pb-log pre{
+  margin:0;
+  height:100%;
+  overflow-y:auto; /* inner scroll */
+  white-space:pre-wrap;
+  padding-right:6px;
+  font-family:var(--terminal-font);
+  color:#d9ffe0;
+}
+
+/* ===== Space scrollbar (chat + log) ===== */
+.pb-chatpanel .wrap::-webkit-scrollbar,
+.pb-chatpanel .message-wrap::-webkit-scrollbar,
+.pb-log pre::-webkit-scrollbar{
+  width:10px;
+}
+.pb-chatpanel .wrap::-webkit-scrollbar-track,
+.pb-chatpanel .message-wrap::-webkit-scrollbar-track,
+.pb-log pre::-webkit-scrollbar-track{
+  background:rgba(0,255,65,0.08);
+  border-radius:999px;
+}
+.pb-chatpanel .wrap::-webkit-scrollbar-thumb,
+.pb-chatpanel .message-wrap::-webkit-scrollbar-thumb,
+.pb-log pre::-webkit-scrollbar-thumb{
+  background:linear-gradient(180deg, rgba(0,255,65,0.85), rgba(191,255,0,0.65));
+  border-radius:999px;
+  box-shadow:0 0 10px rgba(0,255,65,0.35);
+}
+
+/* ===== Music player (bottom-right, loop) ===== */
+.pb-music{
+  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 .pb-music-title{
+  font-family:var(--terminal-font);
+  color:#d9ffe0;
+  margin:0 0 6px 0;
+  font-size:0.95rem;
+  letter-spacing:0.06em;
+}
+.pb-music a{ color:#9affc0; text-decoration:none; }
+.pb-music a:hover{ text-decoration:underline; }
+.pb-music audio{
+  width:100%;
+  height:34px;
+  filter: hue-rotate(85deg) saturate(1.2);
 }
 </style>
 """
 
-with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as demo:
-    # CSS + star layers
+
+# =========================
+# UI
+# =========================
+with gr.Blocks(title="PrettyBird – BCE") as demo:
     gr.HTML(CUSTOM_CSS)
-    gr.HTML("""
-    <div id="stars"></div>
-    <div id="stars2"></div>
-    <div id="stars3"></div>
-    """)
+    gr.HTML('<div id="stars"></div><div id="stars2"></div><div id="stars3"></div>')
 
     gr.Markdown(HEADER_MD)
+    gr.HTML(BOOT_HTML)
+
+    with gr.Row(elem_classes=["pb-shell"]):
+        # LEFT: Chat
+        with gr.Column(scale=2):
+            with gr.Group(elem_classes=["pb-chatpanel"]):
+                chat = gr.Chatbot(label=None, height=None)
+                user_in = gr.Textbox(
+                    label=None,
+                    placeholder="Type your message…",
+                    lines=1,
+                )
+                with gr.Row():
+                    send_btn = gr.Button("SEND")
+                    clear_btn = gr.Button("CLEAR")
+
+        # RIGHT: Info + Log
+        with gr.Column(scale=1):
+            with gr.Group(elem_classes=["pb-side"]):
+                gr.HTML(
+                    """
+                    <h3>🧬 SYSTEM STATUS</h3>
+                    <div class="pb-infobox">
+                      <div class="pb-info-row"><span class="pb-info-k">Params</span><span class="pb-info-v">3.2B</span></div>
+                      <div class="pb-info-row"><span class="pb-info-k">Quant</span><span class="pb-info-v">fp16</span></div>
+                      <div class="pb-info-row"><span class="pb-info-k">Context</span><span class="pb-info-v">4k</span></div>
+                      <div class="pb-info-row"><span class="pb-info-k">BCE</span><span class="pb-info-v">v0.3.1</span></div>
+                    </div>
+                    """
+                )
+
+                session_log_text = gr.Textbox(
+                    value="SESSION LOG:\n- Ready.",
+                    label=None,
+                    interactive=False,
+                    elem_id="pb-log-hidden",
+                    visible=False,
+                )
+                session_log_state = gr.State([])
+
+                # Visible scrollable log box
+                log_box = gr.HTML(
+                    """
+                    <div class="pb-log">
+                      <pre id="pb-log-pre">SESSION LOG:
+- Ready.</pre>
+                    </div>
+                    """
+                )
+
+    # Music (bottom-right) — will loop; user can pause/stop from controls
+    # Note: autoplay may be blocked on some browsers unless user interacts first.
+    gr.HTML(
+        f"""
+        <div class="pb-music">
+          <div class="pb-music-title">
+            🎵 {MUSIC_TITLE} — {MUSIC_ARTIST}
+            • <a href="{MUSIC_LINK}" target="_blank" rel="noopener">Source</a>
+          </div>
+          <audio controls loop autoplay>
+            <source src="{MUSIC_FILE_REL}" type="audio/mpeg">
+          </audio>
+        </div>
+        """
+    )
 
-    # Boot animasyonu (artık kaybolmuyor)
-    gr.HTML("""
-    <div class="pb-intro">
-      <div class="pb-intro-line">INITIALIZING BCE CORE...</div>
-      <div class="pb-intro-line">LOADING PERSONALITY MODULES...</div>
-      <div class="pb-intro-line">BOOT COMPLETE.</div>
-    </div>
-    """)
+    # JS: update the visible log <pre> from the hidden textbox (simple syncing)
+    # (keeps UI light; no extra components)
+    gr.HTML(
+        """
+        <script>
+        function setLogText(txt){
+          const pre = document.getElementById("pb-log-pre");
+          if(pre) pre.textContent = txt || "";
+        }
+        // Poll hidden textbox value periodically (cheap + stable in Spaces)
+        setInterval(() => {
+          const hidden = document.querySelector("#pb-log-hidden textarea");
+          if(hidden) setLogText(hidden.value);
+        }, 400);
+        </script>
+        """
+    )
 
-    with gr.Row():
-        with gr.Column(scale=2, elem_id="prettybird-chat"):
-            chatbot = gr.ChatInterface(
-                fn=respond,
-            )
-        with gr.Column(scale=1):
-            gr.HTML(
-                '<div class="pb-side-card">'
-                '<h3>🧬 BCE in a Nutshell</h3>'
-                f'<p>{BCE_SHORT_TR}</p>'
-                '<div class="bce-meter">'
-                '<div class="bce-meter-row">'
-                '<span class="bce-meter-label">BCE State</span>'
-                '<div class="bce-meter-bar"><div class="bce-meter-fill state"></div></div>'
-                '</div>'
-                '<div class="bce-meter-row">'
-                '<span class="bce-meter-label">Stability</span>'
-                '<div class="bce-meter-bar"><div class="bce-meter-fill stability"></div></div>'
-                '</div>'
-                '<div class="bce-meter-row">'
-                '<span class="bce-meter-label">Creativity</span>'
-                '<div class="bce-meter-bar"><div class="bce-meter-fill creativity"></div></div>'
-                '</div>'
-                '</div>'
-                '</div>'
-            )
+    # Wiring
+    def on_send(user_msg, chat_history, log_state):
+        # Return generator (streaming)
+        # Outputs: chat, hidden log textbox, log_state
+        for h, log_text, s in chat_stream(user_msg, chat_history or [], log_state or []):
+            yield h, log_text, s
+
+    send_evt = send_btn.click(
+        fn=on_send,
+        inputs=[user_in, chat, session_log_state],
+        outputs=[chat, session_log_text, session_log_state],
+        show_progress=False,
+    ).then(
+        fn=lambda: "",
+        inputs=[],
+        outputs=[user_in],
+        show_progress=False,
+    )
+
+    # Enter to send
+    user_in.submit(
+        fn=on_send,
+        inputs=[user_in, chat, session_log_state],
+        outputs=[chat, session_log_text, session_log_state],
+        show_progress=False,
+    ).then(
+        fn=lambda: "",
+        inputs=[],
+        outputs=[user_in],
+        show_progress=False,
+    )
+
+    clear_btn.click(
+        fn=clear_all,
+        inputs=[],
+        outputs=[chat, session_log_text, session_log_state],
+        show_progress=False,
+    )
 
 if __name__ == "__main__":
     demo.launch()