深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
需要这份系统化的资料的朋友，可以戳这里获取
2、在左侧找到笔记本，点击笔记本–笔记本实例–创建笔记本实例，进入以下选项，笔记本实例类型是需要申请的资源类型，可以看到Amazon SageMaker给我们提供了很多类型资源，我们选择加速型g4dn.xlarge，在平台上我们选择熟悉的Linux和Jupyter，卷大小也就是存储空间，可以随意选择但不宜小于20GB。
3、创建好后，我们在列表中就可以看到对应实例了，跟我们在其他云服务器中使用差不多，Amazon SageMaker也给我们提供了熟悉的Jupyter notebook。
2.2、配置代码与环境
我们点击打开Jupyter页面，进入对应实例，选择右侧upload，上传Notebook代码，代码下载链接：
https://static.us-east-1.prod.workshops.aws/public/73ea3a9f-37c8-4d01-ae4e-07cf6313adac/static/code/notebook-stable-diffusion-ssh-inference.ipynb，先下载到本机，再上传到笔记本实例当中，上传成功后，点击打开：
在第一次进入时，系统会自动跳出提示，让你选择对应kernel，我们选择conda_pytorch_p39核，并点击set kernel
由于这个Diffusion Model的Amazon SageMaker Jupyter文件已经为我们写好了所有配置步骤，环境安装，我们直接点击Run
分析一下，该代码文件包含以下内容：
在笔记本实例中下载并测试AIGC模型文件
编写模型推理入口代码，打包模型文件，并上传至S3桶
使用代码部署模型至Amazon SageMaker Inference Endpoint
（可选）使用会话管理器连接至Amazon SageMaker Inference Endpoint进行远程调试
2.3、复现Stable Diffusion
通过上面的运行，已经将代码部署模型至Amazon SageMaker Inference Endpoint，从而可以**基于推理终端节点生成自定义图片****，**我们在juypter notebook的最后，加上这样一段代码，我们将想要生成的句子可以写在prompt里面。
`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,
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
v/config/
export default defineConfig({
plugins: [vue()],
server: {
//服务器主机名
port: 8080,
[外链图片转存中...(img-0tYeY5y9-1715902299841)]
[外链图片转存中...(img-6iu6cdam-1715902299841)]
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**