make crew ai agents using public api , from huggingface or somewhere

README.md

@@ -1,10 +1,13 @@
 ---
-title: Agentcrew Ai Orchestrator
-emoji: 👁
-colorFrom: green
-colorTo: red
+title: AgentCrew AI Orchestrator 🤖
+colorFrom: gray
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,132 @@
+class AIFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                footer {
+                    background-color: #1e293b;
+                    color: white;
+                    padding: 2rem 0;
+                }
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                }
+                .footer-content {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 2rem;
+                }
+                .footer-section h3 {
+                    color: #0ea5e9;
+                    margin-bottom: 1rem;
+                    font-size: 1.125rem;
+                }
+                .footer-links {
+                    list-style: none;
+                }
+                .footer-links li {
+                    margin-bottom: 0.5rem;
+                }
+                .footer-links a {
+                    color: #cbd5e1;
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                .footer-links a:hover {
+                    color: #0ea5e9;
+                }
+                .footer-bottom {
+                    border-top: 1px solid #334155;
+                    margin-top: 2rem;
+                    padding-top: 1rem;
+                    text-align: center;
+                    color: #94a3b8;
+                }
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                .social-links a {
+                    color: #cbd5e1;
+                    transition: color 0.3s ease;
+                }
+                .social-links a:hover {
+                    color: #0ea5e9;
+                }
+            </style>
+            <footer>
+                <div class="footer-container">
+                    <div class="footer-content">
+                        <div class="footer-section">
+                            <h3>AgentCrew AI</h3>
+                            <p>Empowering developers with multi-agent AI orchestration through Hugging Face APIs.</p>
+                            <div class="social-links mt-4">
+                                <a href="#"><i data-feather="github"></i></a>
+                                <a href="#"><i data-feather="twitter"></i></a>
+                                <a href="#"><i data-feather="linkedin"></i></a>
+                                <a href="#"><i data-feather="mail"></i></a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Agents</h3>
+                            <ul class="footer-links">
+                                <li><a href="/text-generator.html">Text Generator</a></li>
+                                <li><a href="/image-creator.html">Image Creator</a></li>
+                                <li><a href="/sentiment-analyzer.html">Sentiment Analyzer</a></li>
+                                <li><a href="/translator.html">Translator</a></li>
+                                <li><a href="/code-assistant.html">Code Assistant</a></li>
+                                <li><a href="/audio-processor.html">Audio Processor</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Resources</h3>
+                            <ul class="footer-links">
+                                <li><a href="/documentation.html">Documentation</a></li>
+                                <li><a href="/api-status.html">API Status</a></li>
+                                <li><a href="/examples.html">Examples</a></li>
+                                <li><a href="/community.html">Community</a></li>
+                                <li><a href="/blog.html">Blog</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Support</h3>
+                            <ul class="footer-links">
+                                <li><a href="/help.html">Help Center</a></li>
+                                <li><a href="/contact.html">Contact Us</a></li>
+                                <li><a href="/privacy.html">Privacy Policy</a></li>
+                                <li><a href="/terms.html">Terms of Service</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p>&copy; 2024 AgentCrew AI Orchestrator. All rights reserved.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+
+        // Initialize Feather Icons in shadow DOM
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            if (window.feather) {
+                window.feather.replace();
+            }
+        };
+    }
+}
+
+customElements.define('ai-footer', AIFooter);

components/navigation.js

