TensorFlow.js: ใช้โฮสติ้งของ Firebase เพื่อทำให้ใช้งานได้และโฮสต์โมเดลแมชชีนเลิร์นนิงจำนวนมาก

1. บทนำ

คุณสร้างโมเดลแมชชีนเลิร์นนิงที่กำหนดเองด้วย TensorFlow.js แต่ตอนนี้คุณต้องโฮสต์โมเดลไว้ที่ใดที่หนึ่งเพื่อใช้ในเว็บไซต์ที่คุณเลือก มีหลายวิธีในการดำเนินการนี้ แต่ในวันนี้เราจะมาดูว่าการใช้ Firebase Hosting นั้นง่ายเพียงใด ซึ่งยังช่วยให้คุณได้รับประโยชน์เพิ่มเติม เช่น การควบคุมเวอร์ชัน การแสดงโมเดลผ่านการเชื่อมต่อที่ปลอดภัย และอื่นๆ อีกมากมาย

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะได้สร้างระบบแบบครบวงจรที่สามารถโฮสต์และเรียกใช้โมเดล TensorFlow.js ที่บันทึกไว้แบบกำหนดเอง พร้อมกับชิ้นงานที่เกี่ยวข้อง เช่น HTML, CSS และ JavaScript เราจะสร้างโมเดลที่มีน้ำหนักเบาและเรียบง่ายมากซึ่งสามารถคาดการณ์ค่าเอาต์พุตที่เป็นตัวเลขได้เมื่อได้รับค่าอินพุต (เช่น ราคาบ้านเมื่อทราบขนาดพื้นที่) และโฮสต์ผ่าน Firebase Hosting เพื่อให้ใช้ได้ในวงกว้าง

สิ่งที่คุณจะได้เรียนรู้

  • วิธีบันทึกโมเดล TensorFlow.js ที่กำหนดเองในรูปแบบที่ถูกต้อง
  • วิธีตั้งค่าบัญชี Firebase สำหรับโฮสติ้ง
  • วิธีทำให้ชิ้นงานใช้งานได้กับโฮสติ้งของ Firebase
  • วิธีทำให้โมเดลเวอร์ชันใหม่ใช้งานได้

โปรดทราบว่า Code Lab นี้มุ่งเน้นที่วิธีนำโมเดลที่ฝึกแบบกำหนดเองไปโฮสต์เพื่อการติดตั้งใช้งาน ไม่ใช่หลักสูตรในการสร้างสถาปัตยกรรมโมเดลที่สมบูรณ์แบบ ดังนั้นเราจะดำเนินการสร้างโมเดลแมชชีนเลิร์นนิงอย่างรวดเร็วด้วยตัวอย่างที่ไม่ซับซ้อน หลักการจะเหมือนกันไม่ว่าคุณจะสร้างโมเดลใดก็ตาม

แชร์ผลงานของคุณกับเรา

หากคุณสร้างอะไรเจ๋งๆ โดยใช้เทคโนโลยีนี้ โปรดแจ้งให้เราทราบ เราอยากเห็นผลงานของคุณ

แท็กเราบนโซเชียลมีเดียโดยใช้แฮชแท็ก #MadeWithTFJS เพื่อให้มีโอกาสที่โปรเจ็กต์ของคุณจะได้รับการแนะนำในบล็อก TensorFlow หรือแม้แต่ในกิจกรรมในอนาคต เช่น Show & Tells

2. โฮสติ้งของ Firebase คืออะไร

Firebase Hosting ให้บริการโฮสติ้งระดับเวอร์ชันที่ใช้งานจริงที่รวดเร็วและปลอดภัยสำหรับเว็บแอป เนื้อหาแบบคงที่ / แบบไดนามิก และไมโครเซอร์วิส

คุณสามารถติดตั้งใช้งานเว็บแอปและแสดงเนื้อหาไปยัง CDN (เครือข่ายนำส่งข้อมูล) ทั่วโลกได้อย่างรวดเร็วด้วยคำสั่งเดียว ซึ่งช่วยให้มั่นใจได้ว่าเนื้อหาของคุณจะพร้อมใช้งานโดยมีเวลาในการตอบสนองต่ำเกือบทุกที่ นอกจากนี้ คุณยังจับคู่ Firebase Hosting กับ Cloud Functions หรือ Cloud Run ของ Firebase เพื่อสร้างและโฮสต์ Microservice ได้ด้วย แต่จะไม่อยู่ในขอบเขตของ Codelab นี้

