Angular에 Gemini AI 통합: 채팅 애플리케이션 구축

Angular에 Gemini AI 통합: 채팅 애플리케이션 구축

인공 지능(AI)은 우리가 기술과 상호 작용하는 방식에 혁명을 일으키고 있으며 프런트엔드 개발도 예외는 아닙니다. AI 문서와 API를 이해하는 것은 현대 프런트엔드 개발자에게 매우 중요해졌습니다. 이 기사에서는 채팅 애플리케이션을 작성하여 Angular에서 Gemini Pro를 사용하는 방법을 살펴봅니다. Gemini의 기능을 통합하고 프롬프트를 사용하여 특정 요구 사항에 맞는 맞춤형 봇을 구축하는 방법을 배우게 됩니다.

개요

샘플 애플리케이션에서는 Angular 개념과 개인 이력서를 학습한 봇을 만들었습니다. 이력서는 LinkedIn에서 텍스트로 추출되었으며 Google AI Studio를 통해 개체 배열로 변환되었으며 프롬프트로 보완되었습니다. 또한 사용자가 봇 구성을 동적으로 조정할 수 있도록 설정 양식이 통합되었습니다.

이 튜토리얼에서는 ChatGPT 및 통합 개념에 익숙하다고 가정합니다. 초보자를 위해 Google의 AI Studio(https://aistudio.google.com)는 JavaScript 및 기타 언어의 API 통합을 단순화합니다.

ChatGPT 대신 Gemini를 선택하는 이유는 무엇입니까?

OpenAI의 ChatGPT는 강력하지만 API 액세스에는 비용이 들고 구현이 복잡할 수 있습니다. Google의 광범위한 AI 전문 지식을 바탕으로 Gemini는 개발자에게 맞춤화된 강력한 문서와 기능을 통해 보다 사용자 친화적인 접근 방식을 제공합니다.

Google AI의 간략한 역사

Google은 AI 혁신 분야에서 오랜 역사를 갖고 있습니다.

• 2001: 검색 정확도를 높이기 위해 머신러닝이 적용되었습니다.
• 2006년: Google 번역이 등장했고 나중에 TensorFlow 및 DeepMind로 발전했습니다.
• 2016년: AlphaGo가 세계 최고의 바둑 선수들을 이겼습니다.
• 2023년: Generative AI는 Gemini를 통해 새로운 차원에 도달했습니다.

Angular의 강력한 프레임워크와 Gemini의 AI 기능을 결합하면 AI 기반 상호 작용을 원활하게 통합하는 지능형 애플리케이션을 만들 수 있습니다.

개발 단계

1. Gemini API 통합

• API 키 받기: Google Cloud 개발자 계정에 가입하세요.
• SDK 설치: Node.js(버전 >= 18)를 사용하여 Gemini 패키지를 설치합니다.

  npm install @google/generative-ai

• 서비스 만들기: API 호출, 오류 처리, 응답 형식을 처리하는 서비스를 구현합니다.

2. 채팅 인터페이스 디자인

말풍선, 입력 필드, 테마 등의 기능을 갖춘 매력적인 UI를 통합하세요. Angular 애니메이션과 지연용 스피너를 사용하여 UX를 향상하세요.

3. 채팅 로직 구현

사용자 입력, AI 응답 및 채팅 기록을 동기화하기 위해 Angular의 반응형 프로그래밍을 활용합니다. Gemini의 API를 사용하여 메시지를 효율적으로 관리하세요.

4. 사용자 경험 강화

• 사전 정의된 질문: 사용자가 대화를 시작할 수 있는 빠른 옵션을 추가합니다.
• 개성 선택: 사용자가 양식을 통해 톤, 모델 및 API 설정을 조정할 수 있습니다.

서비스 예: DataService

다음 코드는 Gemini Pro와 상호작용하여 사용자 메시지를 보내고 AI 응답을 받는 방법을 보여줍니다.

  npm install @google/generative-ai

Gemini 응답을 HTML로 변환

Gemini 응답에는 Markdown과 유사한 특수 문자가 포함될 수 있습니다. 다음 Angular 파이프는 이를 의미 있는 HTML로 변환합니다.

import { Injectable } from "@angular/core";
import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
import { from } from "rxjs";
import { GeminiConfig } from "./chat-form";
import { API_KEY_CONF } from "../config";

@Injectable({
  providedIn: "root",
})
export class DataService {
  generateContentWithGeminiPro(
    message: string,
    history: { role: string; parts: string }[],
    geminiConfig: GeminiConfig
  ) {
    const MODEL_NAME = geminiConfig.model;
    const API_KEY = geminiConfig.apiKey || API_KEY_CONF;

    async function response() {
      const genAI = new GoogleGenerativeAI(API_KEY);
      const model = genAI.getGenerativeModel({ model: MODEL_NAME });

      const generationConfig = {
        temperature: geminiConfig.temperature,
        maxOutputTokens: 2048,
      };

      const safetySettings = [
        {
          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
          threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
        },
      ];

      const chat = model.startChat({ generationConfig, safetySettings, history });
      const result = await chat.sendMessage(message);
      return result.response.text();
    }

    return from(response());
  }
}

템플릿에 다음 파이프를 사용하세요.

<hr>

<p>AI 및 Gemini에 대한 자세한 내용: </p>

• 구글 AI 블로그
• 구글 AI 플랫폼
• 제미니 웹

이 기사에서는 개발자를 위한 Gemini의 잠재력과 AI를 프런트엔드 프로젝트에 쉽게 통합할 수 있다는 점을 강조합니다. 여러분의 경험이나 질문을 댓글로 공유해주세요!

위 내용은 Angular에 Gemini AI 통합: 채팅 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!