Hugging Face's logo

Spaces:
RaH8151
/
super-agent
Running

App Files Community
super-agent / index.html
RaH8151's picture
RaH8151
Add 3 files
cf57429 verified
raw
history blame contribute delete
30.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Enhanced Super Agent UI</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #6e8efb, #a777e3);
 }
 .agent-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in-out;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 .typing {
 border-right: 2px solid;
 animation: typing 1s steps(40, end), blink-caret .75s step-end infinite;
 }
 @keyframes typing {
 from { width: 0 }
 to { width: 100% }
 }
 @keyframes blink-caret {
 from, to { border-color: transparent }
 50% { border-color: #4f46e5; }
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <i class="fas fa-robot text-3xl"></i>
 <h1 class="text-2xl font-bold">Enhanced Super Agent</h1>
 <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">v0.2-dev</span>
 </div>
 <div class="flex space-x-4">
 <button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-cog"></i>
 <span>Settings</span>
 </button>
 <button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-question-circle"></i>
 <span>Help</span>
 </button>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-8">
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <!-- Left Sidebar - Agent Selection -->
 <div class="lg:col-span-1 space-y-6">
 <div class="bg-white rounded-xl shadow-md p-6">
 <h2 class="text-xl font-semibold mb-4 text-gray-800">Available Agents</h2>
 <div class="space-y-4">
 <!-- Planner Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-tasks text-indigo-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Planner Agent</h3>
 <p class="text-sm text-gray-500">Creates detailed plans and itineraries</p>
 </div>
 </div>
 </div>
<!-- Phone Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-blue-100 p-2 rounded-full">
 <i class="fas fa-phone-alt text-blue-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Phone Agent</h3>
 <p class="text-sm text-gray-500">Makes calls and handles reservations</p>
 </div>
 </div>
 </div>
<!-- Video Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-purple-100 p-2 rounded-full">
 <i class="fas fa-video text-purple-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Video Agent</h3>
 <p class="text-sm text-gray-500">Generates video content</p>
 </div>
 </div>
 </div>
<!-- Research Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-green-100 p-2 rounded-full">
 <i class="fas fa-search text-green-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Research Agent</h3>
 <p class="text-sm text-gray-500">Performs deep research on topics</p>
 </div>
 </div>
 </div>
<!-- Data Analysis Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-yellow-100 p-2 rounded-full">
 <i class="fas fa-chart-bar text-yellow-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Data Analysis</h3>
 <p class="text-sm text-gray-500">Analyzes datasets and statistics</p>
 </div>
 </div>
 </div>
<!-- Web Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-red-100 p-2 rounded-full">
 <i class="fas fa-globe text-red-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Web Agent</h3>
 <p class="text-sm text-gray-500">Creates web content</p>
 </div>
 </div>
 </div>
<!-- Content Synthesis Agent -->
 <div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300">
 <div class="flex items-center space-x-3">
 <div class="bg-pink-100 p-2 rounded-full">
 <i class="fas fa-file-alt text-pink-600"></i>
 </div>
 <div>
 <h3 class="font-medium">Content Synthesis</h3>
 <p class="text-sm text-gray-500">Creates summaries and reports</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-white rounded-xl shadow-md p-6">
 <h2 class="text-xl font-semibold mb-4 text-gray-800">Quick Actions</h2>
 <div class="grid grid-cols-2 gap-3">
 <button class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2">
 <i class="fas fa-plane"></i>
 <span>Plan Trip</span>
 </button>
 <button class="bg-blue-50 hover:bg-blue-100 text-blue-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2">
 <i class="fas fa-book"></i>
 <span>Research</span>
 </button>
 <button class="bg-purple-50 hover:bg-purple-100 text-purple-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2">
 <i class="fas fa-video"></i>
 <span>Create Video</span>
 </button>
 <button class="bg-green-50 hover:bg-green-100 text-green-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2">
 <i class="fas fa-file-csv"></i>
 <span>Analyze Data</span>
 </button>
 </div>
 </div>
 </div>
<!-- Main Chat Area -->
 <div class="lg:col-span-2 space-y-6">
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="border-b border-gray-200 px-6 py-4">
 <h2 class="text-xl font-semibold text-gray-800">Agent Console</h2>
 </div>
<!-- Chat Messages -->
 <div class="h-96 overflow-y-auto p-6 space-y-4" id="chat-messages">
 <div class="flex items-start space-x-3">
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-robot text-indigo-600"></i>
 </div>
 <div class="bg-gray-50 rounded-lg p-3 max-w-3xl">
 <p class="text-gray-800">Hello! I'm your Enhanced Super Agent. How can I assist you today?</p>
 <p class="text-xs text-gray-500 mt-1">System initialized with safety protocols active</p>
 </div>
 </div>
<div class="flex items-start space-x-3">
 <div class="bg-gray-100 p-2 rounded-full">
 <i class="fas fa-user text-gray-600"></i>
 </div>
 <div class="bg-blue-50 rounded-lg p-3 max-w-3xl">
 <p class="text-gray-800">Plan a trip to San Diego for April 24-29, focusing on seafood and cultural sites. Then book Peohe's for dinner on the 26th for 4 people (one shellfish allergy, one vegetarian), window table preferred.</p>
 </div>
 </div>
<div class="flex items-start space-x-3">
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-robot text-indigo-600"></i>
 </div>
 <div class="bg-gray-50 rounded-lg p-3 max-w-3xl">
 <p class="text-gray-800">[PlannerAgent] Creating itinerary for 5-day trip to San Diego...</p>
 <p class="text-gray-800 mt-2">[PhoneAgent] Calling Peohe's restaurant for reservation...</p>
 <div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3">
 <p class="text-green-800 font-medium">Success! Your trip is planned and reservation is confirmed.</p>
 <div class="mt-2 text-sm text-gray-700">
 <p>• 5-day itinerary created with seafood and cultural focus</p>
 <p>• Dinner reservation at Peohe's on April 26th for 4 people</p>
 <p>• Special requests noted: shellfish allergy & vegetarian</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Input Area -->
 <div class="border-t border-gray-200 p-4 bg-gray-50">
 <div class="flex space-x-3">
 <div class="flex-grow relative">
 <textarea id="user-input" class="w-full border border-gray-300 rounded-lg pl-4 pr-12 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="2" placeholder="Type your request here..."></textarea>
 <div class="absolute right-3 bottom-3 flex space-x-2">
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-paperclip"></i>
 </button>
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-microphone"></i>
 </button>
 </div>
 </div>
 <button id="send-button" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-lg transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Agent Status -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h2 class="text-xl font-semibold mb-4 text-gray-800">Agent Status</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="bg-gray-50 rounded-lg p-4">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-medium text-gray-700">System Health</h3>
 <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Active</span>
 </div>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-500">CPU Usage</span>
 <span class="font-medium">24%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-1.5">
 <div class="bg-blue-600 h-1.5 rounded-full" style="width: 24%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-500">Memory</span>
 <span class="font-medium">1.2GB/4GB</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-1.5">
 <div class="bg-purple-600 h-1.5 rounded-full" style="width: 30%"></div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-gray-50 rounded-lg p-4">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-medium text-gray-700">Recent Activity</h3>
 <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">3 tasks</span>
 </div>
 <div class="space-y-3">
 <div class="flex items-center space-x-3">
 <div class="bg-green-100 p-1 rounded-full">
 <i class="fas fa-check-circle text-green-600 text-sm"></i>
 </div>
 <div>
 <p class="text-sm font-medium">Trip planning completed</p>
 <p class="text-xs text-gray-500">2 minutes ago</p>
 </div>
 </div>
 <div class="flex items-center space-x-3">
 <div class="bg-green-100 p-1 rounded-full">
 <i class="fas fa-check-circle text-green-600 text-sm"></i>
 </div>
 <div>
 <p class="text-sm font-medium">Restaurant reservation</p>
 <p class="text-xs text-gray-500">5 minutes ago</p>
 </div>
 </div>
 <div class="flex items-center space-x-3">
 <div class="bg-yellow-100 p-1 rounded-full">
 <i class="fas fa-spinner text-yellow-600 text-sm animate-spin"></i>
 </div>
 <div>
 <p class="text-sm font-medium">Processing request</p>
 <p class="text-xs text-gray-500">Just now</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center space-x-2 mb-4 md:mb-0">
 <i class="fas fa-robot text-indigo-600"></i>
 <span class="font-medium">Enhanced Super Agent</span>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Documentation</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
 </div>
 </div>
 <div class="mt-4 text-center md:text-left text-sm text-gray-500">
 <p>© 2023 Enhanced Super Agent. All rights reserved. Version 0.2-dev</p>
 </div>
 </div>
 </footer>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 const sendButton = document.getElementById('send-button');
 const userInput = document.getElementById('user-input');
 const chatMessages = document.getElementById('chat-messages');
// Example requests for demo purposes
 const exampleRequests = [
 "Plan a trip to San Diego for April 24-29, focusing on seafood and cultural sites",
 "Create slides about the latest developments in fusion energy",
 "Summarize the key points about the Genspark Super Agent",
 "Analyze the sales data in 'quarterly_report.xlsx' and give me summary statistics"
 ];
// Add typing indicator
 function showTypingIndicator() {
 const typingDiv = document.createElement('div');
 typingDiv.className = 'flex items-start space-x-3';
 typingDiv.innerHTML = `
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-robot text-indigo-600"></i>
 </div>
 <div class="bg-gray-50 rounded-lg p-3 max-w-3xl">
 <div class="typing w-8 h-4"></div>
 </div>
 `;
 chatMessages.appendChild(typingDiv);
 chatMessages.scrollTop = chatMessages.scrollHeight;
 return typingDiv;
 }
// Remove typing indicator
 function removeTypingIndicator(typingDiv) {
 if (typingDiv && typingDiv.parentNode) {
 typingDiv.parentNode.removeChild(typingDiv);
 }
 }
// Add user message to chat
 function addUserMessage(message) {
 const messageDiv = document.createElement('div');
 messageDiv.className = 'flex items-start space-x-3 fade-in';
 messageDiv.innerHTML = `
 <div class="bg-gray-100 p-2 rounded-full">
 <i class="fas fa-user text-gray-600"></i>
 </div>
 <div class="bg-blue-50 rounded-lg p-3 max-w-3xl">
 <p class="text-gray-800">${message}</p>
 </div>
 `;
 chatMessages.appendChild(messageDiv);
 chatMessages.scrollTop = chatMessages.scrollHeight;
 }
// Add agent response to chat
 function addAgentResponse(response) {
 const responseDiv = document.createElement('div');
 responseDiv.className = 'flex items-start space-x-3 fade-in';
 responseDiv.innerHTML = `
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-robot text-indigo-600"></i>
 </div>
 <div class="bg-gray-50 rounded-lg p-3 max-w-3xl">
 ${response}
 </div>
 `;
 chatMessages.appendChild(responseDiv);
 chatMessages.scrollTop = chatMessages.scrollHeight;
 }
// Generate a random agent response (for demo)
 function generateAgentResponse(userMessage) {
 // Simple response logic for demo
 if (userMessage.toLowerCase().includes('trip') || userMessage.toLowerCase().includes('san diego')) {
 return `
 <p class="text-gray-800">[PlannerAgent] Creating itinerary for trip to San Diego...</p>
 <p class="text-gray-800 mt-2">[PhoneAgent] Making restaurant reservations...</p>
 <div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3">
 <p class="text-green-800 font-medium">Success! Your trip is planned and reservations are confirmed.</p>
 <div class="mt-2 text-sm text-gray-700">
 <p>• 5-day itinerary created with seafood and cultural focus</p>
 <p>• Dinner reservations confirmed for your requested dates</p>
 <p>• Special dietary needs noted for all reservations</p>
 </div>
 </div>
 `;
 } else if (userMessage.toLowerCase().includes('slides') || userMessage.toLowerCase().includes('fusion')) {
 return `
 <p class="text-gray-800">[ResearchAgent] Researching latest developments in fusion energy...</p>
 <p class="text-gray-800 mt-2">[ContentSynthesis] Creating slide deck outline...</p>
 <div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3">
 <p class="text-green-800 font-medium">Research complete! Here's your slide deck outline:</p>
 <div class="mt-2 text-sm text-gray-700">
 <p>1. Title Slide: Fusion Energy Breakthroughs</p>
 <p>2. Recent Developments in Tokamak Designs</p>
 <p>3. Advances in Laser Inertial Confinement</p>
 <p>4. Commercialization Roadmap</p>
 <p>5. Conclusion & Future Outlook</p>
 </div>
 </div>
 `;
 } else if (userMessage.toLowerCase().includes('summarize') || userMessage.toLowerCase().includes('genspark')) {
 return `
 <p class="text-gray-800">[ResearchAgent] Gathering information about Genspark Super Agent...</p>
 <div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3">
 <p class="text-green-800 font-medium">Summary of Genspark Super Agent:</p>
 <div class="mt-2 text-sm text-gray-700">
 <p>• Advanced AI system with multi-agent architecture</p>
 <p>• Capabilities include planning, research, content creation</p>
 <p>• Version 0.2-dev with enhanced synthesis features</p>
 <p>• Safety protocols and transparency mechanisms built-in</p>
 </div>
 </div>
 `;
 } else if (userMessage.toLowerCase().includes('analyze') || userMessage.toLowerCase().includes('data')) {
 return `
 <p class="text-gray-800">[DataAnalysisAgent] Loading 'quarterly_report.xlsx'...</p>
 <p class="text-gray-800 mt-2">Analyzing sales data patterns...</p>
 <div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3">
 <p class="text-green-800 font-medium">Analysis Results:</p>
 <div class="mt-2 text-sm text-gray-700">
 <p>• Total Revenue: $1.2M (Q3 2023)</p>
 <p>• Top Performing Product: Model X-200 (32% of revenue)</p>
 <p>• Growth Rate: 12% quarter-over-quarter</p>
 <p>• Customer Retention: 78% (up from 72% last quarter)</p>
 </div>
 </div>
 `;
 } else {
 return `
 <p class="text-gray-800">I've received your request. Let me process that for you...</p>
 <div class="mt-3 bg-blue-50 border border-blue-100 rounded-lg p-3">
 <p class="text-blue-800 font-medium">Request received</p>
 <p class="mt-1 text-sm text-gray-700">The appropriate agents are being activated to handle your request.</p>
 </div>
 `;
 }
 }
// Handle send button click
 sendButton.addEventListener('click', function() {
 const message = userInput.value.trim();
 if (message) {
 addUserMessage(message);
 userInput.value = '';
// Show typing indicator
 const typingDiv = showTypingIndicator();
// Simulate processing delay
 setTimeout(() => {
 removeTypingIndicator(typingDiv);
 const response = generateAgentResponse(message);
 addAgentResponse(response);
 }, 1500 + Math.random() * 2000);
 }
 });
// Handle Enter key press
 userInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter' && !e.shiftKey) {
 e.preventDefault();
 sendButton.click();
 }
 });
// Add example requests to input placeholder
 let currentExample = 0;
 function rotateExample() {
 userInput.placeholder = `Try: ${exampleRequests[currentExample]}`;
 currentExample = (currentExample + 1) % exampleRequests.length;
 }
rotateExample();
 setInterval(rotateExample, 3000);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RaH8151/super-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>