ความสามารถหลักของ Firebase Hosting

  • แสดงเนื้อหาผ่านการเชื่อมต่อที่ปลอดภัย - เว็บสมัยใหม่มีความปลอดภัย บ่อยครั้งที่เว็บไซต์ต้องส่งผ่านบริบทที่ปลอดภัยเพื่อเข้าถึงเซ็นเซอร์ในฝั่งไคลเอ็นต์ ระบบจะแสดงเนื้อหาอย่างปลอดภัยเสมอสำหรับไฟล์ทั้งหมดที่โฮสต์เนื่องจากมีการสร้าง SSL ที่ไม่ต้องกำหนดค่าไว้ในโฮสติ้งของ Firebase
  • โฮสต์เนื้อหาแบบคงที่และแบบไดนามิก รวมถึง Microservice ที่รองรับการตรวจสอบสิทธิ์ เพื่อให้เฉพาะผู้ใช้ที่เข้าสู่ระบบเท่านั้นที่โหลด / ดูไฟล์เหล่านั้นได้หากต้องการ
  • แสดงเนื้อหาอย่างรวดเร็ว - ไฟล์แต่ละรายการที่คุณอัปโหลดจะแคชบน SSD ที่ CDN EDGE ทั่วโลก ไม่ว่าผู้ใช้ของคุณจะอยู่ที่ใดก็ตาม ระบบจะแสดงเนื้อหาอย่างรวดเร็ว
  • ทำให้ใช้งานเวอร์ชันใหม่ได้ด้วยคำสั่งเดียว - คุณทำให้แอปทำงานได้ในไม่กี่วินาทีโดยใช้อินเทอร์เฟซบรรทัดคำสั่งของ Firebase
  • ย้อนกลับได้ด้วยการคลิกเพียงครั้งเดียว - การทำให้ใช้งานได้อย่างรวดเร็วนั้นเป็นเรื่องดี แต่หากเลิกทำการกระทำที่ผิดพลาดได้ด้วยก็ดียิ่งขึ้นไปอีก โฮสติ้งของ Firebase ให้คุณจัดการรุ่นและเวอร์ชันเต็มได้ด้วยการคลิกย้อนกลับเพียงคลิกเดียว

ไม่ว่าคุณจะติดตั้งใช้งานหน้า Landing Page ของแอปแบบง่ายๆ หรือ Progressive Web App (PWA) ที่ซับซ้อน การโฮสต์จะมอบโครงสร้างพื้นฐาน ฟีเจอร์ และเครื่องมือที่ปรับแต่งมาเพื่อการติดตั้งใช้งานและการจัดการเว็บไซต์และแอป

โดยค่าเริ่มต้น ทุกโปรเจ็กต์ Firebase จะมีโดเมนย่อยฟรีในโดเมน web.app และ firebaseapp.com เว็บไซต์ทั้ง 2 เว็บไซต์นี้แสดงเนื้อหาและการกำหนดค่าที่ทำให้ใช้งานได้เหมือนกัน คุณยังเชื่อมต่อชื่อโดเมนของคุณเองกับเว็บไซต์ที่โฮสต์ด้วย Firebase ได้ด้วยหากต้องการ

ขั้นตอนการติดตั้งใช้งาน

แต่ก่อนที่จะทำสิ่งเหล่านี้ได้ เราต้องมีโมเดลแมชชีนเลิร์นนิงและเว็บแอปที่จะนำไปใช้งาน มาสร้างกันเลย

3. โมเดลแมชชีนเลิร์นนิงแบบง่ายเพื่อคาดการณ์ราคาบ้าน

