Tira de Pronunciación
Añade una pequeña tira de una fila de botones de palabras a una respuesta de chat. Cada clic pronuncia la palabra con la síntesis de voz del navegador, por lo que nada se abre, descarga o sale de la conversación. Empareja la tira con anotaciones de vocabulario en línea.
Flujo de trabajo
-
Elige 2-4 palabras que valga la pena enseñar: por encima del nivel del alumno, de confusión frecuente o centrales para la respuesta. Evita volver a anotar palabras ya explicadas.
-
Anota cada palabra dentro de una oración normal, nunca como una lista separada. Usa KaTeX con texto en negrita y color, IPA de EE. UU., parte de la oración y una glosa breve en el idioma del usuario. Elige un color aleatorio por palabra de una pequeña paleta accesible (
#2563eb,#7c3aed,#059669,#b45309,#db2777,#0e7490); mantén cada palabra en un color sólido y evita repetir colores dentro de una misma respuesta. Este cliente solo renderiza$$...$$, así que escribe:Mantén la respuesta compacta ($$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/, adj. compacto) -
Genera la tira:
python scripts/make_compact_strip.py --out <ruta-absoluta>.html palabra1 palabra2 ...Mantén el archivo duradero y fácil de leer para el cliente. Prefiere el directorio de visualización del hilo con un nombre de archivo ASCII, por ejemplo
~/.codex/visualizations/<fecha>/<id-hilo>/pron-<slug>.html. -
El script imprime la ruta y una referencia de visualización. Pon esa referencia textualmente en su propia línea al final de la respuesta final.
Regla de renderizado
La referencia está envuelta en caracteres de uso privado: apertura U+E200, separador U+E202, cierre U+E201. Cópiala de la salida del script. Si la vuelves a escribir, usa exactamente esos puntos de código. Un carácter de cierre incorrecto como U+E041 convierte silenciosamente toda la referencia en texto plano, por lo que no aparece ninguna tira.
Restricciones
- Emite solo el fragmento HTML. No agregues
<!doctype>,<html>,<head>o<body>; mantén el CSS y JavaScript restringidos al ID raíz generado. - Mantén la tira con 2-4 botones y una fila que solo se ajuste cuando el espacio sea escaso.
- No enlaces a páginas de diccionarios externos o TTS ni integres reproductores de audio grandes. Los botones deben reproducirse en su lugar.
- Usa las variables del tema del anfitrión (
--foreground,--border,--primary,--accent,--ring,--primary-foreground) en lugar de paletas codificadas. - Si el cliente no puede renderizar visualizaciones en línea, recurre a enlaces de altavoz compactos dentro de la oración:
[🔊](https://dict.youdao.com/dictvoice?audio=<palabra>&type=2).
Archivos
scripts/make_compact_strip.py— valida 2-4 palabras, escribe el fragmento e imprime la referencia de visualización.assets/strip-template.html— la plantilla del fragmento con los marcadores__ROOT_ID__y__WORDS_JSON__.
Requiere Python 3.8 o más reciente; sin paquetes de terceros.