IntelliTeach 線上學習平台

結合嵌入裝置與大型語言模型的線上學習平台,提供AI助教、課堂重點快照、無障礙黑板等功能,提升教學與學習體驗。

Full Stack Nuxt Kubernetes LLM GraphRAG YOLO Data Embedding

目錄


影片

一、 摘要

在疫情期間,線上學習模式蓬勃發展,加上政府和大專院校對 SDGs 目標的推動,學習型態逐漸數位化,且教育政策日益重視自主學習的推廣。

從學生與教師的角度來看,教學與學習實務中出現了許多挑戰。例如:

  • 學生需要頻繁使用網頁搜尋或詢問 ChatGPT,同時還要記錄筆記使用筆記軟體,導致在不同軟體之間來回切換。
  • 學生課後想利用影音資源進行自主學習,卻無法快速鎖定特定知識點對應的上課片段。
  • 教師錄製課程常因繁瑣的操作而顯得不便。現有教學平台的課程影片有時散落未歸類、檔案格式不一或無法直接播放,且教師需要手動上傳上課錄影。

這些常見功能分散於市面上的不同軟體,對師生而言帶來學習與教學上的不便。

👉 因此,我們提出了一種整合多種功能的解決方案,並針對 AI 助手、課堂重點快照、課堂錄影、字幕生成與教學平台 進行全面優化。

本方案主要包括兩個部分:

(1) 嵌入式裝置

  • 自動化進行課堂錄影、黑板與簡報內容的擷取與字幕生成。
  • 系統運用 YOLOv8 與影像處理技術,去除黑板上被人像遮擋的部分。
  • 提供教師透過手勢觸發特定功能。
  • 對教師而言,只需按下錄影鍵,錄製完成後系統會自動上傳至平台,教師也能依需求客製化關閉部分功能。

(2) 多功能整合平台

  • 除了常見的課程管理功能,還包括 AI 助教系統、筆記系統、課程重點系統、課程與問答心智圖 等核心功能。
  • AI 助教系統
    • 使用者可選擇不同大型語言模型。
    • 基於 GraphRAG 技術 改善 LLM 在處理長文本(課程影片、會議紀錄)時的幻覺與不精確問題。
    • 搭配 In-Context Learning 提升問答品質。
    • 支援跨平台同步功能,學生在討論室時可讓 AI 助手同步廣播回應。
  • 筆記系統
    • 學生可複製系統生成的筆記。
    • 筆記支援共享/私密、共編、版本號功能。
  • 課程重點系統
    • 自動將課程影片分段並生成重點。
    • 透過 GraphRAG 保持重點的連貫性。
    • 學生可同時觀看影片、黑板內容、簡報與重點摘要。
    • 點擊重點即可跳轉至對應的影片時間軸,或請 AI 助手幫忙定位知識點。
  • 課程與問答心智圖
    • 每堂課基於 GraphRAG 產生知識圖譜,並實作視覺化。
    • 使用者能一目了然看到課程重點、關聯與重要程度,並能快速連結到影片片段。
    • AI 問答會產生問答心智圖,顯示知識點與問題的對應。

二、 研究動機與研究問題

在日常生活與政府公告、新聞報導中,我們觀察到教學場域中的許多不便:

教學形式的變革

  • 線上教學的迅速發展 [1]。
  • 實體課程與線上直播並行 [2]。

👉 帶來 課程影音資料保存學習資源管理 的新挑戰。

學生學習方式的變化

  • 經常利用筆記軟體、搜尋引擎或 AI 工具 [3]。
  • 在多應用程式間切換影響學習連貫性。
  • 難以迅速掌握重點,或找到影片中的具體片段。
  • 希望快速、有條理地掌握整堂課內容,並使用心智圖、共編筆記工具來提升學習效果。
  • 期待高精準度的 AI 助手,能依照課程內容提供正確解答。

現有平台的不足

  • 大多僅以影片與字幕為主 [4]。
  • 重點整理功能簡單,無法整合完整教學資源。
  • 無法同時涵蓋投影片、黑板、教師講解。

👉 我們設計了 多畫面切換子系統

  • 學生可自由選擇觀看畫面。
  • 時間軸保持同步。
  • 搭配 GraphRAG 技術 進行影片段落切分與重點分析,具備整體性與關聯性。

三、文獻回顧與探討

1. LLM 與 RAG 的限制

大型語言模型(LLM)在知識生成上很強大,但常有以下問題:

  • 缺乏外部知識支援 → 容易產生「幻覺」。
  • 無法針對特定領域客製化。

