Skip to content

Latest commit

 

History

History
238 lines (205 loc) · 8.5 KB

README_zh.md

File metadata and controls

238 lines (205 loc) · 8.5 KB

Open Artifacts for Amazon Bedrock

English | 中文

关于Artifacts

Artifacts是Anthropic推出的一项新功能，它扩展了用户与Claude模型的互动方式。 当用户要求Claude生成代码片段、文本文档或网站设计等内容时，这些工件会出现在他们对话的专用窗口中。 可以实时查看、编辑和构建Claude的创作，将claude生成的内容无缝集成到他们的项目和工作流程中

本开源Artifacts项目简介

  • 本项目采用 Vercel AI 一个next.js开源的大模型应用开发框架，使用Amazon Bedrock上的Claude 3.5，并借鉴了e2b 中的example，复刻一个开源版本的Anthropic的Artifacts UI功能，它通过code intereptor组件与Claude模型交互，生成相应的代码，文本及设计内容，然后通过本地build的sandbox镜像执行并返回交互式的结果。
  • 目前主要功能特点如下：
  1. 支持Bedrock Claude 3.5接入
  2. 直接使用本地自己制作的docker image作为sandbox，保证数据隐私和安全，提高开发便捷性，执行性能。
  3. 新增支持HTML/JS 前端渲染功能，可以生成HTML/JS代码，直接在浏览器渲染，并可以支持实时交互。
  4. 新增图片上传加入多模态能力，例如可以上传excel表格，pdf截图，并生成代码做数据可视化分析。
  5. 其他小功能，例如清除上下文，复制粘贴直接上传图片等

视频Demo

环境准备

  • 可以在本地mac环境或者Amazon EC2实例(推荐Amazon Linux 2023)，CPU机型即可，无需GPU实例
  1. 安装nodejs和yarn
sudo yum install https://rpm.nodesource.com/pub_18.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y
sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 --nogpgcheck
sudo npm install --global yarn
  1. 安装 &启动 docker(如有可调过)
sudo yum install docker -y
sudo service docker start
sudo chmod 666 /var/run/docker.sock

使用说明

1. 配置docker image

  1. 进入open_artifacts_for_bedrock/docker_files
cd open_artifacts_for_bedrock/docker_files
  1. 在本文件夹下（包含 Dockerfile） 的目录中打开终端，运行以下命令来构建 Docker 镜像：
docker build -t python3.10 .

这个命令会创建一个名为 python3.10 的 Docker 镜像。如果需要安装某个特定的 Python 版本，或者需要安装其他依赖，则可以在Dockerfile 中进行修改。

2. 配置.env, 设置AK SK，并开通权限

  1. 在open_artifacts目录下创建一个：.env文件，内容如下（请在环境变量中配置用户密码，默认用户密码admin/admin）:
    如果没有AWS_ACCESS_KEY_ID or AWS_SECRET_ACCESS_KEY, 则可以通过配置对应的ec2 service role来获取权限
AWS_ACCESS_KEY_ID=*******
AWS_SECRET_ACCESS_KEY=******
AWS_REGION=us-east-1
PYTHON_DOCKER_IMAGE=python3.10
MODEL_ID=anthropic.claude-3-5-sonnet-20240620-v1:0
USERNAME=
PASSWORD=

