mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-18 14:27:51 +00:00
feat: Implementando criação de história por voz
This commit is contained in:
parent
90506ca894
commit
c5a3017a7c
25
docs/voice-features.md
Normal file
25
docs/voice-features.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
## Geração por Voz
|
||||||
|
|
||||||
|
### Como usar:
|
||||||
|
1. Clique no ícone de microfone
|
||||||
|
2. Fale sua descrição por 15-120 segundos
|
||||||
|
3. Confira a transcrição
|
||||||
|
4. Ajuste se necessário
|
||||||
|
5. Envie para gerar a história
|
||||||
|
|
||||||
|
### Requisitos:
|
||||||
|
- Navegador moderno (Chrome, Edge, Safari 14+)
|
||||||
|
- Microfone habilitado
|
||||||
|
- Conexão estável
|
||||||
|
|
||||||
|
## Segurança
|
||||||
|
|
||||||
|
- Gravações temporárias são excluídas após 1h
|
||||||
|
- Transcrições são validadas contra conteúdo sensível
|
||||||
|
- Dados de áudio não são armazenados permanentemente
|
||||||
|
|
||||||
|
## Limitações Conhecidas
|
||||||
|
|
||||||
|
- Acento pode afetar precisão da transcrição
|
||||||
|
- Ruído ambiente pode interferir na qualidade
|
||||||
|
- Suporte limitado a sotaques regionais
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { supabase } from '../../lib/supabase';
|
import { supabase } from '../../lib/supabase';
|
||||||
import { useSession } from '../../hooks/useSession';
|
import { useSession } from '../../hooks/useSession';
|
||||||
@ -29,26 +29,35 @@ interface StoryChoices {
|
|||||||
context?: string;
|
context?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function StoryGenerator() {
|
interface StoryGeneratorProps {
|
||||||
const navigate = useNavigate();
|
initialContext?: string;
|
||||||
const { session } = useSession();
|
onContextChange: (context: string) => void;
|
||||||
const { themes, subjects, characters, settings, isLoading } = useStoryCategories();
|
inputMode: 'voice' | 'text' | 'form';
|
||||||
const [step, setStep] = React.useState(1);
|
voiceTranscript: string;
|
||||||
const [choices, setChoices] = React.useState<StoryChoices>({
|
isGenerating: boolean;
|
||||||
theme_id: null,
|
setIsGenerating: (value: boolean) => void;
|
||||||
subject_id: null,
|
step: number;
|
||||||
character_id: null,
|
setStep: (step: number) => void;
|
||||||
setting_id: null,
|
choices: StoryChoices;
|
||||||
context: ''
|
setChoices: React.Dispatch<React.SetStateAction<StoryChoices>>;
|
||||||
});
|
}
|
||||||
const [isGenerating, setIsGenerating] = React.useState(false);
|
|
||||||
const [error, setError] = React.useState<string | null>(null);
|
|
||||||
const [generationStatus, setGenerationStatus] = React.useState<
|
|
||||||
'idle' | 'creating' | 'generating-images' | 'saving'
|
|
||||||
>('idle');
|
|
||||||
const { trackStoryGenerated } = useStudentTracking();
|
|
||||||
const startTime = React.useRef(Date.now());
|
|
||||||
|
|
||||||
|
export function StoryGenerator({
|
||||||
|
initialContext = '',
|
||||||
|
onContextChange,
|
||||||
|
inputMode,
|
||||||
|
voiceTranscript,
|
||||||
|
isGenerating,
|
||||||
|
setIsGenerating,
|
||||||
|
step,
|
||||||
|
setStep,
|
||||||
|
choices,
|
||||||
|
setChoices
|
||||||
|
}: StoryGeneratorProps) {
|
||||||
|
// 1. Obter dados da API
|
||||||
|
const { themes, subjects, characters, settings, isLoading } = useStoryCategories();
|
||||||
|
|
||||||
|
// 2. Definir steps com os dados obtidos
|
||||||
const steps: StoryStep[] = [
|
const steps: StoryStep[] = [
|
||||||
{
|
{
|
||||||
title: 'Escolha o Tema',
|
title: 'Escolha o Tema',
|
||||||
@ -71,11 +80,45 @@ export function StoryGenerator() {
|
|||||||
key: 'setting_id'
|
key: 'setting_id'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Adicione um Contexto (Opcional)',
|
title: 'Contexto da História (Opcional)',
|
||||||
isContextStep: true
|
isContextStep: true
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// 3. useEffect que depende dos dados
|
||||||
|
useEffect(() => {
|
||||||
|
if (inputMode === 'voice' && voiceTranscript && themes) {
|
||||||
|
setStep(steps.length);
|
||||||
|
setChoices(prev => ({
|
||||||
|
...prev,
|
||||||
|
theme_id: 'auto',
|
||||||
|
subject_id: 'auto',
|
||||||
|
character_id: 'auto',
|
||||||
|
setting_id: 'auto'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}, [inputMode, voiceTranscript, steps.length, themes, setStep, setChoices]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setChoices(prev => ({
|
||||||
|
...prev,
|
||||||
|
context: inputMode === 'voice' ? voiceTranscript : initialContext
|
||||||
|
}));
|
||||||
|
}, [voiceTranscript, initialContext, inputMode]);
|
||||||
|
|
||||||
|
const handleContextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
|
onContextChange(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { session } = useSession();
|
||||||
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
const [generationStatus, setGenerationStatus] = React.useState<
|
||||||
|
'idle' | 'creating' | 'generating-images' | 'saving'
|
||||||
|
>('idle');
|
||||||
|
const { trackStoryGenerated } = useStudentTracking();
|
||||||
|
const startTime = React.useRef(Date.now());
|
||||||
|
|
||||||
const currentStep = steps[step - 1];
|
const currentStep = steps[step - 1];
|
||||||
const isLastStep = step === steps.length;
|
const isLastStep = step === steps.length;
|
||||||
|
|
||||||
@ -86,17 +129,16 @@ export function StoryGenerator() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleContextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setChoices(prev => ({ ...prev, context: event.target.value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (step > 1) {
|
|
||||||
setStep(prev => prev - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGenerate = async () => {
|
const handleGenerate = async () => {
|
||||||
|
// Validação apenas para modo voz
|
||||||
|
if (inputMode === 'voice' && !voiceTranscript) {
|
||||||
|
setError('Grave uma descrição por voz antes de enviar');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contexto é opcional no formulário
|
||||||
|
const finalContext = inputMode === 'voice' ? voiceTranscript : initialContext;
|
||||||
|
|
||||||
if (!session?.user?.id) return;
|
if (!session?.user?.id) return;
|
||||||
|
|
||||||
if (!choices.theme_id || !choices.subject_id || !choices.character_id || !choices.setting_id) {
|
if (!choices.theme_id || !choices.subject_id || !choices.character_id || !choices.setting_id) {
|
||||||
@ -118,7 +160,7 @@ export function StoryGenerator() {
|
|||||||
subject_id: choices.subject_id,
|
subject_id: choices.subject_id,
|
||||||
character_id: choices.character_id,
|
character_id: choices.character_id,
|
||||||
setting_id: choices.setting_id,
|
setting_id: choices.setting_id,
|
||||||
context: choices.context || null,
|
context: finalContext,
|
||||||
status: 'draft',
|
status: 'draft',
|
||||||
content: {
|
content: {
|
||||||
prompt: choices,
|
prompt: choices,
|
||||||
@ -142,7 +184,7 @@ export function StoryGenerator() {
|
|||||||
subject: selectedSubject,
|
subject: selectedSubject,
|
||||||
character: selectedCharacter,
|
character: selectedCharacter,
|
||||||
setting: selectedSetting,
|
setting: selectedSetting,
|
||||||
context: choices.context,
|
context: finalContext,
|
||||||
generation_time: Date.now() - startTime.current,
|
generation_time: Date.now() - startTime.current,
|
||||||
word_count: 0, // será atualizado após a geração
|
word_count: 0, // será atualizado após a geração
|
||||||
student_id: session.user.id,
|
student_id: session.user.id,
|
||||||
@ -240,10 +282,10 @@ export function StoryGenerator() {
|
|||||||
{currentStep.isContextStep ? (
|
{currentStep.isContextStep ? (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<textarea
|
<textarea
|
||||||
value={choices.context}
|
value={initialContext}
|
||||||
onChange={handleContextChange}
|
onChange={handleContextChange}
|
||||||
placeholder="Adicione detalhes ou ideias específicas para sua história..."
|
className="w-full p-3 border rounded-lg"
|
||||||
className="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
|
placeholder="Descreva sua história... (opcional)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -276,10 +318,16 @@ export function StoryGenerator() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{choices.theme_id === 'auto' && (
|
||||||
|
<div className="mb-4 p-3 bg-blue-50 text-blue-600 rounded-lg">
|
||||||
|
Configurações automáticas selecionadas com base na descrição por voz
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* Navigation Buttons */}
|
||||||
<div className="flex justify-between pt-6">
|
<div className="flex justify-between pt-6">
|
||||||
<button
|
<button
|
||||||
onClick={handleBack}
|
onClick={() => setStep(prev => prev - 1)}
|
||||||
disabled={step === 1}
|
disabled={step === 1}
|
||||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 disabled:opacity-50"
|
className="flex items-center gap-2 px-4 py-2 text-gray-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -0,0 +1,79 @@
|
|||||||
|
import { useSpeechRecognition } from '../hooks/useSpeechRecognition';
|
||||||
|
import { Mic, Waves } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
interface VoiceCommandButtonProps {
|
||||||
|
className?: string;
|
||||||
|
onTranscriptUpdate: (transcript: string) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VoiceCommandButton({
|
||||||
|
className,
|
||||||
|
onTranscriptUpdate,
|
||||||
|
disabled = false
|
||||||
|
}: VoiceCommandButtonProps) {
|
||||||
|
const {
|
||||||
|
transcript,
|
||||||
|
start,
|
||||||
|
stop,
|
||||||
|
status,
|
||||||
|
error,
|
||||||
|
isSupported
|
||||||
|
} = useSpeechRecognition();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (transcript) {
|
||||||
|
onTranscriptUpdate(transcript);
|
||||||
|
}
|
||||||
|
}, [transcript, onTranscriptUpdate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === 'recording') {
|
||||||
|
onTranscriptUpdate(''); // Limpar contexto ao iniciar nova gravação
|
||||||
|
}
|
||||||
|
}, [status, onTranscriptUpdate]);
|
||||||
|
|
||||||
|
if (!isSupported) {
|
||||||
|
return (
|
||||||
|
<div className="p-3 bg-yellow-50 text-yellow-700 rounded-lg text-sm">
|
||||||
|
Seu navegador não suporta gravação por voz
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative group">
|
||||||
|
<button
|
||||||
|
onClick={status === 'recording' ? stop : start}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 px-4 py-2 rounded-lg transition-all',
|
||||||
|
status === 'recording'
|
||||||
|
? 'bg-red-100 text-red-600 hover:bg-red-200 shadow-sm'
|
||||||
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
|
||||||
|
disabled && 'opacity-50 cursor-not-allowed',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
aria-label={status === 'recording' ? "Parar gravação" : "Iniciar gravação"}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<Mic className="h-5 w-5" />
|
||||||
|
{status === 'recording' && (
|
||||||
|
<Waves className="absolute -top-2 -right-2 h-4 w-4 animate-pulse text-red-500" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{status === 'recording' ? 'Gravando...' : 'Gravar por Voz'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="absolute top-full mt-2 p-2 bg-red-50 text-red-600 text-sm rounded-lg shadow-lg border border-red-100">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
99
src/features/voice-commands/hooks/useSpeechRecognition.ts
Normal file
99
src/features/voice-commands/hooks/useSpeechRecognition.ts
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
type RecognitionState = 'idle' | 'recording' | 'processing' | 'error';
|
||||||
|
|
||||||
|
interface UseSpeechRecognitionReturn {
|
||||||
|
transcript: string;
|
||||||
|
start: () => void;
|
||||||
|
stop: () => void;
|
||||||
|
reset: () => void;
|
||||||
|
status: RecognitionState;
|
||||||
|
error: string | null;
|
||||||
|
isSupported: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSpeechRecognition(): UseSpeechRecognitionReturn {
|
||||||
|
const [status, setStatus] = useState<RecognitionState>('idle');
|
||||||
|
const [transcript, setTranscript] = useState('');
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
|
||||||
|
|
||||||
|
const isSupported = typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isSupported) {
|
||||||
|
setError('Reconhecimento de voz não é suportado neste navegador');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||||
|
const recognition = new SpeechRecognition();
|
||||||
|
|
||||||
|
recognition.continuous = false;
|
||||||
|
recognition.lang = 'pt-BR';
|
||||||
|
recognition.interimResults = false;
|
||||||
|
recognition.maxAlternatives = 1;
|
||||||
|
|
||||||
|
recognition.onstart = () => setStatus('recording');
|
||||||
|
recognition.onend = () => setStatus('idle');
|
||||||
|
recognition.onerror = (event) => {
|
||||||
|
setStatus('error');
|
||||||
|
setError(`Erro na gravação: ${event.error}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
recognition.onresult = (event) => {
|
||||||
|
const result = event.results[0][0].transcript;
|
||||||
|
setTranscript(prev => prev + ' ' + result);
|
||||||
|
setStatus('processing');
|
||||||
|
setTimeout(() => setStatus('idle'), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
setRecognition(recognition);
|
||||||
|
}, [isSupported]);
|
||||||
|
|
||||||
|
const start = useCallback(() => {
|
||||||
|
if (!recognition || status === 'recording') return;
|
||||||
|
|
||||||
|
setTranscript('');
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
recognition.start();
|
||||||
|
} catch (err) {
|
||||||
|
setError('Não foi possível iniciar a gravação');
|
||||||
|
setStatus('error');
|
||||||
|
}
|
||||||
|
}, [recognition, status]);
|
||||||
|
|
||||||
|
const stop = useCallback(() => {
|
||||||
|
if (recognition && status === 'recording') {
|
||||||
|
recognition.stop();
|
||||||
|
}
|
||||||
|
}, [recognition, status]);
|
||||||
|
|
||||||
|
const reset = useCallback(() => {
|
||||||
|
setTranscript('');
|
||||||
|
setError(null);
|
||||||
|
setStatus('idle');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === 'recording') {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
stop();
|
||||||
|
setError('Tempo máximo de gravação atingido (2 minutos)');
|
||||||
|
}, 120_000);
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}, [status, stop]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
transcript,
|
||||||
|
start,
|
||||||
|
stop,
|
||||||
|
reset,
|
||||||
|
status,
|
||||||
|
error,
|
||||||
|
isSupported
|
||||||
|
};
|
||||||
|
}
|
||||||
16
src/features/voice-commands/utils/audioValidator.ts
Normal file
16
src/features/voice-commands/utils/audioValidator.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
// Lista de termos bloqueados expandida
|
||||||
|
const blockedTerms = [
|
||||||
|
'senha', 'token', 'cartão', 'crédito',
|
||||||
|
'cpf', 'rg', 'endereço', 'telefone'
|
||||||
|
];
|
||||||
|
|
||||||
|
export function validateAudioContent(transcript: string): boolean {
|
||||||
|
const cleanTranscript = transcript
|
||||||
|
.normalize('NFD')
|
||||||
|
.replace(/[\u0300-\u036f]/g, '')
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
|
return !blockedTerms.some(term =>
|
||||||
|
cleanTranscript.includes(term.normalize('NFD').toLowerCase())
|
||||||
|
);
|
||||||
|
}
|
||||||
3
src/hooks/useSpeechRecognition.ts
Normal file
3
src/hooks/useSpeechRecognition.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function useSpeechRecognition() {
|
||||||
|
// ... implementação
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { ArrowLeft, Sparkles } from 'lucide-react';
|
import { ArrowLeft, Sparkles } from 'lucide-react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { StoryGenerator } from '../../components/story/StoryGenerator';
|
import { StoryGenerator } from '../../components/story/StoryGenerator';
|
||||||
@ -6,14 +6,47 @@ import { useSession } from '../../hooks/useSession';
|
|||||||
import { TextCaseToggle } from '../../components/ui/text-case-toggle';
|
import { TextCaseToggle } from '../../components/ui/text-case-toggle';
|
||||||
import { AdaptiveTitle, AdaptiveParagraph, AdaptiveText } from '../../components/ui/adaptive-text';
|
import { AdaptiveTitle, AdaptiveParagraph, AdaptiveText } from '../../components/ui/adaptive-text';
|
||||||
import { useUppercasePreference } from '../../hooks/useUppercasePreference';
|
import { useUppercasePreference } from '../../hooks/useUppercasePreference';
|
||||||
|
import { useSpeechRecognition } from '@/features/voice-commands/hooks/useSpeechRecognition';
|
||||||
|
import { VoiceCommandButton } from '@/features/voice-commands/components/VoiceCommandButton';
|
||||||
|
|
||||||
export function CreateStoryPage() {
|
export function CreateStoryPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { session } = useSession();
|
const { session } = useSession();
|
||||||
const [error, setError] = React.useState<string | null>(null);
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
const {
|
||||||
|
transcript: voiceTranscript,
|
||||||
|
start: startRecording,
|
||||||
|
stop: stopRecording,
|
||||||
|
status: recordingStatus,
|
||||||
|
error: voiceError,
|
||||||
|
isSupported: isVoiceSupported
|
||||||
|
} = useSpeechRecognition();
|
||||||
|
|
||||||
const { isUpperCase, toggleUppercase, isLoading } = useUppercasePreference(session?.user?.id);
|
const { isUpperCase, toggleUppercase, isLoading } = useUppercasePreference(session?.user?.id);
|
||||||
|
|
||||||
|
const [inputMode, setInputMode] = useState<'voice' | 'form'>('form');
|
||||||
|
|
||||||
|
const [storyContext, setStoryContext] = useState('');
|
||||||
|
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
|
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
|
||||||
|
const [choices, setChoices] = useState<StoryChoices>({
|
||||||
|
theme_id: null,
|
||||||
|
subject_id: null,
|
||||||
|
character_id: null,
|
||||||
|
setting_id: null,
|
||||||
|
context: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (inputMode === 'voice' && voiceTranscript) {
|
||||||
|
setStep(5);
|
||||||
|
setInputMode('voice');
|
||||||
|
}
|
||||||
|
}, [voiceTranscript, inputMode]);
|
||||||
|
|
||||||
if (!session) {
|
if (!session) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
@ -72,7 +105,75 @@ export function CreateStoryPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<StoryGenerator />
|
{voiceError && (
|
||||||
|
<div className="mb-6 p-4 bg-red-50 text-red-600 rounded-lg">
|
||||||
|
<AdaptiveText
|
||||||
|
text={voiceError}
|
||||||
|
isUpperCase={isUpperCase}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{!isVoiceSupported && (
|
||||||
|
<div className="p-3 bg-yellow-50 text-yellow-700 rounded-lg mb-4">
|
||||||
|
Seu navegador não suporta gravação por voz
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4 flex items-center gap-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Modo atual:
|
||||||
|
</span>
|
||||||
|
<span className="px-2 py-1 rounded-full text-xs bg-purple-100 text-purple-800">
|
||||||
|
{inputMode === 'voice' ? 'Voz' : 'Formulário'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8 space-y-4">
|
||||||
|
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
|
||||||
|
<h3 className="text-sm font-medium text-purple-800 mb-3">
|
||||||
|
Descreva sua história por voz
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<VoiceCommandButton
|
||||||
|
onTranscriptUpdate={(transcript) => {
|
||||||
|
setInputMode('voice');
|
||||||
|
setStoryContext(transcript);
|
||||||
|
}}
|
||||||
|
disabled={isGenerating}
|
||||||
|
className="w-full justify-center py-3"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{voiceTranscript && (
|
||||||
|
<div className="mt-4 p-3 bg-white rounded-lg border border-gray-200">
|
||||||
|
<p className="text-sm text-gray-700">{voiceTranscript}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex-1 h-px bg-gray-200" />
|
||||||
|
<span className="text-sm text-gray-500">ou</span>
|
||||||
|
<div className="flex-1 h-px bg-gray-200" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<StoryGenerator
|
||||||
|
initialContext={inputMode === 'voice' ? voiceTranscript : storyContext}
|
||||||
|
onContextChange={(newContext) => {
|
||||||
|
if (inputMode === 'form') {
|
||||||
|
setStoryContext(newContext);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
isGenerating={isGenerating}
|
||||||
|
setIsGenerating={setIsGenerating}
|
||||||
|
step={step}
|
||||||
|
setStep={setStep}
|
||||||
|
choices={choices}
|
||||||
|
setChoices={setChoices}
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="mt-8 p-4 bg-purple-50 rounded-lg">
|
<div className="mt-8 p-4 bg-purple-50 rounded-lg">
|
||||||
<h3 className="text-sm font-medium text-purple-900 mb-2">
|
<h3 className="text-sm font-medium text-purple-900 mb-2">
|
||||||
|
|||||||
3
src/utils/audio/audioProcessor.ts
Normal file
3
src/utils/audio/audioProcessor.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function normalizeAudio(buffer: ArrayBuffer) {
|
||||||
|
// ... implementação
|
||||||
|
}
|
||||||
@ -15,6 +15,16 @@ interface StoryPrompt {
|
|||||||
difficulty: 'easy' | 'medium' | 'hard';
|
difficulty: 'easy' | 'medium' | 'hard';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface EnhancedPayload {
|
||||||
|
// Campos existentes
|
||||||
|
voice_context?: string;
|
||||||
|
audio_metadata?: {
|
||||||
|
duration: number;
|
||||||
|
sample_rate: number;
|
||||||
|
language: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
const ALLOWED_ORIGINS = [
|
const ALLOWED_ORIGINS = [
|
||||||
'http://localhost:5173', // Vite dev server
|
'http://localhost:5173', // Vite dev server
|
||||||
'http://localhost:3000', // Caso use outro port
|
'http://localhost:3000', // Caso use outro port
|
||||||
@ -60,8 +70,8 @@ serve(async (req) => {
|
|||||||
return new Response('ok', { headers: corsHeaders })
|
return new Response('ok', { headers: corsHeaders })
|
||||||
}
|
}
|
||||||
|
|
||||||
const { record } = await req.json()
|
const { voice_context, ...rest } = await req.json()
|
||||||
console.log('[Request]', record)
|
console.log('[Request]', rest)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const supabase = createClient(
|
const supabase = createClient(
|
||||||
@ -72,10 +82,10 @@ serve(async (req) => {
|
|||||||
|
|
||||||
console.log('[DB] Buscando categorias...')
|
console.log('[DB] Buscando categorias...')
|
||||||
const [themeResult, subjectResult, characterResult, settingResult] = await Promise.all([
|
const [themeResult, subjectResult, characterResult, settingResult] = await Promise.all([
|
||||||
supabase.from('story_themes').select('*').eq('id', record.theme_id).single(),
|
supabase.from('story_themes').select('*').eq('id', rest.theme_id).single(),
|
||||||
supabase.from('story_subjects').select('*').eq('id', record.subject_id).single(),
|
supabase.from('story_subjects').select('*').eq('id', rest.subject_id).single(),
|
||||||
supabase.from('story_characters').select('*').eq('id', record.character_id).single(),
|
supabase.from('story_characters').select('*').eq('id', rest.character_id).single(),
|
||||||
supabase.from('story_settings').select('*').eq('id', record.setting_id).single()
|
supabase.from('story_settings').select('*').eq('id', rest.setting_id).single()
|
||||||
])
|
])
|
||||||
|
|
||||||
console.log('[DB] Resultados das consultas:', {
|
console.log('[DB] Resultados das consultas:', {
|
||||||
@ -90,10 +100,10 @@ serve(async (req) => {
|
|||||||
if (characterResult.error) throw new Error(`Erro ao buscar personagem: ${characterResult.error.message}`);
|
if (characterResult.error) throw new Error(`Erro ao buscar personagem: ${characterResult.error.message}`);
|
||||||
if (settingResult.error) throw new Error(`Erro ao buscar cenário: ${settingResult.error.message}`);
|
if (settingResult.error) throw new Error(`Erro ao buscar cenário: ${settingResult.error.message}`);
|
||||||
|
|
||||||
if (!themeResult.data) throw new Error(`Tema não encontrado: ${record.theme_id}`);
|
if (!themeResult.data) throw new Error(`Tema não encontrado: ${rest.theme_id}`);
|
||||||
if (!subjectResult.data) throw new Error(`Disciplina não encontrada: ${record.subject_id}`);
|
if (!subjectResult.data) throw new Error(`Disciplina não encontrada: ${rest.subject_id}`);
|
||||||
if (!characterResult.data) throw new Error(`Personagem não encontrado: ${record.character_id}`);
|
if (!characterResult.data) throw new Error(`Personagem não encontrado: ${rest.character_id}`);
|
||||||
if (!settingResult.data) throw new Error(`Cenário não encontrado: ${record.setting_id}`);
|
if (!settingResult.data) throw new Error(`Cenário não encontrado: ${rest.setting_id}`);
|
||||||
|
|
||||||
const theme = themeResult.data;
|
const theme = themeResult.data;
|
||||||
const subject = subjectResult.data;
|
const subject = subjectResult.data;
|
||||||
@ -103,68 +113,7 @@ serve(async (req) => {
|
|||||||
console.log('[Validation] Categorias validadas com sucesso')
|
console.log('[Validation] Categorias validadas com sucesso')
|
||||||
|
|
||||||
console.log('[GPT] Construindo prompt...')
|
console.log('[GPT] Construindo prompt...')
|
||||||
const prompt = `
|
const prompt = buildPrompt(rest, voice_context);
|
||||||
Crie uma história educativa para crianças com as seguintes características:
|
|
||||||
|
|
||||||
Tema: ${theme.title}
|
|
||||||
Disciplina: ${subject.title}
|
|
||||||
Personagem Principal: ${character.title}
|
|
||||||
Cenário: ${setting.title}
|
|
||||||
${record.context ? `Contexto Adicional: ${record.context}` : ''}
|
|
||||||
|
|
||||||
Requisitos:
|
|
||||||
- História adequada para crianças de 6-12 anos
|
|
||||||
- Conteúdo educativo focado em ${subject.title}
|
|
||||||
- Linguagem clara e envolvente
|
|
||||||
- 3-5 páginas de conteúdo
|
|
||||||
- Cada página deve ter um texto curto e sugestão para uma imagem
|
|
||||||
- Evitar conteúdo sensível ou inadequado
|
|
||||||
- Incluir elementos de ${theme.title}
|
|
||||||
- Ambientado em ${setting.title}
|
|
||||||
- Personagem principal baseado em ${character.title}
|
|
||||||
|
|
||||||
Requisitos específicos para exercícios:
|
|
||||||
1. Para o exercício de completar frases:
|
|
||||||
- Selecione 5-8 palavras importantes do texto
|
|
||||||
- Escolha palavras que sejam substantivos, verbos ou adjetivos
|
|
||||||
- Evite artigos, preposições ou palavras muito simples
|
|
||||||
- As palavras devem ser relevantes para o contexto da história
|
|
||||||
|
|
||||||
2. Para o exercício de formação de palavras:
|
|
||||||
- Selecione palavras com diferentes padrões silábicos
|
|
||||||
- Inclua palavras que possam ser divididas em sílabas
|
|
||||||
- Priorize palavras com 2-4 sílabas
|
|
||||||
|
|
||||||
3. Para o exercício de pronúncia:
|
|
||||||
- Selecione palavras que trabalhem diferentes fonemas
|
|
||||||
- Inclua palavras com encontros consonantais
|
|
||||||
- Priorize palavras que sejam desafiadoras para a faixa etária
|
|
||||||
|
|
||||||
Formato da resposta:
|
|
||||||
{
|
|
||||||
"title": "Título da História",
|
|
||||||
"content": {
|
|
||||||
"pages": [
|
|
||||||
{
|
|
||||||
"text": "Texto da página com frases completas...",
|
|
||||||
"imagePrompt": "Descrição para gerar imagem...",
|
|
||||||
"keywords": ["palavra1", "palavra2"],
|
|
||||||
"phonemes": ["fonema1", "fonema2"],
|
|
||||||
"syllablePatterns": ["CV", "CVC", "CCVC"]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"metadata": {
|
|
||||||
"targetAge": number,
|
|
||||||
"difficulty": string,
|
|
||||||
"exerciseWords": {
|
|
||||||
"pronunciation": ["palavra1", "palavra2"],
|
|
||||||
"formation": ["palavra3", "palavra4"],
|
|
||||||
"completion": ["palavra5", "palavra6"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
console.log('[GPT] Prompt construído:', prompt)
|
console.log('[GPT] Prompt construído:', prompt)
|
||||||
|
|
||||||
console.log('[GPT] Iniciando geração da história...')
|
console.log('[GPT] Iniciando geração da história...')
|
||||||
@ -213,7 +162,7 @@ serve(async (req) => {
|
|||||||
const imageBuffer = await imageRes.arrayBuffer()
|
const imageBuffer = await imageRes.arrayBuffer()
|
||||||
|
|
||||||
// Gerar nome único para o arquivo
|
// Gerar nome único para o arquivo
|
||||||
const fileName = `${record.id}/page-${index + 1}-${Date.now()}.png`
|
const fileName = `${rest.id}/page-${index + 1}-${Date.now()}.png`
|
||||||
|
|
||||||
// Salvar no Storage do Supabase
|
// Salvar no Storage do Supabase
|
||||||
console.log(`[Storage] Salvando imagem ${index + 1} no bucket...`)
|
console.log(`[Storage] Salvando imagem ${index + 1} no bucket...`)
|
||||||
@ -258,10 +207,10 @@ serve(async (req) => {
|
|||||||
subject_id: subject.id,
|
subject_id: subject.id,
|
||||||
character_id: character.id,
|
character_id: character.id,
|
||||||
setting_id: setting.id,
|
setting_id: setting.id,
|
||||||
context: record.context,
|
context: rest.context,
|
||||||
updated_at: new Date().toISOString()
|
updated_at: new Date().toISOString()
|
||||||
})
|
})
|
||||||
.eq('id', record.id)
|
.eq('id', rest.id)
|
||||||
.select()
|
.select()
|
||||||
.single();
|
.single();
|
||||||
|
|
||||||
@ -272,7 +221,7 @@ serve(async (req) => {
|
|||||||
.from('story_pages')
|
.from('story_pages')
|
||||||
.insert(
|
.insert(
|
||||||
pages.map((page, index) => ({
|
pages.map((page, index) => ({
|
||||||
story_id: record.id,
|
story_id: rest.id,
|
||||||
page_number: index + 1,
|
page_number: index + 1,
|
||||||
text: page.text,
|
text: page.text,
|
||||||
image_url: page.image,
|
image_url: page.image,
|
||||||
@ -286,7 +235,7 @@ serve(async (req) => {
|
|||||||
const { error: genError } = await supabase
|
const { error: genError } = await supabase
|
||||||
.from('story_generations')
|
.from('story_generations')
|
||||||
.insert({
|
.insert({
|
||||||
story_id: record.id,
|
story_id: rest.id,
|
||||||
original_prompt: prompt,
|
original_prompt: prompt,
|
||||||
ai_response: completion.choices[0].message.content,
|
ai_response: completion.choices[0].message.content,
|
||||||
model_used: 'gpt-4o-mini'
|
model_used: 'gpt-4o-mini'
|
||||||
@ -301,7 +250,7 @@ serve(async (req) => {
|
|||||||
*,
|
*,
|
||||||
pages:story_pages(*)
|
pages:story_pages(*)
|
||||||
`)
|
`)
|
||||||
.eq('id', record.id)
|
.eq('id', rest.id)
|
||||||
.single();
|
.single();
|
||||||
|
|
||||||
if (fetchError) throw new Error(`Erro ao buscar história completa: ${fetchError.message}`);
|
if (fetchError) throw new Error(`Erro ao buscar história completa: ${fetchError.message}`);
|
||||||
@ -318,7 +267,7 @@ serve(async (req) => {
|
|||||||
if (!pageWithWord) return null;
|
if (!pageWithWord) return null;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
story_id: record.id,
|
story_id: rest.id,
|
||||||
word,
|
word,
|
||||||
exercise_type: type,
|
exercise_type: type,
|
||||||
phonemes: pageWithWord?.phonemes || null,
|
phonemes: pageWithWord?.phonemes || null,
|
||||||
@ -365,3 +314,76 @@ serve(async (req) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function buildPrompt(base: StoryPrompt, voice?: string) {
|
||||||
|
return `
|
||||||
|
Crie uma história educativa para crianças com as seguintes características:
|
||||||
|
|
||||||
|
Tema: ${base.theme_id}
|
||||||
|
Disciplina: ${base.subject_id}
|
||||||
|
Personagem Principal: ${base.character_id}
|
||||||
|
Cenário: ${base.setting_id}
|
||||||
|
${base.context ? `Contexto Adicional: ${base.context}` : ''}
|
||||||
|
|
||||||
|
Requisitos:
|
||||||
|
- História adequada para crianças de 6-12 anos
|
||||||
|
- Conteúdo educativo focado em ${base.subject_id}
|
||||||
|
- Linguagem clara e envolvente
|
||||||
|
- 3-5 páginas de conteúdo
|
||||||
|
- Cada página deve ter um texto curto e sugestão para uma imagem
|
||||||
|
- Evitar conteúdo sensível ou inadequado
|
||||||
|
- Incluir elementos de ${base.theme_id}
|
||||||
|
- Ambientado em ${base.setting_id}
|
||||||
|
- Personagem principal baseado em ${base.character_id}
|
||||||
|
|
||||||
|
Requisitos específicos para exercícios:
|
||||||
|
1. Para o exercício de completar frases:
|
||||||
|
- Selecione 5-8 palavras importantes do texto
|
||||||
|
- Escolha palavras que sejam substantivos, verbos ou adjetivos
|
||||||
|
- Evite artigos, preposições ou palavras muito simples
|
||||||
|
- As palavras devem ser relevantes para o contexto da história
|
||||||
|
|
||||||
|
2. Para o exercício de formação de palavras:
|
||||||
|
- Selecione palavras com diferentes padrões silábicos
|
||||||
|
- Inclua palavras que possam ser divididas em sílabas
|
||||||
|
- Priorize palavras com 2-4 sílabas
|
||||||
|
|
||||||
|
3. Para o exercício de pronúncia:
|
||||||
|
- Selecione palavras que trabalhem diferentes fonemas
|
||||||
|
- Inclua palavras com encontros consonantais
|
||||||
|
- Priorize palavras que sejam desafiadoras para a faixa etária
|
||||||
|
|
||||||
|
Formato da resposta:
|
||||||
|
{
|
||||||
|
"title": "Título da História",
|
||||||
|
"content": {
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"text": "Texto da página com frases completas...",
|
||||||
|
"imagePrompt": "Descrição para gerar imagem...",
|
||||||
|
"keywords": ["palavra1", "palavra2"],
|
||||||
|
"phonemes": ["fonema1", "fonema2"],
|
||||||
|
"syllablePatterns": ["CV", "CVC", "CCVC"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"metadata": {
|
||||||
|
"targetAge": number,
|
||||||
|
"difficulty": string,
|
||||||
|
"exerciseWords": {
|
||||||
|
"pronunciation": ["palavra1", "palavra2"],
|
||||||
|
"formation": ["palavra3", "palavra4"],
|
||||||
|
"completion": ["palavra5", "palavra6"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
${voice ? `
|
||||||
|
Contexto Adicional por Voz:
|
||||||
|
"${voice}"
|
||||||
|
|
||||||
|
Diretrizes Adicionais:
|
||||||
|
- Priorizar elementos mencionados na descrição oral
|
||||||
|
- Manter tom e estilo consistentes com a gravação
|
||||||
|
- Incluir palavras-chave identificadas` : ''}
|
||||||
|
`;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user