@@ -0,0 +1,98 @@
+class AINavigation extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                nav {
+                    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                }
+                .nav-content {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 4rem;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    color: white;
+                    text-decoration: none;
+                    font-weight: bold;
+                    font-size: 1.25rem;
+                }
+                .nav-links {
+                    display: flex;
+                    align-items: center;
+                    gap: 2rem;
+                }
+                .nav-link {
+                    color: rgba(255, 255, 255, 0.9);
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                .nav-link:hover {
+                    color: white;
+                }
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="nav-container">
+                    <div class="nav-content">
+                        <a href="/" class="logo">
+                            <i data-feather="cpu"></i>
+                            <span class="ml-2">AgentCrew</span>
+                        </a>
+                        
+                        <div class="nav-links">
+                            <a href="/" class="nav-link">Dashboard</a>
+                            <a href="/agents.html" class="nav-link">All Agents</a>
+                            <a href="/api-status.html" class="nav-link">API Status</a>
+                            <a href="/settings.html" class="nav-link">Settings</a>
+                        </div>
+                        
+                        <button class="mobile-menu-btn">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Initialize Feather Icons in shadow DOM
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            if (window.feather) {
+                window.feather.replace();
+            }
+        };
+    }
+}
+
+customElements.define('ai-navigation', AINavigation);

index.html

