了解如何將 Gemini API 集成到 React.js 項目中以創(chuàng)建交互式聊天機器人體驗。

由于我不會深入研究樣式，因此請參閱 GitHub 存儲庫中的樣式表。您還可以在這里查看演示。

話不多說，讓我們開始吧！

獲取您的 Gemini API 密鑰：

在將 Gemini API 集成到您的 React.js 項目中之前，您需要獲取 API 密鑰。請按照以下步驟操作：

1. 訪問 Google AI Studio
   
   打開瀏覽器并導航至 Google AI Studio 頁面。

2. 訪問開發(fā)者文檔
   
   進入 Google AI Studio 主頁后，找到側邊欄。從選項中選擇“開發(fā)人員文檔”。

3. 請求 API 密鑰
   
   在開發(fā)人員文檔頁面中，查找標有“獲取 Gemini API 密鑰”的按鈕。點擊它。

4. 驗證并確認
   
   如果您尚未登錄，請使用您的 Google 帳戶登錄。您可能需要完成一些身份驗證步驟或同意條款和條件才能繼續(xù)。

5. 復制您的 API 密鑰
   
   生成密鑰后，復制它。確保安全 - 在 React.js 項目中使用 Gemini API 時需要此密鑰來驗證您的請求。

提示：如果您想檢查您的API密鑰，文檔頁面上會有一個curl命令。將 YOUR_API_KEY 占位符替換為您從 Google AI Studio 獲取的 API 密鑰。打開 Git Bash 并粘貼修改后的curl 命令。如果 API 密鑰有效且有效，您應該會收到 JSON 格式的響應。

設置 React.js 項目：

使用 CRA 設置項目并安裝所需的庫。將 my-app 替換為您的項目名稱。

npx create-react-app my-app
npm install @google/generative-ai 
npm install react-markdown
npm install react-icons

刪除不必要的文件并在 src 文件夾中創(chuàng)建一個 Components 文件夾。

另外，在根目錄中創(chuàng)建一個 .env 文件來安全地存儲 API 密鑰。

REACT_APP_GEMINI_API_KEY=YOUR_API_KEY_HERE

每當我們需要 API 密鑰時，我們都會使用它：

process.env.REACT_APP_GEMINI_API_KEY

設置模型：

在組件文件夾中創(chuàng)建一個 Model.jsx 文件。這將包含定義設置以使用generateContent函數(shù)與Gemini API交互的代碼。

// components/Model.jsx
const { GoogleGenerativeAI } = require("@google/generative-ai");

const genAI = new GoogleGenerativeAI(process.env.REACT_APP_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

export const generateContent = async (prompt) => {
    const result = await model.generateContent(prompt);
    console.log(result.response.text());
    return result.response.text; // return the response
}

首頁.jsx：

在組件文件夾中，創(chuàng)建Home.jsx。該文件將定義以下邏輯：

• 獲取用戶輸入并將其發(fā)送到模型。
• 清除和發(fā)送按鈕的邏輯。
• 顯示聊天記錄。

代碼如下：

import React, { useState } from "react";
import { IoIosSend } from "react-icons/io";
import { generateContent } from './Model'; 
import ReactMarkdown from 'react-markdown'; // to render markdown responses
import './home.css'

export default function Home() {
  const [userInput, setUserInput] = useState('');
  const [response, setResponse] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const handleClear = () => {
    setUserInput('');
    setResponse([]);
    setIsLoading(false);
  };

  const handleSubmit = async () => {
    if (!userInput.trim()) {
      setResponse([{ type: "system", message: "Please enter a prompt.." }]);
      return;
    }

    setIsLoading(true);
    try {
      const res = await generateContent(userInput);
      setResponse(prevResponse => [
        ...prevResponse,
        { type: "user", message: userInput },
        { type: "bot", message: res()},
      ]);
      setUserInput('');
    } catch (err) {
      console.error("Error generating response:", err);
      setResponse(prevResponse => [
        ...prevResponse,
        { type: "system", message: "Failed to generate response" },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleSubmit();
    }
  };

  return (
    <div className="chat-container">
      {response.length === 0 ? (
        <h1>Got Questions? Chatty's Got Answers.</h1> 
      ) : (
        <div className="chat-history">
          {response.map((msg, index) => (
            <p key={index} className={`message ${msg.type}`}>
              <ReactMarkdown>{msg.message}</ReactMarkdown>
            </p>
          ))}
          {isLoading && <p className="loading-text">Generating response...</p>}
        </div>
      )}

      <div className="input-container">
        <button onClick={handleClear} className="clear-btn">Clear</button>

        <input
          type="text"
          value={userInput}
          onChange={handleUserInput}
          onKeyDown={handleKeyPress}
          placeholder="Type your message here..."
          className="chat-input"
        />

        <button onClick={handleSubmit} className="send-btn">
          <IoIosSend />
        </button>
      </div>
    </div>
  );
}

這就是我們將要看到的！

為什么使用 React Markdown？

我們使用 React Markdown，因為 Gemini API 返回以 Markdown 格式的響應。該庫有助于在頁面上正確呈現(xiàn)它，確保任何 Markdown 語法（例如鏈接或粗體文本）在 UI 中正確顯示。

解釋：

我們創(chuàng)建了三個本地狀態(tài)：userInput、response 和 isLoading。

• userInput：存儲用戶在輸入字段中輸入的當前值。
• 響應：存儲聊天歷史記錄，包括來自用戶和機器人的消息。
• isLoading：跟蹤應用程序是否正在等待 Gemini API 的響應。

功能：

• handleUserInput()：每當用戶在輸入字段中鍵入時更新 userInput 狀態(tài)。
• handleClear()：當用戶單擊Clear按鈕時重置狀態(tài)，有效清除聊天。
• handleSubmit()：檢查輸入是否為空，設置加載狀態(tài)，獲取AI響應，更新聊天記錄，處理錯誤，完成后重置輸入字段和加載狀態(tài)。
• handleKeyPress()：如果按下 Enter 鍵，則會阻止默認操作（表單提交）并觸發(fā)handleSubmit 函數(shù)。

---

結論：

在本教程中，我們學習了如何將 Gemini API 集成到 React.js 應用程序中。我們介紹了設置項目、處理用戶輸入、與 API 交互以及使用 React 的狀態(tài)管理和 React-markdown 顯示響應。

為了進一步增強您的項目，您可以添加其他功能，例如用戶身份驗證、保存聊天歷史記錄以便在頁面刷新后也能持久保存等等。

編碼快樂！ ?

以上是如何將 Gemini API 與 React.js 集成：分步指南。的詳細內容。更多信息請關注PHP中文網其他相關文章！