Quand votre PWA commence à parler

Utilisation de WaveNet pour ajouter une synthèse vocale pour les articles

De quoi on parle quand on parle de discours

Après avoir mis en place la traduction automatique de tous mes articles dans diverses autres langues, j'ai commencé à réfléchir à la prochaine fonctionnalité moderne et utile que je pourrais implémenter. Comme vous serez tout à fait d'accord pour dire que lire mes articles est l'une des expériences les plus agréables, j'ai pensé que l'utilisation d'un service de synthèse vocale automatique pourrait améliorer encore plus l'UX de l'article. Le plan était donc simple : j'ajouterai une nouvelle action au début d'un texte d'article qui permettra aux utilisateurs de l'écouter via le lecteur audio du navigateur.

Mode d'emploi : synthèse vocale

Après avoir examiné l'architecture de l'application actuelle, le flux de travail suivant a été mis en œuvre pour améliorer la PWA avec une synthèse vocale automatique et un lecteur audio :

  1. implémenter la synthèse via le service de synthèse vocale de GCP en utilisant l'option WaveNet (beaucoup) pricer au lieu de l'option standard
  2. stocker le fichier mp3 créé dans Firebase Storage, un système de fichiers simple également hébergé dans GCP ; le nom du fichier se compose du slug de l'article et de la locale utilisée, ce qui me donne un identifiant implicite et évite l'ajout d'un document séparé qui conserve la référence à toutes les URL pour un discours donné
  3. puis j'appelle les deux étapes ci-dessus sur le serveur Vercel lors de la création ou de la mise à jour d'une page d'article, ce qui se produit actuellement toutes les 24 heures au maximum
  4. utiliser le lazy loading pour le lecteur Web au cas où une URL audio serait disponible

Être paresseux est important

Je ne veux pas nuire aux performances de chargement de mes applications Web (et par conséquent au classement des moteurs de recherche), par conséquent, le lecteur Web n'est chargé à la demande qu'une fois que deux conditions sont remplies :

  • Une URL audio pour l'article est actuellement disponible, qui ne s'applique actuellement qu'aux textes en anglais pour principalement réduire les coûts
  • Un utilisateur clique sur le bouton de lecture, indiquant le désir d'écouter réellement l'article lu à haute voix

Pourquoi pas toutes les langues (pour l'instant) ?

En raison de l'utilisation de WaveNet de Google comme modèle de synthèse vocale, je dois considérer les coûts de cette fonctionnalité comme un point de préoccupation principal. L'utilisation de WaveNet coûte quatre fois le modèle de synthèse standard. Pourtant, je l'ai choisi car WaveNet surpasse largement la plupart des autres modèles, non seulement de Google lui-même mais aussi d'IBM, par exemple.

Juste le commencement

Voici un bref aperçu de la façon dont j'ai implémenté la synthèse vocale dans une première version pour cette PWA. Le temps de codage n'a pris que quelques heures, car je faisais déjà la plupart de la configuration en étant un client GCP. La sortie générée sonne incroyablement bien, ce qui montre les points forts des approches de la parole et de la gestion du texte basées sur WaveNet et ML. Une future implémentation pourrait ajouter la lecture à haute voix pour toutes les langues prises en charge. En fonction de l'utilisation et des coûts dans les mois à venir, je déterminerai comment procéder dans ce cas.

À M