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

งานเครื่องมือฝังข้อความ 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] ใช้ ตัวเลือก l2Normalize หากไม่ใช่กรณีนี้ 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]);

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