Update app.py

app.py

@@ -1,421 +1,311 @@
+# 2) The actual app
+import os
+from getpass import getpass
+from openai import OpenAI
 import gradio as gr
-import numpy as np
-import random
-import torch
-from diffusers import DiffusionPipeline
-import spaces
-# 기본 설정
-dtype = torch.bfloat16
-device = "cuda" if torch.cuda.is_available() else "cpu"
+import requests
+import json
+from datetime import datetime
 
-# 모델 로드
-pipe = DiffusionPipeline.from_pretrained(
-    "black-forest-labs/FLUX.1-schnell", 
-    torch_dtype=dtype
-).to(device)
+# ——— Configure your OpenRouter key ———
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY")
+BSEARCH_API = os.getenv("BSEARCH_API")
 
-MAX_SEED = np.iinfo(np.int32).max
-MAX_IMAGE_SIZE = 2048
+# Check if the API key was retrieved
+if not OPENROUTER_API_KEY:
+    print("Error: OPENROUTER_API_KEY not found in environment.")
+    print("Please set your API key in the environment as 'OPENROUTER_API_KEY'.")
+else:
+    client = OpenAI(
+        base_url="https://openrouter.ai/api/v1",
+        api_key=OPENROUTER_API_KEY,
+    )
 
-# Enhanced examples with more detailed prompts and specific styling
-EXAMPLES = [
-    {
-        "title": "Knowledge Tree",
-        "prompt": """A handrawn colorful mind map diagram, educational style, vibrant colors, clear hierarchy, golden ratio layout.
-        KNOWLEDGE
-        ├── ACQUISITION [Brain with Lightning ~60px]
-        │   ├── READING [Open Book with Glow]
-        │   ├── PRACTICE [Hands-on Tools]
-        │   └── OBSERVATION [Eye with Magnifier]
-        ├── PROCESSING [Gear Network ~50px]
-        │   ├── ANALYSIS [Graph Trending Up]
-        │   └── SYNTHESIS [Puzzle Pieces]
-        ├── RETENTION [Memory Chip ~45px]
-        │   ├── SHORT-TERM [Quick Flash]
-        │   └── LONG-TERM [Solid Archive]
-        └── APPLICATION
-            ├── CREATION [Artist Palette]
-            └── INNOVATION [Lightbulb Constellation]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Digital Transformation",
-        "prompt": """A handrawn colorful mind map diagram, tech-focused style, neon accents, circuit board patterns.
-        DIGITAL TRANSFORM
-        ├── CLOUD [Cloud with Data Rain ~55px]
-        │   ├── STORAGE [Database Cluster]
-        │   └── COMPUTING [Server Array]
-        ├── AUTOMATION [Robot Arm ~50px]
-        │   ├── WORKFLOWS [Flowchart]
-        │   └── AI/ML [Neural Network]
-        ├── SECURITY [Shield Matrix ~45px]
-        │   ├── ENCRYPTION [Lock Code]
-        │   └── MONITORING [Radar Screen]
-        └── INTEGRATION
-            ├── APIS [Puzzle Connect]
-            └── MICROSERVICES [Building Blocks]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Creative Process",
-        "prompt": """A handrawn colorful mind map diagram, artistic style, watercolor effects, flowing connections.
-        CREATIVITY
-        ├── INSPIRATION [Constellation Stars ~60px]
-        │   ├── NATURE [Organic Patterns]
-        │   └── CULTURE [Global Icons]
-        ├── IDEATION [Floating Bubbles ~50px]
-        │   ├── BRAINSTORM [Thunder Cloud]
-        │   └── REFINEMENT [Diamond Polish]
-        ├── EXECUTION [Artist Tools ~45px]
-        │   ├── TECHNIQUE [Skilled Hands]
-        │   └── MEDIUM [Palette Mix]
-        └── PRESENTATION
-            ├── GALLERY [Frame Display]
-            └── FEEDBACK [Echo Ripples]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Future Cities",
-        "prompt": """A handrawn colorful mind map diagram, futuristic style, holographic elements, sustainable themes.
-        SMART CITY
-        ├── MOBILITY [Hover Transport ~60px]
-        │   ├── AUTONOMOUS [Self-Driving]
-        │   └── CONNECTED [Network Grid]
-        ├── ENERGY [Solar Crystal ~55px]
-        │   ├── RENEWABLE [Green Power]
-        │   └── STORAGE [Battery Hub]
-        ├── LIVING [Eco Building ~50px]
-        │   ├── VERTICAL [Sky Gardens]
-        │   └── COMMUNITY [People Connect]
-        └── INFRASTRUCTURE
-            ├── AI GRID [Neural City]
-            └── ECO SYSTEM [Nature Tech]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Health Evolution",
-        "prompt": """A handrawn colorful mind map diagram, medical style, DNA helix patterns, wellness focus.
-        HEALTH 3.0
-        ├── PREVENTION [Shield DNA ~60px]
-        │   ├── LIFESTYLE [Activity Pulse]
-        │   └── MONITORING [Health Watch]
-        ├── TREATMENT [Caduceus Tech ~55px]
-        │   ├── PERSONALIZED [DNA Code]
-        │   └── REGENERATIVE [Cell Renew]
-        ├── ENHANCEMENT [Upgrade Spiral ~50px]
-        │   ├��─ COGNITIVE [Brain Boost]
-        │   └── PHYSICAL [Body Optimize]
-        └── INTEGRATION
-            ├── AI HEALTH [Smart Doctor]
-            └── COMMUNITY [Global Care]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Space Exploration",
-        "prompt": """A handrawn colorful mind map diagram, cosmic style, star field background, planetary elements.
-        SPACE FRONTIER
-        ├── DISCOVERY [Telescope Array ~60px]
-        │   ├── MAPPING [Star Charts]
-        │   └── ANALYSIS [Data Stream]
-        ├── TRAVEL [Rocket Launch ~55px]
-        │   ├── PROPULSION [Energy Core]
-        │   └── NAVIGATION [Space Map]
-        ├── COLONIZATION [Dome City ~50px]
-        │   ├── HABITATS [Life Sphere]
-        │   └── RESOURCES [Mine Extract]
-        └── RESEARCH
-            ├── ASTROBIOLOGY [Life Search]
-            └── PHYSICS [Space Time]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Ocean Innovation",
-        "prompt": """A handrawn colorful mind map diagram, marine style, wave patterns, aqua themes.
-        OCEAN TECH
-        ├── EXPLORATION [Deep Submersible ~60px]
-        │   ├── MAPPING [Sonar Wave]
-        │   └── RESEARCH [Lab Bubble]
-        ├── CONSERVATION [Marine Life ~55px]
-        │   ├── PROTECTION [Reef Shield]
-        │   └── RESTORATION [Growth Core]
-        ├── HARVESTING [Sustainable Net ~50px]
-        │   ├── ENERGY [Wave Power]
-        │   └── RESOURCES [Bio Extract]
-        └── MONITORING
-            ├── AI SYSTEMS [Smart Sensors]
-            └── ECOLOGY [Life Web]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Quantum Computing",
-        "prompt": """A handrawn colorful mind map diagram, quantum style, wave-particle duality, matrix patterns.
-        QUANTUM TECH
-        ├── COMPUTATION [Qubit Matrix ~60px]
-        │   ├── PROCESSING [Wave Function]
-        │   └── ALGORITHMS [Code Quantum]
-        ├── APPLICATIONS [Use Cases ~55px]
-        │   ├── SIMULATION [Model World]
-        │   └── OPTIMIZATION [Peak Find]
-        ├── INFRASTRUCTURE [Q-Hardware ~50px]
-        │   ├── CONTROL [Pulse Shape]
-        │   └── COOLING [Zero Point]
-        └── DEVELOPMENT
-            ├── SOFTWARE [Q-Code Web]
-            └── INTEGRATION [Classical Bridge]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "Bio Engineering",
-        "prompt": """A handrawn colorful mind map diagram, biological style, DNA patterns, organic flow.
-        BIOTECH
-        ├── GENETICS [DNA Helix ~60px]
-        │   ├── EDITING [CRISPR Tool]
-        │   └── SYNTHESIS [Gene Build]
-        ├── APPLICATIONS [Lab Array ~55px]
-        │   ├── MEDICINE [Heal Cell]
-        │   └── AGRICULTURE [Grow Plus]
-        ├── PLATFORMS [Bio Factory ~50px]
-        │   ├── SENSORS [Live Detect]
-        │   └── PROCESSORS [Cell Compute]
-        └── INTEGRATION
-            ├── AI BIOLOGY [Smart Life]
-            └── ECOSYSTEM [Nature Net]""",
-        "width": 1024,
-        "height": 1024
-    },
-    {
-        "title": "AI Evolution",
-        "prompt": """A handrawn colorful mind map diagram, neural network style, digital patterns, intelligence flow.
-        AI FUTURE
-        ├── COGNITION [Brain Network ~60px]
-        │   ├── LEARNING [Growth Path]
-        │   └── REASONING [Logic Tree]
-        ├── PERCEPTION [Sensor Array ~55px]
-        │   ├── VISION [Eye Matrix]
-        │   └── LANGUAGE [Word Web]
-        ├── INTERACTION [Connect Hub ~50px]
-        │   ├── HUMAN [Bridge Link]
-        │   └── MACHINE [Code Path]
-        └── EVOLUTION
-            ├── CONSCIOUSNESS [Mind Spark]
-            └── CREATIVITY [Art Core]""",
-        "width": 1024,
-        "height": 1024
-    }
-]
+# Brave Search function
+def brave_search(query):
+    """Perform a web search using Brave Search API."""
+    if not BSEARCH_API:
+        return "Error: BSEARCH_API not found in environment. Please set your Brave Search API key."
+    
+    try:
+        headers = {
+            "Accept": "application/json",
+            "X-Subscription-Token": BSEARCH_API
+        }
+        
+        # Brave Search API endpoint
+        url = "https://api.search.brave.com/res/v1/web/search"
+        params = {
+            "q": query,
+            "count": 5  # Number of results to return
+        }
+        
+        response = requests.get(url, headers=headers, params=params)
+        response.raise_for_status()
+        
+        data = response.json()
+        
+        # Format the search results
+        results = []
+        if "web" in data and "results" in data["web"]:
+            for idx, result in enumerate(data["web"]["results"][:5], 1):
+                title = result.get("title", "No title")
+                url = result.get("url", "")
+                description = result.get("description", "No description")
+                results.append(f"{idx}. **{title}**\n   URL: {url}\n   {description}\n")
+        
+        if results:
+            return "🔍 **Web Search Results:**\n\n" + "\n".join(results)
+        else:
+            return "No search results found."
+            
+    except Exception as e:
+        return f"Search error: {str(e)}"
 
