Wie starte ich eine KI-Anwendung in zwei Tagen?

Hallo zusammen, ich bin Casson.

In den letzten Monaten ​​KI​​ Entwicklung von Anwendungen. ​AI​​​相关新闻不断抢占大家的注意力。逞着这波热度，各路开发者都投入到​​AI​​应用的开发。

比如，15岁的开发者saviomartin7[1]开发的IconifyAI[2]可以根据文字描述生成应用​​Logo​​。网页上线5天就赚到了接近1.5k刀。

这波机遇对前端同学有很大利好，因为各种基础服务（比如各种存储服务、AI服务、部署）都有成熟的解决方案可以直接使用，前端同学只需专注业务逻辑的实现即可。

本文让我们看看一位国外老哥是如何用一个周末时间开发一款AI应用。该应用上线仅40天，就获得了20wUV。

应用架构

首先介绍下这款应用，应用名叫restorephotos[3]，用户上传模糊的老照片后，​​AI​

Zum Beispiel kann IconifyAI[2], entwickelt vom 15-jährigen Entwickler saviomartin7[1], Anwendungen basierend auf Textbeschreibungen generieren​Logo​​ Die Website verdiente innerhalb von fünf Tagen nach ihrer Online-Veröffentlichung fast 1,5.000 Dollar.

Diese Welle an Möglichkeiten ist für Front-End-Studenten von großem Nutzen, da verschiedene Basisdienste (z. B. verschiedene Speicherdienste, KI-Dienste, Bereitstellung) über ausgereifte Lösungen verfügen, die genutzt werden können Direkt müssen sich Front-End-Studenten nur auf die Implementierung der Geschäftslogik konzentrieren.

In diesem Artikel werfen wir einen Blick darauf, wie ein Ausländer ein Wochenende damit verbracht hat, eine KI-Anwendung zu entwickeln. Nur 40 Tage nach dem Start der Anwendung erhielt sie 20 WUV.

Anwendungsarchitektur

Stellen wir zunächst diese Anwendung vor. Die Anwendung heißt „restorephotos[3]. Nachdem Benutzer verschwommene alte Fotos hochgeladen haben,​​AI​ ​repariert Ihr Foto und bringt es in eine klarere Version zurück. Der vollständige Code der Anwendung ist Open Source.
2. Anwendungs-Open-Source-Code-Adresse [4]​

Die Architektur der gesamten Anwendung ist in 4 Teile unterteilt:

Front-End (Next.js)

Wie starte ich eine KI-Anwendung in zwei Tagen?speicherdienst

1. Next. js-Server
2. AI API
5. Der vollständige Workflow ist wie folgt:
6. Benutzer laden alte Fotos auf das Frontend hoch

Das Frontend ruft den Wie starte ich eine KI-Anwendung in zwei Tagen?speicherdienst auf und gibt die Wie starte ich eine KI-Anwendung in zwei Tagen?speicheradresse an das Frontend zurück

Das Front-End sendet die Wie starte ich eine KI-Anwendung in zwei Tagen?speicheradresse an das Back-End.

Das Back-End ruft die AI-API auf, um Wie starte ich eine KI-Anwendung in zwei Tagen?er zu verarbeiten Wirkung
• Front-End-Teil

Das gesamte Front-End und Back-End werden mit Next.js implementiert. Das Front-End umfasst hauptsächlich zwei Teile:

Wie starte ich eine KI-Anwendung in zwei Tagen?-Upload

AI-verarbeitete Wie starte ich eine KI-Anwendung in zwei Tagen?anzeige

Alle Hauptfunktionen werden mithilfe von Open-Source-Bibliotheken implementiert. Unter anderem wird die Wie starte ich eine KI-Anwendung in zwei Tagen?-Upload-Funktion mit React-Uploader[5] implementiert:

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...Wie starte ich eine KI-Anwendung in zwei Tagen?上传成功后的逻辑
 }}
/>;

Der verarbeitete Wie starte ich eine KI-Anwendung in zwei Tagen?anzeigeeffekt verwendet React-Compare-Slider[6]:

PS: Das alte Foto meines Großvaters ist Wird hier verwendet. ๑¯◡¯๑

Backend-Teil

Die Backend-Kernlogik umfasst zwei Teile:

Verwenden Sie Redis, um die Häufigkeit von Schnittstellenaufrufen zu begrenzen.

Redis verwendet @upstash-redis[7], einen auf HTTP basierenden Redis-Client. Nachdem wir die Redis-Datenbank online erstellt haben, können wir sie über HTTP-Anfragen auf dem Server aufrufen.

Verwenden Sie das von Replicate bereitgestellte Swinir-Modell, um Wie starte ich eine KI-Anwendung in zwei Tagen?er zu verarbeiten.
• replicate ist ein Cloud-Service-Anbieter für maschinelles Lernen. Wir können je nach Geschäftsanforderungen verschiedene Modelle für maschinelles Lernen auswählen, z

Auf dem Next.js-Server rufen wir die Modell-API über HTTP auf:

// 我们上传的Wie starte ich eine KI-Anwendung in zwei Tagen?地址
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 }
 })
});

值得注意的是，模型计算需要时间，所以在服务端，我们每秒轮询一次结果，如果模型返回处理后的Wie starte ich eine KI-Anwendung in zwei Tagen?，我们就将Wie starte ich eine KI-Anwendung in zwei Tagen?返回给前端：

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

if (jsonFinalResponse.status === "succeeded") {
// 模型返回Wie starte ich eine KI-Anwendung in zwei Tagen?成功
restoredImage = jsonFinalResponse.output;
} else if (jsonFinalResponse.status === "failed") {
// 模型返回Wie starte ich eine KI-Anwendung in zwei Tagen?失败
break;
} else {
// 模型还未返回Wie starte ich eine KI-Anwendung in zwei Tagen?，1s后轮询
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}

总结

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

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

• Wie starte ich eine KI-Anwendung in zwei Tagen?存储使用的是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

Das obige ist der detaillierte Inhalt vonWie starte ich eine KI-Anwendung in zwei Tagen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!