Bande de Prononciation
Ajoute une petite bande de boutons de mots sur une seule ligne dans une réponse de chat. Chaque clic prononce le mot avec la synthèse vocale du navigateur, sans rien ouvrir, télécharger ou quitter la conversation. Associe la bande à des annotations de vocabulaire en ligne.
Workflow
-
Choisis 2 à 4 mots qui valent la peine d'être enseignés : au-dessus du niveau de l'apprenant, facilement confondus, ou centraux pour la réponse. Évite de ré-annoter des mots déjà expliqués.
-
Annote chaque mot à l'intérieur d'une phrase normale, jamais sous forme de liste séparée. Utilise KaTeX avec du texte coloré en gras, l'IPA américaine, la nature du mot et un court glossaire dans la langue de l'utilisateur. Choisis une couleur aléatoire par mot dans une petite palette accessible (
#2563eb,#7c3aed,#059669,#b45309,#db2777,#0e7490) ; garde chaque mot d'une seule couleur unie et évite de répéter les couleurs dans une même réponse. Ce client ne rend que$$...$$, donc écris :Restez compact ($$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/, adj. compact) -
Génère la bande :
python scripts/make_compact_strip.py --out <chemin-absolu>.html mot1 mot2 ...Garde le fichier durable et facile à lire pour le client. Préfère le répertoire de visualisation du fil avec un nom de fichier ASCII, par exemple
~/.codex/visualizations/<date>/<id-fil>/pron-mot-clé.html. -
Le script affiche le chemin et une référence de visualisation. Mets cette référence textuellement sur sa propre ligne dans la réponse finale, à la fin.
Règle de rendu
La référence est encadrée de caractères privés : ouvrant U+E200, séparateur U+E202, fermant U+E201. Copie-la depuis la sortie du script. Si tu la retapes, utilise exactement ces points de code. Un caractère fermant incorrect comme U+E041 transforme silencieusement toute la référence en texte brut, donc aucune bande n'apparaît.
Contraintes
- Émets uniquement le fragment HTML. N'ajoute pas
<!doctype>,<html>,<head>ou<body>; garde le CSS et JavaScript limités à l'ID racine généré. - Garde la bande avec 2 à 4 boutons et une seule ligne qui passe à la ligne seulement lorsque l'espace est limité.
- Ne fais pas de lien vers des dictionnaires externes ou des pages TTS et n'intègre pas de gros lecteurs audio. Les boutons doivent jouer sur place.
- Utilise les variables de thème de l'hôte (
--foreground,--border,--primary,--accent,--ring,--primary-foreground) au lieu de palettes codées en dur. - Si le client ne peut pas du tout afficher les visualisations en ligne, utilise des liens audio compacts dans la phrase :
[🔊](https://dict.youdao.com/dictvoice?audio=<mot>&type=2).
Fichiers
scripts/make_compact_strip.py— valide 2 à 4 mots, écrit le fragment et imprime la référence de visualisation.assets/strip-template.html— le modèle de fragment avec les espaces réservés__ROOT_ID__et__WORDS_JSON__.
Nécessite Python 3.8 ou plus récent ; aucun paquet tiers.