Stable Diffusion复现——基于 Amazon SageMaker 搭建文本生成图像模型(1)

最新推荐文章于 2024-08-16 19:16:34 发布

2401_84851419

最新推荐文章于 2024-08-16 19:16:34 发布

阅读量1k

点赞数 25

文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84851419/article/details/138989623

版权

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取


`from PIL import Image
from io import BytesIO
import base64

# helper decoder
def decode_base64_image(image_string):
 base64_image = base64.b64decode(image_string)
 buffer = BytesIO(base64_image)
 return Image.open(buffer)

#run prediction
response = predictor[SD_MODEL].predict(data={
 "prompt": [
 "A cute panda is sitting on the sofa",
 "a photograph of an astronaut riding a horse",
 ],
 "height" : 512,
 "width" : 512,
 "num_images_per_prompt":1
 }
)

#decode images
decoded_images = [decode_base64_image(image) for image in response["generated_images"]]

#visualize generation
for image in decoded_images:
 display(image)`

如上，我们试着生成一张可爱的熊猫坐在沙发上面，一个宇航员在骑马，等待几秒钟后，推理完成，得到如下结果：

三、实验二：基于Vue3 +AWS Cloud9搭建一款文本生成图像Web应用

通过上面的实践，通过Amazon SageMaker的强大算力加持，我们已经成功训练好了Diffusion Model模型并保存了推理入口，但是光光只能在代码中调用不够，下面我们通过Vue3+Flask通过调用模型来搭建一款简单的文本生成图像demo。

3.1、在 AWS Cloud9 创建后端 Flask服务

亚马逊为我们提供了一种和VScode Web版相同的基于云的集成开发环境 (IDE)：AWS Cloud9，我们首先在搜索栏搜索到Cloud9，点击新建一个云环境：

创建好之后，我们可以在Environments中打开Cloud9IDE

与VS Code Web类似，AWS Cloud9包括一个代码编辑器、调试程序和终端，并且预封装了适用于 JavaScript、Python、PHP 等常见编程语言的基本工具，无需安装文件或配置开发计算机，即可开始新的项目。

在下面的终端，我们输入以下代码，下载并解压SampleWebApp文件夹


`cd ~/environment
wget https://static.us-east-1.prod.workshops.aws/public/73ea3a9f-37c8-4d01-ae4e-07cf6313adac/static/code/SampleWebApp.zip
unzip SampleWebApp.zip`

该文件夹包含以下内容：

后端代码 app.py：接收前端请求并调用 SageMaker Endpoint 将文字生成图片。
两个前端html文件 image.html 和 index.html。

要运行此后端服务，首先需要安装相应环境，使用pip3安装Flask和boto3环境：


`pip3 install Flask
pip3 install boto3`

安装成功之后，点击左侧的app.py文件，点击 AWS Cloud9 上方的 Run 按钮运行代码，这样代码就可以调用Amazon Simple Storage Service (Amazon S3)中已经保存好的endpoint进行文本生成图像推理，运行如下：

左侧可以看到后台为前端提供了8080端口，右侧前端页面提供了简单的demo，width和length代表输出图像的长宽，prompt为输入的文本，同样测试A cute panda is sitting on the sofa这条语句，成功输出：

3.2、在本机使用前端Vue搭建Web demo

光在服务器调用不过瘾，我们尝试在本机搭建一款Vue demo，然后调用AWS Cloud9的Flask服务。如果你不想从零开始搭建，可以使用git clone，克隆我上传的这个项目，然后直接跳到3.3继续实验流程。


`git clone https://github.com/Heavenhjs/t2iweb-demo.git`

首先我们打开VSCode，输入npm create vite@latest用vite初始化一款Vue项目，分别选择Vue、TS作为技术栈：

初始化好后，输入npm i安装相应依赖，然后输入npm install element-plus --save和npm install axios安装element-plus、axios依赖

然后输入npm run dev启动项目，一个初始化项目就建好了：

接下来，我们把原始给的东西清理一下，然后开始写一个demo，需要设计一个表单，然后在表单下方设计一个值专门用于渲染后端传回来的html富文本，项目结构设计的比较简单如下所示，api放的是调用后台flask服务的接口，components里做了一个T2I的组件，utils里是封装的axios服务，另外还需要在vite.config.ts里配置跨域。

主要代码如下：


