From 39bbc2c827dadf4c3e8fadec5d18cf463368b36c Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucasrcsantana@MacBook-Air-de-Lucas-3.local>
Date: Fri, 20 Dec 2024 10:06:24 -0300
Subject: [PATCH] =?UTF-8?q?Adiciona=20P=C3=A1gina=20Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/demo/AudioRecorderDemo.tsx | 154 ++++++++++++++++++++
 src/components/story/AudioRecorder.tsx    | 168 ++++++++++++++++++++++
 src/pages/demo/DemoPage.tsx               |  96 +++++++++++++
 src/pages/story/StoryPage.tsx             |  39 +++++
 src/routes/index.tsx                      |   3 +-
 5 files changed, 459 insertions(+), 1 deletion(-)
 create mode 100644 src/components/demo/AudioRecorderDemo.tsx
 create mode 100644 src/components/story/AudioRecorder.tsx
 create mode 100644 src/pages/demo/DemoPage.tsx
 create mode 100644 src/pages/story/StoryPage.tsx

diff --git a/src/components/demo/AudioRecorderDemo.tsx b/src/components/demo/AudioRecorderDemo.tsx
new file mode 100644
index 0000000..d65b737
--- /dev/null
+++ b/src/components/demo/AudioRecorderDemo.tsx
@@ -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>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/story/AudioRecorder.tsx b/src/components/story/AudioRecorder.tsx
new file mode 100644
index 0000000..d3d706c
--- /dev/null
+++ b/src/components/story/AudioRecorder.tsx
@@ -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>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/demo/DemoPage.tsx b/src/pages/demo/DemoPage.tsx
new file mode 100644
index 0000000..2ce2ae1
--- /dev/null
+++ b/src/pages/demo/DemoPage.tsx
@@ -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>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/story/StoryPage.tsx b/src/pages/story/StoryPage.tsx
new file mode 100644
index 0000000..36f1104
--- /dev/null
+++ b/src/pages/story/StoryPage.tsx
@@ -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>
+  );
+} 
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 2d093fc..54751bb 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -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',