在導師傳來新任務之前，整理實習日誌。
導師傳來新任務的專案網址、線上展示網址、目前狀況的說明。我這時候才知道，之前研究過的去背和貼圖，是用在這個任務中。
導師說線上展示網址的結果頁面有成功運作，但實在太卡了，而且衣服跟臉對不太上，要我研究看看有沒有優化的解法：
打開專案原始碼網址，導師忘記給我存取權限了。不過我也不需要立刻拿到權限，因為可以先把自己之前做的測試用專案拿來改，成功之後再去改公司的專案，這樣應該會比較簡單。
線上展示網址不知為何是之前的其它專案的網址，把網址列改成現在專案的名稱就成功開啟了。在我的手機上衣服和臉並沒有分離。先去研究如何讓去背功能變順暢。
我之前以為去背功能會很卡只是因為自己的手機效能較弱，看來是真的卡。
想起之前藉由更新 html2canvas 的版本解決掉圖片位置偏移的問題。也許這次更新版本可以改善運作速度。更新兩個 CDN 連結網址的版本 (@tensorflow/tfjs 和 @tensorflow-models/body-pix)，仍然可以運作但是沒有比較快。
無法改善 TensorFlow 的運作速度問題，於是回去研究之前試過的 MediaPipe 去背。打開之前試過的 MediaPipe 去背的範例程式碼，從頭到尾再看一次。
取得 canvas 元素和 2D 內容：
1linkconst canvasElement = document.getElementsByClassName('output_canvas')[0];
2linkconst canvasCtx = canvasElement.getContext('2d');
在 MDN Web Docs 查詢 canvas 當中繪製複數圖形時，如何決定保留哪些部分：Compositing and clipping。
1linkcanvasCtx.globalCompositeOperation = 'source-in';
在 MDN Web Docs 查詢 canvas 當中繪製圖形的方法：CanvasRenderingContext2D.drawImage()，得知可以在 canvas 當中繪製影片畫面。
1linkcanvasCtx.drawImage(
2link image, 0, 0, canvasElement.width, canvasElement.height);
查完文件才真正看懂範例程式碼的運作原理，是先在 canvas 當中塗上綠色，再把攝影機畫面中有人臉的區域留下來。
嘗試隱藏攝影機畫面，可以只顯示偵測到人臉的綠色區域。嘗試不塗綠色，可以只顯示偵測到人臉的區域，預設是紅色。
想到也許可以只在人臉區域中顯示攝影機畫面。
傳訊息給導師：
你好
以下報告一些進度和問題
- 還沒收到專案存取權限
- 目前最大的問題是去背的運作速度太慢，正在自己之前的專案中嘗試改善
- demo 的網址應該是這個才對？ (實際上線網址)
- 用我的手機看 demo 是正常的，沒有人頭跟衣服分離情況
感謝
導師回覆＂感謝，第 4 可能要動作大一點，但會頓＂。
嘗試把攝影機畫面轉換成 VideoFrame 並在 canvas 當中繪製畫面，失敗了。
下班前傳訊息給導師：
你好
目前的進度是嘗試改用 MediaPipe 和 canvas 裁剪
程式碼在這裡
https://github.com/TzuHanChen/segmentation-facemesh
我先下班了
謝謝
勇於面對問題和閱讀官方文件，這兩件事情很重要。