Update app.py

app.py

@@ -140,29 +140,169 @@ class KyungAhNeChatbot:
 try:
     chatbot = KyungAhNeChatbot()
     
-    # 그라디오 인터페이스
-    demo = gr.ChatInterface(
-        fn=chatbot.chat_stream,
-        title="🥢 경아네 AI 상담봇",
-        description="제미나이 2.0 기반 경아네 반찬가게 고객 상담봇입니다. 궁금한 것을 물어보세요!",
-        examples=[
-            "주문은 어떻게 하나요?",
-            "포인트는 어떻게 사용하나요?",
-            "배송비가 얼마인가요?",
-            "환불 방법을 알려주세요",
-            "정기식 구성이 어떻게 되나요?",
-            "후기 쓰면 혜택이 있나요?",
-            "반찬이 상한 것 같아요",
-            "원산지를 알고 싶어요"
-        ],
-        theme=gr.themes.Soft(),
+    # 커스텀 헤더 HTML
+    header_html = """
+    <div class="header-container">
+        <h1 class="main-title">🥢 경아네 AI 상담봇</h1>
+        <p class="sub-title">제미나이 2.0 기반 스마트 고객상담 시스템</p>
+        <div class="info-cards">
+            <div class="info-card">📞 010-8082-0047</div>
+            <div class="info-card">🏦 하나은행 12345-00-1234304</div>
+            <div class="info-card">💰 최소주문 26,000원</div>
+            <div class="info-card">🚚 새벽배송 3,500원</div>
+        </div>
+    </div>
+    """
+    
+    # 그라디오 인터페이스 생성
+    with gr.Blocks(
+        theme=gr.themes.Base(
+            primary_hue="green",
+            secondary_hue="blue", 
+            neutral_hue="slate",
+            font=gr.themes.GoogleFont("Noto Sans KR"),
+        ).set(
+            body_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+            block_background_fill="rgba(255, 255, 255, 0.95)",
+            block_border_width="0px",
+            block_radius="16px",
+            block_shadow="0 8px 32px rgba(0, 0, 0, 0.1)",
+        ),
         css="""
+        /* 전체 컨테이너 스타일 */
         .gradio-container {
-            max-width: 800px !important;
+            max-width: 1000px !important;
             margin: auto !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        /* 헤더 영역 */
+        .header-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        /* 메인 타이틀 */
+        .main-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-align: center;
+            margin-bottom: 10px;
+            font-family: 'Noto Sans KR', sans-serif;
+        }
+        
+        /* 서브타이틀 */
+        .sub-title {
+            font-size: 1.1rem;
+            color: #666;
+            text-align: center;
+            margin-bottom: 20px;
+            font-family: 'Noto Sans KR', sans-serif;
+        }
+        
+        /* 정보 카드들 */
+        .info-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        
+        .info-card {
+            background: linear-gradient(45deg, #FF9A9E, #FECFEF);
+            padding: 15px;
+            border-radius: 12px;
+            text-align: center;
+            color: white;
+            font-weight: 600;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+        
+        .info-card:hover {
+            transform: translateY(-5px);
+        }
+        
+        /* 채팅 영역 */
+        .chatbot {
+            background: rgba(255, 255, 255, 0.95) !important;
+            border-radius: 20px !important;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
+            backdrop-filter: blur(20px) !important;
+            border: 1px solid rgba(255, 255, 255, 0.2) !important;
+            min-height: 500px !important;
+        }
+        
+        /* 입력 영역 */
+        .input-container textarea {
+            background: rgba(255, 255, 255, 0.9) !important;
+            border-radius: 15px !important;
+            border: 2px solid #4ECDC4 !important;
+            padding: 12px !important;
+            font-family: 'Noto Sans KR', sans-serif !important;
+        }
+        
+        /* 전송 버튼 */
+        button {
+            background: linear-gradient(45deg, #FF6B6B, #4ECDC4) !important;
+            border: none !important;
+            border-radius: 12px !important;
+            color: white !important;
+            font-weight: 600 !important;
+            padding: 10px 20px !important;
+            transition: all 0.3s ease !important;
+            font-family: 'Noto Sans KR', sans-serif !important;
+        }
+        
+        button:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
+        }
+        
+        /* 모바일 반응형 */
+        @media (max-width: 768px) {
+            .gradio-container {
+                padding: 10px;
+            }
+            
+            .main-title {
+                font-size: 2rem;
+            }
+            
+            .info-cards {
+                grid-template-columns: 1fr 1fr;
+            }
         }
         """
-    )
+    ) as demo:
+        
+        # 헤더 표시
+        gr.HTML(header_html)
+        
+        # 채팅 인터페이스
+        gr.ChatInterface(
+            fn=chatbot.chat_stream,
+            examples=[
+                "주문은 어떻게 하나요?",
+                "포인트는 어떻게 사용하나요?", 
+                "배송비가 얼마인가요?",
+                "환불 방법을 알려주세요",
+                "정기식 구성이 어떻게 되나요?",
+                "후기 쓰면 혜택이 있나요?",
+                "반찬이 상한 것 같아요",
+                "원산지를 알고 싶어요"
+            ]
+        )
     
 except Exception as e:
     def error_message(message, history):