Faixa de Pronúncia
Adicione uma pequena faixa de botões de palavra em uma única linha a uma resposta de chat. Cada clique reproduz a palavra usando a síntese de fala do navegador, sem abrir, baixar ou sair da conversa. Acompanhe a faixa com anotações de vocabulário inline.
Fluxo de Trabalho
-
Escolha de 2 a 4 palavras que valham a pena ensinar: acima do nível do aprendiz, facilmente confundidas ou centrais para a resposta. Evite re-anotar palavras já explicadas.
-
Anote cada palavra dentro de uma frase normal, nunca como uma lista separada. Use KaTeX com texto em negrito colorido, IPA dos EUA, classe gramatical e uma breve glosa no idioma do usuário. Escolha uma cor aleatória por palavra a partir de uma pequena paleta acessível (
#2563eb,#7c3aed,#059669,#b45309,#db2777,#0e7490); mantenha cada palavra em uma cor sólida e evite repetir cores dentro de uma mesma resposta. Este cliente renderiza apenas$$...$$, então escreva:Mantenha-se compacto ($$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/, adj. compacto) -
Gere a faixa:
python scripts/make_compact_strip.py --out <caminho-absoluto>.html palavra1 palavra2 ...Mantenha o arquivo durável e fácil de ser lido pelo cliente. Prefira o diretório de visualizações do thread com um nome de arquivo ASCII, por exemplo
~/.codex/visualizations/<data>/<id-do-thread>/pron-<slug>.html. -
O script imprime o caminho e uma referência de visualização. Coloque essa referência textualmente em sua própria linha na resposta final, ao final.
Regra de Renderização
A referência é envolvida por caracteres de uso privado: abertura U+E200, separador U+E202, fechamento U+E201. Copie-a da saída do script. Se redigitar, use exatamente esses pontos de código. Um caractere de fechamento incorreto como U+E041 silenciosamente transforma toda a referência em texto simples, de modo que nenhuma faixa aparece.
Restrições
- Emita apenas o fragmento HTML. Não adicione
<!doctype>,<html>,<head>ou<body>; mantenha CSS e JavaScript no escopo do ID raiz gerado. - Mantenha a faixa com 2 a 4 botões e uma única linha que só quebra quando o espaço é limitado.
- Não faça link para páginas externas de dicionário ou TTS e não incorpore grandes players de áudio. Os botões devem reproduzir no local.
- Use as variáveis de tema do host (
--foreground,--border,--primary,--accent,--ring,--primary-foreground) em vez de paletas fixas. - Se o cliente não puder renderizar visualizações inline, recorra a links compactos de alto-falante dentro da frase:
[🔊](https://dict.youdao.com/dictvoice?audio=<palavra>&type=2).
Arquivos
scripts/make_compact_strip.py— valida de 2 a 4 palavras, escreve o fragmento e imprime a referência de visualização.assets/strip-template.html— o modelo do fragmento com espaços reservados__ROOT_ID__e__WORDS_JSON__.
Requer Python 3.8 ou mais recente; nenhum pacote de terceiros.