Gemini AI を Angular に統合する: チャット アプリケーションを構築する

Gemini AI を Angular に統合する: チャット アプリケーションを構築する

人工知能 (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 アクセスにはコストがかかり、実装が複雑になる可能性があります。 Gemini は、Google の広範な AI 専門知識に支えられ、開発者向けにカスタマイズされた堅牢なドキュメントと機能を備えた、よりユーザー フレンドリーなアプローチを提供します。

Google AI の簡単な歴史

Google には AI イノベーションにおいて長年の歴史があります:

• 2001: 検索精度を向上させるために機械学習が適用されました。
• 2006: Google 翻訳が登場し、その後 TensorFlow と DeepMind とともに進歩しました。
• 2016: AlphaGo が世界トップの囲碁プレイヤーを破りました。
• 2023: 生成 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.チャットロジックの実装

Angular のリアクティブ プログラミングを利用して、ユーザー入力、AI 応答、チャット履歴を同期します。 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>

• Google AI ブログ
• Google AI プラットフォーム
• ジェミニウェブ

---

この記事では、開発者にとっての Gemini の可能性と、フロントエンド プロジェクトへの AI の統合の容易さを強調しています。コメントであなたの経験や質問を共有してください!

以上がGemini AI を Angular に統合する: チャット アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。