关于前端:实现前端工程师的第一个AI应用

46次阅读

共计 2015 个字符,预计需要花费 6 分钟才能阅读完成。

大家好,我卡颂。

最近几个月,AI相干新闻一直抢占大家的注意力。逞着这波热度,各路开发者都投入到 AI 利用的开发。

比方,15 岁的开发者 saviomartin7 开发的 IconifyAI 能够依据文字描述生成利用Logo。网页上线 5 天就赚到了靠近 1.5k 刀。

这波时机对前端同学有很大利好,因为各种根底服务(比方各种存储服务、AI服务、部署)都有成熟的解决方案能够间接应用,前端同学只需专一业务逻辑的实现即可。

本文让咱们看看一位国外老哥是如何用一个周末工夫开发一款 AI 利用。该利用上线仅 40 天,就取得了 20wUV

欢送退出人类高质量前端交换群,带飞

利用架构

首先介绍下这款利用,利用名叫 restorephotos,用户上传含糊的老照片后,AI会修复照片,并返回更清晰的版本。利用的残缺代码已开源。

利用开源代码地址

整个利用的架构分为 4 局部:

  1. 前端(Next.js
  2. 图片存储服务
  3. Next.js服务端
  4. AI API

残缺工作流程如下:

  1. 用户在前端上传老照片
  2. 前端调用图片存储服务,返回图片存储地址给前端
  3. 前端将图片存储地址发送给后端
  4. 后端调用 AI API 解决图片
  5. AI API返回解决后的图片给后端,后端返回给前端
  6. 前端展现解决后的成果

前端局部

整个前后端的实现应用Next.js,前端次要包含两局部:

  • 图片上传
  • AI解决后的图片展现

所有次要性能均应用开源库实现。其中,图片上传性能应用 react-uploader 实现:

<UploadDropzone
    uploader={uploader}
    options={options}
  width="670px"
    height="250px"
    onUpdate={(file) => {// ... 图片上传胜利后的逻辑}}
/>;

解决后的图片展现成果应用 react-compare-slider:

PS:这里用的是我曾祖父的老照片 ๑¯◡¯๑

后端局部

后端外围逻辑包含两局部:

  1. Redis 做接口调用频率限度

Redis应用 @upstash-redis,这是一款基于 HTTPRedis客户端。在线创立 Redis 数据库后,咱们能够在服务端通过 HTTP 申请的形式调用它。

  1. replicate 提供的 swinir 模型解决图片

replicate是一家机器学习的云服务商,咱们能够依据业务须要抉择不同机器学习模型,比方:

  • 解决图片清晰度
  • 破碎照片修复
  • 文字转图片

Next.js 服务端,咱们通过 HTTP 的模式调用模型API

// 咱们上传的图片地址
const imageUrl = req.body.imageUrl;
// 申请模型接口
const startResponse = await fetch('https://api.replicate.com/v1/predictions', {
    method: 'POST',
    // ... 省略代码
    body: JSON.stringify({
    // 咱们须要的模型对应的版本
        version: '9283608cc6b7be6b65a8e44983db012355fde4132009bf99d976b2f0896856a3',
        input: {img: imageUrl, version: 'v1.4', scale: 2}
    })
});

值得注意的是,模型计算须要工夫,所以在服务端,咱们每秒轮询一次后果,如果模型返回解决后的图片,咱们就将图片返回给前端:

// 保留模型解决后的后果
let restoredImage: string | null = null;
while (!restoredImage) {
  // 申请模型 API
  let finalResponse = await fetch(endpointUrl, {
    method: "GET",
    // ... 省略代码
  });
  let jsonFinalResponse = await finalResponse.json();
  
  if (jsonFinalResponse.status === "succeeded") {
    // 模型返回图片胜利
    restoredImage = jsonFinalResponse.output;
  } else if (jsonFinalResponse.status === "failed") {
    // 模型返回图片失败
    break;
  } else {
    // 模型还未返回图片,1s 后轮询
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
}

总结

能够发现,所有根底服务均有现成产品可供使用,这极大放慢了前端的开发效率,升高了开发成本。

作者运行这个利用的老本是多少呢?其中:

  • 图片存储应用的是 upload.io 提供的存储服务。这里作者应用的是 35 刀 / 月的根底付费版本,每月有 50GB 的上传空间
  • Redis云服务思考到仅用来做接口调用频率限度,应用免费版就好
  • 整个利用应用 Vercel 部署,Vercel Pro每月 20 刀
  • 20wUV的模型 API 调用费用,大略是 900 刀

对于想构建本人的 AI 利用的敌人,能够参考本文的实现与老本,口头起来吧。

正文完
 0