了解如何將 Gemini API 整合到 React.js 專案中以建立互動式聊天機(jī)器人體驗(yàn)。

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

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

取得您的 Gemini API 金鑰：

在將 Gemini API 整合到您的 React.js 專案之前，您需要取得 API 金鑰。請依照以下步驟操作：

1. 訪問 Google AI Studio
   
   開啟瀏覽器並導(dǎo)航至 Google AI Studio 頁面。

2. 訪問開發(fā)者文件
   
   進(jìn)入 Google AI Studio 主頁後，找到側(cè)邊欄。從選項(xiàng)中選擇“開發(fā)人員文件”。

3. 請求 API 金鑰
   
   在開發(fā)人員文件頁面中，尋找標(biāo)示為「取得 Gemini API 金鑰」的按鈕。點(diǎn)擊它。

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

5. 複製您的 API 金鑰
   
   產(chǎn)生密鑰後，複製它。確保安全 - 在 React.js 專案中使用 Gemini API 時需要此金鑰來驗(yàn)證您的請求。

提示：如果您想檢查您的API金鑰，文件頁面上會有一個curl指令。將 YOUR_API_KEY 佔(zhàn)位符替換為您從 Google AI Studio 取得的 API 金鑰。開啟 Git Bash 並貼上修改後的curl 指令。如果 API 金鑰有效且有效，您應(yīng)該會收到 JSON 格式的回應(yīng)。

設(shè)定 React.js 專案：

使用 CRA 設(shè)定項(xiàng)目並安裝所需的庫。將 my-app 替換為您的項(xiàng)目名稱。

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

刪除不必要的檔案並在 src 資料夾中建立一個 Components 資料夾。

另外，在根目錄中建立一個 .env 檔案來安全地儲存 API 金鑰。

REACT_APP_GEMINI_API_KEY=YOUR_API_KEY_HERE

每當(dāng)我們需要 API 金鑰時，我們都會使用它：

process.env.REACT_APP_GEMINI_API_KEY

設(shè)定模型：

在元件資料夾中建立一個 Model.jsx 檔案。這將包含定義設(shè)定以使用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：

在元件資料夾中，建立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，因?yàn)?Gemini API 傳回以 Markdown 格式的回應(yīng)。該庫有助於在頁面上正確呈現(xiàn)它，確保任何 Markdown 語法（例如連結(jié)或粗體文字）在 UI 中正確顯示。

解釋：

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

• userInput：儲存使用者在輸入欄位中輸入的目前值。
• 回應(yīng)：儲存聊天歷史記錄，包括來自使用者和機(jī)器人的訊息。
• isLoading：追蹤應(yīng)用程式是否正在等待 Gemini API 的回應(yīng)。

功能：

• handleUserInput()：每當(dāng)使用者在輸入欄位中鍵入時更新 userInput 狀態(tài)。
• handleClear()：當(dāng)使用者點(diǎn)選Clear按鈕時重設(shè)狀態(tài)，有效清除聊天。
• handleSubmit()：檢查輸入是否為空，設(shè)定載入狀態(tài)，取得AI回應(yīng)，更新聊天記錄，處理錯誤，完成後重置輸入欄位和載入狀態(tài)。
• handleKeyPress()：如果按下 Enter 鍵，則會阻止預(yù)設(shè)操作（表單提交）並觸發(fā)handleSubmit 函數(shù)。

---

結(jié)論：

在本教程中，我們學(xué)習(xí)如何將 Gemini API 整合到 React.js 應(yīng)用程式中。我們介紹了設(shè)定項(xiàng)目、處理使用者輸入、與 API 互動以及使用 React 的狀態(tài)管理和 React-markdown 顯示回應(yīng)。

為了進(jìn)一步增強(qiáng)您的項(xiàng)目，您可以添加其他功能，例如用戶身份驗(yàn)證、保存聊天歷史記錄以便在頁面刷新後也能持久保存等等。

編碼快樂！ ?

以上是如何將 Gemini API 與 React.js 整合：逐步指南。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！