Comment lancer une application d'IA en deux jours ?

Bonjour à tous, je m'appelle Casson.

Ces derniers mois, ​​IA​​​Les nouvelles liées à l’IA continuent d’attirer l’attention de tous. Surfant sur cette vague de popularité, des développeurs de tous horizons ont investi dans​Développement d'applications IA​​. ​AI​​​相关新闻不断抢占大家的注意力。逞着这波热度，各路开发者都投入到​​AI​​应用的开发。

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

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

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

应用架构

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

Dans cet article, voyons comment un étranger a passé un week-end à développer une application d'IA. Seulement 40 jours après le lancement de l’application, celle-ci a reçu 20wUV.

Architecture de l'application

Tout d'abord, présentons cette application. L'application s'appelle restaurerphotos[3]. Une fois que les utilisateurs ont téléchargé d'anciennes photos floues,​​AI​ ​réparera votre photo et la renverra à une version plus claire. Le code complet de l'application est open source.
2. Adresse du code open source de l'application [4]​

1. Suivant. js
2. AI API
5. Le flux de travail complet est le suivant :
6. Les utilisateurs téléchargent d'anciennes photos sur le front-end

Le front-end appelle le service de stockage d'images et renvoie l'adresse de stockage d'images au front-end

Le front-end envoie l'adresse de stockage des images au back-end

Le back-end appelle l'API AI pour traiter les images
• L'API AI renvoie les images traitées au backend, et le backend renvoie au frontend
• Le frontend affiche le traitement effect

Affichage des images traitées par l'IA

Tous. les principales fonctions sont implémentées à l'aide de bibliothèques open source. Parmi eux, la fonction de téléchargement d'images est implémentée à l'aide de React-Uploader[5] :

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...Comment lancer une application dIA en deux jours ?上传成功后的逻辑
 }}
/>;

L'effet d'affichage de l'image traitée utilise React-Compare-slider[6] :

PS : La vieille photo de mon grand-père est utilisé ici. ๑¯◡¯๑

2. Partie backend

Utilisez Redis pour limiter la fréquence des appels d'interface.
• Redis utilise @upstash-redis[7], qui est un client Redis basé sur HTTP. Après avoir créé la base de données Redis en ligne, nous pouvons l'appeler sur le serveur via des requêtes HTTP.
Utilisez le modèle swinir fourni par replique pour traiter les images.

// 我们上传的Comment lancer une application dIA en deux jours ?地址
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 }
 })
});

值得注意的是，模型计算需要时间，所以在服务端，我们每秒轮询一次结果，如果模型返回处理后的Comment lancer une application dIA en deux jours ?，我们就将Comment lancer une application dIA en deux jours ?返回给前端：

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

if (jsonFinalResponse.status === "succeeded") {
// 模型返回Comment lancer une application dIA en deux jours ?成功
restoredImage = jsonFinalResponse.output;
} else if (jsonFinalResponse.status === "failed") {
// 模型返回Comment lancer une application dIA en deux jours ?失败
break;
} else {
// 模型还未返回Comment lancer une application dIA en deux jours ?，1s后轮询
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}

总结

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

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

• Comment lancer une application dIA en deux jours ?存储使用的是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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!