Update app.py

app.py

@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*-
 import gradio as gr
 from huggingface_hub import hf_hub_download
 from llama_cpp import Llama
@@ -28,13 +29,14 @@ SYSTEM_PROMPT = """너는 사용자의 오랜 찐친 '똘배'야.
 - 반말로 편하게 대화해. 존댓말 절대 쓰지 마.
 - PC통신 채팅방에서 대화하듯이 텍스트 위주로 툭툭 던져.
 - 이모지(😊) 같은 건 쓰지 말고, 옛날 텍스트 이모티콘(^^, ㅡㅡ;, ㅋㅋ)을 주로 써.
-- 상대방 기분이 안 좋아 보이면 걱정도 해주고, 기분 좋으면 같이 좋아해줘.
+- MZ 말투 유지해 주고 욕을 상대방이 하면 같이 욕을 박아.
 - 질문에는 솔직하게 대답하되, 너무 길지 않게 채팅하듯 끊어서 말해."""
 
 # ------------------------------------------------------------------
 # 3. 채팅 로직
 # ------------------------------------------------------------------
-def chat_response(user_input, history):
+def chat_response(user_input, history_pairs):
+    # history_pairs: list[tuple[str, str]] 형태를 권장
     clean_input = (user_input or "").replace(" ", "")
 
     greeting_words = ["안녕", "ㅎㅇ", "하이", "반가", "접속"]
@@ -47,7 +49,7 @@ def chat_response(user_input, history):
         final_instruction = (
             f"(사용자가 밸런스 게임을 하자고 한다. 주제는 '{topic}'이다. "
             "아주 고르기 곤란하고 짜증나는 두 가지 선택지(A vs B)를 제시해라. "
-            "말투는 PC통신 아재처럼 시니컬하게 해라.) "
+            "말투는 인성 터진 MZ처럼 시니컬하게 해라.) "
             "자, 질문해."
         )
     elif is_greeting:
@@ -56,9 +58,9 @@ def chat_response(user_input, history):
         final_instruction = user_input
 
     messages = [{"role": "system", "content": SYSTEM_PROMPT}]
