Update app.py

app.py

@@ -78,7 +78,7 @@ def chat_response(user_input, history_pairs):
     return r["choices"][0]["message"]["content"].strip()
 
 # ------------------------------------------------------------------
-# 4. CSS (네 감성 그대로 + 요청 사항 반영)
+# 4. CSS (강력한 선택자로 재작성)
 # ------------------------------------------------------------------
 PC_COM_CSS = r"""
 @import url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@latest/neodgm/neodgm.css');
@@ -87,7 +87,7 @@ PC_COM_CSS = r"""
   --pc-blue: #0000AA;
   --pc-white: #EFEFEF;
   --pc-yellow: #FFFF55;
-  --pc-amber: #FFB000;   /* 봇 메시지용 호박색 */
+  --pc-amber: #FFB000;
   --pc-cyan: #00AAAA;
   --pc-grey: #AAAAAA;
 }
@@ -98,6 +98,7 @@ body, .gradio-container {
   color: var(--pc-white) !important;
 }
 
+/* 타이틀바 */
 h1 {
   font-family: 'NeoDunggeunmo', monospace !important;
   color: var(--pc-yellow) !important;
@@ -109,77 +110,124 @@ h1 {
   font-size: 32px !important;
   letter-spacing: 2px;
 }
-
 h1::before { content: "☎ "; }
 h1::after { content: " ☎"; }
 
-.gradio-container p {
-  color: var(--pc-cyan) !important;
-  font-size: 18px !important;
-  border-bottom: 1px dashed var(--pc-grey);
-  padding-bottom: 5px;
-}
-
+/* 챗봇 컨테이너 */
 .chatbot {
   background-color: var(--pc-blue) !important;
   border: 2px solid var(--pc-white) !important;
-  border-radius: 0 !important;
   height: 60vh !important;
   overflow-y: scroll !important;
 }
 
-.message {
+/* =================================================================
+   [강제 스타일 적용 구간]
+   Gradio 기본 테마를 뚫고 들어가기 위해 선택자를 깊게 씀
+   ================================================================= */
+
+/* 1. 모든 메시지 박스 초기화 (배경, 테두리, 그림자 제거) */
+.chatbot .message-wrap .message,
+.chatbot .message,
+.chatbot td {
   background: transparent !important;
   border: none !important;
-  padding: 5px 10px !important;
-  font-size: 20px !important;
   box-shadow: none !important;
-  line-height: 1.4 !important;
+  padding: 5px 10px !important;
 }
 
-/* [수정] 유저 메시지: 우측 정렬 + 흰색 */
-.message.user-row, .user { 
-  justify-content: flex-end !important; /* 우측 정렬 */
-  background: transparent !important; 
-  border-bottom: none !important; /* 선 제거 */
+/* 2. 유저 메시지 (오른쪽 정렬 + 흰색) */
+.chatbot .user-row {
+  display: flex !important;
+  justify-content: flex-end !important; /* 플렉스 우측 정렬 */
+  width: 100% !important;
+  border-bottom: none !important; /* 가로선 제거 */
 }
 
-.message.user-row .message, .user .message { 
-  color: var(--pc-white) !important; 
-  text-align: right !important; 
+/* 유저 말풍선 내부 */
+.chatbot .user-row .message {
+  background: transparent !important;
+  text-align: right !important;
+  margin-left: auto !important; /* 블록 우측 정렬 */
+  border: none !important;
 }
 
-/* 유저 접두사 ("< 나") 뒤로 보내기 */
-.message.user-row .message::after, .user .message::after { 
-  content: " < 나"; 
-  color: var(--pc-grey); 
-  margin-left: 5px; 
+/* 유저 텍스트 색상 강제 (흰색) */
+.chatbot .user-row .message, 
+.chatbot .user-row .message *, 
+.chatbot .user-row .message p {
+  color: #FFFFFF !important;
 }
-/* 기존 접두사 제거 */
-.message.user-row .message::before, .user .message::before { 
-  content: "" !important; 
+
+/* 유저 접두사 처리 */
+.chatbot .user-row .message::after {
+  content: " < 나";
+  color: var(--pc-grey);
+  margin-left: 5px;
+  font-size: 16px;
 }
 
+/* 3. 봇 메시지 (왼쪽 정렬 + 호박색) */
+.chatbot .bot-row {
+  display: flex !important;
+  justify-content: flex-start !important;
+  width: 100% !important;
+  border-bottom: none !important; /* 가로선 제거 */
+}
 
-/* [수정] 봇 메시지: 좌측 정렬 + 호박색(가시성) */
-.message.bot-row, .bot { 
-  background: transparent !important; 
-  border-bottom: none !important; /* 선 제거 */
+/* 봇 말풍선 내부 */
+.chatbot .bot-row .message {
+  background: transparent !important;
+  text-align: left !important;
+  margin-right: auto !important;
+  border: none !important;
 }
 
-.message.bot-row .message, .bot .message { 
-  color: var(--pc-amber) !important; /* 호박색 적용 */
-  text-align: left !important; 
+/* 봇 텍스트 색상 강제 (호박색) */
+.chatbot .bot-row .message, 
+.chatbot .bot-row .message *, 
+.chatbot .bot-row .message p {
+  color: var(--pc-amber) !important;
 }
 
-.message.bot-row .message::before, .bot .message::before { 
-  content: "똘배 > "; 
-  color: var(--pc-cyan); 
-  margin-right: 5px; 
+/* 봇 접두사 처리 */
+.chatbot .bot-row .message::before {
+  content: "똘배 > ";
+  color: var(--pc-cyan);
+  margin-right: 5px;
+  font-size: 16px;
 }
 
+/* 4. 아바타 숨김 */
 .avatar { display: none !important; }
 
+
+/* 5. 로딩(초시계) 스타일 수정 */
+/* 로딩 컨테이너 배경 날리기 */
+.chatbot .pending,
+.chatbot .generating {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* 로딩 텍스트(초) 하얗게 */
+.chatbot .pending span, 
+.chatbot .generating span,
+span.progress-text {
+    color: #FFFFFF !important;
+    background: transparent !important;
+    font-family: 'NeoDunggeunmo', monospace !important;
+}
+
+/* 로딩 애니메이션 바 숨기기 */
+.chatbot .load-wrap,
+.chatbot .loading-indicator {
+    display: none !important;
+}
+
+/* ================================================================= */
+
 .input-container {
   background-color: var(--pc-blue) !important;
   border-top: 2px double var(--pc-white) !important;
@@ -219,7 +267,6 @@ button.primary:hover { background: var(--pc-white) !important; }
 }
 #clear-btn:hover { color: var(--pc-white) !important; border-color: var(--pc-white) !important; }
 
-/* 수동 예시 버튼 스타일 */
 .example-btn {
   background: transparent !important;
   color: var(--pc-cyan) !important;
@@ -237,49 +284,16 @@ button.primary:hover { background: var(--pc-white) !important; }
   cursor: pointer !important;
 }
 
-/* [수정] 초시계(로딩) 스타일 커스텀 */
-/* 하얀 바탕 제거, 글씨만 남기기 */
-.generating {
-    border: none !important;
-    background: transparent !important;
-}
-
-.pending {
-    opacity: 1 !important;
-    background: transparent !important;
-}
-
-/* 로딩 텍스트 (초시계) */
-span.progress-text {
-    color: var(--pc-white) !important; /* 파란 배경이라 흰색으로 해야 보임 */
-    background: transparent !important;
-    font-family: 'NeoDunggeunmo', monospace !important;
-    font-size: 16px !important;
-    position: absolute !important;
-    right: 10px !important;
-    top: 10px !important;
-}
-
-/* 로딩 바(애니메이션) 숨기기 - 심플하게 */
-.meta-text-container {
-    background: transparent !important;
-    border: none !important;
-}
-.load-wrap {
-    display: none !important;
-}
-
 footer { display: none !important; }
 """
 
 # ------------------------------------------------------------------
-# 5. App (최종 수정: State 사용 + API 생성 차단 + 즉시 반응 패치)
+# 5. App (로직 동일)
 # ------------------------------------------------------------------
 with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as demo:
     gr.Markdown("# ≪ 십 리 안 ≫")
     gr.Markdown(">> 01410 접속 성공... [대화실]에 입장하셨습니다.")
 
-    # [중요] 채팅 기록을 저장할 '기억 저장소' (화면엔 안 보임)
     history_state = gr.State([])
 
     chatbot = gr.Chatbot(show_label=False, elem_classes="chatbot")
@@ -293,7 +307,6 @@ with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as d
 
     clear = gr.Button("[ 화면 지우기 ]", elem_id="clear-btn")
 
-    # 수동 예시 버튼
     gr.Markdown(">> 빠른 명령어 입력 (클릭)", elem_id="example-label")
     with gr.Row():
         btn1 = gr.Button("하이 방가방가", elem_classes="example-btn")
@@ -301,35 +314,24 @@ with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as d
         btn3 = gr.Button("오늘 기분 꿀꿀하네..", elem_classes="example-btn")
         btn4 = gr.Button("야 밥 뭐먹지 추천좀", elem_classes="example-btn")
 
-    # [수정 1] 사용자 입력을 화면에 '즉시' 띄우는 함수
     def user(user_input, history):
         history = history or []
-        # 봇 응답 자리에 None을 채워서 일단 화면에 표시 (즉시 반응)
         new_history = history + [[user_input, None]]
         return "", new_history, new_history
 
-    # [수정 2] 봇의 응답을 생성해서 업데이트하는 함수
     def bot(history):
         if not history:
             return history, history
-            
         user_input = history[-1][0]
-        
-        # LLM에 보낼 히스토리 정리
         hist_pairs = []
         for u, b in history[:-1]:
             if u is None or b is None: continue
             hist_pairs.append((u, b))
 
-        # 답변 생성 (시간이 좀 걸림)
         bot_out = chat_response(user_input, hist_pairs)
-        
-        # 마지막 None 자리에 답변 채워넣기
         history[-1][1] = bot_out
         return history, history
 
-    # [수정 3] 이벤트 연결 (user 실행 -> bot 실행 순서로 체이닝)
-    # 이렇게 해야 엔터 치자마자 내 글이 먼저 뜨고, 똘배가 고민하는 게 보임
     msg.submit(
         user, [msg, history_state], [msg, history_state, chatbot], queue=False, api_name=False
     ).then(
@@ -342,19 +344,17 @@ with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as d
         bot, [history_state], [history_state, chatbot], queue=False, api_name=False
     )
     
-    # 초기화
     clear.click(
         lambda: ([], []), None, [history_state, chatbot], queue=False, api_name=False
     )
 
-    # 예시 버튼 연결 (버튼 클릭 -> 텍스트 입력 -> 유저 함수 -> 봇 함수)
     for btn, text in [
         (btn1, "하이 방가방가"), 
         (btn2, "밸런스게임 ㄱㄱ"), 
         (btn3, "오늘 기분 꿀꿀하네.."), 
         (btn4, "야 밥 뭐먹지 추천좀")
     ]:
-        btn.click(lambda: text, None, msg, queue=False, api_name=False).then(
+        btn.click(lambda t=text: t, None, msg, queue=False, api_name=False).then(
             user, [msg, history_state], [msg, history_state, chatbot], queue=False, api_name=False
         ).then(
             bot, [history_state], [history_state, chatbot], queue=False, api_name=False