Implementación inicial de Nucleo Whisper
- Configurado proyecto Nuxt 4 con PWA - Integrado OpenAI Whisper API para transcripción de audio - Implementada captura de audio desde navegador - Creada UI con grabación y visualización de transcripciones - Configurado Authentik Proxy para autenticación - Setup de Docker y Gitea Actions para despliegue
This commit is contained in:
229
nuxt4/app/app.vue
Normal file
229
nuxt4/app/app.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtRouteAnnouncer />
|
||||
<UNotifications />
|
||||
|
||||
<UContainer class="py-8">
|
||||
<div class="space-y-6 max-w-2xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="flex items-center justify-center gap-3 mb-2">
|
||||
<UIcon name="i-heroicons-microphone" class="w-12 h-12 text-green-500" />
|
||||
<h1 class="text-4xl font-bold">Nucleo Whisper</h1>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Transcripción de audio con OpenAI Whisper
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Contenido principal -->
|
||||
<div v-if="isAuthenticated" class="space-y-6">
|
||||
<!-- Información del usuario -->
|
||||
<UCard>
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-user-circle" class="w-8 h-8 text-gray-500" />
|
||||
<div>
|
||||
<p class="font-semibold">{{ user?.name || user?.username }}</p>
|
||||
<p class="text-sm text-gray-500">{{ user?.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Control de grabación -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-microphone" class="w-5 h-5" />
|
||||
<h3 class="text-lg font-semibold">Grabación</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<!-- Botón de grabación -->
|
||||
<button
|
||||
@click="toggleRecording"
|
||||
:disabled="isTranscribing"
|
||||
class="relative w-32 h-32 rounded-full transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2"
|
||||
:class="isRecording
|
||||
? 'bg-red-500 hover:bg-red-600 focus:ring-red-300 scale-110'
|
||||
: 'bg-green-500 hover:bg-green-600 focus:ring-green-300'
|
||||
"
|
||||
>
|
||||
<UIcon
|
||||
:name="isRecording ? 'i-heroicons-stop' : 'i-heroicons-microphone'"
|
||||
class="w-16 h-16 text-white mx-auto"
|
||||
/>
|
||||
|
||||
<!-- Animación de pulso cuando está grabando -->
|
||||
<span
|
||||
v-if="isRecording"
|
||||
class="absolute inset-0 rounded-full bg-red-500 animate-ping opacity-75"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Estado -->
|
||||
<div class="text-center">
|
||||
<p v-if="isRecording" class="text-lg font-semibold text-red-600">
|
||||
Grabando...
|
||||
</p>
|
||||
<p v-else-if="isTranscribing" class="text-lg font-semibold text-blue-600">
|
||||
Transcribiendo...
|
||||
</p>
|
||||
<p v-else class="text-lg text-gray-600">
|
||||
Presiona para grabar
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Instrucciones -->
|
||||
<div class="text-sm text-gray-500 text-center">
|
||||
<p>1. Presiona el botón para iniciar la grabación</p>
|
||||
<p>2. Habla claramente</p>
|
||||
<p>3. Presiona nuevamente para detener y transcribir</p>
|
||||
<p class="mt-2 text-xs">El texto se copiará automáticamente al portapapeles</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Resultado de transcripción -->
|
||||
<UCard v-if="transcription || error">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-document-text" class="w-5 h-5" />
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ error ? 'Error' : 'Transcripción' }}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
v-if="transcription"
|
||||
@click="copyText"
|
||||
class="text-sm text-green-600 hover:text-green-700 flex items-center gap-1"
|
||||
>
|
||||
<UIcon name="i-heroicons-clipboard-document" class="w-4 h-4" />
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-if="error" class="text-red-600">
|
||||
<p class="font-semibold">Ha ocurrido un error:</p>
|
||||
<p class="text-sm mt-1">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Transcripción -->
|
||||
<div v-else class="space-y-3">
|
||||
<p class="text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
|
||||
{{ transcription }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
icon="i-heroicons-clipboard-document"
|
||||
size="sm"
|
||||
color="green"
|
||||
@click="copyText"
|
||||
>
|
||||
Copiar
|
||||
</UButton>
|
||||
<UButton
|
||||
icon="i-heroicons-x-mark"
|
||||
size="sm"
|
||||
color="gray"
|
||||
variant="soft"
|
||||
@click="clear"
|
||||
>
|
||||
Limpiar
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Sesión -->
|
||||
<div class="flex justify-center gap-3">
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-right-on-rectangle"
|
||||
color="gray"
|
||||
variant="soft"
|
||||
@click="logout"
|
||||
>
|
||||
Cerrar Sesión
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje si no está autenticado -->
|
||||
<UCard v-else class="text-center">
|
||||
<div class="py-8">
|
||||
<UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
|
||||
<h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Authentik Proxy Outpost debería redirigirte automáticamente.
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UContainer>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { isAuthenticated, user, logout } = useAuthentik()
|
||||
const {
|
||||
isRecording,
|
||||
isTranscribing,
|
||||
transcription,
|
||||
error,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
clearTranscription,
|
||||
copyToClipboard
|
||||
} = useWhisper()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const toggleRecording = () => {
|
||||
if (isRecording.value) {
|
||||
stopRecording()
|
||||
} else {
|
||||
startRecording()
|
||||
}
|
||||
}
|
||||
|
||||
const copyText = async () => {
|
||||
const success = await copyToClipboard()
|
||||
if (success) {
|
||||
toast.add({
|
||||
title: 'Copiado',
|
||||
description: 'Texto copiado al portapapeles',
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'green'
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: 'Error',
|
||||
description: 'No se pudo copiar al portapapeles',
|
||||
icon: 'i-heroicons-x-circle',
|
||||
color: 'red'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
clearTranscription()
|
||||
}
|
||||
|
||||
// Configurar meta tags para PWA
|
||||
useHead({
|
||||
link: [
|
||||
{ rel: 'manifest', href: '/manifest.webmanifest' },
|
||||
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
|
||||
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
|
||||
],
|
||||
meta: [
|
||||
{ name: 'theme-color', content: '#10b981' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user