Update app.py

app.py

@@ -6,6 +6,7 @@ import os
 # ============================================
 # MiniMax-M2.1 Streaming Chat
 # Dual Provider: Novita (HF) + MiniMax Official API
+# Comic Classic Theme
 # ============================================
 
 # Provider 상태 관리
@@ -28,9 +29,9 @@ class ProviderManager:
     
     def get_status(self):
         if self.current_provider == "novita":
-            return "🟢 Novita"
+            return "🟢 Novita (HuggingFace)"
         else:
-            return "🟡 MiniMax"
+            return "🟡 MiniMax Official API"
     
     def switch_to_minimax(self):
         self.current_provider = "minimax"
@@ -75,13 +76,13 @@ def chat_with_minimax(messages):
         if chunk.choices and chunk.choices[0].delta.content:
             yield chunk.choices[0].delta.content
 
-def respond(message, history):
+def chat_respond(message, history):
     """
     Streaming chat with automatic fallback
+    Returns: tuple (history, status)
     """
     if not message.strip():
-        yield ""
-        return
+        return history, provider.get_status()
     
     # Build API messages
     api_messages = [{
@@ -89,11 +90,9 @@ def respond(message, history):
         "content": "You are MiniMax-M2.1, a helpful AI assistant built by MiniMax. You excel at coding, tool use, and complex reasoning tasks. Respond in the same language as the user."
     }]
     
-    # Add history (handle both dict and tuple formats)
+    # Add history
     for h in history:
-        if isinstance(h, dict):
-            api_messages.append({"role": h.get("role", "user"), "content": h.get("content", "")})
-        elif isinstance(h, (list, tuple)) and len(h) == 2:
+        if isinstance(h, (list, tuple)) and len(h) == 2:
             if h[0]:
                 api_messages.append({"role": "user", "content": h[0]})
             if h[1]:
@@ -102,13 +101,14 @@ def respond(message, history):
     api_messages.append({"role": "user", "content": message})
     
     response_text = ""
+    current_status = provider.get_status()
     
     # 1차: Novita
     if provider.novita_available and provider.current_provider == "novita":
         try:
             for chunk in chat_with_novita(api_messages):
                 response_text += chunk
-                yield response_text
+                yield history + [[message, response_text]], "🟢 Novita (HuggingFace)"
             return
         except Exception as e:
             error_msg = str(e).lower()
@@ -121,113 +121,407 @@ def respond(message, history):
     # 2차: MiniMax
     try:
         if not os.environ.get("MINIMAX_API_KEY"):
-            yield "❌ Error: MINIMAX_API_KEY not configured. Please add it to Space Secrets."
+            yield history + [[message, "❌ MINIMAX_API_KEY not configured."]], "🔴 No API Key"
             return
         
         for chunk in chat_with_minimax(api_messages):
             response_text += chunk
-            yield response_text
+            yield history + [[message, response_text]], "🟡 MiniMax Official API"
         return
         
     except Exception as e:
         if "rate limit" not in str(e).lower():
             provider.reset_to_novita()
-        yield f"❌ Error: {str(e)}"
+        yield history + [[message, f"❌ Error: {str(e)}"]], "🔴 Error"
+
+def reset_provider_fn():
+    """수동으로 Novita로 리셋"""
+    provider.reset_to_novita()
+    return "✅ Reset to Novita!"
+
+def clear_chat_fn():
+    """채팅 초기화"""
+    return [], "", provider.get_status()
 
 # ============================================
-# Header HTML with embedded styles
+# 🎨 Comic Classic Theme CSS
 # ============================================
-header_html = """
-<style>
+css = """
+/* ===== 🎨 Google Fonts Import ===== */
 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
 
