'use client'; import React, { useEffect, useRef, useState } from 'react'; import Link from 'next/link'; import { motion, AnimatePresence } from 'framer-motion'; import { useAuth } from '@/lib/AuthContext'; import { getApiPath } from '@/lib/basePath'; import CVHeader from '@/components/layout/CVHeader'; import CVFooter from '@/components/layout/CVFooter'; import ToolAccessGate from '@/components/tools/ToolAccessGate'; import { Mic, Camera, ArrowRight, ChevronRight, AlertTriangle, BookOpen, Sparkles, RotateCcw, Loader2, StopCircle, AudioLines, Brain, CheckCircle2, Clock3, Eye, GraduationCap, Languages, Lightbulb, ListChecks, LockKeyhole, RefreshCw, ShieldCheck, Target, UsersRound, } from 'lucide-react'; import { DESCRIPTION_STEPS, GLOSSARY, GRAMMAR_POINTS, HOW_IT_WORKS, PHOTO_MODE_FAQS, PHRASE_GROUPS, PRACTICE_LEVELS, SPEAKING_SKILLS, photoModeJsonLd, } from './photoModeSeoData'; const PROMPTS = [ 'Describe what you see - the people, the food, the atmosphere.', 'Describe this natural landscape - what can you see, feel, and imagine?', 'Describe this city scene - the buildings, the people, the mood.', 'Describe what is happening in this classroom or learning environment.', 'Describe this market scene - the colours, the products, the people.', ]; const FALLBACK_PHOTOS = [ { url: '/photo-mode/AI_image_01.jpg', alt: 'English picture-description speaking prompt 1' }, { url: '/photo-mode/AI_image_02.jpg', alt: 'English picture-description speaking prompt 2' }, { url: '/photo-mode/AI_image_03.jpg', alt: 'English picture-description speaking prompt 3' }, { url: '/photo-mode/AI_image_04.jpg', alt: 'English picture-description speaking prompt 4' }, { url: '/photo-mode/AI_image_05.jpg', alt: 'English picture-description speaking prompt 5' }, ]; const MIN_WORDS = 20; const MAX_RECORD_SECONDS = 150; export default function PhotoMode({ workspaceOnly = false }) { const { user } = useAuth(); const [level, setLevel] = useState('b1'); const [photoIndex, setPhotoIndex] = useState(-1); const [photo, setPhoto] = useState({ id: null, url: FALLBACK_PHOTOS[0].url, alt: FALLBACK_PHOTOS[0].alt, prompt: PROMPTS[0], }); const [stage, setStage] = useState('idle'); const [transcript, setTranscript] = useState(''); const [feedback, setFeedback] = useState(null); const [recordingSeconds, setRecordingSeconds] = useState(0); const [mediaError, setMediaError] = useState(''); const [speechScores, setSpeechScores] = useState(null); const [speechError, setSpeechError] = useState(''); const mediaRecorderRef = useRef(null); const chunksRef = useRef([]); const timerRef = useRef(null); const streamRef = useRef(null); const isRecordingRef = useRef(false); const recordingStartedAtRef = useRef(0); const wordCount = transcript.trim().split(/\s+/).filter(Boolean).length; const displayIndex = photoIndex < 0 ? 0 : photoIndex; const selectedLevel = PRACTICE_LEVELS.find((item) => item.id === level) || PRACTICE_LEVELS[2]; useEffect(() => { if (user?.id) loadRandomPhoto(); return () => { clearRecordingTimer(); isRecordingRef.current = false; if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') { mediaRecorderRef.current.stop(); } streamRef.current?.getTracks().forEach((track) => track.stop()); }; }, [user?.id]); const loadRandomPhoto = async () => { try { const res = await fetch(getApiPath('/api/photo-mode/random-image'), { method: 'POST' }); if (!res.ok) throw new Error('Failed to fetch image'); const data = await res.json(); setPhotoIndex((prev) => { const nextIndex = (prev + 1) % PROMPTS.length; setPhoto({ id: data?.id ?? null, url: data.image_url || FALLBACK_PHOTOS[nextIndex].url, alt: `English picture-description speaking prompt ${nextIndex + 1}`, prompt: data.prompt || PROMPTS[nextIndex], }); return nextIndex; }); } catch { setPhotoIndex((prev) => { const nextIndex = (prev + 1) % FALLBACK_PHOTOS.length; setPhoto({ id: null, url: FALLBACK_PHOTOS[nextIndex].url, alt: FALLBACK_PHOTOS[nextIndex].alt, prompt: PROMPTS[nextIndex], }); return nextIndex; }); } }; const clearRecordingTimer = () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } }; const startRecording = async () => { if (!navigator?.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') { setMediaError('Audio recording is not supported in this browser.'); return; } setMediaError(''); setTranscript(''); setFeedback(null); setSpeechScores(null); setSpeechError(''); chunksRef.current = []; setRecordingSeconds(0); let stream; try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); } catch { setMediaError('Microphone access denied. Please allow microphone access and try again.'); return; } const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : ''; const mr = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream); mediaRecorderRef.current = mr; streamRef.current = stream; mr.ondataavailable = (event) => { if (event.data.size > 0) { chunksRef.current.push(event.data); } }; mr.onstop = async () => { stream.getTracks().forEach((t) => t.stop()); streamRef.current = null; const blob = new Blob(chunksRef.current, { type: mr.mimeType || 'audio/webm' }); mediaRecorderRef.current = null; setStage('processing'); if (!blob.size) { setMediaError('No audio was captured. Please try recording again.'); setStage('transcript'); return; } fetchSpeechScores(blob); try { const text = await transcribeAudio(blob); setTranscript(text.trim()); setStage('transcript'); } catch (error) { setMediaError(error?.message || 'Could not transcribe audio. Please try again.'); setStage('transcript'); } }; isRecordingRef.current = true; recordingStartedAtRef.current = Date.now(); timerRef.current = setInterval(() => { const elapsed = Math.min( MAX_RECORD_SECONDS, Math.floor((Date.now() - recordingStartedAtRef.current) / 1000) ); setRecordingSeconds(elapsed); if (elapsed >= MAX_RECORD_SECONDS) { stopRecording(); } }, 250); mr.start(); setStage('recording'); }; function stopRecording() { if (!isRecordingRef.current && mediaRecorderRef.current?.state !== 'recording') return; clearRecordingTimer(); isRecordingRef.current = false; if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') { mediaRecorderRef.current.stop(); } } const transcribeAudio = async (blob) => { const formData = new FormData(); formData.append('audio', blob, 'audio.webm'); const res = await fetch(getApiPath('/api/photo-mode/transcribe-recording'), { method: 'POST', body: formData }); const data = await res.json(); if (!res.ok) { throw new Error(data?.message || 'Transcription failed'); } return data?.transcript || ''; }; const fetchSpeechScores = async (blob) => { try { const formData = new FormData(); formData.append('audio', blob, 'audio.webm'); formData.append('prompt', photo.prompt); const res = await fetch(getApiPath('/api/photo-mode/superspeech'), { method: 'POST', body: formData }); const data = await res.json(); if (!res.ok) throw new Error(data?.message || 'SpeechSuper failed'); setSpeechScores(data.scores); } catch { setSpeechError('Speech analysis unavailable.'); } }; const submitForFeedback = async () => { if (wordCount < MIN_WORDS) return; setStage('processing'); try { const res = await fetch(getApiPath('/api/photo-mode/feedback'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: transcript, imageId: photo.id ?? null, userId: user?.id ?? null, speechScores: speechScores ?? null, }), }); const data = await res.json(); if (!res.ok) throw new Error(data?.message || 'Feedback failed'); setFeedback(data?.api_response || data || null); setStage('feedback'); } catch (error) { setMediaError(error?.message || 'Unable to submit feedback right now.'); setStage('transcript'); } }; const nextPhoto = () => { setStage('idle'); setTranscript(''); setFeedback(null); setSpeechScores(null); setSpeechError(''); setRecordingSeconds(0); setMediaError(''); loadRandomPhoto(); }; const fmtTime = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; const corrections = Array.isArray(feedback?.feedback) ? feedback.feedback : Array.isArray(feedback?.errors) ? feedback.errors : []; const correctedText = feedback?.corrected || feedback?.corrected_text || feedback?.correctedText || ''; const overallFeedback = feedback?.overall_feedback || feedback?.overallFeedback || ''; const vocabHighlights = Array.isArray(feedback?.vocabulary_highlights) ? feedback.vocabulary_highlights : Array.isArray(feedback?.vocabularyHighlights) ? feedback.vocabularyHighlights : []; return (
{!workspaceOnly && ( <>