Créez une application de détection de langue avec l'API de détection de langue de Chrome dans Angular

Dans cet article de blog, je décris comment créer localement une application simple de détection de langue à l'aide de l'API de détection de langue intégrée de Chrome et d'Angular. Tout d'abord, l'application Angular appelle l'API pour créer un détecteur de langue et l'utiliser pour détecter le code de langue du texte saisi. Ensuite, il appelle une fonction d'assistance pour mapper le code de langue avec le nom de la langue.

Le coût est nul puisque l’application ne nécessite aucun LLM d’un fournisseur.

C'est la voie heureuse lorsque les utilisateurs utilisent Chrome Dev ou Chrome Canary. Si les utilisateurs utilisent des navigateurs autres que Chrome ou d'anciens navigateurs Chrome, une implémentation de secours doit exister, par exemple en appelant Gemma ou Gemini sur Vertex AI pour renvoyer le nom de langue du texte.

Installer Gemini Nano sur Chrome

Mettez à jour Chrome Dev/Canary vers la dernière version. Au moment d'écrire ces lignes, la version la plus récente de Chrome Canary est la 133.

Veuillez vous référer à cette section pour vous inscrire au programme de préversion anticipée de Chrome Built-in AI. https://developer.chrome.com/docs/ai/built-in#get_an_early_preview

Veuillez vous référer à cette section pour activer Gemini Nano sur Chrome et télécharger le modèle. https://developer.chrome.com/docs/ai/get-started#use_apis_on_localhost

Installer l'API de détection de langue sur Chrome

1. Accédez à chrome://flags/#langue-detection-api.
2. Sélectionnez Activé.
3. Cliquez sur Relancer ou redémarrez Chrome.

Échafauder une application angulaire

Installer les dépendances

Cette dépendance fournit le typage TypeScript de toutes les API Chrome Built-in. Par conséquent, les développeurs peuvent écrire des codes élégants pour créer des applications d’IA en TypeScript.

Dans main.ts, ajoutez une balise de référence pour pointer vers le fichier de définition de typage du package.