1. 簡介
您已使用 TensorFlow.js 建立自訂機器學習模型，但現在必須存放在某處，才能在自選的網站上使用。操作方法很多，但現在我們瞭解如何使用 Firebase 託管功能，這項產品還能帶來一些額外優勢，例如版本管理、透過安全連線提供模型等等。
建構項目
在本程式碼研究室中，您將建立完整的端對端系統來託管及執行自訂的 TensorFlow.js 模型，以及相關資產，例如 HTML、CSS 和 JavaScript。我們會設計一個非常簡單的輕量模型，根據輸入值 (例如根據房屋面積，透過 Firebase 託管) 來預測數值輸出值，並透過 Firebase 託管託管，以便大規模使用。
課程內容
- 如何以正確的格式儲存自訂 TensorFlow.js 模型
- 如何設定託管用的 Firebase 帳戶
- 如何將資產部署至 Firebase 託管
- 如何部署模型的新版本。
請注意：本程式碼研究室的重點在於如何取得自訂訓練模型並加以託管，而不是建立完美的模型架構課程。因此，我們會透過簡單的範例，快速完成機器學習模型的建立過程。無論最終製作哪種模式，原則上都一樣。
分享您的成果
如果您曾透過這個堆疊打造出酷炫功能，請告訴我們！我們期待看到您創作的作品，
在社群媒體上標記我們，並加上 #MadeWithTFJS 主題標記，你的專案就有機會登上我們的 TensorFlow 網誌，或是節目與說明。
2. 什麼是 Firebase 託管？
Firebase 代管功能可為您的網頁應用程式、靜態 / 動態內容和微服務，提供快速又安全的作業環境級託管服務
您只需要一個指令，即可快速部署網頁應用程式，並將內容提供給全球 CDN (內容傳遞網路)，確保內容在幾乎任何地方都能存取。你也可以將 Firebase 託管與 Firebase Cloud Functions 或 Cloud Run 配對，藉此建構及託管微服務，但此做法已不在本程式碼研究室的涵蓋範圍內。
Firebase 託管主要功能
- 透過安全連線提供內容：新世代網路安全無虞。通常在用戶端存取感應器時，網站都必須透過安全的環境進行傳送。Firebase 代管內建零設定 SSL，讓您能在安全無虞的情況下傳輸所有檔案。
- 代管靜態和動態內容，以及可支援驗證的微服務，因此只有登入的使用者可視需要載入 / 查看這些檔案。
- 快速傳遞內容 - 您上傳的每個檔案都會快取到全球各地 CDN 邊緣的 SSD。不論使用者身在何處，內容都能快速送達。
- 透過單一指令部署新版本：只要使用 Firebase 指令列介面，幾秒內即可啟動並執行應用程式。
- 輕輕一點即可復原。快速部署固然很好，但能復原錯誤就更棒了。Firebase 託管提供完整的版本管理和版本管理功能，按一下即可復原。
無論您是部署簡單的應用程式到達網頁，還是複雜的漸進式網頁應用程式 (PWA)，「代管服務」都能提供專為部署及管理網站和應用程式而量身打造的基礎架構、功能和工具。
根據預設，每個 Firebase 專案在 web.app 和 firebaseapp.com 網域中都會有免費的子網域。這兩個網站提供相同的部署內容和設定。你也可以視需要將自己的網域名稱連結至 Firebase 代管的網站。
導入步驟
- 設定專案
- 安裝及設定 Firebase 指令列介面
- 部署網站
- 連結至 Firebase 網頁應用程式，以便監控效能 (選用)
不過，您必須先部署機器學習模型和網頁應用程式，才能開始進行相關作業。所以我們來建立一個！
3. 簡易的機器學習模型來預測房價
針對本練習，我們將建立非常簡單的機器學習模型來預測數值。我們會嘗試使用機器學習技術，根據虛構房屋的大小 (平方英尺) 來預測虛構房屋的價值，僅供參考。事實上，在這個示範中，我們只會把房屋的平方乘以 1000 倍，才能取得訓練資料的預測值，但機器學習必須自行學習。
實際上，您可以選擇使用關係較複雜的實際資料 (例如規模較小的房屋估計金額只有 500 倍，但達到特定門檻後，就會逐漸變成 1000 倍等)，而您可能需要更先進的模型來學習預測這些值的最佳方式。
我們今天建立的模型 (線性迴歸) 可用於預測具有足夠實際資料的其他許多事物，且能輕鬆從上述假設用途中著手。不過，我們今天的重點，是瞭解如何儲存及部署模型，而不是針對特定用途設計及最佳化模型。讓我們一起實現吧！
訓練與測試資料
所有機器學習模型都必須先取得一些訓練資料範例，用於訓練模型日後預測值。您通常可以從資料庫、檔案資料夾、CSV 或更多來源取得此類資料，但我們在此直接使用 JavaScript 將 20 個範例硬式編碼為陣列，如下所示。如果您可以在本機環境中執行伺服器，我們建議在目前您會喜歡的環境中 (例如 Glitch.com) 複製這段程式碼。
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];
如您所見，每項資料都有對應的答案值，也就是我們日後會嘗試預測的值 (您可以將這些值視為簡易 2D 圖表的 x 和 y 值)。
針對值 800，我們要產生 $800,000 美元的輸出答案以這個值 900 來說，我們會輸出 $900,000 美元，依此類推。基本上，這個數字會乘以 1000。然而，機器學習模型並不知道 1000 * N 的此簡單關係，必須自行從我們提供的這些範例中學習。
請注意，我們還有一些測試資料是完全獨立於訓練資料之外的，這麼做能讓我們評估已訓練的模型，藉此瞭解模型在前所未見的資料上成效如何。
我們將使用以下 HTML，載入這段指令碼和 TensorFlow.js 程式庫：
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 程式碼，即可訓練模型。
這裡有新增留言的好奇心，但如同本程式碼研究室所提到的，我們對於擷取並代管已儲存的模型來說是比較重點。課程結尾處會連結至其他程式碼研究室，若想進一步瞭解模型建立程序，請見結尾。目前您可以複製程式碼並貼到專案中。
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 的預測結果為 768,073，這項資訊會顯示在瀏覽器的開發人員控制台中 (如果尚未開啟，請按下 F12 鍵開啟)。我們認為的範例比輸入量高出 1000 倍，因此這個估計房價非常合理。注意：你預測的值可能會略有不同，這是正常現象。
如果我們對效能感到滿意，現在只要將模型儲存至磁碟，即可上傳至 Firebase 託管！
儲存模型
在上述的評估函式結尾 (model.predict 之後) 加入下列程式碼後，我們就能直接從網路瀏覽器匯出產生的模型，並儲存至磁碟。如此一來，我們日後就能在某個地方託管模型，且每次載入網頁時就不用重新訓練。
model.js
await model.save('downloads://my-model');
如果您現在造訪 train.html 並執行頁面，系統應會訓練模型 (可能需要幾秒鐘)，然後在完成後提示下載產生的已訓練模型。
4. 設定 Firebase
登入 Firebase 並建立專案
如果你是第一次使用 Firebase，可以使用 Google 帳戶輕鬆完成註冊。只要前往 https://firebase.google.com/，並使用您要使用的一般 Google 帳戶登入即可。重新導向至首頁後，請點選「go to Console」頁面右上角：
重新導向至控制台後，您應該會看到類似下方的到達網頁：
只要點選畫面上的「新增專案」，即可建立新的 Firebase 專案，為專案取一個專屬名稱，接受條款，然後按一下「繼續」。
接下來，系統會詢問是否要在專案中加入數據分析。若想使用這類數據分析，則可啟用這個選項，然後按一下「繼續」，如下所示：
如果一切順利，您應該會收到專案就緒頁面，如下所示：
太厲害了！製作一個專案點選「繼續」即可前往新建專案的控制台。請勿關閉此頁面以供日後使用，但我們現在必須安裝一些工具。
安裝及連線 CLI
Firebase 是以節點 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
執行下列指令，使用您的 Google 帳戶登入 Firebase：
指令列終端機：
firebase login
系統會要求您授予 Google Firebase 帳戶存取權，如下所示：
允許這項操作，這樣您最後應該能成功將指令列工具連結至 Firebase 帳戶：
關閉視窗，然後返回您先前輸入的指令列終端機。現在應該可以接受新指令，如螢幕截圖所示 (本螢幕截圖中隱藏了任何私人資訊)：
恭喜！我們現在準備將檔案從本機電腦推送至已建立的專案。
初始化專案以部署至 Firebase 託管
如要將本機資料夾連線至 Firebase 專案，請從本機專案目錄 (部署時要用來上傳檔案的資料夾) 的根目錄執行下列指令。
指令列終端機：
firebase init
執行這項指令後，只要按照終端機中的操作說明完成設定即可，如下所示：
在這裡，我們只要使用鍵盤上的向下箭頭向下箭頭選取代管服務，然後按下空格鍵選取，然後按下 Enter 鍵即可確認。
現在，我們可以選取先前建立的現有專案來使用：
在「使用現有專案」上按下 Enter 鍵然後使用向下鍵選取該選項，如下所示：
最後按下 Enter 鍵即可使用，接受最後一個彈出畫面並註明「否」的預設值。設定為單頁應用程式：
如果您希望代管多個 html 網頁，可以透過這種方式代管多個網頁。
初始化完成後，您會看到 firebase.json 檔案和「公開」已在執行上述指令的目錄中建立 資料夾。
現在，只需將要部署的檔案移至我們建立的公用資料夾，就可以進行部署了！開始行動吧。
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 程式碼中，我們會指定樣式表，以便日後選擇時將樣式新增至網頁；而使用指令碼.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
完成終端機指令後，您應該能成功發布完整的版本，以及可以使用該指令的網址：
在上述範例中，您可以查看部署的最終到達網址，如下所示：
https://tensorflow-js-demo.web.app (但網址會是您建立的專案名稱)。
在網路瀏覽器中開啟該網址，看看網址是否能夠正常運作；如果成功執行，應在開啟頁面的開發人員控制台中輸出類似內容 (按下 F12 鍵開啟開發人員主控台)。
如您所見，頁面在部署的網域上載入之後，我們正確可以看到模型的預測結果 1,337 平方英尺，結果為 $1,336,999.25 美元，是估計值 1000 倍的理想估計值。當然，如果我們要產生無限的使用者介面來呼叫模型，我們可以做出不限數量的預測，而這一切都會完全在 JavaScript 中執行，以保障查詢的隱私與安全。
現在你的模型已部署並代管，可以與全世界的使用者分享，他們也能在自己的電腦上使用你的應用程式。明確您可能會希望新增更優質的使用者介面，並打造出美觀的使用者介面，但這不在本教學課程的討論範圍內。以機器學習技術為基礎的託管網頁應用程式沒有限制，只要點按即可一鍵操作，完全不必安裝。我們鼓勵您思考其他可受惠於瀏覽器機器學習模型的情況。
Monitoring 用量
除了可加入網站程式碼的任何 Google Analytics，Firebase 也會透過控制台為專案提供版本管理和使用統計資料。部署之後，您會看到以下內容，您可以視需要不時檢查：
如您所見，在免費方案中，根據預設，您每月會為代管檔案提供 10 GB 的頻寬。如果您的網站較熱門，您可能需要新增帳單帳戶，才能使用更多一個月。您可以前往這裡查看大型專案的 Firebase 計畫。不過，如果模型規模較小且使用率偏低，多數的原型使用者很可能不會超過免費方案。因此，在拓展業務或提案前，不妨先利用這個方法進行測試及確認自身需求。
7. 恭喜
恭喜！您已踏出第一步，開始使用 TensorFlow.js 和 Firebase 建構及部署自訂機器學習模型，並與全世界分享。想達到這個目標嗎？運用這項強大且可擴充的方法，就能派上用場。如果您想讓 Firebase 隨需求自動調整資源配置，那麼無論 10 人或 10,000 名使用者，這項功能都適用。
如果之後要變更任何檔案，只要像往常一樣使用 Firebase 部署重新部署應用程式，並且務必清除瀏覽器快取，確保在您下次載入頁面時取得新版檔案。如果您已開啟開發人員工具，就能在「Network」分頁下強制進行這項操作，同時選取「停用快取」來簡化測試核取方塊：
重點回顧
在本程式碼研究室中，我們：
- 完全從頭開始定義及訓練自訂 TensorFlow.js 模型，藉此預測房價。
- 已在開發機器上註冊、設定及安裝 Firebase 與 Firebase CLI 工具。
- 部署並推出正常運作的網站，能夠載入步驟 1 中經過訓練的模型，並在實際網頁應用程式中使用，供世界各地的使用者大規模存取。
後續步驟
有現成的入門階段後，如要擴展這個機器學習模型的部署範本，該如何構思？
我們希望您能將此字串用於您的資料。請想想您居住或工作的產業或領域。您要如何利用這類資料進行預測，以便預測未來可能會用到的資料？本文不僅是房地產的唯一範例，我們建議您將這項做法運用在自己面臨的難題上。祝您入侵愉快！
別忘了在自己使用 #MadeWithTFJS 製作的內容中標記我們 (點選這個連結，即可查看其他人創作的靈感)，你的作品就有機會登上社群媒體，甚至在日後的 TensorFlow 活動中亮相！我們很期待您的設計成果。如有任何意見或疑問，也歡迎與本程式碼研究室的作者聯絡。