BrowserAI : Exécuter des modèles d'IA localement dans le navigateur avec des WebGPUs

Introduction générale

BrowserAI est un outil open source qui permet aux utilisateurs d'exécuter des modèles d'IA natifs directement dans le navigateur. Développé par l'équipe Cloud-Code-AI, il prend en charge des modèles de langage tels que Llama, DeepSeek et Kokoro. Les utilisateurs peuvent effectuer des tâches telles que la génération de texte, la reconnaissance vocale et la synthèse vocale par le biais du navigateur, sans avoir besoin d'un serveur ou d'une configuration complexe. BrowserAI est simple et facile à utiliser, de sorte que les développeurs peuvent l'utiliser pour créer des applications d'IA et que les utilisateurs ordinaires peuvent également profiter des fonctions d'IA. Le projet est gratuit et ouvert sur GitHub, de sorte que tout le monde peut télécharger le code et l'utiliser ou l'améliorer.

Dialogue textuel BrowserAI

Dialogue vocal BrowserAI

BrowserAI Text-to-Speech

Liste des fonctions

• Exécutez des modèles d'IA locaux dans votre navigateur sans l'aide d'un serveur.
• La génération de texte est prise en charge afin que les utilisateurs puissent saisir du texte et obtenir une réponse en langage naturel.
• La reconnaissance vocale permet de convertir l'audio en texte.
• Prise en charge de la synthèse vocale, qui transforme le texte en un fichier audio lisible.
• Accéléré par WebGPU, il fonctionne avec des performances quasi natives.
• La fonctionnalité hors ligne est fournie et aucune connexion internet n'est nécessaire après le premier téléchargement.
• Code source ouvert, aide aux développeurs pour personnaliser les modèles et les fonctionnalités.

Utiliser l'aide

Processus d'installation

BrowserAI ne nécessite pas d'installation traditionnelle, mais il faut préparer l'environnement et le code à exécuter. Voici les étapes exactes :

