大家好，我卡頌。

最近幾個月，??AI???相關(guān)新聞不斷搶占大家的注意力。逞著這波熱度，各路開發(fā)者都投入到??AI??應(yīng)用的開發(fā)。

比如，15歲的開發(fā)者saviomartin7[1]開發(fā)的IconifyAI[2]可以根據(jù)文字描述生成應(yīng)用??Logo??。網(wǎng)頁上線5天就賺到了接近1.5k刀。

這波機遇對前端同學(xué)有很大利好，因為各種基礎(chǔ)服務(wù)（比如各種存儲服務(wù)、AI服務(wù)、部署）都有成熟的解決方案可以直接使用，前端同學(xué)只需專注業(yè)務(wù)邏輯的實現(xiàn)即可。

本文讓我們看看一位國外老哥是如何用一個周末時間開發(fā)一款A(yù)I應(yīng)用。該應(yīng)用上線僅40天，就獲得了20wUV。

應(yīng)用架構(gòu)

首先介紹下這款應(yīng)用，應(yīng)用名叫restorephotos[3]，用戶上傳模糊的老照片后，??AI??會修復(fù)照片，并返回更清晰的版本。應(yīng)用的完整代碼已開源。

應(yīng)用開源代碼地址[4]?

整個應(yīng)用的架構(gòu)分為4部分：

1. 前端（Next.js）
2. 圖片存儲服務(wù)
3. Next.js服務(wù)端
4. AI API

完整工作流程如下：

1. 用戶在前端上傳老照片
2. 前端調(diào)用圖片存儲服務(wù)，返回圖片存儲地址給前端
3. 前端將圖片存儲地址發(fā)送給后端
4. 后端調(diào)用AI API處理圖片
5. AI API返回處理后的圖片給后端，后端返回給前端
6. 前端展示處理后的效果

前端部分

整個前后端的實現(xiàn)使用Next.js，前端主要包括兩部分：

• 圖片上傳
• AI處理后的圖片展示

所有主要功能均使用開源庫實現(xiàn)。其中，圖片上傳功能使用react-uploader[5]實現(xiàn)：

<UploadDropzone
 uploader={uploader}
 options={options}
  width="670px"
 height="250px"
 onUpdate={(file) => {
   // ...圖片上傳成功后的邏輯
 }}
/>;

處理后的圖片展示效果使用react-compare-slider[6]：

PS：這里用的是我祖父的老照片 ?ˉ?ˉ?

后端部分

后端核心邏輯包括兩部分：

1. 用Redis做接口調(diào)用頻率限制。

Redis?使用@upstash-redis[7]，這是一款基于HTTP?的Redis?客戶端。在線創(chuàng)建Redis?數(shù)據(jù)庫后，我們可以在服務(wù)端通過HTTP請求的方式調(diào)用它。

2. 用replicate提供的swinir模型處理圖片。

replicate是一家機器學(xué)習(xí)的云服務(wù)商，我們可以根據(jù)業(yè)務(wù)需要選擇不同機器學(xué)習(xí)模型，比如：

• 處理圖片清晰度
• 破碎照片修復(fù)
• 文字轉(zhuǎn)圖片
• ...

在Next.js服務(wù)端，我們通過HTTP的形式調(diào)用模型API：

// 我們上傳的圖片地址
const imageUrl = req.body.imageUrl;
// 請求模型接口
const startResponse = await fetch('https://api.replicate.com/v1/predictions', {
 method: 'POST',
 // ...省略代碼
 body: JSON.stringify({
    // 我們需要的模型對應(yīng)的版本
  version: '9283608cc6b7be6b65a8e44983db012355fde4132009bf99d976b2f0896856a3',
  input: { img: imageUrl, version: 'v1.4', scale: 2 }
 })
});

值得注意的是，模型計算需要時間，所以在服務(wù)端，我們每秒輪詢一次結(jié)果，如果模型返回處理后的圖片，我們就將圖片返回給前端：

// 保存模型處理后的結(jié)果
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));
  }
}

總結(jié)

可以發(fā)現(xiàn)，所有基礎(chǔ)服務(wù)均有現(xiàn)成產(chǎn)品可供使用，這極大加快了前端的開發(fā)效率，降低了開發(fā)成本。

作者運行這個應(yīng)用的成本是多少呢？其中：

• 圖片存儲使用的是upload.io[8]提供的存儲服務(wù)。這里作者使用的是35刀/月的基礎(chǔ)付費版本，每月有50GB的上傳空間。
• Redis云服務(wù)考慮到僅用來做接口調(diào)用頻率限制，使用免費版就好。
• 整個應(yīng)用使用Vercel部署，Vercel Pro每月20刀。
• 20wUV的模型API調(diào)用費用，大概是900刀。

對于想構(gòu)建自己的AI應(yīng)用的朋友，可以參考本文的實現(xiàn)與成本，行動起來吧。

參考資料

[1]saviomartin7:https://twitter.com/saviomartin7

[2]IconifyAI:http://IconifyAI.com

[3]restorephotos:https://www.restorephotos.io/

[4]應(yīng)用開源代碼地址:https://github.com/Nutlope/restorePhotos

[5]react-uploader:https://www.npmjs.com/package/react-uploader

[6]react-compare-slider: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