2025年12月23日

P2P WebRTC檔案分享工具 - Anywhere Sender

前言:

一直以來都用SendAnywhere,但它現在Linux版好像有點問題,WebRTC一直不太會寫,正好拿AI練習,一方便讓AI幫忙寫WebRTC,另一方面嘗試用AI寫個包括前端、後端、應用程式的完整專案,看看實際運作會遇到哪些狀況。

程式取名為Anywhere Sender,希望能跟SendAnywhere一樣方便好用。😀

對了~除了手機版本與應用程式版本之外,還有CLI版本喔。

實做的時間比預期長,我本來還以為一週就能打完收工,沒想到修修改改修修改改弄了快3週,就算是現在我認為都還算是Beta版,WebRTC的部份看來還是得下去看過順過流程,看來AI開發這事,在除錯階段還是會花費很長時間。

成果:

整份專案在
https://gitlab.com/ycfunet/anywheresender

實做過程:

實做過程遇到不少問題,就算是目前Release,我認為都還需要優化,但已經玩了3週了,就先Release一個Beta版。
這邊會列出2種在開發和測試階段遇到的狀況,一種是純粹開發遇到的,一種是AI開發時會遇到的。

開發問題:
1. AvaloniaUI System Tray問題
System Tray在Windows和MacOS應該沒什麼問題,AvaloniaUI在Windows和MacOS的行為描述都還完整,但在Linux下面,我用的MATE Desktop就無法顯示,一查發現xembed和SNI的問題,光這個就花了些時間,AI在這時候帶來的好處是,寫測試程式很快,以往大概都要先花半天一天survey,survey包括測試程式要用的Library、SDK、原理,寫一個測試可能需要半天一天,然後第二個測試程式、第三個測試程式,這功能可能最快需要3天,AI寫測試,給它參考網站和技術文件,它就能寫,幾個小時就能寫出3~4個測試程式,整個問題排除只需要半天~一天,時間大幅壓縮。
測試時,問AI它會說可能是A, B, C, D什麼的,但其實都不對 😂
直接問它,那為何Electron正常,但AvaloniaUI不正常,AI就也沒答案,還是得survey,不過好處是,AI看程式碼很快,直接丟Electron程式碼和Qt程式碼給它,它就能從中給出它們寫了2種模式 😂

2. Web QR-Code掃描器元件
AI建議用Web的QR-Code掃描器Library,但用了之後,AI寫出遞迴地獄,造成QR-Code掃描器時好時壞,無法正常運作,而且怎麼改都改不正常,後來下去看QR-Code掃描器Library,自己先個Sample,讓AI看Sample改進去,遇到React還是改不成功,最後讓AI把Sample包成function,React直接呼叫function才改成功。
看來,AI在遇到複雜的程式碼狀態時,跟人一樣會混搖,老方法依然適用,讓AI寫Sample Code或人寫,然後包成API讓複雜程式碼呼叫。

3. Web的WebRTC與SIPSorcery的WebRTC相容問題
同樣是WebRTC,但SIPSorcery傳遞的預設參數和Web版的WebRTC不太一致,這應該正常,只要不同的SDK,很容易遇到通訊協定有些差異要調整的,這個顯然AI也會遇到,跟人Debug一樣,時間同樣無法變快,最後一樣是老方法,把SIPSorcery程式碼下載之後讓AI看,讓他自己分析裡面的參數缺少了什麼,才改出。優點是,AI看程式碼很快,給出明確方向,這種問題它能透過分析SIPSorcery、Send、Recv、Web WebRTC給出點和修改,這個人看的話,又要花好幾天,區別是,AI一開始會鬼打牆一直亂說找到問題點,一直亂改,直到你讓它停止,給它分析SIPSorcery和Web的WebRTC差異,它才找出問題點。

AI遇到的問題:
1. Web Framework框架不熟悉
一開始選用Konsta UI Svelte開發,結果寫超破,界面改不出,顯然AI還是要用React或Vue才能寫得好。