สําหรับวัตถุประสงค์ของแบบฝึกหัดนี้ เราจะสร้างโมเดล ML แบบง่ายมากที่คาดการณ์ค่าตัวเลข เราจะลองใช้แมชชีนเลิร์นนิงเพื่อคาดการณ์มูลค่าของบ้านสมมติโดยอิงตามขนาดเป็นตารางฟุตเพื่อเป็นตัวอย่างเท่านั้น ในความเป็นจริงแล้ว สำหรับการสาธิตนี้ เราจะคูณตารางฟุตของบ้านด้วย 1, 000 เพื่อให้ได้มูลค่าที่คาดการณ์ไว้สำหรับข้อมูลการฝึก แต่แมชชีนเลิร์นนิงจะต้องเรียนรู้สิ่งนี้ด้วยตัวเอง

ในความเป็นจริง คุณควรเลือกใช้ข้อมูลในโลกแห่งความเป็นจริงซึ่งอาจมีความสัมพันธ์ที่ซับซ้อนกว่า (เช่น บ้านขนาดเล็กอาจมีมูลค่าเป็น 500 เท่าของขนาด แต่หลังจากถึงเกณฑ์ที่กำหนด มูลค่าอาจค่อยๆ เพิ่มเป็น 1, 000 เท่า เป็นต้น) และคุณอาจต้องใช้โมเดลที่ซับซ้อนกว่าเพื่อเรียนรู้วิธีที่ดีที่สุดในการคาดการณ์มูลค่าเหล่านั้น

โมเดลที่เราจะสร้างในวันนี้ (การถดถอยเชิงเส้น) สามารถใช้เพื่อคาดการณ์สิ่งอื่นๆ ได้อีกมากมายหากมีข้อมูลในโลกแห่งความเป็นจริงเพียงพอ และเริ่มต้นใช้งานได้ง่ายสำหรับกรณีการใช้งานสมมติข้างต้น อย่างไรก็ตาม วันนี้เราจะมุ่งเน้นไปที่การเรียนรู้วิธีบันทึกและทำให้โมเดลใช้งานได้แทนการออกแบบและเพิ่มประสิทธิภาพโมเดลสำหรับกรณีการใช้งานที่กำหนด มาเริ่มกันเลย

ข้อมูลการฝึกและการทดสอบ

โมเดล 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 Hosting ได้

การบันทึกโมเดล

การเพิ่มโค้ดด้านล่างที่ส่วนท้ายของฟังก์ชันประเมิน (หลังจาก model.predict) ด้านบนจะช่วยให้เราส่งออกโมเดลผลลัพธ์หลังจากฝึกเสร็จสมบูรณ์ได้โดยตรงจากเว็บเบราว์เซอร์และบันทึกลงในดิสก์ เพื่อให้เราโฮสต์ที่ใดที่หนึ่งและใช้ในอนาคตได้โดยไม่ต้องฝึกใหม่ทุกครั้งที่โหลดหน้าเว็บ

model.js

await model.save('downloads://my-model');

หากตอนนี้คุณไปที่ train.html และเรียกใช้หน้าดังกล่าว ระบบจะฝึกโมเดล (ซึ่งอาจใช้เวลา 2-3 วินาที) จากนั้นจะแจ้งให้ดาวน์โหลดโมเดลที่ฝึกแล้วซึ่งเป็นผลลัพธ์เมื่อเสร็จสมบูรณ์

4. การตั้งค่า Firebase

ลงชื่อเข้าใช้ Firebase แล้วสร้างโปรเจ็กต์

หากเพิ่งเริ่มใช้ Firebase คุณจะลงชื่อสมัครใช้ได้อย่างง่ายดายโดยใช้บัญชี Google เพียงไปที่ https://firebase.google.com/ แล้วลงชื่อเข้าใช้ด้วยบัญชี Google ปกติที่คุณต้องการใช้ เมื่อระบบเปลี่ยนเส้นทางคุณไปยังหน้าแรกแล้ว ให้คลิก "ไปที่คอนโซล" ที่ด้านขวาบนของหน้า

ea7ff3f08e4019b0.png

เมื่อระบบเปลี่ยนเส้นทางคุณไปยังคอนโซลแล้ว คุณควรเห็นหน้า Landing Page ที่มีลักษณะดังนี้

166d9408ad46599b.png

