nucleoWhisper/nuxt4/app/app.vue

<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>