วิธีใช้งานโมเดล ONNX ใน React Native และ Mobile App Framework อื่น ๆ

ONNX (Open Neural Network Exchange) เป็นฟอร์แมตที่เหมาะมากสำหรับการนำ Machine Learning ไปใช้งานบนอุปกรณ์มือถือ เพราะสามารถเทรนครั้งเดียว แล้วนำไปใช้งานได้ทั้งบน Android, iOS และ framework ข้ามแพลตฟอร์ม เช่น React Native และ Flutter

บทความนี้อธิบายแนวคิดและแนวปฏิบัติในการใช้งาน ONNX บน mobile app โดยเน้นที่ React Native เป็นหลัก พร้อมอธิบายการใช้งาน Local LLM บนอุปกรณ์ (on-device) และตัวอย่าง use case ที่ใช้งานได้จริง

ทำไม ONNX ถึงเหมาะกับ Mobile App

ONNX ได้รับความนิยมสูงในงาน mobile AI เพราะว่า:

ไม่ผูกกับ framework ใด framework หนึ่ง (เทรนจาก PyTorch / TensorFlow ได้)
รองรับการรันบน CPU และ mobile accelerator (NNAPI, CoreML)
ไม่ต้องพึ่ง Python runtime บนอุปกรณ์
เหมาะกับงาน AI แบบ offline และ real-time

สำหรับแอปที่ต้องการ ความเป็นส่วนตัว, latency ต่ำ และ ไม่พึ่ง cloud, ONNX เป็นตัวเลือกที่ดีมาก

ทางเลือกในการรัน ONNX บนมือถือ

แพลตฟอร์ม	Runtime ที่แนะนำ
React Native	onnxruntime-react-native
Android (native)	ONNX Runtime Android
iOS (native)	ONNX Runtime iOS
Flutter	Native ONNX ผ่าน platform channel
Ionic / Capacitor	Native plugin ที่ห่อ ONNX Runtime

การรัน ONNX ด้วย JavaScript ล้วน ๆ บนมือถือ ไม่เหมาะกับ production เนื่องจากประสิทธิภาพและการใช้หน่วยความจำ

ใช้งาน ONNX บน React Native (แนวทางที่แนะนำ)

1. ติดตั้ง ONNX Runtime

แนะนำให้ใช้ React Native CLI เพื่อความเสถียรของ native module

yarn add onnxruntime-react-native
cd ios && pod install && cd ..

ผู้ใช้ Expo ต้องใช้ Expo prebuild และ custom dev client

2. เพิ่มไฟล์โมเดล ONNX เข้าแอป

แนวทางที่นิยม:

ฝังโมเดลไว้ในแอป (assets/models/model.onnx)
ดาวน์โหลดโมเดลครั้งแรกแล้ว cache ไว้ในเครื่อง

เริ่มต้นแนะนำให้ฝังโมเดลไว้ในแอปก่อน

3. โหลดโมเดลและสร้าง Inference Session

import * as ort from "onnxruntime-react-native";

export async function loadModel(modelPath: string) {
  return await ort.InferenceSession.create(modelPath, {
    executionProviders: ["cpu"],
  });
}

4. รัน Inference

export async function runInference(session, inputName, data, dims) {
  const tensor = new ort.Tensor("float32", data, dims);
  const feeds = { [inputName]: tensor };
  return await session.run(feeds);
}

ต้องตรวจสอบให้แน่ใจว่า inputName และ dims ตรงกับโมเดล

Image Preprocessing: จุดที่พลาดบ่อยที่สุด

โมเดล vision ส่วนใหญ่มักต้องการ:

รูปแบบ tensor [1, 3, H, W] หรือ [1, H, W, 3]
ค่า pixel แบบ normalize
ลำดับสี RGB หรือ BGR

การ preprocess ผิดเพียงเล็กน้อย จะทำให้ผลลัพธ์เพี้ยนทันที

ประโยชน์ของการใช้ Local LLM บนอุปกรณ์ (On-device)

เหตุผลหลัก

ข้อมูลผู้ใช้ไม่ออกจากเครื่อง → ปลอดภัยและสอดคล้อง PDPA / GDPR
ใช้งานได้แม้ไม่มีอินเทอร์เน็ต
latency คงที่ เหมาะกับ UX บนมือถือ
ลดค่าใช้จ่าย cloud และ API

ตัวอย่าง Use Case ของ Local LLM บน Mobile App

ภาครัฐ / GovTech

ช่วยอธิบายแบบฟอร์มราชการ
สรุปเอกสารนโยบายแบบ offline

Smart Farming

อธิบายผลการตรวจโรคพืชจากโมเดล vision
สรุปข้อมูล sensor ให้เกษตรกรเข้าใจง่าย

Enterprise / Industrial

อธิบาย alarm เครื่องจักร
สรุปรายงานการซ่อมบำรุง

Consumer App

สรุปโน้ตและอีเมล
ผู้ช่วยส่วนตัวแบบไม่ส่งข้อมูลออก cloud

ข้อจำกัดที่ต้องเข้าใจ

โมเดลต้องมีขนาดเล็ก (มักไม่เกิน 1–4B parameters)
ต้องใช้ quantization (INT8 / INT4)
throughput ต่ำกว่า cloud GPU

การเลือก use case ที่เหมาะสม สำคัญกว่าการใช้โมเดลใหญ่

สรุป

การใช้ ONNX ร่วมกับ Local LLM บนมือถือ ช่วยให้สร้างระบบ AI ที่ เร็ว, ปลอดภัย, ทำงานได้แบบ offline และควบคุมต้นทุนได้ดี

React Native + ONNX Runtime เป็นจุดสมดุลที่ดีระหว่าง performance และความเร็วในการพัฒนา เหมาะกับทั้ง GovTech, Smart Farming, Industrial และ Enterprise App ในโลกจริง