เพียงคลิก "เพิ่มโปรเจ็กต์" ตามที่แสดงเพื่อสร้างโปรเจ็กต์ Firebase ใหม่ ตั้งชื่อโปรเจ็กต์ที่ไม่ซ้ำกัน ยอมรับข้อกำหนด แล้วคลิก "ต่อไป"

จากนั้นระบบจะถามว่าคุณต้องการเพิ่มข้อมูลวิเคราะห์ลงในโปรเจ็กต์หรือไม่ หากต้องการเข้าถึงข้อมูลวิเคราะห์ดังกล่าว โปรดเปิดใช้ตัวเลือกนี้ แล้วคลิก "ต่อไป" ดังที่แสดง

a34c2be47b26e6b5.png

หากทุกอย่างเป็นไปด้วยดี คุณควรเห็นหน้าเว็บที่ระบุว่าโปรเจ็กต์พร้อมใช้งานแล้วดังที่แสดง

1306dc803ad22338.png

ไชโย เรามีโปรเจ็กต์ คลิก "ต่อไป" เพื่อไปยังคอนโซลของโปรเจ็กต์ที่สร้างใหม่ เปิดหน้านี้ไว้เพื่อใช้ในภายหลัง แต่ตอนนี้เราต้องติดตั้งเครื่องมือบางอย่าง

การติดตั้งและเชื่อมต่อ CLI

Firebase พร้อมใช้งานเป็นแพ็กเกจ Node NPM ที่คุณติดตั้งและใช้งานผ่านอินเทอร์เฟซบรรทัดคำสั่ง (CLI) ได้ ซึ่งช่วยให้คุณทำให้ไฟล์และโฟลเดอร์ในเครื่องใช้งานได้ใน Firebase Hosting ได้อย่างง่ายดาย สำหรับบทแนะนำในวันนี้ เราจะใช้สภาพแวดล้อม 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 ดังที่แสดง

4dc28589bef2ff5d.png

อนุญาตการดำเนินการนี้ แล้วคุณจะเห็นว่าเครื่องมือบรรทัดคำสั่งเชื่อมต่อกับบัญชี Firebase ได้สำเร็จ

df397ec7a555e8de.png

ปิดหน้าต่างแล้วกลับไปที่เทอร์มินัลบรรทัดคำสั่งที่คุณพิมพ์ก่อนหน้านี้ ซึ่งตอนนี้ควรพร้อมรับคำสั่งใหม่แล้วตามที่แสดง (เราซ่อนข้อมูลส่วนตัวในภาพหน้าจอ)

67a3ff39d3c0f3e4.png

ยินดีด้วย ตอนนี้เราพร้อมที่จะพุชไฟล์ไปยังโปรเจ็กต์ที่สร้างขึ้นจากเครื่องของเราแล้ว

เริ่มต้นโปรเจ็กต์เพื่อทำให้ใช้งานได้กับ Firebase Hosting

หากต้องการเชื่อมต่อโฟลเดอร์ในเครื่องกับโปรเจ็กต์ Firebase ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง (โฟลเดอร์ที่คุณต้องการใช้ในการอัปโหลดไฟล์เมื่อทำการติดตั้งใช้งาน)

เทอร์มินัลบรรทัดคำสั่ง:

firebase init

เมื่อเรียกใช้คำสั่งนี้แล้ว ให้ทำตามวิธีการในเทอร์มินัลเพื่อตั้งค่าให้เสร็จสมบูรณ์ตามที่แสดงด้านล่าง

61e0f6d92ef3e1c4.png

ในส่วนนี้ คุณเพียงแค่เลือกการโฮสต์โดยใช้ลูกศรลงบนแป้นพิมพ์ จากนั้นกดปุ่ม Spacebar เพื่อเลือก แล้วกด Enter เพื่อยืนยัน

ตอนนี้เราสามารถเลือกโปรเจ็กต์ที่มีอยู่ซึ่งเราสร้างไว้ก่อนหน้านี้เพื่อใช้งานได้แล้ว

4f2a1696d5cfd72f.png

