10분 안에 AI 애플리케이션 구축: 단계별 가이드

ChatGPT와 Google Gemini가 등장한 이후 이러한 모델을 활용하는 많은 앱이 출시되는 것을 보았습니다. 이 기술을 차익거래라고 하는데, AI가 할 수 있는 여러 작업 중 하나를 가져와 이를 효율적인 프롬프트로 강화한 다음 이를 고객에게 기능으로 제공하는 방법입니다.

이 기사는 Google Gemini 모델을 Node.js 애플리케이션에 통합하는 방법에 대한 단계별 가이드입니다. 생성 텍스트를 처리하는 Gemini-pro와 이미지를 처리하는 Gemini-pro-vision을 모두 사용하는 방법을 살펴보겠습니다.

먼저 프로젝트를 설정한 다음 이를 우리 자신의 예제에서 사용하겠습니다.

요구사항

Node.js 버전 18 이상
API 키를 얻기 위한 Google AI Platform 계정

시작하기

먼저, 빈 폴더 안에 새 Node.js 프로젝트를 만듭니다.

mkdir gemini-node  
cd gemini-node

npm init -y

이제 환경 파일과 Gemini SDK에 필요한 패키지를 설치하겠습니다.

npm install dotenv @google/generative-ai

API 키 설정

Google AI Platform에서 Get API Key 버튼을 클릭하여 API 키를 가져온 다음 이를 루트 디렉터리의 환경 파일(.env)에 저장합니다.

API_KEY=YOUR_GEMINI_KEY

새 lib 폴더를 생성하고 그 안에 config.js 파일을 생성한 후 다음 단계에서는 API 키를 내보냅니다.

const  dotenv  =  require("dotenv");
dotenv.config();

const  API_KEY  =  process.env.API_KEY;

module.exports  = { API_KEY };

Gemini SDK 설정

이 단계에서는 코드에서 사용할 수 있도록 모델을 설정합니다. lib 폴더 안에 텍스트 처리를 위한 gemini.js와 이미지 처리를 위한 gemini-vision.js라는 2개의 파일을 생성해 보겠습니다.

1- Google Gemini Pro

const { GoogleGenerativeAI } = require("@google/generative-ai");
const { API_KEY } = require("./config");

const googleAI = new GoogleGenerativeAI(API_KEY);
const geminiConfig = {
  temperature: 0.9,
  topP: 1,
  topK: 1,
  maxOutputTokens: 4096,
};

const geminiModel = googleAI.getGenerativeModel({
  model: "gemini-pro",
  geminiConfig,
});

const generateText = async (prompt) => {
  try {
    const result = await geminiModel.generateContent(prompt);
    const response = result.response;
    return response.text();
  } catch (error) {
    console.log("response error", error);
  }
};

module.exports = { generateText };

내보낸 함수를 사용하여 프롬프트에서 텍스트를 생성하겠습니다. 이를 사용하여 채팅 시스템, 텍스트 번역 및 더 많은 사용 사례를 구축할 수 있습니다.

2- Google 제미니 비전

const { GoogleGenerativeAI } = require("@google/generative-ai");
const { API_KEY } = require("./config");
const fs = require("fs");

const googleAI = new GoogleGenerativeAI(API_KEY);
const geminiConfig = {
  temperature: 0.4,
  topP: 1,
  topK: 32,
  maxOutputTokens: 4096,
};

const geminiModel = googleAI.getGenerativeModel({
  model: "gemini-pro-vision",
  geminiConfig,
});

const interactWithImage = async (filePath) => {
  try {
    const imageFile = fs.readFileSync(filePath);
    const imageBase64 = imageFile.toString("base64");

    const promptConfig = [
      { text: "Generate a caption from this image" },
      {
        inlineData: {
          mimeType: "image/jpeg",
          data: imageBase64,
        },
      },
    ];

    const result = await geminiModel.generateContent({
      contents: [{ role: "user", parts: promptConfig }],
    });

    return result.response.text();
  } catch (error) {
    console.log("response error", error);
  }
};

module.exports = { interactWithImage };

내보낸 함수를 사용하여 이미지에서 텍스트를 생성하겠습니다.

앱 빌드

새 index.js 파일을 만들고 다음 코드를 붙여넣습니다.

const main = async () => {
  console.log("Hello world!");
};

main();

이제 내보낸 함수를 가져와 이를 사용하여 질문이나 이미지 프롬프트에서 텍스트를 생성할 수 있습니다.

이 함수는 파일 경로를 인수로 사용하므로 테스트하려면 프로젝트 폴더에 이미지 파일을 추가해야 합니다.

우리 코드는 다음과 같이 변환됩니다.

const { generateText } = require("./lib/gemini");
const { interactWithImage } = require("./lib/gemini-vision");
const path = require("path");

const main = async () => {
  // Text Generation
  let textFromPrompt = await generateText(
    "tell me about bootcamps in a sentence"
  );
  console.log(textFromPrompt);

  // Caption Generation
  const directoryName = path.join(__dirname, "fish.jpg");
  let captionFromImage = await interactWithImage(directoryName);
  console.log(captionFromImage);
};

main();

무엇 향후 계획

이제 ExpressJS를 사용하여 스크립트 대신 API를 구축할 수 있습니다. 또한 사용 사례에 맞는 프롬프트 작성 모범 사례에 대해 조사할 수도 있습니다.

다음은 구축할 수 있는 앱에 대한 몇 가지 예입니다.

Unsplash API를 이용한 SEO 메타데이터 생성기
PDF에서 콘텐츠를 가져오는 추가 스크립트를 추가하여 검토자를 재개합니다.
이미지의 인스타그램 바이오 작가

더 나은 앱을 만드는 데 관심이 있나요? 웹 개발 부트캠프에 참여하고 완전한 기능을 갖춘 제품을 구축하는 방법을 알아보세요!