import React, { useState, useRef, useEffect } from 'react'; import { BookOpen, Globe, Calculator, Languages, Newspaper, Camera, Mic, Settings, Box, Brain, Atom, MapPin, Clock, FlaskConical, Binary, Upload, Volume2, Play, Pause, Cpu, Lightbulb } from 'lucide-react'; const EduPlatform = () => { const [activeTab, setActiveTab] = useState('home'); const [question, setQuestion] = useState(''); const [answer, setAnswer] = useState(''); const [loading, setLoading] = useState(false); const [sourceLang, setSourceLang] = useState('en'); const [targetLang, setTargetLang] = useState('es'); const [translateText, setTranslateText] = useState(''); const [translatedText, setTranslatedText] = useState(''); const [selectedMachine, setSelectedMachine] = useState(null); const [bookText, setBookText] = useState(''); const [isReading, setIsReading] = useState(false); const [uploadedImage, setUploadedImage] = useState(null); const canvasRef = useRef(null); const animationRef = useRef(null); const categories = [ { id: 'gk', name: 'General Knowledge', icon: Brain, color: 'bg-blue-500', desc: 'World facts & current affairs' }, { id: 'math', name: 'Mathematics', icon: Calculator, color: 'bg-green-500', desc: 'Algebra, Calculus, Geometry' }, { id: 'science', name: 'Science', icon: Atom, color: 'bg-purple-500', desc: 'Physics, Chemistry, Biology' }, { id: 'history', name: 'History', icon: Clock, color: 'bg-yellow-500', desc: 'World & ancient history' }, { id: 'geography', name: 'Geography', icon: MapPin, color: 'bg-red-500', desc: 'Countries, capitals, terrain' }, { id: 'languages', name: 'Languages', icon: Languages, color: 'bg-indigo-500', desc: 'Learn any language' }, { id: 'news', name: 'World News', icon: Newspaper, color: 'bg-cyan-500', desc: 'Daily international updates' }, { id: 'tech', name: 'Technology', icon: Binary, color: 'bg-pink-500', desc: 'AI, coding, innovations' }, { id: 'photo', name: 'Photo Solver', icon: Camera, color: 'bg-orange-500', desc: 'Solve from images' }, { id: '3d', name: '3D Machines', icon: Box, color: 'bg-teal-500', desc: 'Interactive animations' }, { id: 'books', name: 'Books', icon: BookOpen, color: 'bg-rose-500', desc: 'Read & listen to books' } ]; const languages = [ { code: 'en', name: 'English', flag: '🇬🇧' }, { code: 'es', name: 'Spanish', flag: '🇪🇸' }, { code: 'fr', name: 'French', flag: '🇫🇷' }, { code: 'de', name: 'German', flag: '🇩🇪' }, { code: 'hi', name: 'Hindi', flag: '🇮🇳' }, { code: 'zh', name: 'Chinese', flag: '🇨🇳' }, { code: 'ar', name: 'Arabic', flag: '🇸🇦' }, { code: 'ru', name: 'Russian', flag: '🇷🇺' }, { code: 'ja', name: 'Japanese', flag: '🇯🇵' }, { code: 'pt', name: 'Portuguese', flag: '🇵🇹' }, { code: 'it', name: 'Italian', flag: '🇮🇹' }, { code: 'ko', name: 'Korean', flag: '🇰🇷' } ]; const machines = [ { id: 'engine', name: 'Car Engine', desc: 'Internal combustion engine animation' }, { id: 'pump', name: 'Water Pump', desc: 'Centrifugal pump mechanism' }, { id: 'turbine', name: 'Wind Turbine', desc: 'Renewable energy generation' }, { id: 'gears', name: 'Gear System', desc: 'Mechanical power transmission' }, { id: 'motor', name: 'Electric Motor', desc: 'Electromagnetic rotation' }, { id: 'hydraulic', name: 'Hydraulic Press', desc: 'Fluid pressure system' } ]; const solveQuestion = async () => { if (!question.trim()) return; setLoading(true); setAnswer(''); try { const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 1000, messages: [ { role: 'user', content: `Please provide a detailed solution with step-by-step explanation for this question: ${question}` } ] }) }); const data = await response.json(); const text = data.content.map(item => item.text || '').join('\n'); setAnswer(text); } catch (error) { setAnswer('Error: Unable to solve the question. Please try again.'); } finally { setLoading(false); } }; const translateContent = async () => { if (!translateText.trim()) return; setLoading(true); setTranslatedText(''); try { const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 1000, messages: [ { role: 'user', content: `Translate from ${languages.find(l => l.code === sourceLang)?.name} to ${languages.find(l => l.code === targetLang)?.name}: "${translateText}"` } ] }) }); const data = await response.json(); const text = data.content.map(item => item.text || '').join('\n'); setTranslatedText(text); } catch (error) { setTranslatedText('Error: Unable to translate. Please try again.'); } finally { setLoading(false); } }; const getNews = async () => { setLoading(true); setAnswer(''); try { const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 1000, tools: [{ type: 'web_search_20250305', name: 'web_search' }], messages: [ { role: 'user', content: 'What are the top international news stories today? Provide summaries with key details.' } ] }) }); const data = await response.json(); const text = data.content.map(item => item.text || '').join('\n'); setAnswer(text || 'Fetching latest news...'); } catch (error) { setAnswer('Error: Unable to fetch news. Please try again.'); } finally { setLoading(false); } }; const handleImageUpload = async (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = async (event) => { const base64Data = event.target.result.split(',')[1]; setUploadedImage(event.target.result); setLoading(true); setAnswer(''); try { const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 1000, messages: [ { role: 'user', content: [ { type: 'image', source: { type: 'base64', media_type: file.type, data: base64Data } }, { type: 'text', text: 'Please solve the question(s) shown in this image. Provide detailed step-by-step solutions.' } ] } ] }) }); const data = await response.json(); const text = data.content.map(item => item.text || '').join('\n'); setAnswer(text); } catch (error) { setAnswer('Error: Unable to process image. Please try again.'); } finally { setLoading(false); } }; reader.readAsDataURL(file); }; const readBookAloud = () => { if ('speechSynthesis' in window) { if (isReading) { window.speechSynthesis.cancel(); setIsReading(false); } else { const utterance = new SpeechSynthesisUtterance(bookText); utterance.rate = 1; utterance.pitch = 1; utterance.onend = () => setIsReading(false); window.speechSynthesis.speak(utterance); setIsReading(true); } } else { alert('Text-to-speech not supported in your browser'); } }; const animate3D = () => { if (!canvasRef.current || !selectedMachine) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let angle = 0; const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); // Draw based on machine type switch(selectedMachine) { case 'engine': drawEngine(ctx, angle); break; case 'gears': drawGears(ctx, angle); break; case 'pump': drawPump(ctx, angle); break; case 'motor': drawMotor(ctx, angle); break; default: drawGeneric(ctx, angle); } ctx.restore(); angle += 0.02; animationRef.current = requestAnimationFrame(draw); }; draw(); }; const drawEngine = (ctx, angle) => { // Cylinder ctx.fillStyle = '#4A5568'; ctx.fillRect(-40, -80, 80, 120); // Piston const pistonY = Math.sin(angle * 2) * 30; ctx.fillStyle = '#E53E3E'; ctx.fillRect(-30, pistonY - 60, 60, 40); // Crankshaft ctx.strokeStyle c= '#2D3748'; ctx.lineWidth = 8; ctx.beginPath(); ctx.arc(0, 60, 20, 0,Math.PI * 2); ctx.stroke(); // Connecting rod ctx.beginPath(); ctx.moveTo(0, pistonY - 40); ctx.lineTo(Math.cos(angle * 2) * 20, 60 + Math.sin(angle * 2) * 20); ctx.stroke(); }; const drawGears = (ctx, angle) => { // Gear 1 drawGear(ctx, -60, 0, 50, 8, angle, '#3182CE'); // Gear 2 drawGear(ctx, 60, 0, 50, 8, -angle, '#805AD5'); }; const drawGear = (ctx, x, y, radius, teeth, rotation, color) => { ctx.save(); ctx.translate(x, y); ctx.rotate(rotation); ctx.fillStyle = color; ctx.beginPath(); for (let i = 0; i { // Housing ctx.fillStyle = '#4299E1'; ctx.beginPath(); ctx.arc(0, 0, 80, 0, Math.PI * 2); ctx.fill(); // Impeller ctx.save(); ctx.rotate(angle); ctx.strokeStyle = '#2C5282'; ctx.lineWidth = 6; for (let i = 0; i { // Stator ctx.strokeStyle = '#38B2AC'; ctx.lineWidth = 15; ctx.beginPath(); ctx.arc(0, 0, 70, 0, Math.PI * 2); ctx.stroke(); // Rotor ctx.save(); ctx.rotate(angle); ctx.fillStyle = '#319795'; for (let i = 0; i { ctx.save(); ctx.rotate(angle); ctx.fillStyle = '#667EEA'; ctx.fillRect(-50, -50, 100, 100); ctx.restore(); }; useEffect(() => { if (selectedMachine) { animate3D(); } return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, [selectedMachine]); const renderHome = () => ( Welcome to AI Learning Hub Master any subject, solve any problem, learn any language {categories.map(cat => { const Icon = cat.icon; return ( setActiveTab(cat.id)} className={`${cat.color} p-6 rounded-2xl shadow-lg hover:shadow-2xl transition-all transform hover:scale-105 text-white`} > {cat.name} {cat.desc} ); })} ); const renderQuestionSolver = () => ( Universal Question Solver Mathematics Physics Chemistry Biology History Geography setQuestion(e.target.value)} placeholder="Ask anything: 'Solve x² + 5x + 6 = 0', 'Explain photosynthesis', 'What caused World War I?', etc." className="w-full h-40 p-4 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none resize-none text-lg" /> {loading ? '🔄 Solving...' : '✨ Get Detailed Solution'} {answer && ( Solution: {answer} )} ); const renderTranslator = () => ( Multi-Language Translator From: setSourceLang(e.target.value)} className="w-full p-3 border-2 border-gray-300 rounded-xl focus:border-indigo-500 focus:outline-none text-lg" > {languages.map(lang => ( {lang.flag} {lang.name} ))} To: setTargetLang(e.target.value)} className="w-full p-3 border-2 border-gray-300 rounded-xl focus:border-indigo-500 focus:outline-none text-lg" > {languages.map(lang => ( {lang.flag} {lang.name} ))} setTranslateText(e.target.value)} placeholder="Enter text to translate..." className="w-full h-32 p-4 border-2 border-gray-300 rounded-xl focus:border-indigo-500 focus:outline-none resize-none text-lg mb-4" /> {loading ? '🔄 Translating...' : '🌐 Translate Now'} {translatedText && ( Translation: {translatedText} )} ); const renderNews = () => ( International News Today {loading ? '📰 Fetching Latest News...' : '🌍 Get International Headlines'} {answer && ( {answer} )} ); const renderPhotoSolver = () => ( Photo Question Solver Convert in URL file
I'll help you convert this educational platform code into a working Next.js application. Let me first check the project structure, then create the complete app with all the fixes needed.
Now I'll create the complete educational platform with all the fixes and complete the missing functions. The original code had several syntax errors and incomplete functions that I'll fix.
Now let me create the API routes for the AI features:
Now let me update the layout with proper metadata:
Your AI Learning Hub is now live! 🎓 I've converted your code into a complete Next.js application with:
Features included:
Fixes applied:
ctx.strokeStyle c=)