คำแนะนำการฝังข้อความสำหรับเว็บ

งานเครื่องมือฝังข้อความ MediaPipe ให้คุณสร้างการนำเสนอแบบตัวเลขของข้อมูลข้อความเพื่อบันทึกความหมายเชิงความหมาย คำแนะนำเหล่านี้จะแสดงวิธีใช้เครื่องมือฝังข้อความสำหรับเว็บและแอป JavaScript

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

ตัวอย่างโค้ด

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

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมการพัฒนาและโปรเจ็กต์โค้ดสำหรับการใช้เครื่องมือฝังข้อความโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้งาน MediaPipe รวมถึงข้อกำหนดเวอร์ชันแพลตฟอร์ม โปรดดูคู่มือการตั้งค่าสำหรับเว็บ

แพ็กเกจ JavaScript

โค้ดเครื่องมือฝังข้อความมีให้ใช้งานผ่านแพ็กเกจ @mediapipe/tasks-text คุณจะค้นหาและดาวน์โหลดไลบรารีเหล่านี้ได้จากลิงก์ที่ให้ไว้ใน คู่มือการตั้งค่าของแพลตฟอร์ม

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

npm install @mediapipe/tasks-text

หากต้องการติดตั้งใช้งานบนเซิร์ฟเวอร์ คุณสามารถใช้บริการเครือข่ายนำส่งข้อมูล (CDN) เช่น jsDelivr เพื่อเพิ่มโค้ดลงในหน้า HTML โดยตรงได้ดังนี้

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

รุ่น

งานเครื่องมือฝังข้อความ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกที่พร้อมใช้งานสำหรับเครื่องมือฝังข้อความได้ในภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล แล้วจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์ โดยทำดังนี้

<dev-project-root>/app/shared/models

สร้างงาน

ใช้หนึ่งในฟังก์ชัน createFrom...() ของเครื่องมือฝังข้อความเพื่อเตรียมงานสำหรับการอนุมาน คุณจะใช้ฟังก์ชัน createFromModelPath() กับเส้นทางแบบสัมพัทธ์หรือสัมบูรณ์ไปยังไฟล์โมเดลที่ฝึกแล้วได้ ตัวอย่างโค้ดด้านล่างสาธิตการใช้ฟังก์ชัน createFromOptions() ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าที่ใช้ได้ที่หัวข้อตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีการสร้างและกำหนดค่างานนี้

async function createEmbedder() {
  const textFiles = await FilesetResolver.forTextTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  textEmbedder = await TextEmbedder.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/text_embedder/universal_sentence_encoder.tflite`
      },
      quantize: true
    }
  );
}
createEmbedder();

ตัวเลือกการกำหนดค่า

งานมีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับแอปพลิเคชันบนเว็บและ JavaScript

ชื่อตัวเลือก	คำอธิบาย	ช่วงของค่า	ค่าเริ่มต้น
`l2Normalize`	ดูว่าจะปรับเวกเตอร์ของฟีเจอร์ที่ส่งคืนด้วยค่าปกติ L2 หรือไม่ ใช้ตัวเลือกนี้เฉพาะเมื่อโมเดลยังไม่มี L2_NORMALIZATION TFLite Op แบบเนทีฟ ในกรณีส่วนใหญ่ ก็มีกรณีเช่นนี้อยู่แล้ว และระบบจะทำการปรับให้สอดคล้องตามมาตรฐาน L2 ผ่านการอนุมาน TFLite โดยไม่จำเป็นต้องใช้ตัวเลือกนี้	`Boolean`	`False`
`quantize`	ควรทำให้การฝังที่ส่งคืนแปลงเป็นไบต์ผ่านการกำหนดปริมาณแบบสเกลาร์ไหม การฝังมีสมมติฐานโดยนัยว่าเป็นหน่วยบรรทัดฐาน ดังนั้นมิติข้อมูลใดๆ ก็มีค่าเป็น [-1.0, 1.0] อย่างแน่นอน หากไม่ใช่กรณีนี้ ให้ใช้ตัวเลือก l2Standardize	`Boolean`	`False`

เตรียมข้อมูล

เครื่องมือฝังข้อความใช้งานได้กับข้อมูลข้อความ (string) โดยงานนี้จะจัดการการประมวลผลอินพุตข้อมูลล่วงหน้า ซึ่งรวมถึงการแปลงข้อมูลเป็นโทเค็นและการประมวลผลล่วงหน้าของ tensor การประมวลผลล่วงหน้าทั้งหมดจะได้รับการจัดการภายในฟังก์ชัน embed ไม่จำเป็นต้องประมวลผลข้อความอินพุตล่วงหน้าเพิ่มเติม

const inputText = "The input text to be embedded.";

เรียกใช้งาน

เครื่องมือฝังข้อความใช้ฟังก์ชัน embed เพื่อทริกเกอร์การอนุมาน สำหรับการฝังข้อความ จะหมายถึงการแสดงเวกเตอร์การฝังสำหรับข้อความอินพุต

โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน

// Wait to run the function until inner text is set
const embeddingResult = textEmbedder.embed(
  inputText
);

แฮนเดิลและแสดงผลลัพธ์

เครื่องมือฝังข้อความจะแสดงผล TextEmbedderResult ที่มีรายการการฝัง (ไม่ว่าจะเป็นจุดลอยตัวหรือแยกเป็นสเกลาร์) สำหรับข้อความอินพุต

ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้

TextEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.2345f, 0.1234f, ..., 0.6789f}
    head_index: 0

คุณเปรียบเทียบความคล้ายคลึงกันเชิงความหมายของการฝัง 2 การฝังได้โดยใช้ฟังก์ชัน TextEmbedder.cosineSimilarity โปรดดูโค้ดต่อไปนี้สำหรับตัวอย่าง

// Compute cosine similarity.
const similarity = TextEmbedder.cosineSimilarity(
  embeddingResult.embeddings[0],
  otherEmbeddingResult.embeddings[0]);

โค้ดตัวอย่างของเครื่องมือฝังข้อความจะแสดงวิธีแสดงผลลัพธ์ของเครื่องมือฝังที่ได้รับจากงาน โปรดดูรายละเอียดในตัวอย่างโค้ด