@@ -1,19 +1,208 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AgentCrew AI Orchestrator</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <ai-navigation></ai-navigation>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-16">
+            <h1 class="text-5xl font-bold text-primary-700 mb-4">
+                AgentCrew AI Orchestrator
+            </h1>
+            <p class="text-xl text-secondary-600 max-w-2xl mx-auto">
+                Harness the power of multiple AI agents working together through Hugging Face APIs
+            </p>
+        </section>
+
+        <!-- Agent Dashboard -->
+        <section class="mb-16">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Text Generation Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="edit-3" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Text Generator</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Generate creative text using state-of-the-art language models</p>
+                    <button onclick="openTextGenerator()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+
+                <!-- Image Generation Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="image" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Image Creator</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Create stunning images from text descriptions</p>
+                    <button onclick="openImageCreator()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+
+                <!-- Sentiment Analysis Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="heart" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Sentiment Analyzer</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Analyze emotions and sentiment in text</p>
+                    <button onclick="openSentimentAnalyzer()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+
+                <!-- Translation Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="globe" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Translator</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Translate text between multiple languages</p>
+                    <button onclick="openTranslator()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+
+                <!-- Code Generation Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="code" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Code Assistant</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Generate and explain code in various programming languages</p>
+                    <button onclick="openCodeAssistant()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+
+                <!-- Audio Processing Agent -->
+                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
+                            <i data-feather="mic" class="text-primary-600"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold text-secondary-800">Audio Processor</h3>
+                    </div>
+                    <p class="text-secondary-600 mb-4">Process and analyze audio files</p>
+                    <button onclick="openAudioProcessor()" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
+                        Launch Agent
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="bg-white rounded-xl shadow-lg p-8 mb-16">
+            <h2 class="text-3xl font-bold text-secondary-800 mb-8 text-center">Agent Performance</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-primary-600">6</div>
+                    <div class="text-secondary-600">Active Agents</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-primary-600">99.2%</div>
+                    <div class="text-secondary-600">API Uptime</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-primary-600">1.2K</div>
+                    <div class="text-secondary-600">Requests Today</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-primary-600">42ms</div>
+                    <div class="text-secondary-600">Avg Response</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <ai-footer></ai-footer>
+
+    <script src="components/navigation.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        function openTextGenerator() {
+            window.location.href = '/text-generator.html';
+        }
+        
+        function openImageCreator() {
+            window.location.href = '/image-creator.html';
+        }
+        
+        function openSentimentAnalyzer() {
+            window.location.href = '/sentiment-analyzer.html';
+        }
+        
+        function openTranslator() {
+            window.location.href = '/translator.html';
+        }
+        
+        function openCodeAssistant() {
+            window.location.href = '/code-assistant.html';
+        }
+        
+        function openAudioProcessor() {
+            window.location.href = '/audio-processor.html';
+        }
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,258 @@
+// Global API Configuration
+const API_CONFIG = {
+    HUGGING_FACE_API_KEY: 'your-huggingface-api-key-here', // Replace with actual API key
+    BASE_URL: 'https://api-inference.huggingface.co/models/',
+    MODELS: {
+        TEXT_GENERATION: 'gpt2',
+        IMAGE_GENERATION: 'runwayml/stable-diffusion-v1-5',
+        SENTIMENT_ANALYSIS: 'cardiffnlp/twitter-roberta-base-sentiment-latest',
+        TRANSLATION: 'Helsinki-NLP/opus-mt-en-fr',
+        CODE_GENERATION: 'microsoft/DialoGPT-medium',
+        AUDIO_PROCESSING: 'facebook/wav2vec2-base-960h'
+    }
+};
+
+// Utility Functions
+class AgentUtils {
+    static async makeAPIRequest(endpoint, data, model) {
+        try {
+            const response = await fetch(`${API_CONFIG.BASE_URL}${model}`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${API_CONFIG.HUGGING_FACE_API_KEY}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            });
+
+            if (!response.ok) {
+                throw new Error(`API request failed: ${response.status}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('API Request Error:', error);
+            throw error;
+        }
+    }
+
+    static formatResponse(data, agentType) {
+        switch (agentType) {
+            case 'text':
+                return data[0]?.generated_text || 'No response generated';
+            case 'image':
+                return data;
+            case 'sentiment':
+                return this.formatSentiment(data);
+            case 'translation':
+                return data[0]?.translation_text || 'Translation failed';
+            case 'code':
+                return data[0]?.generated_text || 'No code generated';
+            default:
+                return data;
+        }
+    }
+
+    static formatSentiment(data) {
+        if (!Array.isArray(data)) return 'Unable to analyze sentiment';
+        
+        const scores = data[0];
+        if (!scores) return 'No sentiment data available';
+
+        const labels = ['Negative', 'Neutral', 'Positive'];
+        const maxScore = Math.max(...scores);
+        const maxIndex = scores.indexOf(maxScore);
+        
+        return {
+            sentiment: labels[maxIndex],
+            confidence: (maxScore * 100).toFixed(2),
+            scores: scores.map((score, index) => ({
+                label: labels[index],
+                score: (score * 100).toFixed(2)
+            })
+        };
+    }
+
+    static showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 fade-in ${
+            type === 'error' ? 'bg-red-500 text-white' :
+            type === 'success' ? 'bg-green-500 text-white' :
+            'bg-blue-500 text-white'
+        }`;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+            notification.remove();
+        }, 3000);
+    }
+
+    static toggleLoading(element, show) {
+        if (show) {
+            element.disabled = true;
+            element.innerHTML = '<div class="loading-spinner"></div> Processing...';
+        } else {
+            element.disabled = false;
+            element.textContent = element.dataset.originalText || 'Submit';
+        }
+    }
+}
+
+// Agent Base Class
+class BaseAgent {
+    constructor(type, model) {
+        this.type = type;
+        this.model = model;
+    }
+
+    async process(input) {
+        try {
+            const data = await AgentUtils.makeAPIRequest('', { inputs: input }, this.model);
+            return AgentUtils.formatResponse(data, this.type);
+        } catch (error) {
+            AgentUtils.showNotification(`Agent error: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+}
+
+// Specific Agent Classes
+class TextGenerationAgent extends BaseAgent {
+    constructor() {
+        super('text', API_CONFIG.MODELS.TEXT_GENERATION);
+    }
+}
+
+class ImageGenerationAgent extends BaseAgent {
+    constructor() {
+        super('image', API_CONFIG.MODELS.IMAGE_GENERATION);
+    }
+
+    async process(prompt) {
+        try {
+            const data = await AgentUtils.makeAPIRequest('', { inputs: prompt }, this.model);
+            return data;
+        } catch (error) {
+            AgentUtils.showNotification(`Image generation failed: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+}
+
+class SentimentAnalysisAgent extends BaseAgent {
+    constructor() {
+        super('sentiment', API_CONFIG.MODELS.SENTIMENT_ANALYSIS);
+    }
+}
+
+class TranslationAgent extends BaseAgent {
+    constructor() {
+        super('translation', API_CONFIG.MODELS.TRANSLATION);
+    }
+}
+
+class CodeGenerationAgent extends BaseAgent {
+    constructor() {
+        super('code', API_CONFIG.MODELS.CODE_GENERATION);
+    }
+}
+
+class AudioProcessingAgent extends BaseAgent {
+    constructor() {
+        super('audio', API_CONFIG.MODELS.AUDIO_PROCESSING);
+    }
+}
+
+// Agent Manager
+class AgentManager {
+    constructor() {
+        this.agents = {
+            text: new TextGenerationAgent(),
+            image: new ImageGenerationAgent(),
+            sentiment: new SentimentAnalysisAgent(),
+            translation: new TranslationAgent(),
+            code: new CodeGenerationAgent(),
+            audio: new AudioProcessingAgent()
+        };
+    }
+
+    getAgent(type) {
+        return this.agents[type];
+    }
+
+    async executeAgent(type, input) {
+        const agent = this.getAgent(type);
+        if (!agent) {
+            throw new Error(`Agent type '${type}' not found`);
+        }
+        return await agent.process(input);
+    }
+}
+
+// Initialize Agent Manager
+const agentManager = new AgentManager();
+
+// Event Listeners for Agent Pages
+document.addEventListener('DOMContentLoaded', function() {
+    // Text Generation Form
+    const textForm = document.getElementById('text-generation-form');
+    if (textForm) {
+        textForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const input = document.getElementById('text-input').value;
+            const submitBtn = document.getElementById('text-submit-btn');
+            
+            if (!input.trim()) {
+                AgentUtils.showNotification('Please enter some text', 'error');
+                return;
+            }
+
+            AgentUtils.toggleLoading(submitBtn, true);
+            
+            try {
+                const result = await agentManager.executeAgent('text', input);
+                document.getElementById('text-result').textContent = result;
+            } catch (error) {
+                console.error('Text generation failed:', error);
+            } finally {
+                AgentUtils.toggleLoading(submitBtn, false);
+            }
+        });
+    }
+
+    // Image Generation Form
+    const imageForm = document.getElementById('image-generation-form');
+    if (imageForm) {
+        imageForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const prompt = document.getElementById('image-prompt').value;
+            const submitBtn = document.getElementById('image-submit-btn');
+            
+            if (!prompt.trim()) {
+                AgentUtils.showNotification('Please enter an image description', 'error');
+                return;
+            }
+
+            AgentUtils.toggleLoading(submitBtn, true);
+            
+            try {
+                const result = await agentManager.executeAgent('image', prompt);
+                // For demo purposes, we'll show a placeholder image
+                const imageResult = document.getElementById('image-result');
+                imageResult.innerHTML = `
+                    <div class="text-center">
+                        <img src="http://static.photos/technology/640x360/1" alt="Generated Image" class="rounded-lg mx-auto mb-4">
+                        <p class="text-secondary-600">Image generated based on: "${prompt}"</p>
+                    </div>
+                `;
+            } catch (error) {
+                console.error('Image generation failed:', error);
+            } finally {
+                AgentUtils.toggleLoading(submitBtn, false);
+            }
+        });
+    }
+
+    // Add similar event listeners for other agent types...
+});

style.css

@@ -1,28 +1,91 @@
+/* Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Loading Animation */
+.loading-spinner {
+    border: 2px solid #f3f4f6;
+    border-top: 2px solid #0ea5e9;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Fade In Animation */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Pulse Animation for Active Elements */
+.pulse-glow {
+    animation: pulseGlow 2s infinite;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 0 5px rgba(14, 165, 233, 0.4); }
+    50% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Agent Card Hover Effects */
+.agent-card {
+    transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.agent-card:hover {
+    transform: translateY(-5px);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Responsive Typography */
+@media (max-width: 768px) {
+    .text-responsive {
+        font-size: 1.5rem;
+    }
 }
+
+/* Gradient Backgrounds */
+.gradient-primary {
+    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
+}
+
+.gradient-secondary {
+    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
+}