練實(shí)戰(zhàn)速成：30分鐘讓瀏覽器學(xué)會(huì)識(shí)別你的手勢(shì))
零代碼AI訓(xùn)練實(shí)戰(zhàn)速成30分鐘讓瀏覽器學(xué)會(huì)識(shí)別你的手勢(shì)【免費(fèi)下載鏈接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1導(dǎo)語(yǔ)概要Teachable Machine 是谷歌開(kāi)源的瀏覽器端AI實(shí)驗(yàn)項(xiàng)目讓零代碼AI訓(xùn)練從口號(hào)變成現(xiàn)實(shí)。這篇文章不堆概念直接帶你走完環(huán)境搭建 → 第一次圖像訓(xùn)練 → 手勢(shì)與聲音玩法的全流程末尾附上新手排障清單和源碼地圖30分鐘即可跑通你的第一個(gè)模型。訓(xùn)練AI一定要先學(xué)會(huì)編程嗎過(guò)去想訓(xùn)練一個(gè)識(shí)別模型你得先啃 Python、準(zhǔn)備數(shù)據(jù)集、跑通訓(xùn)練腳本光是配環(huán)境就能勸退一大半人。Teachable Machine 想改變的正是這件事它把整條訓(xùn)練流水線搬進(jìn)了瀏覽器所有計(jì)算都靠 TensorFlow.js 在本地完成你只需要點(diǎn)按鈕、拍樣本模型就學(xué)會(huì)了。本文不聊高深理論主線只有一條——從零到跑通第一個(gè)可用的識(shí)別模型。讀完你就能動(dòng)手而不是只當(dāng)個(gè)看客。這臺(tái)機(jī)器到底在學(xué)什么先看清它的三進(jìn)三出把界面想象成一條流水線左邊是原料進(jìn)口中間是加工車間右邊是成品出口。輸入攝像頭畫(huà)面圖像識(shí)別或麥克風(fēng)聲音聲音分類大腦瀏覽器里運(yùn)行的神經(jīng)網(wǎng)絡(luò)默認(rèn)準(zhǔn)備了三個(gè)類別綠、紫、橙每個(gè)類別對(duì)應(yīng)一個(gè)答案輸出播放一段音效、用語(yǔ)音合成朗讀一句話或者生成一張 GIF 動(dòng)圖它就像一個(gè)剛?cè)肼毜膶?shí)習(xí)生你反復(fù)示范這個(gè)手勢(shì)代表打招呼多演示幾遍它就能舉一反三。你喂的每份樣本就是工作示范類別標(biāo)簽就是工作要求。記住一個(gè)關(guān)鍵結(jié)論Teachable Machine 學(xué)的是區(qū)分而不是理解。它不關(guān)心你揮手有什么含義只負(fù)責(zé)判斷這次的輸入更像哪一類。5分鐘本地跑通把項(xiàng)目從倉(cāng)庫(kù)搬進(jìn)你的瀏覽器無(wú)需安裝 Anaconda也無(wú)需配置 GPU你只需要準(zhǔn)備好 Node.js 和 yarn然后按順序執(zhí)行四步克隆倉(cāng)庫(kù)到本地git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1進(jìn)入項(xiàng)目目錄并安裝依賴yarn作用和npm install一致啟動(dòng)本地開(kāi)發(fā)服務(wù)yarn run watch打開(kāi)瀏覽器訪問(wèn)https://localhost:3000看到啟動(dòng)向?qū)?dòng)畫(huà)就說(shuō)明環(huán)境跑通了。這里有個(gè)隱藏雷區(qū)攝像頭權(quán)限要求頁(yè)面處于安全上下文本機(jī) localhost 默認(rèn)豁免但想用局域網(wǎng) IP 或手機(jī)訪問(wèn)時(shí)必須走 HTTPS。項(xiàng)目?jī)?nèi)置了watch-https腳本按 README 里的 openssl 命令生成證書(shū)即可別在這一步卡住。15分鐘第一次訓(xùn)練親手喂出一個(gè)手勢(shì)識(shí)別器進(jìn)入主界面后整個(gè)操作被劃分成三個(gè)區(qū)域你按順序走一遍就能完成首次訓(xùn)練Input輸入?yún)^(qū)打開(kāi)攝像頭擺出第一個(gè)手勢(shì)長(zhǎng)按錄制按鈕攢下十幾張樣本盡量變化角度和距離Learning學(xué)習(xí)區(qū)給類別改個(gè)清晰的名字比如把綠色類別命名為拳頭Output輸出區(qū)為這個(gè)手勢(shì)指定一個(gè)反饋比如識(shí)別成功時(shí)播放掌聲點(diǎn)下訓(xùn)練按鈕幾秒鐘后模型就緒。這時(shí)你再揮揮手右側(cè)會(huì)實(shí)時(shí)跳動(dòng)一個(gè)置信度數(shù)值——你可以把它理解成模型的自信指數(shù)數(shù)值越高代表越確定。全程你只點(diǎn)了按鈕沒(méi)寫(xiě)一行代碼。三個(gè)拿來(lái)即用的玩法手勢(shì)、聲音與聯(lián)動(dòng)輸出玩法一手勢(shì)遙控器。訓(xùn)練拳頭和手掌兩個(gè)類別分別綁定不同的音效反饋一個(gè)簡(jiǎn)易的免接觸開(kāi)關(guān)就誕生了適合演示、展覽甚至智能家居的雛形驗(yàn)證。玩法二聲音裁判。項(xiàng)目在assets/outputs/sound/sounds/目錄下預(yù)置了十幾個(gè)音效素材從掌聲、鳥(niǎo)鳴到小號(hào)、豎琴一應(yīng)俱全。你可以錄一段大笑觸發(fā)小號(hào)錄一段安靜觸發(fā)鳥(niǎo)鳴體驗(yàn)純靠聲音驅(qū)動(dòng)的互動(dòng)。玩法三輸入輸出自由搭配。聲音輸入配語(yǔ)音合成輸出識(shí)別到開(kāi)門就朗讀歡迎回家圖像輸入配 GIF 輸出適合做互動(dòng)表情裝置。三種輸入、三種輸出隨意組合這是最容易出創(chuàng)意的空間。新手最常翻車的4個(gè)地方提前避開(kāi)攝像頭被拒在地址欄左側(cè)重新授權(quán)攝像頭權(quán)限然后刷新頁(yè)面別在權(quán)限彈窗上點(diǎn)禁止局域網(wǎng)訪問(wèn)灰屏大概率是沒(méi)走 HTTPS回到上文提到的watch-https方案解決樣本太單一全在同一個(gè)光線、同一個(gè)角度下拍攝換個(gè)環(huán)境模型立刻臉盲標(biāo)簽含糊不清用拳頭/手掌而不是手勢(shì)一/手勢(shì)二——模型和人一樣喜歡清晰的指令模型識(shí)別不準(zhǔn)按這份清單逐條排查與其到處搜為什么不準(zhǔn)不如按順序自查一遍每個(gè)類別的樣本數(shù)是否都超過(guò)了10個(gè)樣本是否覆蓋了角度、距離、光照的多種變化訓(xùn)練時(shí)背景里是否有干擾物比如突然入鏡的路人測(cè)試環(huán)境是否和訓(xùn)練環(huán)境差異過(guò)大置信度是不是長(zhǎng)期在50%上下徘徊若是說(shuō)明兩個(gè)類別長(zhǎng)得太像建議換樣本或合并類別。請(qǐng)記住這臺(tái)機(jī)器的識(shí)別質(zhì)量約等于你喂給它的樣本質(zhì)量。它是垃圾進(jìn)、垃圾出原則最直觀的體現(xiàn)。玩膩了想魔改看懂這四塊源碼就夠了雖然面向零代碼用戶但項(xiàng)目本身就是一個(gè)極佳的學(xué)習(xí)范本模塊劃分很清晰src/ai/WebcamClassifier.js封裝圖像分類核心邏輯基于 MobileNet 與 KNN 實(shí)現(xiàn)src/outputs/SoundOutput、SpeechOutput、GIFOutput三個(gè)輸出器對(duì)應(yīng)上文三種反饋方式src/ui/界面模塊向?qū)?、輸入?yún)^(qū)、學(xué)習(xí)區(qū)、輸出區(qū)都集中在這里style/全部樣式文件使用 Stylus 編寫(xiě)想體驗(yàn)?zāi)Ц牡臉?lè)趣可以從src/config.js入手——類別數(shù)量、類別顏色、麥克風(fēng)觸發(fā)閾值都定義在這個(gè)文件里改一行配置就能立刻看到界面變化?，F(xiàn)在輪到你的手了別只停留在閱讀。你的下一步很簡(jiǎn)單克隆項(xiàng)目、啟動(dòng)服務(wù)、完成一次圖像訓(xùn)練、再換一種輸出方式把這三個(gè)第一次都做完你就已經(jīng)走完了零代碼AI訓(xùn)練的最短閉環(huán)。之后再嘗試加類別、換音效甚至通讀一遍WebcamClassifier.js理解它到底是怎么學(xué)的。關(guān)鍵資源入口完整開(kāi)發(fā)說(shuō)明含 HTTPS 配置README.md圖像識(shí)別核心源碼src/ai/WebcamClassifier.js預(yù)置音效素材assets/outputs/sound/sounds/進(jìn)階學(xué)習(xí)建議把界面上的每個(gè)按鈕都點(diǎn)一遍觀察置信度如何隨樣本變化然后把識(shí)別結(jié)果接到你自己的小工具里比如用它切換頁(yè)面主題、控制一段音樂(lè)播放。學(xué)習(xí)這件事最有效的捷徑永遠(yuǎn)是親手做一遍?！久赓M(fèi)下載鏈接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 零代碼AI訓(xùn)練實(shí)戰(zhàn)速成：30分鐘讓瀏覽器學(xué)會(huì)識(shí)別你的手勢(shì)
零代碼AI訓(xùn)練實(shí)戰(zhàn)速成30分鐘讓瀏覽器學(xué)會(huì)識(shí)別你的手勢(shì)【免費(fèi)下載鏈接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1導(dǎo)語(yǔ)概要Teachable Machine 是谷歌開(kāi)源的瀏覽器端AI實(shí)驗(yàn)項(xiàng)目讓零代碼AI訓(xùn)練從口號(hào)變成現(xiàn)實(shí)。這篇文章不堆概念直接帶你走完環(huán)境搭建 → 第一次圖像訓(xùn)練 → 手勢(shì)與聲音玩法的全流程末尾附上新手排障清單和源碼地圖30分鐘即可跑通你的第一個(gè)模型。訓(xùn)練AI一定要先學(xué)會(huì)編程嗎過(guò)去想訓(xùn)練一個(gè)識(shí)別模型你得先啃 Python、準(zhǔn)備數(shù)據(jù)集、跑通訓(xùn)練腳本光是配環(huán)境就能勸退一大半人。Teachable Machine 想改變的正是這件事它把整條訓(xùn)練流水線搬進(jìn)了瀏覽器所有計(jì)算都靠 TensorFlow.js 在本地完成你只需要點(diǎn)按鈕、拍樣本模型就學(xué)會(huì)了。本文不聊高深理論主線只有一條——從零到跑通第一個(gè)可用的識(shí)別模型。讀完你就能動(dòng)手而不是只當(dāng)個(gè)看客。這臺(tái)機(jī)器到底在學(xué)什么先看清它的三進(jìn)三出把界面想象成一條流水線左邊是原料進(jìn)口中間是加工車間右邊是成品出口。輸入攝像頭畫(huà)面圖像識(shí)別或麥克風(fēng)聲音聲音分類大腦瀏覽器里運(yùn)行的神經(jīng)網(wǎng)絡(luò)默認(rèn)準(zhǔn)備了三個(gè)類別綠、紫、橙每個(gè)類別對(duì)應(yīng)一個(gè)答案輸出播放一段音效、用語(yǔ)音合成朗讀一句話或者生成一張 GIF 動(dòng)圖它就像一個(gè)剛?cè)肼毜膶?shí)習(xí)生你反復(fù)示范這個(gè)手勢(shì)代表打招呼多演示幾遍它就能舉一反三。你喂的每份樣本就是工作示范類別標(biāo)簽就是工作要求。記住一個(gè)關(guān)鍵結(jié)論Teachable Machine 學(xué)的是區(qū)分而不是理解。它不關(guān)心你揮手有什么含義只負(fù)責(zé)判斷這次的輸入更像哪一類。5分鐘本地跑通把項(xiàng)目從倉(cāng)庫(kù)搬進(jìn)你的瀏覽器無(wú)需安裝 Anaconda也無(wú)需配置 GPU你只需要準(zhǔn)備好 Node.js 和 yarn然后按順序執(zhí)行四步克隆倉(cāng)庫(kù)到本地git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1進(jìn)入項(xiàng)目目錄并安裝依賴yarn作用和npm install一致啟動(dòng)本地開(kāi)發(fā)服務(wù)yarn run watch打開(kāi)瀏覽器訪問(wèn)https://localhost:3000看到啟動(dòng)向?qū)?dòng)畫(huà)就說(shuō)明環(huán)境跑通了。這里有個(gè)隱藏雷區(qū)攝像頭權(quán)限要求頁(yè)面處于安全上下文本機(jī) localhost 默認(rèn)豁免但想用局域網(wǎng) IP 或手機(jī)訪問(wèn)時(shí)必須走 HTTPS。項(xiàng)目?jī)?nèi)置了watch-https腳本按 README 里的 openssl 命令生成證書(shū)即可別在這一步卡住。15分鐘第一次訓(xùn)練親手喂出一個(gè)手勢(shì)識(shí)別器進(jìn)入主界面后整個(gè)操作被劃分成三個(gè)區(qū)域你按順序走一遍就能完成首次訓(xùn)練Input輸入?yún)^(qū)打開(kāi)攝像頭擺出第一個(gè)手勢(shì)長(zhǎng)按錄制按鈕攢下十幾張樣本盡量變化角度和距離Learning學(xué)習(xí)區(qū)給類別改個(gè)清晰的名字比如把綠色類別命名為拳頭Output輸出區(qū)為這個(gè)手勢(shì)指定一個(gè)反饋比如識(shí)別成功時(shí)播放掌聲點(diǎn)下訓(xùn)練按鈕幾秒鐘后模型就緒。這時(shí)你再揮揮手右側(cè)會(huì)實(shí)時(shí)跳動(dòng)一個(gè)置信度數(shù)值——你可以把它理解成模型的自信指數(shù)數(shù)值越高代表越確定。全程你只點(diǎn)了按鈕沒(méi)寫(xiě)一行代碼。三個(gè)拿來(lái)即用的玩法手勢(shì)、聲音與聯(lián)動(dòng)輸出玩法一手勢(shì)遙控器。訓(xùn)練拳頭和手掌兩個(gè)類別分別綁定不同的音效反饋一個(gè)簡(jiǎn)易的免接觸開(kāi)關(guān)就誕生了適合演示、展覽甚至智能家居的雛形驗(yàn)證。玩法二聲音裁判。項(xiàng)目在assets/outputs/sound/sounds/目錄下預(yù)置了十幾個(gè)音效素材從掌聲、鳥(niǎo)鳴到小號(hào)、豎琴一應(yīng)俱全。你可以錄一段大笑觸發(fā)小號(hào)錄一段安靜觸發(fā)鳥(niǎo)鳴體驗(yàn)純靠聲音驅(qū)動(dòng)的互動(dòng)。玩法三輸入輸出自由搭配。聲音輸入配語(yǔ)音合成輸出識(shí)別到開(kāi)門就朗讀歡迎回家圖像輸入配 GIF 輸出適合做互動(dòng)表情裝置。三種輸入、三種輸出隨意組合這是最容易出創(chuàng)意的空間。新手最常翻車的4個(gè)地方提前避開(kāi)攝像頭被拒在地址欄左側(cè)重新授權(quán)攝像頭權(quán)限然后刷新頁(yè)面別在權(quán)限彈窗上點(diǎn)禁止局域網(wǎng)訪問(wèn)灰屏大概率是沒(méi)走 HTTPS回到上文提到的watch-https方案解決樣本太單一全在同一個(gè)光線、同一個(gè)角度下拍攝換個(gè)環(huán)境模型立刻臉盲標(biāo)簽含糊不清用拳頭/手掌而不是手勢(shì)一/手勢(shì)二——模型和人一樣喜歡清晰的指令模型識(shí)別不準(zhǔn)按這份清單逐條排查與其到處搜為什么不準(zhǔn)不如按順序自查一遍每個(gè)類別的樣本數(shù)是否都超過(guò)了10個(gè)樣本是否覆蓋了角度、距離、光照的多種變化訓(xùn)練時(shí)背景里是否有干擾物比如突然入鏡的路人測(cè)試環(huán)境是否和訓(xùn)練環(huán)境差異過(guò)大置信度是不是長(zhǎng)期在50%上下徘徊若是說(shuō)明兩個(gè)類別長(zhǎng)得太像建議換樣本或合并類別。請(qǐng)記住這臺(tái)機(jī)器的識(shí)別質(zhì)量約等于你喂給它的樣本質(zhì)量。它是垃圾進(jìn)、垃圾出原則最直觀的體現(xiàn)。玩膩了想魔改看懂這四塊源碼就夠了雖然面向零代碼用戶但項(xiàng)目本身就是一個(gè)極佳的學(xué)習(xí)范本模塊劃分很清晰src/ai/WebcamClassifier.js封裝圖像分類核心邏輯基于 MobileNet 與 KNN 實(shí)現(xiàn)src/outputs/SoundOutput、SpeechOutput、GIFOutput三個(gè)輸出器對(duì)應(yīng)上文三種反饋方式src/ui/界面模塊向?qū)?、輸入?yún)^(qū)、學(xué)習(xí)區(qū)、輸出區(qū)都集中在這里style/全部樣式文件使用 Stylus 編寫(xiě)想體驗(yàn)?zāi)Ц牡臉?lè)趣可以從src/config.js入手——類別數(shù)量、類別顏色、麥克風(fēng)觸發(fā)閾值都定義在這個(gè)文件里改一行配置就能立刻看到界面變化?，F(xiàn)在輪到你的手了別只停留在閱讀。你的下一步很簡(jiǎn)單克隆項(xiàng)目、啟動(dòng)服務(wù)、完成一次圖像訓(xùn)練、再換一種輸出方式把這三個(gè)第一次都做完你就已經(jīng)走完了零代碼AI訓(xùn)練的最短閉環(huán)。之后再嘗試加類別、換音效甚至通讀一遍WebcamClassifier.js理解它到底是怎么學(xué)的。關(guān)鍵資源入口完整開(kāi)發(fā)說(shuō)明含 HTTPS 配置README.md圖像識(shí)別核心源碼src/ai/WebcamClassifier.js預(yù)置音效素材assets/outputs/sound/sounds/進(jìn)階學(xué)習(xí)建議把界面上的每個(gè)按鈕都點(diǎn)一遍觀察置信度如何隨樣本變化然后把識(shí)別結(jié)果接到你自己的小工具里比如用它切換頁(yè)面主題、控制一段音樂(lè)播放。學(xué)習(xí)這件事最有效的捷徑永遠(yuǎn)是親手做一遍?！久赓M(fèi)下載鏈接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考