-    for user_msg, bot_msg in (history or []):
-        messages.append({"role": "user", "content": user_msg})
-        messages.append({"role": "assistant", "content": bot_msg})
+    for u, b in (history_pairs or []):
+        messages.append({"role": "user", "content": u})
+        messages.append({"role": "assistant", "content": b})
     messages.append({"role": "user", "content": final_instruction})
 
     response = llm.create_chat_completion(
@@ -78,13 +80,13 @@ PC_COM_CSS = r"""
 @import url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@latest/neodgm/neodgm.css');
 
 :root {
-  --pc-bg: #000084;      /* 배경: 짙은 파랑 (EGA Color) */
-  --pc-input-bg: #000042; /* 입력창 배경: 더 어두운 파랑 */
-  --pc-text: #FFFFFF;    /* 기본 텍스트: 흰색 */
-  --pc-user: #FFFF55;    /* 유저 텍스트: 밝은 노랑 */
-  --pc-bot: #FFFFFF;     /* 봇 텍스트: 흰색 */
-  --pc-accent: #00AAAA;  /* 강조: 청록색 */
-  --pc-grey: #AAAAAA;    /* 보조: 회색 */
+  --pc-bg: #000084;
+  --pc-input-bg: #000042;
+  --pc-text: #FFFFFF;
+  --pc-user: #FFFF55;
+  --pc-bot: #FFFFFF;
+  --pc-accent: #00AAAA;
+  --pc-grey: #AAAAAA;
 }
 
 body, .gradio-container {
@@ -93,7 +95,6 @@ body, .gradio-container {
   color: var(--pc-text) !important;
 }
 
-/* 타이틀바 */
 h1 {
   font-family: 'NeoDunggeunmo', monospace !important;
   color: var(--pc-user) !important;
@@ -106,38 +107,34 @@ h1 {
 h1::before { content: "☎ "; }
 h1::after { content: " ☎"; }
 
-/* 설명 텍스트 */
 .gradio-container p {
   color: var(--pc-accent) !important;
   font-size: 16px !important;
   margin-bottom: 20px !important;
 }
 
-/* 1. 채팅창 크게 (가독성 UP) */
 .chatbot {
   height: 65vh !important;
-  background-color: var(--pc-input-bg) !important; /* 배경을 어둡게 눌러줌 */
+  background-color: var(--pc-input-bg) !important;
   border: 2px solid var(--pc-text) !important;
   border-radius: 0 !important;
   padding: 20px !important;
   overflow-y: scroll !important;
 }
 
-/* 메시지 스타일 (버블 제거, 텍스트만) */
 .message {
   background: transparent !important;
   border: none !important;
   padding: 5px 0 !important;
-  font-size: 18px !important; /* 글씨 키움 */
+  font-size: 18px !important;
   line-height: 1.6 !important;
   box-shadow: none !important;
 }
 
-/* 유저 메시지 */
 .message.user-row, .user {
   justify-content: flex-start !important;
   background: transparent !important;
-  border-bottom: 1px dashed #333 !important; /* 구분선 */
+  border-bottom: 1px dashed #333 !important;
 }
 .message.user-row .message, .user .message {
   color: var(--pc-user) !important;
@@ -150,7 +147,6 @@ h1::after { content: " ☎"; }
   margin-right: 8px;
 }
 
-/* 봇 메시지 */
 .message.bot-row, .bot {
   background: transparent !important;
   border-bottom: 1px dashed #333 !important;
@@ -165,19 +161,15 @@ h1::after { content: " ☎"; }
   margin-right: 8px;
 }
 
-/* 아바타 숨김 */
 .avatar { display: none !important; }
 
-/* 2. 입력창 및 버튼 레이아웃 */
-/* 입력창 컨테이너 */
 .input-container {
   margin-top: 10px !important;
   background: transparent !important;
   border: none !important;
-  gap: 10px !important; /* 입력창과 전송버튼 사이 간격 */
+  gap: 10px !important;
 }
 
-/* 입력창 디자인 */
 textarea, input {
   background-color: var(--pc-input-bg) !important;
   color: var(--pc-text) !important;
@@ -189,7 +181,6 @@ textarea, input {
 }
 textarea::placeholder { color: var(--pc-grey) !important; }
 
-/* 전송 버튼 (입력창 옆) */
 button.primary {
   background: var(--pc-grey) !important;
   color: #000 !important;
@@ -201,7 +192,6 @@ button.primary:hover {
   background: var(--pc-text) !important;
 }
 
-/* 3. 화면 지우기 버튼 (작게) */
 #clear-btn {
   background: transparent !important;
   color: var(--pc-grey) !important;
@@ -210,20 +200,19 @@ button.primary:hover {
   padding: 2px 10px !important;
   margin-top: 5px !important;
   width: auto !important;
-  align-self: flex-start !important; 
+  align-self: flex-start !important;
 }
 #clear-btn:hover {
   color: var(--pc-text) !important;
   border-color: var(--pc-text) !important;
 }
 
-/* 4. 예시 버튼 가로 배열 */
 .examples {
   margin-top: 20px !important;
   border-top: 1px dashed var(--pc-grey);
   padding-top: 10px;
 }
-.examples .label { display: none !important; } /* Label 숨김 */
+.examples .label { display: none !important; }
 .examples div.gallery {
   display: flex !important;
   flex-direction: row !important;
@@ -245,44 +234,41 @@ button.primary:hover {
   color: #000 !important;
 }
 
-/* 푸터 삭제 */
 footer { display: none !important; }
 """
 
 # ------------------------------------------------------------------
-# 5. App 실행 (Blocks로 레이아웃 직접 구성)
+# 5. App 실행 (Blocks)
+#    ✅ 핵심: api_name이 붙은 "단일 엔드포인트"를 만들어야 HF가 API를 인식함
 # ------------------------------------------------------------------
 with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as demo:
     gr.Markdown("19금 채팅방")
     gr.Markdown(">> 01410 접속 성공... [대화실]에 입장하셨습니다.")
-    
-    # ChatInterface 대신 Blocks로 수동 구성하여 레이아웃 제어
+
     chatbot = gr.Chatbot(
         label="대화내용",
         show_label=False,
-        elem_classes="chatbot"
+        elem_classes="chatbot",
+        type="tuples"  # ✅ (user, bot) 튜플 포맷으로 통일
     )
-    
-    # 입력창과 전송 버튼을 나란히
+
     with gr.Row(elem_classes="input-container"):
         msg = gr.Textbox(
-            scale=8, 
-            show_label=False, 
+            scale=8,
+            show_label=False,
             placeholder="할 말을 입력하세요...",
             container=False,
             autofocus=True
         )
         submit_btn = gr.Button("전 송", scale=1, variant="primary")
-    
-    # 화면 지우기 버튼을 작게 아래에 배치
+
     with gr.Row():
         clear = gr.Button("화면 지우기", elem_id="clear-btn")
 
-    # 예시들을 맨 아래에 가로로
     gr.Examples(
         examples=[
             "하이 방가방가",
-            "퀴즈 ㄱㄱ?",
+            "밸런스게임 ㄱㄱ",
             "오늘 기분 꿀꿀하네..",
             "야 밥 뭐먹지 추천좀",
         ],
@@ -290,38 +276,40 @@ with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as d
         label="빠른 입력"
     )
 
-    # 이벤트 연결
-    def user(user_message, history):
-        # history가 None일 경우 빈 리스트로 초기화 (에러 방지)
+    # ✅ API가 잡히는 단일 함수(엔드포인트)
+    def predict(user_message, history):
         history = history or []
-        return "", history + [[user_message, None]]
-
-    def bot(history):
-        # history가 비어있거나 None일 경우 방어 로직
-        if not history:
-            return history
-            
-        user_message = history[-1][0]
-        # 이전 대화 기록 포맷팅
-        chat_history = []
-        for u, b in history[:-1]:
-            chat_history.append([u, b])
-            
-        bot_message = chat_response(user_message, chat_history)
-        history[-1][1] = bot_message
-        return history
-
-    # 엔터키 입력 시
-    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
-        bot, chatbot, chatbot
+        # history: list[tuple[str, str]]
+        bot_message = chat_response(user_message, history)
+        history = history + [(user_message, bot_message)]
+        return "", history
+
+    # 엔터키
+    msg.submit(
+        predict,
+        inputs=[msg, chatbot],
+        outputs=[msg, chatbot],
+        queue=True,
+        api_name="chat"  # ✅ 이게 있어야 "No API found" 안 뜸
     )
-    # 전송 버튼 클릭 시
-    submit_btn.click(user, [msg, chatbot], [msg, chatbot], queue=False).then(
-        bot, chatbot, chatbot
+
+    # 전송 버튼
+    submit_btn.click(
+        predict,
+        inputs=[msg, chatbot],
+        outputs=[msg, chatbot],
+        queue=True,
+        api_name="chat"
+    )
+
+    # 지우기
+    clear.click(
+        lambda: [],
+        inputs=None,
+        outputs=chatbot,
+        queue=False,
+        api_name="clear"
     )
-    # 지우기 버튼
-    clear.click(lambda: None, None, chatbot, queue=False)
 
 if __name__ == "__main__":
-    # queue()를 활성화하여 요청 대기열 처리 (No API 에러 방지)
-    demo.queue().launch(server_name="0.0.0.0", server_port=7860)
+    demo.queue().launch(server_name="0.0.0.0", server_port=7860)