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

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 将我们自己的secretIdsecretKey放到豆包给的代码的相应位置中,并把工具类注册到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…