import React, { useState, useCallback, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { RECIPES } from '../constants'; import { type Recipe, type ApiKeys } from '../types'; import RecipeCard from './RecipeCard'; import GeneratedContent from './GeneratedContent'; import { generateInteractive, type ModelOption } from '../services/geminiService'; import apiService from '../services/apiService'; const fileToDataUrl = (file: File): Promise => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result as string); reader.onerror = reject; reader.readAsDataURL(file); }); }; const InteractiveBuilder: React.FC = () => { const [selectedRecipe, setSelectedRecipe] = useState(null); const [userPrompt, setUserPrompt] = useState(''); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [generatedResult, setGeneratedResult] = useState<{ html: string; readme: string } | null>(null); const [selectedModel, setSelectedModel] = useState('claude'); const [apiKeys, setApiKeys] = useState({ openAI: '', claude: '' }); const [imageFile, setImageFile] = useState(null); const [progress, setProgress] = useState(0); const [statusMessage, setStatusMessage] = useState(''); const [username, setUsername] = useState('lookang'); const [resourceURL, setResourceURL] = useState('https://sg.iwant2study.org/ospsg/'); // State for refinement const [refinePrompt, setRefinePrompt] = useState(''); const [refineImageFile, setRefineImageFile] = useState(null); useEffect(() => { try { const savedKeys = localStorage.getItem('apiKeys'); if (savedKeys) { const parsed = JSON.parse(savedKeys); setApiKeys({ openAI: parsed.openAI || '', claude: parsed.claude || '', }); } } catch (error) { console.error("Failed to load API keys from localStorage:", error); } }, []); const handleRecipeSelect = useCallback((recipe: Recipe) => { setSelectedRecipe(recipe); setUserPrompt(recipe.promptTemplate); setGeneratedResult(null); setError(null); setImageFile(null); setRefinePrompt(''); setRefineImageFile(null); }, []); const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; setImageFile(file); } }; const handleRefineFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; setRefineImageFile(file); } }; const processImageFile = async (file: File | null): Promise<{ base64: string | null; mimeType: string | null; }> => { if (!file) return { base64: null, mimeType: null }; try { const dataUrl = await fileToDataUrl(file); const [header, data] = dataUrl.split(','); const mimeMatch = header.match(/:(.*?);/); if (!mimeMatch || !mimeMatch[1] || !data) { throw new Error('Invalid image file format.'); } return { base64: data, mimeType: mimeMatch[1] }; } catch (err) { const message = err instanceof Error ? err.message : 'An unknown error occurred'; setError(`Failed to process image: ${message}`); throw err; // Propagate error to stop the generation process } }; const runGenerationProcess = async ( isRefinement: boolean, refinementHtml: string | null = null ) => { setIsLoading(true); setError(null); setProgress(0); const messages = isRefinement ? [ 'Analyzing refinement request...', 'Applying your changes...', 'Re-generating interactive code...', 'Updating README documentation...', 'Finalizing new version...'] : [ 'Connecting to AI model...', 'Analyzing your request...', 'Designing the interactive layout...', 'Generating HTML structure...', 'Writing pedagogical README file...', 'Styling with CSS...', 'Adding JavaScript for interactivity...', 'Finalizing and packaging the interactive...', 'Almost there...']; let messageIndex = 0; setStatusMessage(messages[messageIndex]); const progressInterval = setInterval(() => { setProgress(prev => Math.min(prev + Math.floor(Math.random() * 5) + 1, 95)); }, 400); const messageInterval = setInterval(() => { messageIndex = (messageIndex + 1); if (messageIndex < messages.length) { setStatusMessage(messages[messageIndex]); } }, 2000); try { const { base64: imageBase64, mimeType: imageMimeType } = await processImageFile(imageFile); const { base64: refineImageBase64, mimeType: refineImageMimeType } = await processImageFile(refineImageFile); const result = await generateInteractive( selectedRecipe!, userPrompt, selectedModel, imageBase64, imageMimeType, username, resourceURL, refinementHtml, isRefinement ? refinePrompt : null, refineImageBase64, refineImageMimeType ); setGeneratedResult(result); // Clear refinement inputs after successful refinement if (isRefinement) { setRefinePrompt(''); setRefineImageFile(null); } } catch (e: unknown) { if (e instanceof Error && !e.message.includes('process image')) { setError(e.message); } else if (!(e instanceof Error)) { setError('An unknown error occurred.'); } } finally { clearInterval(progressInterval); clearInterval(messageInterval); setProgress(100); setIsLoading(false); } }; const handleGenerate = async () => { if (!selectedRecipe || !userPrompt) { setError('Please select a recipe and provide a prompt.'); return; } if (selectedModel !== 'gemini' && isKeyMissing) { setError('API key for the selected model is missing. Please add it in Settings.'); return; } if (selectedRecipe.id === 'image-to-interactive' && !imageFile) { setError('Please upload an image for this interactive type.'); return; } setGeneratedResult(null); // Clear previous results before new generation await runGenerationProcess(false); }; const handleRefine = async () => { if (!refinePrompt && !refineImageFile) { setError('Please provide instructions or an image to refine the interactive.'); return; } if (generatedResult?.html) { await runGenerationProcess(true, generatedResult.html); } }; const isKeyMissing = false; // Backend proxy handles all API keys return (
{/* Left Column: Controls */}

1. Choose an Interactive Type

{RECIPES.map((recipe) => ( ))}
{selectedRecipe && ( <>

2. Describe Your Interactive