如何从Angular应用中调用AWS SageMaker上运行的Python脚本？

1. SageMaker端Python脚本部署 #

• 封装你的风格迁移Python脚本为SageMaker推理规范入口，必须实现4个核心函数：
  • model_fn：加载预训练的风格迁移模型
  • input_fn：解析前端传入的图像二进制数据/Base64编码，预处理为模型可接受的张量格式
  • predict_fn：执行推理生成风格化图像
  • output_fn：将生成的图像转为PNG/JPG格式的二进制流，或编码为Base64字符串返回
• 选择和你脚本匹配的SageMaker官方深度学习容器（PyTorch/TensorFlow均可）完成端点部署，部署完成后获取专属的端点调用地址
• 配置SageMaker端点的访问权限，后续配合API网关配置CORS规则放行你的Angular应用域名

2. 请求中转层配置（推荐生产环境使用） #

不要直接从前端调用SageMaker端点，容易泄露AWS访问凭证，新增API Gateway作为中转：

• 在AWS API Gateway中创建POST接口，配置请求体支持multipart/form-data格式以接收前端上传的图像
• 完成API Gateway与SageMaker端点的集成映射，配置请求/响应的参数透传规则
• 给接口配置API Key或JWT鉴权规则，同时配置CORS放行你Angular应用的域名，避免跨域报错

3. Angular端调用逻辑实现 #

• 编写文件上传组件获取用户上传的图像File对象，构造FormData承载上传数据：

// Angular请求示例
import { HttpClient } from '@angular/common/http';

// 构造请求数据
const uploadFile = (file: File, styleId: string) => {
  const formData = new FormData();
  formData.append('source_image', file, file.name);
  formData.append('style', styleId); // 可选：如果支持多风格选择可传额外参数

  return this.http.post('你的API Gateway接口地址', formData, {
    responseType: 'blob' // 如果后端返回二进制图像用blob，返回Base64则用json
  })
}

• 接收返回结果后渲染图像：如果是二进制Blob对象，用URL.createObjectURL(blob)生成临时链接赋值给img标签的src属性；如果是Base64字符串，直接拼接为data:image/png;base64,${返回的Base64内容}后赋值给src即可

常见问题处理 #

• 403报错：优先排查CORS配置、鉴权参数是否正确、SageMaker端点资源策略是否放行API网关的访问权限
• 请求超时：将SageMaker端点的超时阈值调整到60s以上，同时将Angular HttpClient的超时时间同步调整
• 图像渲染异常：检查Python脚本中生成图像的编码格式是否和前端解析规则一致，避免编码不匹配导致的图像损坏

内容的提问来源于stack exchange，提问作者COM