`// T2I.VUE
<template>
 <div>
 <el-form :inline="true" :model="form" class="demo-form-inline">
 <div>
 <el-form-item label="图像宽度:">
 <el-select v-model="form.width" placeholder="请选择">
 <el-option label="256" value="256" />
 <el-option label="512" value="512" />
 </el-select>
 </el-form-item>
 </div>
 <div>
 <el-form-item label="图像高度:">
 <el-select v-model="form.length" placeholder="请选择">
 <el-option label="256" value="256" />
 <el-option label="512" value="512" />
 </el-select>
 </el-form-item>
 </div>
 <div>
 <el-form-item label="对应文本：">
 <el-input
 v-model="form.inputContent"
 :autosize="{ minRows: 2, maxRows: 4 }"
 type="textarea"
 placeholder="请输入想要生成的文本"
 />
 </el-form-item>
 </div>
 <el-form-item>
 <el-button type="primary" @click="onSubmit">生成</el-button>
 <el-button type="primary" @click="onClean">清空</el-button>
 </el-form-item>
 </el-form>
 </div>
 <p v-html="image"></p>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { T2I } from "../api/t2iApi";
const form = reactive({
 inputContent: "",
 width: "",
 length: "",
});
let image = ref("<p>请输入信息后，点击生成</p>");
const onSubmit = () => {
 console.log("submit!");
 T2I(form).then((res: any) => {
 console.log(res.data);
 image.value = res.data;
 });
};
const onClean = () => {
 form.inputContent = "";
 form.length = "";
 form.width = "";
 image.value = "<p>请输入信息后，点击生成</p>";
};
</script>
<style lang="less"></style>`


`// t2iApi.ts
import axios from "../utils/axios";
/**
 * @name 用户管理模块
 */
// 获取用户列表
const PORT1 = "/api";

// T2I
export const T2I = (parms: any) => {
 const form = new FormData();
 form.append("inputContent", parms.inputContent);
 form.append("width", parms.width);
 form.append("length", parms.length);
 return axios.post(PORT1 + `/predictor`, form);
};`

3.3、使用Axios请求Cloud9的文本生成图像服务

为了安全，AWS Cloud9 分配给环境的预览标签页中的 URL，只能在当环境的 IDE 处于打开状态并且应用程序正在同一个 Web 浏览器中运行时才有用，所以我们要通过公网ip和端口号的方式暴露接口。

为此首先我们要为实例修改安全组，打开8080端口，允许其传输数据，这样才可以访问到后端写好的Flask服务，具体步骤可以看手册这一章：https://docs.aws.amazon.com/zh_cn/cloud9/latest/user-guide/app-preview.html

打开8080端口后，可以用Postman测试一下，在body里面，加入form-data，并输入对应的key和value，点击send发送，显示200，下方栏返回html且img当中有值，则配置成功：

成功之后，我们就可以使用Axios来请求Cloud9的服务，这就需要在前端配置一下接口的ip，打开vite.config.ts，其中target 需要改为自己ACL的公网ip+端口号，这样就可以在本机上调用到flask的服务啦！


`import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 server: {
 //服务器主机名
 port: 8080,
 open: true,
 hmr: {
 host: "127.0.0.1",
 port: 5173,
 },
 // 代理跨域
 proxy: {
 "/api": {
 target : "这里输入亚马逊网络对应ACL的公网ip+端口号如：http://18.222.222.222:8080",
 changeOrigin: true,
 // 将/api去掉
 rewrite: (path: string) => path.replace(/^\/api/, ""),
 },
 },
 },
});`

最后输入"npm run dev"运行项目，效果如下：

3.4、避坑指南——注意事项和经验总结

问题1：配额不足或者无法申请配额

您的请求有问题。请参阅以下详细信息。User: arn:aws:sts::581067464334:assumed-role/TeamRole/MasterKey is not authorized to perform: servicequotas:ListAWSDefaultServiceQuotas with an explicit deny in an identity-based policy

解决方案：更换地区为美国东部

点击链接https://ap-northeast-1.console.aws.amazon.com/servicequotas/home/services/sagemaker/quotas进入配额列表，搜索：ml.g4dn.xlarge for endpoint usage，点击请求申请增加配额。

问题2：404错误

可能是公网ip和端口号不对，可能是安全组的准入规则没有设置对，认真看一下手册，打开8080端口或者更换其他端口。

问题3：500 Bad Request

Request传入的参数不对，检查一下表单输入的值和传输过去的数据是否符合规范，也有可能是后端flask服务断联了，重启一下flask服务就好了。

其他问题可以参考实验手册：https://dev.amazoncloud.cn/activity/activityDetail?id=638ea0193b67dd77d6cdb221&catagoryName=buildOn

四、总结

4.1、Stable Diffusion模型的表现和局限性

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

38ea0193b67dd77d6cdb221&catagoryName=buildOn

四、总结

4.1、Stable Diffusion模型的表现和局限性

[外链图片转存中…(img-zze3Y07w-1715902231984)]
[外链图片转存中…(img-GrbWOPtU-1715902231985)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

2401_84851419

关注

25
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
Stable Diffusion复现——基于 Amazon SageMaker 搭建文本生成图像模型(1)

问题1：配额不足或者无法申请配额您的请求有问题。请参阅以下详细信息。解决方案：更换地区为美国东部点击链接进入配额列表，搜索：ml.g4dn.xlarge for endpoint usage，点击请求申请增加配额。问题2：404错误可能是公网ip和端口号不对，可能是安全组的准入规则没有设置对，认真看一下手册，打开8080端口或者更换其他端口。问题3：500 Bad Request。
复制链接

扫一扫