Update app.py

app.py

@@ -119,78 +119,100 @@ CUSTOM_CSS = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 
-/* Global reset-ish */
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
+/* === Terminal Theme Variables === */
+:root {
+    --terminal-bg: #0d0208;
+    --terminal-fg: #00ff41;
+    --terminal-glow: #00ff41;
+    --terminal-font: 'VT323', monospace;
 }
 
-/* Starfield background (inspired by parallax stars) */
-.pb-stars,
-.pb-stars2,
-.pb-stars3 {
+/* Body / root */
+html, body, .gradio-container {
+    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.1rem;
+    box-sizing: border-box;
+}
+
+/* Parallax star layers (CSS versiyon) */
+#stars,
+#stars2,
+#stars3 {
   position: fixed;
   top: 0;
   left: 0;
-  width: 200%;
-  height: 200%;
-  background-repeat: repeat;
-  pointer-events: none;
+  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 60s linear infinite;
   z-index: -3;
 }
 
-.pb-stars {
-  background-image:
-    radial-gradient(2px 2px at 10px 10px, #fff, transparent),
-    radial-gradient(2px 2px at 50px 80px, #fff, transparent),
-    radial-gradient(2px 2px at 90px 30px, #fff, transparent),
-    radial-gradient(2px 2px at 130px 60px, #fff, transparent),
-    radial-gradient(2px 2px at 170px 120px, #fff, transparent);
-  background-size: 200px 200px;
-  animation: pb-animStar 60s linear infinite;
-}
-
-.pb-stars2 {
-  background-image:
-    radial-gradient(3px 3px at 20px 40px, #bbb, transparent),
-    radial-gradient(3px 3px at 80px 100px, #bbb, transparent),
-    radial-gradient(3px 3px at 140px 50px, #bbb, transparent),
-    radial-gradient(3px 3px at 160px 160px, #bbb, transparent);
-  background-size: 250px 250px;
-  animation: pb-animStar 90s linear infinite;
-}
-
-.pb-stars3 {
-  background-image:
-    radial-gradient(4px 4px at 30px 120px, #777, transparent),
-    radial-gradient(4px 4px at 100px 40px, #777, transparent),
-    radial-gradient(4px 4px at 180px 100px, #777, transparent);
-  background-size: 300px 300px;
-  animation: pb-animStar 140s 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-duration: 100s;
+  z-index: -4;
 }
 
-@keyframes pb-animStar {
-  from { transform: translateY(0); }
-  to   { transform: translateY(-100vh); }
+#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: 140s;
+  z-index: -5;
 }
 
-/* Cosmic gradient background */
-html, body, .gradio-container {
-  height: 100%;
-  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important;
+#stars::after,
+#stars2::after,
+#stars3::after {
+  content: " ";
+  position: absolute;
+  top: 2000px;
+  width: inherit;
+  height: inherit;
+  box-shadow: inherit;
 }
 
-/* Gradio container transparent so stars show through */
-.gradio-container {
-  background-color: transparent !important;
+@keyframes animStar {
+  from { transform: translateY(0px); }
+  to   { transform: translateY(-2000px); }
 }
 
-/* Header styling */
+/* Header */
 .pb-header {
   text-align: center;
   color: #f5f7ff;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
   margin-bottom: 12px;
 }
 
@@ -213,63 +235,69 @@ html, body, .gradio-container {
   opacity: 0.8;
 }
 
-/* Terminal-style chat container */
-#prettybird-chat {
-  font-family: 'VT323', monospace;
-  color: #00ff41;
-}
+/* === Terminal Container Style for Gradio Chat === */
 
 #prettybird-chat .gr-chatbot {
-  background-color: rgba(0, 0, 0, 0.9) !important;
-  border: 2px solid #00ff41;
-  box-shadow:
-    0 0 10px #00ff41,
-    0 0 25px rgba(0, 255, 65, 0.4) inset;
-  border-radius: 10px;
+    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;
 }
 
-/* Make messages look more like terminal text */
+/* Chat messages */
 #prettybird-chat .gr-chat-message,
-#prettybird-chat .prose,
-#prettybird-chat .gr-markdown {
-  font-family: 'VT323', monospace !important;
-  color: #00ff41 !important;
+#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 5px var(--terminal-glow);
+    animation: text-flicker 2s infinite alternate;
 }
 
+/* User vs assistant baloncuk borderları kaldır, düz terminal gibi olsun */
 #prettybird-chat .gr-chat-message.user,
-#prettybird-chat .gr-chat-message.assistant,
-#prettybird-chat .gr-chat-message.system {
-  background: transparent !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
+#prettybird-chat .gr-chat-message.assistant {
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    border: none !important;
 }
 
-/* Input area */
+/* Input alanı */
 #prettybird-chat textarea {
-  background: rgba(0,0,0,0.85) !important;
-  border: 1px solid #00ff41 !important;
-  color: #00ff41 !important;
-  font-family: 'VT323', monospace !important;
+    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 #00ff41 !important;
-  background: #000 !important;
-  box-shadow: 0 0 8px #00ff41;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+    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 BCE card */
+/* Side card (BCE açıklaması) */
 .pb-side-card {
-  background: rgba(0,0,0,0.75);
+  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 {
@@ -277,27 +305,27 @@ html, body, .gradio-container {
   color: #9affc0;
 }
 
-/* Scrollbars subtle neon */
-#prettybird-chat .gr-chatbot::-webkit-scrollbar,
-.pb-side-card::-webkit-scrollbar {
-  width: 6px;
-}
-#prettybird-chat .gr-chatbot::-webkit-scrollbar-thumb,
-.pb-side-card::-webkit-scrollbar-thumb {
-  background: #00ff41;
+/* Flicker + cursor vibes */
+@keyframes text-flicker {
+    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+        opacity: 1;
+    }
+    20%, 24%, 55% {
+        opacity: 0.85;
+    }
 }
 </style>
 """
 
 with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as demo:
-    # Inject CSS + background stars
+    # CSS + star layers
     gr.HTML(CUSTOM_CSS)
     gr.HTML("""
-    <div class="pb-stars"></div>
-    <div class="pb-stars2"></div>
-    <div class="pb-stars3"></div>
+    <div id="stars"></div>
+    <div id="stars2"></div>
+    <div id="stars3"></div>
     """)
-    
+
     gr.Markdown(HEADER_MD)
 
     with gr.Row():
@@ -311,5 +339,6 @@ with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as
                     + BCE_SHORT_TR +
                     '</p></div>')
 
+
 if __name__ == "__main__":
     demo.launch()