RAG (Retrieval-Augmented Generation) 嘗試結合檢索與生成,透過向量資料庫補充資訊,改善上述問題。 👉 優點:降低幻覺、減少高成本訓練、回應更具授權來源。

2. GraphRAG 的突破

GraphRAG 引入 知識圖譜社群檢測 (community detection),能:

  • 處理長文本,提供全局性回答。
  • 進行關聯推理,回應更有邏輯。
  • 搭配知識圖譜可視化,讓學生理解更清晰。

圖 1. GraphRAG pipeline using an LLM-derived graph index of source document text.
圖 1. GraphRAG pipeline using an LLM-derived graph index of source document text.

3. 市場案例分析

  • 均一教育平台:提供段落跳轉與 AI 助手,但段落需人工標記,AI 回覆偏片段化。
    圖 2. 均一教育平台 課程影片介面
    圖 2. 均一教育平台 課程影片介面
    圖 3. 均一教育平台 AI狐狸貓助手
    圖 3. 均一教育平台 AI狐狸貓助手
  • Voicetube:強調字幕與單字學習,但缺乏長文本分析與全局整理。
    圖 4.1 Voicetube AI影片字幕簡易運作流程
    圖 4.1 Voicetube AI影片字幕簡易運作流程
    圖 4.2 Voicetube 線上學習介面
    圖 4.2 Voicetube 線上學習介面

👉 我們的差異:

  • 自動化重點整理 + 多畫面同步
  • GraphRAG 全局理解
  • 筆記、知識圖譜整合

四、 方法及步驟

本計畫分為兩大實作與應用部分,分別涵蓋 嵌入式裝置線上學習平台前後端架構

下文將依據圖 5 說明整體架構,並進一步探討嵌入式裝置與線上學習平台的詳細實作。


1. 前端架構

  • 技術:使用 Nuxt.js、Vue.js 現代前端框架,實現動態和響應式的用戶界面。
  • 功能模塊:包括電子黑板、影片播放器、筆記區和討論區等模塊。
  • 目標:提供直觀且易於操作的用戶界面,確保用戶能輕鬆訪問所有功能。

2. 後端架構

  • 伺服器架構:採用微服務架構,便於擴展和維護,確保每個功能模塊的獨立運行。
  • 邊緣計算:部署 Jetson Nano 等設備,實現教室內影像信號的高效處理,減少對中心伺服器的依賴,提升教室設備的協同工作效率。
  • 協作機制:使用 RTSP 與 WebSocket 協議,確保設備之間的即時通信和同步。
  • 容器化與編排
    • Container:將應用及其所有依賴封裝到容器中,實現一致的開發和運行環境。
    • Kubernetes(K8s):用於容器編排和管理,支持自動擴展、負載均衡和故障恢復。
    • Traefik:作為 Ingress 控制器,管理進入 Kubernetes 集群的 http 和 https 流量,支持動態路由。
  • 目標:提供穩定且快速的數據處理和交互支持,確保用戶請求的即時響應以及 High Availability。

3. 子系統功能

  • Login Subsystem:提供使用者多元直覺的方式登入與註冊。
  • Management Subsystem:提供使用者、管理員以及老師,能進行個人資訊、課程資訊、影片資訊,以及檢舉與回報相關管理。
  • Note Subsystem:提供 AI 筆記(自動產生)與一般筆記(由使用者撰寫)。
  • Course Page Subsystem:提供課程播放器,使用者可以選擇章節並顯示該章節的重點。
  • Video Forum Subsystem:每部影片都有一個討論區,供使用者進行發問與回覆。
  • Course Data Subsystem:提供使用者個人化的影片資訊,例如觀看進度條、課程收藏等。
  • Recording Subsystem:提供教師便捷的錄製功能,可錄製講解、討論或實作過程。
  • Course Processing Subsystem:處理課程建立後的自動化,以及 LLM Subsystem 各模組之間的數據流動與處理。
  • Auth Subsystem:提供用戶身份驗證(JWT Claim)與授權管理(Role Check),確保系統安全性與用戶數據保護。
  • LLM Subsystem:基於大語言模型的各種功能,例如 RAG、Chat、Embedding、Chaptering、Noting。

圖 5. IntelliTeach - 整合嵌入裝置暨大型語言模型之線上學習平台架構圖
圖 5. IntelliTeach - 整合嵌入裝置暨大型語言模型之線上學習平台架構圖

圖 6. 嵌入式裝置架構與運作流程
圖 6. 嵌入式裝置架構與運作流程


4. 嵌入式裝置運作流程

如圖 6 所示,教師可選取附近已開啟的嵌入式裝置作為錄製設備,點擊錄製後會自動擷取簡報與黑板畫面。

