이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?

안녕하세요 여러분 카슨입니다.

최근 몇 달 동안 ​​AI​​​관련 뉴스가 계속해서 모두의 관심을 끌고 있습니다. 이러한 인기의 물결에 힘입어 각계각층의 개발자들은 ​AI​​ 애플리케이션 개발. ​AI​​​相关新闻不断抢占大家的注意力。逞着这波热度，各路开发者都投入到​​AI​​应用的开发。

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

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

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

应用架构

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

예를 들어 15세 개발자 saviomartin7[1]이 개발한 IconifyAI[2]는 텍스트 설명을 기반으로 애플리케이션을 생성할 수 있습니다​로고​​. 이 웹사이트는 온라인에 접속한 지 5일 만에 거의 1500달러를 벌었습니다.

다양한 기본 서비스(예: 다양한 스토리지 서비스, AI 서비스, 배포)에 사용할 수 있는 성숙한 솔루션이 있기 때문에 이러한 기회의 물결은 프런트엔드 학생들에게 큰 이점이 됩니다. 직접적으로 프런트엔드 학생들은 비즈니스 로직 구현에만 집중하면 됩니다.

이 기사에서는 한 외국인 남자가 AI 애플리케이션을 개발하면서 주말을 어떻게 보냈는지 살펴보겠습니다. 애플리케이션 출시 후 불과 40일 만에 20wUV를 받았습니다.

애플리케이션 아키텍처

우선 이 애플리케이션을 소개하겠습니다. 이 애플리케이션은 RestorePhotos[3]라고 합니다. 사용자가 흐릿한 오래된 이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?을 업로드하면​​AI​ ​이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?을 복구하여 더 선명한 버전으로 되돌려 드립니다. 애플리케이션의 전체 코드는 오픈 소스로 공개되었습니다.
2. 애플리케이션 오픈소스 코드 주소 [4]​

전체 애플리케이션의 아키텍처는 4부분으로 나뉩니다:

프런트엔드(Next.js)

이미지 저장 서비스

1. Next. js 서버
2. AI API
5. 전체 워크플로는 다음과 같습니다.
6. 사용자는 프런트 엔드에 오래된 이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?을 업로드합니다.

프런트 엔드는 이미지 저장 서비스를 호출하고 이미지 저장 주소를 프런트 엔드에 반환합니다.

프런트엔드는 이미지 저장 주소를 백엔드로 보냅니다

백엔드는 AI API를 호출하여 이미지를 처리합니다
• AI API는 처리된 이미지를 백엔드로 반환하고 백엔드는 프런트엔드로 돌아갑니다
• 프런트엔드는 처리된 이미지를 표시합니다. effect

프런트엔드 부분

프론트엔드와 백엔드 전체가 Next.js를 사용하여 구현됩니다. 프론트엔드는 주로 두 부분으로 구성됩니다.

이미지 업로드

AI 처리된 이미지 표시

모두 주요 기능은 오픈 소스 라이브러리를 사용하여 구현됩니다. 그 중 이미지 업로드 기능은 React-uploader[5]를 사용하여 구현합니다:

<UploadDropzone
 uploader={uploader}
 options={options}
width="670px"
 height="250px"
 onUpdate={(file) => {
 // ...이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?上传成功后的逻辑
 }}
/>;

처리된 이미지 표시 효과는 React-compare-slider[6]를 사용합니다:

PS: 할아버지의 옛날 이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?은 여기서 사용됨 ๑́◡̀๑

2. 백엔드 부분

백엔드 핵심 로직에는 두 부분이 포함됩니다.

Redis를 사용하여 인터페이스 호출 빈도를 제한합니다.
• Redis는 HTTP 기반 Redis 클라이언트인 @upstash-redis[7]를 사용합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!