กด Enter ใน "ใช้โปรเจ็กต์ที่มีอยู่" แล้วเลือกโดยใช้ปุ่มลูกศรลงตามที่แสดงด้านล่าง

4dfcf2dff745f2c.png

สุดท้ายให้กด Enter เพื่อใช้งาน จากนั้นยอมรับค่าเริ่มต้นในหน้าจอสุดท้ายที่ปรากฏขึ้น แล้วตอบว่า "ไม่" เพื่อกำหนดค่าเป็นแอปพลิเคชันหน้าเว็บเดียว

7668a2175b624af2.png

ซึ่งจะช่วยให้คุณโฮสต์หน้า HTML หลายหน้าได้หากต้องการ

ตอนนี้การเริ่มต้นเสร็จสมบูรณ์แล้ว คุณจะเห็นว่ามีการสร้างไฟล์ firebase.json และโฟลเดอร์ "public" ในไดเรกทอรีที่เราเรียกใช้คำสั่งข้างต้น

cd7724b92f3d507.png

ตอนนี้สิ่งที่เราต้องทำคือย้ายไฟล์ที่ต้องการจะติดตั้งใช้งานไปยังโฟลเดอร์สาธารณะที่เราสร้างขึ้น แล้วก็พร้อมติดตั้งใช้งานได้เลย มาเริ่มกันเลย

5. การสร้างหน้าเว็บ TensorFlow.js

การโหลดโมเดลที่บันทึกไว้

ก่อนอื่น ให้ตรวจสอบว่าเราได้คัดลอกโมเดลแมชชีนเลิร์นนิงที่เราบันทึกไว้ก่อนหน้านี้ในโค้ดแล็บไปยังโฟลเดอร์สาธารณะที่เราเพิ่งสร้างด้วย Firebase เพียงลากและวางไฟล์ที่บันทึกไว้ลงในโฟลเดอร์นี้ตามที่แสดง

cd6f565189e23705.png

นอกจากนี้ คุณจะเห็นว่า 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();

หากทำตามขั้นตอนอย่างถูกต้อง คุณควรเห็นไฟล์ที่แก้ไขต่อไปนี้ในโฟลเดอร์สาธารณะที่เราสร้างขึ้น

253498c703c04ee.png

ตอนนี้เราเพียงต้องติดตั้งไฟล์เพื่อให้ตรวจสอบได้ว่าไฟล์ทำงานหรือไม่

6. การทำให้โมเดลและเว็บไซต์ใช้งานได้

การไลฟ์สด

กลับไปที่หน้าต่างเทอร์มินัลที่คุณเปิดไว้ในโฟลเดอร์โปรเจ็กต์ Firebase ของเครื่องในพื้นที่ (โฟลเดอร์นี้คือโฟลเดอร์ที่มีโฟลเดอร์ "public" ของเราด้านบนพร้อมกับไฟล์ firebase init)

เพียงพิมพ์คำสั่งต่อไปนี้เพื่อทำให้ไฟล์โฟลเดอร์สาธารณะใช้งานได้

เทอร์มินัลบรรทัดคำสั่ง:

firebase deploy

ปล่อยให้คำสั่งเทอร์มินัลทำงานจนเสร็จ แล้วคุณจะเผยแพร่แอปได้สำเร็จพร้อมกับ URL ที่คุณใช้เพื่อใช้งานได้

c5795cae85ed82a5.png

ในตัวอย่างข้างต้น คุณจะเห็น URL สุดท้ายเพื่อดูการติดตั้งใช้งานของเราคือ

https://tensorflow-js-demo.web.app (แต่ URL ของคุณจะเป็นชื่อโปรเจ็กต์ที่คุณสร้าง)

เปิด URL นี้ในเว็บเบราว์เซอร์เพื่อตรวจสอบว่าใช้งานได้หรือไม่ หากสำเร็จควรพิมพ์ข้อความคล้ายกับข้อความนี้ลงในคอนโซลนักพัฒนาซอฟต์แวร์ของหน้าที่คุณเปิด (กด F12 เพื่อเปิดคอนโซลนักพัฒนาซอฟต์แวร์)

182aee0acfa7c41e.png

