🚀 互動式Machine Learning AI機器學習教學平台 · 香港編程學院 | 機器學習課程

Machine Learning AI機器學習中文教學網站

這是一個專為繁體中文使用者設計的 AI 與 Machine Learning 學習指南，深入淺出地涵蓋了監督式與非監督式學習、感知器、神經網路及深度學習等核心技術。我們不僅探討過擬合與模型評估等關鍵實務，更結合 JavaScript ML 打造多款互動式範例，讓讀者能直接在網頁上體驗演算法，輕鬆跨越人工智慧的學習門檻。

16+ 教學區塊與互動模組

6 新增 AI 核心教學章節

100% 純 HTML / CSS / JS

神經網路視覺化概念

感知器是神經網路的起點；多層感知器可進一步擴展成較複雜的神經網路結構。

💡

深度學習是機器學習的分支，模擬人類神經網路架構，透過多層運算處理複雜數據。它擅長從海量資料中自動提取特徵，是實現影像辨識、語音處理及生成式 AI 的核心技術。

🚀 入門導讀

機器學習可簡化理解為：傳統程式設計是「資料 + 演算法 = 結果」，而機器學習則傾向於由「資料 + 結果」去找出規則或模型。

Beginner Friendly Interactive Demo Traditional Chinese

1️⃣

先懂核心概念

理解 AI、Machine Learning、Neural Network、Deep Learning 的層級關係。

AI 是較大的領域
ML 是 AI 的子領域
Deep Learning 常用多層神經網路

2️⃣

再看感知器

感知器可視為最基本的人工神經元，用輸入、權重與閾值來做二元判斷。

輸入 x
權重 w
加總與啟動函數

3️⃣

最後做互動實作

從純文字理解升級成滑桿模擬、簡易訓練、JS 範例與測驗，學得更扎實。

即時輸出結果
程式碼可複製
小測驗立即驗收

📌

若要做成正式上線網站，下一步可再拆成多頁架構、加入登入系統、學習進度追蹤與深淺色主題切換。

🧠 機器學習基礎

機器學習的重點，在於讓系統從資料中學習規律。深度學習則是其中更進階的分支，適合處理像影像辨識等更複雜任務。

主題	說明	學習重點
人工智慧 AI	讓電腦執行看似需要人類智慧的任務。	整體領域理解
機器學習 ML	系統從資料中學習模型與規則。	資料、特徵、模型
神經網路 NN	由多個人工神經元組成，模仿生物神經處理方式。	輸入層、隱藏層、輸出層
深度學習 DL	使用更多隱藏層的神經網路處理複雜模式。	多層結構與複雜特徵學習

📊

傳統程式 vs 機器學習

傳統程式：資料 + 規則 → 結果；機器學習：資料 + 已知結果 → 找出模型。

🧬

為何需要深度學習？

因為現實世界資料往往非常複雜，例如影像、語音、自然語言，簡單規則難以涵蓋。

🏷️ 監督式學習

監督式學習是最常見的機器學習方式之一。資料集裡會包含輸入與正確標籤，模型透過大量範例學會輸入與輸出之間的對應關係，常見任務有分類與回歸。

分類 Classification 回歸 Regression 有標籤資料

🏠

互動範例：房價回歸預測器

調整房屋坪數、房間數、屋齡，觀察預測房價如何變動。

房屋坪數（坪）

房間數

屋齡（年）

模型類型監督式回歸

預測房價0 萬

模型解讀資料更新中...

📩

互動範例：垃圾郵件分類器

當訊息有太多驚嘆號、優惠字眼或全大寫時，垃圾郵件分數會升高。

驚嘆號數量

是否包含「限時優惠 / 免費」字眼

是否大量大寫英文

垃圾郵件機率0%

✅ 正常郵件

🧩 非監督式學習

非監督式學習的資料通常沒有標籤，模型需要自己從資料中找出結構、群集或異常模式。最常見的應用包含分群、降維與異常偵測。

Clustering Dimensionality Reduction 無標籤資料

👥

互動範例：客戶分群

利用每月消費金額與每月造訪次數模擬客戶分群。

每月消費金額（0 ~ 100）

每月造訪次數（0 ~ 30）

最接近群組分析中...

