在 screenshot-to-code 项目中应用 Amazon Bedrock：截图生成代码

前言

将设计原型转化为可用前端代码的是软件开发中常见的需求，这种需求在电商、企业内部系统、游戏开发等多个领域都有广泛应用。例如，电商平台可以通过截图快速生成促销页面，游戏开发团队进行活动页和宣发页的开发，而企业 IT 部门则可以基于现有系统截图快速开发原型。开源项目 screenshot-to-code 为这一需求提供了创新解决方案，通过分析截图自动生成相应的前端代码。在这篇博客中，我们将探讨如何在 screenshot-to-code 项目应用 Amazon Bedrock 的能力，将截图生成前端代码。

Amazon Bedrock 是一项完全托管的服务，通过单个 API 提供来自 AI21 Labs、Anthropic、Cohere、Meta、Mistral AI、Stability AI 和 Amazon 等领先人工智能公司的高性能基础模型（FM）。在项目中，我们将借助 Amazon Bedrock 的能力来生成前端代码及相关的示例图片。

方案介绍

使用 Amazon Elastic Container Service（ECS）进行 screenshot-to-code 项目的部署，应用 Amazon Bedrock 的能力生成前端代码。

通过 Application Load Balancer（ALB），根据访问的路由，将请求分发到项目的前端及后端应用。
前端及后端应用部署在 Amazon Fargate 中，根据CPU资源的使用量进行弹性的伸缩。
利用 Amazon Bedrock 中 Claude 的多模态能力生成上传截图的对应前端代码。
使用 Titan 的文生图的能力，生成相应的前端代码所需要的示例图片并保存到 Amazon Simple Storage Service（S3）中。

在后续的内容中，将提供两种不同的部署方式，本地单机部署更适用个人用户的快速体验，云端部署更适合团队或生产适用，更安全。

先决条件

安装 Amazon CLI.
安装 git.
安装 docker.
安装 docker-compose.
安装 docker buildx.
申请 Amazon Bedrock 模型访问权限 Claude 3.5 Sonnet 及 Titan Image Generator G1 v2.

项目部署

下载 screenshot-to-code-use-bedrock 开源项目：

git clone https://github.com/aws-samples/screenshot-to-code-use-bedrock.git
cd screenshot-to-code-use-bedrock
git fetch
git switch blog

根据需要，接下来可以选择进行本地部署，本地部署或云上部署。

本地部署

运行以下命令创建 .env 文件并通过 docker-compose 启动项目：

touch .env
docker-compose up --build

（可选）项目启动后，后端访问链接默认为 127.0.0.1:7001，在该地址无法直接访问的情况下，参考以下修改 .env 文件的内容：

VITE_WS_BACKEND_URL=ws://<accessible-ip-or-adress>:<accessible-port>
VITE_HTTP_BACKEND_URL=http://<accessible-ip-or-adress>:<accessible-port>

（可选）修改完成后，运行以下命令重新打包并启动项目：

docker-compose up --build

在项目启动后，您可以通过本地的 80 端口进行访问。

云上部署

设置当前的账号 ID 及部署区域，替换 region 为对应的需要部署的区域：

export ACCOUNT_ID=$(aws sts get-caller-identity --output text --query Account)
export AWS_REGION=<your-region>

运行以下命令创建 Amazon Elastic Container Registry（ECR）仓库并登录：

aws ecr get-login-password --region ${AWS_REGION} \
    | docker login --username AWS \
    --password-stdin ${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com

aws ecr create-repository \
    --repository-name screenshot-to-code-frontend \
    --region ${AWS_REGION}

aws ecr create-repository \
    --repository-name screenshot-to-code-backend \
    --region ${AWS_REGION}

运行以下命令打包多架构镜像并上传到 ECR 仓库：

cd frontend
docker buildx build \
  --build-arg VITE_BEHIND_SAME_ALB=true \
  --tag ${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/screenshot-to-code-frontend:latest \
  --platform linux/amd64,linux/arm64 \
  --push .

cd ../backend
docker buildx build \
  --tag ${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/screenshot-to-code-backend:latest \
  --platform linux/amd64,linux/arm64 \
  --push .

cd ..

运行以下命令创建堆栈模板：

cp deploy-on-ecs.yaml template.yaml
sed -i "s/<your-account-id>/${ACCOUNT_ID}/g" template.yaml
sed -i "s/<your-region>/${AWS_REGION}/g" template.yaml

运行以下命令基于 ECS 的启动项目，项目的创建大约需要 6 分钟：

aws cloudformation create-stack \
    --stack-name screenshot-to-code-stack \
    --template-body file://template.yaml \
    --capabilities CAPABILITY_IAM \
    --region ${AWS_REGION}

aws cloudformation wait stack-create-complete \
    --stack-name screenshot-to-code-stack \
    --region ${AWS_REGION}

运行以下命令获取访问链接：

aws cloudformation describe-stacks \
    --region ${AWS_REGION} \
    --query "Stacks[?StackName=='screenshot-to-code-stack'][].Outputs[?OutputKey=='LoadBalancerDNS'].OutputValue" \
    --output text

注意：部署完成后的链接可以直接访问，需要进一步考虑通过安全组或 Amazon Cognito 增加访问限制。

使用介绍

在本地部署的情况下，当本地没有权限访问 Amazon Bedrock 的情况下，通过页面中左上角的设置按钮进行相关参数的设置。具体设置可参考下图：

注意：对 access key 及 secret key 的权限进行控制并注意保管，避免泄漏。

点击应用中间区域，选择图片并进行前端代码生成：

除了通过上传截图的方式生成代码外，项目也支持通过提供 URL 的方式来生成代码。目前该部分功能的实现需要借助 screenshotone 提供的 API 的能力。

清理环境

为避免产生不必要的费用，运行以下命令进行清理：

aws s3 rm s3://screenshot-to-code-${ACCOUNT_ID}/ --recursive --region ${AWS_REGION}

aws cloudformation delete-stack \
  --stack-name screenshot-to-code-stack \
  --region ${AWS_REGION}

aws ecr delete-repository \
  --repository-name screenshot-to-code-frontend \
  --region ${AWS_REGION} \
  --force

aws ecr delete-repository \
  --repository-name screenshot-to-code-backend \
  --region ${AWS_REGION} \
  --force

总结

通过这篇文章，您将了解如何利用先进的 AI 技术改进软件开发流程，实现 screenshot-to-code 项目的本地及云上部署。我们将探讨如何利用 Amazon Bedrock 的文本和图片生成能力，实现截图到前端代码的自动转换。在 0-shot 的情况下，生成的代码通常能够达到 70% 左右的可用，可基于此做进一步的开发。这一工具不仅能显著提高开发效率，加速从设计原型到可用代码的转化，还能促进设计师和开发者之间的无缝协作，为软件开发流程带来新的改进。

*前述特定亚马逊云科技生成式人工智能相关的服务仅在亚马逊云科技海外区域可用，亚马逊云科技中国仅为帮助您了解行业前沿技术和发展海外业务选择推介该服务。

亚马逊AWS官方博客