Gemini 1.5 Flash ลดราคา สิทธิ์เข้าถึงการปรับแต่งสำหรับนักพัฒนาซอฟต์แวร์ทั้งหมด และอีกมากมาย ดูข้อมูลเพิ่มเติม

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

เริ่มต้น

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

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

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

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

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

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

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

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

ใช้ 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 ส่วนนี้อธิบายถึงบางส่วน Use Case ที่อาจถือว่าเป็น Use Case ขั้นสูงกว่า

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

การเรียกฟังก์ชันช่วยให้คุณได้รับเอาต์พุตของ Structured Data ได้ง่ายขึ้น โมเดล 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 ที่พร้อมใช้งาน