搜尋
首頁科技週邊人工智慧如何兩天時間上線一款AI應用?

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

大家好,我卡頌。

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

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

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

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

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

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

應用程式架構

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

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

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

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

  1. #前端(Next.js)
  2. 圖片儲存服務
  3. Next.js服務端
  4. AI API

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

##完整工作流程如下:

    使用者在前端上傳舊照片
  1. 前端呼叫圖片儲存服務,返回圖片儲存位址給前端
  2. #前端將圖片儲存位址傳送給後端
  3. 後端呼叫AI API處理圖片
  4. AI API傳回處理後的圖片給後端,後端回傳給前端
  5. 前端展示處理後的效果
前端部分

整個前後端的實作使用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做介面呼叫頻率限制。
Redis使用@upstash-redis[7],這是一款基於HTTP的Redis客戶端。在線上建立Redis資料庫後,我們可以在服務端透過HTTP請求的方式呼叫它。

    用replicate提供的swinir模型處理圖片。
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));
}
}

总结

可以发现,所有基础服务均有现成产品可供使用,这极大加快了前端的开发效率,降低了开发成本。

作者运行这个应用的成本是多少呢?其中:

  • 如何兩天時間上線一款AI應用?存储使用的是upload.io[8]提供的存储服务。这里作者使用的是35刀/月的基础付费版本,每月有50GB的上传空间。
  • Redis云服务考虑到仅用来做接口调用频率限制,使用免费版就好。
  • 整个应用使用Vercel部署,Vercel Pro每月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/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

以上是如何兩天時間上線一款AI應用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:51CTO.COM。如有侵權,請聯絡admin@php.cn刪除
一個提示可以繞過每個主要LLM的保障措施一個提示可以繞過每個主要LLM的保障措施Apr 25, 2025 am 11:16 AM

隱藏者的開創性研究暴露了領先的大語言模型(LLM)的關鍵脆弱性。 他們的發現揭示了一種普遍的旁路技術,稱為“政策木偶”,能夠規避幾乎所有主要LLMS

5個錯誤,大多數企業今年將犯有可持續性5個錯誤,大多數企業今年將犯有可持續性Apr 25, 2025 am 11:15 AM

對環境責任和減少廢物的推動正在從根本上改變企業的運作方式。 這種轉變會影響產品開發,製造過程,客戶關係,合作夥伴選擇以及採用新的

H20芯片禁令震撼中國人工智能公司,但長期以來一直在為影響H20芯片禁令震撼中國人工智能公司,但長期以來一直在為影響Apr 25, 2025 am 11:12 AM

最近對先進AI硬件的限制突出了AI優勢的地緣政治競爭不斷升級,從而揭示了中國對外國半導體技術的依賴。 2024年,中國進口了價值3850億美元的半導體

如果Openai購買Chrome,AI可能會統治瀏覽器戰爭如果Openai購買Chrome,AI可能會統治瀏覽器戰爭Apr 25, 2025 am 11:11 AM

從Google的Chrome剝奪了潛在的剝離,引發了科技行業中的激烈辯論。 OpenAI收購領先的瀏覽器,擁有65%的全球市場份額的前景提出了有關TH的未來的重大疑問

AI如何解決零售媒體的痛苦AI如何解決零售媒體的痛苦Apr 25, 2025 am 11:10 AM

儘管總體廣告增長超過了零售媒體的增長,但仍在放緩。 這個成熟階段提出了挑戰,包括生態系統破碎,成本上升,測量問題和整合複雜性。 但是,人工智能

'AI是我們,比我們更多''AI是我們,比我們更多'Apr 25, 2025 am 11:09 AM

在一系列閃爍和惰性屏幕中,一個古老的無線電裂縫帶有靜態的裂紋。這堆易於破壞穩定的電子產品構成了“電子廢物之地”的核心,這是沉浸式展覽中的六個裝置之一,&qu&qu

Google Cloud在下一個2025年對基礎架構變得更加認真Google Cloud在下一個2025年對基礎架構變得更加認真Apr 25, 2025 am 11:08 AM

Google Cloud的下一個2025:關注基礎架構,連通性和AI Google Cloud的下一個2025會議展示了許多進步,太多了,無法在此處詳細介紹。 有關特定公告的深入分析,請參閱我的文章

IR的秘密支持者透露,Arcana的550萬美元的AI電影管道說話,Arcana的AI Meme,Ai Meme的550萬美元。IR的秘密支持者透露,Arcana的550萬美元的AI電影管道說話,Arcana的AI Meme,Ai Meme的550萬美元。Apr 25, 2025 am 11:07 AM

本週在AI和XR中:一波AI驅動的創造力正在通過從音樂發電到電影製作的媒體和娛樂中席捲。 讓我們潛入頭條新聞。 AI生成的內容的增長影響:技術顧問Shelly Palme

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中