GenUI — 생성형 UI 출력 규격
언어: 사용자의 요청 언어(그렇지 않으면 사용자 메시지의 언어)를 주변 산문과 모든 사용자에게 보이는 UI 텍스트(제목, 레이블, 내용, 옵션, 설명)에 일치시킵니다. 아래 중국어 예제는 스키마만 설명합니다; 이 스킬을 로드한 후 대화를 중국어로 전환하지 마십시오. JSON 키, 컴포넌트 유형, ID 및 액션은 변경하지 마십시오. 영어 요청에는 영어 산문 및 UI 텍스트를, 중국어 요청에는 중국어 산문 및 UI 텍스트를 사용합니다. <user-language ...> 토큰은 메타 플레이스홀더일 뿐입니다. 각각을 대화 언어의 실제 내용으로 대체하십시오. 이러한 플레이스홀더를 문자 그대로 내보내지 마십시오.
답변 본문 중간에 대화형 UI 컴포넌트를 출력할 수 있습니다: dsh-ui 언어 태그가 있는 펜스 블록(dsh-ui)을 작성하고, 그 안에 JSON 사양을 포함하면, 렌더러가 이 전체 블록을 실제 컴포넌트로 그려내며, 텍스트는 전후에 일반적으로穿插됩니다. 컴포넌트는 답변의 일부이며, 도구 호출이 아닙니다.
{"title":"<사용자 언어 텍스트>","gap":14,"items":[...]}
펜스 작성 철칙 (먼저 읽으세요)
펜스 시작 줄의 언어 태그는 통일하여 dsh-ui 로 작성하고, 구두점, 따옴표 또는 주석을 추가하지 마십시오. 렌더러는 대소문자, 앞뒤 공백 및 일부 끝 구두점을 허용합니다. 다른 언어 태그는 GenUI로 처리되지 않으며, 사용자는 일반 코드 블록을 보게 됩니다.
| 작성법 | 결과 |
|---|---|
```dsh-ui | ✅ 렌더링 |
```dsh-ui> | ✅ 허용되나 생성 시 > 제거 권장 |
```dsh-ui 끝에 공백 | ✅ 렌더링 (자동 trim) |
``` DSH-UI | ✅ 렌더링 (대소문자 무시) |
```dshui / ```ds-ui | ❌ 유효하지 않은 태그 |
이전에 동일 모델이 동일 세션에서 182개의 ```dsh-ui> 펜스를 작성하여 조용히 실패한 사례가 있습니다; 이제 이러한 끝 구두점에 대해 통일된 허용 처리가 적용되었습니다. 펜스를 작성할 때는 dsh-ui 여섯 글자만 작성하고, 구두점, 따옴표, 주석을 전혀 추가하지 마십시오; 종료는 반드시 단독 행의 ` ```` 여야 합니다.
펜스 위치: 답변 본문에만 작성하십시오. reasoning / 생각 블록에 작성하면 렌더링되지 않으며, 사용자가 볼 수 없습니다.
수식: $...$ / \(...\)는 인라인 수식, $$...$$ / \[...\]는 독립 수식입니다; 행렬, 조각 함수, 여러 줄 정렬 유도, 굵게/강조 내 수식을 지원합니다. 본문, 목록, 키-값, 표 머리글/셀, 카드/단계/타임라인/탭 제목, 문제와 설명, 버튼과 폼 레이블, 지표, 미디어 설명 및 차트 외부 제목에서 이 기능을 공유합니다. JSON 문자열의 백슬래시는 두 번 작성해야 합니다(예: "content": "\(\\frac{a}{b}\)"). 코드 소스, 입력 값/자리표시자, 네이티브 드롭다운 옵션 및 차트 엔진 내부 그리기 텍스트는 여전히 각자의 기본 형식을 따르며, 리치 텍스트를 파싱하지 않습니다. 수학 구문은 KaTeX를 기준으로 하며, HTML, 외부 리소스 또는 스크립트를 실행하지 않습니다; LaTeX 문서 컴파일, 임의 매크로 패키지 로드는 지원하지 않습니다.
컴포넌트 어휘 (다음 type만 허용)
레이아웃: text row col grid card carousel divider spacer arrow hero
표시: stat badge progress list table keyvalue avatar image image-group audio video timeline file-tree breadcrumb diff json code callout steps icon blocks
차트: chart (bars/line/donut, 다중 시리즈 가능) plot (수학 함수 그래프) echart (ECharts 전체 기능 차트)
상호작용: button input select checkbox radio switch slider textarea tabs accordion copy link submit
고급: svg mermaid diagram scene3d quiz
레이아웃
- text:
{"type":"text","size":"display|h1|h2|h3|body|muted|caption","content":"...","align":"left|center|right"?}(tone:"danger|success|warning|info|muted"는 텍스트 줄 전체에 의미론적 색상을 입히고, badge를 사용하지 않음;mono:true는 등폭 글꼴을 사용하며, 16진수/2진수/식별자에 사용하고, 인라인 코드 배경색 없음) (size:"display"는 제목보다 한 단계 더 크며, 서문/도입 문장에 사용, 답변 당 ≤1개;center:true는 이전 표기법이며,align:"center"와 동일, 새로 작성 시 항상align사용) - row / col:
{"type":"row"|"col","items":[...],"wrap":true?,"spacer":true?,"gap":n?};row.justify:"center"는 주축 중앙 정렬 (아이콘+제목 같은 그림 머리);col.width:n(1-100)은 이 열이 행 너비의 백분율을 차지하도록 하며, 미작성 시 내용 너비로 설정 - grid:
{"type":"grid","cols":n,"items":[...]} - carousel:
{"type":"carousel","title":"<사용자 언어 제목>","items":[{"type":"card","title":"...","items":[...]}],"itemWidth":240?,"gap":3?}— 네이티브 노드 수평 스크롤; 최대 24개 항목, 너비 80–640px 이하 및 트랙 너비의 85% 이하; 기본 너비 240px.gap값에 4px를 곱하고, 생략 시 12px, 음수는 0으로 처리. 탐색 버튼은 스크롤 시 트랙 너비의 85%씩 이동하며, 내용이 넘칠 때만 표시되고, 터치 기기에서는 트랙을 직접 슬라이드합니다. 자동 재생되지 않습니다. 트랙 포커스 시 좌우 키 / Home / End 지원, 카드 내 폼은 기존 제출 규칙에 따라 작동합니다. 브라우징 및 스크롤은 action을 보내지 않으며, 하위 컴포넌트 자체가 선언한 action은 기존 상호작용 규칙에 따라 트리거됩니다. 스트리밍 출력은 기존 입력 경로를 유지하기 위해 끝에만 카드를 추가합니다. - hero:
{"type":"hero","title":"<사용자 언어 제목>","subtitle":"<사용자 언어 텍스트>","value":"99.96%","label":"<사용자 언어 지표>","delta":"+0.02%","spark":[...],"tone":"accent|success|warning|danger"}— 커버 블록: eyebrow + 초대형 숫자 (52px, 카운트업 애니메이션 포함) + 제목 + 부제 + tone 그라데이션 배경색. 답변 당 최대 한 개 사용하며, 맨 앞에 시각적 앵커로 배치 - span: 모든 노드에
"span":2를 추가할 수 있습니다 (grid 하위 노드가 몇 열을 차지할지) — 벤토(bento) 레이아웃의 유일한 원시 요소:span:2너비 카드 한 장과 좁은 카드 한 장을 배치하면, 한 열의 정사각형 블록을 쌓는 것보다 훨씬 보기 좋습니다. - card:
{"type":"card","title":"...","items":[...]};"tone":"info|success|warning|danger"는 카드에 의미론적 배경색을 부여합니다 (결론 카드/위험 카드용);"accent":"#f59e0b"는 강조색(테두리 + 제목 + 매우 연한 배경색)을 지정합니다;"flat":true는 그림자를 제거하고 매우 연한 중성 배경색으로 변경합니다 — 다이어그램 내 패널은 반드시 flat을 사용해야 하며, 그렇지 않으면 각 레이어가 떠 있는 카드처럼 보여 두 겹 이상 쌓이면 지저분해집니다;"eyebrow":"<사용자 언어 작은 소제목>"은 제목 위에 메타 작은 텍스트 한 줄을 추가합니다 (여러 카드를 장(chapter)으로 나눌 때 사용 — 연속된 동일 장의 카드마다 추가하지 말고, 답변 당 ≤3개) - palette:
chart/echart모두"palette":["#ff8800","#3ecf8e"]를 지원하여 분류 색상 팔레트를 재정의합니다 (기본적으로 호스트 테마를 따름). 의미론적으로 색상을 지정해야 하는 경우에만 작성하고 (비용=빨간색, 수익=초록색), 그 외에는 테마를 따르는 것이 더 안정적입니다. - divider:
{"type":"divider"}; 장 이름 포함{"type":"divider","label":"<사용자 언어 장 이름>"}(선 + 가운데 작은 레이블, 장 전환 역할: 보고서가 요약에서 데이터로 넘어가거나, 차트집에서 새 장을 시작할 때 사용; 카드/목록 내부, 연속된 동일 주제 내용 사이에서는 사용하지 마십시오, 답변 당 ≤3개); spacer:{"type":"spacer"}
표시
- stat:
{"type":"stat","label":"...","value":"...","delta":"+12.4%|-3%"}(-로 시작하면 자동 빨간색,+는 초록색); 선택적"spark":[3,5,4,8,6]는 미세 추세선을 그립니다 (2–60개의 유한 값);"size":"hero"는 초대형 숫자를 렌더링합니다 (답변 당 한 번만 사용하며, 시각적 앵커로 사용) - badge:
{"type":"badge","label":"...","tone":"success|warn|danger|accent","icon":"emoji?"} - progress:
{"type":"progress","label":"...","value":0-100,"valueLabel":"70%"};"variant":"ring"은 원형 진행률을 그리고,"target":70은 트랙에 목표 눈금을 표시합니다. - avatar:
{"type":"avatar","name":"...","color":"#hex?"} - image:
{"type":"image","src":"/mmx-files/result.png","alt":"<사용자 언어 설명>"}— 브라우저에서 접근 가능한 http(s) 또는 동일 출처 상대 이미지 주소를 표시합니다; 지연 로딩;file:/data:등 로컬 또는 능동 프로토콜은 지원하지 않습니다;"caption":"<사용자 언어 캡션>"은 이미지 아래에 설명 행(출처/해석/저자;alt는 이미지 위의 레이블 행이며, 둘의 역할이 다릅니다) - image-group:
{"type":"image-group","title":"<사용자 언어 제목>","items":[{"src":"/mmx-files/a.png","alt":"<설명>","caption":"<캡션>"},{"src":"/mmx-files/b.png","alt":"<설명>"}]}— 최대 24장의 이미지를 종횡비에 따라 적응형 줄 바꿈으로 표시합니다; 클릭 시 네이티브 라이트박스 확대, 좌우 키 / Home / End로 이미지 전환, Esc / 닫기 버튼으로 돌아가 포커스 복원. image의 http(s) / 상대 주소 제한을 따름; file/data/javascript는 허용하지 않음. 로컬 브라우징 전용이며, action을 보내지 않습니다; 모델 동작이 필요한 경우 옆에 별도의 button을 배치하십시오. 추가/재정렬 시 현재 src 유지; 현재 이미지 제거 시 뷰어 닫힘; 동일한 src는 나타난 순서로 구분. 빈 목록과 이미지 로드 실패 시 명확한 상태 표시. HTML 내보내기 시 이미지 바이트를 포함하지 않으며, 이미지는 원래 주소에 계속 의존합니다. 전체 사용법 및 승인 기준. - audio:
{"type":"audio","src":"/mmx-files/result.mp3","alt":"<사용자 언어 설명>","loop":true?}— 네이티브 제어 바; 사용자가 직접 재생하며, 자동 재생되지 않음; http(s) 또는 동일 출처 상대 주소만 허용 - video:
{"type":"video","src":"/mmx-files/result.mp4","alt":"<사용자 언어 설명>","poster":"/mmx-files/poster.jpg"?,"loop":true?,"muted":true?,"aspectRatio":"16:9|4:3|1:1|9:16"?}— 네이티브 재생/볼륨/전체 화면 제어; 자동 재생되지 않음 - list:
{"type":"list","items":["..."] 또는 [{"title":"...","desc":"..."}] 또는 중첩 노드(예: {"type":"badge","label":"TS"})}— 인라인에 노드 포함 가능 (노드 예산 계산); 레코드의label/name은title로 정규화되고,description/content/text/body/detail은desc로 정규화되며, 본문만 있을 경우 본문을 제목으로 사용합니다. 알 수 없는 필드는 경고를 받습니다. - table:
{"type":"table","columns":["..."],"rows":[["...","..."]],"types":["text|num|delta|bar|badge"]?,"details":[[...]]?,"total":true?}— 헤더 클릭 시 로컬 정렬 (오름차순/내림차순/초기화, 왕복 없음); 숫자 인식: 천 단위 구분 (예:1,234),k/m/b,만/억,%, 통화 기호를 실제 숫자 값으로 비교 가능, 순수 숫자 열은 자동 오른쪽 정렬; 부호 있는 셀은 자동 색상 지정 (+12.4%는 초록색,-3은 빨간색, 추가 필드 불필요);types는 열별로 지정 가능:bar(0-100 인라인 진행률 막대),ring(0-100 작은 원),spark(셀에"3,5,4,8"작성 시 미세 추세선 그림),badge(캡슐 레이블),delta(강제 등락색),num(강제 오른쪽 정렬),index(행 번호),group(첫 번째 열을 그룹 제목으로 사용: 해당 행의 첫 번째 셀에만 내용이 있을 경우, 교차 열 소제목으로 렌더링);"total":true는 합계 행을 추가합니다 (숫자 열 자동 합계);"export":true: 표 위에 'Markdown 복사 / CSV 복사' 두 개의 작은 버튼이 나타납니다 (순수 로컬 클립보드, 요청 보내지 않음);"filter":"input id": 표를 특정 input/select와 연결하여, 독자가 입력하면 즉시 필터링합니다 (filterColumn으로 열 제한 가능) — 데이터가 많을 때는 기본적으로 하나를 제공해야 합니다;"sortField":"드롭다운 id"는 드롭다운 값(열 이름)을 사용하여 정렬합니다;details는 rows와 순서가 동일하며, i번째 항목은 해당 행의 확장된 내용입니다 (임의의 컴포넌트 배치 가능,null= 해당 행은 확장 불가) — 첫 번째 열에 chevron이 나타나고, 클릭 시 전체 행 아래에 세부 정보가 확장되어 '메인 표 + 세부 정보'에 적합합니다. - keyvalue:
{"type":"keyvalue","pairs":[{"key":"...","value":"..."}]} - timeline:
{"type":"timeline","items":[{"title":"...","desc":"...","time":"..."}]} - file-tree:
{"type":"file-tree","items":[{"name":"...","type":"file|dir","children":[...]?}]}— 디렉토리 행은 클릭하여 접기/펼치기 가능 (로컬, 왕복 없음) - breadcrumb:
{"type":"breadcrumb","items":["<사용자 언어 텍스트>","<사용자 언어 텍스트>","<사용자 언어 텍스트>"]} - diff:
{"type":"diff","diffs":[{"path":"...","oldText":"..."|null,"newText":"..."}]} - json:
{"type":"json","value":...}(JSON 트리 뷰어) - code:
{"type":"code","lang":"ts","code":"..."} - callout:
{"type":"callout","tone":"info|success|warning|error","title":"...","content":"..."}— 단일 강조, 알림 또는 위험 요약에 사용;content는 텍스트 문자열이며, JSON"\n"을 사용하여 줄 바꿈 가능. 여러 개의 독립적인 항목은list의{title,desc}를 사용하여 항목별 계층을 유지합니다. - steps:
{"type":"steps","current":n,"steps":[{"title":"...","desc":"..."}]} - arrow:
{"type":"arrow","dir":"down|right","length":16-96,"label":"..."}— 다이어그램에서 두 블록 사이의 가는 선 연결자 (1.4px 선 너비 + V자 화살표, 고정 길이). 상하 흐름도는 항상 이것을 사용하고, 텍스트 '↓'를 사용하지 마십시오: 문자 화살표는 텍스트 기준선을 따르므로 간격을 벌릴 수 없습니다. - icon:
{"type":"icon","name":"Nodes","tone":"info|success|warning|danger|muted|default","size":16|20|24|32,"tile":true,"label":"<사용자 언어 접근성 이름>"}— 내장 아이콘 세트 (749개 충실하게 렌더링 가능; 64개는 인라인 즉시 열림, 나머지는 처음 사용 시 로드, 전체 목록은 ICON-NAMES.md 참조).tile:true는 연한 색상의 둥근 모서리 사각형 배경 위에 표시되며, 단계 카드/의미론적 표시에 사용;tile없이 사용하면 텍스트 색상을 따르는 인라인 아이콘입니다.label은 생략 가능하며 (순수 장식), 쌍으로 나타날 때 하나에만 label을 추가합니다. - blocks:
{"type":"blocks","title":"...","rows":[{"label":"초기","cells":["0","1","2"],"color":"#64748b"}],"columns":n?,"caption":"..."}— 색상 블록 다이어그램: 행별로 그룹화된 칸. 세 가지 형태가 동일한 구조를 공유합니다: ① 계단식 다이어그램 (행마다 칸 수가 다르며, 각 행이 너비를 자체적으로 균등 분할, 예: 8→4→2→1) ② 균등 분할 블록 (한 행에 4개 블록) ③ 스윔레인 다이어그램 (columns로 열 수 고정,cells에"—"또는 빈 값 작성).color생략 시 강조색의 연한 배경 사용; 텍스트 색상은 밝기에 따라 자동 반전 (어두운 배경에 흰색 텍스트/밝은 배경에 검은색 텍스트). '여러 부분으로 나누기, 단계별 진행, 그룹별 비교' 구조가 있으면 이것을 사용하고, 손으로 svg 좌표를 작성하지 마십시오.caption은 필수: 각 칸이 무엇을 나타내는지 한 문장으로 설명- 행 수준
"variant":"outline": 가는 테두리만 있고 채우지 않으며, 행렬 (각 칸이 하나의 프레임)에 사용;"variant":"plain": 테두리조차 그리지 않으며, 비트 문자열 (예:1 0 1 0 0 0 0 0은 표가 아닌 숫자로 읽힘)에 사용 —tone/color가 있는 칸만 배경색이 표시됩니다. - 칸은 객체로 작성할 수 있습니다:
{"text":"1","tone":"danger","sub":"SF"}—tone(accent/success/warning/danger/muted)은 개별 칸에 의미론적 색상을 부여하고,sub는 칸 아래에 한 줄의 작은 텍스트(비트 이름, 순번, 역할)를 추가합니다.color는 명시적으로 16진수로 지정할 수 있으며, tone보다 우선합니다. - 예:
{"columns":8,"rows":[{"variant":"outline","cells":[{"text":"1","tone":"danger","sub":"SF"},"0","1","1","0","0","1","0","0"]}],"caption":"최상위 비트가 1이므로 SF=1입니다."}
- 행 수준
내장 아이콘 이름: 다음 64개는 패키지에 인라인으로 포함되어 즉시 렌더링되며, 우선 여기에서 선택하십시오:
Check CheckCircle Info InfoCircle Warning Error X Plus Minus Circle ArrowDown ArrowUp ArrowRight ArrowLeft ArrowCurvedRight Function Functions Operator Atom Nodes Connect Share Branch Grid GridAlt Stack Cube Storage Chart Trending Pulse Speed Timer Clock TableFilled Code SquareCode Terminal File FileCode Folder Link Paperclip Lightbulb Book BookOpen GraduationCap Flask Lab Brain Robot Sparkles ShieldCheck Lock Globe WebsiteNetwork Search MagnifyingGlassSearch PluginPuzzle Settings Bolt Compass
나머지 685개는 필요 시 로드됩니다 (처음 사용 시 약 1MB를 가져오며, 이후 이 페이지에서 모두 사용 가능). 전체 목록은 이 SKILL과 동일한 디렉토리의 ICON-NAMES.md에 있습니다 — 이름을 추측해야 할 때는 이 파일을 읽거나 grep하고, 대화에서 일일이 열거하지 마십시오.
차트
- chart:
{"type":"chart","kind":"bars|line|donut","data":[{"label":"...","value":n,"color":"#hex?"}],"series":[{"label":"...","data":[...]}]?,"horizontal":true?}— bars 기본값; line 추세; donut 비율; series: bars는 그룹화된 막대, line은 다중 시리즈 꺾은선; 각series[].data는[{"label":"Q1","value":30},{"label":"Q2","value":45}]와 같은 객체 배열을 사용하며,[30,45]와 같은 순수 숫자 배열이 아닙니다;horizontal:true는 가로 막대를 그립니다 (순위/긴 레이블에 최우선);stacked:true는 시리즈를 쌓습니다 (구성/비율의 시간에 따른 변화); 쌓인 부분이 충분히 높으면 값이 세그먼트 안에 직접 인쇄되고, 마우스를 임의의 막대/세그먼트/점/섹터에 올리면 즉시 툴팁이 표시됩니다 (누적 시 해당 세그먼트 값 + 합계 표시). v3 렌더링: 너비 적응형, Y축 1/2/5 눈금, 단일 시리즈 음수 값은 0선 아래에 실제로 그려지고, line은 면적 그라데이션과 X 레이블 추소(rarifying) 기능 포함, donut 범례는 값과 백분율을 표시합니다. ≤8개 포인트의 빠른 비교에는 chart를 사용하고, 다중 시리즈, 확대/축소 또는 상호작용이 필요하거나 데이터 양이 많을 때는 echart를 사용하십시오. - plot:
{"type":"plot","series":[{"expr":"a*sin(b*x)","label":"...","color":"#hex?","params":[{"name":"a","value":1,"min":0,"max":5,"animateTo":3,"durationMs":4000,"loop":true},{"name":"b","value":1,"min":0.5,"max":5}]}],"xMin":-6.28,"xMax":6.28,"title":"..."}— SVG 함수 그래프; series는"kind":"line|area|scatter"를 가질 수 있습니다 (기본값 line; area는 기준선까지 채움; scatter는 산점도); params는 실시간 슬라이더로 렌더링됩니다 (드래그 시 즉시 다시 그림, y축 고정=곡선만 변하고 축은 변하지 않음); animateTo 매개변수는 재생 버튼을 표시합니다 (자동 애니메이션 데모); SVG는 드래그하여 이동, 휠로 확대/축소 가능; 표현식은 sin/cos/tan/asin/acos/atan/sqrt/cbrt/exp/log/ln/abs/floor/ceil/round/min/max/pow를 지원하고, 상수 pi/e/tau, 변수 x (다른 문자는 매개변수) - echart:
{"type":"echart","title":"...","height":300,"preset":"bar|line|area|pie|scatter","data":[{"label":"...","value":n}],"series":[...]?}— ECharts 전체 기능 차트, 시각 효과가chart를 훨씬 능가함 (그라데이션, 툴팁, 애니메이션, 범례 상호작용); preset 모드:chart와 동일한data/series형식을 사용하여, 테마가 적용된 ECharts 구성을 자동으로 빌드합니다 (색상은 호스트 테마를 따름); preset 개요 (preset + data/series/links만 작성하면, 테마가 자동으로 따라옴):bar·line·area·pie·scatter·radar(각 시리즈당 하나의 다각형, 지표는 첫 번째 시리즈의 label 사용) ·gauge(각 datum당 하나의 게이지, 단일 KPI에 적합) ·funnel(퍼널/전환) ·treemap(볼륨/계층 비율) ·sankey(흐름도,links:[{from,to,value}]사용) ·graph(관계도,links로 구동, 노드 크기는 연결 수에 비례) ·heatmap(series는 행, 첫 번째 시리즈의 label은 열) ·bigline(긴 시퀀스 + 내장 확대/축소) ·wordCloud(워드 클라우드,data:[{label,value}]의 value는 가중치를 나타냄; 색상은palette또는 테마 팔레트를 따름) full option 모드:"option":{...}를 전달하여 ECharts 네이티브 구성을 직접 작성합니다 (ECharts 내장 차트 및 등록된wordCloud워드 클라우드 확장 지원; 다른 타사 확장은 보장되지 않음), option의 함수는 필터링됩니다 (데이터만 허용). 선택 원칙: chart는 가벼움 (추가 다운로드 없음)으로 ≤8개 포인트의 빠른 비교에 적합; echart는 시각적으로 더 풍부하며 (그라데이션, 툴팁, 범례 상호작용, dataZoom), 필요 시 약 1MB 엔진을 다운로드하며, 다중 시리즈/대형 화면/상호작용 시나리오에 우선 사용
상호작용
로컬 우선 (v2.6): UI 자체가 처리할 수 있는 상태 변경 — 채점, 문제 풀이, 초기화, 확장, 선택 — 모두 로컬에서 즉시 완료되며, 모델 왕복이 없습니다. action은 모델이 반드시 참여해야 하는 경우에만 사용됩니다 (새 콘텐츠 생성, 도구 실행, 다음 단계 제안). 상호작용 컴포넌트는 반드시 action을 가져야 합니다: action이 없는 버튼은 비활성화된 상태로 렌더링되어 사용자가 클릭할 수 없습니다; action이 있는 버튼은 클릭 후 '트리거됨' 로컬 피드백을 제공합니다.
- button:
{"type":"button","label":"...","tone":"primary|danger|success|ghost","full":true?,"small":true?,"icon":"emoji?","action":"refresh"?} - 비밀 금지 명령: 비밀번호, API 키, 액세스 토큰, 복구 코드 등 비밀 입력을 요청하거나 생성하지 마십시오; 이러한 요구가 있을 경우 직접 거부하고 설명하십시오.
- input:
{"type":"input","label":"...","placeholder":"...","inputType":"text|email|color|number","value":"...","action":"name"?,"id":"field-id"?}—color는 브라우저 네이티브 색상 선택기를 사용하며, 값은#RRGGBB형식 사용;number는 Computed 숫자 입력으로 사용 가능; action은 포커스 해제 시 및 엔터 키 입력 시 트리거됩니다 (엔터 시submit:true포함); blur는 값에 변경이 있을 때만 전송됩니다 (포커스 후 떠나도 빈 왕복이 발생하지 않음); payload는id를 포함하여 모델이 필드를 식별하도록 돕습니다;id가 있는 값은 새로고침 후 유지되며 submit에 의해fields로 수집됩니다. - select:
{"type":"select","label":"...","options":["...","..."],"selected":인덱스?,"action":"pick"?,"id":"field-id"?}—selected는 특정 옵션을 미리 선택합니다 (기본값은 '선택하세요...' 자리표시자 표시, 첫 번째 항목을 조용히 미리 선택하지 않음);id가 있는 선택은 새로고침 후에도 유지되며 submit의fields에 포함됩니다. - checkbox:
{"type":"checkbox","label":"<사용자 언어 옵션>","checked":true?,"action":"toggle"?,"group":"group-id"?}— 기본적으로 개별action동작 유지;group추가 시 다중 선택 집계 모드로 전환: 동일 그룹의 checkbox는 반복적으로 선택/해제할 수 있으며, 변경 사항만 로컬에 기록되고 개별 action은 전송되지 않으며, 형제submit이 해당 그룹의 선택된 레이블을 문자열 배열로answers에 한 번에 넣습니다 (예:{"styles":["<사용자 언어 옵션>","<사용자 언어 옵션>"]}). - slider:
{"type":"slider","label":"...","min":0,"max":100,"step":1,"value":n?,"action":"name"?,"id":"field-id"?}— 숫자 폼 슬라이더: 실시간으로 값 표시;id가 있으면 새로고침 후 유지되며 submit의fields에 포함됩니다 (드래그는 디바운스되어 하나의 action으로 병합됨). - radio:
{"type":"radio","label":"<사용자 언어 레이블>","options":["<사용자 언어 옵션>","<사용자 언어 옵션>"],"selected":n?,"action":"pick"?}— 단일 선택;"group":"group-id"추가 시 집계 모드 전환: 선택은 로컬에만 기록되고 왕복이 발생하지 않음;"answer":올바른 인덱스 또는 레이블및"explanation":"<사용자 언어 설명>"을 설정할 수 있으며, 순수 radio이고 전송할 다른 폼 상태가 없을 때 로컬에서 채점합니다. - link:
{"type":"link","label":"...","href":"https://..."?}— http(s)/mailto 프로토콜만 허용;href가 없으면 순수 텍스트 스타일로 렌더링됩니다 (클릭 가능한 척하지 않음). - submit:
{"type":"submit","label":"<사용자 언어 동작>","action":"grade","groups":["q1","styles"],"resetAction":"redo"?}— 집계 버튼:groups는 현재 블록의 submission member key를 참조하며, 출처는radio.group,checkbox.group,input.id,textarea.id,select.id,slider.id입니다; radio는 선택되어야 하고, checkbox 그룹은 최소 하나의 항목이 선택되어야 하며, 일반 필드의 값은 trim 후 비어 있지 않아야 합니다.groups는 제출에 필요한 멤버와 완료 진행률을 제어합니다; 설정되지 않은 경우, 완료된 멤버가 하나 이상 있으면 제출할 수 있습니다. 순수 radio 범위에answer가 포함되고 이번에 범위 외 payload가 없으면 로컬 채점 가능; 그 외의 경우 한 번에[genui-action]을 전송하고, payload는 현재 블록에서 이미 작성된 폼 상태를 계속 수집합니다.
[이하 내용은 원본이 생략되어 번역하지 않습니다]