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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ด Text Embedder พร้อมใช้งานผ่านแพ็กเกจ @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 ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ฝึกแล้วซึ่งพร้อมใช้งานสำหรับ Text Embedder ได้ที่ส่วนภาพรวมของงานโมเดล

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

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

สร้างงาน

ใช้ฟังก์ชัน Text Embedder 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 หรือไม่ ใช้ตัวเลือกนี้เฉพาะในกรณีที่โมเดลยังไม่มี Op TFLite ของ L2_NORMALIZATION ดั้งเดิม ในกรณีส่วนใหญ่ โมเดลจะมี Op ดังกล่าวอยู่แล้ว และ การทําให้เป็นมาตรฐาน L2 จึงทําได้ผ่านการอนุมาน TFLite โดยไม่ต้องใช้ ตัวเลือกนี้ Boolean False
quantize ควรควอนไทซ์การฝังที่ส่งคืนเป็นไบต์ผ่าน การควอนไทซ์สเกลาร์หรือไม่ ระบบจะถือว่าการฝังมีบรรทัดฐานของหน่วยโดยปริยาย และ ดังนั้นจึงรับประกันได้ว่ามิติข้อมูลใดๆ จะมีค่าอยู่ในช่วง [-1.0, 1.0] ใช้ ตัวเลือก l2Normalize หากไม่ใช่กรณีนี้ Boolean False

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

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

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

เรียกใช้งาน

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

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

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

จัดการและแสดงผลลัพธ์

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

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

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

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

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

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