creative/creative_app.py

"""
Creative Agent Gradio Application
Web interface for the Creative Agent - Content Creation Studio
"""

import gradio as gr
import asyncio
import logging
from .creative_agent import CreativeAgent


class CreativeApp:
    """Gradio web application for Creative Agent."""
    
    def __init__(self):
        self.agent = CreativeAgent()
        self.conversation_history = []
        
        # Set up logging
        logging.basicConfig(level=logging.INFO)
        
        # Create the interface
        self.interface = self._create_interface()
    
    def _create_interface(self):
        """Create the Gradio interface."""
        
        with gr.Blocks(
            title="🎨 Creative Agent - Secure AI Suite",
            theme=gr.themes.Soft(
                primary_hue="purple",
                secondary_hue="gray", 
                neutral_hue="slate"
            ),
            css="""
            .container { max-width: 1200px; margin: auto; }
            .chatbot { height: 500px; }
            .status-card { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; }
            .tool-card { border: 2px solid #e2e8f0; border-radius: 8px; padding: 12px; margin: 8px 0; }
            .preview-box { border: 2px dashed #cbd5e0; padding: 20px; text-align: center; background: #f7fafc; }
            """
        ) as app:
            
            # Header
            gr.HTML("""
            <div style='text-align: center; padding: 20px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;'>
                <h1 style='margin: 0; font-size: 2.5em;'>🎨 Creative Agent</h1>
                <p style='margin: 10px 0; font-size: 1.2em;'>Content Creation Studio & Bilingual Assets</p>
                <p style='margin: 0; opacity: 0.8;'>🔐 Secure AI Agents Suite</p>
            </div>
            """)
            
            with gr.Row():
                # Left column - Chat interface
                with gr.Column(scale=2):
                    gr.HTML("<h3>💬 Chat with Creative Agent</h3>")
                    
                    chatbot = gr.Chatbot(
                        label="Creative Content Assistant",
                        height=400,
                        elem_classes=["chatbot"],
                        avatar_images=(None, "🎨")
                    )
                    
                    with gr.Row():
                        msg_input = gr.Textbox(
                            placeholder="Ask me to create carousels, scripts, brand content, or bilingual materials...",
                            lines=3,
                            max_lines=5,
                            label="Your Message"
                        )
                        with gr.Column(scale=0):
                            send_btn = gr.Button("Send", variant="primary")
                            clear_btn = gr.Button("Clear", variant="secondary")
                
                # Right column - Creative Tools and Preview
                with gr.Column(scale=1):
                    gr.HTML("<h3>🛠️ Creative Services</h3>")
                    
                    tools_info = gr.HTML("""
                    <div class="tool-card">
                        <h4>📱 Content Carousels</h4>
                        <p>• Bilingual presentations<br>• Social media slides<br>• Product showcases</p>
                    </div>
                    <div class="tool-card">
                        <h4>📝 Script Writing</h4>
                        <p>• Commercial scripts<br>• Video narratives<br>• Presentation content</p>
                    </div>
                    <div class="tool-card">
                        <h4>🏢 Brand Content</h4>
                        <p>• Brand guidelines<br>• Logo packages<br>• Marketing materials</p>
                    </div>
                    <div class="tool-card">
                        <h4>🌐 Bilingual Support</h4>
                        <p>• English ↔ Nepali<br>• Cultural adaptation<br>• Localized content</p>
                    </div>
                    """)
                    
                    gr.HTML("<h3>📊 System Status</h3>")
                    status_display = gr.HTML()
                    
                    gr.HTML("<h3>🎨 Creative Preview</h3>")
                    preview_box = gr.HTML("""
                    <div class="preview-box">
                        <h4>🎨 Latest Creation</h4>
                        <p>Ready to create your next masterpiece!</p>
                        <p><em>Content will appear here after generation</em></p>
                    </div>
                    """)
            
            # Event handlers
            def user(user_message, history):
                """Handle user input."""
                if not user_message.strip():
                    return history, ""
                
                # Add user message to history
                history.append((user_message, None))
                return history, ""
            
            async def bot_response(history, user_message):
                """Generate bot response."""
                if not user_message.strip():
                    return history
                
                # Get response from agent
                response = await self.agent.handle_user_input(user_message)
                
                # Add bot response to history
                history[-1] = (user_message, response)
                
                # Update preview box with latest creation
                if "Created" in response or "Generated" in response or "Package" in response:
                    preview_html = f"""
                    <div class="preview-box">
                        <h4>🎨 Latest Creation</h4>
                        <div style="max-height: 200px; overflow-y: auto; font-size: 0.9em; margin-top: 10px;">
                        {response.replace(chr(10), '<br>')}
                        </div>
                    </div>
                    """
                    return history, preview_html
                
                return history, """<div class="preview-box"><h4>🎨 Ready for Creation</h4><p>Ask me to create content and I'll show you the results here!</p></div>"""
            
            def clear_conversation():
                """Clear conversation history."""
                return [], """<div class="preview-box"><h4>🎨 Canvas Clean</h4><p>Ready for your next creative project!</p></div>"""
            
            def update_status():
                """Update status display."""
                status = self.agent.get_status()
                return f"""
                <div class="status-card" style="padding: 15px; border-radius: 8px;">
                    <h4>✅ Creative Status</h4>
                    <p><strong>Agent:</strong> {status['name']}</p>
                    <p><strong>Status:</strong> {status['status']}</p>
                    <p><strong>Languages:</strong> English, Nepali, Bilingual</p>
                    <p><strong>Services:</strong> Content, Scripts, Assets</p>
                    <p><strong>Security:</strong> {'🛡️ Enabled' if status['security_enabled'] else '❌ Disabled'}</p>
                </div>
                """
            
            # Connect events
            send_btn.click(
                user,
                inputs=[msg_input, chatbot],
                outputs=[chatbot, msg_input]
            ).then(
                bot_response,
                inputs=[chatbot, msg_input],
                outputs=[chatbot, preview_box]
            )
            
            msg_input.submit(
                user,
                inputs=[msg_input, chatbot],
                outputs=[chatbot, msg_input]
            ).then(
                bot_response,
                inputs=[chatbot, msg_input],
                outputs=[chatbot, preview_box]
            )
            
            clear_btn.click(clear_conversation, outputs=[chatbot, preview_box])
            
            # Initial status update
            app.load(update_status, outputs=status_display)
        
        return app
    
    def launch(self, **kwargs):
        """Launch the Gradio application."""
        self.interface.launch(
            server_name="0.0.0.0",
            server_port=7862,
            share=False,
            show_error=True,
            quiet=False,
            **kwargs
        )


# Example usage and quick commands
EXAMPLE_QUERIES = [
    "Create a 5-slide carousel about our new product in English and Nepali",
    "Write a 60-second commercial script for a tech startup",
    "Design brand guidelines for 'TechCorp Nepal'",
    "Translate 'Hello, welcome to our website' to Nepali",
    "Package logo assets in high resolution",
    "Create a content calendar for social media"
]


def main():
    """Main function to run the Creative Agent app."""
    print("🎨 Starting Creative Agent...")
    print("🎭 Loading content creation tools...")
    print("🌐 Initializing bilingual services...")
    print("📦 Preparing asset generation...")
    
    app = CreativeApp()
    
    print("\n" + "="*60)
    print("🎨 CREATIVE AGENT - CONTENT CREATION STUDIO")
    print("="*60)
    print("\n💡 Example creative requests you can try:")
    for i, query in enumerate(EXAMPLE_QUERIES, 1):
        print(f"   {i}. {query}")
    print("\n🌐 Starting Gradio server...")
    print("🔗 Open your browser to: http://localhost:7862")
    print("\n" + "="*60)
    
    app.launch()


if __name__ == "__main__":
    main()