ดังที่คุณเห็น หน้าเว็บจะโหลดในโดเมนที่ติดตั้งใช้งาน และเราเห็นการคาดการณ์ของโมเดลสำหรับพื้นที่ 1337 ตร.ฟุตได้อย่างถูกต้อง ซึ่งมีค่าเท่ากับ $1,336,999.25 ซึ่งเป็นค่าประมาณที่ดีมาก เนื่องจากเราคาดว่าค่านี้จะเป็น 1,000 เท่าของ ตร.ฟุต แน่นอนว่าเราสามารถคาดการณ์ได้มากเท่าที่ต้องการหากสร้างอินเทอร์เฟซผู้ใช้ที่สวยงามเพื่อเรียกใช้โมเดลแทน และทั้งหมดนี้จะทำงานใน JavaScript โดยสมบูรณ์ ซึ่งจะช่วยรักษาความเป็นส่วนตัวและความปลอดภัยของคำค้นหา

ตอนนี้เมื่อคุณได้ติดตั้งใช้งานและโฮสต์โมเดลแล้ว คุณสามารถแชร์เว็บไซต์กับทุกคนในโลก และทุกคนจะใช้แอปพลิเคชันของคุณในเครื่องของตนได้ แน่นอนว่าคุณอาจต้องการเพิ่มอินเทอร์เฟซผู้ใช้ที่ดีขึ้นและทำให้ดูดี แต่การดำเนินการดังกล่าวอยู่นอกเหนือขอบเขตของบทแนะนำนี้ ไม่มีข้อจำกัดสำหรับเว็บแอปที่เป็นไปได้ซึ่งคุณโฮสต์ได้ในลักษณะนี้โดยใช้แมชชีนเลิร์นนิงที่ทำงานได้ในคลิกเดียวโดยไม่ต้องติดตั้ง และเราขอแนะนำให้คุณพิจารณาสถานการณ์อื่นๆ ที่อาจได้รับประโยชน์จากโมเดลแมชชีนเลิร์นนิงในเบราว์เซอร์

การตรวจสอบการใช้งาน

นอกเหนือจาก Google Analytics ที่คุณอาจเพิ่มลงในโค้ดเว็บไซต์แล้ว Firebase ยังมีสถิติการใช้งานและการควบคุมเวอร์ชันผ่านคอนโซลสําหรับโปรเจ็กต์ของคุณด้วย หลังจากติดตั้งใช้งานแล้ว คุณจะเห็นข้อความคล้ายกับตัวอย่างนี้ ซึ่งคุณสามารถตรวจสอบได้เป็นครั้งคราวตามต้องการ

42b1cb8f7c10016.png

fbdd6504bec7c3d.png

ดังที่เห็นได้ว่าโดยค่าเริ่มต้น ในระดับฟรี คุณจะได้รับแบนด์วิดท์ 10 GB ต่อเดือนสำหรับไฟล์ที่โฮสต์ หากเว็บไซต์ของคุณได้รับความนิยมมากขึ้น คุณอาจต้องเพิ่มบัญชีสำหรับการเรียกเก็บเงินเพื่อใช้มากกว่านี้ในเดือนที่กำหนด คุณดูแพ็กเกจ Firebase สำหรับโปรเจ็กต์ขนาดใหญ่ได้ที่นี่ แม้ว่าผู้ใช้ทั่วไปส่วนใหญ่ที่ใช้ต้นแบบอาจไม่เกินระดับฟรีหากโมเดลมีขนาดเล็กและมีการใช้งานต่ำ ดังนั้นนี่จึงเป็นวิธีที่ยอดเยี่ยมในการทดสอบและตรวจสอบว่าตรงกับความต้องการของคุณหรือไม่ก่อนที่จะสมัครใช้แพ็กเกจแบบชำระเงินเมื่อธุรกิจหรือไอเดียของคุณเติบโตขึ้น

7. ขอแสดงความยินดี

