Comment j'ai créé NotesGPT – une application de notes vocales IA complète

La semaine dernière, j'ai lancé notesGPT, une application de notes vocales gratuite et open source qui compte jusqu'à présent 35 000 visiteurs, 7 000 utilisateurs et plus de 1 000 étoiles GitHub la semaine dernière. Il vous permet d'enregistrer une note vocale, de la transcrire à l'aide de Whisper et d'utiliser Mixtral via Together pour extraire des éléments d'action et les afficher dans une vue des éléments d'action. Il est également entièrement open source et est équipé d’authentification, de stockage, de recherche vectorielle, d’éléments d’action, et est entièrement réactif sur mobile pour une utilisation facile.

Je vais vous expliquer exactement comment je l'ai construit.

Architecture et pile technologique

Ceci est un schéma rapide de l'architecture. Nous discuterons de chaque élément plus en profondeur et montrerons également des exemples de code au fur et à mesure.

Voici la pile technologique globale que j’ai utilisée :

• Convexe pour les fonctions base de données et cloud
• Routeur d'application Next.js pour le framework
• Répliquer pour les transcriptions Whisper
• Mistral avec le mode JSON pour le LLM
• Together.ai pour l'inférence et les intégrations
• Convex File Storage pour stocker des notes vocales
• Recherche de vecteur convexe pour la recherche de vecteur
• Commis à l'authentification des utilisateurs
• Tailwind CSS pour le style

Page de destination

Le premier élément de l'application est la page de destination que vous voyez lorsque vous accédez à notesGPT.

La première chose que les utilisateurs voient est cette page de destination qui, avec le reste de l'application, a été construite avec Next.js et avec Tailwind CSS pour le style. J'aime utiliser Next.js car il facilite la création d'applications Web et l'écriture simple de code React. Tailwind CSS est également génial puisqu'il vous permet d'itérer rapidement sur vos pages Web tout en restant dans le même fichier que votre JSX.

Authentification avec Clerk et Convex

Lorsque l'utilisateur clique sur l'un des boutons de la page d'accueil, il est dirigé vers l'écran de connexion. Ceci est alimenté par Clerk, une solution d'authentification simple qui s'intègre bien à Convex, que...
[Courte citation de 8% de l'article original]