Web Judge (開源版)

created_at: 2026/10/12 00:00:00

cover image

先前那篇說 Source code 沒辦法公開，一是還沒整理好，二是攸關畢業論文。

現在論文寫完了，code 也整理好了，所以開源了。

不過主要是為了技能競賽的場景設計而做了一點權衡，實際要長期使用可能需要再做一些調整。

在Github上觀看

這是什麼

不是單純網頁版的 Online Judge，而是一個可以評網頁專案的 Online Judge，為技能競賽的場景而設計。

選手上傳的是一整個網站專案(zip)，系統會在隔離的容器中把它實際跑起來，逐個評分項、逐筆測資去計分，然後即時更新記分板。

這也是我的碩士論文，並且已經在實際的競賽中完整運作過一場。

畫面

封面那張是會場大螢幕用的記分板，每位選手一列、每個評分項一格，評分完成就會即時翻色。

每一筆提交可以看到逐評分項的結果：

評分明細

後台的系統狀態，可以看到評分工作者的健康度、佇列深度與近期的錯誤：

系統狀態

和先前那篇比起來

架構和當時那張有點糊的圖已經不太一樣了：

typespec/     API 規格(單一事實來源)
   ├─> backend   產生 Go server 介面
   └─> frontend  產生 typed client

frontend/     SvelteKit + Svelte 5 + Tailwind
backend/      Go (Clean Architecture)
              ├─ MySQL(關聯資料) / MongoDB(提交與評分) / Redis
              └─ judge workers 透過 Docker 啟動評測容器
  • API-first：規格只寫在一個地方，前後端的程式碼都由它產生，不手寫兩邊的 DTO
  • 即時性：倒數計時、記分板、提交狀態、後台監控全部走 SSE，不用重新整理；前端這邊會把多條後端的串流合併成單一連線
  • 比賽現場導向：大螢幕記分板、系統狀態、重評(可以比對前後差異再決定要不要採計)
  • 內建操作手冊：選手和管理端各一份
  • 開箱即示範：內建一場示範競賽的資料，clone 下來就能走完「登入 -> 提交 -> 評分 -> 記分板」

關於 AI

這個專案歸類在「傳統手工藝」，因為核心是在 AI 還沒那麼厲害的時候手寫出來的。

不過後面的開發引入了 AI 協作，所以現在去看 code 會發現有些地方有點 AI 味，這邊先說一聲(?)

前往DEMO