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