เริ่มต้นใช้งาน Gemini API ในเว็บแอป

บทแนะนำนี้จะสาธิตวิธีเข้าถึง Gemini API โดยตรงจากเว็บแอปโดยใช้ Google AI JavaScript SDK คุณใช้ SDK นี้ได้หากไม่ต้องการทำงานกับ REST API หรือโค้ดฝั่งเซิร์ฟเวอร์ (เช่น Node.js) โดยตรงสำหรับการเข้าถึงโมเดล Gemini ในเว็บแอป

ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีทำสิ่งต่อไปนี้

บทแนะนำนี้ยังประกอบด้วยส่วนต่างๆ เกี่ยวกับกรณีการใช้งานขั้นสูง (เช่น การนับโทเค็น) รวมถึงตัวเลือกสำหรับการควบคุมการสร้างเนื้อหา

ข้อกำหนดเบื้องต้น

บทแนะนำนี้จะถือว่าคุณคุ้นเคยกับการใช้ JavaScript เพื่อพัฒนาเว็บแอป คู่มือนี้ไม่เกี่ยวข้องกับเฟรมเวิร์ก

ในบทแนะนำนี้ โปรดตรวจสอบว่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณเป็นไปตามข้อกำหนดต่อไปนี้

  • (ไม่บังคับ) Node.js
  • เว็บเบราว์เซอร์สมัยใหม่

ตั้งค่าโปรเจ็กต์

ก่อนที่จะเรียกใช้ Gemini API คุณต้องตั้งค่าโปรเจ็กต์ซึ่งรวมถึงการรับคีย์ API การนำเข้า SDK และการเริ่มต้นโมเดล

ตั้งค่าคีย์ API

หากต้องการใช้ Gemini API คุณจะต้องมีคีย์ API หากยังไม่มี ให้ สร้างคีย์ใน Google AI Studio

รับคีย์ API

รักษาความปลอดภัยของคีย์ API

ขอแนะนำว่าอย่าตรวจสอบคีย์ API ในระบบควบคุมเวอร์ชัน ดังนั้น คุณจึงควรส่งคีย์ API ไปยังแอปก่อนที่จะเริ่มต้นโมเดล

ข้อมูลโค้ดทั้งหมดในบทแนะนำนี้จะถือว่าคุณเข้าถึงคีย์ API เป็นค่าคงที่ส่วนกลาง

นำเข้า SDK และเริ่มต้นโมเดล Generative

คุณต้องนำเข้า SDK และเริ่มต้นโมเดล Generative ก่อนจึงจะทำการเรียก API ได้

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});

      // ...
    </script>
  </body>
</html>

เมื่อระบุโมเดล โปรดทราบข้อมูลต่อไปนี้

  • ใช้รูปแบบที่เหมาะกับ Use Case ของคุณโดยเฉพาะ (เช่น gemini-pro-vision สำหรับอินพุตหลายรูปแบบ) ในคู่มือนี้ วิธีการใช้รายการโมเดลที่แนะนำ สำหรับแต่ละกรณีการใช้งาน

ใช้ Use Case ที่พบบ่อย

เมื่อตั้งค่าโปรเจ็กต์แล้ว คุณจะสํารวจโดยใช้ Gemini API เพื่อนํากรณีการใช้งานต่างๆ ไปใช้ได้ ดังนี้

สร้างข้อความจากการป้อนข้อความเท่านั้น

เมื่ออินพุตของพรอมต์มีเฉพาะข้อความ ให้ใช้โมเดล gemini-pro กับเมธอด generateContent เพื่อสร้างเอาต์พุตข้อความ

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

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

สร้างข้อความจากการป้อนข้อความและรูปภาพ (มัลติโมดัล)

Gemini มีโมเดลแบบหลายโมดัล (gemini-pro-vision) เพื่อให้คุณป้อนทั้งข้อความและรูปภาพ โปรดอ่านข้อกำหนดเกี่ยวกับรูปภาพสำหรับการป้อนข้อมูล

เมื่ออินพุตของพรอมต์มีทั้งข้อความและรูปภาพ ให้ใช้โมเดล gemini-pro-vision กับเมธอด generateContent เพื่อสร้างเอาต์พุตข้อความ

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

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // For text-and-images input (multimodal), use the gemini-pro-vision model
  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

สร้างการสนทนาแบบหลายมุมมอง (แชท)

การใช้ Gemini จะช่วยให้คุณสร้างการสนทนารูปแบบอิสระได้ในหลายๆ จุด SDK ช่วยลดความซับซ้อนของกระบวนการด้วยการจัดการสถานะของการสนทนา จึงต่างจาก generateContent ตรงที่คุณไม่ต้องจัดเก็บประวัติการสนทนาเอง

หากต้องการสร้างการสนทนาแบบมัลติเทิร์น (เช่น แชท) ให้ใช้โมเดล gemini-pro และเริ่มต้นแชทโดยเรียกใช้ startChat() จากนั้นใช้ sendMessage() เพื่อส่ง ข้อความสำหรับผู้ใช้ใหม่ ซึ่งจะต่อท้ายข้อความและการตอบกลับประวัติการแชทด้วย

มี 2 ตัวเลือกที่เป็นไปได้สำหรับ role ที่เชื่อมโยงกับเนื้อหาในการสนทนา ดังนี้

  • user: บทบาทที่แสดงข้อความแจ้ง ค่านี้เป็นค่าเริ่มต้นสำหรับการเรียก sendMessage และฟังก์ชันจะส่งข้อยกเว้นหากมีการผ่านบทบาทอื่น

  • model: บทบาทที่ระบุคำตอบ บทบาทนี้สามารถใช้เมื่อเรียกใช้ startChat() ด้วย history ที่มีอยู่

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

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