群組說明分析中...

📦

分群概念小抄

方法	用途
K-Means	把資料分成多個相似群集
PCA	降維，方便視覺化與壓縮特徵
Anomaly Detection	找出明顯不尋常的資料點

💡

非監督式學習常用於會員分群、使用者行為分析與市場區隔。

⚙️ 感知器 Perceptron

感知器是最基本的人工神經元。它接收多個輸入，每個輸入有不同權重，經過加權總和後與閾值比較，再決定輸出 0 或 1。

Input Weight Threshold Activation

🧮

基本公式

加權總和：

sum = x1*w1 + x2*w2 + x3*w3 + ...

啟動條件：

output = (sum > threshold) ? 1 : 0

🎯

你可以把它想像成「是否通過某個決策門檻」的簡化模型。

🧠

互動示範：演唱會決策感知器

用五個輸入模擬是否去演唱會常見的感知器例子。

藝人很喜歡 x1

天氣很好 x2

朋友會來 x3

有供餐 x4

有飲料 x5

閾值 threshold

1.5

w10.7

w20.6

w30.5

w40.3

w50.4

Weighted Sum1.6

✅ 輸出 1：去參加

📈 訓練流程：從猜測到修正

感知器訓練的概念是：先猜一個結果，與正確答案比較，若有誤差就調整權重。經過多次迭代後，模型會逐步學到較好的判斷規則。

🔁

訓練步驟

建立輸入與初始隨機權重
用目前權重計算輸出
比較預測與正確答案
依誤差調整權重
重複很多次直到表現改善

weight[i] = weight[i] + learningRate * error * input[i]

🧪

訓練模擬器

觀察準確度與損失感的視覺化變化。

模擬訓練回合（epochs）

模型準確度

損失下降趨勢（模擬）

🧩

這裡的訓練動畫是教學型模擬，幫初學者理解模型逐漸變好的概念。

🌐 神經網路

神經網路可視為由多個人工神經元組成的運算系統。單一感知器只能做簡單判斷，但多層神經元串接之後，就能學習更複雜的模式。

Input Layer Hidden Layer Output Layer

🔗

互動範例：前向傳播 Playground

調整輸入值與權重，觀察隱藏層與輸出層的變化。

輸入 x1

0.8

輸入 x2

0.4

h1 權重 w11

1.2

h1 權重 w12

0.8

h2 權重 w21

-0.7

h2 權重 w22

1.5

輸出層權重 o1

1.1

輸出層權重 o2

0.9

啟動函數

📶

輸出觀察面板

隱藏層 h10

隱藏層 h20

輸出 y0

✅ 偏向正類別

🧠

真實神經網路通常會有更多層、更多神經元與更複雜的啟動函數。

🎯 過擬合 Overfitting

過擬合表示模型把訓練資料記得太細，導致對新資料泛化能力變差。

Training Score Validation Score Generalization

📉

互動範例：模型複雜度模擬器

調整模型複雜度，觀察訓練分數與驗證分數的差距。

模型複雜度（例如特徵數 / 多項式次數）

🧪

模型泛化結果

訓練分數

驗證分數

泛化差距0%

判定尚未模擬

📊 模型評估

模型不能只看準確率，還要依應用場景評估 Precision、Recall、F1-score 等指標。

Accuracy Precision Recall F1-score

🧮

互動範例：混淆矩陣計算器

True Positive (TP)

False Positive (FP)

True Negative (TN)

False Negative (FN)

📐

評估結果

Accuracy0%

Precision0%

Recall0%

F1-score0%

指標	公式
Accuracy	(TP + TN) / 全部樣本
Precision	TP / (TP + FP)
Recall	TP / (TP + FN)
F1	2 × Precision × Recall / (Precision + Recall)

🚀 深度學習

深度學習通常指使用多層神經網路處理複雜問題，例如影像辨識、語音處理與自然語言理解。

CNN RNN Transformer Large Data

🛰️

互動範例：深度學習選型顧問

選擇任務種類、資料量與算力預算，系統會給你一個教學型建議。

任務類型

資料量規模（1 ~ 100）

算力預算

是否需要即時推論

🤖

深度學習建議結果

適合度分數0 / 100

推薦方向尚未分析

