和妹子逛完街，写了个 AI 智能穿搭系统背景 故事起源在和一个妹子去逛衣服店的时候，试来试去的难以取舍，最终消耗了我一个

想直接看成品演示的可以直接划到文章底部

背景

故事起源在和一个妹子去逛衣服店的时候，试来试去的难以取舍，最终消耗了我一个小时。虽然这个时间不多， 但这个时间黑神话悟空足矣让我打完虎先锋

回家我就灵光一闪，是不是可以搞一个AI智能穿搭，只需要上传自己的照片和对应的衣服图片就能实现在线试衣服呢？

说干就干，我就开始构思方案，画原型。 俗话说万事开头难，事实上这个构思到动工就耗费了我一个礼拜，因为一直在构思怎么样的交互场景会让用户使用起来比较丝滑，并且容易上手。

目前实现的功能有：

• ✅ 用户信息展示
• ✅ AI 生成穿搭
• ✅ 风格大厅

待完成：

• 私人衣柜
• AI 换鞋

经过

1. 画产品原型

起初第一个版本的产品原型由于是自己构思没有任何参考，直接上手撸代码的，想到啥就画啥，所以布局非常传统，配色也非常普通（蚂蚁蓝），所以感觉没有太多的时尚气息（个人觉得丑的一逼，不像是互联网的产物）。因为重构掉了，老的现在没有了，我懒就不重新找回来截图了，直接画个当时的样子，大概长成下面这样：

丑的我忍不了，我就去设计师专门用的网站参(chao)考(xi)了一下，找来找去，终于有了下面的最终版原型图

2. 配色选择

大家知道，所有的UI设计，都离不开主题色的选择，比如：淘宝橙、飞猪橙、果粒橙...，目的一方面是为了打造品牌形象，另一方面也是为了提升品牌辨识度，让你看到这个颜色就会想起它

那我必须也得跟上时代的潮流，选了 #c1a57b 这款低调而又不失奢华的色值作为主题色，英雄不问出处，问就是借鉴。

3. 技术选型

我对技术的定义是：技术永远服务于产品，能高效全面帮助我开发出一款应用，并且能保证后续的稳定性和可维护性，啥技术我都行。当然如果这门技术我优先会从我属性的板块去找。

经过各种权衡和比较，最后敲定下来了技术选型方案：

• 前端：taro （为了后续可能会有小程序端做准备）
• 后端：koajs （实际使用的是midway，基于koajs，主要是比较喜欢koa的轻量化架构）
• 数据库：mongodb （别问，问就是简单易上手）
• 代码仓库：gitea
• CI：gitea-runner
• 部署工具：pm2
• 静态文件托管：阿里云OSS

4. 撸代码

这里我只挑一些个人感觉相对需要注意的地方展开讲讲

4.1 图片转存

由于我生成图片的API图片链接会在一天之后失效，所以我需要在调用任务详情的时候，把这个文件转存到我自己的oss服务器，这里我总结出来的思路是：【1. 保存在本地暂存文件夹】-【2. 调用node流式读取接口】-【3. 保存到oss】-【4. 返回替换原来的链接】

具体代码参考如下：

const tempDir = path.join(tmpdir(), 'temp-upload-files')
const link = url.parse(src);
const fileName = path.basename(link.pathname)
const localPath = path.join(tempDir, `/${fileName}`); // 生成保存路径
let request
if (link.protocol === 'https:') {
    request = https
} else {
    request = http
}
request.get(src, async (response) => {
    const fileStream = await fs.createWriteStream(localPath);  // 保存到本地暂存路径
    
    await response.pipe(fileStream);
    fileStream.on("error", (error) => {
      console.error("保存图片出错：", error);
      reject(error)
    });
    fileStream.on('finish', async res => {
      console.log('暂存完成，开始上传：', res)
      let result = await this.ossService.put(`/${params.saveDir || 'tmp'}/${fileName}`, localPath);
      if (!result) return
      resolve(result)
    });
});

这里的request因为我不想引入其它的库所以这样写，如果有更好的方案，可以在评论区告知一下。

这里需要注意的一个地方是，上传的这个 localPath 最好是自己做一下处理，我这边没有处理，因为可能两个用户同时上传，他们的文件名称相同的时候，可能会出现覆盖的情况，包括后面的oss保存也是。

4.2 文件流式上传中间件

因为默认的接口处理是不处理流式调用的，所以需要自己创建一个中间件来拦截处理一下，下面给出我的参考代码：

class SSE {
    ctx: Context
    constructor(ctx: Context) {
        ctx.status = 200;
        ctx.set('Content-Type', 'text/event-stream');
        ctx.set('Cache-Control', 'no-cache');
        ctx.set('Connection', 'keep-alive');
        ctx.res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive',
            'Transfer-Encoding': 'chunked'
        });
        ctx.res.flushHeaders();
        this.ctx = ctx;
    }
    send(data: any) {
        // string
        if (typeof data === "string") {
            this.push(data);
        } else if (data.id) {
            this.push(`id: ${data.id}\n`);
        } else if (data.event) {
            this.push(`event: ${data.event}\n`);
        } else {
          const text = JSON.stringify(data)
          this.push(`data: ${text}\n\n`);
        }
    }
    push(data: any) {
        this.ctx.res.write(data);
        this.ctx.res.flushHeaders();
    }
    close() {
        this.ctx.res.end();
    }
}

@Middleware()
export class StreamMiddleware implements IMiddleware<Context, NextFunction> {
  // ?------------ 中间件处理逻辑 -----------------
    resolve() {
        return async (ctx: Context, next: NextFunction) => {

            if (ctx.res.headersSent) {
                if (!ctx.sse) {
                    console.error('[sse]: response headers already sent, unable to create sse stream');
                }
                return await next();
            }

            const sse = new SSE(ctx);
            ctx.sse = sse;
            await next();

            if (!ctx.body) {
                ctx.body = ctx.sse;
            } else {
                ctx.sse.send(ctx.body);
                ctx.body = sse;
            }
        };
    }

    public match(ctx: Context): boolean {
      // ?------------ 不带 stream 前缀默认都不是流式接口 -----------------
      if (ctx.path.indexOf('stream') < 0) return false
    }

    static getName(): string {
      return 'stream';
    }
}

4.3 mongodb 数据库的权限

这里尽量不要使用root权限的数据库角色，可以创建一个只有当前数据库权限的角色，具体可以网上找相关文档，怎么为某个collection创建账户。

实机演示

1. 提交素材，创建任务

2. 获取生成图片

3. 展示大厅（待完善）

结语

当然现在目前这个还是内测版本，功能还不够健全，还有很多地方需要打磨，包括用户信息页面的展示是否合理,UI的排版,数据库表的设计等等

通过观察生活用现有的技术创造一些价值，对我来说就是一种幸福且有意义的事儿。

如果想要体验的可以后台私信我。如果你也有很棒的想法想交流一下，也可以私我。

我是dev，下期见（太懒了我，更新频率太低）

个人博客

灵感中心