大家好，我是Kason。近几个月来，与人工智能相关的新闻一直吸引着大家的注意力。伴随着这股热潮，各行各业的开发者都在投入AI应用的开发。例如，15岁的开发者saviomartin7[1]开发的IconifyAI[2]可以根据文本描述生成应用程序标识。该网站在上线5天内赚取了近1500。这波机会对前端同学来说是大有裨益的，因为各种基础服务（比如各种存储服务、AI服务、部署）都有成熟的解决方案可以直接拿来用，前端同学只需要专注于业务逻辑的实现。这篇文章，我们就来看看国外小哥是如何用一个周末的时间开发出一款AI应用的。申请上线仅40天，就获得了20wUV。应用架构首先介绍一下这个应用，这个应用叫做restorephotos[3]，当用户上传模糊的旧照片后，AI会对照片进行修复，返回一个更清晰的版本。该应用程序的完整代码是开源的。应用开源代码地址[4]整个应用架构分为4个部分：前端（Next.js）图片存储服务Next.js服务端AIAPI完整工作流程如下：用户上传老照片于前端并在前端调用图片存储服务，返回图片存储地址给前端前端将图片存储地址发送给后端后端调用AIAPI处理图片AIAPI将处理后的图片返回给后端，后端将处理后的图片返回给前端使用Next.js，前端主要由两部分组成：上传图片和展示AI处理后的图片。所有主要功能均使用开源库实现。其中图片上传功能是使用react-uploader[5]实现的：{//...图片上传成功后的逻辑}}/>;处理后的图片展示效果使用了react-compare-slider[6]：PS：这里是我爷爷的老照片?ˉ?ˉ?后端核心逻辑后端部分包括两部分：使用Redis作为接口通话频率限制。Redis使用@upstash-redis[7]，一个基于HTTP的Redis客户端。在线创建好Redis数据库后，我们就可以在服务器端通过HTTP请求来调用它了。使用replicate提供的swinir模型对图像进行处理。Replicate是一家机器学习云服务提供商。我们可以根据业务需求选择不同的机器学习模型，比如：处理图像清晰度、破损照片、修复文本和转换图像……在Next.js服务器上，我们通过HTTPAPI调用模型：//地址我们上传的图片constimageUrl=req.body.imageUrl;//请求模型接口conststartResponse=awaitfetch('https://api.replicate.com/v1/predictions',{method:'POST',//...省略代码body:JSON.stringify({//我们需要的型号对应的版本version:'9283608cc6b7be6b65a8e44983db012355fde4132009bf99d976b2f0896856a3',input:{img:imageUrl,version:'v1.4',scale:2}})});值得注意的是，模型的计算是需要时间的，所以在服务器端，我们每秒轮询一次结果，如果模型返回处理后的图片，我们将图片返回给前端：//保存处理后的结果模型让restoredImage:string|null=null;while(!restoredImage){//请求模型APIletfinalResponse=awaitfetch(endpointUrl,{method:"GET",//...省略代码});让jsonFinalResponse=awaitfinalResponse.json();if(jsonFinalResponse.status==="succeeded"){//模型返回图片成功restoredImage=jsonFinalResponse.output;}elseif(jsonFinalResponse.status==="failed"){//模型返回图片失败break;}else{//模型还没有返回图片，1s后轮询awaitnewP浪漫（（解决）=>setTimeout（解决，1000））；}}综上所述，可以发现所有的基础服务都有现成的产品可用，大大加快了前端开发效率，降低了开发成本。作者运行这个应用需要多少钱？其中：图片存储使用upload.io[8]提供的存储服务。笔者这里使用的是每月35刀的基础付费版，每月有50GB的上传空间。考虑到Redis云服务只是用来限制接口调用频率，还是用免费版比较好。整个应用程序使用Vercel部署，VercelPro每月20。20wUV的模型API调用费900刀左右。想要构建自己的AI应用的朋友，可以参考本文的实现和成本，马上行动。参考文献[1]saviomartin7:https://twitter.com/saviomartin7[2]IconifyAI:http://IconifyAI.com[3]restorephotos:https://www.restorephotos.io/[4]应用开源代码地址：https://github.com/Nultlope/restorePhotos[5]反应上传器：https://www.npmjs.com/package/react-uploader[6]反应比较滑块：https://www.npmjs.com/package/react-compare-slider[7]@upstash-redis：https://docs.upstash.com/redis/overall/pricing[8]upload.io：https://upload.io/pricing
