import React, { useState, useCallback } from 'react'; import { Zap } from 'lucide-react'; // Import sub-components for each step import Header from './Header'; import SetupScreen from './SetupScreen'; import InputScreen from './InputScreen'; import GeneratingScreen from './GeneratingScreen'; import PreviewScreen from './PreviewScreen'; // Import the API services import { callAnthropicAPI } from '../services/anthropic'; import { callHuggingFaceAPI } from '../services/huggingface'; // New service import { getPrompts } from '../services/prompts'; const WorkshopGenerator = () => { const [currentStep, setCurrentStep] = useState('setup'); const [apiKey, setApiKey] = useState({ anthropic: '', huggingface: '' }); const [apiProvider, setApiProvider] = useState('anthropic'); // 'anthropic' or 'huggingface' const [workshopData, setWorkshopData] = useState({ topic: '', audience: '', duration: '90', difficulty: 'intermediate' }); const [generatedContent, setGeneratedContent] = useState(null); const [isGenerating, setIsGenerating] = useState(false); const [activeAgent, setActiveAgent] = useState(''); const [error, setError] = useState(''); const getApiCallFunction = useCallback(() => { if (apiProvider === 'huggingface') { return (prompt, maxTokens) => callHuggingFaceAPI(prompt, apiKey.huggingface, maxTokens); } // Default to Anthropic return (prompt, maxTokens) => callAnthropicAPI(prompt, apiKey.anthropic, maxTokens); }, [apiProvider, apiKey]); const generateWorkshop = async () => { setIsGenerating(true); setCurrentStep('generating'); setError(''); const callAPI = getApiCallFunction(); const prompts = getPrompts(workshopData); try { const runAgent = async (agentName, prompt, maxTokens) => { setActiveAgent(agentName); const response = await callAPI(prompt, maxTokens); const cleanResponse = response.replace(/```json\n?/, "").replace(/```\n?/, "").trim(); try { return JSON.parse(cleanResponse); } catch (parseError) { console.error(`Error parsing JSON from ${agentName}:`, parseError, "Raw response:", response); throw new Error(`Agent "${agentName}" returned invalid data. Please try again.`); } }; // Run the agent pipeline const topicData = await runAgent('topic', prompts.topic, 1500); const contentData = await runAgent('content', prompts.content(JSON.stringify(topicData)), 3000); const slideData = await runAgent('slide', prompts.slide(JSON.stringify(contentData)), 4000); const codeData = await runAgent('code', prompts.code(JSON.stringify(topicData)), 3000); // Combine results setGeneratedContent({ topic: topicData, content: contentData, slides: slideData, code: codeData, metadata: { title: topicData.title || workshopData.topic, modules: topicData.modules?.length || 0, slideCount: slideData.slide_count || slideData.slides?.length || 0, exercises: codeData.exercises?.length || 0, generatedAt: new Date().toISOString(), provider: apiProvider } }); setCurrentStep('preview'); } catch (err) { console.error("Workshop generation error:", err); setError(err.message); setCurrentStep('input'); } finally { setIsGenerating(false); setActiveAgent(''); } }; const resetGenerator = () => { setCurrentStep('input'); setGeneratedContent(null); setWorkshopData({ topic: '', audience: '', duration: '90', difficulty: 'intermediate' }); setError(''); }; const renderStep = () => { switch (currentStep) { case 'setup': return ; case 'input': return ; case 'generating': return ; case 'preview': return ; default: return ; } }; return (
{error && (
{error}
)} {renderStep()}
); }; export default WorkshopGenerator;