2. 檔案傳輸的緩存
AI寫檔案傳輸,預設就用個Web blob直接灌入整個檔案傳送和接收,這當然會造成大檔案傳輸會Memory不足或瀏覽器限制,但這個AI不會特別說,測試時被瀏覽器卡住了,才會說這是OOM(記憶體不足),顯然這不是正確方向,但它會給出建議縮小傳輸檔案大小。
我給AI要求解法,Web用Indexddb,Mobile用capacitor呼叫原生的FileSystem API,Desktop用檔案存取。

3. 兩端WebRTC檔案傳輸的訊息交換與非同步處理問題
這個其實還沒有完全解完,簡單的說,AI從Server、WebRTC傳送、接收的程式碼中,有可能還無法準確的把時序流程弄清楚,因此陸續改了一堆傳送端、接收端時序問題,像是傳送端丟完WebRTC斷線(接收端還沒收完)、Server信令交換在不同平台實做偏差(導致不同平台互傳漏流程,連線無法建立)、Web非同步動作造成時序的先後順序有問題。
目前我還沒下去完整看過WebRTC程式碼細節,但我認為目前Release 1.0.0版本,應該在Web UI Event(傳輸的狀態回傳)與WebRTC傳送、接收檔案的位置應該還有非同步或Event的問題,這可能是目前傳輸有時候會卡住或無法傳送的原因。

結論:

這次用AI實做了一個完整的專案,包括前、後端、手機、應用程式,速度快了不少,以往我不熟悉的知識領域(WebRTC、React、AvaloniaUI),透過AI能夠直接開發。
此外,以往工程師可能需要前端、後端、應用程式、手機,透過AI協作,可能真的減少為1~2位資深工程師就能處理。
這次開發的經驗,證實了網路流傳的說法,AI是資深工程師的開發加速器,但老實說對於新手工程師或中階工程師未必友好,因為它遇到問題時會鬼打牆,就算是Claude-Code這種等級,它不會在同一個點鬼打牆,卻會在沒答案的錯誤邏輯中鬼打牆出不來,此時需要經驗引導正確方向或作法,它才能改出,甚至在QR-Code掃描器的開發過程,程式碼複雜時,就算給出Sample Code,它還是會套用失敗,需要包成API用引用的方式才能改出,這表示工程師的經驗依然重要。

2025年11月30日

補作業之AI微調LLM - Gemma3:270m + 繁體中文支援

前言:

要學習微調LLM,那就跟隨前輩作業,試著將Gemma3:270m加上繁體中文支援。
https://www.facebook.com/groups/gaitech/posts/1461027975081413/

成果:

整份專案在
https://gitlab.com/ycfunet/mi50_training_test

實做過程:

我用MI50微調訓練,讓Claude Code實做微調程式,一開始直接用Transforms訓練,結果一直出現Grad norm = NaN,Grad norm = NaN並不是一開始出現,也不是固定位置出現,是隨機位置出現,可能80%出現,可能95%出現,都會讓訓練失敗,微調出的模型,回答要嘛沒內容,要嘛出現padding,或者常見的出現各國語言混雜一段一段的回答錯亂。
後來用unsloth之後,發現unsloth微調都能正常訓練完,微調出的模型,中文問答都能中文回答。
雖然還有些問題,但原則上都能正確回答。
另外,完整微調真的很花時間,MI50一張,500k的繁體中文資料集,需要連續60幾小時訓練。
unsloth的記憶體使用量比想像少很多,用unsloth訓練時,GPU VRAM是浮動的,但最多也就12%,用量還不到4GB顯卡記憶體。
花費2週,算是有點成果,細節熟悉度還不夠,但入門算有點點進展吧。

補充:
對了,先前用colab T4微調馬達狀態機,這次也移到MI50上,發現MI50訓練的時間,跟colab T4差不多,估計MI50和colab T4同等級。

2025年11月15日

AI協作MongoDB設計工具 - Mongo Modeler(Modified)

 前言:

在實做了dbdiagram-oss之後,如果是NoSQL像是MongoDB,有沒有類似的方式或工具呢?
我找到了Mongo Modeler(github),這個有團隊在開發和維護,而且一樣是純前端的工具,所以,應該應該可以無痛移植dbdiagram-oss後端吧。😁

