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

相关推荐
盼小辉丶1 小时前
Wasserstein GAN(WGAN)
人工智能·神经网络·生成对抗网络
EasyCVR4 小时前
视频融合平台EasyCVR在智慧水利中的实战应用:构建全域感知与智能预警平台
人工智能·音视频
DisonTangor4 小时前
阿里开源Qwen3-Omni-30B-A3B三剑客——Instruct、Thinking 和 Captioner
人工智能·语言模型·开源·aigc
独孤--蝴蝶4 小时前
AI人工智能-机器学习-第一周(小白)
人工智能·机器学习
西柚小萌新4 小时前
【深入浅出PyTorch】--上采样+下采样
人工智能·pytorch·python
丁学文武5 小时前
大语言模型(LLM)是“预制菜”? 从应用到底层原理,在到中央厨房的深度解析
人工智能·语言模型·自然语言处理·大语言模型·大模型应用·预制菜
fie88895 小时前
基于MATLAB的声呐图像特征提取与显示
开发语言·人工智能
文火冰糖的硅基工坊6 小时前
[嵌入式系统-100]:常见的IoT(物联网)开发板
人工智能·物联网·架构
刘晓倩6 小时前
实战任务二:用扣子空间通过任务提示词制作精美PPT
人工智能
shut up6 小时前
LangChain - 如何使用阿里云百炼平台的Qwen-plus模型构建一个桌面文件查询AI助手 - 超详细
人工智能·python·langchain·智能体