Hugging Face's logo

Spaces:
acecalisto3
/
cashflow-commander-pro
Running

App Files Community
cashflow-commander-pro / index.html
acecalisto3's picture
acecalisto3
make digi-futuristic / comsmic-factory themed, maintaining all current functionality but adding the missing functionality
82fef53 verified
raw
history blame contribute delete
50.3 kB
<!DOCTYPE html><html lang="en"><head><meta name="x-poe-datastore-behavior" content="local_only"><meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://code.jquery.com https://unpkg.com https://d3js.org https://threejs.org https://cdn.plot.ly https://stackpath.bootstrapcdn.com https://maps.googleapis.com https://cdn.tailwindcss.com https://ajax.googleapis.com https://kit.fontawesome.com https://cdn.datatables.net https://maxcdn.bootstrapcdn.com https://code.highcharts.com https://tako-static-assets-production.s3.amazonaws.com https://www.youtube.com https://fonts.googleapis.com https://fonts.gstatic.com https://pfst.cf2.poecdn.net https://puc.poecdn.net https://i.imgur.com https://wikimedia.org https://*.icons8.com https://*.giphy.com https://picsum.photos https://images.unsplash.com; frame-src 'self' https://www.youtube.com https://trytako.com; child-src 'self'; manifest-src 'self'; worker-src 'self'; upgrade-insecure-requests; block-all-mixed-content;">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Factory - Digital Futurism</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.task-status-pending { border-left-color: #f59e0b; }
.task-status-running { border-left-color: #3b82f6; }
.task-status-completed { border-left-color: #10b981; }
.task-status-failed { border-left-color: #ef4444; }
.loading-dots::after {
content: '';
animation: dots 1.5s infinite;
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
</style>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#5D5CDE',
'dark-bg': '#181818',
}
}
}
}
</script>
<script src="https://puc.poecdn.net/authenticated_preview_page/syncedState.bd4eeeb8e8e02052ee92.js"></script></head>
<body class="bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 transition-colors duration-300">
<!-- App Container -->
<div id="app" class="min-h-screen">
<!-- Loading Screen -->
<div id="loading-screen" class="fixed inset-0 bg-white dark:bg-dark-bg flex items-center justify-center z-50">
<div class="text-center">
<div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
<p class="text-lg font-medium neon-text">Initializing Cosmic Factory...</p>
<div class="terminal mt-4 max-w-md mx-auto">
<div class="loading-dots">Establishing quantum link</div>
<div class="loading-dots mt-2">Bootstrapping neural matrix</div>
<div class="loading-dots mt-2">Calibrating temporal circuits</div>
</div>
</div>
</div>
<!-- Header -->
<header class="bg-white/80 dark:bg-dark-bg/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h1 class="text-xl font-bold gradient-text">AI Agent Hub</h1>
</div>
<nav class="hidden md:flex space-x-6">
<button onclick="showScreen('main')" class="nav-btn text-gray-700 dark:text-gray-300 hover:text-primary font-medium">Ideas</button>
<button onclick="showAgentLibrary()" class="nav-btn text-gray-700 dark:text-gray-300 hover:text-primary font-medium">My Agents</button>
<button onclick="showMarketplace()" class="nav-btn text-gray-700 dark:text-gray-300 hover:text-primary font-medium">Marketplace</button>
</nav>
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path class="dark:hidden" d="M10 2L13.09 8.26L20 9L14 14.74L15.18 21.02L10 17.77L4.82 21.02L6 14.74L0 9L6.91 8.26L10 2Z"></path>
<path class="hidden dark:block" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main id="main-content" class="min-h-screen">
<!-- Main Screen -->
<div id="main-screen" class="screen">
<div class="gradient-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
<h2 class="text-4xl md:text-6xl font-bold text-white mb-6">
Build the Future of AI
</h2>
<p class="text-xl text-gray-100 mb-8 max-w-3xl mx-auto">
Explore cutting-edge AI business opportunities and create intelligent agents to automate your success
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button onclick="scrollToIdeas()" class="bg-white text-primary font-semibold px-8 py-3 rounded-lg hover:bg-gray-100 transition-colors">
Explore Ideas
</button>
<button onclick="showAgentCreator()" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-lg hover:bg-white hover:text-primary transition-colors">
Create Agent
</button>
</div>
</div>
</div>
<!-- Ideas Section -->
<div id="ideas-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center mb-12">
<h3 class="text-3xl font-bold mb-4">AI Business Ideas</h3>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Discover innovative AI-powered business opportunities across various industries
</p>
</div>
<!-- Category Filter -->
<div class="flex flex-wrap gap-2 justify-center mb-8">
<button onclick="filterIdeas('all')" class="category-filter active bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">
All
</button>
</div>
<!-- Ideas Grid -->
<div id="ideas-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Ideas will be populated here -->
</div>
</div>
</div>
<!-- Idea Detail Screen -->
<div id="idea-detail-screen" class="screen hidden">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<button onclick="showScreen('main')" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-primary mb-6">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Back to Ideas
</button>
<div id="idea-detail-content">
<!-- Content will be populated dynamically -->
</div>
</div>
</div>
<!-- Agent Creator Screen -->
<div id="agent-creator-screen" class="screen hidden">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<button onclick="showScreen('main')" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-primary mb-6">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Back
</button>
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
<h2 class="text-2xl font-bold mb-6">Create AI Agent</h2>
<form id="agent-form" class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2">Agent Name</label>
<input type="text" id="agent-name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-base focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter agent name">
</div>
<div>
<label class="block text-sm font-medium mb-2">Description</label>
<textarea id="agent-description" rows="3" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-base focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Describe what your agent will do"></textarea>
</div>
<div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Agent Tasks</h3>
<button type="button" onclick="suggestTasksWithAI()" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 flex items-center text-sm">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
AI Suggest
</button>
</div>
<div id="tasks-container" class="space-y-4">
<!-- Tasks will be added here -->
</div>
<div class="mt-4 p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" id="task-name" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-base" placeholder="Task name">
<select id="task-type" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-base">
<option value="content-generation">Content Generation</option>
<option value="data-analysis">Data Analysis</option>
<option value="research">Research</option>
<option value="automation">Automation</option>
<option value="custom">Custom LLM Task</option>
</select>
</div>
<button type="button" onclick="addTask()" class="mt-2 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 text-sm">
Add Task
</button>
</div>
</div>
<div class="flex space-x-4">
<button type="button" onclick="saveAgent()" class="flex-1 bg-primary text-white py-3 rounded-lg hover:bg-primary/90 font-semibold">
Save Agent
</button>
<button type="button" onclick="testAgent()" class="flex-1 bg-green-500 text-white py-3 rounded-lg hover:bg-green-600 font-semibold">
Test Agent
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Agent Demo Screen -->
<div id="agent-demo-screen" class="screen hidden">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<button onclick="showScreen('agent-creator')" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-primary mb-6">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Back to Creator
</button>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Agent Info -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg sticky top-24">
<h3 class="text-xl font-bold mb-4">Agent Information</h3>
<div id="agent-info">
<!-- Agent info will be populated here -->
</div>
<button onclick="startDemonstration()" id="start-demo-btn" class="w-full mt-6 bg-primary text-white py-3 rounded-lg hover:bg-primary/90 font-semibold">
Start Demonstration
</button>
</div>
</div>
<!-- Execution Log -->
<div class="lg:col-span-2">
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
<h3 class="text-xl font-bold mb-4">Execution Log</h3>
<div id="execution-log" class="space-y-4 max-h-96 overflow-y-auto scrollbar-hide">
<div class="text-gray-500 dark:text-gray-400 text-center py-8">
Click "Start Demonstration" to begin agent execution
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Success Modal -->
<div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-2xl max-w-md w-full mx-4">
<div class="text-center">
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Success!</h3>
<p id="success-message" class="text-gray-600 dark:text-gray-400 mb-6"></p>
<button onclick="closeModal('success-modal')" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90">
Close
</button>
</div>
</div>
</div>
<script>
// Initialize theme
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (event.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
// Theme toggle
document.getElementById('theme-toggle').addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
// AI Ideas Data
const aiIdeasData = [
{
id: '1',
idea: 'AI-Powered Content Creator for Social Media',
category: 'Content Creation',
howToGetStarted: 'Use AI tools to generate engaging posts, captions, and hashtags for various social media platforms. Monetize through client services or SaaS subscriptions.',
difficulty: 'Beginner',
estimatedRevenue: '$10K-50K/month',
timeToMarket: '2-4 weeks'
},
{
id: '2',
idea: 'Automated Customer Service Chatbot Platform',
category: 'Customer Service',
howToGetStarted: 'Build AI chatbots that handle customer inquiries 24/7. Target small businesses that need affordable customer support solutions.',
difficulty: 'Intermediate',
estimatedRevenue: '$25K-100K/month',
timeToMarket: '6-8 weeks'
},
{
id: '3',
idea: 'AI-Enhanced Email Marketing Automation',
category: 'Marketing',
howToGetStarted: 'Create personalized email campaigns using AI to optimize subject lines, content, and send times for maximum engagement.',
difficulty: 'Intermediate',
estimatedRevenue: '$15K-75K/month',
timeToMarket: '4-6 weeks'
},
{
id: '4',
idea: 'Intelligent Data Analytics Dashboard',
category: 'Analytics',
howToGetStarted: 'Build AI-powered dashboards that automatically analyze business data and provide actionable insights and predictions.',
difficulty: 'Advanced',
estimatedRevenue: '$50K-200K/month',
timeToMarket: '8-12 weeks'
},
{
id: '5',
idea: 'AI Resume and Cover Letter Builder',
category: 'HR Tech',
howToGetStarted: 'Create AI tools that help job seekers build optimized resumes and cover letters tailored to specific job descriptions.',
difficulty: 'Beginner',
estimatedRevenue: '$5K-30K/month',
timeToMarket: '2-3 weeks'
},
{
id: '6',
idea: 'Automated Code Review and Documentation',
category: 'Developer Tools',
howToGetStarted: 'Build AI agents that review code for bugs, suggest improvements, and automatically generate documentation.',
difficulty: 'Advanced',
estimatedRevenue: '$30K-150K/month',
timeToMarket: '10-16 weeks'
},
{
id: '7',
idea: 'AI-Powered Language Learning Tutor',
category: 'Education',
howToGetStarted: 'Create personalized language learning experiences using AI for conversation practice and adaptive curriculum.',
difficulty: 'Intermediate',
estimatedRevenue: '$20K-80K/month',
timeToMarket: '6-10 weeks'
},
{
id: '8',
idea: 'Smart Investment Portfolio Manager',
category: 'FinTech',
howToGetStarted: 'Develop AI algorithms that analyze market trends and automatically rebalance investment portfolios for optimal returns.',
difficulty: 'Advanced',
estimatedRevenue: '$100K-500K/month',
timeToMarket: '12-20 weeks'
}
];
let currentIdea = null;
let currentAgent = null;
let savedAgents = []; // In-memory storage since localStorage is not available
// Initialize app
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
document.getElementById('loading-screen').style.display = 'none';
renderIdeas();
setupCategoryFilters();
}, 1500);
});
// Navigation functions
function showScreen(screenName) {
const screens = document.querySelectorAll('.screen');
screens.forEach(screen => screen.classList.add('hidden'));
document.getElementById(screenName + '-screen').classList.remove('hidden');
}
function scrollToIdeas() {
document.getElementById('ideas-section').scrollIntoView({ behavior: 'smooth' });
}
// Render ideas
function renderIdeas() {
const grid = document.getElementById('ideas-grid');
grid.innerHTML = aiIdeasData.map(idea => `
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover animate-fade-in cursor-pointer" onclick="showIdeaDetail('${idea.id}')">
<div class="flex items-center justify-between mb-4">
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">${idea.category}</span>
<span class="text-xs text-gray-500 dark:text-gray-400">${idea.difficulty}</span>
</div>
<h3 class="text-lg font-semibold mb-3 line-clamp-2">${idea.idea}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">${idea.howToGetStarted}</p>
<div class="flex items-center justify-between">
<div class="text-sm">
<div class="font-medium text-green-600 dark:text-green-400">${idea.estimatedRevenue}</div>
<div class="text-gray-500 dark:text-gray-400">${idea.timeToMarket}</div>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 text-sm" onclick="event.stopPropagation(); showAgentCreator('${idea.id}')">
Create Agent
</button>
</div>
</div>
`).join('');
}
// Setup category filters
function setupCategoryFilters() {
const categories = [...new Set(aiIdeasData.map(idea => idea.category))];
const filterContainer = document.querySelector('.flex.flex-wrap.gap-2.justify-center.mb-8');
categories.forEach(category => {
const button = document.createElement('button');
button.className = 'category-filter bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium hover:bg-primary hover:text-white';
button.textContent = category;
button.onclick = () => filterIdeas(category);
filterContainer.appendChild(button);
});
}
// Filter ideas by category
function filterIdeas(category) {
// Update active filter
document.querySelectorAll('.category-filter').forEach(btn => {
btn.classList.remove('active', 'bg-primary', 'text-white');
btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
});
event.target.classList.add('active', 'bg-primary', 'text-white');
event.target.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
// Filter and render ideas
const filteredIdeas = category === 'all' ? aiIdeasData : aiIdeasData.filter(idea => idea.category === category);
const grid = document.getElementById('ideas-grid');
grid.innerHTML = filteredIdeas.map(idea => `
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover animate-fade-in cursor-pointer" onclick="showIdeaDetail('${idea.id}')">
<div class="flex items-center justify-between mb-4">
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">${idea.category}</span>
<span class="text-xs text-gray-500 dark:text-gray-400">${idea.difficulty}</span>
</div>
<h3 class="text-lg font-semibold mb-3 line-clamp-2">${idea.idea}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">${idea.howToGetStarted}</p>
<div class="flex items-center justify-between">
<div class="text-sm">
<div class="font-medium text-green-600 dark:text-green-400">${idea.estimatedRevenue}</div>
<div class="text-gray-500 dark:text-gray-400">${idea.timeToMarket}</div>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 text-sm" onclick="event.stopPropagation(); showAgentCreator('${idea.id}')">
Create Agent
</button>
</div>
</div>
`).join('');
}
// Show idea detail
function showIdeaDetail(ideaId) {
currentIdea = aiIdeasData.find(idea => idea.id === ideaId);
const content = document.getElementById('idea-detail-content');
content.innerHTML = `
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
<div class="flex items-center gap-4 mb-6">
<span class="bg-primary/10 text-primary px-4 py-2 rounded-full font-medium">${currentIdea.category}</span>
<span class="bg-gray-100 dark:bg-gray-700 px-4 py-2 rounded-full text-sm">${currentIdea.difficulty}</span>
</div>
<h1 class="text-3xl font-bold mb-6">${currentIdea.idea}</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="text-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<div class="text-2xl font-bold text-green-600 dark:text-green-400">${currentIdea.estimatedRevenue}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Estimated Revenue</div>
</div>
<div class="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">${currentIdea.timeToMarket}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Time to Market</div>
</div>
<div class="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<div class="text-2xl font-bold text-purple-600 dark:text-purple-400">${currentIdea.difficulty}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Difficulty Level</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4">How to Get Started</h2>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">${currentIdea.howToGetStarted}</p>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button onclick="showAgentCreator('${currentIdea.id}')" class="flex-1 bg-primary text-white py-3 px-6 rounded-lg hover:bg-primary/90 font-semibold">
Create AI Agent
</button>
<button onclick="openExternalResource()" class="flex-1 border border-primary text-primary py-3 px-6 rounded-lg hover:bg-primary hover:text-white font-semibold">
Learn More
</button>
</div>
</div>
`;
showScreen('idea-detail');
}
// Show agent creator
function showAgentCreator(ideaId = null) {
if (ideaId) {
currentIdea = aiIdeasData.find(idea => idea.id === ideaId);
document.getElementById('agent-name').value = `AI Agent for ${currentIdea.idea.substring(0, 30)}...`;
document.getElementById('agent-description').value = `Automates tasks related to ${currentIdea.category}. ${currentIdea.howToGetStarted.substring(0, 100)}...`;
}
showScreen('agent-creator');
}
// Suggest tasks with AI
async function suggestTasksWithAI() {
const agentName = document.getElementById('agent-name').value;
const agentDescription = document.getElementById('agent-description').value;
if (!agentName || !agentDescription) {
showAlert('Please fill in agent name and description first.');
return;
}
const button = event.target;
const originalText = button.innerHTML;
button.innerHTML = '<span class="loading-dots">Generating tasks</span>';
button.disabled = true;
try {
if (window.Poe) {
// Register handler for AI response
window.Poe.registerHandler('task-suggestion-handler', (result) => {
const response = result.responses[0];
if (response.status === 'complete') {
try {
const suggestions = JSON.parse(response.content);
suggestions.forEach(task => {
addTaskToContainer(task.name, task.type || 'custom');
});
button.innerHTML = originalText;
button.disabled = false;
} catch (error) {
console.error('Error parsing AI response:', error);
addDefaultTasks();
button.innerHTML = originalText;
button.disabled = false;
}
} else if (response.status === 'error') {
addDefaultTasks();
button.innerHTML = originalText;
button.disabled = false;
}
});
// Send request to AI
await window.Poe.sendUserMessage(
`@Claude-Sonnet-4 Given this AI agent concept: Name: "${agentName}", Description: "${agentDescription}". Suggest 3-5 specific, actionable tasks this agent could perform. Provide ONLY raw JSON in your response with no explanations, additional text, or code block formatting (no \`\`\`). Format: [{"name": "Task name", "type": "content-generation|data-analysis|research|automation|custom"}]`,
{
handler: 'task-suggestion-handler',
stream: false,
openChat: false
}
);
} else {
// Fallback if Poe API not available
addDefaultTasks();
button.innerHTML = originalText;
button.disabled = false;
}
} catch (error) {
console.error('Error suggesting tasks:', error);
addDefaultTasks();
button.innerHTML = originalText;
button.disabled = false;
}
}
function addDefaultTasks() {
const defaultTasks = [
{ name: 'Market Research & Analysis', type: 'research' },
{ name: 'Content Generation', type: 'content-generation' },
{ name: 'Data Processing & Insights', type: 'data-analysis' },
{ name: 'Automated Workflow Setup', type: 'automation' }
];
defaultTasks.forEach(task => {
addTaskToContainer(task.name, task.type);
});
}
// Add task
function addTask() {
const taskName = document.getElementById('task-name').value.trim();
const taskType = document.getElementById('task-type').value;
if (!taskName) {
showAlert('Please enter a task name.');
return;
}
addTaskToContainer(taskName, taskType);
// Clear inputs
document.getElementById('task-name').value = '';
document.getElementById('task-type').value = 'content-generation';
}
function addTaskToContainer(taskName, taskType) {
const container = document.getElementById('tasks-container');
const taskId = 'task_' + Date.now() + '_' + Math.random().toString(36).substr(2, 5);
const taskElement = document.createElement('div');
taskElement.className = 'bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border-l-4 border-primary';
taskElement.innerHTML = `
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium">${taskName}</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 capitalize">${taskType.replace('-', ' ')}</p>
</div>
<button onclick="removeTask('${taskId}')" class="text-red-500 hover:text-red-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
`;
taskElement.id = taskId;
container.appendChild(taskElement);
}
// Remove task
function removeTask(taskId) {
document.getElementById(taskId).remove();
}
// Save agent
function saveAgent() {
const agentName = document.getElementById('agent-name').value.trim();
const agentDescription = document.getElementById('agent-description').value.trim();
const tasks = Array.from(document.getElementById('tasks-container').children).map(taskEl => ({
id: taskEl.id,
name: taskEl.querySelector('h4').textContent,
type: taskEl.querySelector('p').textContent.toLowerCase().replace(' ', '-')
}));
if (!agentName || !agentDescription) {
showAlert('Please fill in agent name and description.');
return;
}
if (tasks.length === 0) {
showAlert('Please add at least one task.');
return;
}
const agent = {
id: 'agent_' + Date.now(),
name: agentName,
description: agentDescription,
tasks: tasks,
createdAt: new Date().toISOString(),
idea: currentIdea
};
savedAgents.push(agent);
// Note: Agents are saved in memory only (localStorage not available in Canvas)
showSuccessModal(`Agent "${agentName}" saved successfully! (Note: Saved in session only)`);
currentAgent = agent;
}
// Test agent
function testAgent() {
const agentName = document.getElementById('agent-name').value.trim();
const agentDescription = document.getElementById('agent-description').value.trim();
const tasks = Array.from(document.getElementById('tasks-container').children).map(taskEl => ({
id: taskEl.id,
name: taskEl.querySelector('h4').textContent,
type: taskEl.querySelector('p').textContent.toLowerCase().replace(' ', '-')
}));
if (!agentName || !agentDescription) {
showAlert('Please fill in agent name and description.');
return;
}
if (tasks.length === 0) {
showAlert('Please add at least one task.');
return;
}
currentAgent = {
id: 'temp_agent',
name: agentName,
description: agentDescription,
tasks: tasks,
idea: currentIdea
};
showAgentDemo();
}
// Show agent demo
function showAgentDemo() {
if (!currentAgent) return;
const agentInfo = document.getElementById('agent-info');
agentInfo.innerHTML = `
<h4 class="font-semibold mb-2">${currentAgent.name}</h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">${currentAgent.description}</p>
<div class="space-y-2">
<h5 class="font-medium">Tasks:</h5>
${currentAgent.tasks.map(task => `
<div class="text-sm p-2 bg-gray-100 dark:bg-gray-700 rounded">
${task.name}
</div>
`).join('')}
</div>
`;
// Clear execution log
document.getElementById('execution-log').innerHTML = `
<div class="text-gray-500 dark:text-gray-400 text-center py-8">
Click "Start Demonstration" to begin agent execution
</div>
`;
showScreen('agent-demo');
}
// Start demonstration
async function startDemonstration() {
const startBtn = document.getElementById('start-demo-btn');
const executionLog = document.getElementById('execution-log');
startBtn.textContent = 'Running...';
startBtn.disabled = true;
executionLog.innerHTML = '';
// Add initial log entry
addLogEntry('system', 'running', `Starting demonstration for agent: ${currentAgent.name}`, new Date());
// Execute each task
for (let i = 0; i < currentAgent.tasks.length; i++) {
const task = currentAgent.tasks[i];
await executeTaskDemo(task);
}
addLogEntry('system', 'completed', 'All tasks completed successfully!', new Date());
startBtn.textContent = 'Start Demonstration';
startBtn.disabled = false;
}
// Execute task demo
async function executeTaskDemo(task) {
addLogEntry(task.id, 'running', `Starting task: ${task.name} (${task.type})`, new Date());
// Simulate task execution time
await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 3000));
try {
let result = null;
switch (task.type) {
case 'content-generation':
if (window.Poe) {
result = await executeContentGeneration(task);
} else {
result = { content: 'Sample generated content for demonstration purposes.' };
}
break;
case 'data-analysis':
result = { insights: 'Analysis complete: 15% increase in efficiency identified.' };
break;
case 'research':
result = { findings: 'Market research completed: 3 key opportunities identified.' };
break;
case 'automation':
result = { automated: 'Workflow automation set up successfully.' };
break;
default:
result = { message: 'Custom task executed successfully.' };
}
addLogEntry(task.id, 'completed', `Task completed: ${task.name}`, new Date(), result);
} catch (error) {
addLogEntry(task.id, 'failed', `Task failed: ${error.message}`, new Date());
}
}
// Execute content generation task with real AI
async function executeContentGeneration(task) {
return new Promise((resolve, reject) => {
if (!window.Poe) {
resolve({ content: 'Demo content generated without AI integration.' });
return;
}
window.Poe.registerHandler('content-gen-handler', (result) => {
const response = result.responses[0];
if (response.status === 'complete') {
resolve({ content: response.content });
} else if (response.status === 'error') {
reject(new Error(response.statusText || 'Content generation failed'));
}
});
const prompt = currentAgent.idea ?
`Generate content for: ${task.name} related to this business idea: ${currentAgent.idea.idea}. Keep it concise and professional.` :
`Generate content for: ${task.name}. Keep it concise and professional.`;
window.Poe.sendUserMessage(
`@Claude-Sonnet-4 ${prompt}`,
{
handler: 'content-gen-handler',
stream: false,
openChat: false
}
).catch(error => {
reject(error);
});
});
}
// Add log entry
function addLogEntry(taskId, status, message, timestamp, result = null) {
const executionLog = document.getElementById('execution-log');
const statusColors = {
'running': 'border-blue-500 bg-blue-50 dark:bg-blue-900/20',
'completed': 'border-green-500 bg-green-50 dark:bg-green-900/20',
'failed': 'border-red-500 bg-red-50 dark:bg-red-900/20',
'system': 'border-gray-500 bg-gray-50 dark:bg-gray-800'
};
const logEntry = document.createElement('div');
logEntry.className = `p-4 border-l-4 rounded-lg ${statusColors[status] || statusColors.system}`;
logEntry.innerHTML = `
<div class="flex items-center justify-between mb-2">
<span class="font-medium capitalize">${status}</span>
<span class="text-sm text-gray-500 dark:text-gray-400">${timestamp.toLocaleTimeString()}</span>
</div>
<p class="text-gray-700 dark:text-gray-300">${message}</p>
${result ? `
<div class="mt-3 p-3 bg-white dark:bg-gray-700 rounded border">
<h5 class="font-medium mb-2">Result:</h5>
<pre class="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">${JSON.stringify(result, null, 2)}</pre>
</div>
` : ''}
`;
executionLog.appendChild(logEntry);
executionLog.scrollTop = executionLog.scrollHeight;
}
// Utility functions
function showAlert(message) {
// Custom alert since alert() is not allowed
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full mx-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">${message}</p>
<div class="flex justify-end">
<button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90" onclick="this.closest('.fixed').remove()">OK</button>
</div>
</div>
`;
document.body.appendChild(modal);
}
function showSuccessModal(message) {
document.getElementById('success-message').textContent = message;
document.getElementById('success-modal').classList.remove('hidden');
document.getElementById('success-modal').classList.add('flex');
}
function closeModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
document.getElementById(modalId).classList.remove('flex');
}
function openExternalResource() {
if (window.open) {
window.open('https://en.wikipedia.org/wiki/Artificial_intelligence_in_business', '_blank');
}
}
function showAgentLibrary() {
showAlert('Agent Library feature coming soon! Saved agents: ' + savedAgents.length);
}
function showMarketplace() {
showAlert('Agent Marketplace feature coming soon!');
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey || e.metaKey) {
switch(e.key) {
case 'h':
e.preventDefault();
showScreen('main');
break;
case 'n':
e.preventDefault();
showAgentCreator();
break;
}
}
});
</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body></html>