5분 만에 제로에서 AI 이미지 분석기로: 초보자 가이드

AI 이미지 분석기를 구축하는 방법을 알고 싶으십니까? 그렇다면 이 글을 끝까지 읽어보세요! 사전 지식이 거의 필요 없을 정도로 AI 분석기 도구를 정말 간단하게 구축하는 방법을 보여 드리겠습니다. 단계별로 설명하고 Project IDX와 Gemini API를 사용하겠습니다. 즉, 아무것도 설정할 필요가 없습니다. 우리가 할 모든 일은 클라우드에 있습니다. 준비가 되었다면 시작해 보세요!

내 YouTube 채널을 방문하세요

프로젝트 IDX 시작하기

첫 번째 단계는 매우 간단합니다. 우리는 웹사이트를 열어야 해요 idx.google.com . 아직 등록하지 않으셨다면 먼저 등록을 하셔야 아래 화면을 보실 수 있습니다.

1. 템플릿 선택: Gemini API 템플릿을 선택하겠습니다.

   
   

2. 프로젝트 이름: "test 2024"라고 하겠습니다.

   
   

3. 환경 선택: JavaScript 웹 애플리케이션 환경인 "Vite"를 선택하겠습니다.

   
   

4. 프로젝트 생성: 생성 버튼을 누릅니다.

   
   

   

몇 분 후에 IDX가 모든 것을 생성하고 원하는 대로 수정할 수 있는 템플릿 파일을 볼 수 있습니다.

템플릿 수정

이것이 index.html 파일입니다. 원하는 방식으로 수정할 수 있지만 먼저 살펴보겠습니다. 초기 템플릿에는 필요한 거의 모든 것이 포함되어 있습니다. 이 템플릿은 Gemini 1.5 플래시 모델을 사용하므로 우리에게는 충분합니다.

API 키 받기

보시다시피 API 키를 먼저 가져와야 하기 때문에 처음에는 애플리케이션이 작동하지 않습니다. 웹사이트로 이동 https://aistudio.google.com/app/apikey , 거기서 열쇠를 얻으세요. API 키를 얻는 방법 에 대한 자세한 지침을 보려면 프로젝트 IDX에 대한 다른 동영상을 시청하세요.

키를 받으면 복사한 다음 main.js 파일로 이동하세요. 자리 표시자를 API 키로 바꿉니다.

애플리케이션 테스트

우리의 애플리케이션이 작동하는지 확인해 봅시다. "이동"을 누르고 Gemini가 우리에게 무엇을 반환하는지 확인하세요.

보시다시피 제미니는 그림 속 내용을 이해하고 이런 빵집을 굽기 위한 몇 가지 요리법을 제안합니다. 이 애플리케이션은 이미 서버에 있으므로 링크를 공유하거나 브라우저에서 이 애플리케이션을 열 수 있습니다.

URL은 아직 아름답지 않습니다. 그러나 모든 것이 제대로 작동하는지 확인할 수 있으며 이 링크를 파트너나 동료와 공유할 수 있습니다.

이미지 업로드 기능 추가

AI 이미지 분석기를 완성하려면 자체 이미지를 추가할 수 있어야 합니다. 템플릿을 일부 조정해 보겠습니다. 첫 번째는 index.html 파일입니다.

1. 애플리케이션 이름 변경: "AI 이미지 분석기"라고 부르겠습니다.

   
   

2. HTML 삭제: 미리 정의된 이미지를 삭제합니다. 14번부터 27번까지의 라인입니다.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. 이미지 업로드를 위한 입력 필드를 추가합니다. 15호선

 <input type="file" id="fileInput" name="file">

4. 입력 이름 프롬프트 값을 "이 이미지에 대해 원하는 모든 것을 물어보세요"로 변경합니다.

결과 HTML은 아래 그림과 같아야 합니다.

자바스크립트 업데이트

파일을 읽으려면 JavaScript 코드를 정의해야 합니다. main.js 파일을 열고 다음과 같이 변경합니다.

1. 22~26행의 코드를 제거합니다.

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. 22번째 줄부터 새 코드를 추가하세요.

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

귀하의 애플리케이션은 아래 스크린샷과 같습니다.

최종 테스트

결과를 확인해 보겠습니다. 이미지를 업로드하고 이미지에 무엇이 있는지 물어본 후 "이동"을 누르세요.

내 이미지 예시.

결과:

보시다시피 Gemini API는 이미지에 대한 모든 것을 설명합니다. AI 이미지 분석기가 작동 중입니다!

결론

그게 다야! 보시다시피 Project IDX와 Gemini API를 사용하여 AI 이미지 분석기를 구축하는 것은 정말 간단합니다. 다양한 앱을 만들 수 있습니다. 이것은 단지 하나의 예일 뿐입니다. 이 기사가 도움이 되고 유익하길 바랍니다. 아래 댓글로 피드백을 공유하는 것을 잊지 마세요.

감사합니다. 다음 기사에서 뵙겠습니다! :)