51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 559|回复: 1
打印 上一主题 下一主题

[原创] 如果在最短的时间上线一款AI应用?

[复制链接]
  • TA的每日心情
    无聊
    昨天 09:05
  • 签到天数: 1050 天

    连续签到: 1 天

    [LV.10]测试总司令

    跳转到指定楼层
    1#
    发表于 2023-2-22 13:35:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    最近几个月,AI相关新闻不断抢占大家的注意力。逞着这波热度,各路开发者都投入到AI应用的开发。
      比如,15岁的开发者saviomartin7开发的IconifyAI[2]可以根据文字描述生成应用??Logo。网页上线5天就赚到了接近1.5k刀。

      这波机遇对前端同学有很大利好,因为各种基础服务(比如各种存储服务、AI服务、部署)都有成熟的解决方案可以直接使用,前端同学只需专注业务逻辑的实现即可。
      本文让我们看看一位国外老哥是如何用一个周末时间开发一款AI应用。该应用上线仅40天,就获得了20wUV。

      应用架构
      首先介绍下这款应用,应用名叫restorephotos[3],用户上传模糊的老照片后,??AI??会修复照片,并返回更清晰的版本。应用的完整代码已开源。

      整个应用的架构分为4部分:
      ·前端(Next.js)
      · 图片存储服务
      · Next.js服务端
      · AI API

      完整工作流程如下:
      · 用户在前端上传老照片
      · 前端调用图片存储服务,返回图片存储地址给前端
      · 前端将图片存储地址发送给后端
      · 后端调用AI API处理图片
      · AI API返回处理后的图片给后端,后端返回给前端
      · 前端展示处理后的效果
      前端部分
      整个前后端的实现使用Next.js,前端主要包括两部分:
      · 图片上传
      · AI处理后的图片展示
      所有主要功能均使用开源库实现。其中,图片上传功能使用react-uploader[5]实现:
      <UploadDropzone
       uploader={uploader}
       options={options}
        width="670px"
       height="250px"
       onUpdate={(file) => {
         // ...图片上传成功后的逻辑
       }}
      />;


      处理后的图片展示效果使用react-compare-slider[6]:

      PS:这里用的是我祖父的老照片
      后端部分
      1. 后端核心逻辑包括两部分:
      用Redis做接口调用频率限制。
      Redis使用@upstash-redis,这是一款基于HTTP的Redis?客户端。在线创建Redis数据库后,我们可以在服务端通过HTTP请求的方式调用它。
      2. 用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[8]提供的存储服务。这里作者使用的是35刀/月的基础付费版本,每月有50GB的上传空间。
      · Redis云服务考虑到仅用来做接口调用频率限制,使用免费版就好。
      · 整个应用使用Vercel部署,Vercel Pro每月20刀。
      · 20wUV的模型API调用费用,大概是900刀。
      对于想构建自己的AI应用的朋友,可以参考本文的实现与成本,行动起来吧。

    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

  • TA的每日心情
    开心
    1 小时前
  • 签到天数: 651 天

    连续签到: 19 天

    [LV.9]测试副司令

    2#
    发表于 2023-2-23 15:07:41 | 只看该作者
    好工具,以后p图更方便
    回复 支持 反对

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-22 09:58 , Processed in 0.066765 second(s), 22 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表