豆包 MarsCode 助力，便捷 AI 试衣新体验

BLACK595
684 阅读7分钟

前言

线上选购服装虽然带来了便捷，但无法实际试穿始终是一大痛点，可能屏幕上看着好看，但买来穿自己身上就没那种感觉了。不过，AI 技术的崛起为解决这一难题带来了曙光，我们今天要聚焦的，便是利用 MarsCode 这款功能强大的 AI 编程助手配合阿里百炼模型，来尝试构建一个属于自己的 AI 试衣功能，让虚拟试衣变得触手可及，下面就跟随我来一起看看吧。

什么是MarsCode

MarsCode是字节跳动推出的免费AI编程助手，我们使用MarsCode时需要先去官网注册账号，并下载插件安装到我们的IDEA中，还不知道怎么操作的小伙伴可以看我之前的文章IntelliJ IDEA：MarsCode 插件初体验

项目准备

API-KEY获取

在推进 AI 试衣功能项目的过程中，获取 API-KEY 是至关重要的基础环节。本项目依赖于阿里百炼的 “AI 试衣 OutfitAnyone” 模型，而 API-KEY 则是实现与该模型顺利对接、调用其服务的关键要素。

具体获取方式为，参照如何获取 API Key_大模型服务平台百炼 (Model Studio)- 阿里云帮助中心的指引，去开通 “百炼大模型推理” 服务。按部就班地依据页面提示操作，即可完成开通流程。

成功开通后，在页面右上角点击 “我的” 选项，进而找到 “API-KEY” 栏目，在此处便能查看相应的 API-KEY 信息。需着重强调的是，API-KEY 务必妥善保管，遗失可能会有被盗刷风险。 image.png

获取 API-KEY 后，还需关注模型调用时的具体参数要求。依据AI 试衣 OutfitAnyone文档所述，向该模型发起请求时，需传递三个参数，即人物模型图、上半身服饰图以及下半身服饰图。特别要注意的是，这三个图必须以图片的在线链接形式进行传递。这就要求我们在前端开发中，要完善图片上传功能，并保证上传后的图片能妥善存储于云端，以此契合模型调用的参数要求。

image.png

COS开通

与此同时，腾讯云的 COS（对象存储）服务开通也是项目准备阶段不可或缺的部分。COS 在项目里扮演着关键角色，是用于安全且高效存储与 AI 试衣相关图片资源的重要依托。

要开通 COS 服务，需前往 (对象存储 简介 - API 文档 - 文档中心 - 腾讯云) 官方页面，依照相关指引完成开通操作。在成功开通后，系统会提供存储密钥，该存储密钥是后续操作 COS 服务、管理存储资源的核心凭证，同样需要谨慎保管，避免出现安全隐患。 image.png

完成上述 API-KEY 获取以及 COS 开通这两项重要的前期准备工作后，便完成了后续 AI 试衣功能的实现的项目准备。

整体流程

在开启编码工作前，明晰项目整体流程至关重要，它是后续开发有序开展的指引。

其流程主要有以下几步：首先是用户上传，用户借助前端功能入口，选择本地的人物模型图、上半身服饰图及下半身服饰图进行上传，为后续试衣准备素材。

接着，所上传的图片会被传至腾讯 COS，它作为可靠的数据存储服务，能保障图片数据安全稳定，为调用 AI 试衣模型提供数据基础。

而后便是调用 AI 试衣模型这一关键环节，系统会从腾讯 COS 提取相关图片在线链接并按要求传递给阿里百炼的 “AI 试衣 OutfitAnyone” 模型，由其通过复杂运算模拟出虚拟试衣效果。

最后，将模型处理后的结果返回给用户，让用户直观看到试衣效果，辅助其进行购买等相关决策，实现便捷的虚拟试衣体验。

image.png

MarsCode配合生成代码

前端上传页面

第一步让豆包生成图片上传页面

问：请使用element-plus帮我制作一个ai试衣页面，用户需要上传三张图片，分别是人物模型图、上半身服饰图及下半身服饰图，三张图片用分别用三个上传组件，当用户点击“点击试穿”，将后端返回的合成图片进行展示。

