如何兩天時間上線一款AI應用？-人工智慧-PHP中文網

如何兩天時間上線一款AI應用？

WBOY

發布： 2023-04-11 18:25:03

轉載

1800 人瀏覽過

如何兩天時間上線一款AI應用？

大家好，我卡頌。

最近幾個月，AI相關新聞不斷搶佔大家的注意力。逞著這波熱度，各路開發者都投入到AI應用的開發。

例如，15歲的開發者saviomartin7[1]開發的IconifyAI[2]可以根據文字描述產生應用Logo。網頁上線5天就賺到接近1.5k刀了。

如何兩天時間上線一款AI應用？

這波機會對前端同學有很大利好，因為各種基礎服務（例如各種儲存服務、AI服務、部署）都有成熟的解決方案可以直接使用，前端同學只需專注業務邏輯的實現即可。

本文讓我們來看看一位國外老哥是如何用一個週末時間開發一款AI應用。該應用上線僅40天，就獲得了20wUV。

如何兩天時間上線一款AI應用？

應用程式架構

首先介紹下這款應用，應用名為restorephotos[3]，用戶上傳模糊的舊照片後，使用AI會修復照片，並返回更清晰的版本。應用程式的完整程式碼已開源。

應用開源程式碼位址[4]

如何兩天時間上線一款AI應用？

#整個應用程式的架構分為4部分：

#前端（Next.js）
圖片儲存服務
Next.js服務端
AI API

如何兩天時間上線一款AI應用？

##完整工作流程如下：

前端呼叫圖片儲存服務，返回圖片儲存位址給前端
#前端將圖片儲存位址傳送給後端
後端呼叫AI API處理圖片
AI API傳回處理後的圖片給後端，後端回傳給前端
前端展示處理後的效果

前端部分

整個前後端的實作使用Next.js，前端主要包括兩個部分：

AI處理後的圖片展示

所有主要功能均使用開源程式庫實作。其中，圖片上傳功能使用react-uploader[5]實作：

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...如何兩天時間上線一款AI應用？上传成功后的逻辑
 }}
/>;

登入後複製

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

如何兩天時間上線一款AI應用？

PS：這裡用的是我祖父的老照片๑¯◡¯๑

#後端部分

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

Redis使用@upstash-redis[7]，這是一款基於HTTP的Redis客戶端。在線上建立Redis資料庫後，我們可以在服務端透過HTTP請求的方式呼叫它。

replicate是機器學習的雲端服務商，我們可以根據業務需求選擇不同機器學習模型，例如：

如何兩天時間上線一款AI應用？

#在Next.js服務端，我們透過HTTP的形式呼叫模型API：

// 我们上传的如何兩天時間上線一款AI應用？地址
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 }
 })
});

登入後複製

值得注意的是，模型计算需要时间，所以在服务端，我们每秒轮询一次结果，如果模型返回处理后的如何兩天時間上線一款AI應用？，我们就将如何兩天時間上線一款AI應用？返回给前端：

// 保存模型处理后的结果
let restoredImage: string | null = null;
while (!restoredImage) {
// 请求模型API
let finalResponse = await fetch(endpointUrl, {
method: "GET",
// ...省略代码
});
let jsonFinalResponse = await finalResponse.json();

if (jsonFinalResponse.status === "succeeded") {
// 模型返回如何兩天時間上線一款AI應用？成功
restoredImage = jsonFinalResponse.output;
} else if (jsonFinalResponse.status === "failed") {
// 模型返回如何兩天時間上線一款AI應用？失败
break;
} else {
// 模型还未返回如何兩天時間上線一款AI應用？，1s后轮询
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}

登入後複製