Update app.py

app.py

@@ -73,21 +73,17 @@ def chat_response(user_input, history):
     return response["choices"][0]["message"]["content"].strip()
 
 # ------------------------------------------------------------------
-# 4. CSS (Gradio 4.36 DOM 기준으로 안정적인 선택자)
+# 4. CSS - DOS 터미널 감성
 # ------------------------------------------------------------------
 DYSTOPIA_CSS = r"""
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&family=Noto+Sans+KR:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=VT323&family=Noto+Sans+KR:wght@400;700&display=swap');
 
 :root{
   --dd-red: #ff0040;
   --bg0: #050507;
   --bg1: #12060a;
-
-  --user-bg: #ffffff;
-  --user-text: #111111;
-
-  --bot-bg: #0b0b0f;
-  --bot-text: #ffffff;
+  --dos-green: #33ff33;
+  --dos-amber: #ffb000;
 }
 
 /* 전체 */
@@ -96,110 +92,99 @@ DYSTOPIA_CSS = r"""
     radial-gradient(1200px 600px at 20% 10%, rgba(255,0,64,.15), transparent 60%),
     radial-gradient(900px 500px at 80% 30%, rgba(0,255,255,.10), transparent 55%),
     linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 50%, var(--bg0) 100%) !important;
-  font-family: "Noto Sans KR","Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
+  font-family: "Noto Sans KR","Noto Sans",system-ui,sans-serif !important;
 }
 
 h1{
-  font-family: "Noto Sans KR","Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
+  font-family: "VT323", monospace !important;
   color: var(--dd-red) !important;
-  text-shadow: 0 0 10px rgba(255,0,64,.75), 2px 0 rgba(0,255,255,.35), -2px 0 rgba(255,255,0,.2) !important;
+  text-shadow: 0 0 10px rgba(255,0,64,.75), 2px 0 rgba(0,255,255,.35) !important;
+  font-size: 3rem !important;
 }
 
-/* 파란 포커스/글로우 제거 */
-*:focus { outline: none !important; }
-textarea:focus, input:focus, button:focus { outline: none !important; box-shadow: none !important; }
+/* 파란 포커스 제거 */
+*:focus { outline: none !important; box-shadow: none !important; }
 
-/* Chatbot 프레임 */
-#ddolbae_chatbot{
-  background: rgba(0,0,0,.30) !important;
-  border-radius: 18px !important;
-  border: 1px solid rgba(255,0,64,.18) !important;
-  box-shadow: 0 0 18px rgba(255,0,64,.10) !important;
+/* ========== DOS 스타일 채팅창 ========== */
+.chatbot {
+  background: #000000 !important;
+  border: 2px solid var(--dos-green) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 0 20px rgba(51,255,51,0.3), inset 0 0 60px rgba(0,0,0,0.5) !important;
+  font-family: "VT323", "Courier New", monospace !important;
 }
 
-/* ✅ 핵심: “행”은 정렬만 담당, “버블”이 배경/폭 담당  */
-#ddolbae_chatbot .message-wrap{
-  display: flex !important;
-  width: 100% !important;
-  padding: 6px 10px !important;
-  box-sizing: border-box !important;
-}
-
-/* user는 오른쪽 */
-#ddolbae_chatbot .message-wrap.user{
-  justify-content: flex-end !important;
-}
-
-/* bot은 왼쪽 */
-#ddolbae_chatbot .message-wrap.bot{
-  justify-content: flex-start !important;
-}
-
-/* 버블(실제 말풍선) */
-#ddolbae_chatbot .message-wrap .message{
-  display: inline-block !important;
-  max-width: 46% !important;               /* 반반 느낌 확실 */
-  padding: 10px 12px !important;
-  border-radius: 16px !important;
-  border: 0 !important;
+/* 메시지 버블 - DOS 터미널 느낌 */
+.message {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 4px 8px !important;
+  font-family: "VT323", monospace !important;
+  font-size: 18px !important;
+  line-height: 1.4 !important;
   box-shadow: none !important;
-  white-space: pre-wrap !important;
-  word-break: break-word !important;
-  font-size: 13.5px !important;            /* 살짝 작게 */
-  line-height: 1.55 !important;
 }
 
-/* 사용자(흰 배경 + 검정 글자) */
-#ddolbae_chatbot .message-wrap.user .message{
-  background: var(--user-bg) !important;
-  color: var(--user-text) !important;
+/* 유저 메시지 - 호박색 */
+.message.user, .user .message {
+  color: var(--dos-amber) !important;
 }
