将 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 集成。

为什么选择 Gemini 而不是 ChatGPT？

虽然 OpenAI 的 ChatGPT 功能强大，但其 API 访问涉及成本且实施起来可能很复杂。 Gemini 在 Google 丰富的人工智能专业知识的支持下，提供了一种更加用户友好的方法，以及为开发人员量身定制的强大文档和功能。

谷歌人工智能简史

Google 在人工智能创新方面拥有悠久的历史：

• 2001：应用机器学习来提高搜索准确性。
• 2006 年： Google Translate 出现，后来与 TensorFlow 和 DeepMind 一起进步。
• 2016：AlphaGo 击败了世界顶级围棋选手。
• 2023 年： Gemini 的生成式 AI 达到了新的高度。

通过将 Angular 强大的框架与 Gemini 的 AI 功能相结合，您可以创建无缝集成 AI 驱动交互的智能应用程序。

开发步骤

1. Gemini API 集成

• 获取 API 密钥：注册 Google Cloud 开发者帐户。
• 安装 SDK： 使用 Node.js (版本 >= 18) 安装 Gemini 包：

  npm install @google/generative-ai

• 创建服务：实现一个服务来处理 API 调用、错误处理和响应格式。

2.聊天界面设计

将吸引人的 UI 与聊天气泡、输入字段和主题等功能结合起来。使用 Angular 动画和延迟微调器增强用户体验。

3.聊天逻辑实现

利用 Angular 的反应式编程来同步用户输入、AI 响应和聊天历史记录。使用 Gemini 的 API 高效管理消息。

4.提升用户体验

• 预定义问题：为用户添加快速选项来开始对话。
• 个性选择：允许用户通过表单调整语气、模型和 API 设置。

示例服务：数据服务

以下代码演示了如何与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>有关人工智能和 Gemini 的更多信息：</p>

• 谷歌人工智能博客
• 谷歌人工智能平台
• 双子座网

本文重点介绍了 Gemini 对开发人员的潜力以及将 AI 集成到前端项目的便利性。在评论中分享您的经验或疑问！

以上是将 Gemini AI 集成到 Angular 中：构建聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！