Bagaimana untuk melancarkan aplikasi AI dalam dua hari?

Helo semua, saya Casson.

Dalam beberapa bulan kebelakangan ini, ​​AI​​​berita berkaitan terus menarik perhatian semua orang. Menunggang pada gelombang populariti ini, pembangun dari semua lapisan masyarakat melabur dalam pembangunan aplikasi. ​AI​

Sebagai contoh, IconifyAI[2] yang dibangunkan oleh pembangun berusia 15 tahun saviomartin7[1] boleh menjana aplikasi berdasarkan penerangan teks

​. Tapak web memperoleh hampir 1.5k dolar dalam masa 5 hari selepas berada dalam talian. ​Logo​

Gelombang peluang ini memberi manfaat besar kepada pelajar hadapan, kerana pelbagai perkhidmatan asas (seperti pelbagai perkhidmatan storan, perkhidmatan AI, penggunaan) mempunyai penyelesaian yang matang secara langsung, dan pelajar front-end hanya perlu memberi tumpuan kepada pelaksanaan logik perniagaan.

Dalam artikel ini, mari kita lihat cara seorang lelaki asing menghabiskan hujung minggu membangunkan aplikasi AI. Hanya 40 hari selepas aplikasi dilancarkan, ia menerima 20wUV.

Seni Bina Aplikasi

Pertama sekali, mari perkenalkan aplikasi ini dipanggil restorephotos[3]. 🎜> Foto akan dibaiki dan versi yang lebih jelas akan dikembalikan. Kod lengkap aplikasi telah dibuka sumbernya.

​AI​

Alamat kod sumber terbuka aplikasi[4]​

Seni bina seluruh aplikasi terbahagi kepada 4 bahagian:

Halaman hadapan (Next.js)

1. Perkhidmatan storan imej
2. Pelayan next.js
3. AI API

Aliran kerja lengkap adalah seperti berikut:

Pengguna memuat naik foto lama di bahagian hadapan

1. Hujung hadapan memanggil perkhidmatan storan imej dan mengembalikan alamat storan imej ke hujung hadapan
2. Hujung hadapan Hantar alamat storan imej ke hujung belakang
3. Halaman belakang memanggil AI ​​API untuk memproses imej
4. AI ​​API mengembalikan imej yang diproses ke bahagian belakang dan bahagian belakang mengembalikannya ke bahagian hadapan
5. Frontend Tunjukkan kesan yang diproses
6. Bahagian hujung hadapan

keseluruhan bahagian hadapan dan bahagian belakang dilaksanakan menggunakan Next.js Bahagian hadapan terutamanya merangkumi dua bahagian:

Muat naik imej

• Paparan gambar diproses AI
• Semua fungsi utama dilaksanakan menggunakan perpustakaan sumber terbuka. Antaranya, fungsi muat naik imej dilaksanakan menggunakan react-uploader[5]:

Kesan paparan imej yang diproses dilaksanakan menggunakan react-compare-slider[6]:

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...Bagaimana untuk melancarkan aplikasi AI dalam dua hari?上传成功后的逻辑
 }}
/>;

PS: Gambar lama datuk saya digunakan di sini ๑¯◡¯๑

Bahagian belakang

Logik teras belakang termasuk dua bahagian:

Gunakan Redis untuk mengehadkan kekerapan panggilan antara muka.

1. Redis menggunakan @upstash-redis[7], iaitu klien Redis berdasarkan HTTP. Selepas mencipta pangkalan data Redis dalam talian, kami boleh memanggilnya pada pelayan melalui permintaan HTTP.

Gunakan model swinir yang disediakan oleh replika untuk memproses imej.

2. Replicate ialah penyedia perkhidmatan awan pembelajaran mesin Kami boleh memilih model pembelajaran mesin yang berbeza mengikut keperluan perniagaan, seperti:

Memproses kejelasan imej

Pembaikan Foto Rosak
• Teks ke Imej
• ...

Pada pelayan Next.js, kami menggunakan HTTP Panggil API model dalam borang:

// 我们上传的Bagaimana untuk melancarkan aplikasi AI dalam dua hari?地址
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 }
 })
});

值得注意的是，模型计算需要时间，所以在服务端，我们每秒轮询一次结果，如果模型返回处理后的Bagaimana untuk melancarkan aplikasi AI dalam dua hari?，我们就将Bagaimana untuk melancarkan aplikasi AI dalam dua hari?返回给前端：

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

if (jsonFinalResponse.status === "succeeded") {
// 模型返回Bagaimana untuk melancarkan aplikasi AI dalam dua hari?成功
restoredImage = jsonFinalResponse.output;
} else if (jsonFinalResponse.status === "failed") {
// 模型返回Bagaimana untuk melancarkan aplikasi AI dalam dua hari?失败
break;
} else {
// 模型还未返回Bagaimana untuk melancarkan aplikasi AI dalam dua hari?，1s后轮询
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}

总结

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

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

• Bagaimana untuk melancarkan aplikasi AI dalam dua hari?存储使用的是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

Atas ialah kandungan terperinci Bagaimana untuk melancarkan aplikasi AI dalam dua hari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!