为什么这样问呢？

  • 明确目标为 【ai试衣页面】
  • 指定要求为 【三个上传组件】
  • 限定格式为 【使用element-plus】

image.png

页面效果：

image.png

观察效果，优化一下。

问：图片不要求上传大小，图片上传成功后，将返回的图片进行展示

image.png

后端上传接口

问：帮我实现TXFileUtil工具类，用于使用腾讯COS上传文件。

image.png 将我们自己的secretId和secretKey放到豆包给的代码的相应位置中，并把工具类注册到Spring中，在Controller中调用。

@RestController
@RequestMapping("/common")
public class CommonController {

    @Resource
    private TXFileUtil txFileUtil;

    /**
     * 文件上传
     */
    @PostMapping("/upload")
    public AjaxResult upload(@RequestParam("file")MultipartFile file) throws IOException {
        String url = txFileUtil.upload(file, "aiFitting");//调用腾讯上传
        return AjaxResult.success(url);
    }
}

将前el-upload组件中上传文件接口改为我们刚刚写好的地址，就完成了一个上传文件到腾讯云的操作：

GIF 2024-11-17 20-51-13.gif

对接AI试衣模型

根据文档给我们的接口的调用实例，直接给到豆包让他帮我们生成远程调用的代码

问：写一个方法调用下面这个远程接口,input中的参数通过接口传递 curl --location 'dashscope.aliyuncs.com/api/v1/serv…'
--header 'X-DashScope-Async: enable'
--header 'Authorization: Bearer <YOUR_API_KEY>'
--header 'Content-Type: application/json'
--data '{ "model": "aitryon", "input": { "top_garment_url": "http://xxx/1.jpg", "bottom_garment_url": "http://xxx/2.jpg", "person_image_url": "http://xxx/3.jpg" }, "parameters": { "resolution": -1, "restore_face": true } }'

将生成代码中参数换成我们自己的

image.png 调用之后，发现这是一个异步接口，图片的生成需要一定的时间，因此返回给了我们一个task_id，还需要用这个task_id调用另一个接口查看图片生成状态。
查看文档知道，调用状态查看接口，当返回回来的task_status为“SUCCESS”时表示图片生成成功，会返回给我们合成的图片地址。

image.png 同样，把这个接口示例给到豆包，让他帮我们生成调用方法。

image.png 把需要的参数换成我们自己的，再自己改下前端，当调用合成图片接口成功后，再定时调用查看状态接口，当图片生成完毕后结束调用并展示合成的图片。

// 实现AI试衣的逻辑
// 这里需要使用图像处理库或API来处理上传的图片
// 并生成试衣效果的图片
// 假设合成图片的URL为syntheticImageUrl
request({
  url: "/common/aiFitting?personImageUrl="+imageUrl1.value+"&topGarmentUrl="+imageUrl2.value+"&bottomGarmentUrl="+imageUrl3.value,
  method: "get",
}).then(result => {
  let taskObj = JSON.parse(result.msg);
  let interval = setInterval(()=>{
    request({
      url: "/common/getStatus?taskId="+taskObj.output.task_id,
      method: "get",
    }).then(result => {
      let statusObj = JSON.parse(result.data.body);
      console.log(statusObj.output.task_status)
      if(statusObj.output.task_status == "SUCCEEDED"){
        clearInterval(interval);
        syntheticImage.value = statusObj.output.image_url;
      }
    })
  },2000)
})

最终效果：

GIF 2024-11-17 22-55-37.gif

结尾

通过上述代码，我们实现了一个相对完整的 AI 试衣功能，在实际项目应用中，我们还可以根据具体需求进一步完善功能，比如添加图片上传进度提示、优化页面布局与交互设计、对不同的错误类型进行更细致的提示等。最后，希望这个借助豆包 MarsCode 辅助开发的 AI 试衣功能能够在实际使用中为用户带来便捷、有趣的体验，也期待后续继续利用好这样强大的工具，探索开发出更多创新实用的功能。

完整代码

前端（vue3）：gitee.com/HT3902LY/wr…

后端（Java）：gitee.com/HT3902LY/wr…

avatar
文章
阅读
粉丝