黑板畫面處理 pipeline:

  1. 手勢事件偵測 → 教師可用手勢觸發特定事件。
  2. 黑板畫面裁切與人像去除 → 每禎更新黑板書寫區域。
  3. 黑板影像去模糊處理(deblurring)。

處理後的影像與聲音會自動上傳至 Amazon S3,供後端進行 GraphRAG 操作,並支持影片預覽。


5. 嵌入式裝置主要功能

  1. 電子黑板與手寫內容轉化。
  2. 智慧教室錄影 → 人物裁切、黑板內容去遮擋、數位板書。
  3. 智慧教室協作系統。

6. 線上學習平台核心功能

每個功能的操作流程圖如圖 7–9 所示:

  • 課程管理(如圖 9)
  • AI 助手(如圖 7 左側)
  • 課堂字幕與重點整理自動化,以及基於 GraphRAG 產生知識圖譜自動化流水線(如圖 7 右側)
  • GraphRAG 知識圖譜與問答視覺化(如圖 8)
  • 筆記(共享/私人)、討論區(如圖 9)

圖 7. AI助手與基於GraphRAG產生知識圖譜自動化流水簡易流程
圖 7. AI助手與基於GraphRAG產生知識圖譜自動化流水簡易流程

圖 8. GraphRAG知識圖譜與問答視覺化簡易流程
圖 8. GraphRAG知識圖譜與問答視覺化簡易流程

圖 9. 線上學習平台整體架構
圖 9. 線上學習平台整體架構


7. 解決方案差異化

我們以 SDGs 為基礎,深入分析現有教學平台的不足之處,找出未開發領域並提出整合優化方案。

  • 平台強調易用性與跨設備相容性。
  • 智慧教室錄影系統無需改造或重新配線,能利用現有設備與影像傳輸設施,大幅降低部署成本。
  • 教育理論上,結合 建構主義學習理論多元智能理論,並引入 GraphRAG + LLM 技術,提升學習體驗。
  • 系統應用包含:語音轉文字、OCR、影像處理、機器學習。
  • 自動化功能:字幕生成、章節劃分、重點整理、AI 助手、知識圖譜視覺化。

8. 功能比較表

功能市面系統本計畫系統
電子黑板與手寫內容轉化需使用昂貴電子黑板可用傳統黑板 + OCR 轉化
語音轉文字人工字幕或人工校正AI 自動字幕,正確率較高
自動章節分類需人工耗時✅ 自動生成
重點分析與筆記需人工整理,或過於片段化✅ AI 自動生成筆記
GraphRAG 應用❌ 無✅ 支援全局性問題
智慧教室系統部分具備✅ 支援邊緣計算協作
操作便捷性部分跨平台✅ 跨平台,AI 助手可同步回覆
筆記系統一般或共編筆記✅ 私人筆記、共編筆記、AI 筆記、版本還原
課堂影片系統單一畫面或片段✅ 多畫面同步 + GraphRAG 分段
大型語言模型表現全局性問題差✅ 全局性問題表現佳
快速跳轉❌ 無✅ 點擊重點直達影片片段
錄製課程手動錄製、手動上傳✅ 一鍵錄製、自動上傳

表 1. 功能比較表


五、 實作結果

本專題根據上述功能進行了實際的開發與實作。

1. 課程介面

圖 9. 課程瀏覽介面-含影片紀錄與課程列表
圖 9. 課程瀏覽介面-含影片紀錄與課程列表

圖 10. 課程影片頁面-含多元畫面、AI重點整理、快速筆記/引用
圖 10. 課程影片頁面-含多元畫面、AI重點整理、快速筆記/引用

  • 「繼續學習」區域可直接跳轉到上次觀看位置。
  • 左側可切換三種視角(電腦畫面、黑板、PDF 講義)。
  • 右側提供系統自動生成的重點摘要,可同步跳轉時間軸。
  • 支援「快速筆記」與「引用討論」。

圖 11. AI章節段落可點擊跳轉至對應頁面
圖 11. AI章節段落可點擊跳轉至對應頁面

圖 12. 筆記編輯系統與共享/私人筆記列表
圖 12. 筆記編輯系統與共享/私人筆記列表


2. 筆記系統

圖 13. 響應式介面與課堂影片列表和課堂共享筆記
圖 13. 響應式介面與課堂影片列表和課堂共享筆記

圖 14. 處理自動化清單與筆記版本紀錄
圖 14. 處理自動化清單與筆記版本紀錄

  • 筆記支援共享與私人模式。
  • 響應式設計,手機、平板、桌機皆適用。
  • 提供版本控制,可回復舊版。

