Update app.py

app.py

@@ -455,12 +455,11 @@ def main():
         print(f"🔥 GPU Memory: {torch.cuda.memory_allocated() // 1024**2} MB allocated")
         print(f"📊 GPU Memory Reserved: {torch.cuda.memory_reserved() // 1024**2} MB reserved")
     
-    # Modern glassmorphism CSS
-    modern_css = """
+    # Modern glassmorphism CSS - keeping it simpler to avoid quote issues
+    modern_css = '''
     /* Creed AI - Modern Glassmorphism Design */
     :root {
         --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
         --glass-bg: rgba(255, 255, 255, 0.08);
         --glass-border: rgba(255, 255, 255, 0.18);
         --text-primary: #ffffff;
@@ -469,53 +468,14 @@ def main():
         --accent-blue: #3b82f6;
         --shadow-glow: 0 8px 32px rgba(139, 92, 246, 0.3);
     }
-    /* Main container with animated background */
+    
     .gradio-container {
         min-height: 100vh !important;
         background: var(--primary-gradient) !important;
-        background-attachment: fixed !important;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
         color: var(--text-primary) !important;
         padding: 20px !important;
-        position: relative !important;
-        overflow-x: hidden !important;
-    }
-    .gradio-container::before {
-        content: '';
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: 
-            radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
-            radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
-            radial-gradient(circle at 40% 40%, rgba(167, 139, 250, 0.2) 0%, transparent 50%);
-        pointer-events: none;
-        z-index: -1;
-    }
-    /* Floating particles animation */
-    .gradio-container::after {
-        content: '';
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-image: 
-            radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
-            radial-gradient(2px 2px at 40px 70px, rgba(139, 92, 246, 0.4), transparent),
-            radial-gradient(1px 1px at 90px 40px, rgba(59, 130, 246, 0.3), transparent);
-        background-size: 120px 120px;
-        animation: float 20s ease-in-out infinite;
-        pointer-events: none;
-        z-index: -1;
     }
-    @keyframes float {
-        0%, 100% { transform: translateY(0px) rotate(0deg); }
-        50% { transform: translateY(-20px) rotate(180deg); }
-    }
-    /* Header styling */
+    
     .header {
         background: var(--glass-bg) !important;
         backdrop-filter: blur(20px) !important;
@@ -525,35 +485,17 @@ def main():
         margin-bottom: 24px !important;
         text-align: center !important;
         box-shadow: var(--shadow-glow) !important;
-        position: relative !important;
-        overflow: hidden !important;
-    }
-    .header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
     }
+    
     .header h1 {
         font-size: 36px !important;
         font-weight: 700 !important;
         background: linear-gradient(135deg, #ffffff 0%, #a855f7 50%, #3b82f6 100%) !important;
         -webkit-background-clip: text !important;
         -webkit-text-fill-color: transparent !important;
-        background-clip: text !important;
         margin: 0 0 12px 0 !important;
-        text-shadow: 0 0 30px rgba(168, 85, 247, 0.5) !important;
-    }
-    .header p {
-        font-size: 16px !important;
-        color: var(--text-secondary) !important;
-        margin: 0 !important;
-        font-weight: 500 !important;
     }
-    /* Info boxes with glass effect */
+    
     .info-box {
         background: rgba(255, 255, 255, 0.06) !important;
         backdrop-filter: blur(16px) !important;
@@ -562,41 +504,31 @@ def main():
         padding: 20px !important;
         margin: 16px 0 !important;
         color: var(--text-secondary) !important;
-        font-size: 14px !important;
-        line-height: 1.6 !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
     }
+    
     .status-box {
         background: rgba(16, 185, 129, 0.1) !important;
-        backdrop-filter: blur(16px) !important;
         border: 1px solid rgba(16, 185, 129, 0.3) !important;
         border-radius: 16px !important;
         padding: 16px 20px !important;
         margin: 16px 0 !important;
         color: #10b981 !important;
         font-weight: 600 !important;
-        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2) !important;
     }
-    /* Chat area styling */
-    .chat-area {
+    
+    .chat-area, .tools-area {
         background: var(--glass-bg) !important;
         backdrop-filter: blur(20px) !important;
         border: 1px solid var(--glass-border) !important;
         border-radius: 20px !important;
         margin: 16px 0 !important;
-        overflow: hidden !important;
         box-shadow: var(--shadow-glow) !important;
     }
-    /* Tools section */
+    
     .tools-area {
-        background: var(--glass-bg) !important;
-        backdrop-filter: blur(20px) !important;
-        border: 1px solid var(--glass-border) !important;
-        border-radius: 20px !important;
         padding: 28px !important;
-        margin: 24px 0 !important;
-        box-shadow: var(--shadow-glow) !important;
     }
+    
     .tools-title {
         font-size: 22px !important;
         font-weight: 600 !important;
@@ -604,42 +536,8 @@ def main():
         margin: 0 0 20px 0 !important;
         padding-bottom: 12px !important;
         border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
-        background: linear-gradient(135deg, #ffffff 0%, #a855f7 100%) !important;
-        -webkit-background-clip: text !important;
-        -webkit-text-fill-color: transparent !important;
-    }
-    /* Form elements */
-    .gradio-textbox input,
-    .gradio-textbox textarea {
-        background: rgba(255, 255, 255, 0.08) !important;
-        backdrop-filter: blur(10px) !important;
-        border: 1px solid rgba(255, 255, 255, 0.16) !important;
-        color: var(--text-primary) !important;
-        border-radius: 12px !important;
-        padding: 12px 16px !important;
-        transition: all 0.3s ease !important;
-        font-size: 14px !important;
-    }
-    .gradio-textbox input:focus,
-    .gradio-textbox textarea:focus {
-        border-color: var(--accent-purple) !important;
-        outline: none !important;
-        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3) !important;
-        background: rgba(255, 255, 255, 0.12) !important;
-    }
-    .gradio-textbox input::placeholder,
-    .gradio-textbox textarea::placeholder {
-        color: rgba(255, 255, 255, 0.5) !important;
-    }
-    /* Labels */
-    .gradio-container label {
-        color: var(--text-secondary) !important;
-        font-weight: 500 !important;
-        font-size: 14px !important;
-        margin-bottom: 6px !important;
-        display: block !important;
     }
-    /* Buttons */
+    
     .gradio-container button {
         background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%) !important;
         color: var(--text-primary) !important;
@@ -647,20 +545,241 @@ def main():
         border-radius: 12px !important;
         padding: 12px 24px !important;
         font-weight: 600 !important;
-        cursor: pointer !important;
         transition: all 0.3s ease !important;
-        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
-        backdrop-filter: blur(10px) !important;
-        min-height: 44px !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
     }
+    
     .gradio-container button:hover {
         transform: translateY(-2px) !important;
         box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6) !important;
-        background: linear-gradient(135deg, #9333ea 0%, #2563eb 100%) !important;
     }
-    .gradio-container button:active {
-        transform: translateY(0px) !important;
-    }
+    
+    .footer {
+        text-align: center !important;
+        padding: 28px !important;
+        color: var(--text-secondary) !important;
+        background: var(--glass-bg) !important;
+        backdrop-filter: blur(20px) !important;
+        border: 1px solid var(--glass-border) !important;
+        border-radius: 20px !important;
+        margin-top: 32px !important;
+    }
+    '''
+    
+    # Create wrapper function for proper chat handling
+    def respond(message, history):
+        """Response handler for Gradio messages format"""
+        if not message.strip():
+            return "", history
+        
+        # Convert messages format to simple tuples
+        simple_history = []
+        for i in range(0, len(history), 2):
+            if i + 1 < len(history):
+                user_msg = history[i].get('content', '') if isinstance(history[i], dict) else str(history[i])
+                bot_msg = history[i + 1].get('content', '') if isinstance(history[i + 1], dict) else str(history[i + 1])
+                if user_msg and bot_msg:
+                    simple_history.append([user_msg, bot_msg])
+        
+        # Generate response
+        for response_chunk in creed_ai.generate_response(message, simple_history):
+            # Create new history with the streaming response
+            new_history = history + [
+                {"role": "user", "content": message},
+                {"role": "assistant", "content": response_chunk}
+            ]
+            yield "", new_history
+    
+    # Create the interface with modern theme
+    with gr.Blocks(
+        title="🎸 Creed Bratton AI",
+        css=modern_css,
+        theme=gr.themes.Base()  # Use base theme for better CSS control
+    ) as demo:
+        
+        # Modern header
+        gr.HTML(f"""
+        <div class="header">
+            <h1>🎸 Creed Bratton AI</h1>
+            <p>Powered by phxdev/creed-qwen-0.5b-lora • Running on {'⚡ ZeroGPU' if SPACES_AVAILABLE else '🖥️ CPU'}</p>
+        </div>
+        """)
+        
+        # Model info with glass styling
+        gr.HTML("""
+        <div class="info-box">
+            <strong>Model:</strong> phxdev/creed-qwen-0.5b-lora<br>
+            <strong>Base:</strong> Qwen 0.5B + LoRA fine-tuning<br>
+            <strong>Tokens:</strong> &lt;thinking&gt;, &lt;conspiracy&gt;, &lt;tangent&gt;<br>
+            <strong>Mode:</strong> ZeroGPU optimized + Coherence validation
+        </div>
+        """)
+        
+        # MCP status
+        if os.environ.get('GRADIO_MCP_ENABLED'):
+            gr.HTML("""
+            <div class="status-box">
+                ✓ MCP Server Active • Available as tool for Claude Desktop
+            </div>
+            """)
+        
+        # Main chat interface with glass styling
+        with gr.Row(elem_classes="chat-area"):
+            chatbot = gr.Chatbot(
+                type='messages',  # Use messages format (modern)
+                height=550,
+                show_copy_button=True,
+                show_share_button=False,
+                avatar_images=["👤", "🎸"],
+                bubble_full_width=False,
+                show_label=False,
+                placeholder="🎸 Creed is ready...",
+                container=False
+            )
+        
+        # Input with explicit send button
+        with gr.Row():
+            with gr.Column(scale=7):
+                msg = gr.Textbox(
+                    placeholder="Ask Creed anything...",
+                    container=False,
+                    submit_btn=False,  # Disable built-in submit
+                    stop_btn=False
+                )
+            with gr.Column(scale=1, min_width=100):
+                send_btn = gr.Button("Send", variant="primary", size="lg")
+        
+        # Wire up the chat - both Enter key and Send button
+        msg.submit(
+            respond,
+            inputs=[msg, chatbot],
+            outputs=[msg, chatbot],
+            show_progress="hidden"
+        )
+        
+        send_btn.click(
+            respond,
+            inputs=[msg, chatbot],
+            outputs=[msg, chatbot],
+            show_progress="hidden"
+        )
+        
+        # MCP Tools section with glass styling
+        with gr.Row(elem_classes="tools-area"):
+            gr.HTML('<div class="tools-title">🛠️ Claude → Creed Transformation Tools</div>')
+            gr.HTML("""
+            <div style="margin-bottom: 20px; padding: 12px; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 14px;">
+                <strong>These MCP tools transform Claude into Creed Bratton for your Claude Desktop workflow.</strong><br>
+                Test them here, then use them in Claude Desktop to get Creed-mode responses from Claude.
+            </div>
+            """)
+            
+            with gr.Row():
+                with gr.Column():
+                    wisdom_topic = gr.Textbox(
+                        label="Wisdom Topic",
+                        placeholder="life, business, relationships..."
+                    )
+                    wisdom_output = gr.Textbox(
+                        label="Creed Wisdom Prompt (Copy to Claude Desktop)", 
+                        interactive=False,
+                        lines=5
+                    )
+                    wisdom_btn = gr.Button("Generate Wisdom Prompt", variant="primary")
+                    
+                with gr.Column():
+                    story_situation = gr.Textbox(
+                        label="Story Request",
+                        placeholder="mysterious, business, quarry..."
+                    )
+                    story_output = gr.Textbox(
+                        label="Creed Story Prompt (Copy to Claude Desktop)",
+                        interactive=False,
+                        lines=5
+                    )
+                    story_btn = gr.Button("Generate Story Prompt", variant="primary")
+            
+            with gr.Row():
+                with gr.Column():
+                    analysis_subject = gr.Textbox(
+                        label="Analysis Subject",
+                        placeholder="business strategy, market trends..."
+                    )
+                    analysis_output = gr.Textbox(
+                        label="Creed Analysis Prompt",
+                        interactive=False,
+                        lines=4
+                    )
+                    analysis_btn = gr.Button("Generate Analysis Prompt", variant="primary")
+                    
+                with gr.Column():
+                    conspiracy_topic = gr.Textbox(
+                        label="Conspiracy Topic", 
+                        placeholder="government, corporations, technology..."
+                    )
+                    conspiracy_output = gr.Textbox(
+                        label="Creed Conspiracy Prompt",
+                        interactive=False,
+                        lines=4
+                    )
+                    conspiracy_btn = gr.Button("Generate Conspiracy Prompt", variant="primary")
+                    
+            with gr.Row():
+                activate_output = gr.Textbox(
+                    label="Creed Mode Activation Prompt (Full Transformation)",
+                    interactive=False,
+                    lines=6
+                )
+                activate_btn = gr.Button("🎸 Generate FULL Creed Mode Prompt", variant="secondary", size="lg")
+        
+        # Wire up the tools - now they're Claude transformation tools
+        wisdom_btn.click(
+            lambda topic: creed_ai.creed_wisdom_tool(topic or "life"),
+            inputs=[wisdom_topic],
+            outputs=[wisdom_output]
+        )
+        
+        story_btn.click(
+            lambda situation: creed_ai.creed_story_tool(situation or "mysterious"),
+            inputs=[story_situation],
+            outputs=[story_output]
+        )
+        
+        analysis_btn.click(
+            lambda subject: creed_ai.creed_analysis_tool(subject or "business"),
+            inputs=[analysis_subject],
+            outputs=[analysis_output]
+        )
+        
+        conspiracy_btn.click(
+            lambda topic: creed_ai.creed_conspiracy_tool(topic or "government"),
+            inputs=[conspiracy_topic],
+            outputs=[conspiracy_output]
+        )
+        
+        activate_btn.click(
+            lambda: creed_ai.creed_mode_activate_tool(),
+            outputs=[activate_output]
+        )
+        
+        # Modern footer
+        gr.HTML("""
+        <div class="footer">
+            <strong>Creed Bratton AI</strong><br>
+            Model: phxdev/creed-qwen-0.5b-lora • Trained by Mark Scott<br>
+            <em>"Sometimes a guy's gotta ride the bull, am I right?"</em>
+        </div>
+        """)
+    
+    # Launch with modern styling and public sharing
+    print("🚀 Launching Real Creed AI with modern glassmorphism design...")
+    demo.launch(
+        ssr_mode=False,
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True,  # Create public link
+        show_error=True,
+        mcp_server=True
+    )
+
+if __name__ == "__main__":
+    main()