1. บทนำ
คุณได้เริ่มต้นใช้งาน TensorFlow.js ลองใช้โมเดลที่สร้างไว้ล่วงหน้า หรืออาจสร้างโมเดลของคุณเอง แต่คุณเห็นงานวิจัยที่ล้ำสมัยใน Python และสงสัยว่าโมเดลดังกล่าวจะทำงานในเว็บเบราว์เซอร์ได้ไหมเพื่อทำให้ไอเดียเจ๋งๆ ของคุณกลายเป็นความจริงสำหรับผู้คนนับล้านในแบบที่ปรับขนาดได้ คุ้นๆ ไหม หากเป็นเช่นนั้น Codelab นี้เหมาะสำหรับคุณ
ทีม TensorFlow.js ได้สร้างเครื่องมือที่สะดวกในการแปลงโมเดลที่อยู่ในรูปแบบ SavedModel เป็น TensorFlow.js ผ่านตัวแปลงบรรทัดคำสั่งเพื่อให้คุณเพลิดเพลินกับการใช้โมเดลดังกล่าวด้วยการเข้าถึงและขนาดของเว็บ
สิ่งที่คุณจะได้เรียนรู้
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้โปรแกรมแปลงบรรทัดคำสั่ง TensorFlow.js เพื่อพอร์ต SavedModel ที่สร้างด้วย Python ไปยังรูปแบบ model.json ที่จำเป็นสำหรับการดำเนินการฝั่งไคลเอ็นต์ในเว็บเบราว์เซอร์
ดังนี้
- วิธีสร้างโมเดล ML แบบ Python อย่างง่ายและบันทึกในรูปแบบที่ตัวแปลง TensorFlow.js ต้องการ
- วิธีติดตั้งและใช้ตัวแปลง TensorFlow.js ใน SavedModel ที่คุณส่งออกจาก Python
- นำไฟล์ที่ได้จากการแปลงไปใช้ในเว็บแอปพลิเคชัน JS
- ทำความเข้าใจสิ่งที่ต้องทำเมื่อเกิดข้อผิดพลาด (โมเดลบางรายการอาจไม่แปลง) และตัวเลือกที่คุณมี
ลองนึกภาพว่าคุณสามารถนำงานวิจัยที่เพิ่งเผยแพร่มาใช้และทำให้โมเดลนั้นพร้อมใช้งานสำหรับนักพัฒนา JS หลายล้านคนทั่วโลก หรือคุณอาจใช้สิ่งนี้ด้วยตนเองในการสร้างสรรค์ของคุณเอง ซึ่งใครก็ตามในโลกก็สามารถสัมผัสประสบการณ์ได้หากรันในเว็บเบราว์เซอร์ เนื่องจากไม่จำเป็นต้องมีการตั้งค่าสภาพแวดล้อมหรือการพึ่งพาที่ซับซ้อน พร้อมที่จะแฮ็กแล้วใช่ไหม เริ่มเลย
แชร์สิ่งที่คุณแปลงกับเรา
คุณสามารถใช้สิ่งที่ได้เรียนรู้ในวันนี้เพื่อลองแปลงโมเดลโปรดบางส่วนจาก Python หากคุณทำได้สำเร็จและสร้างเว็บไซต์เดโมที่ใช้งานได้ของโมเดลที่ใช้งานจริง โปรดแท็กเราบนโซเชียลมีเดียโดยใช้แฮชแท็ก #MadeWithTFJS เพื่อให้มีโอกาสที่โปรเจ็กต์ของคุณจะได้รับการแนะนำในบล็อก TensorFlow หรือแม้แต่กิจกรรมแสดงผลงานในอนาคต เราอยากเห็นการนำงานวิจัยที่น่าทึ่งมาใช้บนเว็บมากขึ้น และช่วยให้ผู้คนจำนวนมากขึ้นใช้โมเดลดังกล่าวในรูปแบบที่สร้างสรรค์หรือแปลกใหม่ได้ เช่น ตัวอย่างที่ยอดเยี่ยมนี้
2. TensorFlow.js คืออะไร
TensorFlow.js เป็นไลบรารีแมชชีนเลิร์นนิงแบบโอเพนซอร์สที่สามารถเรียกใช้ได้ทุกที่ที่ JavaScript ทำงานได้ โดยอิงตามไลบรารี TensorFlow ดั้งเดิมที่เขียนด้วย Python และมีเป้าหมายที่จะสร้างประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์และชุด API นี้ขึ้นมาใหม่สำหรับระบบนิเวศของ JavaScript
ตำแหน่งที่ใช้งานได้
เนื่องจาก JavaScript สามารถพกพาได้ คุณจึงเขียนได้ในภาษาเดียวและใช้แมชชีนเลิร์นนิงในแพลตฟอร์มต่อไปนี้ทั้งหมดได้อย่างง่ายดาย
- ฝั่งไคลเอ็นต์ในเว็บเบราว์เซอร์โดยใช้ JavaScript แบบเดิม
- ฝั่งเซิร์ฟเวอร์และแม้แต่อุปกรณ์ IoT เช่น Raspberry Pi ที่ใช้ Node.js
- แอปบนเดสก์ท็อปที่ใช้ Electron
- แอปที่มากับอุปกรณ์เคลื่อนที่ที่ใช้ React Native
นอกจากนี้ TensorFlow.js ยังรองรับแบ็กเอนด์หลายรายการภายในแต่ละสภาพแวดล้อมเหล่านี้ (สภาพแวดล้อมฮาร์ดแวร์จริงที่สามารถดำเนินการได้ เช่น CPU หรือ WebGL) "แบ็กเอนด์" ในบริบทนี้ไม่ได้หมายถึงสภาพแวดล้อมฝั่งเซิร์ฟเวอร์ แต่แบ็กเอนด์สำหรับการดำเนินการอาจเป็นฝั่งไคลเอ็นต์ใน WebGL เป็นต้น เพื่อให้มั่นใจในความเข้ากันได้และยังคงให้การทำงานเป็นไปอย่างรวดเร็ว ปัจจุบัน TensorFlow.js รองรับรายการต่อไปนี้
- การดำเนินการ WebGL ในกราฟิกการ์ดของอุปกรณ์ (GPU) - นี่เป็นวิธีที่เร็วที่สุดในการดำเนินการโมเดลขนาดใหญ่ (ขนาดมากกว่า 3 MB) ด้วยการเร่งความเร็ว GPU
- การดำเนินการ Web Assembly (WASM) ใน CPU - เพื่อปรับปรุงประสิทธิภาพ CPU ในอุปกรณ์ต่างๆ รวมถึงโทรศัพท์มือถือรุ่นเก่าด้วย วิธีนี้เหมาะกับโมเดลขนาดเล็ก (ขนาดน้อยกว่า 3 MB) ซึ่งทำงานบน CPU ด้วย WASM ได้เร็วกว่า WebGL เนื่องจากค่าใช้จ่ายในการอัปโหลดเนื้อหาไปยังหน่วยประมวลผลกราฟิก
- การดำเนินการ CPU - ควรใช้การดำเนินการนี้หากไม่มีสภาพแวดล้อมอื่นๆ วิธีนี้ช้าที่สุดใน 3 วิธี แต่ก็พร้อมให้บริการคุณเสมอ
หมายเหตุ: คุณสามารถเลือกบังคับใช้แบ็กเอนด์ใดแบ็กเอนด์หนึ่งได้หากทราบว่าจะใช้อุปกรณ์ใด หรือจะปล่อยให้ TensorFlow.js ตัดสินใจให้คุณก็ได้หากไม่ได้ระบุ
พลังพิเศษฝั่งไคลเอ็นต์
การเรียกใช้ TensorFlow.js ในเว็บเบราว์เซอร์บนเครื่องไคลเอ็นต์อาจมีประโยชน์หลายประการที่ควรพิจารณา
ความเป็นส่วนตัว
คุณฝึกและจัดประเภทข้อมูลในเครื่องไคลเอ็นต์ได้โดยไม่ต้องส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ของบุคคลที่สาม บางครั้งคุณอาจต้องดำเนินการดังกล่าวเพื่อปฏิบัติตามกฎหมายท้องถิ่น เช่น GDPR หรือเมื่อประมวลผลข้อมูลใดๆ ที่ผู้ใช้อาจต้องการเก็บไว้ในเครื่องของตนและไม่ส่งไปยังบุคคลที่สาม
ความเร็ว
เนื่องจากคุณไม่ต้องส่งข้อมูลไปยังเซิร์ฟเวอร์ระยะไกล การอนุมาน (การจัดประเภทข้อมูล) จึงทำได้เร็วขึ้น และที่ดียิ่งกว่านั้นคือคุณมีสิทธิ์เข้าถึงเซ็นเซอร์ของอุปกรณ์โดยตรง เช่น กล้อง ไมโครโฟน GPS ตัวตรวจวัดความเร่ง และอื่นๆ หากผู้ใช้ให้สิทธิ์เข้าถึงแก่คุณ
การเข้าถึงและการขยายขนาด
เพียงคลิกเดียว ทุกคนทั่วโลกก็สามารถคลิกลิงก์ที่คุณส่ง เปิดหน้าเว็บในเบราว์เซอร์ และใช้ประโยชน์จากสิ่งที่คุณสร้างขึ้นได้ ไม่จำเป็นต้องตั้งค่า Linux ที่ซับซ้อนฝั่งเซิร์ฟเวอร์ด้วยไดรเวอร์ CUDA และอื่นๆ อีกมากมายเพียงเพื่อใช้ระบบแมชชีนเลิร์นนิง
ค่าใช้จ่าย
การไม่มีเซิร์ฟเวอร์หมายความว่าสิ่งเดียวที่คุณต้องจ่ายคือ CDN เพื่อโฮสต์ไฟล์ HTML, CSS, JS และโมเดล ต้นทุนของ CDN ถูกกว่าการเปิดเซิร์ฟเวอร์ (อาจมีกราฟิกการ์ดติดอยู่) ตลอด 24 ชั่วโมงมาก
ฟีเจอร์ฝั่งเซิร์ฟเวอร์
การใช้ประโยชน์จากการติดตั้งใช้งาน TensorFlow.js ใน Node.js จะช่วยให้ใช้ฟีเจอร์ต่อไปนี้ได้
รองรับ CUDA อย่างเต็มรูปแบบ
ในฝั่งเซิร์ฟเวอร์ คุณต้องติดตั้งไดรเวอร์ NVIDIA CUDA เพื่อให้ TensorFlow ทำงานร่วมกับการ์ดกราฟิกได้ (ต่างจากในเบราว์เซอร์ที่ใช้ WebGL ซึ่งไม่ต้องติดตั้ง) แต่การรองรับ CUDA อย่างเต็มรูปแบบจะช่วยให้คุณใช้ความสามารถในระดับล่างของกราฟิกการ์ดได้อย่างเต็มที่ ซึ่งจะช่วยให้การฝึกและเวลาในการอนุมานเร็วขึ้น ประสิทธิภาพเทียบเท่ากับการใช้งาน TensorFlow ใน Python เนื่องจากทั้ง 2 อย่างใช้แบ็กเอนด์ C++ เดียวกัน
ขนาดโมเดล
สำหรับโมเดลที่ล้ำสมัยจากการวิจัย คุณอาจต้องทำงานกับโมเดลขนาดใหญ่มาก ซึ่งอาจมีขนาดเป็นกิกะไบต์ ปัจจุบันโมเดลเหล่านี้ยังไม่สามารถเรียกใช้ในเว็บเบราว์เซอร์ได้เนื่องจากข้อจำกัดของการใช้หน่วยความจำต่อแท็บเบราว์เซอร์ หากต้องการเรียกใช้โมเดลขนาดใหญ่เหล่านี้ คุณสามารถใช้ Node.js ในเซิร์ฟเวอร์ของคุณเองโดยมีข้อกำหนดด้านฮาร์ดแวร์ที่คุณต้องการเพื่อเรียกใช้โมเดลดังกล่าวอย่างมีประสิทธิภาพ
IOT
Node.js รองรับคอมพิวเตอร์แบบแผงวงจรเดี่ยวที่ได้รับความนิยม เช่น Raspberry Pi ซึ่งหมายความว่าคุณสามารถเรียกใช้โมเดล TensorFlow.js บนอุปกรณ์ดังกล่าวได้ด้วย
ความเร็ว
Node.js เขียนด้วย JavaScript ซึ่งหมายความว่า Node.js จะได้รับประโยชน์จากการคอมไพล์แบบทันที ซึ่งหมายความว่าคุณอาจเห็นประสิทธิภาพเพิ่มขึ้นบ่อยครั้งเมื่อใช้ Node.js เนื่องจากระบบจะเพิ่มประสิทธิภาพในขณะรันไทม์ โดยเฉพาะอย่างยิ่งสำหรับการประมวลผลล่วงหน้าใดๆ ที่คุณอาจทำ ตัวอย่างที่ยอดเยี่ยมของเรื่องนี้ดูได้ในกรณีศึกษานี้ ซึ่งแสดงให้เห็นว่า Hugging Face ใช้ Node.js เพื่อเพิ่มประสิทธิภาพโมเดลการประมวลผลภาษาธรรมชาติเป็น 2 เท่าได้อย่างไร
ตอนนี้คุณเข้าใจพื้นฐานของ TensorFlow.js, ตำแหน่งที่สามารถเรียกใช้ และประโยชน์บางอย่างแล้ว มาเริ่มทำสิ่งที่มีประโยชน์ด้วยกันเลย
3. การตั้งค่าระบบ
ในบทแนะนำนี้ เราจะใช้ Ubuntu ซึ่งเป็นการกระจาย Linux ที่ได้รับความนิยมซึ่งหลายๆ คนใช้ และพร้อมใช้งานใน Compute Engine ของ Google Cloud เป็นอิมเมจฐานหากคุณเลือกที่จะทำตามในเครื่องเสมือนที่ใช้ระบบคลาวด์
ในขณะที่เขียน เราสามารถเลือกอิมเมจของ Ubuntu 18.04.4 LTS เมื่อสร้างอินสแตนซ์ Compute Engine ใหม่แบบ Vanilla ซึ่งเป็นสิ่งที่เราจะใช้ แน่นอนว่าคุณสามารถใช้เครื่องของคุณเอง หรือแม้แต่ระบบปฏิบัติการอื่นหากต้องการ แต่คำแนะนำในการติดตั้งและข้อกำหนดอาจแตกต่างกันไปในแต่ละระบบ
การติดตั้ง TensorFlow (เวอร์ชัน Python)
ตอนนี้คุณอาจพยายามแปลงโมเดลที่อิงตาม Python ที่มีอยู่ซึ่งคุณพบหรือจะเขียนขึ้น ก่อนที่เราจะส่งออกไฟล์ "SavedModel" จาก Python ได้ คุณจะต้องตั้งค่า TensorFlow เวอร์ชัน Python ในอินสแตนซ์ของคุณหากยังไม่มี "SavedModel" ให้ดาวน์โหลด
SSH ไปยังเครื่องระบบคลาวด์ที่คุณสร้างไว้ด้านบน แล้วพิมพ์คำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัล
หน้าต่างเทอร์มินัล:
sudo apt update
sudo apt-get install python3
ซึ่งจะช่วยให้มั่นใจได้ว่าเราได้ติดตั้ง Python 3 ในเครื่องแล้ว คุณต้องติดตั้ง Python 3.4 ขึ้นไปเพื่อใช้ TensorFlow
หากต้องการยืนยันว่าติดตั้งเวอร์ชันที่ถูกต้องแล้ว ให้พิมพ์คำสั่งต่อไปนี้
หน้าต่างเทอร์มินัล:
python3 --version
คุณควรเห็นเอาต์พุตบางอย่างที่ระบุหมายเลขเวอร์ชัน เช่น Python 3.6.9 หากคุณเห็นข้อความนี้พิมพ์อย่างถูกต้องและมีค่าสูงกว่า 3.4 แสดงว่าเราพร้อมดำเนินการต่อ
จากนั้นเราจะติดตั้ง PIP สำหรับ Python 3 ซึ่งเป็นเครื่องมือจัดการแพ็กเกจของ Python แล้วอัปเดต ประเภท:
หน้าต่างเทอร์มินัล:
sudo apt install python3-pip
pip3 install --upgrade pip
และเราสามารถยืนยันการติดตั้ง pip3 ได้อีกครั้งโดยใช้คำสั่งต่อไปนี้
หน้าต่างเทอร์มินัล:
pip3 --version
ในขณะที่เขียน เราเห็น pip 20.2.3 พิมพ์ลงในเทอร์มินัลหลังจากเรียกใช้คำสั่งนี้
ก่อนที่จะติดตั้ง TensorFlow ได้ คุณต้องมีแพ็กเกจ Python "setuptools" เวอร์ชัน 41.0.0 ขึ้นไป เรียกใช้คำสั่งต่อไปนี้เพื่อให้แน่ใจว่าได้อัปเดตเป็นเวอร์ชันล่าสุดแล้ว
หน้าต่างเทอร์มินัล:
pip3 install -U setuptools
สุดท้ายนี้ เราจะติดตั้ง TensorFlow สำหรับ Python ได้แล้ว
หน้าต่างเทอร์มินัล:
pip3 install tensorflow
การดำเนินการนี้อาจใช้เวลาสักครู่ โปรดรอจนกว่าจะเสร็จสิ้น
มาตรวจสอบกันว่าติดตั้ง TensorFlow อย่างถูกต้องหรือไม่ สร้างไฟล์ Python ชื่อ test.py ในไดเรกทอรีปัจจุบัน
หน้าต่างเทอร์มินัล:
nano test.py
เมื่อ nano เปิดขึ้น เราจะเขียนโค้ด Python เพื่อพิมพ์เวอร์ชันของ TensorFlow ที่ติดตั้งได้
test.py:
import tensorflow as tf
print(tf.__version__)
กด CTRL + O เพื่อเขียนการเปลี่ยนแปลงลงในดิสก์ แล้วกด CTRL + X เพื่อออกจากโปรแกรมแก้ไข nano
ตอนนี้เราสามารถเรียกใช้ไฟล์ Python นี้เพื่อดูเวอร์ชันของ TensorFlow ที่พิมพ์บนหน้าจอได้แล้ว
หน้าต่างเทอร์มินัล:
python3 test.py
ในขณะที่เขียน เราเห็น 2.3.1 พิมพ์ลงในคอนโซลสำหรับ TensorFlow Python เวอร์ชันที่เราติดตั้ง
4. การสร้างโมเดล Python
ขั้นตอนถัดไปของ Codelab นี้จะอธิบายวิธีการสร้างโมเดล Python อย่างง่ายเพื่อแสดงวิธีบันทึกโมเดลที่ฝึกแล้วซึ่งได้ผลลัพธ์นี้ในรูปแบบ "SavedModel" เพื่อใช้กับโปรแกรมแปลงคำสั่งบรรทัดคำสั่ง TensorFlow.js หลักการจะคล้ายกันสำหรับโมเดล Python ใดๆ ที่คุณพยายามแปลง แต่เราจะทำให้โค้ดนี้เรียบง่ายเพื่อให้ทุกคนเข้าใจได้
มาแก้ไขไฟล์ test.py ที่เราสร้างไว้ในส่วนแรกและอัปเดตโค้ดให้เป็นดังนี้กัน
test.py:
import tensorflow as tf
print(tf.__version__)
# Import NumPy - package for working with arrays in Python.
import numpy as np
# Import useful keras functions - this is similar to the
# TensorFlow.js Layers API functionality.
from tensorflow.keras import Sequential
from tensorflow.keras.layers import Dense
# Create a new dense layer with 1 unit, and input shape of [1].
layer0 = Dense(units=1, input_shape=[1])
model = Sequential([layer0])
# Compile the model using stochastic gradient descent as optimiser
# and the mean squared error loss function.
model.compile(optimizer='sgd', loss='mean_absolute_error')
# Provide some training data! Here we are using some fictional data
# for house square footage and house price (which is simply 1000x the
# square footage) which our model must learn for itself.
xs = np.array([800.0, 850.0, 900.0, 950.0, 980.0, 1000.0, 1050.0, 1075.0, 1100.0, 1150.0, 1200.0, 1250.0, 1300.0, 1400.0, 1500.0, 1600.0, 1700.0, 1800.0, 1900.0, 2000.0], dtype=float)
ys = np.array([800000.0, 850000.0, 900000.0, 950000.0, 980000.0, 1000000.0, 1050000.0, 1075000.0, 1100000.0, 1150000.0, 1200000.0, 1250000.0, 1300000.0, 1400000.0, 1500000.0, 1600000.0, 1700000.0, 1800000.0, 1900000.0, 2000000.0], dtype=float)
# Train the model for 500 epochs.
model.fit(xs, ys, epochs=500, verbose=0)
# Test the trained model on a test input value
print(model.predict([1200.0]))
# Save the model we just trained to the "SavedModel" format to the
# same directory our test.py file is located.
tf.saved_model.save(model, './')
โค้ดนี้จะฝึกการถดถอยเชิงเส้นอย่างง่ายเพื่อเรียนรู้ที่จะประมาณความสัมพันธ์ระหว่าง x (อินพุต) กับ y (เอาต์พุต) ที่ระบุ จากนั้นเราจะบันทึกโมเดลที่ฝึกแล้วลงในดิสก์ ดูรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่แต่ละบรรทัดทำได้ในความคิดเห็นในบรรทัด
หากเราตรวจสอบไดเรกทอรีหลังจากเรียกใช้โปรแกรมนี้ (โดยการเรียก python3 test.py) เราจะเห็นไฟล์และโฟลเดอร์ใหม่บางรายการที่สร้างขึ้นในไดเรกทอรีปัจจุบัน
- test.py
- saved_model.pb
- เนื้อหา
- ตัวแปร
ตอนนี้เราได้สร้างไฟล์ที่ต้องใช้โดยตัวแปลง TensorFlow.js เพื่อแปลงโมเดลนี้ให้ทำงานในเบราว์เซอร์แล้ว
5. การแปลง SavedModel เป็นรูปแบบ TensorFlow.js
ติดตั้งตัวแปลง TensorFlow.js
หากต้องการติดตั้งตัวแปลง ให้เรียกใช้คำสั่งต่อไปนี้
หน้าต่างเทอร์มินัล:
pip3 install tensorflowjs
ง่ายมาก
สมมติว่าเราใช้ตัวแปลงบรรทัดคำสั่ง (tensorflowjs_converter) ไม่ใช่เวอร์ชันวิซาร์ดที่แสดงด้านบน เราสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อแปลงโมเดลที่บันทึกไว้ซึ่งเราเพิ่งสร้างขึ้น และส่งพารามิเตอร์ไปยังตัวแปลงอย่างชัดเจน
หน้าต่างเทอร์มินัล:
tensorflowjs_converter \
--input_format=keras_saved_model \
./ \
./predict_houses_tfjs
เกิดอะไรขึ้นที่นี่ ก่อนอื่นเราจะเรียกใช้ไบนารี tensorflowjs_converter ที่เพิ่งติดตั้ง และระบุว่าเรากำลังพยายามแปลงโมเดล Keras ที่บันทึกไว้
ในโค้ดตัวอย่างด้านบน คุณจะเห็นว่าเรานำเข้า Keras และใช้ API เลเยอร์ระดับสูงเพื่อสร้างโมเดล หากไม่ได้ใช้ Keras ในโค้ด Python คุณอาจต้องใช้รูปแบบอินพุตอื่น
- keras - เพื่อโหลดรูปแบบ Keras (ประเภทไฟล์ HDF5)
- tf_saved_model - เพื่อโหลดโมเดลที่ใช้ TensorFlow Core API แทน Keras
- tf_frozen_model - เพื่อโหลดโมเดลที่มีน้ำหนักที่ตรึงไว้
- tf_hub - โหลดโมเดลที่สร้างจาก TensorFlow Hub
ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบอื่นๆ เหล่านี้ได้ที่นี่
พารามิเตอร์ 2 รายการถัดไปจะระบุโฟลเดอร์ที่โมเดลที่บันทึกอยู่ ในการสาธิตด้านบน เราจะระบุไดเรกทอรีปัจจุบัน และสุดท้ายเราจะระบุไดเรกทอรีที่ต้องการส่งออก Conversion ซึ่งเราได้ระบุไว้ข้างต้นเป็นโฟลเดอร์ชื่อ "predict_houses_tfjs" ในไดเรกทอรีปัจจุบัน
การเรียกใช้คำสั่งข้างต้นจะสร้างโฟลเดอร์ใหม่ในไดเรกทอรีปัจจุบันชื่อ predict_houses_tfjs ซึ่งมี:
- model.json
- Group1-shard1of1.bin
ไฟล์เหล่านี้คือไฟล์ที่เราต้องใช้ในการเรียกใช้โมเดลในเว็บเบราว์เซอร์ บันทึกไฟล์เหล่านี้ไว้เนื่องจากเราจะใช้ไฟล์เหล่านี้ในส่วนถัดไป
6. การใช้โมเดลที่แปลงแล้วในเบราว์เซอร์
โฮสต์ไฟล์ที่แปลงแล้ว
ก่อนอื่นเราต้องวางไฟล์ model.json และไฟล์ *.bin ที่สร้างขึ้นบนเว็บเซิร์ฟเวอร์เพื่อให้เราเข้าถึงไฟล์เหล่านั้นผ่านหน้าเว็บได้ ในวิดีโอสาธิตนี้ เราจะใช้ Glitch.com เพื่อให้คุณทำตามได้ง่าย อย่างไรก็ตาม หากคุณมีพื้นฐานด้านวิศวกรรมเว็บ คุณอาจเลือกเปิดเซิร์ฟเวอร์ HTTP แบบง่ายในอินสแตนซ์เซิร์ฟเวอร์ Ubuntu ปัจจุบันเพื่อดำเนินการนี้แทน คุณเลือกได้เลย
การอัปโหลดไฟล์ไปยัง Glitch
- ลงชื่อเข้าใช้ Glitch.com
- ใช้ลิงก์นี้เพื่อโคลนโปรเจ็กต์ TensorFlow.js ที่เป็นบอยเลอร์เพลต ซึ่งประกอบด้วยไฟล์ HTML, CSS และ JS โครงสร้างพื้นฐานที่นำเข้าไลบรารี TensorFlow.js เพื่อให้เราพร้อมใช้งาน
- คลิกโฟลเดอร์ "ชิ้นงาน" ในแผงด้านซ้าย
- คลิก "อัปโหลดชิ้นงาน" แล้วเลือก
group1-shard1of1.binเพื่ออัปโหลดไปยังโฟลเดอร์นี้ เมื่ออัปโหลดแล้ว ควรมีลักษณะดังนี้
- หากคลิกไฟล์
group1-shard1of1.binที่เพิ่งอัปโหลด คุณจะคัดลอก URL ไปยังตำแหน่งของไฟล์ได้ คัดลอกเส้นทางนี้ตอนนี้ตามที่แสดง:
- ตอนนี้ให้แก้ไข
model.jsonโดยใช้เครื่องมือแก้ไขข้อความที่คุณชื่นชอบในเครื่อง และค้นหา (โดยใช้ CTRL+F) ไฟล์group1-shard1of1.binซึ่งจะมีการกล่าวถึงที่ใดที่หนึ่งในไฟล์
แทนที่ชื่อไฟล์นี้ด้วย URL ที่คุณคัดลอกจากขั้นตอนที่ 5 แต่ให้ลบ https://cdn.glitch.com/ ที่นำหน้าซึ่งข้อบกพร่องสร้างขึ้นจากเส้นทางที่คัดลอก
หลังจากแก้ไขแล้ว ควรมีลักษณะดังนี้ (โปรดสังเกตว่าระบบได้นำเส้นทางเซิร์ฟเวอร์นำออกแล้ว ดังนั้นจึงเหลือเพียงชื่อไฟล์ที่อัปโหลดซึ่งเป็นผลลัพธ์) 
7. ตอนนี้ให้บันทึกและอัปโหลดไฟล์ model.json ที่แก้ไขนี้ไปยัง Glitch โดยคลิกที่ชิ้นงาน แล้วคลิกปุ่ม "อัปโหลดชิ้นงาน" (สำคัญ) หากคุณไม่ใช้ปุ่มจริงและลากและวาง ระบบจะอัปโหลดเป็นไฟล์ที่แก้ไขได้แทนที่จะอัปโหลดใน CDN ซึ่งจะไม่อยู่ในโฟลเดอร์เดียวกัน และจะถือว่ามีเส้นทางแบบสัมพัทธ์เมื่อ TensorFlow.js พยายามดาวน์โหลดไฟล์ไบนารีสำหรับโมเดลที่กำหนด หากทำอย่างถูกต้อง คุณจะเห็นไฟล์ 2 ไฟล์ในโฟลเดอร์ assets ดังนี้ 
เยี่ยมเลย ตอนนี้เราพร้อมที่จะใช้ไฟล์ที่บันทึกไว้กับโค้ดจริงในเบราว์เซอร์แล้ว
การโหลดโมเดล
ตอนนี้เราโฮสต์ไฟล์ที่แปลงแล้วได้แล้ว เราจึงเขียนหน้าเว็บอย่างง่ายเพื่อโหลดไฟล์เหล่านี้และใช้ไฟล์เหล่านั้นในการคาดการณ์ได้ เปิด script.js ในโฟลเดอร์โปรเจ็กต์ Glitch แล้วแทนที่เนื้อหาของไฟล์นี้ด้วยเนื้อหาต่อไปนี้หลังจากที่คุณเปลี่ยน const MODEL_URL ให้ชี้ไปยังลิงก์ Glitch.com ที่สร้างขึ้นสำหรับไฟล์ model.json ที่คุณอัปโหลดใน Glitch
script.js:
// Grab a reference to our status text element on the web page.
// Initially we print out the loaded version of TFJS.
const status = document.getElementById('status');
status.innerText = 'Loaded TensorFlow.js - version: ' + tf.version.tfjs;
// Specify location of our Model.json file we uploaded to the Glitch.com CDN.
const MODEL_URL = ‘YOUR MODEL.JSON URL HERE! CHANGE THIS!';
// Specify a test value we wish to use in our prediction.
// Here we use 950, so we expect the result to be close to 950,000.
const TEST_VALUE = 950.0
// Create an asynchronous function.
async function run() {
// Load the model from the CDN.
const model = await tf.loadLayersModel(MODEL_URL);
// Print out the architecture of the loaded model.
// This is useful to see that it matches what we built in Python.
console.log(model.summary());
// Create a 1 dimensional tensor with our test value.
const input = tf.tensor1d([TEST_VALUE]);
// Actually make the prediction.
const result = model.predict(input);
// Grab the result of prediction using dataSync method
// which ensures we do this synchronously.
status.innerText = 'Input of ' + TEST_VALUE +
'sqft predicted as $' + result.dataSync()[0];
}
// Call our function to start the prediction!
run();
การเรียกใช้โค้ดด้านบนเมื่อคุณเปลี่ยนค่าคงที่ MODEL_URL ให้ชี้ไปยังเส้นทาง model.json จะทําให้เกิดเอาต์พุตที่แสดงด้านล่าง
หากตรวจสอบคอนโซลของเว็บเบราว์เซอร์ (กด F12 เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์) เราจะเห็นคำอธิบายโมเดลสำหรับโมเดลที่โหลดด้วย ซึ่งจะพิมพ์ว่า
เมื่อเปรียบเทียบกับโค้ด Python ที่จุดเริ่มต้นของโค้ดแล็บนี้ เราจะยืนยันได้ว่านี่คือเครือข่ายเดียวกันกับที่เราสร้างขึ้นโดยมีอินพุตแบบหนาแน่น 1 รายการและเลเยอร์แบบหนาแน่น 1 รายการที่มี 1 โหนด
ยินดีด้วย คุณเพิ่งเรียกใช้โมเดลที่ฝึกด้วย Python ที่แปลงแล้วในเว็บเบราว์เซอร์
7. โมเดลที่ไม่ทำ Conversion
บางครั้งระบบจะไม่รองรับโมเดลที่ซับซ้อนมากขึ้นซึ่งคอมไพล์ลงมาเพื่อใช้การดำเนินการที่ไม่ค่อยพบบ่อยสำหรับ Conversion TensorFlow.js เวอร์ชันที่ใช้เบราว์เซอร์เป็นการเขียน TensorFlow ใหม่ทั้งหมด ดังนั้นเราจึงยังไม่รองรับการดำเนินการระดับต่ำทั้งหมดที่ TensorFlow C++ API มี (มีหลายพันรายการ) แต่เราจะเพิ่มการรองรับการดำเนินการเพิ่มเติมเมื่อเวลาผ่านไปเมื่อเราเติบโตขึ้นและการดำเนินการหลักมีความเสถียรมากขึ้น
ในขณะที่เขียน ฟังก์ชันดังกล่าวใน TensorFlow Python ที่สร้าง Op ที่ไม่รองรับเมื่อส่งออกเป็น SavedModel คือ linalg.diag หากเราพยายามแปลงโมเดลที่บันทึกไว้ซึ่งใช้ฟังก์ชันนี้ใน Python (ซึ่งรองรับการดำเนินการที่ได้) เราจะเห็นข้อผิดพลาดที่คล้ายกับข้อผิดพลาดที่แสดงด้านล่าง
ในที่นี้เราจะเห็นว่ามีการไฮไลต์เป็นสีแดงว่าการเรียกใช้ linalg.diag ได้รับการคอมไพล์ลงมาเพื่อสร้าง Op ที่ชื่อ MatrixDiagV3 ซึ่ง TensorFlow.js ไม่รองรับในเว็บเบราว์เซอร์ ณ เวลาที่เขียน Codelab นี้
สิ่งที่ต้องทำ
โดยมี 2 ตัวเลือกต่อไปนี้
- ใช้ Op ที่ขาดหายไปนี้ใน TensorFlow.js - เราเป็นโปรเจ็กต์โอเพนซอร์สและยินดีรับการสนับสนุนสำหรับสิ่งต่างๆ เช่น Op ใหม่ ดูคำแนะนำในการเขียน Op ใหม่สำหรับ TensorFlow.js หากทำได้ คุณจะใช้แฟล็ก
Skip_op_checkในตัวแปลงบรรทัดคำสั่งเพื่อไม่สนใจข้อผิดพลาดนี้และแปลงต่อไปได้ (ระบบจะถือว่าการดำเนินการนี้พร้อมใช้งานในบิลด์ TensorFlow.js ใหม่ที่คุณสร้างขึ้นซึ่งรองรับการดำเนินการที่ขาดหายไป) - พิจารณาว่าส่วนใดของโค้ด Python ที่ทำให้เกิดการดำเนินการที่ไม่รองรับในไฟล์
savedmodelที่คุณส่งออก ในชุดโค้ดขนาดเล็ก การค้นหาอาจทำได้ง่าย แต่ในโมเดลที่ซับซ้อนมากขึ้น การค้นหาอาจต้องใช้เวลาพอสมควร เนื่องจากปัจจุบันยังไม่มีวิธีระบุการเรียกฟังก์ชัน Python ระดับสูงที่สร้าง Op ที่กำหนดเมื่ออยู่ในรูปแบบไฟล์savedmodelแต่เมื่อพบแล้ว คุณอาจเปลี่ยนไปใช้วิธีอื่นที่รองรับได้
8. ขอแสดงความยินดี
ยินดีด้วย คุณได้เริ่มต้นใช้งานโมเดล Python ผ่าน TensorFlow.js ในเว็บเบราว์เซอร์แล้ว
สรุป
ในโค้ดแล็บนี้ เราได้เรียนรู้วิธีการต่อไปนี้
- ตั้งค่าสภาพแวดล้อม Linux เพื่อติดตั้ง TensorFlow ที่อิงตาม Python
- ส่งออก "SavedModel" ของ Python
- ติดตั้งโปรแกรมแปลงบรรทัดคำสั่งของ TensorFlow.js
- ใช้โปรแกรมแปลงบรรทัดคำสั่ง TensorFlow.js เพื่อสร้างไฟล์ฝั่งไคลเอ็นต์ที่จำเป็น
- ใช้ไฟล์ที่สร้างขึ้นในเว็บแอปพลิเคชันจริง
- ระบุโมเดลที่จะไม่ทํา Conversion และสิ่งที่ต้องนําไปใช้เพื่อให้โมเดลทํา Conversion ได้ในอนาคต
สิ่งต่อไปที่ควรทำ
อย่าลืมแท็กเราในทุกสิ่งที่คุณสร้างโดยใช้ #MadeWithTFJS เพื่อให้มีโอกาสได้แสดงบนโซเชียลมีเดียหรือแม้แต่จัดแสดงในกิจกรรม TensorFlow ในอนาคต เราอยากเห็นว่าคุณแปลงอะไรและใช้ฝั่งไคลเอ็นต์ในเบราว์เซอร์
Codelab ของ TensorFlow.js เพิ่มเติมเพื่อเจาะลึก
- เขียนโครงข่ายประสาทเทียมตั้งแต่ต้นใน TensorFlow.js
- สร้างเว็บแคมอัจฉริยะที่ตรวจจับวัตถุได้
- การจัดประเภทรูปภาพที่กำหนดเองโดยใช้การเรียนรู้แบบถ่ายโอนใน TensorFlow.js