Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OpenAGI Studio - AI Development Platform</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); | |
| } | |
| .card-hover: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); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .code-editor { | |
| background-color: #1e293b; | |
| border-radius: 0.5rem; | |
| } | |
| .terminal { | |
| background-color: #0f172a; | |
| border-radius: 0.5rem; | |
| font-family: 'Courier New', monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">OpenAGI<span class="text-purple-600">Studio</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Models</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Docs</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| <span class="sr-only">Notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" id="user-menu-button"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-4"> | |
| Build the Next Generation of AI | |
| </h1> | |
| <p class="text-xl text-purple-100 max-w-3xl"> | |
| OpenAGI Studio provides the tools and infrastructure to develop, train, and deploy advanced AI models with ease. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-lg shadow-md transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-play mr-2"></i> Start Building | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-lg font-medium text-lg shadow-md transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-book mr-2"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="code-editor p-4"> | |
| <div class="flex mb-4"> | |
| <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="h-3 w-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <pre class="text-green-400 overflow-x-auto"><code>from openagi import Agent | |
| class MyAgent(Agent): | |
| def __init__(self): | |
| super().__init__( | |
| name="SmartAssistant", | |
| capabilities=["nlp", "memory"], | |
| learning_rate=0.001 | |
| ) | |
| def respond(self, input): | |
| # Your custom AI logic here | |
| return self.generate_response(input) | |
| agent = MyAgent() | |
| response = agent.respond("Hello, how can I help?") | |
| print(response)</code></pre> | |
| </div> | |
| <div class="terminal mt-4 p-4 text-green-300"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-terminal mr-2"></i> | |
| <span>Terminal</span> | |
| </div> | |
| <div class="animate-pulse-slow"> | |
| <span class="text-purple-300">$</span> python my_agent.py<br> | |
| <span class="text-white">Hello! I'm SmartAssistant. I can help with various tasks.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Powerful Features for AI Development | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Everything you need to build, train, and deploy sophisticated AI models | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Modular Architecture</h3> | |
| <p class="text-gray-500"> | |
| Build AI agents with reusable components that can be easily combined and extended. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Visual Workflow Builder</h3> | |
| <p class="text-gray-500"> | |
| Design complex AI workflows with our intuitive drag-and-drop interface. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">One-Click Deployment</h3> | |
| <p class="text-gray-500"> | |
| Deploy your models to production with a single click, no DevOps required. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Real-time Monitoring</h3> | |
| <p class="text-gray-500"> | |
| Track your model's performance with comprehensive analytics and dashboards. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Collaboration Tools</h3> | |
| <p class="text-gray-500"> | |
| Work seamlessly with your team with built-in version control and sharing. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover transition duration-300 bg-gray-50 rounded-lg shadow-md p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Enterprise Security</h3> | |
| <p class="text-gray-500"> | |
| Your data and models are protected with industry-leading security measures. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Section --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-4"> | |
| Interactive Playground | |
| </h2> | |
| <p class="text-lg text-gray-500 mb-6"> | |
| Try out OpenAGI Studio right in your browser. No setup required. | |
| </p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="agent-type" class="block text-sm font-medium text-gray-700 mb-1">Agent Type</label> | |
| <select id="agent-type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500"> | |
| <option>Conversational</option> | |
| <option>Analytical</option> | |
| <option>Creative</option> | |
| <option>Custom</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="agent-input" class="block text-sm font-medium text-gray-700 mb-1">Input</label> | |
| <input type="text" id="agent-input" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" placeholder="Type your message..."> | |
| </div> | |
| <button id="run-agent" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium"> | |
| Run Agent | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm text-gray-500 ml-2">Agent Response</span> | |
| </div> | |
| </div> | |
| <div id="agent-output" class="p-4 h-64 overflow-y-auto"> | |
| <p class="text-gray-500 italic">Agent response will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Trusted by AI Teams Worldwide | |
| </h2> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <div> | |
| <h4 class="font-medium text-gray-900">Dr. Sarah Chen</h4> | |
| <p class="text-purple-600">AI Research Lead, TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "OpenAGI Studio has dramatically reduced our development time. What used to take weeks now takes days, allowing us to iterate faster and deliver better models." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <div> | |
| <h4 class="font-medium text-gray-900">James Rodriguez</h4> | |
| <p class="text-purple-600">CTO, StartupAI</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "As a small team, we couldn't afford a dedicated AI infrastructure team. OpenAGI Studio gave us enterprise-grade tools without the overhead." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <div> | |
| <h4 class="font-medium text-gray-900">Priya Patel</h4> | |
| <p class="text-purple-600">Senior ML Engineer, GlobalBank</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The visual workflow builder is a game-changer. It's made AI development accessible to more members of our team, not just the PhDs." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-4"> | |
| Ready to build the future of AI? | |
| </h2> | |
| <p class="text-xl text-purple-100 max-w-3xl mx-auto mb-8"> | |
| Join thousands of developers and researchers pushing the boundaries of artificial intelligence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-medium text-lg shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-user-plus mr-2"></i> Create Free Account | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-purple-600 px-8 py-4 rounded-lg font-medium text-lg shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-300"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Features</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white">Releases</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">About</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| <li><a href="#" class="hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Community</a></li> | |
| <li><a href="#" class="hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-white">API Status</a></li> | |
| <li><a href="#" class="hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <p>Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-3 py-2 rounded-l-md focus:outline-none focus:ring-1 focus:ring-purple-500 w-full"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-robot text-purple-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">OpenAGI<span class="text-purple-400">Studio</span></span> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| © 2023 OpenAGI Studio. All rights reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple interactive demo | |
| document.getElementById('run-agent').addEventListener('click', function() { | |
| const input = document.getElementById('agent-input').value; | |
| const output = document.getElementById('agent-output'); | |
| if (!input) { | |
| output.innerHTML = '<p class="text-red-400">Please enter some input for the agent</p>'; | |
| return; | |
| } | |
| output.innerHTML = '<div class="flex items-center"><div class="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-500 mr-2"></div><p class="text-gray-500">Processing your request...</p></div>'; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| const responses = [ | |
| `I understand you're asking about "${input}". As an AI, I can help analyze this topic and provide insights.`, | |
| `Interesting question about "${input}". Based on my training data, I can offer several perspectives on this.`, | |
| `"${input}" is a fascinating topic. Would you like me to elaborate on this or provide specific examples?`, | |
| `Regarding "${input}", I've found several relevant resources that might help answer your question.` | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| output.innerHTML = `<p class="text-gray-800">${randomResponse}</p>`; | |
| }, 1500); | |
| }); | |
| // Mobile menu toggle would go here in a real implementation | |
| </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=MaxHeadspace/openagi-studios" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |