1. บทนำ
คุณได้เริ่มก้าวแรกด้วย TensorFlow.js ลองใช้โมเดลที่สร้างไว้ล่วงหน้าของเรา หรือแม้กระทั่งสร้างขึ้นมาเอง แต่คุณเห็นงานวิจัยสุดล้ำบางอย่างเกิดขึ้นใน Python คุณจึงอยากรู้ว่าจะเรียกใช้ในเว็บเบราว์เซอร์ได้ไหมเพื่อทำให้ไอเดียเจ๋งๆ ที่คุณกลายเป็นจริงสำหรับผู้คนหลายล้านคนด้วยแนวทางที่รองรับการปรับขนาด คุ้นหูไหม หากใช่ นี่คือ CodeLab สำหรับคุณ
ทีม TensorFlow.js ได้สร้างเครื่องมือที่สะดวกในการแปลงโมเดลที่อยู่ในรูปแบบ SavedModel ไปเป็น TensorFlow.js ผ่านตัวแปลงบรรทัดคำสั่ง คุณจึงสนุกกับการใช้โมเดลดังกล่าวที่มีการเข้าถึงและการปรับขนาดเว็บได้
สิ่งที่คุณจะได้เรียนรู้
ใน Code Lab นี้ คุณจะได้เรียนรู้วิธีใช้ตัวแปลงบรรทัดคำสั่ง TensorFlow.js เพื่อพอร์ต RecordModel ที่สร้างจาก Python ไปยังรูปแบบ model.json ที่จำเป็นสำหรับการดำเนินการบนฝั่งไคลเอ็นต์ในเว็บเบราว์เซอร์
กล่าวอย่างเจาะจงคือ
- วิธีสร้างโมเดล Python ML แบบง่ายและบันทึกลงในรูปแบบที่เครื่องมือแปลง TensorFlow.js จำเป็นต้องใช้
- วิธีติดตั้งและใช้ตัวแปลง TensorFlow.js ใน savedModel ซึ่งคุณส่งออกจาก Python
- นำไฟล์ที่ได้จากการแปลงและใช้ในเว็บแอปพลิเคชัน JS
- ทำความเข้าใจสิ่งที่ต้องทำเมื่อเกิดข้อผิดพลาด (มีเพียงบางโมเดลเท่านั้นที่จะแปลง) และตัวเลือกที่คุณมี
ลองนึกภาพว่าคุณสามารถนำงานวิจัยที่ออกใหม่มาและทำให้โมเดลนั้นพร้อมใช้งานสำหรับนักพัฒนาซอฟต์แวร์ JS หลายล้านรายทั่วโลก หรือคุณอาจใช้คีย์นี้ในการสร้างผลงานของคุณเอง ซึ่งทุกคนในโลกก็จะได้สัมผัสประสบการณ์นี้หากทำงานบนเว็บเบราว์เซอร์ โดยไม่จำเป็นต้องพึ่งพาการตั้งค่าสภาพแวดล้อมหรือทรัพยากร Dependency ที่ซับซ้อน พร้อมที่จะถูกแฮ็กแล้วหรือยัง เริ่มเลย
แชร์สิ่งที่คุณทำให้เกิด Conversion กับเรา
คุณสามารถใช้สิ่งที่เราเรียนรู้ในวันนี้เพื่อลองแปลงโมเดลโปรดบางส่วนจาก Python ได้ หากคุณทำได้สำเร็จ และสร้างเว็บไซต์สาธิตที่ใช้งานได้จริงของโมเดล ก็แท็กเราบนโซเชียลมีเดียโดยใช้แฮชแท็ก #MadeWithTFJS เพื่อลุ้นโอกาสที่จะได้ปรากฏบนบล็อก TensorFlow หรือแม้กระทั่งการแสดงและบอกเล่าเหตุการณ์ในอนาคต เราอยากเห็นการนำงานวิจัยที่น่าตื่นตาตื่นใจอื่นๆ มาเผยแพร่บนเว็บ และทำให้ผู้คนจำนวนมากขึ้นได้ใช้โมเดลดังกล่าวด้วยวิธีที่สร้างสรรค์หรือแปลกใหม่ เช่นเดียวกับตัวอย่างที่ยอดเยี่ยมนี้
2. TensorFlow.js คืออะไร
TensorFlow.js เป็นไลบรารีแมชชีนเลิร์นนิงโอเพนซอร์สที่เรียกใช้ JavaScript ได้ทุกที่ API ดังกล่าวอิงตามไลบรารี 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 ชั่วโมงอย่างมาก
ฟีเจอร์ฝั่งเซิร์ฟเวอร์
การใช้ประโยชน์จากการติดตั้งใช้งาน Node.js ของ TensorFlow.js จะเป็นการเปิดใช้ฟีเจอร์ต่อไปนี้
การรองรับ CUDA อย่างเต็มรูปแบบ
สำหรับฝั่งเซิร์ฟเวอร์ สำหรับการเร่งการแสดงผลการ์ดกราฟิก คุณต้องติดตั้งไดรเวอร์ NVIDIA CUDA เพื่อให้ TensorFlow ทำงานกับการ์ดแสดงผล (ต่างจากเบราว์เซอร์ที่ใช้ WebGL ไม่ต้องติดตั้ง) อย่างไรก็ตาม ด้วยการสนับสนุน CUDA เต็มรูปแบบ คุณจะสามารถใช้ประโยชน์จากความสามารถระดับต่ำกว่าของการ์ดแสดงผลได้อย่างเต็มที่ ทำให้การฝึกใช้เวลาและการอนุมานรวดเร็วขึ้นได้ ประสิทธิภาพการทำงานจะเทียบเท่ากับการติดตั้งใช้งาน Python TensorFlow เนื่องจากทั้งคู่ใช้แบ็กเอนด์ 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 ยอดนิยมที่คนส่วนใหญ่ใช้กันภายในบ้านและมีอยู่ใน Google Cloud Compute Engine เป็นอิมเมจฐานหากคุณเลือกที่จะทำตามบนเครื่องเสมือนในระบบคลาวด์
ในขณะที่เขียน เราสามารถเลือกรูปภาพของ Ubuntu 18.04.4 LTS เมื่อสร้างอินสแตนซ์ Vanilla Compute Engine ใหม่ซึ่งเป็นสิ่งที่เราจะใช้ แน่นอนว่าคุณสามารถใช้เครื่องของคุณเองหรือจะใช้ระบบปฏิบัติการอื่นก็ได้หากคุณเลือกใช้ แต่คำแนะนำในการติดตั้งและทรัพยากร Dependency อาจแตกต่างกันไปในแต่ละระบบ
กำลังติดตั้ง 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
เมื่อนาโนเปิดขึ้น เราสามารถเขียนโค้ด Python เพื่อพิมพ์เวอร์ชันของ TensorFlow ที่ติดตั้งไว้:
test.py:
import tensorflow as tf
print(tf.__version__)
กด CTRL + O เพื่อเขียนการเปลี่ยนแปลงลงในดิสก์ จากนั้นกด CTRL + X เพื่อออกจากนาโนเครื่องมือแก้ไข
ตอนนี้เราเรียกใช้ไฟล์ 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 (อินพุต) ของเรา (เอาต์พุต) ที่ให้ไว้ จากนั้นเราจะบันทึกโมเดลที่ผ่านการฝึกที่ได้มาลงในดิสก์ ตรวจดูความคิดเห็นในบรรทัด เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับการทำงานของแต่ละบรรทัด
หากเราตรวจสอบไดเรกทอรีของเราหลังจากเรียกใช้โปรแกรมนี้ (โดยเรียกใช้ python3 test.py) ในตอนนี้ควรมีการสร้างไฟล์และโฟลเดอร์ใหม่ในไดเรกทอรีปัจจุบันของเรา:
- test.py
- saved_model.pb
- เนื้อหา
- ตัวแปร
ตอนนี้เราได้สร้างไฟล์ที่โปรแกรมแปลง TensorFlow.js จำเป็นต้องใช้เพื่อแปลงโมเดลนี้เพื่อเรียกใช้ในเบราว์เซอร์แล้ว
5. การแปลง กำลังบันทึกModel เป็นรูปแบบ TensorFlow.js
ติดตั้งตัวแปลง TensorFlow.js
หากต้องการติดตั้งตัวแปลง ให้เรียกใช้คำสั่งต่อไปนี้
หน้าต่างเทอร์มินัล:
pip3 install tensorflowjs
ง่ายมาก
สมมติว่าเราใช้ตัวแปลงบรรทัดคำสั่ง (tensorflowjs_converter) ไม่ใช่เวอร์ชันวิซาร์ดที่แสดงด้านบน เราสามารถเรียกคำสั่งต่อไปนี้เพื่อแปลงโมเดลที่บันทึกไว้ซึ่งเราเพิ่งสร้างขึ้นและส่งผ่านพารามิเตอร์ไปยังตัวแปลงอย่างชัดเจน
หน้าต่างเทอร์มินัล:
tensorflowjs_converter \
--input_format=keras_saved_model \
./ \
./predict_houses_tfjs
เกิดอะไรขึ้นที่นี่ ก่อนอื่น เราเรียกไบนารี tensorflowjs_converter ที่เราเพิ่งติดตั้งและระบุว่าเรากำลังแปลงโมเดลที่บันทึกไว้ของ Keras
ในโค้ดตัวอย่างด้านบน คุณจะเห็นว่าเราได้นำเข้า Kras และใช้ API เลเยอร์ระดับสูงกว่าในการสร้างโมเดลของเรา หากคุณไม่เคยใช้ Kras ในโค้ด Python คุณอาจต้องใช้รูปแบบการป้อนข้อมูลแบบอื่นดังนี้
- keras - เพื่อโหลดรูปแบบ Kraas (ประเภทไฟล์ HDF5)
- tf_saved_model - เพื่อโหลดโมเดลที่ใช้ API หลัก tensorflow แทน Keras
- tf_frozen_model - เพื่อโหลดโมเดลที่มีน้ำหนักที่ค้าง
- tf_hub - เพื่อโหลดโมเดลที่สร้างจากฮับ tensorflow
ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบอื่นๆ เหล่านี้ได้ที่นี่
พารามิเตอร์ 2 ตัวถัดไประบุว่าโฟลเดอร์โมเดลที่บันทึกไว้นั้นอยู่โฟลเดอร์ใด โดยในการสาธิตข้างต้น เราจะระบุไดเรกทอรีปัจจุบัน และสุดท้าย เราจะระบุไดเรกทอรีที่เราต้องการเอาต์พุตการแปลงของเรา ซึ่งเราระบุข้างต้นเป็นโฟลเดอร์ชื่อ "predict_houses_tfjs" ในไดเรกทอรีปัจจุบัน
การเรียกใช้คำสั่งข้างต้นจะสร้างโฟลเดอร์ใหม่ในไดเรกทอรีปัจจุบันที่ชื่อ predict_houses_tfjs ซึ่งมี :
- model.json
- Group1-shard1of1.bin
นี่เป็นไฟล์ที่เราจำเป็นต้องเรียกใช้โมเดลในเว็บเบราว์เซอร์ บันทึกไฟล์เหล่านี้เนื่องจากเราจะใช้ในส่วนถัดไป
6. การใช้โมเดลที่แปลงแล้วของเราในเบราว์เซอร์
โฮสต์ไฟล์ที่แปลงแล้ว
ก่อนอื่น เราต้องวางไฟล์ model.json และ *.bin ที่สร้างขึ้นบนเว็บเซิร์ฟเวอร์ เพื่อให้เราเข้าถึงได้ผ่านหน้าเว็บ ในการสาธิตนี้ เราจะใช้ Glitch.com เพื่อให้คุณทำตามได้ง่ายๆ อย่างไรก็ตาม หากคุณมาจากภูมิหลังด้านวิศวกรรมเว็บ คุณอาจเลือกที่จะเริ่มการทำงานของเซิร์ฟเวอร์ http แบบง่ายๆ ในอินสแตนซ์เซิร์ฟเวอร์ Ubuntu ปัจจุบันของคุณเพื่อดำเนินการนี้แทน คุณเลือกได้เลย
การอัปโหลดไฟล์ไปยัง Glitch
- ลงชื่อเข้าใช้ Glitch.com
- ใช้ลิงก์นี้เพื่อโคลนโปรเจ็กต์ Boilerplate TensorFlow.js ไฟล์นี้มีไฟล์ Skeleton 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/ นำหน้าที่ Glitch สร้างขึ้นจากเส้นทางที่คัดลอก
หลังจากแก้ไขแล้ว ควรมีหน้าตาเช่นนี้ (โปรดสังเกตวิธีลบเส้นทางเซิร์ฟเวอร์ชั้นนำเพื่อให้เก็บเฉพาะชื่อไฟล์ที่อัปโหลดไว้เท่านั้น): 
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 ในตอนต้นของ Codelab นี้ เรายืนยันได้ว่านี่เป็นเครือข่ายเดียวกับที่เราสร้างด้วยอินพุตแบบหนาแน่น 1 รายการและเลเยอร์ความหนาแน่น 1 เลเยอร์ที่มี 1 โหนด
ยินดีด้วย คุณเพิ่งเรียกใช้โมเดลการฝึก Python ที่แปลงแล้วในเว็บเบราว์เซอร์
7. โมเดลที่ไม่ได้แปลง
บางครั้งระบบจะไม่รองรับรูปแบบที่ซับซ้อนขึ้นซึ่งคอมไพล์ลงเพื่อใช้การดำเนินการที่ไม่ค่อยเป็นที่นิยมสำหรับ Conversion TensorFlow.js เวอร์ชันของเบราว์เซอร์เป็นการเขียนใหม่ทั้งหมดของ TensorFlow ดังนั้นในขณะนี้เราจึงไม่รองรับการดำเนินการระดับต่ำทั้งหมดที่ TensorFlow C++ API มี (มี 1,000 วินาที) แม้เวลาผ่านไปจะค่อยๆ เพิ่มขึ้นเมื่อเราเติบโตขึ้นและการทำงานของระบบปฏิบัติการหลักมีความเสถียรมากขึ้น
ในขณะที่เขียน ฟังก์ชันดังกล่าวอย่างหนึ่งใน TensorFlow Python ที่สร้าง op ที่ไม่รองรับเมื่อส่งออกเป็นโมเดลที่บันทึกไว้คือ linalg.diag หากเราพยายามแปลงโมเดลที่บันทึกไว้ซึ่งใช้สิ่งนี้ใน Python (ซึ่งรองรับการดำเนินการที่โมเดลสร้างขึ้น) เราจะพบข้อผิดพลาดที่คล้ายกับข้อผิดพลาดที่แสดงด้านล่าง
ตรงนี้เราจะเห็นไฮไลต์ด้วยสีแดงซึ่งระบบรวบรวมการเรียก linalg.diag เพื่อสร้างการดำเนินการชื่อ MatrixDiagV3 ซึ่ง TensorFlow.js ไม่รองรับในเว็บเบราว์เซอร์ในขณะที่เขียน Codelab นี้
สิ่งที่ต้องทำ
โดยมี 2 ตัวเลือกต่อไปนี้
- นำ op ที่ขาดไปนี้ไปใช้ใน TensorFlow.js - เราเป็นโปรเจ็กต์โอเพนซอร์สและยินดีรับการสนับสนุนสำหรับสิ่งต่างๆ เช่น การดำเนินการใหม่ ลองดูคำแนะนำในการเขียนการดำเนินการใหม่สำหรับ TensorFlow.js หากทำเองได้ ให้ใช้แฟล็ก
Skip_op_checkบนตัวแปลงบรรทัดคำสั่งเพื่อละเว้นข้อผิดพลาดนี้และทำการแปลงต่อไป (จะถือว่า op นี้มีอยู่ในบิลด์ใหม่ของ TensorFlow.js ที่สร้างขึ้นซึ่งไม่มี op ที่รองรับ) - ตรวจสอบว่าส่วนใดของโค้ด Python ที่ทำให้เกิดการดำเนินการที่ไม่รองรับในไฟล์
savedmodelที่คุณส่งออก แค่ใส่โค้ดชุดเล็กๆ สิ่งนี้ก็อาจค้นหาได้ง่าย แต่ในโมเดลที่ซับซ้อนขึ้นอาจต้องมีการตรวจสอบพอสมควรเนื่องจากปัจจุบันยังไม่มีวิธีระบุการเรียกใช้ฟังก์ชัน Python ระดับสูงที่ทำให้เกิด op เพียงครั้งเดียวในรูปแบบไฟล์savedmodelเมื่อพบแล้ว คุณสามารถเปลี่ยนการตั้งค่านี้ไปใช้วิธีอื่นที่รองรับได้
8. ขอแสดงความยินดี
ยินดีด้วย คุณได้ทำขั้นตอนแรกๆ ในการใช้โมเดล Python ผ่าน TensorFlow.js ในเว็บเบราว์เซอร์แล้ว
สรุป
ใน Code Lab นี้ เราได้เรียนรู้วิธีต่อไปนี้
- ตั้งค่าสภาพแวดล้อม Linux เพื่อติดตั้ง TensorFlow ที่ใช้ Python
- ส่งออก Python "SavedModel"
- ติดตั้งตัวแปลงบรรทัดคำสั่ง TensorFlow.js
- ใช้ตัวแปลงบรรทัดคำสั่ง TensorFlow.js เพื่อสร้างไฟล์ฝั่งไคลเอ็นต์ที่จำเป็น
- ใช้ไฟล์ที่สร้างขึ้นในเว็บแอปพลิเคชันจริง
- ระบุรูปแบบที่จะไม่ทำให้เกิด Conversion และสิ่งที่จำเป็นต้องนำมาใช้เพื่อให้ทำ Conversion ได้ในอนาคต
สิ่งที่ต้องทำต่อไป
อย่าลืมแท็กเราในทุกสิ่งที่คุณสร้างโดยใช้ #MadeWithTFJS เพื่อรับโอกาสในการปรากฏตัวบนโซเชียลมีเดียหรือแม้แต่จัดแสดงผลงานในกิจกรรม TensorFlow ในอนาคต เราต้องการเห็นสิ่งที่คุณแปลงและใช้ฝั่งไคลเอ็นต์ในเบราว์เซอร์
Codelab ของ TensorFlow.js เพิ่มเติมที่ช่วยให้ข้อมูลเจาะลึกยิ่งขึ้น
- เขียนโครงข่ายระบบประสาทเทียมตั้งแต่เริ่มต้นใน TensorFlow.js
- สร้างเว็บแคมอัจฉริยะที่ตรวจจับวัตถุได้
- การจัดประเภทรูปภาพที่กำหนดเองโดยใช้การเรียนรู้การโอนใน TensorFlow.js