-# Convert examples to Gradio format
-GRADIO_EXAMPLES = [
-    [example["prompt"], example["width"], example["height"]]
-    for example in EXAMPLES
-]
+def openrouter_chat(user_message, history, use_web_search):
+    """Send user_message and history to mistralai/devstral-small:free and append to history."""
+    history = history or []
+    
+    # If web search is enabled, perform search first
+    search_context = ""
+    if use_web_search and user_message.strip():
+        search_results = brave_search(user_message)
+        search_context = f"\n\n{search_results}\n\nBased on the above search results, please answer the following question:\n"
+        # Add search results to history as a system message
+        history.append(("🔍 Web Search Query", user_message))
+        history.append(("🌐 Search Results", search_results))
+    
+    # Build the messages list from the history and the current user message
+    messages_for_api = []
+    
+    # Add system message if web search was used
+    if search_context:
+        messages_for_api.append({
+            "role": "system", 
+            "content": "You are a helpful assistant. When web search results are provided, incorporate them into your response to give accurate and up-to-date information."
+        })
+    
+    for human_message, ai_message in history[:-2] if use_web_search else history:  # Exclude search entries from API messages
+        if not human_message.startswith("🔍") and not human_message.startswith("🌐"):
+            messages_for_api.append({"role": "user", "content": human_message})
+            if ai_message is not None:
+                messages_for_api.append({"role": "assistant", "content": ai_message})
+    
+    # Add the current user message with search context if applicable
+    current_message = search_context + user_message if search_context else user_message
+    messages_for_api.append({"role": "user", "content": current_message})
+    
+    try:
+        # Call the model with the mistralai/Devstral-Small-2505 for full conversation history
+        resp = client.chat.completions.create(
+            model="mistralai/devstral-small:free",
+            messages=messages_for_api,
+            # you can tweak max_tokens, temperature, etc. here
+        )
+        bot_reply = resp.choices[0].message.content
+        # Append the user message and bot reply to the history for Gradio display
+        history.append((user_message, bot_reply))
+    except Exception as e:
+        # Handle potential errors and append an error message to the history
+        history.append((user_message, f"Error: {e}"))
+    
+    return history, ""
 
