คู่มือการตรวจหาภาษาสำหรับเว็บ

งาน MediaPipe Language Detector ให้คุณระบุภาษาของข้อความได้ วิธีการเหล่านี้จะแสดงวิธีใช้ตัวตรวจจับภาษาสำหรับแอป JavaScript ตัวอย่างโค้ดที่อธิบายในวิธีการเหล่านี้จะดูได้ใน GitHub

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

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

โค้ดตัวอย่างสำหรับตัวตรวจจับภาษาจะติดตั้งใช้งานงานนี้โดยสมบูรณ์ใน 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

ระบุเส้นทางของโมเดลด้วยพารามิเตอร์ baseOptions ออบเจ็กต์ modelAssetPath ดังที่แสดงด้านล่าง

baseOptions: {
        modelAssetPath: `/app/shared/models/language_detector.tflite`
      }

สร้างงาน

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

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

async function createDetector() {
  const textFiles = await FilesetResolver.forTextTasks(
      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  languageDetector = await languageDetector.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/language_detector/language_detector/float32/1/language_detector.tflite`
      },
    }
  );
}
createDetector();

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

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

ชื่อตัวเลือก คำอธิบาย ช่วงของค่า ค่าเริ่มต้น
maxResults ตั้งค่าจำนวนสูงสุดของการคาดคะเนภาษาที่มีคะแนนสูงสุดที่ไม่บังคับเพื่อแสดงผล หากค่านี้น้อยกว่า 0 ระบบจะแสดงผลผลลัพธ์ที่มีอยู่ทั้งหมด ตัวเลขจำนวนบวกใดก็ได้ -1
scoreThreshold ตั้งค่าเกณฑ์คะแนนการคาดการณ์ที่จะลบล้างเกณฑ์ที่ระบุไว้ในข้อมูลเมตาของโมเดล (หากมี) ผลลัพธ์ที่ต่ำกว่าค่านี้ถูกปฏิเสธ จำนวนลอยตัวใดก็ได้ ไม่ได้ตั้งค่า
categoryAllowlist ตั้งค่ารายการที่ไม่บังคับของรหัสภาษาที่อนุญาต หากไม่เว้นว่างไว้ การคาดคะเนภาษาที่ไม่อยู่ในชุดรหัสนี้จะถูกกรองออก ตัวเลือกนี้ใช้ด้วยกันกับ categoryDenylist ไม่ได้ และการใช้ทั้ง 2 ผลลัพธ์จึงเกิดข้อผิดพลาด สตริงใดก็ได้ ไม่ได้ตั้งค่า
categoryDenylist ตั้งค่ารายการที่ไม่บังคับของรหัสภาษาที่ไม่ได้รับอนุญาต หาก ไม่ว่างเปล่า การคาดคะเนภาษาที่ใช้รหัสภาษาในชุดนี้จะถูกกรองออก ตัวเลือกนี้ใช้ด้วยกันกับ categoryAllowlist ไม่ได้ และการใช้ทั้ง 2 ผลลัพธ์จึงเกิดข้อผิดพลาด สตริงใดก็ได้ ไม่ได้ตั้งค่า

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

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

const inputText = "The input text for the detector.";

เรียกใช้งาน

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

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

// Wait to run the function until inner text is set
const detectionResult = languageDetector.detect(inputText);

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

งานตัวตรวจจับภาษาจะแสดงผล LanguageDetectorResult ซึ่งประกอบด้วยรายการการคาดคะเนภาษา รวมถึงความน่าจะเป็นสำหรับการคาดคะเนเหล่านั้น ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้

LanguageDetectorResult:
  LanguagePrediction #0:
    language_code: "fr"
    probability: 0.999781

ผลลัพธ์นี้ได้มาจากการเรียกใช้โมเดลกับข้อความอินพุต: "Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent."

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