+/* ===== 🎨 Comic Classic 배경 ===== */
 .gradio-container {
     background-color: #FEF9C3 !important;
     background-image: radial-gradient(#1F2937 1px, transparent 1px) !important;
     background-size: 20px 20px !important;
+    min-height: 100vh !important;
     font-family: 'Comic Neue', cursive, sans-serif !important;
 }
 
-footer { display: none !important; }
+/* ===== 허깅페이스 헤더 숨김 ===== */
+.huggingface-space-header,
+#space-header,
+.space-header,
+[class*="space-header"],
+.svelte-1ed2p3z,
+.space-header-badge,
+[data-testid="space-header"] {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+}
+
+/* ===== Footer 숨김 ===== */
+footer,
+.footer,
+.gradio-container footer,
+.built-with,
+[class*="footer"],
+.gradio-footer,
+.show-api,
+.built-with-gradio {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+}
 
-h1 {
+/* ===== 🎨 헤더 타이틀 ===== */
+.header-text h1 {
     font-family: 'Bangers', cursive !important;
     color: #1F2937 !important;
-    text-shadow: 4px 4px 0px #FACC15, 6px 6px 0px #1F2937 !important;
+    font-size: 3.5rem !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 
+        4px 4px 0px #FACC15,
+        6px 6px 0px #1F2937 !important;
     letter-spacing: 3px !important;
+    -webkit-text-stroke: 2px #1F2937 !important;
+}
+
+/* ===== 🎨 서브타이틀 ===== */
+.subtitle {
+    text-align: center !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 1.2rem !important;
+    color: #1F2937 !important;
+    margin-bottom: 1.5rem !important;
+    font-weight: 700 !important;
 }
 
-textarea {
+/* ===== 🎨 카드/패널 ===== */
+.gr-panel,
+.gr-box,
+.gr-form,
+.block,
+.gr-group {
+    background: #FFFFFF !important;
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-panel:hover,
+.block:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 8px 8px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 입력 필드 ===== */
+textarea, 
+input[type="text"], 
+input[type="number"] {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #1F2937 !important;
     font-family: 'Comic Neue', cursive !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
 }
 
-button {
+textarea:focus, 
+input[type="text"]:focus {
+    border-color: #3B82F6 !important;
+    box-shadow: 4px 4px 0px #3B82F6 !important;
+    outline: none !important;
+}
+
+/* ===== 🎨 Primary 버튼 ===== */
+.gr-button-primary,
+button.primary,
+.gr-button.primary {
     background: #3B82F6 !important;
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
-    color: white !important;
+    color: #FFFFFF !important;
     font-family: 'Bangers', cursive !important;
-    box-shadow: 4px 4px 0px #1F2937 !important;
+    font-weight: 400 !important;
+    font-size: 1.3rem !important;
+    letter-spacing: 2px !important;
+    padding: 14px 28px !important;
+    box-shadow: 5px 5px 0px #1F2937 !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
 }
 
-button:hover {
+.gr-button-primary:hover,
+button.primary:hover {
     background: #2563EB !important;
     transform: translate(-2px, -2px) !important;
+    box-shadow: 7px 7px 0px #1F2937 !important;
+}
+
+.gr-button-primary:active,
+button.primary:active {
+    transform: translate(3px, 3px) !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 Secondary 버튼 ===== */
+.gr-button-secondary,
+button.secondary {
+    background: #EF4444 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.1rem !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+
+.gr-button-secondary:hover,
+button.secondary:hover {
+    background: #DC2626 !important;
+    transform: translate(-2px, -2px) !important;
     box-shadow: 6px 6px 0px #1F2937 !important;
 }
 
+/* ===== 🎨 로그/상태 출력 ===== */
+.status-box textarea {
+    background: #1F2937 !important;
+    color: #10B981 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.9rem !important;
+    border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #10B981 !important;
+}
+
+/* ===== 🎨 아코디언 ===== */
+.gr-accordion {
+    background: #FACC15 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 채팅 영역 ===== */
 .chatbot {
     border: 3px solid #1F2937 !important;
     border-radius: 12px !important;
     box-shadow: 6px 6px 0px #1F2937 !important;
+    background: #FFFFFF !important;
 }
 
+/* ===== 🎨 코드 블록 ===== */
 pre, code {
     background: #1F2937 !important;
     color: #10B981 !important;
+    border: 2px solid #10B981 !important;
     border-radius: 6px !important;
+    font-family: 'Courier New', monospace !important;
 }
-</style>
 
-<div style="text-align: center; margin: 10px 0;">
-    <a href="https://www.humangen.ai" target="_blank">
-        <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
-    </a>
+/* ===== 🎨 라벨 ===== */
+label,
+.gr-input-label,
+.gr-block-label {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+}
 
-</div>
+/* ===== 🎨 스크롤바 ===== */
+::-webkit-scrollbar {
+    width: 12px;
+}
 
-<div style="background: linear-gradient(135deg, #3B82F6, #8B5CF6); border: 3px solid #1F2937; border-radius: 12px; padding: 15px; color: white; box-shadow: 5px 5px 0px #1F2937; margin: 15px 0;">
-    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center;">
-        <div><strong style="font-size: 1.5rem;">230B</strong><br><span style="font-size: 0.9rem;">Total Params</span></div>
-        <div><strong style="font-size: 1.5rem;">10B</strong><br><span style="font-size: 0.9rem;">Active Params</span></div>
-        <div><strong style="font-size: 1.5rem;">88.6</strong><br><span style="font-size: 0.9rem;">VIBE Score</span></div>
-        <div><strong style="font-size: 1.5rem;">#1</strong><br><span style="font-size: 0.9rem;">Open Source</span></div>
-    </div>
-</div>
+::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border: 2px solid #1F2937;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #EF4444;
+}
 
-<p style="text-align: center; font-family: 'Comic Neue', sans-serif; font-weight: bold; color: #1F2937;">
-    ⚡ Claude Sonnet 4.5 수준의 코딩 & 에이전트 성능! | 🔄 Novita 크레딧 소진 시 MiniMax API로 자동 전환
-</p>
+/* ===== 🎨 선택 하이라이트 ===== */
+::selection {
+    background: #FACC15;
+    color: #1F2937;
+}
+
+/* ===== 반응형 ===== */
+@media (max-width: 768px) {
+    .header-text h1 {
+        font-size: 2.2rem !important;
+        text-shadow: 3px 3px 0px #FACC15, 4px 4px 0px #1F2937 !important;
+    }
+    
+    .gr-button-primary,
+    button.primary {
+        padding: 12px 20px !important;
+        font-size: 1.1rem !important;
+    }
+}
 """
 
 # ============================================
-# Create ChatInterface
+# Gradio Interface (gr.Blocks 스타일)
 # ============================================
-demo = gr.ChatInterface(
-    fn=respond,
-    title="🤖 MINIMAX-M2.1 CHAT 💬",
-    description=header_html,
-    examples=[
-        "Python으로 퀵소트 알고리즘을 구현해줘",
-        "React로 Todo 앱 컴포넌트를 만들어줘",
-        "Docker와 Kubernetes의 차이점을 설명해줘",
-        "FastAPI로 JWT 인증 구현해줘",
-        "머신러닝 모델 배포 파이프라인을 설계해줘",
-    ],
-    theme=gr.themes.Soft(),
-)
+with gr.Blocks(fill_height=True, css=css) as demo:
+    
+    # HOME Badge
+    gr.HTML("""
+        <div style="text-align: center; margin: 20px 0 10px 0;">
+            <a href="https://www.humangen.ai" target="_blank" style="text-decoration: none;">
+                <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
+            </a>
+            <a href="https://huggingface.co/MiniMaxAI/MiniMax-M2.1" target="_blank" style="text-decoration: none; margin-left: 10px;">
+                <img src="https://img.shields.io/static/v1?label=🤗&message=MiniMax-M2.1&color=ff6f00&labelColor=1F2937&style=for-the-badge" alt="Model">
+            </a>
+        </div>
+    """)
+    
+    # Header Title
+    gr.Markdown(
+        """# 🤖 MINIMAX-M2.1 CHAT 💬""",
+        elem_classes="header-text"
+    )
+    
+    gr.Markdown(
+        """<p class="subtitle">⚡ Claude Sonnet 4.5 수준의 코딩 & 에이전트 성능! 230B 파라미터 오픈소스 모델 🚀</p>"""
+    )
+    
+    # Model Info Box
+    gr.HTML("""
+        <div style="background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); border: 3px solid #1F2937; border-radius: 12px; padding: 15px; color: white; box-shadow: 5px 5px 0px #1F2937; margin: 0 auto 20px auto; max-width: 800px;">
+            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center;">
+                <div><strong style="font-size: 1.5rem;">230B</strong><br><span style="font-size: 0.9rem;">Total Params</span></div>
+                <div><strong style="font-size: 1.5rem;">10B</strong><br><span style="font-size: 0.9rem;">Active Params</span></div>
+                <div><strong style="font-size: 1.5rem;">88.6</strong><br><span style="font-size: 0.9rem;">VIBE Score</span></div>
+                <div><strong style="font-size: 1.5rem;">#1</strong><br><span style="font-size: 0.9rem;">Open Source</span></div>
+            </div>
+        </div>
+    """)
+    
+    with gr.Row(equal_height=False):
+        # Left Column - Chat
+        with gr.Column(scale=2, min_width=400):
+            # Provider Status
+            with gr.Row():
+                provider_status = gr.Textbox(
+                    value="🟢 Novita (HuggingFace)",
+                    label="🔌 Current Provider",
+                    interactive=False,
+                    elem_classes="status-box",
+                    scale=3
+                )
+                reset_btn = gr.Button("🔄 Reset", variant="secondary", scale=1)
+            
+            # Chatbot
+            chatbot = gr.Chatbot(
+                label="💬 Chat",
+                height=450,
+                show_label=False,
+                elem_classes="chatbot"
+            )
+            
+            # Input Row
+            with gr.Row():
+                msg = gr.Textbox(
+                    label="",
+                    placeholder="메시지를 입력하세요... (코딩, 분석, 창작 등 무엇이든!)",
+                    scale=8,
+                    container=False
+                )
+                submit_btn = gr.Button("📤 SEND", variant="primary", scale=2)
+            
+            # Clear Button
+            clear_btn = gr.Button("🗑️ CLEAR CHAT", variant="secondary")
+        
+        # Right Column - Info
+        with gr.Column(scale=1, min_width=300):
+            with gr.Accordion("💡 Example Prompts", open=True):
+                gr.Markdown("""
+**코딩:**
+- Python으로 퀵소트 구현해줘
+- React Todo 앱 만들어줘
+- FastAPI JWT 인증 구현해줘
+
+**설명:**
+- Docker vs Kubernetes 차이점
+- REST API 설계 베스트 프랙티스
+
+**분석:**
+- 머신러닝 배포 파이프라인 설계
+                """)
+            
+            with gr.Accordion("🔌 Provider Info", open=False):
+                gr.Markdown("""
+### 듀얼 프로바이더
+
+**1차: Novita (HuggingFace)**
+- HF PRO 크레딧 사용
+
+**2차: MiniMax Official API**
+- 크레딧 소진 시 자동 전환
+- 현재 한시적 무료
+
+### Secrets 설정
+```
+HF_TOKEN
+MINIMAX_API_KEY
+```
+                """)
+            
+            with gr.Accordion("🎯 Model Info", open=False):
+                gr.Markdown("""
+- **🏆 SOTA 코딩** — Claude Sonnet 4.5 능가
+- **🌍 다국어** — Python, Rust, Java, Go, C++
+- **🤖 에이전트** — 멀티스텝 태스크
+- **💡 추론** — Interleaved Thinking
+- **🔧 도구** — 함수 호출 지원
+                """)
+    
+    # Event Handlers
+    def respond(message, history):
+        if not message.strip():
+            yield history, provider.get_status()
+            return
+        for result in chat_respond(message, history):
+            yield result
+    
+    # Connect events
+    msg.submit(respond, [msg, chatbot], [chatbot, provider_status]).then(
+        lambda: "", outputs=[msg]
+    )
+    submit_btn.click(respond, [msg, chatbot], [chatbot, provider_status]).then(
+        lambda: "", outputs=[msg]
+    )
+    clear_btn.click(clear_chat_fn, outputs=[chatbot, msg, provider_status])
+    reset_btn.click(reset_provider_fn, outputs=[provider_status])
 
 if __name__ == "__main__":
     demo.launch()