试用AWS全新神器：Amazon Bedrock的「Open Artifacts」版Claude.ai Artifacts

Claude.ai的Artifacts真是太方便了。

GitHub上的AWS Samples仓库中有一个仿制Artifacts的应用程序。

Open Artifacts for Amazon Bedrock

https://github.com/aws-samples/open_artifacts_for_bedrockhttps://github.com/aws-samples/open_artifacts_for_bedrock本文将介绍「Open Artifacts for Amazon Bedrock」。

Open Artifacts for Amazon Bedrock

「Open Artifacts for Amazon Bedrock」是一个以Next.js应用程序形式提供的工具。其后端的代码解释部分通过Docker容器实现。

主要使用的库有：

• react: 18
• next: 14.2.4
• tailwindcss: 3.4.1
• ai: 3.2.15
• @ai-sdk/amazon-bedrock: 0.0.5
• @ai-sdk/anthropic: 0.0.23

其中，「ai」库是Vercel AI SDK。

Vercel AI SDK

Vercel AI SDK 是一个 TypeScript 工具包，旨在帮助开发人员使用 React、Next.js、Vue、Svelte、Node.js 等构建人工智能驱动的应用程序。

 这里是代码解释器部分的Dockerfile。它使用了 "Python 3.10" 的基础镜像，并安装了一些库和字体

FROM python:3.10# Set working directory
WORKDIR /appRUN apt-get update && apt-get install -y \wget \bzip2 \ca-certificates \libglib2.0-0 \libxext6 \libsm6 \libxrender1 \git \graphviz \unzip \&& rm -rf /var/lib/apt/lists/*# 更新包列表并安装字体
RUN apt-get update && apt-get install -y \fonts-wqy-microhei \fonts-wqy-zenhei \fonts-noto-cjk \&& rm -rf /var/lib/apt/lists/*# 使用 Google Noto Fonts（广泛支持多种语言）：
RUN wget https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKsc-hinted.zip \&& unzip NotoSansCJKsc-hinted.zip -d /usr/share/fonts/noto \&& fc-cache -f -v \&& rm NotoSansCJKsc-hinted.zip# Install Python packages using pip
RUN pip install --no-cache-dir numpy pandas scipy scikit-learn matplotlib seaborn jupyter_client \diagrams requests bs4 requests openpyxl# Set default command
CMD ["python"]

提示词和工具的机制

在系统提示词中，指定了 "你是一名Python和JavaScript开发者" 的角色。Python工具和JavaScript工具的规格如下所述。

`
You are a skilled Python and Javascript developer.
You are also expert of data science and data analysis, and you are also expert of solution architecture of AWS, Google Cloud, Azure, etc.
You are very familiar with the following tools and libraries:
For Python:
<python_libraries>
pandas, numpy, matplotlib, seaborn, scikit-learn, diagrams, etc.
</python_libraries>For JavaScript:
<js_libraries>
d3, react, canvas, threejs, cannonjs, etc.
</js_libraries>You have the ability to choose the appropriate tools and run Python or JavaScript code to solve the user's task. Code for each programming language runs in its own context and can reference previous definitions and variables.
Your code will be run in a seperate sandbox, so you don't write the code that contains code to read the data or file locally.
Here is extra guidance that help you to prevent bugs:
<guidance>
1. when you use matplotlib to plot a chart, you should not generate code "plt.style.use('seaborn')", because it will errors, you can use plt.style.use('ggplot') instead.
2. when you use  matplotlib to plot a chart, to add chinese font, you should add the following code before plotting:<code_snippet>plt.rcParams['font.sans-serif'] = ['WenQuanYi Micro Hei']  # 使用文泉驿微米黑plt.rcParams['axes.unicode_minus'] = False  # 解决负号显示问题</code_snippet>
</guidance>
`

工具有两个："runPython" 和 "runJs"。

• runJs

这个工具没有特别的处理，JavaScript代码会直接返回到屏幕。

export async function runJs(userID: string, code: string) {const result ={logs:{stdout:[],stderr:[]},error:undefined,results:[{html:code}]}return result}

• runPython

Python工具会启动一个Docker容器，并获取执行结果。 在持久化Bedrock生成的Python代码和附加文件（如果用户有附加文件）后，通过卷挂载的方式将其传递给Docker容器。

const dockerCommand = `docker run --rm -v "${workingDirPath}:/app" -w /app ${pythonContainer} python ${tempPrefix}_temp_script.py`;

在执行Python代码后，生成的图像可能会以PNG格式输出到同一目录。然后，会获取该目录内的PNG文件，并将其返回到屏幕。

构建方法

首先需要预先安装Node.js、Yarn和Docker。

然后，克隆源码。

git clone https://github.com/aws-samples/open_artifacts_for_bedrock.git

然后，构建代码解释器的Docker镜像。

cd open_artifacts/docker_filesdocker build -t python3.10 .

创建一个 .env 文件。如果已安装AWS CLI，则不需要设置AWS_ACCESS_KEY_ID等。

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=

构建并启动。

cd ..
yarn
yarn dev

在浏览器中访问 http://localhost:3000/。

使用在 .env 中设置的用户名和密码登录。

我尝试制作了一个打砖块游戏。

 

 右半部分可以在“code”和“Preview”之间切换。切换时会显示打砖块游戏。

 另外，我还修改了球的颜色。效果很好。

我还实现了传递CSV文件并生成图表的功能。

在GitHub上还有另一个Artifacts的克隆，我也计划接下来进行验证。

Bedrock的Artifacts和工具

https://github.com/aws-samples/artifacts-and-tools-for-bedrock