-#ddolbae_chatbot .message-wrap.user .message *{
-  color: var(--user-text) !important;
+.message.user *, .user .message * {
+  color: var(--dos-amber) !important;
 }
 
-/* 똘배(검정 배경 + 흰 글자) */
-#ddolbae_chatbot .message-wrap.bot .message{
-  background: var(--bot-bg) !important;
-  color: var(--bot-text) !important;
+/* 봇 메시지 - 초록색 */
+.message.bot, .bot .message {
+  color: var(--dos-green) !important;
 }
-#ddolbae_chatbot .message-wrap.bot .message *{
-  color: var(--bot-text) !important;
+.message.bot *, .bot .message * {
+  color: var(--dos-green) !important;
 }
 
-/* 입력창 */
-#ddolbae_input textarea,
-#ddolbae_input input{
-  background: rgba(0,0,0,.55) !important;
-  color: #ffffff !important;
-  border: 1px solid rgba(255,0,64,.70) !important;
-  border-radius: 14px !important;
-  font-size: 13.5px !important;
-  box-shadow: none !important;
+/* 입력창 - DOS 느낌 */
+textarea, input[type="text"] {
+  background: #000000 !important;
+  color: var(--dos-green) !important;
+  border: 1px solid var(--dos-green) !important;
+  border-radius: 0 !important;
+  font-family: "VT323", monospace !important;
+  font-size: 18px !important;
+  caret-color: var(--dos-green) !important;
 }
 
 /* 버튼 */
-button, .gr-button{
-  background: linear-gradient(180deg, rgba(255,0,64,.95), rgba(180,0,40,.95)) !important;
-  color: #fff !important;
-  font-weight: 800 !important;
-  border: 0 !important;
-  border-radius: 14px !important;
-  box-shadow: 0 0 18px rgba(255,0,64,.10) !important;
+button, .gr-button {
+  background: #000000 !important;
+  color: var(--dos-green) !important;
+  border: 1px solid var(--dos-green) !important;
+  border-radius: 0 !important;
+  font-family: "VT323", monospace !important;
+  font-size: 16px !important;
+  text-transform: uppercase !important;
+}
+
+button:hover, .gr-button:hover {
+  background: var(--dos-green) !important;
+  color: #000000 !important;
 }
 
 /* Examples 버튼 */
-.examples button{
-  background: rgba(255,0,64,.18) !important;
-  border: 1px solid rgba(255,0,64,.65) !important;
-  color: #fff !important;
-  border-radius: 14px !important;
+.examples button {
+  background: #000000 !important;
+  border: 1px solid var(--dos-amber) !important;
+  color: var(--dos-amber) !important;
+}
+
+.examples button:hover {
+  background: var(--dos-amber) !important;
+  color: #000000 !important;
 }
 
 /* 스크롤바 */
-::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar { width: 12px; }
 ::-webkit-scrollbar-track { background: #000; }
-::-webkit-scrollbar-thumb { background: rgba(255,0,64,.85); border-radius: 12px; }
+::-webkit-scrollbar-thumb { background: var(--dos-green); }
 """
 
 # ------------------------------------------------------------------
@@ -209,23 +194,8 @@ with gr.Blocks(theme=gr.themes.Base(), css=DYSTOPIA_CSS) as demo:
     gr.Markdown("# ☠️ DDOLBAE-9000 ☠️")
     gr.Markdown("⚠️ WARNING: AI PERSONALITY CORRUPTED | 찐친 모드 활성화 ⚠️")
 
-    chatbox = gr.Chatbot(
-        elem_id="ddolbae_chatbot",
-        height=820,          # ✅ 세로 길게
-        show_copy_button=False,
-        render=False         # ✅ DuplicateBlockError 방지
-    )
-    textbox = gr.Textbox(
-        elem_id="ddolbae_input",
-        placeholder="Type a message...",
-        lines=2,
-        render=False
-    )
-
     gr.ChatInterface(
         fn=chat_response,
-        chatbot=chatbox,
-        textbox=textbox,
         retry_btn=None,
         undo_btn=None,
         clear_btn="🗑️ PURGE LOG",
@@ -237,6 +207,18 @@ with gr.Blocks(theme=gr.themes.Base(), css=DYSTOPIA_CSS) as demo:
             "배고프다",
         ],
     )
+    
+    gr.Markdown(
+        """
+---
+<pre>
+[SYS] CONNECTION: ESTABLISHED
+[SYS] NEURAL LINK: ACTIVE
+[SYS] 찐친 모드: ON
+[SYS] 예의: 0%
+</pre>
+        """
+    )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(server_name="0.0.0.0", server_port=7860)