ONNX คืออะไร? เจาะลึกวิธีรัน AI บน Frontend แบบ "Local" ไม่ง้อ Cloud (ฉบับ Developer)

ในฐานะ Frontend Developer เราคุ้นเคยกับแพทเทิร์นการทำงานแบบนี้:

1. User กรอกข้อมูล
2. Frontend ส่ง Request ไปหา Backend API
3. Backend (หรือ AI Service) ประมวลผล
4. รอ... รอ...
5. Frontend รับ Response กลับมาแสดงผล

แต่วันนี้โลกกำลังหมุนไปในทิศทางใหม่ครับ โดยเฉพาะในวงการ AI เราเริ่มเห็นเทรนด์ที่เรียกว่า "Edge AI" หรือการย้ายสมองของ AI มาทำงานบนอุปกรณ์ของผู้ใช้ (Client-side) โดยตรง

บทความนี้ผมจะพาไปทำความรู้จักกับ ONNX เทคโนโลยีที่จะเปลี่ยนให้ Web Browser ของเรา กลายเป็นเครื่องจักรประมวลผล AI ได้ โดยไม่ต้องง้อ Server ตลอดเวลาครับ

ONNX คืออะไร? (ฉบับเข้าใจง่ายที่สุด)

ONNX (Open Neural Network Exchange) คือมาตรฐานกลางของไฟล์โมเดล AI ครับ

ถ้าจะเปรียบเทียบให้เห็นภาพ:

• Microsoft Word (.docx) หรือ Pages คือเครื่องมือสร้างเอกสาร (เหมือน PyTorch หรือ TensorFlow ที่ Data Scientist ใช้สร้างโมเดล)
• แต่ถ้าเราส่งไฟล์ .docx ให้เพื่อน เพื่อนอาจจะเปิดไม่ได้ หรือเปิดมาแล้วฟ้อนต์เพี้ยน
• เราจึงต้อง Save as PDF เพื่อให้ใครก็ได้บนโลกนี้เปิดอ่านได้เหมือนกันหมด

ONNX ก็คือไฟล์ PDF ของวงการ AI นั่นเองครับ มันช่วยให้เรานำโมเดลที่ถูกเทรนมาจากเครื่องมือไหนก็ได้ แปลงร่างเป็นไฟล์ .onnx แล้วนำมารันบน Web Browser ผ่าน JavaScript ได้ทันที โดยใช้ไลบรารีที่ชื่อว่า ONNX Runtime Web

(เครดิตภาพ: Sandwiched Developer)

ทำไม Frontend ถึงควรสนใจเรื่องนี้?

การรัน AI บนเครื่องผู้ใช้ (Local Inference) มีข้อดีที่ API บน Cloud ให้ไม่ได้ 3 ข้อหลักๆ ครับ:

1. ความเป็นส่วนตัวต้องมาก่อน (Privacy First) 🛡️

นี่คือจุดแข็งที่สุดครับ ลองนึกภาพแอปการเงินหรือแอปสุขภาพ ที่ต้องประมวลผลข้อมูลส่วนตัวมากๆ การที่เราไม่ต้องส่งข้อมูลพวกนั้นวิ่งผ่านอินเทอร์เน็ตไปที่ Server ย่อมทำให้ผู้ใช้สบายใจกว่า และลดความเสี่ยงเรื่อง Data Privacy (PDPA/GDPR) ได้มหาศาล

2. ความเร็วระดับ "Zero Latency" ⚡

การเรียก API ยังไงก็ต้องมี Network Latency ยิ่งถ้าเน็ตช้า User Experience (UX) ก็จะแย่ตามไปด้วย แต่ถ้าโมเดลอยู่ในเครื่องแล้ว การประมวลผลจะเกิดขึ้นทันที (Instant Feedback) เหมาะมากกับฟีเจอร์อย่าง Auto-complete, Real-time Image processing หรือการจัดหมวดหมู่ข้อความ

3. ใช้งานได้แม้ไม่มีเน็ต (Offline Capability) 📶

ถ้าเราทำ PWA (Progressive Web App) การมี AI ฝังอยู่ในตัวจะทำให้แอปเรายัง "ฉลาด" ได้แม้ User จะออฟไลน์อยู่ ต่างจากการใช้ API ที่เน็ตตัดเมื่อไหร่ คือจบกัน

เริ่มต้นใช้งานยากไหม?

ข่าวดีคือ ไม่ยากอย่างที่คิดครับ สำหรับ Frontend Dev อย่างเรา Microsoft ได้ทำไลบรารีที่ชื่อว่า onnxruntime-web ออกมาให้ใช้ ซึ่งรองรับทั้งการรันผ่าน CPU (WASM) และ GPU (WebGL/WebGPU)

ตัวอย่าง Code Snippet ง่ายๆ ในการโหลดและรันโมเดล:

import * as ort from 'onnxruntime-web';

async function runModel() {
    // 1. สร้าง Session และโหลดไฟล์ .onnx
    const session = await ort.InferenceSession.create('./my-model.onnx');

    // 2. เตรียมข้อมูล Input (Tensor)
    const data = Float32Array.from([1, 2, 3, 4]);
    const tensor = new ort.Tensor('float32', data, [2, 2]);

    // 3. รันโมเดล (Inference)
    const feeds = { input_name: tensor };
    const results = await session.run(feeds);

    // 4. ได้ผลลัพธ์!
    console.log(results.output_name.data);
}

เห็นไหมครับว่า Logic มันคือ JavaScript ที่เราคุ้นเคยเลย!

กลยุทธ์แบบ "Sandwiched" (Hybrid Approach)

แน่นอนว่าเหรียญมีสองด้าน การรันบน Browser ก็มีข้อจำกัด เช่น เราไม่สามารถเอาโมเดลยักษ์ใหญ่อย่าง GPT-4 มายัดลงมือถือ User ได้ (เครื่องคงระเบิดก่อน)

ทางออกที่ดีที่สุดคือ Hybrid Approach ครับ:

• Local (ONNX): ใช้สำหรับงานเล็กๆ ที่ต้องการความเร็วสูง เช่น Face Detection, Background Removal, หรือ Text Classification เบื้องต้น
• Cloud (API): เก็บไว้สำหรับงานหนักๆ ที่ต้องใช้พลังประมวลผลสูง หรือต้องการความแม่นยำระดับสูงสุด

บทสรุป

ในวันที่เส้นแบ่งระหว่าง Frontend และ AI Engineer เริ่มจางลง การมีความรู้เรื่อง ONNX ติดตัวไว้ จะช่วยให้เราออกแบบ Solution ที่ดีขึ้นได้ครับ เราไม่ได้เป็นแค่คน "ทำหน้าเว็บ" อีกต่อไป แต่เรากำลังเป็นคน "สร้าง Intelligence" ให้ไปอยู่ในมือผู้ใช้จริงๆ

ใครที่อยากลองเล่น ผมแนะนำให้ลองเข้าไปดูที่ ONNX Model Zoo (https://github.com/onnx/models) เพื่อหาโมเดลสำเร็จรูปมาลองเล่นบนเว็บดูครับ รับรองว่าจะเปิดโลก Dev ของคุณแน่นอน!

หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ Developer นะครับ ติดตามบทความดีๆ แบบนี้ได้ใหม่ที่ Sandwiched Developer ครับ