1. บทนำ
คุณจึงสร้างโมเดลแมชชีนเลิร์นนิงที่กําหนดเองด้วย TensorFlow.js แล้ว แต่ตอนนี้คุณต้องฝากโมเดลไว้ที่ใดที่หนึ่งเพื่อใช้ในเว็บไซต์ที่ต้องการ มีหลายวิธีในการดำเนินการนี้ แต่วันนี้เราจะดูว่าการใช้ Firebase Hosting นั้นง่ายเพียงใด ซึ่งยังให้ประโยชน์เพิ่มเติม เช่น การกำหนดเวอร์ชัน การแสดงโมเดลผ่านการเชื่อมต่อที่ปลอดภัย และอื่นๆ อีกมากมาย
สิ่งที่คุณจะสร้าง
ในโปรแกรมแก้ไขโค้ดนี้ คุณจะได้สร้างระบบแบบครบวงจรที่โฮสต์และเรียกใช้โมเดล TensorFlow.js ที่บันทึกไว้เองได้ พร้อมกับชิ้นงานที่เกี่ยวข้อง เช่น HTML, CSS และ JavaScript เราจะสร้างโมเดลที่เบามากและเรียบง่ายซึ่งสามารถคาดการณ์ค่าเอาต์พุตที่เป็นตัวเลขโดยอิงตามค่าอินพุตบางค่า (เช่น ราคาบ้านโดยอิงตามพื้นที่ใช้สอย) และโฮสต์โมเดลผ่าน Firebase Hosting เพื่อให้ใช้งานได้ในวงกว้าง
สิ่งที่คุณจะได้เรียนรู้
- วิธีบันทึกโมเดล TensorFlow.js ที่กําหนดเองในรูปแบบที่ถูกต้อง
- วิธีตั้งค่าบัญชี Firebase สําหรับโฮสติ้ง
- วิธีทำให้ชิ้นงานใช้งานได้กับโฮสติ้งของ Firebase
- วิธีทำให้โมเดลเวอร์ชันใหม่ใช้งานได้
โปรดทราบว่าจุดเน้นของโค้ดแล็บนี้คือวิธีใช้โมเดลที่ผ่านการฝึกแบบกำหนดเองและโฮสต์เพื่อใช้งาน ไม่ใช่หลักสูตรในการสร้างสถาปัตยกรรมโมเดลที่สมบูรณ์แบบ ดังนั้นเราจะข้ามการสร้างโมเดลแมชชีนเลิร์นนิงด้วยตัวอย่างง่ายๆ หลักการจะเหมือนกันไม่ว่าคุณจะสร้างโมเดลใดด้วยตนเอง
แชร์สิ่งที่คุณสร้างขึ้นกับเรา
หากสร้างสิ่งเจ๋งๆ โดยใช้แพ็กเกจนี้ โปรดแจ้งให้เราทราบ เราอยากเห็นผลงานของคุณ
แท็กเราบนโซเชียลมีเดียโดยใช้แฮชแท็ก #MadeWithTFJS เพื่อให้โปรเจ็กต์ของคุณมีโอกาสได้แสดงในบล็อก TensorFlow หรือแม้แต่กิจกรรมในอนาคต เช่น Show & Tells
2. โฮสติ้งของ Firebase คืออะไร
โฮสติ้งของ Firebase ให้บริการโฮสติ้งระดับใช้งานได้จริงที่รวดเร็วและปลอดภัยสําหรับเว็บแอป เนื้อหาแบบคงที่ / แบบไดนามิก และไมโครเซอร์วิส
เพียงใช้คำสั่งเดียว คุณก็สามารถทำให้เว็บแอปใช้งานได้อย่างรวดเร็วและแสดงเนื้อหาไปยัง CDN (เครือข่ายนำส่งข้อมูล) ทั่วโลกได้ เพื่อให้เนื้อหาพร้อมใช้งานโดยมีเวลาในการตอบสนองต่ำเกือบทุกที่ นอกจากนี้ คุณยังจับคู่โฮสติ้งของ Firebase กับ Cloud Functions หรือ Cloud Run ของ Firebase เพื่อสร้างและโฮสต์ Microservice ได้ด้วย แต่การดำเนินการดังกล่าวอยู่นอกขอบเขตของโค้ดแล็บนี้
ความสามารถหลักของโฮสติ้งของ Firebase
- แสดงเนื้อหาผ่านการเชื่อมต่อที่ปลอดภัย - เว็บสมัยใหม่มีความปลอดภัย บ่อยครั้งที่ต้องส่งเว็บไซต์ผ่านบริบทที่ปลอดภัยเพื่อเข้าถึงเซ็นเซอร์ฝั่งไคลเอ็นต์ ระบบจะแสดงเนื้อหาอย่างปลอดภัยเสมอเนื่องจากมีการสร้าง SSL ที่ไม่ต้องกำหนดค่าไว้ในโฮสติ้งของ Firebase
- โฮสต์เนื้อหาแบบคงที่และแบบไดนามิก รวมถึงไมโครเซอร์วิสที่รองรับการตรวจสอบสิทธิ์เพื่อให้มีเพียงผู้ใช้ที่เข้าสู่ระบบเท่านั้นที่โหลด / ดูไฟล์เหล่านั้นได้หากต้องการ
- แสดงเนื้อหาอย่างรวดเร็ว - ไฟล์แต่ละรายการที่คุณอัปโหลดจะแคชบน SSD ที่ CDN EDGE ทั่วโลก เนื้อหาจะแสดงอย่างรวดเร็วไม่ว่าผู้ใช้จะอยู่ที่ใดก็ตาม
- ติดตั้งใช้งานเวอร์ชันใหม่ด้วยคำสั่งเดียว - คุณทำให้แอปทำงานได้ในไม่กี่วินาทีโดยใช้อินเทอร์เฟซบรรทัดคำสั่งของ Firebase
- ย้อนกลับได้ด้วยการคลิกเดียว - การทำให้ใช้งานได้อย่างรวดเร็วนั้นเป็นเรื่องดี แต่หากเลิกทำการกระทำที่ผิดพลาดได้ด้วยก็ดียิ่งขึ้นไปอีก โฮสติ้งของ Firebase ให้คุณจัดการรุ่นและเวอร์ชันเต็มได้ด้วยการคลิกย้อนกลับเพียงคลิกเดียว
ไม่ว่าคุณจะใช้งานหน้า Landing Page ของแอปแบบง่ายหรือ Progressive Web App (PWA) แบบซับซ้อน โฮสติ้งจะให้โครงสร้างพื้นฐาน ฟีเจอร์ และเครื่องมือที่ปรับให้เหมาะกับการใช้งานและการจัดการเว็บไซต์และแอป
โดยค่าเริ่มต้น โปรเจ็กต์ Firebase ทุกโปรเจ็กต์จะมีโดเมนย่อยฟรีในโดเมน web.app และ firebaseapp.com เว็บไซต์ทั้ง 2 นี้แสดงเนื้อหาและการกำหนดค่าที่ติดตั้งใช้งานเดียวกัน คุณยังเชื่อมต่อชื่อโดเมนของคุณเองกับเว็บไซต์ที่โฮสต์โดย Firebase ได้ด้วยหากต้องการ
ขั้นตอนการติดตั้งใช้งาน
- ตั้งค่าโปรเจ็กต์
- ติดตั้งและกำหนดค่าอินเทอร์เฟซบรรทัดคำสั่งของ Firebase
- ติดตั้งใช้งานเว็บไซต์
- ลิงก์กับเว็บแอป Firebase สําหรับการตรวจสอบประสิทธิภาพ (ไม่บังคับ)
แต่ก่อนอื่น เราต้องสร้างโมเดลแมชชีนเลิร์นนิงและเว็บแอปเพื่อนำไปใช้งาน มาสร้างกันเลย
3. โมเดลแมชชีนเลิร์นนิงแบบง่ายเพื่อคาดการณ์ราคาบ้าน
วัตถุประสงค์ของแบบฝึกหัดนี้คือเราจะสร้างโมเดล ML ที่ง่ายมากซึ่งคาดการณ์ค่าตัวเลข เราจะพยายามใช้แมชชีนเลิร์นนิงเพื่อคาดการณ์มูลค่าของบ้านสมมติโดยอิงจากขนาดเป็นตารางฟุตเพื่อวัตถุประสงค์ในการอธิบายเท่านั้น จริงๆ แล้วสําหรับการสาธิตนี้ เราจะคูณพื้นที่ใช้สอยของบ้านด้วย 1, 000 เพื่อหาค่าที่คาดการณ์สําหรับข้อมูลการฝึก แต่แมชชีนเลิร์นนิงจะต้องเรียนรู้สิ่งนี้ด้วยตนเอง
ในชีวิตจริง คุณอาจเลือกใช้ข้อมูลในชีวิตจริงซึ่งอาจมีความสัมพันธ์ที่ซับซ้อนกว่า (เช่น สำหรับบ้านหลังเล็ก อาจมีเพียง 500 เท่าของขนาดเพื่อประมาณมูลค่าในสกุลเงินดอลลาร์ แต่หลังจากเกณฑ์หนึ่งๆ มูลค่าจะค่อยๆ เพิ่มขึ้นเป็น 1, 000 เท่า เป็นต้น) และคุณอาจต้องใช้โมเดลขั้นสูงมากขึ้นเพื่อเรียนรู้วิธีที่ดีที่สุดในการคาดการณ์มูลค่าเหล่านั้น
โมเดลที่เราสร้างในวันนี้ (การหาค่าสัมประสิทธิ์การถดถอยเชิงเส้น) สามารถใช้คาดการณ์สิ่งอื่นๆ อีกมากมายได้เมื่อมีข้อมูลในโลกแห่งความเป็นจริงเพียงพอ และเริ่มต้นใช้งาน Use Case สมมติด้านบนได้ง่ายๆ แต่วันนี้เราจะเน้นที่การเรียนรู้วิธีบันทึกและทำให้โมเดลใช้งานได้ เทียบกับการออกแบบและการเพิ่มประสิทธิภาพโมเดลสําหรับ Use Case หนึ่งๆ มาเริ่มกันเลย
ข้อมูลการฝึกอบรมและทดสอบ
โมเดล ML ทั้งหมดเริ่มต้นด้วยการรับตัวอย่างข้อมูลการฝึกอบรมที่เราสามารถใช้เพื่อสอนโมเดลให้คาดการณ์ค่าในอนาคตได้ โดยปกติแล้ว คุณอาจนำข้อมูลดังกล่าวมาจากฐานข้อมูล โฟลเดอร์ไฟล์ CSV หรืออื่นๆ แต่เราจะกำหนดค่าตัวอย่าง 20 รายการเป็นอาร์เรย์ใน JavaScript โดยตรงดังที่แสดงด้านล่าง เราขอแนะนำให้ทำซ้ำโค้ดนี้ในสภาพแวดล้อมที่คุณเขียนโค้ดได้สะดวก เช่น Glitch.com หรือเครื่องมือแก้ไขข้อความของคุณเองในเครื่องหากเรียกใช้เซิร์ฟเวอร์ใน localhost ได้
model.js
// House square footage.
const data = [800, 850, 900, 950, 980, 1000, 1050, 1075, 1100, 1150, 1200, 1250, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];
// Estimated dollar cost of house for each piece of data above (1000x square footage).
const answers = [800000, 850000, 900000, 950000, 980000, 1000000, 1050000, 1075000, 1100000, 1150000, 1200000, 1250000 , 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000];
// Testing data separate from training data.
const dataTest = [886, 1225, 500];
const answersTest = [886000, 1225000, 500000];
ดังที่คุณเห็น ข้อมูลแต่ละรายการมีค่าคำตอบที่สอดคล้องกัน ซึ่งเป็นค่าที่เราพยายามจะคาดการณ์ในอนาคต (คุณอาจจินตนาการว่าค่าเหล่านี้เป็นค่า x และ y ในกราฟ 2 มิติธรรมดา)
ดังนั้นสําหรับค่า 800 เราต้องการสร้างคําตอบเอาต์พุตโดยประมาณเป็น $800,000 สำหรับค่า 900 เราจะแสดงผลเป็น $900,000 เป็นต้น โดยพื้นฐานแล้ว ระบบจะคูณตัวเลขด้วย 1,000 แต่โมเดล ML ไม่รู้ความสัมพันธ์ง่ายๆ ของ 1000 * N นี้ และจะต้องเรียนรู้ด้วยตนเองจากตัวอย่างที่เราให้ไว้
โปรดทราบว่าเรามีข้อมูลการทดสอบบางส่วนที่แยกจากข้อมูลการฝึกโดยสิ้นเชิง วิธีนี้ช่วยให้เราประเมินโมเดลที่ผ่านการฝึกเพื่อดูประสิทธิภาพของโมเดลกับข้อมูลที่ไม่เคยเห็นมาก่อน
เราจะโหลดสคริปต์นี้พร้อมกับไลบรารี TensorFlow.js โดยใช้ HTML ต่อไปนี้
train.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training Model</title>
<meta charset="utf-8">
</head>
<body>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import our JS code to train the model -->
<script src="/model.js" defer></script>
</body>
</html>
การฝึกโมเดล
ต่อไปคือเวลาฝึกโมเดลโดยเพิ่มโค้ดด้านล่างลงในโค้ด JS ที่มีอยู่ด้านบนที่ส่วนท้ายของไฟล์
เราได้เพิ่มความคิดเห็นไว้สำหรับผู้ที่อยากรู้ แต่อย่างที่ได้กล่าวไปก่อนหน้านี้ว่า Codelab นี้เกี่ยวข้องกับการนำโมเดลที่บันทึกไว้และโฮสต์โมเดลนั้นมากกว่า โปรดดู Codelab เพิ่มเติมที่ลิงก์ไว้ท้ายบทนี้หากต้องการทําความเข้าใจการสร้างโมเดลอย่างละเอียด ในระหว่างนี้ คุณสามารถคัดลอกและวางโค้ดลงในโปรเจ็กต์ได้
model.js
// Create Tensor representations of our vanilla JS arrays above
// so can be used to train our model.
const trainTensors = {
data: tf.tensor2d(data, [data.length, 1]),
answer: tf.tensor2d(answers, [answers.length, 1])
};
const testTensors = {
data: tf.tensor2d(dataTest, [dataTest.length, 1]),
answer: tf.tensor2d(answersTest, [answersTest.length, 1])
};
// Now actually create and define model architecture.
const model = tf.sequential();
// We will use one dense layer with 1 neuron and an input of
// a single value.
model.add(tf.layers.dense({inputShape: [1], units: 1}));
// Choose a learning rate that is suitable for the data we are using.
const LEARNING_RATE = 0.0001;
train();
async function train() {
// Compile the model with the defined learning rate and specify
// our loss function to use.
model.compile({
optimizer: tf.train.sgd(LEARNING_RATE),
loss: 'meanAbsoluteError'
});
// Finally do the training itself over 500 iterations of the data.
// As we have so little training data we use batch size of 1.
// We also set for the data to be shuffled each time we try
// and learn from it.
let results = await model.fit(trainTensors.data, trainTensors.answer, {epochs: 500, batchSize: 1, shuffle: true});
// Once trained we can evaluate the model.
evaluate();
}
async function evaluate(stuff) {
// Predict answer for a single piece of data.
model.predict(tf.tensor2d([[768]])).print();
}
เมื่อใช้โค้ดข้างต้น เราสามารถฝึกโมเดลให้คาดการณ์ค่าเอาต์พุตจากค่าอินพุตได้ เมื่อเรียกใช้โค้ดด้านบน ฉันได้ค่าคาดการณ์ 768,073 สำหรับค่าอินพุต 768 ซึ่งแสดงในคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (กด F12 เพื่อเปิดคอนโซลหากยังไม่ได้เปิด) ค่านี้เป็นค่าประมาณราคาบ้านที่ค่อนข้างดี เนื่องจากเราได้แสดงตัวอย่างที่สูงกว่าค่าอินพุต 1,000 เท่า หมายเหตุ: ค่าที่คาดการณ์อาจแตกต่างกันเล็กน้อย ซึ่งถือเป็นเรื่องปกติ
หากพอใจกับประสิทธิภาพนี้ สิ่งที่ต้องทำตอนนี้คือบันทึกรูปแบบนี้ลงในดิสก์เพื่อให้อัปโหลดไปยังโฮสติ้ง Firebase ได้
การบันทึกโมเดล
การเพิ่มโค้ดด้านล่างลงท้ายฟังก์ชัน evaluate (หลัง model.predict) ด้านบนช่วยให้เราส่งออกโมเดลที่ได้หลังจากการฝึกอบรมเสร็จสมบูรณ์จากเว็บเบราว์เซอร์โดยตรงและบันทึกลงในดิสก์ได้ จากนั้นจึงโฮสต์ไว้ที่ใดก็ได้และนำไปใช้ในภายหลังโดยไม่ต้องฝึกใหม่ทุกครั้งที่โหลดหน้าเว็บ
model.js
await model.save('downloads://my-model');
ตอนนี้หากคุณไปที่ train.html และเรียกใช้หน้าเว็บ ระบบควรฝึกโมเดล (ซึ่งอาจใช้เวลา 2-3 วินาที) จากนั้นระบบจะแจ้งให้ดาวน์โหลดโมเดลที่ฝึกแล้วเมื่อเสร็จสมบูรณ์
4. การตั้งค่า Firebase
ลงชื่อเข้าใช้ Firebase และสร้างโปรเจ็กต์
หากเพิ่งเริ่มใช้ Firebase คุณลงชื่อสมัครใช้ได้ง่ายๆ โดยใช้บัญชี Google เพียงไปที่ https://firebase.google.com/ แล้วลงชื่อเข้าใช้ด้วยบัญชี Google ปกติที่ต้องการใช้ เมื่อระบบเปลี่ยนเส้นทางคุณไปยังหน้าแรก ให้คลิก "ไปที่คอนโซล" ที่ด้านขวาบนของหน้า
เมื่อระบบเปลี่ยนเส้นทางคุณไปยังคอนโซล คุณควรเห็นหน้า Landing Page ประมาณนี้
เพียงคลิก "เพิ่มโปรเจ็กต์" ตามที่แสดงเพื่อสร้างโปรเจ็กต์ Firebase ใหม่ ตั้งชื่อโปรเจ็กต์ที่ไม่ซ้ำกัน ยอมรับข้อกําหนด แล้วคลิก "ดำเนินการต่อ"
ถัดไป ระบบจะถามว่าคุณต้องการเพิ่มข้อมูลวิเคราะห์ลงในโปรเจ็กต์หรือไม่ หากต้องการเข้าถึงข้อมูลวิเคราะห์ดังกล่าว โปรดเปิดใช้ตัวเลือกนี้ แล้วคลิก "ต่อไป" ดังที่แสดง
หากทุกอย่างเรียบร้อยดี คุณจะเห็นหน้า "โปรเจ็กต์พร้อมใช้งาน" ดังที่แสดงด้านล่าง
ไชโย เรามีโปรเจ็กต์ คลิก "ดำเนินการต่อ" เพื่อไปยังคอนโซลของโปรเจ็กต์ที่สร้างขึ้นใหม่ โปรดเปิดหน้านี้ไว้เพื่อใช้งานในภายหลัง แต่ตอนนี้เราต้องติดตั้งเครื่องมือบางอย่าง
การติดตั้งและเชื่อมต่อ CLI
Firebase มีให้บริการเป็นแพ็กเกจ Node NPM ที่คุณติดตั้งและใช้ผ่านอินเทอร์เฟซบรรทัดคำสั่ง (CLI) ได้ ซึ่งทำให้คุณทำให้ไฟล์และโฟลเดอร์ในเครื่องใช้งานได้กับโฮสติ้งของ Firebase ได้อย่างง่ายดาย ในบทแนะนำของวันนี้ เราจะใช้สภาพแวดล้อม Linux แต่หากคุณใช้ Windows หรือ Mac โปรดทำตามวิธีการที่นี่เพื่อตั้งค่าเครื่องมือ CLI ในอุปกรณ์
แต่สำหรับ Linux เราจะติดตั้ง NPM และ Node.js ก่อนหากยังไม่ได้ติดตั้ง (ทำตาม วิธีการเหล่านี้หากใช้สภาพแวดล้อมอื่น) โดยใช้คําสั่ง 3 รายการต่อไปนี้ในหน้าต่างเทอร์มินัล
เทอร์มินัลบรรทัดคำสั่ง:
sudo apt update
เทอร์มินัลบรรทัดคำสั่ง:
sudo apt install nodejs
เทอร์มินัลบรรทัดคำสั่ง:
sudo apt install npm
เมื่อติดตั้ง Node.js และ NPM แล้ว คุณเพียงต้องเรียกใช้คำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัลเพื่อติดตั้งเครื่องมือบรรทัดคำสั่ง Firebase
เทอร์มินัลบรรทัดคำสั่ง:
sudo npm install -g firebase-tools
เยี่ยม! ตอนนี้เราพร้อมที่จะเชื่อมต่อโปรเจ็กต์ Firebase กับระบบของเราแล้วเพื่อที่จะได้พุชไฟล์ไปยังระบบและดำเนินการอื่นๆ
การเข้าสู่ระบบ Firebase
เข้าสู่ระบบ Firebase โดยใช้บัญชี Google โดยเรียกใช้คําสั่งต่อไปนี้
เทอร์มินัลบรรทัดคำสั่ง:
firebase login
ระบบจะขอให้คุณให้สิทธิ์เข้าถึงบัญชี Google Firebase ดังที่แสดง
อนุญาตการดำเนินการนี้ แล้วคุณควรจะเห็นการเชื่อมต่อเครื่องมือบรรทัดคำสั่งกับบัญชี Firebase สำเร็จในที่สุด
ปิดหน้าต่างแล้วกลับไปที่เทอร์มินัลบรรทัดคำสั่งที่คุณพิมพ์ก่อนหน้านี้ ซึ่งตอนนี้ควรพร้อมรับคําสั่งใหม่ดังที่แสดง (เราได้ซ่อนข้อมูลส่วนตัวในภาพหน้าจอแล้ว)
ยินดีด้วย ตอนนี้เราพร้อมที่จะพุชไฟล์ไปยังโปรเจ็กต์ที่สร้างจากเครื่องแล้ว
การเริ่มต้นโปรเจ็กต์เพื่อทำให้ใช้งานได้กับโฮสติ้งของ Firebase
หากต้องการเชื่อมต่อโฟลเดอร์ในเครื่องกับโปรเจ็กต์ Firebase ให้เรียกใช้คําสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง (โฟลเดอร์ที่คุณต้องการใช้อัปโหลดไฟล์เมื่อทําการเผยแพร่)
เทอร์มินัลบรรทัดคำสั่ง:
firebase init
เมื่อเรียกใช้คำสั่งนี้ ให้ทำตามวิธีการในเทอร์มินัลเพื่อตั้งค่าให้เสร็จสมบูรณ์ตามที่แสดงด้านล่าง
ในส่วนนี้ เพียงเลือกโฮสติ้งโดยใช้ลูกศรลงบนแป้นพิมพ์ แล้วกดSpacebar เพื่อเลือก แล้วกด Enter เพื่อยืนยัน
ตอนนี้เราเลือกโปรเจ็กต์ที่มีอยู่ซึ่งสร้างไว้ก่อนหน้านี้เพื่อใช้งานได้แล้ว โดยทำดังนี้
กด Enter บน "ใช้โปรเจ็กต์ที่มีอยู่" แล้วเลือกโปรเจ็กต์โดยใช้แป้นลูกศรลงดังที่แสดงด้านล่าง
สุดท้าย ให้กด Enter เพื่อใช้งาน แล้วยอมรับค่าเริ่มต้นในหน้าจอสุดท้ายที่ปรากฏขึ้น แล้วตอบ "ไม่" เพื่อกำหนดค่าเป็นแอปพลิเคชันหน้าเว็บเดียว
ซึ่งจะช่วยให้คุณโฮสต์หน้า HTML ได้หลายหน้าหากต้องการ
เมื่อการเริ่มต้นเสร็จสมบูรณ์แล้ว คุณจะเห็นไฟล์ firebase.json และโฟลเดอร์ "public" ที่สร้างขึ้นในไดเรกทอรีที่เราใช้เรียกใช้คําสั่งข้างต้น
ตอนนี้สิ่งที่ต้องทำมีเพียงย้ายไฟล์ที่ต้องการทำให้ใช้งานได้ไปยังโฟลเดอร์สาธารณะที่เราสร้างขึ้น แล้วเราก็พร้อมที่จะทำให้ใช้งานได้ มาเริ่มกันเลย
5. การสร้างหน้าเว็บ TensorFlow.js
กำลังโหลดโมเดลที่บันทึกไว้
ก่อนอื่น มาดูกันว่าเราได้คัดลอกโมเดลแมชชีนเลิร์นนิงที่บันทึกไว้ก่อนหน้านี้ในโค้ดแล็บไปยังโฟลเดอร์สาธารณะที่เราเพิ่งสร้างด้วย Firebase แล้วหรือยัง เพียงลากและวางไฟล์ที่บันทึกไว้ลงในโฟลเดอร์นี้ดังที่แสดง
นอกจากนี้ คุณยังจะเห็นด้วยว่า Firebase ได้สร้างไฟล์ index.html และ 404.html ให้เรา มาเริ่มแก้ไข index.html โดยใช้เครื่องมือแก้ไขข้อความที่คุณชื่นชอบในเครื่องกัน เพื่อเพิ่มโค้ดที่กำหนดเองของเราดังที่แสดง
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World - TensorFlow.js</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TensorFlow.js Hello World</h1>
<p>Check the console (Press F12) to see predictions!</p>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>
ในโค้ดใหม่สำหรับ index.html ด้านบน เราได้ระบุชีตสไตล์เพื่อให้เพิ่มสไตล์ลงในหน้าเว็บในภายหลังได้หากต้องการ และยังมี script.js เพื่อโฮสต์โค้ดที่เราต้องเขียนเพื่อใช้โมเดล TensorFlow.js ที่บันทึกไว้
มาสร้างไฟล์เหล่านั้นเลยและป้อนข้อมูลต่อไปนี้เพื่อให้ไฟล์มีประโยชน์
style.css
/** Leave blank for now **/
script.js
// Load our saved model from current directory (which will be
// hosted via Firebase Hosting)
async function predict() {
// Relative URL provided for my-model.json.
const model = await tf.loadLayersModel('my-model.json');
// Once model is loaded, let's try using it to make a prediction!
// Print to developer console for now.
model.predict(tf.tensor2d([[1337]])).print();
}
predict();
หากทำตามขั้นตอนอย่างถูกต้อง คุณควรเห็นไฟล์ที่แก้ไขแล้วต่อไปนี้ในโฟลเดอร์สาธารณะที่เราสร้างขึ้น
ตอนนี้สิ่งที่ต้องทำคือติดตั้งใช้งานไฟล์เพื่อตรวจสอบว่าใช้งานได้
6. การนำโมเดลและเว็บไซต์ของคุณไปใช้
กำลังถ่ายทอดสด
กลับไปที่หน้าต่างเทอร์มินัลที่คุณเปิดไว้ในโฟลเดอร์โปรเจ็กต์ Firebase ของเครื่อง (นี่คือโฟลเดอร์ที่มีโฟลเดอร์ "public" ด้านบนพร้อมกับไฟล์ firebase init)
เพียงพิมพ์คำสั่งต่อไปนี้เพื่อทำให้ไฟล์โฟลเดอร์สาธารณะใช้งานได้
เทอร์มินัลบรรทัดคำสั่ง:
firebase deploy
รอให้คำสั่งในเทอร์มินัลเสร็จสมบูรณ์ คุณควรเผยแพร่ได้สําเร็จพร้อม URL ที่ใช้เพื่อเผยแพร่
ในตัวอย่างด้านบน คุณจะเห็น URL สุดท้ายเพื่อดูการติดตั้งใช้งานคือ
https://tensorflow-js-demo.web.app (แต่ URL ของคุณจะเป็นชื่อโปรเจ็กต์ที่คุณสร้าง)
เปิด URL นี้ในเว็บเบราว์เซอร์เพื่อตรวจสอบว่าใช้งานได้ ซึ่งหากใช้งานได้ก็ควรแสดงข้อมูลประมาณนี้ในคอนโซลของนักพัฒนาซอฟต์แวร์ของหน้าเว็บที่คุณเปิด (กด F12 เพื่อเปิดคอนโซลของนักพัฒนาซอฟต์แวร์)
ดังที่คุณเห็น หน้าเว็บโหลดในโดเมนที่ติดตั้งใช้งาน และเราเห็นการคาดการณ์ของโมเดลสำหรับ 1337 ตารางฟุตอย่างถูกต้อง ซึ่งเท่ากับ $1,336,999.25 ซึ่งเป็นค่าประมาณที่ดีมากจริงๆ เนื่องจากเราคาดไว้ว่าค่านี้จะเป็น 1,000 เท่าของตารางฟุต แน่นอนว่าเราสามารถทําการคาดการณ์ได้มากเท่าที่ต้องการหากสร้างอินเทอร์เฟซผู้ใช้ที่ใช้งานง่ายเพื่อเรียกใช้โมเดลแทน และการดำเนินการทั้งหมดนี้จะทํางานใน JavaScript ทั้งหมดเพื่อให้การค้นหาของคุณเป็นส่วนตัวและปลอดภัย
เมื่อมีการทำให้โมเดลใช้งานได้และโฮสต์แล้ว คุณจะแชร์เว็บไซต์กับทุกคนในโลกได้ และบุคคลเหล่านั้นจะใช้แอปพลิเคชันของคุณบนเครื่องของตนเองได้ แน่นอนว่าคุณอาจต้องการเพิ่มอินเทอร์เฟซผู้ใช้ที่ดีขึ้นและทำให้ดูดี แต่นั่นอยู่นอกเหนือขอบเขตของบทแนะนํานี้ คุณสามารถโฮสต์เว็บแอปที่ทำงานด้วยแมชชีนเลิร์นนิงเช่นนี้ได้แบบไม่จํากัด ซึ่งทํางานได้ในคลิกเดียวโดยที่ไม่ต้องติดตั้งใดๆ และเราขอแนะนําให้คุณลองนึกถึงสถานการณ์อื่นๆ ที่อาจได้ประโยชน์จากโมเดลแมชชีนเลิร์นนิงในเบราว์เซอร์
การตรวจสอบการใช้งาน
นอกจาก Google Analytics ที่คุณอาจเพิ่มลงในโค้ดเว็บไซต์แล้ว Firebase ยังมีสถิติเวอร์ชันและการใช้งานผ่านคอนโซลสําหรับโปรเจ็กต์ด้วย หลังจากติดตั้งใช้งานแล้ว คุณจะเห็นข้อมูลต่อไปนี้ซึ่งตรวจสอบได้เป็นครั้งคราวตามต้องการ
ดังที่คุณเห็น คุณจะได้รับการ์ดแบนด์ 10 GB ต่อเดือนสำหรับไฟล์ที่โฮสต์ในรุ่นฟรีโดยค่าเริ่มต้น หากเว็บไซต์ของคุณได้รับความนิยมมากขึ้น คุณอาจต้องเพิ่มบัญชีการเรียกเก็บเงินเพื่อใช้มากกว่านี้ในหนึ่งเดือน คุณสามารถดูแพ็กเกจ Firebase สำหรับโปรเจ็กต์ขนาดใหญ่ได้ที่นี่ แต่ผู้ใช้ทั่วไปส่วนใหญ่ที่ใช้โปรโตไทป์อาจไม่ใช้เกินระดับฟรีหากโมเดลมีขนาดเล็กและมีการใช้งานต่ำ วิธีนี้จึงเป็นวิธีที่ดีในการทดสอบและตรวจสอบว่าแพ็กเกจตรงกับความต้องการของคุณหรือไม่ก่อนที่จะสมัครใช้บริการแพ็กเกจแบบชำระเงินเมื่อธุรกิจหรือไอเดียเติบโตขึ้น
7. ขอแสดงความยินดี
ยินดีด้วย คุณได้เริ่มต้นใช้งาน TensorFlow.js กับ Firebase เพื่อสร้างและทำให้โมเดลแมชชีนเลิร์นนิงที่กําหนดเองใช้งานได้แล้ว เพื่อแชร์กับผู้อื่น ลองจินตนาการถึงสิ่งอื่นๆ ทั้งหมดที่คุณทําได้โดยใช้แนวทางที่มีประสิทธิภาพและปรับขนาดได้นี้ ซึ่งพร้อมสําหรับกรณีการใช้งานจริงหากต้องการ เนื่องจาก Firebase จะปรับขนาดตามดีมานด์โดยอัตโนมัติ ดังนั้นไม่ว่าจะมีผู้ใช้ 10 คนหรือ 10,000 คนที่ต้องการใช้ ฟีเจอร์ก็จะทํางานได้
หากต้องการเปลี่ยนไฟล์ใดๆ ให้เพียงทําให้การเผยแพร่แอปอีกครั้งโดยใช้ firebase deploy ดังเช่นเคย และอย่าลืมล้างแคชของเบราว์เซอร์เพื่อให้แน่ใจว่าคุณได้รับไฟล์เวอร์ชันใหม่เมื่อโหลดหน้าเว็บครั้งถัดไป หากเปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ไว้ คุณสามารถบังคับใช้ตัวเลือกนี้ในแท็บเครือข่ายขณะทดสอบเพื่อให้ทําได้ง่ายขึ้นโดยเลือกช่องทําเครื่องหมาย "ปิดใช้แคช" บริเวณด้านบนของแท็บนี้
สรุป
ในแล็บโค้ดนี้ เราจะทำสิ่งต่อไปนี้
- กําหนดและฝึกโมเดล TensorFlow.js ที่กําหนดเองตั้งแต่ต้นเพื่อคาดการณ์ราคาบ้าน
- ลงชื่อสมัครใช้ กำหนดค่า และติดตั้งเครื่องมือ Firebase + Firebase CLI ในเครื่องสำหรับพัฒนาซอฟต์แวร์
- ติดตั้งใช้งานและเปิดตัวเว็บไซต์ที่ใช้งานได้ซึ่งโหลดโมเดลที่ผ่านการฝึกจากขั้นตอนที่ 1 และใช้โมเดลดังกล่าวในเว็บแอปพลิเคชันในชีวิตจริงที่ทุกคนทั่วโลกเข้าถึงได้
ขั้นตอนถัดไป
เมื่อคุณมีพื้นฐานที่ใช้งานได้แล้ว คุณจะมีไอเดียสร้างสรรค์อะไรบ้างในการขยายบอยเลอร์เพลตสำหรับการติดตั้งใช้งานโมเดลแมชชีนเลิร์นนิงนี้
เราอยากเห็นคุณใช้ฟีเจอร์นี้กับข้อมูลของคุณเอง ลองนึกถึงอุตสาหกรรมหรือพื้นที่ที่คุณอาศัยอยู่หรือทํางาน คุณฝึกข้อมูลดังกล่าวเพื่อทำนายสิ่งที่อาจเป็นประโยชน์ต่อคุณ (หรือผู้อื่น) ในอนาคตได้อย่างไร อสังหาริมทรัพย์ไม่ใช่ตัวอย่างเพียงอย่างเดียว และเราขอแนะนำให้คุณนำแนวคิดนี้ไปใช้กับปัญหาของคุณเองด้วย ขอให้สนุกกับการแฮ็ก
อย่าลืมติดแท็กเราในทุกๆ ผลงานที่คุณสร้างโดยใช้ #MadeWithTFJS (คลิกลิงก์นี้เพื่อดูแรงบันดาลใจจากผลงานของผู้อื่น) เพื่อให้มีโอกาสได้แสดงผลงานบนโซเชียลมีเดียหรือแม้แต่ได้แสดงในงาน TensorFlow ในอนาคต เราอยากเห็นผลงานของคุณ และแน่นอนว่าคุณสามารถติดต่อผู้เขียนโค้ดแล็บนี้ได้หากมีความคิดเห็นหรือข้อสงสัย
Codelab เพิ่มเติมเกี่ยวกับ TensorFlow.js เพื่อเจาะลึก
- เขียนโครงข่ายประสาทเทียมตั้งแต่ต้นใน TensorFlow.js
- การจดจําเสียงโดยใช้การเรียนรู้แบบโอนใน TensorFlow.js
- การจัดประเภทรูปภาพที่กำหนดเองโดยใช้การเรียนรู้แบบโอนใน TensorFlow.js