How to launch an AI application in two days?

Hello everyone, I am Casson.

In recent months, ​​AI​​​related news has continued to grab everyone’s attention. Riding on this wave of popularity, developers from all walks of life are investing in the development of AI applications. For example, IconifyAI[2] developed by 15-year-old developer saviomartin7[1] can generate applications based on text descriptions

​Logo​

​. The website earned nearly 1.5k dollars within 5 days of being online.

This wave of opportunities is of great benefit to front-end students, because various basic services (such as various storage services, AI services, deployment) have mature solutions. Use it directly, and front-end students only need to focus on the implementation of business logic.

In this article, let us take a look at how a foreign man spent a weekend developing an AI application. Only 40 days after the application was launched, it received 20wUV.

Application Architecture

First of all, let’s introduce this application. The application is called restorephotos[3]. After the user uploads the blurred old photos,​

​AI​

​will repair the photo and return a clearer version. The complete code of the application has been open sourced.

Application open source code address[4]​

The entire application architecture is divided into 4 parts:

Front end (Next.js)

1. Image storage service
2. Next.js server
3. AI API

The complete workflow is as follows:

Users upload old photos on the front end

1. The front end calls the image storage service and returns the image storage address to the front end
2. Front end Send the image storage address to the backend
3. The backend calls the AI ​​API to process the image
4. AI API returns the processed image to the backend, and the backend returns it to the frontend
5. Frontend Show the effect after processing
6. Front-end part

The entire front-end and back-end are implemented using Next.js. The front-end mainly includes two parts:

Image upload

• AI processed picture display
• All main functions are implemented using open source libraries. Among them, the image upload function is implemented using react-uploader[5]:

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...How to launch an AI application in two days?上传成功后的逻辑
 }}
/>;

The processed image display effect is implemented using react-compare-slider[6]:

PS: The old photo of my grandfather is used here ๑¯◡¯๑

Backend part

The backend core logic includes two parts:

Use Redis to limit the frequency of interface calls.

1. Redis uses @upstash-redis[7], which is a Redis client based on HTTP. After creating the Redis database online, we can call it on the server through HTTP requests.

Use the swinir model provided by replicate to process images.

2. replicate is a machine learning cloud service provider. We can choose different machine learning models according to business needs, such as:

Processing image clarity

• BROKEN PHOTO REPAIR
• Text to Image
• ...

On the Next.js server, we use HTTP Call the model API in the form:

// 我们上传的How to launch an AI application in two days?地址
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 }
 })
});

值得注意的是，模型计算需要时间，所以在服务端，我们每秒轮询一次结果，如果模型返回处理后的How to launch an AI application in two days?，我们就将How to launch an AI application in two days?返回给前端：

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

if (jsonFinalResponse.status === "succeeded") {
// 模型返回How to launch an AI application in two days?成功
restoredImage = jsonFinalResponse.output;
} else if (jsonFinalResponse.status === "failed") {
// 模型返回How to launch an AI application in two days?失败
break;
} else {
// 模型还未返回How to launch an AI application in two days?，1s后轮询
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}

总结

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

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

• How to launch an AI application in two days?存储使用的是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

The above is the detailed content of How to launch an AI application in two days?. For more information, please follow other related articles on the PHP Chinese website!