1. Vérifiez votre navigateur
   • Utilisez un navigateur compatible avec le WebGPU, tel que Chrome 113+ ou Edge 113+. Dans la barre d'adresse de votre navigateur, tapez chrome://gpu Vérifier si WebGPU est activé.
   • Assurez-vous que votre matériel informatique supporte la virgule flottante 16 bits (certains modèles l'exigent), et qu'un processeur normal peut le faire fonctionner, mais un GPU est plus rapide.
2. Télécharger le code
   • Visitez le site https://github.com/Cloud-Code-AI/BrowserAI.
   • Cliquez sur le bouton "Code" et sélectionnez "Download ZIP" pour télécharger, ou utilisez la commande git clone https://github.com/Cloud-Code-AI/BrowserAI.git.
   • Décompressez le fichier ou accédez au dossier.
3. Installation de Node.js et des dépendances
   • Tout d'abord, installez Node.js, en le téléchargeant et en l'installant depuis le site officiel de Node.js, et lorsque vous avez terminé, entrez node -v Confirmer la version.
   • Ouvrez un terminal et allez dans le dossier BrowserAI (par ex. cd BrowserAI).
   • importation npm install Installer les dépendances, le processus peut prendre quelques minutes.
4. Lancement de projets
   • Dans le terminal, tapez npm run devdémarrer le serveur local.
   • Ouvrez votre navigateur et tapez http://localhost:3000(voir l'invite du terminal pour le numéro de port) et entrez dans l'interface BrowserAI.

Comment utiliser les principales fonctionnalités

Le cœur de BrowserAI est d'exécuter des modèles d'IA dans le navigateur, ce qui est décrit en détail ci-dessous.

Fonction 1 : Génération de texte

• procédure
  1. Après le lancement, l'interface affiche la boîte de sélection du modèle, qui comporte par défaut le modèle llama-3.2-1b-instruct et d'autres options.
  2. Cliquez sur "Charger le modèle" et attendez le chargement du modèle (de quelques secondes à quelques minutes, selon les performances de l'ordinateur).
  3. Saisissez un texte dans la zone de saisie, par exemple "Quel temps fait-il aujourd'hui ?" Cliquez sur "Générer".
  4. Le système génère des réponses telles que "C'est une belle journée pour sortir". .
• Conseils et astuces
  • Les petits modèles (par exemple TinyLlama-1.1B) se charge rapidement et convient aux ordinateurs bas de gamme.
  • Saisissez une question spécifique pour obtenir une réponse plus précise, telle que "Rédigez un article technique de 50 mots".
• scénario d'application
  • Rédiger les premières ébauches d'articles, générer des dialogues ou tester les compétences linguistiques des modèles.

Fonction 2 : Reconnaissance vocale

• procédure
  1. Sélectionnez un modèle qui prend en charge la reconnaissance vocale, tel que whisper-tiny-en.
  2. Cliquez sur "Charger le modèle" pour charger le modèle.
  3. Cliquez sur "Start Recording" et parlez dans le microphone, par exemple "Hello, BrowserAI".
  4. Cliquez sur "Arrêter l'enregistrement", attendez quelques secondes et l'interface affiche le texte transcrit, tel que "Hello, BrowserAI".
• Conseils et astuces
  • Assurez-vous que le microphone fonctionne correctement et qu'il y a peu de bruit de fond pour obtenir de meilleurs résultats.
  • Paramètres facultatifs return_timestamps Afficher l'horodatage de chaque paragraphe.
• scénario d'application
  • Enregistrer des réunions, transcrire des notes vocales ou développer des applications de saisie vocale.

Fonction 3 : synthèse vocale

• procédure
  1. option kokoro-tts cliquez sur "Charger le modèle".
  2. Saisissez un texte, tel que "Welcome to the BrowserAI experience" (Bienvenue dans l'expérience BrowserAI).
  3. Sélectionnez la voix (par exemple af_bella) et la vitesse (par défaut 1.0), cliquez sur "Text to Speech".
  4. Générer de l'audio et le jouer automatiquement, ou télécharger le fichier.
• Conseils et astuces
  • Les phrases sont plus naturelles et les vitesses lentes (par exemple 0,8) sont plus claires.
  • Testez différentes options vocales pour trouver le ton le plus approprié.
• scénario d'application
  • Créez des messages vocaux, générez des clips de baladodiffusion ou doublez des vidéos.

Fonctionnalité 4 : personnalisation par le développeur

• procédure
  1. Téléchargez les fichiers de modèle que vous souhaitez utiliser (par exemple, à partir de Hugging Face) et placez-les dans le répertoire du projet (voir README.md).
  2. compilateur src/index.tsajouter le chemin d'accès au modèle.
  3. être en mouvement npm run devcharger le nouveau modèle.
• Conseils et astuces
  • S'assurer que le modèle est compatible avec WebGPU et WebAssembly.
  • Si vous ne connaissez pas le code, posez un problème sur GitHub.
• scénario d'application
  • Tester de nouveaux modèles, développer des applications d'IA personnalisées.

L'exemple de code utilise

Génération de texte

• Introduction de BrowserAI dans le projet :

  import { BrowserAI } from '@browserai/browserai';
  const ai = new BrowserAI();
  await ai.loadModel('llama-3.2-1b-instruct');
  const response = await ai.generateText('你好，今天天气如何？');
  console.log(response);

de la parole au texte

• Enregistrer et transcrire des données audio :

  const ai = new BrowserAI();
  await ai.loadModel('whisper-tiny-en');
  await ai.startRecording();
  const audio = await ai.stopRecording();
  const text = await ai.transcribeAudio(audio);
  console.log(text);
  

mise en garde

• représentationsLes grands modèles (par ex. Llama-3.2-3b) Les ordinateurs haut de gamme sont nécessaires, et les petits modèles sont recommandés pour les ordinateurs bas de gamme.
• Utilisation hors ligneIl fonctionne même si vous vous déconnectez de l'internet après le premier chargement, mais vous devez télécharger le modèle à l'avance.
• Soutien communautaireLes problèmes peuvent être ajoutés Discord sondage fichier (informatique).

BrowserAI est simple et puissant. Il suffit de suivre les étapes pour configurer votre environnement et expérimenter la commodité de l'IA locale dans votre navigateur.