Artifacts功能
DeepChat
Artifacts功能
Artifacts是DeepChat的一项创新功能，它允许你在聊天界面右侧开启独立窗口，直接预览和交互AI生成的内容。本页面将详细介绍如何使用Artifacts功能。
Artifacts概述
Artifacts功能主要包括以下特点：
- 实时交互与预览：在聊天界面内直接运行并预览生成内容
- 多格式内容支持：支持代码、网页、矢量图形等多种格式
- 零代码可视化创作：通过自然语言描述生成专业级可视内容
- 工作流效率提升：减少"生成-复制-测试"的冗余步骤
启用Artifacts
开启Artifacts窗口
- 在对话界面右上角，点击"Artifacts"按钮
- Artifacts窗口将在对话界面右侧打开
- 你可以通过拖拽分隔线调整窗口大小
设置Artifacts偏好
- 点击Artifacts窗口右上角的设置图标
- 可以调整以下选项：
- 默认渲染模式
- 自动刷新设置
- 显示/隐藏代码
- 界面主题
- 交互模式设置
使用Artifacts
基本用法
- 在聊天输入框中描述你想要生成的内容
- AI生成响应后，Artifacts窗口将自动尝试渲染内容
- 如果生成的内容包含可交互元素，你可以直接在Artifacts窗口中与之交互
支持的内容类型
代码片段与网页
可以生成并预览HTML、CSS和JavaScript组合的网页：
用HTML和CSS创建一个简单的网页，包含响应式导航栏和卡片布局
矢量图形(SVG)
创建各种矢量图形和图表：
用SVG绘制一个太阳系行星运动的示意图
创建一个公司组织架构图
可视化图表
生成交互式数据可视化：
基于以下数据创建一个交互式柱状图，展示2020-2023年各季度销售额：
Q1 2020: 150万
Q2 2020: 165万
Q3 2020: 180万
Q4 2020: 210万
Q1 2021: 190万
...
游戏和交互式应用
创建简单的游戏和交互应用：
创建一个俄罗斯方块小游戏
创建一个简单的绘画应用，可以选择颜色和笔刷大小
高级功能
实时编辑
你可以通过以下方式实时编辑生成的内容：
- 在Artifacts窗口中直接修改代码（如果显示代码面板）
- 在聊天中提供修改建议：
把背景颜色改成浅蓝色，并添加一个标题
保存和导出
可以保存和导出生成的内容：
- 点击Artifacts窗口右上角的"导出"按钮
- 选择保存格式（如HTML、SVG、PNG等）
- 选择保存位置
多Artifacts管理
一次对话中可能生成多个Artifacts：
- 点击Artifacts窗口上方的标签切换不同Artifacts
- 使用"+"按钮创建新的空白Artifacts
- 使用"X"按钮关闭不需要的Artifacts
使用场景示例
开发者场景
- 快速原型设计和测试
- UI组件开发和预览
- 算法可视化
- 代码纠错和优化
设计师场景
- 创建矢量图形和图标
- 设计网页布局和组件
- 制作交互原型
- 数据可视化设计
教育场景
- 创建交互式教学材料
- 可视化科学概念
- 制作知识卡片和图表
- 生成交互式练习
技术细节
支持的框架和库
Artifacts环境预装了多种常用框架和库：
- 基础：HTML5, CSS3, JavaScript (ES6+)
- 可视化：D3.js, Chart.js, Plotly
- UI框架：简化版Bootstrap, Tailwind CSS
- 游戏开发：Phaser (简化版)
- 矢量图形：SVG.js
安全限制
为保障安全，Artifacts环境有以下限制：
- 无法访问本地文件系统
- 无法发送网络请求到外部域
- 执行时间有限制
- 资源使用有限制