Update app.py

app.py

@@ -140,7 +140,7 @@ class KyungAhNeChatbot:
 try:
     chatbot = KyungAhNeChatbot()
     
-    # 심플한 그라디오 인터페이스
+    # 심플하고 깔끔한 그라디오 인터페이스
     demo = gr.ChatInterface(
         fn=chatbot.chat_stream,
         title="🥢 경아네 AI 상담봇",
@@ -151,50 +151,110 @@ try:
             "배송비가 얼마인가요?",
             "환불 방법을 알려주세요"
         ],
+        theme=gr.themes.Default(),
         css="""
+        /* 전체 배경 흰색 */
         .gradio-container {
+            background-color: #ffffff !important;
             max-width: 800px !important;
-            margin: auto !important;
-            font-family: 'Noto Sans KR', sans-serif;
+            margin: 0 auto !important;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
         }
         
-        .chatbot {
-            border-radius: 15px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        /* 모든 테두리 제거 */
+        .chatbot, .chatbot > div, .contain, .block {
+            border: none !important;
+            box-shadow: none !important;
+            background-color: #ffffff !important;
+        }
+        
+        /* Chatbot 탭 완전히 숨기기 */
+        .tab-nav, div[role="tablist"], .tabs > div:first-child {
+            display: none !important;
+        }
+        
+        /* 채팅 메시지 스타일링 */
+        .message {
             border: none !important;
+            margin: 10px 0 !important;
         }
         
+        /* 입력창을 타원형으로 */
+        .input-container, textarea {
+            border-radius: 25px !important;
+            border: 1px solid #e0e0e0 !important;
+            background-color: #f8f9fa !important;
+            padding: 12px 20px !important;
+        }
+        
+        /* 전송 버튼 둥글게 */
         button {
-            border-radius: 8px;
-            font-weight: 500;
+            border-radius: 20px !important;
+            border: none !important;
+            background-color: #007bff !important;
+            color: white !important;
+            font-weight: 500 !important;
+            padding: 8px 16px !important;
         }
         
-        /* Chatbot 탭 숨기기 */
-        .tab-nav {
-            display: none !important;
+        button:hover {
+            background-color: #0056b3 !important;
         }
         
-        div[role="tablist"] {
-            display: none !important;
+        /* 예시 버튼들 타원형으로 */
+        .examples button {
+            border-radius: 20px !important;
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            color: #333 !important;
+            margin: 5px !important;
+            padding: 8px 16px !important;
         }
         
-        .tabs > div:first-child {
-            display: none !important;
+        .examples button:hover {
+            background-color: #007bff !important;
+            color: white !important;
+            border-color: #007bff !important;
         }
         
-        /* 모든 테두리 제거 */
-        .chatbot, .chatbot > div {
-            border: none !important;
+        /* 타이틀 스타일 */
+        h1 {
+            color: #333 !important;
+            font-size: 28px !important;
+            text-align: center !important;
+            margin-bottom: 10px !important;
         }
         
-        /* 전체 컨테이너 테두리도 제거 */
-        .contain {
-            border: none !important;
+        /* 설명 텍스트 */
+        .description {
+            color: #666 !important;
+            text-align: center !important;
+            font-size: 14px !important;
+            margin-bottom: 20px !important;
         }
         
-        /* 입력창 테두리도 제거하려면 */
-        textarea, input {
-            border: 1px solid #e0e0e0 !important;
+        /* 여백 조정 */
+        .block {
+            padding: 10px !important;
+        }
+        
+        /* 스크롤바 깔끔하게 */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 10px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
         }
         """
     )