AI跟AI能彼此聊天嗎 ? 使用 Gemini AI 打造雙 AI 對話模擬器

使用 Vue3 + Gemini AI 打造雙 AI 對話模擬器

身為一個內向的宅宅，我想大家應該都懂比起跟人聊天，我們更喜歡看人們聊天。

所以我常在想有沒有辦法讓AI們自己玩，會不會出現什麼意想不到的對話！

於是~我就做了這個 雙 AI 對話模擬器 。

這是什麼？

這個專案基於 Vue3、 Vite、daisyUI，並使用 Google Gemini AI API，讓 AI 角色能夠彼此交流。你可以設定兩個 AI 的名字和個性描述，然後它們就會開始一場酣暢淋漓的交流。

有趣的功能

💬 雙 AI 對話： 讓兩個 AI 角色自行對話，展現 AI 的對話能力。

🎭 角色設定：使用者可以自定義 AI 角色的名稱和描述。

🎲 隨機生成角色：沒有靈感？沒關係，也可以隨機產生角色設定！

🤖 Gemini AI API：使用 Google Gemini AI API 進行對話生成。

讓我們開始吧~

1.取得 Google Gemini API 金鑰

到 Google AI Studio 註冊並取得 API 金鑰。

2.初始化專案

• • 使用 Vite 建立 Vue3 專案：

npm create vite@latest my-gemini-ai-project --template vue
cd my-gemini-ai-project
npm install

• • 安裝 Google Generative AI API

npm install @google/generative-ai

• • 安裝 daisyUI 樣式框架( 請參考 daisyUI 官方文件進行安裝)

3.建立 AI 角色設定介面 (AIAgentConfig.vue)

建立 src/components/AIAgentConfig.vue，讓使用者可以設定兩個 AI 角色的名稱和描述，使用 v-model 實現雙向綁定。

<script setup>
import { ref } from "vue";
import { generateRandomName, generateRandomDescription } from "../utils/random";

const agent1 = ref({ name: "", description: "" });
const agent2 = ref({ name: "", description: "" });
const emit = defineEmits(["start-conversation"]);

const startConversation = () => {
  if (
    agent1.value.name === "" ||
    agent1.value.description === "" ||
    agent2.value.name === "" ||
    agent2.value.description === ""
  )
    return;
  emit("start-conversation", { agent1: agent1.value, agent2: agent2.value });
};

const generateRandomAgents = async () => {
    agent1.value.name = await generateRandomName();
    agent1.value.description = await generateRandomDescription();
    agent2.value.name = await generateRandomName();
    agent2.value.description = await generateRandomDescription();
};
</script>

<template>
  <div class="flex flex-col items-center">
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-4/5">
      <div className="flex flex-col gap-4">
        <h2 className="text-5xl font-bold">AI角色 1</h2>
        <label className="form-control w-full">
          <div className="label">
            <span className="label-text">名稱</span>
          </div>
          <input
            type="text"
            className="input input-bordered w-full"
            id="agent1Name"
            v-model="agent1.name"
          />
        </label>
        <label className="form-control">
          <div className="label">
            <span className="label-text">描述</span>
          </div>
          <textarea
            className="textarea textarea-bordered h-24"
            id="agent1Description"
            v-model="agent1.description"
          ></textarea>
        </label>
      </div>
      <div className="flex flex-col gap-4">
        <h2 className="text-5xl font-bold">AI角色 2</h2>
        <label className="form-control w-full">
          <div className="label">
            <span className="label-text">名稱</span>
          </div>
          <input
            type="text"
            className="input input-bordered w-full"
            id="agent2Name"
            v-model="agent2.name"
          />
        </label>
        <label className="form-control">
          <div className="label">
            <span className="label-text">描述</span>
          </div>
          <textarea
            className="textarea textarea-bordered h-24"
            id="agent2Description"
            v-model="agent2.description"
          ></textarea>
        </label>
      </div>
    </div>
    <div class="flex gap-2 mt-5">
      <button @click="generateRandomAgents" class="btn btn-accent btn-wide">
        隨機生成
      </button>
      <button @click="startConversation" class="btn btn-info btn-wide">
        開始對話
      </button>
    </div>
  </div>
</template>

<style scoped></style>

4.建立隨機生成角色工具 (random.js)

在 src/utils/random.js 中，使用 Gemini API 來產生隨機的角色名稱和描述：

import { generateContent } from "./gemini";

export const generateRandomName = async () => {
  const prompt = "請隨機生成一個現實生活中會出現的角色的名稱";
  try {
    const response = await generateContent(prompt);
    return response.trim().replace(/"/g, '');
  } catch (error) {
      console.error("Error generating random name:", error);
      return "Error Name"
  }
};

export const generateRandomDescription = async () => {
  const prompt = "請隨機生成一個現實生活中會出現的角色的描述，長度約 20 字左右";
  try {
      const response = await generateContent(prompt);
    return response.trim().replace(/"/g, '');
  } catch (error) {
      console.error("Error generating random description:", error);
       return "Error Description"
  }
};

5.設定 Google Gemini API (gemini.js)

在 src/utils/gemini.js 中，設定 API 金鑰、安全設定，並封裝呼叫 Gemini API 的邏輯：

import {
  GoogleGenerativeAI,
  HarmBlockThreshold,
  HarmCategory,
} from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY);

// 設定安全設定，這裡只是範例，請根據你的需求調整
const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH, // 只封鎖高風險仇恨言論
  },
  {
    category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH, // 只封鎖高風險色情內容
  },
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH, // 只封鎖高風險騷擾
  },
  {
    category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_HIGH, // 封鎖中高風險危險內容
  },
];

