> For the complete documentation index, see [llms.txt](https://claude-docs.mygptmeta.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://claude-docs.mygptmeta.com/shi-yong-jiao-cheng/chang-jian-wen-ti/ru-he-kai-qi-claude3.5artifacts-shi-shi-dai-ma-yu-lan-xuan-ran-mo-shi.md).

# 如何开启Claude3.5-Artifacts实时代码预览/渲染模式？

## Artifacts 功能介绍

Artifacts 是一项强大的功能，允许用户在对话中创建和引用大量独立的内容。对于你可能想要修改、迭代或重复使用的内容，它们特别有用。

### Artifacts 的主要功能

#### 内容类型

* **代码**：我可以创建包含各种编程语言的代码片段或脚本的 artifacts。
* **文档**：我可以生成纯文本、Markdown 或其他格式的文本文档。
* **HTML**：我可以创建可在用户界面中呈现的单文件 HTML 页面。【可在线渲染】
* **SVG**：我可以生成可缩放矢量图形 (SVG) 图像。【可在线渲染】
* **Mermaid 图表**：我可以使用 Mermaid 语法创建图表。【可在线渲染】
* **React 组件**：我可以开发 React 组件，包括使用 Hooks 和 Tailwind CSS 进行样式化的组件。

#### 持久性和迭代

* 在我们的整个对话过程中，都可以引用和更新 Artifacts。
* 这允许对代码、文档或其他内容进行迭代开发。

#### 渲染

* 根据类型的不同，artifacts 可以直接在用户界面中呈现。
* 例如，可以将 HTML 页面、SVG 图像和 Mermaid 图表可视化。【目前只支持渲染这三种格式】

#### 与聊天分离

* Artifacts 显示在单独的 UI 窗口中，保持主对话清晰和集中。

#### 可重用性

* artifacts 中的内容可以轻松复制、修改或在我们对话之外使用。

#### 复杂内容支持

* Artifacts 非常适合包含大量内容（通常超过 15 行），这些内容如果直接包含在聊天中可能会过于笨拙。

#### 特定于语言的功能

* 对于代码 artifacts，我可以指定编程语言，从而实现正确的语法高亮显示。

#### 组件库

* 对于 React 组件，我可以使用来自 shadcn/ui 等库的预构建组件。

#### 占位符图像

* 在 HTML 和 React artifacts 中，我可以使用具有指定尺寸的占位符图像。

## Artifacts 官方视频演示

{% file src="/files/Qpg5Fxv9ersEioUVgG1g" %}

官方的视频演示展示了Claude 3.5强大的图片识别功能和Artifacts功能，生成了一份美观的HTML格式PPT幻灯片，并展示了Claude 3.5强大的数据分析能力。

### 视频过程

#### 1. 教授向Claude发送信息并附上两张图片：

* **图1**：一张关于人类基因组测序成本随时间推移的图表。
* **图2**：一张关于人类基因组测序关键里程碑的时间轴图表。

#### 2. Claude帮助教授将图表数据转换成JSON格式

* Claude首先将两张图片中的数据分别转换成JSON数组，并分别命名为`genomeSequencingTimeline`和`costPerHumanGenome`。
* 然后，Claude将两个数组合并成一个结构，并将它们命名为`genomeSequencingTimelineAndCostJSON`。

#### 3. 教授请Claude根据JSON数据创建一个交互式图表

* 教授提供了一个调色板文件，用于设置图表颜色。
* Claude使用`plotly.js`库创建了一个交互式图表，并将里程碑信息设置为悬停提示。

#### 4. 教授请Claude使用reveal.js制作一个演示文稿

* Claude使用教授提供的图表数据和`reveal.js`库制作了一个演示文稿，其中包含了人类基因组测序的关键信息。

#### 5. 教授对演示文稿表示满意并发送给学生

* 教授对Claude的帮助表示感谢，并通过电子邮件将演示文稿发送给学生。

通过这个演示，我们可以看到Claude 3.5不仅能够进行复杂的数据处理和可视化，还能生成专业的演示文稿，为用户提供全面的支持和服务。