Après avoir terminé mon dernier projet – une interface de discussion pour rechercher GitHub – je me suis retrouvé à chercher la prochaine idée à aborder. En tant que développeur, l'inspiration vient souvent de manière inattendue, et cette fois, elle m'est venue en parcourant mon flux GitHub. Un repo, interprété par Daniel Roe (Nuxt Core Team Lead), a attiré mon attention. Il s'agissait d'une application de notes vocales basée sur Electron conçue pour macOS.
Quelque chose dans la simplicité des notes vocales combinée au défi technique m'a intrigué. Puis-je pousser ce concept plus loin ? Puis-je créer une application de notes vocales moderne, alimentée par l'IA, à l'aide des technologies Web ? Cette envie de construire m'a conduit ici, à cet article de blog, où je vais vous guider dans la création de Vhisper, une application de notes vocales avec transcription et post-traitement IA, construite avec l'écosystème Nuxt et alimentée par Cloudflare.
Et avant que vous le disiez, je dois vous faire un aveu : « Salut ! Je m'appelle Rajeev et je suis accro à parler/chater.
Maintenant que les formalités sont accomplies, concentrons-nous sur ce que nous allons construire dans ce projet. L'objectif est de créer Vhisper, une application Web de notes vocales avec les fonctionnalités principales suivantes :
Pour vous donner une meilleure idée de ce que nous visons, voici une démo rapide présentant les principales fonctionnalités de Vhisper :
Vous pouvez en faire l'expérience en direct ici : https://vhisper.nuxt.dev
À la fin de ce guide, vous saurez exactement comment créer et déployer cette application de notes vocales à l'aide des services Nuxt, NuxtHub et Cloudflare, une pile qui combine innovation et simplicité pour les développeurs. Prêt à le construire ? Commençons !
Avant de mettre en place le projet, passons en revue les technologies utilisées pour créer cette application :
base de données,stockage,IAetc.), plateforme de déploiement et d'administration pour NuxtPour suivre, outre les nécessités de base comme Node.js, npm et quelques connaissances Nuxt, vous aurez besoin de :
ℹ Remarque : les modèles Workers AI s'exécuteront dans votre compte Cloudflare même pendant le développement local. Consultez leurs tarifs et leur quota gratuit.
Nous commencerons par le modèle de démarrage NuxtHub. Exécutez la commande suivante pour créer et accéder à votre nouveau répertoire de projet :
# Créez un projet et modifiez-le dans le répertoire du projet npx nuxthub init voice-notes && cd $_Si vous envisagez d'utiliser pnpm comme gestionnaire de packages, ajoutez un.npmrcfichier à la racine de votre projet avec cette ligne pour hisser les dépendances :
# .npmrc honteusement-hoist=trueMaintenant, installez les dépendances :
Modules Nuxt :
pnpm ajouter @nuxt/ui@nextBruine et outils associés :
pnpm ajouter bruine-orm bruine-zod @vueuse/corePacks d'icônes :
pnpm ajouter @iconify-json/lucide @iconify-json/simple-iconsDépendances de développement :
pnpm ajouter -D kit bruineMettez à jour votrenuxt.config.tsdéposer comme suit :
exporter la définition par défaut de NuxtConfig({ modules : ["@nuxthub/core", "@nuxt/eslint", "nuxt-auth-utils", "@nuxt/ui"], devtools : { activé : true }, runtimeConfig : { public : { helloText : "Bonjour du bord 👋", }, }, futur : { compatibilitéVersion : 4 }, compatibilitéDate : "2024-07-30", hub : { ai : true, blob : true, base de données : true, }, css : ["~/assets/css/main.css"], eslint : { config : { stylistique : false , }, }, });Nous avons apporté les modifications suivantes au fichier de configuration Nuxt :
main.csschemin du fichier.Créer lemain.cssfichier dans leapplication/actifs/cssdossier avec ce contenu :
@import "tailwindcss"; @import "@nuxt/ui" ;Exécutez le serveur de développement :
développeur pnpmVisitehttp://localhost:3000dans votre navigateur. Si tout est configuré correctement, vous verrez le message : « Bonjour du bord 👋 » avec un bouton d'actualisation.
💡 Conseil de dépannage : si vous rencontrez des problèmes avec TailwindCSS, essayez de supprimer
nœud_modulesetpnpm-lock.yaml, puis exécutezinstallation de pnpmpour réinstaller les dépendances.
Une fois la configuration du projet terminée, passons à la création du backend. Nous commencerons par créer des points de terminaison d'API pour gérer les fonctionnalités de base, puis configurerons la base de données et intégrerons la validation.
Mais avant de passer au code, comprenons comment vous allez interagir avec les différentes offres Cloudflare. Si vous avez été attentif, vous devriez connaître la réponse, NuxrHub, mais qu'est-ce que NuxtHub ?
NuxtHub est une interface conviviale pour les développeurs construite sur les services robustes de Cloudflare. Il simplifie le processus de création, de liaison et de gestion des services pour votre projet, offrant une expérience de développement transparente (DX).
Vous avez commencé avec un modèle NuxtHub, le projet est donc préconfiguré avec le@nuxthub/coremodule. Lors de la configuration, vous avez également activé les services Cloudflare requis : IA, base de données et Blob. Le module principal de NuxtHub expose ces services via des interfaces préfixées parmoyeu. Par exemple,hubAIest utilisé pour les fonctionnalités d'IA,hubBlobpour le stockage d'objets, etc.
Le moment est venu maintenant de travailler sur le premier point de terminaison de l’API.
/api/trancrirePoint de terminaisonCréez un nouveau fichier nommétranscrire.post.tsà l'intérieur duserveur/APIrépertoire et ajoutez-y le code suivant :
// server/api/transcribe.post.ts export default definitionEventHandler(async (event) => { const form = wait readFormData(event); const blob = form.get("audio") as Blob; if (!blob) { throw createError({ statusCode : 400, message : "Blob audio manquant à transcrire", }); assurerBlob(blob, { maxSize : "8 Mo", types : ["audio"] }); essayez { const réponse = wait hubAI()...
[Courte citation de 8% de l'article original]