발음 스트립은(는) 무엇을 하나요?
채팅 응답에 작은 한 줄짜리 단어 버튼 스트립을 추가합니다. 각 버튼을 클릭하면 브라우저의 음성 합성으로 해당 단어를 읽어주므로, 아무것도 열리거나 다운로드되거나 대화를 떠나지 않습니다. 스트립과 함께 인라인 어휘 주석을 제공합니다.
워크플로우
-
가르칠 가치가 있는 2-4개의 단어를 선택하세요: 학습자의 수준 이상이거나, 혼동하기 쉬운 단어, 또는 응답의 핵심이 되는 단어입니다. 이미 설명한 단어를 다시 주석 처리하지 마십시오.
-
각 단어를 일반 문장 안에 주석 처리하되, 별도의 목록으로는 작성하지 마십시오. 사용자 언어로 KaTeX를 사용하여 볼드체 색상, 미국식 IPA, 품사, 짧은 해설을 포함하세요. 작은 접근성 팔레트(
#2563eb,#7c3aed,#059669,#b45309,#db2777,#0e7490)에서 각 단어마다 무작위 색상을 선택하고, 각 단어는 단일 색상으로 유지하며 하나의 응답 내에서 색상이 반복되지 않도록 하세요. 이 클라이언트는$$...$$만 렌더링하므로 다음과 같이 작성하세요:保持紧凑（$$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/，adj. 紧凑的） -
스트립을 생성하세요:
python scripts/make_compact_strip.py --out <절대-경로>.html word1 word2 ...파일을 내구성 있게 유지하고 클라이언트가 쉽게 읽을 수 있도록 하세요. 스레드의 시각화 디렉터리에 ASCII 파일 이름을 사용하는 것을 선호합니다(예:
~/.codex/visualizations/<날짜>/<스레드-id>/pron-<슬러그>.html). -
스크립트는 경로와 시각화 참조를 출력합니다. 해당 참조를 그대로 최종 응답의 마지막에 별도 줄로 넣으세요.
렌더링 규칙
참조는 개인용 문자로 감싸져 있습니다: 열기 U+E200, 구분자 U+E202, 닫기 U+E201. 스크립트 출력에서 복사하세요. 직접 입력하는 경우 정확히 해당 코드 포인트를 사용하세요. 잘못된 닫기 문자(예: U+E041)는 전체 참조를 일반 텍스트로 만들어 스트립이 나타나지 않습니다.
제약 사항
- HTML 조각만 내보내세요.
<!doctype>,<html>,<head>,<body>를 추가하지 말고, CSS와 JavaScript는 생성된 루트 ID로 범위를 지정하세요. - 스트립을 2-4개의 버튼과 공간이 좁을 때만 줄바꿈되는 한 행으로 유지하세요.
- 외부 사전이나 TTS 페이지에 연결하지 말고 큰 오디오 플레이어를 삽입하지 마세요. 버튼은 제자리에서 재생되어야 합니다.
- 하드코딩된 팔레트 대신 호스트 테마 변수(
--foreground,--border,--primary,--accent,--ring,--primary-foreground)를 사용하세요. - 클라이언트가 인라인 시각화를 전혀 렌더링할 수 없는 경우, 문장 내에 간결한 스피커 링크로 대체하세요:
[🔊](https://dict.youdao.com/dictvoice?audio=<단어>&type=2).
파일
scripts/make_compact_strip.py— 2-4개 단어를 검증하고 조각을 작성하며 시각화 참조를 출력합니다.assets/strip-template.html—__ROOT_ID__및__WORDS_JSON__플레이스홀더가 있는 조각 템플릿입니다.
Python 3.8 이상 필요; 서드파티 패키지는 필요하지 않습니다.