บทแนะนำ: เริ่มต้นใช้งาน Gemini API


บทแนะนำนี้สาธิตวิธีเข้าถึง Gemini API โดยตรงจากเว็บแอปโดยใช้ AI JavaScript SDK ของ Google AI คุณใช้ 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

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

<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 = "...";
      // Reminder: This should only be for local testing

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

      // ...

      // The Gemini 1.5 models are versatile and work with most use cases
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

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

เมื่อระบุโมเดล ให้คำนึงถึงสิ่งต่อไปนี้

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

ใช้ Use Case ทั่วไป

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

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

เมื่ออินพุตพรอมต์มีข้อความเท่านั้น ให้ใช้โมเดล Gemini 1.5 หรือโมเดล Gemini 1.0 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() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  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 1.5) เพื่อให้คุณป้อนได้ทั้งข้อความและรูปภาพ โปรดอ่านข้อกำหนดเกี่ยวกับรูปภาพสำหรับพรอมต์

เมื่ออินพุตพรอมต์มีทั้งข้อความและรูปภาพ ให้ใช้โมเดล Gemini 1.5 ที่มีเมธอด 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() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  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 1.5 หรือโมเดล Gemini 1.0 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() {
  // The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  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);

ใช้ Use Case ขั้นสูง

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

กำลังเรียกฟังก์ชัน

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

นับโทเค็น

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

// 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,
};

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",  generationConfig });

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

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

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

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

// ...

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

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", 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 ที่พร้อมใช้งาน