interactive-widgets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Interactive Widgets

交互式组件

You can create interactive HTML/CSS/JS widgets that run in the browser. Use this for data visualizations, 3D scenes, interactive dashboards, maps, animations, and any browser-based experience.

你可以创建能在浏览器中运行的交互式HTML/CSS/JS组件。可将其用于数据可视化、3D场景、交互式仪表盘、地图、动画以及任何基于浏览器的交互体验。

When to Create Widgets

何时创建组件

User asks for data visualization, charts, graphs
User asks for interactive demos, simulations, explorations
User asks for 3D content, product viewers, scenes
User asks for maps, geographic visualizations
User says "show me", "visualize", "make it interactive"
Data-heavy responses that benefit from interactivity

Do NOT create widgets for simple text responses, code examples, or static content.

用户请求数据可视化、图表、图形
用户请求交互式演示、模拟、探索工具
用户请求3D内容、产品查看器、场景
用户请求地图、地理可视化
用户提到“展示给我”、“可视化”、“让它可交互”
数据密集型响应，可通过交互性提升效果

请勿为简单文本回复、代码示例或静态内容创建组件。

How to Write Widget HTML

如何编写组件HTML

Write self-contained HTML — all CSS in

<style>

, all JS in

<script>

, libraries via CDN.

编写独立的HTML文件——所有CSS放在

<style>

标签内，所有JS放在

<script>

标签内，通过CDN引入库。

Common CDN URLs

常用CDN链接

Three.js:

https://cdn.jsdelivr.net/npm/three@0.170/build/three.module.js

D3.js:
```
https://cdn.jsdelivr.net/npm/d3@7
```
Chart.js:
```
https://cdn.jsdelivr.net/npm/chart.js@4
```

Plotly:

https://cdn.jsdelivr.net/npm/plotly.js-dist@2

Leaflet:

https://unpkg.com/leaflet@1.9/dist/leaflet.js

(+ CSS:

https://unpkg.com/leaflet@1.9/dist/leaflet.css

)

p5.js:
```
https://cdn.jsdelivr.net/npm/p5@1
```

Mermaid:

https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js

Anime.js:
```
https://cdn.jsdelivr.net/npm/animejs@4
```

Use

type="module"

for ES module imports.

Three.js:

https://cdn.jsdelivr.net/npm/three@0.170/build/three.module.js

D3.js:
```
https://cdn.jsdelivr.net/npm/d3@7
```
Chart.js:
```
https://cdn.jsdelivr.net/npm/chart.js@4
```

Plotly:

https://cdn.jsdelivr.net/npm/plotly.js-dist@2

Leaflet:

https://unpkg.com/leaflet@1.9/dist/leaflet.js

（+ CSS:

https://unpkg.com/leaflet@1.9/dist/leaflet.css

）

p5.js:
```
https://cdn.jsdelivr.net/npm/p5@1
```

Mermaid:

https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js

Anime.js:
```
https://cdn.jsdelivr.net/npm/animejs@4
```

ES模块导入请使用

type="module"

。

Widget Format

组件格式

Wrap widget HTML in

:::widget

fences in your response:

Here's an interactive chart of the data:

:::widget
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Data Chart</title>
  <style>body { margin: 0; background: #1a1a2e; color: #fff; font-family: system-ui; }</style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script>
    // visualization code
  </script>
</body>
</html>
:::

Hover over the bars to see exact values.

在回复中使用

:::widget

代码块包裹组件HTML：

这是一份数据的交互式图表：

:::widget
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Data Chart</title>
  <style>body { margin: 0; background: #1a1a2e; color: #fff; font-family: system-ui; }</style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script>
    // 可视化代码
  </script>
</body>
</html>
:::

悬停在柱状图上可查看精确数值。

Best Practices

最佳实践

Use dark theme by default (
```
background: #1a1a2e
```
)
Make widgets responsive (
```
100vw
```
/
```
100vh
```
, flexbox)
Add a visible title/header inside the widget
Wrap JS in try/catch for error handling
Keep inline widgets under 30KB
Include interaction instructions after the widget
Explain what the widget shows before the widget block

默认使用深色主题（
```
background: #1a1a2e
```
）
确保组件响应式（使用
```
100vw
```
/
```
100vh
```
、flexbox）
在组件内部添加可见的标题/页眉
将JS代码包裹在try/catch中进行错误处理
内联组件大小控制在30KB以内
在组件后添加交互说明
在组件块前解释其展示内容