mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
Adiciona Página Demo
This commit is contained in:
Lucas Santana
parent
3176e95a75
commit
39bbc2c827
154
src/components/demo/AudioRecorderDemo.tsx
Normal file
154
src/components/demo/AudioRecorderDemo.tsx
Normal file
@ -0,0 +1,154 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Mic, Square, Loader, Play, RotateCcw } from 'lucide-react';
|
||||
|
||||
interface AudioRecorderDemoProps {
|
||||
onAnalysisComplete: (result: {
|
||||
fluency: number;
|
||||
accuracy: number;
|
||||
confidence: number;
|
||||
feedback: string;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export function AudioRecorderDemo({ onAnalysisComplete }: AudioRecorderDemoProps) {
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
|
||||
const [isAnalyzing, setIsAnalyzing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const chunksRef = useRef<Blob[]>([]);
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
mediaRecorderRef.current = new MediaRecorder(stream);
|
||||
chunksRef.current = [];
|
||||
|
||||
mediaRecorderRef.current.ondataavailable = (e) => {
|
||||
chunksRef.current.push(e.data);
|
||||
};
|
||||
|
||||
mediaRecorderRef.current.onstop = () => {
|
||||
const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
|
||||
setAudioBlob(audioBlob);
|
||||
};
|
||||
|
||||
mediaRecorderRef.current.start();
|
||||
setIsRecording(true);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError('Erro ao acessar microfone. Verifique as permissões.');
|
||||
console.error('Erro ao iniciar gravação:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorderRef.current && isRecording) {
|
||||
mediaRecorderRef.current.stop();
|
||||
setIsRecording(false);
|
||||
|
||||
mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
};
|
||||
|
||||
const analyzeAudio = async () => {
|
||||
if (!audioBlob) return;
|
||||
|
||||
setIsAnalyzing(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Simulação de análise para demo
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// Resultados simulados para demonstração
|
||||
onAnalysisComplete({
|
||||
fluency: Math.floor(Math.random() * 20) + 80, // 80-100
|
||||
accuracy: Math.floor(Math.random() * 15) + 85, // 85-100
|
||||
confidence: Math.floor(Math.random() * 25) + 75, // 75-100
|
||||
feedback: "Excelente leitura! Sua fluência está muito boa e você demonstra confiança na pronúncia. Continue praticando para melhorar ainda mais."
|
||||
});
|
||||
} catch (err) {
|
||||
setError('Erro ao analisar áudio. Tente novamente.');
|
||||
console.error('Erro na análise:', err);
|
||||
} finally {
|
||||
setIsAnalyzing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetRecording = () => {
|
||||
setAudioBlob(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 bg-gray-50 rounded-xl">
|
||||
<div className="flex flex-wrap items-center gap-4 justify-center">
|
||||
{!isRecording && !audioBlob && (
|
||||
<button
|
||||
onClick={startRecording}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 transition"
|
||||
>
|
||||
<Mic className="w-5 h-5" />
|
||||
Iniciar Gravação
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isRecording && (
|
||||
<button
|
||||
onClick={stopRecording}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 transition"
|
||||
>
|
||||
<Square className="w-5 h-5" />
|
||||
Parar Gravação
|
||||
</button>
|
||||
)}
|
||||
|
||||
{audioBlob && !isAnalyzing && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
const url = URL.createObjectURL(audioBlob);
|
||||
const audio = new Audio(url);
|
||||
audio.play();
|
||||
}}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition"
|
||||
>
|
||||
<Play className="w-5 h-5" />
|
||||
Ouvir
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={analyzeAudio}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 transition"
|
||||
>
|
||||
Analisar Leitura
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={resetRecording}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-gray-200 text-gray-600 rounded-xl hover:bg-gray-300 transition"
|
||||
>
|
||||
<RotateCcw className="w-5 h-5" />
|
||||
Recomeçar
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isAnalyzing && (
|
||||
<div className="flex items-center gap-2 text-gray-600">
|
||||
<Loader className="w-5 h-5 animate-spin" />
|
||||
Analisando sua leitura...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 text-red-600 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
168
src/components/story/AudioRecorder.tsx
Normal file
168
src/components/story/AudioRecorder.tsx
Normal file
@ -0,0 +1,168 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Mic, Square, Loader, Play, Upload } from 'lucide-react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
|
||||
interface AudioRecorderProps {
|
||||
storyId: string;
|
||||
studentId: string;
|
||||
classId: string;
|
||||
schoolId: string;
|
||||
onAudioUploaded: (audioUrl: string) => void;
|
||||
}
|
||||
|
||||
export function AudioRecorder({ storyId, studentId, classId, schoolId, onAudioUploaded }: AudioRecorderProps) {
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const chunksRef = useRef<Blob[]>([]);
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
mediaRecorderRef.current = new MediaRecorder(stream);
|
||||
chunksRef.current = [];
|
||||
|
||||
mediaRecorderRef.current.ondataavailable = (e) => {
|
||||
chunksRef.current.push(e.data);
|
||||
};
|
||||
|
||||
mediaRecorderRef.current.onstop = () => {
|
||||
const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
|
||||
setAudioBlob(audioBlob);
|
||||
};
|
||||
|
||||
mediaRecorderRef.current.start();
|
||||
setIsRecording(true);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError('Erro ao acessar microfone. Verifique as permissões.');
|
||||
console.error('Erro ao iniciar gravação:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorderRef.current && isRecording) {
|
||||
mediaRecorderRef.current.stop();
|
||||
setIsRecording(false);
|
||||
|
||||
// Parar todas as tracks do stream
|
||||
mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
};
|
||||
|
||||
const uploadAudio = async () => {
|
||||
if (!audioBlob) return;
|
||||
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Criar nome único para o arquivo usando uma estrutura de pastas organizada
|
||||
const timestamp = new Date().getTime();
|
||||
const filePath = `${studentId}/${classId}/${storyId}/${timestamp}.webm`;
|
||||
|
||||
// Upload do arquivo para o Supabase Storage
|
||||
const { data, error: uploadError } = await supabase.storage
|
||||
.from('recordings')
|
||||
.upload(filePath, audioBlob, {
|
||||
contentType: 'audio/webm',
|
||||
cacheControl: '3600'
|
||||
});
|
||||
|
||||
if (uploadError) throw uploadError;
|
||||
|
||||
// Obter URL pública do arquivo
|
||||
const { data: { publicUrl } } = supabase.storage
|
||||
.from('recordings')
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
// Salvar referência no banco com todas as relações
|
||||
const { error: dbError } = await supabase
|
||||
.from('story_recordings')
|
||||
.insert({
|
||||
story_id: storyId,
|
||||
student_id: studentId,
|
||||
class_id: classId,
|
||||
school_id: schoolId,
|
||||
audio_url: publicUrl,
|
||||
status: 'pending_analysis'
|
||||
});
|
||||
|
||||
if (dbError) throw dbError;
|
||||
|
||||
onAudioUploaded(publicUrl);
|
||||
setAudioBlob(null);
|
||||
} catch (err) {
|
||||
setError('Erro ao enviar áudio. Tente novamente.');
|
||||
console.error('Erro no upload:', err);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-white rounded-lg shadow">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
{!isRecording && !audioBlob && (
|
||||
<button
|
||||
onClick={startRecording}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
|
||||
>
|
||||
<Mic className="w-5 h-5" />
|
||||
Iniciar Gravação
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isRecording && (
|
||||
<button
|
||||
onClick={stopRecording}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition"
|
||||
>
|
||||
<Square className="w-5 h-5" />
|
||||
Parar Gravação
|
||||
</button>
|
||||
)}
|
||||
|
||||
{audioBlob && !isUploading && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
const url = URL.createObjectURL(audioBlob);
|
||||
const audio = new Audio(url);
|
||||
audio.play();
|
||||
}}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
|
||||
>
|
||||
<Play className="w-5 h-5" />
|
||||
Ouvir
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={uploadAudio}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
|
||||
>
|
||||
<Upload className="w-5 h-5" />
|
||||
Enviar Áudio
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isUploading && (
|
||||
<div className="flex items-center gap-2 text-gray-600">
|
||||
<Loader className="w-5 h-5 animate-spin" />
|
||||
Enviando áudio...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-red-600 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
96
src/pages/demo/DemoPage.tsx
Normal file
96
src/pages/demo/DemoPage.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AudioRecorderDemo } from '../../components/demo/AudioRecorderDemo';
|
||||
import { ArrowRight, Sparkles } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export function DemoPage() {
|
||||
const navigate = useNavigate();
|
||||
const [demoResult, setDemoResult] = useState<{
|
||||
fluency?: number;
|
||||
accuracy?: number;
|
||||
confidence?: number;
|
||||
feedback?: string;
|
||||
} | null>(null);
|
||||
|
||||
const handleDemoComplete = (result: typeof demoResult) => {
|
||||
setDemoResult(result);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-purple-50 to-white py-12">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Experimente Agora!
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Grave um trecho de leitura e veja como nossa IA avalia seu desempenho
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
|
||||
<div className="prose max-w-none mb-8">
|
||||
<h2>Texto Sugerido para Leitura:</h2>
|
||||
<blockquote className="text-lg text-gray-700 border-l-4 border-purple-300 pl-4">
|
||||
"O pequeno príncipe sentou-se numa pedra e levantou os olhos para o céu:
|
||||
— Pergunto-me se as estrelas são iluminadas para que cada um possa um dia encontrar a sua."
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<AudioRecorderDemo onAnalysisComplete={handleDemoComplete} />
|
||||
</div>
|
||||
|
||||
{demoResult && (
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Sparkles className="text-purple-600" />
|
||||
Resultado da Análise
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-purple-50 rounded-xl p-6">
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">
|
||||
{demoResult.fluency}%
|
||||
</div>
|
||||
<div className="text-gray-600">Fluência</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 rounded-xl p-6">
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">
|
||||
{demoResult.accuracy}%
|
||||
</div>
|
||||
<div className="text-gray-600">Precisão</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 rounded-xl p-6">
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">
|
||||
{demoResult.confidence}%
|
||||
</div>
|
||||
<div className="text-gray-600">Confiança</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 rounded-xl p-6 mb-8">
|
||||
<h3 className="text-lg font-semibold text-green-800 mb-2">
|
||||
Feedback da IA
|
||||
</h3>
|
||||
<p className="text-green-700">
|
||||
{demoResult.feedback}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
onClick={() => navigate('/register/school')}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition"
|
||||
>
|
||||
Começar a Usar na Minha Escola
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/story/StoryPage.tsx
Normal file
39
src/pages/story/StoryPage.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { AudioRecorder } from '@/components/story/AudioRecorder';
|
||||
|
||||
export function StoryPage() {
|
||||
// ... outros códigos ...
|
||||
|
||||
const handleAudioUploaded = async (audioUrl: string) => {
|
||||
try {
|
||||
// Salvar referência do áudio no banco de dados
|
||||
const { error } = await supabase
|
||||
.from('story_recordings')
|
||||
.insert({
|
||||
story_id: storyId,
|
||||
student_id: studentId,
|
||||
audio_url: audioUrl,
|
||||
status: 'pending_analysis' // será analisado pela IA posteriormente
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Aqui você pode adicionar a lógica para enviar o áudio para análise da IA
|
||||
// Por exemplo, chamar uma função que envia o áudio para um endpoint de IA
|
||||
|
||||
} catch (err) {
|
||||
console.error('Erro ao salvar gravação:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* ... outros elementos da página ... */}
|
||||
|
||||
<AudioRecorder
|
||||
storyId={storyId}
|
||||
studentId={studentId}
|
||||
onAudioUploaded={handleAudioUploaded}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -13,6 +13,7 @@ import { TeachersPage } from '../pages/dashboard/teachers/TeachersPage';
|
||||
import { InviteTeacherPage } from '../pages/dashboard/teachers/InviteTeacherPage';
|
||||
import { StudentsPage } from '../pages/dashboard/students/StudentsPage';
|
||||
import { AddStudentPage } from '../pages/dashboard/students/AddStudentPage';
|
||||
import { DemoPage } from '../pages/demo/DemoPage';
|
||||
import React from 'react';
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
@ -106,7 +107,7 @@ export const router = createBrowserRouter([
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
element: <StoryViewer demo={true} />,
|
||||
element: <DemoPage />,
|
||||
},
|
||||
{
|
||||
path: '/auth/callback',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user