-@spaces.GPU()  # 이 데코레이터를 다시 추가
-def infer(prompt, seed=42, randomize_seed=False, width=1024, height=1024, num_inference_steps=4, progress=gr.Progress(track_tqdm=True)):
-    if randomize_seed:
-        seed = random.randint(0, MAX_SEED)
-    generator = torch.Generator().manual_seed(seed)
-    image = pipe(
-        prompt=prompt,
-        width=width,
-        height=height,
-        num_inference_steps=num_inference_steps,
-        generator=generator,
-        guidance_scale=0.0
-    ).images[0]
-    return image, seed
+# Enhanced CSS with gradient background and visual improvements
+custom_css = """
+/* Gradient background */
+.gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
 
-# CSS 스타일 수정
-css = """
+/* Main container styling */
 .container {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.input-column {
-    flex: 1;
+/* Chat container with glassmorphism effect */
+#component-0 {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     padding: 20px;
-    border-right: 2px solid #eee;
-    max-width: 800px;  /* 증가된 최대 너비 */
 }
 
-.examples-column {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    background: #f7f7f7;
+/* Chatbot styling */
+.chatbot {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border-radius: 15px !important;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
 }
 
-.title {
-    text-align: center;
-    color: #2a2a2a;
-    padding: 20px;
-    font-size: 2.5em;
-    font-weight: bold;
-    background: linear-gradient(90deg, #f0f0f0 0%, #ffffff 100%);
-    border-bottom: 3px solid #ddd;
-    margin-bottom: 30px;
+/* Message bubbles */
+.message {
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    margin: 8px 0 !important;
 }
 
-.subtitle {
-    text-align: center;
-    color: #666;
-    margin-bottom: 30px;
+.user {
+    background-color: #667eea !important;
+    color: white !important;
+    margin-left: 20% !important;
 }
 
-.input-box {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    margin-bottom: 20px;
-    width: 100%;  /* 전체 너비 사용 */
+.bot {
+    background-color: #f0f0f0 !important;
+    color: #333 !important;
+    margin-right: 20% !important;
 }
 
-/* 텍스트 입력 박스 스타일 */
-.input-box textarea {
-    width: 100% !important;  /* 강제 너비 100% */
-    min-width: 600px !important;  /* 최소 너비 설정 */
-    font-size: 14px !important;
-    line-height: 1.5 !important;
-    padding: 12px !important;
+/* Input styling */
+.textbox {
+    border-radius: 10px !important;
+    border: 2px solid #667eea !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    font-size: 16px !important;
 }
 
-.example-card {
-    background: white;
-    padding: 15px;
-    margin: 10px 0;
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+.textbox:focus {
+    border-color: #764ba2 !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
 }
 
-.example-title {
-    font-weight: bold;
-    color: #2a2a2a;
-    margin-bottom: 10px;
+/* Checkbox styling */
+.checkbox-group {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border-radius: 10px !important;
+    padding: 10px !important;
+    margin: 10px 0 !important;
 }
 
-/* 레이아웃 조정 */
-.contain {
-    max-width: 1400px !important;  /* 전체 컨테이너 너비 증가 */
-    margin: 0 auto !important;
+/* Button styling */
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 10px 20px !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important;
 }
 
-/* 입력 영역 조정 */
-.input-area {
-    flex: 2 !important;  /* 입력 영역 비율 증가 */
+button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
 }
 
-/* 예제 영역 조정 */
-.examples-area {
-    flex: 1 !important;
+/* Title styling */
+h1, h2 {
+    color: white !important;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
 }
-"""
 
+/* Markdown styling */
+.markdown-text {
+    color: white !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
+}
 
-# Gradio 인터페이스 수정
-with gr.Blocks(css=css) as demo:
-    gr.Markdown(
-        """
-        <div class="title">FLUX Mindmap Generator</div>
-        <div class="subtitle">Create beautiful hand-drawn style diagrams using FLUX AI</div>
-        """)
+/* Web search results styling */
+.message:has(.search-results) {
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
+    border-left: 4px solid #ff6b6b !important;
+}
 
+/* Responsive design */
+@media (max-width: 768px) {
+    .user {
+        margin-left: 10% !important;
+    }
+    .bot {
+        margin-right: 10% !important;
+    }
+}
+"""
 
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        <div style="text-align: center; padding: 20px;">
+            <h1 style="font-size: 3em; margin-bottom: 10px;">🦜🔗 AI Chat Assistant</h1>
+            <h2 style="font-size: 1.5em; opacity: 0.9;">Powered by Devstral-Small with Brave Search Integration</h2>
+        </div>
+        """,
+        elem_id="header"
+    )
     
-    with gr.Row(equal_height=True) as main_row:
-        # 왼쪽 입력 컬럼
-        with gr.Column(elem_id="input-column", scale=2):  # scale 값 증가
-            with gr.Group(elem_classes="input-box"):
-                prompt = gr.Text(
-                    label="Diagram Prompt",
-                    placeholder="Enter your diagram structure...",
-                    lines=10,  # 줄 수 증가
-                    elem_classes="prompt-input"  # CSS 클래스 추가
+    with gr.Row():
+        with gr.Column(scale=4):
+            chatbot = gr.Chatbot(
+                label="💬 Chat History",
+                height=500,
+                elem_classes=["chatbot"],
+                bubble_full_width=False
+            )
+            
+            with gr.Row():
+                msg_in = gr.Textbox(
+                    placeholder="Type your question here… (Press Enter to send)",
+                    label="✍️ Your Message",
+                    scale=4,
+                    lines=2
                 )
-   
-                run_button = gr.Button("Generate Diagram", variant="primary")
-                result = gr.Image(label="Generated Diagram")
             
-            with gr.Accordion("Advanced Settings", open=False):
-                seed = gr.Slider(
-                    label="Seed",
-                    minimum=0,
-                    maximum=MAX_SEED,
-                    step=1,
-                    value=0,
+            with gr.Row():
+                use_web_search = gr.Checkbox(
+                    label="🔍 Enable Web Search",
+                    value=True,
+                    info="Search the web for current information before answering"
                 )
-                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+                clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
+        
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+                ### 📋 Features
+                - 💬 Real-time chat with AI
+                - 🔍 Web search integration
+                - 📜 Conversation history
+                - 🎨 Beautiful gradient UI
                 
-                with gr.Row():
-                    width = gr.Slider(
-                        label="Width",
-                        minimum=256,
-                        maximum=MAX_IMAGE_SIZE,
-                        step=32,
-                        value=1024,
-                    )
-                    height = gr.Slider(
-                        label="Height",
-                        minimum=256,
-                        maximum=MAX_IMAGE_SIZE,
-                        step=32,
-                        value=1024,
-                    )
+                ### 🔧 Tips
+                - Enable web search for current events
+                - Ask follow-up questions
+                - Clear chat to start fresh
                 
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=50,
-                    step=1,
-                    value=4,
-                )
-        
-        # 오른쪽 예제 컬럼
-        with gr.Column(elem_id="examples-column", scale=1):
-            gr.Markdown("### Example Diagrams")
-            for example in EXAMPLES:
-                with gr.Group(elem_classes="example-card"):
-                    gr.Markdown(f"#### {example['title']}")
-                    gr.Markdown(f"```\n{example['prompt']}\n```")
-                    
-                    def create_example_handler(ex):
-                        def handler():
-                            return {
-                                prompt: ex["prompt"],
-                                width: ex["width"],
-                                height: ex["height"]
-                            }
-                        return handler
-                    
-                    gr.Button("Use This Example", size="sm").click(
-                        fn=create_example_handler(example),
-                        outputs=[prompt, width, height]
-                    )
-
-    gr.on(
-        triggers=[run_button.click, prompt.submit],
-        fn=infer,
-        inputs=[prompt, seed, randomize_seed, width, height, num_inference_steps],
-        outputs=[result, seed]
+                ### ⚡ Shortcuts
+                - Enter: Send message
+                - Shift+Enter: New line
+                """,
+                elem_classes=["markdown-text"]
+            )
+    
+    # Event handlers
+    msg_in.submit(
+        openrouter_chat, 
+        inputs=[msg_in, chatbot, use_web_search], 
+        outputs=[chatbot, msg_in]
+    )
+    
+    clear_btn.click(lambda: ([], ""), outputs=[chatbot, msg_in])
+    
+    # Add example queries
+    gr.Examples(
+        examples=[
+            ["What's the latest news about AI?", True],
+            ["Explain quantum computing in simple terms", False],
+            ["What's the weather like today?", True],
+            ["Write a Python function to sort a list", False],
+            ["What are the current stock market trends?", True]
+        ],
+        inputs=[msg_in, use_web_search],
+        label="💡 Example Queries"
     )
 
-# 앱 실행
-if __name__ == "__main__":
-    demo.queue()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        show_error=True,
-        debug=True
-    )
+demo.launch()