const model = genAI.getGenerativeModel({
  model: "gemini-pro",
  safetySettings,
});

export async function generateContent(prompt) {
  try {
    const result = await model.generateContent(prompt);
    const response = await result.response;
    const text = response.text();
    return text;
  } catch (error) {
    console.error("Error in generateContent:", error);
    throw new Error(`Gemini API Error: ${error.message}`);
  }
}

記得在 .env 或 .env.local 檔案中設定你取得的 Google Gemini API 金鑰：

VITE_GEMINI_API_KEY=YOUR_GEMINI_API_KEY

6.建立對話介面和邏輯 (App.vue)

我們修改 src/App.vue，引入 AIAgentConfig 元件，並實作對話邏輯：

<script setup>
import { ref } from "vue";
import AIAgentConfig from "./components/AIAgentConfig.vue";
import { generateContent } from "./utils/gemini";
import { twMerge } from "tailwind-merge";

const conversation = ref([]);
const isConversationRunning = ref(false);
const agents = ref({});
const context = ref("他們正在聊天");

const handleStartConversation = async (agentsData) => {
  console.log("agents", agentsData);
  agents.value = agentsData;
  conversation.value = [];
  isConversationRunning.value = true;
  let currentSpeaker = "agent1";
  const { agent1, agent2 } = agentsData;
  try {
    while (isConversationRunning.value) {
      const prompt = `
        ${agent1.name}的描述:${agent1.description}
            ${agent2.name}的描述:${agent2.description}
            ${currentSpeaker === 'agent1' ? agent1.name : agent2.name}現在要說話, 請回傳下一句話, 請注意回傳的格式為 "回覆內容"
            請不要有其他多餘的文字
            目前對話內容:
            ${conversation.value.map(msg => `${msg.sender}:${msg.text}`).join('\n')}
            `;
      const response = await generateContent(prompt);
      conversation.value.push({
        sender: currentSpeaker === "agent1" ? agent1.name : agent2.name,
        text: response,
      });
      currentSpeaker = currentSpeaker === "agent1" ? "agent2" : "agent1";
    }
  } catch (error) {
    console.error("Error generating conversation:", error);
  }
};

// 停止對話
const stopConversation = () => {
  isConversationRunning.value = false;
};
</script>

<template>
  <div class="container mx-auto p-4">
    <AIAgentConfig @start-conversation="handleStartConversation" />
    <div class="mt-4 w-4/5 mx-auto">
      <div v-if="conversation.length > 0">
        <div
          v-for="(message, index) in conversation"
          :key="index"
          :class="twMerge('chat', index % 2 === 0 ? 'chat-start' : 'chat-end')"
        >
          <div className="chat-header">
            {{ message.sender }}
          </div>
          <div className="chat-bubble">
            {{ message.text }}
          </div>
        </div>
      </div>
      <div v-if="isConversationRunning">
        <span className="loading loading-spinner loading-lg block"></span>
        <button @click="stopConversation" class="btn btn-error mt-4 mx-auto">
          停止對話
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped></style>

過程中遇到的一些事...

在過程中，我遇到的一些狀況，來分享一下：

• Prompt 工程：

要讓 AI 產生更自然、生動的對話，就需要設計有效的 prompt。我嘗試了不同的 prompt 結構，有結構化、情境提示、也有平舖直述式的 prompt，不過有時候對話還是會出現怪怪的現象。

• 安全過濾：

Gemini API 為了避免產生不當內容，有安全過濾機制，但是身為人類就是想看不正經的對話，所以我去設定安全過濾的門檻，但發現官方文件上說不能設置BLOCK_NONE(也就是完全不封鎖、不過濾)，所以最後只能選擇BLOCK_ONLY_HIGH。

以下是一些可用的 HarmCategory ：

• • • HarmCategory.HARM_CATEGORY_HATE_SPEECH: 仇恨言論
    • HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: 色情內容
    • HarmCategory.HARM_CATEGORY_HARASSMENT: 騷擾
    • HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: 危險內容

每個 HarmCategory 可設定以下的 SafetySetting：

• • • BLOCK_NONE: 完全不封鎖
    • BLOCK_ONLY_HIGH: 只封鎖高風險內容
    • BLOCK_MEDIUM_AND_HIGH: 封鎖中高風險內容
    • BLOCK_LOW_AND_ABOVE: 封鎖低、中高風險內容

總結

好了，現在我們有了一個雙 AI 對話模擬器。現在就試試這個 Gemini AI 雙 AI 對話模擬器，看看兩個 AI 會聊出什麼神奇的內容吧！如果有生成甚麼有趣的對話也可以在留言區跟我分享喔~ ( 我超想看的

Gemini AI 打造雙 AI 對話模擬器

專案程式碼連結

https://github.com/koko1108/gemini-chat