3. 自動化處理流程

圖 15. 自動上傳後端
圖 15. 自動上傳後端

圖 16. GraphRAG知識圖譜/視覺化自動化
圖 16. GraphRAG知識圖譜/視覺化自動化

系統自動化流水線:

  1. 上傳影片。
  2. 產生字幕。
  3. 自動分割章節。
  4. 生成 AI 重點整理。
  5. 建立 GraphRAG 知識圖譜。
  6. 視覺化。

👉 教師只需錄影,後續全自動完成。


4. AI 助手

圖 17. AI助手多平台同步回應與自動標題
圖 17. AI助手多平台同步回應與自動標題

圖 18. AI助手客製化設定與懸浮助手
圖 18. AI助手客製化設定與懸浮助手

  • 支援跨平台同步。
  • 問答會自動產生問題標題。
  • 使用者可自訂 LLM 模型,並選擇本地/全局 GraphRAG 檢索。
  • AI 助手能生成視覺化知識圖譜。

5. GraphRAG 應用

圖 19. GraphRAG知識圖譜視覺化-全局(點擊節點可展開-如圖20)
圖 19. GraphRAG知識圖譜視覺化-全局(點擊節點可展開-如圖20)

圖 20. GraphRAG知識圖譜視覺化-全局 (點擊紅色關聯群集)
圖 20. GraphRAG知識圖譜視覺化-全局 (點擊紅色關聯群集)

圖 21. GraphRAG知識圖譜節點與關聯資訊列表
圖 21. GraphRAG知識圖譜節點與關聯資訊列表

圖 22. GraphRAG知識圖譜視覺化-問答
圖 22. GraphRAG知識圖譜視覺化-問答

  • 全局知識圖譜 → 展示課程完整知識點與關聯。
  • 問答知識圖譜 → 顯示問題與對應知識點的關聯。
  • 多種圖譜呈現模式(有向圖、重力圖)。
  • 節點依重要性與關聯性進行分類與分布。

6. 黑板影像處理

圖 23. 黑板影像處理-去除人像展示(上為遮蔽處不更新,下原畫面)
圖 23. 黑板影像處理-去除人像展示(上為遮蔽處不更新,下原畫面)

圖 24. 黑板影像處理-更新畫面展示(上-更新遮蔽處後,即便人又擋住但會顯示之前書寫痕跡)
圖 24. 黑板影像處理-更新畫面展示(上-更新遮蔽處後,即便人又擋住但會顯示之前書寫痕跡)

  • 系統即時偵測並識別黑板上的人像。
  • 遮擋部分 → 自動停止更新,確保不受干擾。
  • 遮蔽消失後即時恢復更新。
  • 搭配二值化與對比度增強 → OCR 較精確。
  • 即使短暫遮擋,學生仍可獲得完整黑板資訊。

六、 參考文獻

[1] 我國數位學習趨勢 2021年疫情成重要轉捩點-教育部2024數位學習國際論壇,Aug,2024 (https://tw.news.yahoo.com/%E6%88%91%E5%9C%8B%E6%95%B8%E4%BD%8D%E5%AD%B8%E7%BF%92%E8%B6%A8%E5%8B%A2-2021%E5%B9%B4%E7%96%AB%E6%83%85%E6%88%90%E9%87%8D%E8%A6%81%E8%BD%89%E6%8D%A9%E9%BB%9E-034608413.html)

[2] 實體與線上混合教學模式成新常態-成功大學,Aug,2021 (https://web.ncku.edu.tw/p/406-1000-226237,r3094.php?Lang=zh-tw)

[3] 教育第一線視角下,生成式 AI 融入教學生態系的多模態 (https://www.technice.com.tw/techmanage/84501/)

[4] 5大線上學習平台優缺點比較 (https://www.cheers.com.tw/article/article.action?id=5100655&page=2)

[5] From Local to Global: A Graph RAG Approach to Query-Focused Summarization, Apr,2024 (https://www.cdns.com.tw/articles/805850)

[6] Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks, Apr,2021 (https://futurecity.cw.com.tw/article/2921)

[7] Summary of a Haystack: A Challenge to Long-Context LLMs and RAG Systems, Jul,2024 (https://www.gvm.com.tw/article/105579)

[8] Ultralytics YOLOv8 (https://github.com/ultralytics/ultralytics)

[10] You Only Look Once: Unified, Real-Time Object Detection (https://arxiv.org/abs/1506.02640)

[11] YOLOv3: An Incremental Improvement (https://arxiv.org/abs/1804.02767)

Taoyuan, Taiwan | © 2025 Hong Yu Chang