试用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 /app

RUN 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工具的规格如下所述。

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代码会直接返回到屏幕。

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容器。

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

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

构建方法

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

然后,克隆源码。

javascript 复制代码
git clone https://github.com/aws-samples/open_artifacts_for_bedrock.git

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

javascript 复制代码
cd open_artifacts/docker_files

docker build -t python3.10 .

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

javascript 复制代码
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=

构建并启动。

javascript 复制代码
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

相关推荐
AKAMAI10 分钟前
Entity Digital Sports 降低成本并快速扩展
人工智能·云计算
m0_6176636212 分钟前
Deeplizard深度学习课程(七)—— 神经网络实验
人工智能·深度学习·神经网络
笔触狂放39 分钟前
【机器学习】综合实训(一)
人工智能·机器学习
智算菩萨1 小时前
国内外最新AI语言模型行情分析2025年9月最新内容
人工智能
ningmengjing_1 小时前
激活函数:神经网络的“灵魂开关”
人工智能·深度学习·神经网络
Billy_Zuo1 小时前
人工智能机器学习——逻辑回归
人工智能·机器学习·逻辑回归
荣光波比1 小时前
Nginx 实战系列(一)—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装
linux·运维·服务器·nginx·云计算
canonical_entropy2 小时前
可逆计算:一场软件构造的世界观革命
后端·aigc·ai编程
东风西巷2 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
堆栈future2 小时前
我的个人网站上线了,AI再一次让我站起来了
程序员·llm·aigc