2. (可选) 如果您想使用 IAM 角色而不是 AK/SK
IAM 角色的权限
创建一个名为 artifacts-service-role 的新 IAM 角色，设置如下：
可信实体类型：AWS 服务
服务：EC2
使用案例：EC2 - 允许 EC2 实例代表您调用 AWS 服务。
跳过"添加权限"，先创建这个角色。
角色创建后，通过创建内联策略添加权限，如下所示：
```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "bedrock:*",
            ],
            "Resource": "*"
        }
    ]
}

最后，将此 IAM 实例配置文件（IAM 角色）绑定到您的 EC2 实例。

  1. 如果在本地启用执行，执行成功会打开本地3000的ui端口. 通过http://localhost:3000访问
yarn
yarn dev
yarn dev -- -H 0.0.0.0

效果演示

贪吃蛇

1. 创建一个自动的贪吃蛇游戏, be cool and fancy
2. 更换背景颜色为黑色
3. 放一些烟花背景等
4. 增加星空背景图

alt text

模拟太阳系

make a threejs app of a space sim with gravity of a solar system with planets in a single web file.
the planets should be orbiting around the sun. Add a light source to the sun and realistic random materials to each planet. Add orbit traces to all bodies. use cannonjs. Using top view.

alt text

页面设计，screenshot2code

  • 提示词：
Create a cool and impressive sales dashboard page design using Tailwind CSS and React JS. The dashboard should display rankings for different platforms (JD.com, Taobao, VIP.com) including product category rankings, store rankings, GMV (Gross Merchandise Value), number of orders, and other relevant metrics
  • 中文
使用tailwind css, react js, 做一个酷炫销售dashboard的页面设计，分不同平台（京东、淘宝、唯品会）的商品类目排名，店铺排名，GMV，订单数等
  • 右侧窗口可以看到制作出的设计界面 alt text
  • 以上的效果还比较简陋，我们给他一张设计稿图作为参考，这样artifact做出的设计图更加准确 alt text 复制图片到聊天窗，并添加新提示
please use the style in attached image to refine the page
  • 中文
参考这个图的样式进行修改
  • 这次可以看到右侧窗口输出的页面，效果更加接近参考图 alt text

数据可视化分析（图片分析）

case 1

  • 上传图片1(可复制并粘贴进对话框) alt text

  • 提示词

analyze and plot the data in the image
  • Result alt text

case 2

  • 上传图片1，2，3 alt text alt text alt text

  • 提示词

你是一名专业的数据分析师，第1张图是ml.alpha.24xlarge，在tp=8的性能测试数据，第2张图是ml.beta.24xlarge，在tp=4的性能测试数据，第3张图是ml.beta.24xlarge，在tp=8的性能测试数据。请对比分析这3张图中的数据，并绘制可视化的数据分析对比图，重点关注concurrency 跟 throughput，latency的关系
  • 结果 alt text

python 数据可视化分析（上传csv文件分析）

  • 下载以下文件到本地，并从聊天窗口同时上传3个csv文件
  • 提示词
你是一名专业的数据分析师，第1张图是ml.alpha.24xlarge，在tp=8的性能测试数据，第2张图是ml.beta.24xlarge，在tp=4的性能测试数据，第3张图是ml.beta.24xlarge，在tp=8的性能测试数据。请对比分析这3张图中的数据，并绘制可视化的数据分析对比图，重点关注concurrency 跟 throughput，latency的关系

请继续分析
  1. 如果碰到执行错误，则将错误信息复制进入输入框，再次点击执行
  • 最终结果
  • alt text
  • alt text
  • alt text

生成架构图

create an web server architecture diagram using aws loadbalancer, ec2, rds

add api gateway between lb and web servers, and put the servers in vpc

it errors : No module named 'diagrams.aws.apigateway'\n

alt text

不同云只之间的架构转换

  • 上传图片 alt text

  • 提示词

explain the architecture in the image, and alternate all the services to aws services accordingly and draw aws architecture diagram
  • 结果 alt text

其他

FAQ

  1. 如何保证运行代码的依赖都能满足？ 可以根据前端代码执行页面返回的报错信息，查看是否缺少module，如果缺少可以修改docker_files/Dockerfile文件，添加对应的包，然后build即可
docker build -t python3.10 .
  1. 使用PM2后台运行
#install pm2
sudo yarn global add pm2
pm2 start pm2run.config.js
  • 以下是其他的管理命令:
pm2 list
pm2 stop artifacts
pm2 restart artifacts
pm2 delete artifacts