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