Mongo Modeler(github)為基礎用claude-code透過Vibe-Coding修改和實做,實做完成。

成果:

整份專案在
https://gitlab.com/ycfunet/mongo_modeler

實做過程:

它的後端幾乎不用改就能用,所以大部分都是前端修改工作。
考慮到Mongo Modeler還在持續維護和更新,我希望盡可能少的改動,Claude Code給了我實做建議 - JavaScript注入,非常聰明而有效。
因此,這個專案的前端改動,都是用外掛,以注入方式完成的,效果相當好。
但在Release前的測試時發現,MCP工具有點問題。😅
果然,問題總在意料外的地方出現。
MongoDB有定義Document的json結構,但這結構並沒有描述Collection之間的「關聯線(Relationships)」,但是Mongo Modeler是可以設定Collection間的關聯線(Relationships),並且能夠顯示,那它如何儲存的?
原理很簡單,Mongo Modeler有自己的json資料格式, Mongo Modeler資料格式中包括了Collection的座標以及關聯線(Relationships)描述。
但因為Mongo Modeler的json格式並不是標準,因此LLM不會有格式的資訊,LLM只認識MongoDB的Document json結構,這怎麼辦呢?
為此,我請Claude Code修改了MCP Server程式,先實做一個轉換程式碼,用來雙向轉換MongoDB ⮂ Mongo Modeler的json格式。接著想了想,讓它在get function同時回傳2種格式的內容,LLM就能透過回傳的內容知道2種格式的對應關係和Mongo Modeler格式樣式。接著修改create和modify,分別實做create和create_mongo以及modify和modify_mongo,這樣能夠讓LLM用這兩種格式建立和修改schema json,讓Ai能夠與Mongo Modeler協作。
Claue Code改的程式碼很厲害,它實做時強調,如果建立時是Mongo Modeler格式,修改時用modify_mongo,儘管修改時的關聯線(Relationships)無法處理,但它能保持modify_mongo之前的所有關聯線(Relationships)。👍

2025年11月9日

AI協作資料庫圖表設計工具 - dbdiagram-oss

前言:

在接觸AI如claude-code和gemini-cli之後,注意到了和AI協作的特點,在協作的過程中,通常會需要把資料或資訊和AI互通,讓AI知道資訊,或者AI改了之後,讓我們知道AI更新了什麼或如何設計、修改的。
後端開發中,資料庫是很重要的部份,尤其是資料庫資料表與欄位設計,通常設計好資料表與欄位後,多半就開始刻API了,既然刻API都讓AI實做了,那資料庫的資料表、欄位也要和AI協作才會快速又清晰。
DBDiagram是一個非常方便的所見即所得(WYSIWYG)線上工具,透過DBML語法撰寫,就能即時顯示ER Model,讓資料庫的設計方便又清楚。
那麼
DBDiagram是否有開源版?DBDiagram能否跟AI協作?
我以dbdiagram-oss為基礎用gemini-cli和claude-code學習Vibe-Coding,效果相當不錯。

成果:

整份專案在
https://gitlab.com/ycfunet/dbdiagram_oss

實做過程含花絮(😂😭):

它的後端是用熟悉的.NET Core c#開發,開發過程中就調提示詞的規格,讓它API使用EndPoint語法,但使用傳統Controller的命名風格。
MCP Server的部份,可能比較新,AI寫不太好,寫的不能動,我下去先看SDK用法之後,用範例改出一版乾淨版本之後,再讓AI參考這個乾淨版本寫,然後再新增MCP Tool和API呼叫,才OK。
它前端用的是Vue 3 + Quasar Framework,Quasar Framework比較小眾,原則上讓AI自己分析後先自己改,改著改著卡住,我讓它把程式碼位置先給我,讓它分析程式碼執行流程,然後我下去看了下邏輯後,跟它說錯誤點,再改後改出。
之後前端加功能,就讓AI自己新增了,都沒什麼問題。
一開始我用gemini-cli開發,之後改用claude-code。
gemini-cli比較幽默,我都跟它說:「去吧~阿斯拉~」,它會回答我「好的,全速前進」。
But...網路上的事情我也遇到過了,一開始註冊不懂,訂閱gemini-cli也設定API Key,我以為兩個都掛在我同個身份和訂閱上,我用API Key執行gemini-cli,gemini-pro 2.5用超爽,然後帳單噴了NT $14000多😱
產出最多的2天,一天NT $8000多,一天NT $3000多😭
然後,我就訂閱claude了。🤣
我對AI Coding的心得是,高階訂閱得付,AI的反應時間、Coding能力、程式碼的理解能力都明顯不同等級。
gemini-pro 2.5這種等級讓它看專案程式碼後修改,它如果看不懂或改不出來,那非claude、gemini的AI大概也沒辦法,一般常聽到350b、400b這種AI,實測Coding是無法的,可能context不夠長,可能不夠聰明,光是改個東西都很可能會繞圈,這也是為何claude、gemini都沒說它們背後運作的是多大的模型🤔

