Pronunciation Strip
Add a small, one-row strip of word buttons to a chat reply. Each click speaks the word with the browser's speech synthesis, so nothing opens, downloads, or leaves the conversation. Pair the strip with inline vocabulary annotations.
Workflow
-
Choose 2-4 words worth teaching: above the learner's level, easily confused, or central to the reply. Avoid re-annotating words already explained.
-
Annotate each word inside a normal sentence, never as a separate list. Use KaTeX with colored bold text, US IPA, part of speech, and a short gloss in the user's language. Pick a random color per word from a small accessible palette (
#2563eb,#7c3aed,#059669,#b45309,#db2777,#0e7490); keep each word one solid color and avoid repeating colors within one reply. This client only renders$$...$$, so write:保持紧凑（$$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/，adj. 紧凑的） -
Generate the strip:
python scripts/make_compact_strip.py --out <absolute-path>.html word1 word2 ...Keep the file durable and easy for the client to read. Prefer the thread's visualization directory with an ASCII filename, for example
~/.codex/visualizations/<date>/<thread-id>/pron-<slug>.html. -
The script prints the path and a visualization reference. Put that reference verbatim on its own line in the final reply, at the end.
Rendering rule
The reference is wrapped in private-use characters: open U+E200, separator
U+E202, close U+E201. Copy it from the script output. If you retype it, use
exactly those code points. A wrong closing character such as U+E041 silently
turns the whole reference into plain text, so no strip appears.
Constraints
- Emit only the HTML fragment. Do not add
<!doctype>,<html>,<head>, or<body>; keep CSS and JavaScript scoped to the generated root ID. - Keep the strip to 2-4 buttons and one row that wraps only when space is tight.
- Do not link to external dictionary or TTS pages and do not embed large audio players. The buttons must play in place.
- Use the host theme variables (
--foreground,--border,--primary,--accent,--ring,--primary-foreground) instead of hardcoded palettes. - If the client cannot render inline visualizations at all, fall back to compact
speaker links inside the sentence:
[🔊](https://dict.youdao.com/dictvoice?audio=<word>&type=2).
Files
scripts/make_compact_strip.py— validates 2-4 words, writes the fragment, and prints the visualization reference.assets/strip-template.html— the fragment template with__ROOT_ID__and__WORDS_JSON__placeholders.
Requires Python 3.8 or newer; no third-party packages.