Amazon SageMaker 部署 AIGC 应用:训练 - 优化 - 部署 - Web 前端集成应用实践

Amazon SageMaker 部署 AIGC 应用:训练 - 优化 - 部署 - Web 前端集成应用实践

Amazon SageMaker 部署 AIGC 应用:训练 - 优化 - 部署 - Web 前端集成应用实践

背景

在这里插入图片描述
Amazon SageMaker 汇集广泛采用的亚马逊云科技机器学习和分析功能,统一访问所有数据,为分析和人工智能提供一体式体验,使用亚马逊云科技机工具进行模型开发、生成式人工智能、数据处理和 SQL 分析,在融通式合作开发工作室中加快协作和构建,借助强大的生成式人工智能软件开发助手 Amazon Q 开发者版提升效率,无论数据存储在数据湖、数据仓库,还是第三方或联合数据来源中,均可访问所有数据,同时内置治理功能可满足企业安全需求。

前言

本文将通过 Amazon SageMaker Notebook 实例完成 AIGC 模型的测试与验证,再将模型部署至 Amazon SageMaker Inference Endpoint 实现服务化,最后利用 Amazon Cloud 9 调试 Web 应用,并调用已部署的 SageMaker Inference Endpoint 实现 AIGC 模型的实际应用

Amazon SageMaker 部署 AIGC 模型

步骤一:创建亚马逊云科技账户
1、注册亚马逊云科技官网



2、进入注册页面(使用电子邮件地址进行注册)进入 创建亚马逊云科技账户页面(如果最近登录过亚马逊云科技,请选择登录控制台。如果未显示创建新亚马逊云科技账户,请首先选择登录其他账户,然后选择创建新亚马逊云科技账户)根用户电子邮件地址 中,输入电子邮件地址,编辑亚马逊云科技账户名称,然后选择验证电子邮件地址,该地址会收到一封包含验证码的亚马逊云科技验证电子邮件

安全验证

验证电子邮件地址(输入收到的代码,然后选择验证,可能需要几分钟才会收到代码,检查电子邮件和垃圾邮件文件夹中是否有验证码电子邮件)



3、设置用户信息:输入根用户密码和确认根用户密码,选择个人或企业



4、添加付款信息( 账单信息页面上,输入付款方式的信息,然后选择验证并添加,必须先添加有效的支付方式才能继续注册)



5、用户信息验证(选择接收验证码的联系方式、选择电话号码的国家或地区代码)



6、客户验证与激活账户(选择亚马逊云科技支持服务计划)



7、注册成功

步骤二:创建Amazon SageMaker Notebook实例
1、登录亚马逊云科技控制台



2、进入SageMaker服务,查找服务处搜索SageMaker



3、进入Notebook笔记本实例控制面板(左侧菜单栏,点击笔记本实例,进入笔记本Notebook实例控制面板)



4、创建笔记本实例


5、配置笔记本实例设置,创建笔记本实例详情页中,配置笔记本实例的基本信息(设置笔记本实例的名称、选择笔记本实例、以及存储的大小)



6、配置笔记本实例权限(笔记本实例创建一个IAM角色,用于调用调用包括 SageMaker 和 S3 在内的其他服务,例如上传模型,部署模型等)IAM角色出,点击下拉列表,选择创建新角色



7、弹出的配置页面中,默认配置即可



8、成功创建IAM角色



9、创建实例(检查先前配置的信息,确认无误点击创建笔记本实例)



10、等待实例创建成功,进入Jupyter Notebook


11、构建Stable-Diffusion环境(Jupyter Lab控制台,选择最下面的Terminal)



12、下载Notebook代码文件



13、打开刚刚下载的Notebook文件,内核选择conda_pytorch_p39

步骤三:Amazon Cloud 9 构建前后端Web应用
1、亚马逊云科技控制台进入 Cloud9 服务


2、创建Cloud 9 环境



3、配置Cloud 9 环境名字配置

其他部分配置保持默认,等待创建创建成功即可



4、进入Amazon Cloud9 环境



5、Cloud9 下方的控制台中输入以下指令下载保存Web应用程序代码压缩文件,并将该压缩文件进行解压

解压后SampleWebApp文件夹包含以下内容:后端代码 app.py:接收前端请求并调用 SageMaker Endpoint 将文字生成图片两个前端html文件 image.html 和 index.html

6、Amazon Cloud9上安装 Flask 和 boto3





7、运行 app.py,并且点击 Amazon Cloud9 上方的 Run 按钮运行代码



8、预览web前端页面



9、Amazon Cloud9 环境打开web 页面



10、输入信息生成图片(自定义图片长度和宽度,Prompt 输入框处输入语句或描绘性词汇生成图片)输入语句时,详细描述需求信息,以便AI绘制出的图片更贴合预期,比如通过描述性词语,如 cartoon style、van gogh style、realistic 表明图片的整体风格例如:可将长度和宽度都设置成512,输入以下描绘性语句生成一张卡通风格的宇航员猴子图片,以及一张超级英雄的图片



11、成功页面展示



Amazon SageMaker工作原理

在这里插入图片描述
Amazon SageMaker 全托管机器学习服务,通过整合数据处理、模型训练、超参数优化、部署推理的全流程能力,支持开发者使用 Notebook 实例快速调试 AIGC 模型,借助分布式训练集群加速算法迭代,并将模型高效部署为可自动扩缩容的 Inference Endpoint,同时深度集成亚马逊云科技生态S3 存储、CloudWatch 监控等,以容器化架构和 Kubernetes 集群管理实现从开发到生产的无缝衔接,大幅降低机器学习工程化门槛完全托管服务:用户无需操心服务器等基础设施的管理,SageMaker 负责处理硬件资源的配置、管理和维护,将用户从复杂的运维工作中解放出来,使开发者专注于机器学习模型的开发,大大降低运维成本和复杂性集成开发环境强大:提供基于 Web 的可视化界面,集成了数据探索、模型训练、调试、评估和部署等所有机器学习开发步骤,为数据科学团队提供了一站式的工作平台,能显著提高工作效率支持自动模型构建:依据用户提供的数据自动构建、训练和调整最佳机器学习模型,无需人工进行特征准备、算法测试和模型参数优化等繁琐工作,让没有深厚机器学习专业知识的用户也能快速构建分类和回归模型

总结

在这里插入图片描述
本文通过创建亚马逊云科技账户、搭建 SageMaker Notebook 实例测试 Stable-Diffusion 模型、利用 Cloud9 构建 Web 应用并调用模型 Endpoint,实现 AIGC 应用从训练到前端集成的全流程实践,展现 SageMaker 全托管、集成开发及自动化模型构建的核心优势,降低 AIGC 工程化门槛。如果小伙伴们感兴趣可以访问亚马逊云科技官网进行免费体验哈!
友情提示:如果决定不再使用服务的话,记得要在控制台关闭服务,以防超过免费额度产生扣费

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.