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

相关推荐
takashi_void6 分钟前
本地实现斯坦福小镇(利用大语言模型使虚拟角色自主发展剧情)类似项目“Microverse”
人工智能·语言模型·自然语言处理·godot·游戏程序·斯坦福小镇
zxsz_com_cn33 分钟前
设备健康管理大数据平台:工业智能化的核心数据引擎
运维·人工智能
算家计算36 分钟前
破5亿用户!国产AI模型成功逆袭,成为AI普及浪潮主角
人工智能·开源·资讯
Jolie_Liang44 分钟前
国内金融领域元宇宙金融特殊需求与技术挑战研究报告
人工智能·元宇宙
算家计算44 分钟前
SAIL-VL2本地部署教程:2B/8B参数媲美大规模模型,为轻量级设备量身打造的多模态大脑
人工智能·开源·aigc
Costrict1 小时前
解锁新阵地!CoStrict 现已支持 JetBrains 系列 IDE
大数据·ide·人工智能·深度学习·自然语言处理·ai编程·visual studio
姚家湾1 小时前
MAC mini /绿联NAS 上安装本地AFFiNE
人工智能·affine
Python智慧行囊1 小时前
图像处理-opencv(二)-形态学
人工智能·计算机视觉
阿里云大数据AI技术1 小时前
云栖实录|阿里云 Milvus:AI 时代的专业级向量数据库
大数据·人工智能·搜索引擎
机器之心1 小时前
太强了!DeepSeek刚刚开源新模型,用视觉方式压缩一切
人工智能·openai