2025年11月1日

微調Gemma3:270M用於FSM(有限狀態機) - 以貓砂機馬達控制Lab為例

 前言:

幾年前曾將家裡的貓砂機用樹莓派改裝,按照原本的控制邏輯用Python實做,並用於貓砂機控制。
在survey Gemma3:270M這種微型LLM時提到,Gemma3:270M具有很強的指令跟隨能力,貓砂機的馬達控制流程本質上就是FSM(有限狀態機)系統,而FSM的狀態處理本質上就是查表法,那麼,將Gemma3:270M的指令以「目前狀態」和「觸發IO」代入,生成「下個狀態」,不就能把Gemma3:270M應用在FSM(有限狀態機)系統,好像不錯,練習微調LLM,容易入門。

實做:

讓claude-code分析之前那個貓砂機程式,讓它把馬達控制的流程看懂,然後生成一個(FSM)有限狀態機的狀態表,接著讓它分析Gemma3:270 Finetune程式,程式內它的DataSet(資料集)用的是ChatML的格式,讓claude-code把馬達控制的狀態表轉成ChatML格式。

修改Gemma3:270 Finetune,將資料改用ChatML格式的DataSet,然後用colab執行,因為貓砂機的FSM狀態表不多,claude-code生出整個DataSet只有70條,整個微調訓練時間大概10分鐘即可完成。

成果:

用Ollama載入後,用固定格式問它,得出固定格式結果,如圖:


輸入「current_state: IDLE」「trigger_event: CMD_START_CLEAN」,
固定得出「next_state: STATE1_FORWARD」IO「in1_in1: 0, in2_in1: 1」。

整個Lab順利又快速,證明微調微型模型,可用於FSM(有限狀態機)的系統控制,測試時,幾次輸入,看起來結果一致性非常非常高(沒遇過結果錯誤的)。

程式碼:

https://gitlab.com/ycfunet/gemma3-270m_finetune-fsmsys

2025年1月1日

2025-01-01新年文~這幾年的前端之旅

這幾年斷斷續續學習網站前後端,一開始選型時,考慮到Java的基礎,因此看了GWT,後來發現目前的網頁生態已經全面以W3C以及Mozilla/Google/Microsoft/Apple為主的廠商和瀏覽器壟斷,基本上就是JavaScript方案主導了。

接著以不用前端框架 手把手打造基礎SPA為基礎,用TypeScript自己刻了一個SPA框架,並使用。

但改著改著,用著用著始終不順手,總覺得JS和TS語法寫著很彆扭,IDE的語法提示和程式碼樣式無法和自己的SPA框架適配。

近年Webassembly出現,想著是否能以WASM為基礎將SPA框架改成WASM,以便於開發,但發現支援WASM的程式語言支援度都不太好,尤其是和JS融合與DOM介接這兩塊。

於是看了c#的Blazor Webassembly,發現各方面整合都相當不錯,直接是Webassembly,整合JS和DOM都相當完整、穩定,提供純前端(Blazor Webassembly)和前後端(Blazor Server)方案,還能和.NET MAUI整合,直接做到了像是Capacitor這樣的Mobile的Web App開發方案和Electron這樣的電腦桌面的Web應用程式方案。

新年目標,將Blazor Webassembly學起來之後,實做一個Site Project。