ขอแสดงความยินดี คุณได้เริ่มต้นก้าวแรกในการใช้ TensorFlow.js กับ Firebase เพื่อสร้างและทำให้โมเดลแมชชีนเลิร์นนิงที่สร้างขึ้นเองใช้งานได้ เพื่อให้คุณแชร์โมเดลกับคนทั่วโลกได้ ลองนึกถึงสิ่งอื่นๆ ที่คุณจะทำได้โดยใช้วิธีที่มีประสิทธิภาพและปรับขนาดได้นี้ ซึ่งพร้อมสำหรับกรณีการใช้งานจริงหากคุณต้องการ เนื่องจาก Firebase จะปรับขนาดตามความต้องการโดยอัตโนมัติ ไม่ว่าจะมีผู้ใช้ 10 คนหรือ 10,000 คนที่ต้องการใช้ฟีเจอร์นี้ ฟีเจอร์นี้ก็จะทำงานได้

หากคุณเปลี่ยนไฟล์ใดก็ตาม เพียงแค่ติดตั้งแอปอีกครั้งโดยใช้ firebase deploy เหมือนเดิม และอย่าลืมล้างแคชของเบราว์เซอร์เพื่อให้แน่ใจว่าคุณจะได้รับไฟล์เวอร์ชันใหม่เมื่อโหลดหน้าเว็บครั้งถัดไป หากเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ คุณสามารถบังคับใช้การตั้งค่านี้ได้ในแท็บเครือข่ายขณะทดสอบเพื่อความสะดวกโดยเลือกช่องทำเครื่องหมาย "ปิดใช้แคช" ใกล้ด้านบนของแท็บนี้

b1e4c1bf304a4869.png

สรุป

ในโค้ดแล็บนี้ เราจะทำสิ่งต่อไปนี้

  1. กำหนดและฝึกโมเดล TensorFlow.js ที่กำหนดเองตั้งแต่ต้นจนจบเพื่อคาดการณ์ราคาบ้าน
  2. ลงชื่อสมัครใช้ กำหนดค่า และติดตั้งเครื่องมือ Firebase + Firebase CLI ในเครื่องพัฒนา
  3. ติดตั้งใช้งานและเปิดตัวเว็บไซต์ที่ใช้งานได้ซึ่งโหลดโมเดลที่ฝึกแล้วจากขั้นตอนที่ 1 และใช้ในเว็บแอปพลิเคชันในโลกแห่งความเป็นจริงที่ทุกคนเข้าถึงได้ทุกที่ในโลกในระดับที่ปรับขนาดได้

สิ่งต่อไปที่ควรทำ

ตอนนี้คุณมีฐานการทำงานที่จะเริ่มต้นแล้ว คุณจะคิดไอเดียสร้างสรรค์อะไรได้บ้างเพื่อขยายเทมเพลตการติดตั้งใช้งานโมเดลแมชชีนเลิร์นนิงนี้

เราอยากเห็นคุณใช้เครื่องมือนี้กับข้อมูลของคุณเอง ลองนึกถึงอุตสาหกรรมหรือพื้นที่ที่คุณอาศัยหรือทำงานอยู่ คุณจะฝึกโมเดลด้วยข้อมูลดังกล่าวเพื่อทำการคาดการณ์ที่เป็นประโยชน์ต่อคุณ (หรือผู้อื่น) ในอนาคตได้อย่างไร อสังหาริมทรัพย์ไม่ใช่ตัวอย่างเดียวในที่นี้ และเราขอแนะนำให้คุณนำไปใช้กับความท้าทายของคุณเองด้วย ขอให้สนุกกับการแฮ็ก

อย่าลืมแท็กเราในทุกสิ่งที่คุณสร้างโดยใช้ #MadeWithTFJS (คลิกลิงก์นี้เพื่อดูแรงบันดาลใจจากสิ่งที่คนอื่นๆ สร้างขึ้น) เพื่อให้มีโอกาสได้แสดงบนโซเชียลมีเดียหรือแม้แต่จัดแสดงในกิจกรรม TensorFlow ในอนาคต เราอยากเห็นสิ่งที่คุณสร้าง และแน่นอนว่าโปรดติดต่อผู้เขียน Codelab นี้หากมีข้อเสนอแนะหรือคำถาม

Codelab ของ TensorFlow.js เพิ่มเติมเพื่อเจาะลึก

เว็บไซต์ที่ควรดู