5dimension's picture
make crew ai agents using public api , from huggingface or somewhere
0c1c66a verified
<!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>