안녕하세요 여러분 카슨입니다.
최근 몇 달 동안 AI
관련 뉴스가 계속해서 모두의 관심을 끌고 있습니다. 이러한 인기의 물결에 힘입어 각계각층의 개발자들은 AI
애플리케이션 개발. AI
相关新闻不断抢占大家的注意力。逞着这波热度,各路开发者都投入到AI
应用的开发。
比如,15岁的开发者saviomartin7[1]开发的IconifyAI[2]可以根据文字描述生成应用Logo
。网页上线5天就赚到了接近1.5k刀。
这波机遇对前端同学有很大利好,因为各种基础服务(比如各种存储服务、AI服务、部署)都有成熟的解决方案可以直接使用,前端同学只需专注业务逻辑的实现即可。
本文让我们看看一位国外老哥是如何用一个周末时间开发一款AI应用。该应用上线仅40天,就获得了20wUV。
首先介绍下这款应用,应用名叫restorephotos[3],用户上传模糊的老照片后,AI
로고
. 이 웹사이트는 온라인에 접속한 지 5일 만에 거의 1500달러를 벌었습니다. 다양한 기본 서비스(예: 다양한 스토리지 서비스, AI 서비스, 배포)에 사용할 수 있는 성숙한 솔루션이 있기 때문에 이러한 기회의 물결은 프런트엔드 학생들에게 큰 이점이 됩니다. 직접적으로 프런트엔드 학생들은 비즈니스 로직 구현에만 집중하면 됩니다.
이 기사에서는 한 외국인 남자가 AI 애플리케이션을 개발하면서 주말을 어떻게 보냈는지 살펴보겠습니다. 애플리케이션 출시 후 불과 40일 만에 20wUV를 받았습니다.
AI
이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?을 복구하여 더 선명한 버전으로 되돌려 드립니다. 애플리케이션의 전체 코드는 오픈 소스로 공개되었습니다. 프런트엔드는 이미지 저장 주소를 백엔드로 보냅니다
AI 처리된 이미지 표시
<UploadDropzone uploader={uploader} options={options} width="670px" height="250px" onUpdate={(file) => { // ...이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?上传成功后的逻辑 }} />;
처리된 이미지 표시 효과는 React-compare-slider[6]를 사용합니다:
PS: 할아버지의 옛날 이틀 안에 AI 애플리케이션을 시작하는 방법은 무엇입니까?은 여기서 사용됨 ๑́◡̀๑
// 我们上传的이틀 안에 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应用的朋友,可以参考本文的实现与成本,行动起来吧。
[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!