ใช้สตรีมมิงเพื่อให้โต้ตอบได้เร็วขึ้น

โดยค่าเริ่มต้น โมเดลจะแสดงผลตอบกลับหลังจากเสร็จสิ้นกระบวนการสร้างทั้งหมด คุณสามารถสร้างการโต้ตอบได้เร็วขึ้นโดยไม่ต้องรอผลลัพธ์ทั้งหมด และใช้การสตรีมเพื่อจัดการผลลัพธ์บางส่วนแทน

ตัวอย่างต่อไปนี้แสดงวิธีการใช้สตรีมมิงด้วยเมธอด generateContentStream เพื่อสร้างข้อความจากข้อความแจ้งการป้อนข้อความและรูปภาพ

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

คุณสามารถใช้วิธีการที่คล้ายกันสำหรับการป้อนข้อความเท่านั้นและกรณีการใช้งานแชท

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

ดูวิธีสร้างอินสแตนซ์ chat จากตัวอย่างแชทด้านบน

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

นำกรณีการใช้งานขั้นสูงไปใช้

กรณีการใช้งานทั่วไปที่อธิบายไว้ในส่วนก่อนหน้าของบทแนะนำนี้ช่วยให้คุณคุ้นเคยกับการใช้ Gemini API ได้ ส่วนนี้จะอธิบายกรณีการใช้งานที่อาจถือว่ามีขั้นสูงกว่า

การเรียกใช้ฟังก์ชัน

การเรียกฟังก์ชันช่วยให้คุณได้รับเอาต์พุตข้อมูลที่มีโครงสร้างจากโมเดล Generative ได้ง่ายขึ้น จากนั้นคุณสามารถใช้เอาต์พุตเหล่านี้เพื่อเรียกใช้ API อื่นๆ และส่งคืนข้อมูลการตอบกลับที่เกี่ยวข้องไปยังโมเดลได้ กล่าวคือ การเรียกใช้ฟังก์ชันช่วยให้คุณเชื่อมต่อโมเดล Generative กับระบบภายนอกได้ เพื่อให้เนื้อหาที่สร้างขึ้นมีข้อมูลที่ถูกต้องและเป็นปัจจุบันที่สุด ดูข้อมูลเพิ่มเติมในบทแนะนำเกี่ยวกับการเรียกใช้ฟังก์ชัน

นับโทเค็น

เมื่อใช้พรอมต์แบบยาว การนับโทเค็นก่อนที่จะส่งเนื้อหาไปยังโมเดลอาจเป็นประโยชน์ ตัวอย่างต่อไปนี้แสดงวิธีใช้ countTokens() สำหรับ Use Case ต่างๆ

// For text-only input
const { totalTokens } = await model.countTokens(prompt);

// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);

// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

ตัวเลือกในการควบคุมการสร้างเนื้อหา

คุณจะควบคุมการสร้างเนื้อหาได้โดยการกำหนดค่าพารามิเตอร์โมเดลและใช้การตั้งค่าความปลอดภัย

กำหนดค่าพารามิเตอร์โมเดล

ทุกพรอมต์ที่คุณส่งไปยังโมเดลจะมีค่าพารามิเตอร์ที่ควบคุมวิธีที่โมเดลสร้างการตอบสนอง โมเดลนี้สามารถสร้างผลลัพธ์ที่แตกต่างกัน สำหรับค่าพารามิเตอร์ที่ต่างกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับพารามิเตอร์โมเดล การกำหนดค่าจะคงอยู่ตลอดอายุการใช้งานของอินสแตนซ์โมเดล

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

ใช้การตั้งค่าความปลอดภัย

คุณใช้การตั้งค่าความปลอดภัยเพื่อปรับโอกาสที่จะได้รับคำตอบที่อาจถือว่าเป็นอันตรายได้ โดยค่าเริ่มต้น การตั้งค่าความปลอดภัยจะบล็อกเนื้อหาที่มีโอกาสปานกลางและ/หรือสูงว่าจะเป็นเนื้อหาที่ไม่ปลอดภัยในมิติข้อมูลทั้งหมด ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าความปลอดภัย

วิธีตั้งค่าความปลอดภัย 1 รายการมีดังนี้

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

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

const model = genAI.getGenerativeModel({ model: "MODEL_NAME", safetySettings });

คุณยังกำหนดการตั้งค่าความปลอดภัยได้มากกว่า 1 รายการดังนี้

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

ขั้นตอนถัดไป

  • การออกแบบพรอมต์คือกระบวนการสร้างพรอมต์ที่กระตุ้นให้เกิดการตอบสนองที่ต้องการจากโมเดลภาษา การเขียนพรอมต์ที่มีโครงสร้างที่ดีเป็นส่วนสำคัญในการรับรองคำตอบที่ถูกต้องและมีคุณภาพสูงจากโมเดลภาษา ดูข้อมูลเกี่ยวกับแนวทางปฏิบัติแนะนำสำหรับการเขียนข้อความแจ้ง

  • Gemini มีโมเดลหลายรูปแบบเพื่อตอบสนองความต้องการในกรณีการใช้งานที่แตกต่างกัน เช่น ประเภทอินพุตและความซับซ้อน การใช้งานในแชทหรืองานภาษาในกล่องโต้ตอบอื่นๆ และข้อจำกัดด้านขนาด ดูข้อมูลเกี่ยวกับรุ่น Gemini ที่มี

  • Gemini มีตัวเลือกในการขอเพิ่มขีดจำกัดอัตราคำขอ ขีดจำกัดอัตราคำขอสำหรับรุ่น Gemini Pro คือ 60 คำขอต่อนาที (RPM)