說明請點擊產生建議

⚠️

表格資料很多時候，傳統機器學習模型仍可能比深度學習更有效率。

💻 JavaScript 與瀏覽器中的機器學習

使用 JavaScript 做機器學習有很強的教學與前端整合優勢。你可以在瀏覽器裡直接執行模型示範、互動視覺化與圖表。

⚡

瀏覽器學習的優點

不用安裝太多環境
互動式學習體驗更好
適合做教學展示與產品原型
能結合 Canvas、圖表與動畫

🧰

常見前端 ML 生態

TensorFlow.js
ml5.js
Brain.js
Plotly / Chart.js / D3.js 視覺化

圖像分類入門

可用預訓練模型辨識一張圖片的可能類別，讓初學者快速理解模型輸入與模型輸出。

文字情緒判斷

輸入一句評論，輸出正向或負向分數，適合教導分類模型與標籤概念。

為什麼圖表重要？

因為模型的學習過程、損失曲線、分類結果與權重變化，都很適合用圖形化方式呈現。

更進階的教學網站可以加入什麼？

可以加入線上練習區、題庫、模型參數調校介面、課程進度追蹤、登入帳號與收藏功能。

🧪 實務案例與應用靈感

除了理論，教學網站也應展示真實應用方向，例如影像分類、音樂生成、醫療健康分析與資料科學應用。

🖼️

影像分類

上傳圖片後，由模型判斷圖中可能的物件類別，是常見也直觀的 ML 教學題材。

🎵

音樂與生成式創作

可介紹演算法如何模擬風格、排列組合旋律，作為 AI 創作主題的延伸。

🏥

醫療健康應用

利用大量資料輔助判斷、分析風險與支援研究，是 AI 在現代醫療的重要方向。

視覺化示意：二維資料點分類邊界（教學用）

🧾 程式範例實驗室

這裡提供更適合教學網站展示的範例，你可以直接複製使用。

const inputs = [1, 0, 1, 0, 1];
const weights = [0.7, 0.6, 0.5, 0.3, 0.4];
const threshold = 1.5;

let sum = 0;
for (let i = 0; i < inputs.length; i++) {
  sum += inputs[i] * weights[i];
}

const output = sum > threshold ? 1 : 0;
console.log("Weighted Sum:", sum);
console.log("Output:", output);

function train(weights, inputs, desired, learningRate = 0.1) {
  let sum = 0;
  for (let i = 0; i < inputs.length; i++) {
    sum += inputs[i] * weights[i];
  }

  const guess = sum > 0 ? 1 : 0;
  const error = desired - guess;

  for (let i = 0; i < weights.length; i++) {
    weights[i] += learningRate * error * inputs[i];
  }

  return { guess, error, weights };
}

const lessons = [
  {
    id: "ml-basics",
    title: "機器學習基礎",
    level: "初階",
    duration: "15 分鐘",
    topics: ["AI vs ML", "資料", "模型", "應用"]
  },
  {
    id: "perceptron",
    title: "感知器",
    level: "初階",
    duration: "20 分鐘",
    topics: ["輸入", "權重", "閾值", "輸出"]
  },
  {
    id: "training",
    title: "訓練流程",
    level: "中階",
    duration: "25 分鐘",
    topics: ["誤差", "學習率", "權重更新"]
  }
];

📝 小測驗

學完之後，立即檢查你是否掌握了基本概念。

1. 感知器最核心的運算流程是什麼？

先排序資料，再輸出圖片將輸入乘上權重後加總，再與閾值比較先建立資料庫，再生成網頁

2. 深度學習通常與什麼有關？

多層神經網路只有一個 if 判斷式純手動規則，不用資料

❓ 常見問題 FAQ

這些問題很適合放進正式教學網站，提升完整度與專業感。

什麼是感知器？

感知器是最基本的人工神經元模型，會把輸入與權重相乘後加總，再根據閾值決定輸出。

機器學習一定要用 Python 嗎？

不一定。Python 很常見，但 JavaScript 也很適合教學展示、前端互動與瀏覽器內模型體驗。

深度學習和神經網路有什麼關係？

深度學習可視為使用較多層神經網路的一種機器學習方法，擅長處理複雜任務。