養分、酵素、光合作用、小魚等實驗的小技巧

 紀錄一下今年進行養分與酵素的實驗的一些技巧

測定食物養分的實驗

因為實驗室剛好衝堂，所以我就安排在教室進行。準備一個塑膠盆，再切一片珍珠板。盆子裝熱水用來提供本氏液的反應，帶洞的珍珠板設計的尺寸比盆底大一點，讓板子可以卡在盆子裡，然後固定一段距離用原子筆戳洞。

實驗的容器就用微量離心管，測試的食物、本氏液都只裝一兩滴，裝好就塞進珍珠板的洞裡，因為微量，所以反應很快，一到兩分鐘就會有反應了。但要注意離心管不需要蓋蓋子，不然可能會泡著泡著就爆開，如果會常常需要這樣使用，也可以乾脆把蓋子剪斷。

酵素實驗

上述的離心管，可以繼續用在額外的酵素實驗，例如雙氧水加上一些金針菇，然後就可以做成不定時炸彈，但是會噴出雙氧水，要小心就是。

課內實驗的部分，今年收集唾液的方式改成使用紗布，因為剛好有一批。本來都是叫學生把整片紗布放嘴裡咬，不過好幾個學生咬得嘔聲連連，後來就改成「手拿著一端，另外一端放入嘴裡咬20-30下」，然後大家把自己咬過的紗布放入小紙杯中，再加一點水進去杯子裡讓紗布浸潤，最後把水倒出到試管就可以用了。

光合作用

要做這個實驗的時候，北部連日陰雨，根本沒辦法使用室外植物，還好幾年前實驗室有買生長箱，反正加水就放進去養就對了。如果沒有生長箱的，其實準備多個檯燈加上定時器，效果也是一樣。

芹菜實驗

每年都會泡到有些芹菜爛爛的，其實泡爛的芹菜很棒，可以從裏頭撈出一堆絲狀物，裏頭也有一些漂浮物。

絲狀物就是芹菜的維管束，就是一些分離的導管，細節可以看這篇多年前的文章，至於一些霧霧的漂浮物多是薄壁細胞。

小魚尾鰭觀察

多年前改成把小魚放進封口袋來觀察了，效果原比幫小魚蓋棉花被子好很多，我以為大家都已經這樣做了，結果最近才知道朋友還是用棉花蓋住來觀察。只用棉花蓋住的最大缺點是魚在活動時，會把水噴到物鏡上，然後物鏡就會發霉損壞。

問了他為什麼還是用棉花，他說他覺得把魚放進封口袋還要手拿魚做這件事，有點阿雜。ㄟ，其實完全不需要沾手啊，就是準備一個L夾，底下剪開一個口，差不多魚大小，這個就是漏斗，底下請一個學生協助套上小封口袋，你把魚撈起後放進這個塑膠漏斗就好囉。

人體血液循環的視覺化互動程式

講全身血液循環時，我需要一個互動的介面可以讓我用來解說，要能呈現全身血液流動的過程。先講結論，我做出來了。底下是截圖

這是操作過程的影片，預設有幾百個血球在血管內流動，擺著不動一陣子會看到經過組織微血管(上下三區)的血球會變成暗紅色，並且釋放出代表氧氣的藍色圓形。而這些暗紅色的血球經過左右兩邊的肺部微血管時，會從外而內進入獲得氧氣，使暗紅色的血球變成鮮紅色。

你可以按下[血球淡化]的開關，使所有血球都變淡，然後點畫面很多血球的位置，例如心房心室，每次點擊都會在點擊處附近隨機標註一顆血球，你就可以追蹤它的流動。

此外，也可以將心房心室的動畫關閉或打開。

目前實作是做了全身血液循環，未來有時間會完成肺部和組織細胞之間的交換

程式在此 https://chihhsiangchien.github.io/circulation/index.html

接下來要說的是如何完成這樣的程式，血球需要循著特定的路徑往前移動，不能逆向，在交叉口又必須隨機。`所以我需要一個有很多節點的「有向圖」，節點之間有方向性的「邊」相連，每一個節點有id，有xyt座標，而每一個邊的資料包括起點和終點的節點。因此對有些節點來說，可能是多個邊的起點，也可能是多個邊的終點。

我先在draw.io上放一張底圖，然後用circle當節點，Directional Connector當作邊，把完整的循環路徑畫出來。最後的結果export 出xml。檔案連結

有了xml之後，再用js parse這些資料，就可以做出一個有向圖。建立資料時，可以指定某些connector的寬度，這可以用來畫出血管的寬度，而circle內的文字可以標註目前所在的位置，例如肺靜脈、肺動脈等。

對於血球的行為，其實就是不斷地從一個節點移動到另一個節點，而下一個節點的決定就看這個節點有幾個出口，隨機選一個就是了。經過特殊節點如肺動脈時，就讓血球進入一個可接受氧氣的狀態，有一定的機率可以得到氧氣。而到了肺靜脈時，可接受氧氣的狀態就被關閉了。而進入組織微血管或離開，也是一樣的方法，所以這就是一個狀態機的變化。

此外，動靜脈的流速不同，是利用節點的數量來控制，在一個動畫週期中的固定長度內，如果有越多節點，那麼血球就會越慢，如微血管內的行為，而如果節點越少，就會產生移動速度很快的視覺效果。

雖然節點和節點之間是直線相連，但血球在血管內的移動則是會以邊寬度為基礎，做左右偏移累積的移動，所以就可以產生彷彿在血管內移動的視覺效果。

酵素作用的互動教學工具

最近做了「酵素模擬器」的網頁工具，可以互動操，產生即時圖表與自動化實驗。

https://chihhsiangchien.github.io/enzyme-tutorial/

主要功能

1. 拖曳與新增分子、酵素

使用者可以用拖曳或點擊的方式，將不同種類的酵素與分子加入主畫面。每種分子和酵素都以圖示呈現，並可一次新增多個或快速移除。

2. 模擬布朗運動

所有分子在畫面上會隨機移動，模擬布朗運動，進而觸發酵素反應。

3. 酵素-受質結合與產物生成

當受質分子靠近酵素的活化位時，若符合反應規則，會自動吸附並進行反應，產生對應的產物。反應過程中，分子會有動畫效果。

4. 溫度調整與酵素變性

可透過滑桿調整環境溫度。溫度會影響分子的運動速度與酵素的活性，並可模擬高溫導致酵素變性的情境，每種酵素有不同的變性溫度。

5. 即時濃度變化圖表

畫面右側提供即時的分子與酵素數量變化圖表。每秒自動更新，方便觀察反應進行過程中各物種的濃度變化。

6. 實驗模式與自動化實驗

除了自由操作外還有「實驗模式」可進行實驗。可選擇酵素種類、設定溫度與觀察時間，並自動重複多組實驗，繪製「溫度-反應速率」關係圖，協助分析酵素活性與環境的關聯。

課堂教學工具：排序、配對、表格

這是課堂上用來做教學的幾個工具，分別是用來做排序、表格和配對的工具，可以當教學用，也可用來做形成性評量。因為特別作了模組化，所以後續我要新增資料也是容易很多，有興趣可以使用。

https://chihhsiangchien.github.io/sorting/index.html

https://chihhsiangchien.github.io/table/index.html?mode=teach

https://chihhsiangchien.github.io/matching/index.html?data=cells.json

【哪個機器人最快？】互動式科學實驗教學工具

最近做了用來做實驗設計的互動程式，有四種機器人零件可以組成機器人，目的是要找出哪種組合可以跑得最快。

程式：https://chihhsiangchien.github.io/fast-robot/index.html

速度裏頭有加上系統的不確定性，所以就用同樣條件一直跑同一個機器人，也會得到些許的不同，所以就是要重複實驗。

實驗底下會有歷史紀錄，呈現每次使用的變因和結果。明年再上科學方法會拿來用，這個需要團隊合作，然後進行筆記才能得到答案。 

操作過程如下

1. 認識變因卡片：左側有各種「變因卡片」，每張卡片代表一種機器人比賽的條件（如：機器人型號、輪胎種類、包裹重量等）。
2. 拖曳卡片到實驗槽：將每一種變因卡片拖曳到「第一組」和「第二組」的實驗槽中。每個槽都要放滿所有類型的卡片，才能開始實驗。
3. 開始實驗：當兩組都配置好後，「開始實驗」按鈕會亮起。點擊後，兩台機器人會開始比賽，並顯示各自完成任務所需的時間。
4. 觀察與比較：實驗結果下方會顯示每組的完成時間，並自動記錄到下方的「實驗歷史記錄」中，方便學生比較不同組合的結果。
5. 重設實驗：點擊「重設實驗」可以清空所有配置，重新開始設計新的實驗。

教學應用建議單一變因控制教學：請學生設計兩組只差一個變因的實驗，觀察結果差異，體會「只有改變一個變因，才能確定因果關係」的道理。

討論與推理

1. 利用「實驗歷史記錄」功能，讓學生比較多組實驗，討論哪些變因影響最大，哪些沒有影響。
2. 小組合作：學生可以分組設計不同的實驗，輪流操作，並在全班分享各組的發現。
3. 老師可以引導學生思考：如果同時改變多個變因，會遇到什麼困難？如何設計更嚴謹的實驗？

其他

• 點擊已放入實驗槽的卡片，可以將其移除，方便調整組合。
• 支援電腦滑鼠拖曳，也支援平板觸控操作。

Gemini的圖像生成測試經驗

Gemini的圖像生成模型nano banana廣受注目，我也測試了一些使用情境。透過圖像理解轉換上，可以做出非常強的應用。

我做了很多圖片生成的測試，對於那些古籍插畫，像是天工開物或是番社采風圖的圖片，如果想要產生立體的渲染圖片，但沒有辦法直接做出的話，我會繞點路來完成。

以下建議不是必要，但可以試試。

先增加圖片的脈絡，就是那張圖到底是畫什麼，你可以先試試讓AI讀圖解釋再來修正，或是自己就先輸入詳細說明。

增加描述之後如果還是不行，就再做去脈絡的事，就是生成黑白線稿，如果是建築就是平面設計圖，如果是立體物件就是wireframe 。

在前幾天的分享圖片中，我都會經過中間這個圖。

如果成功產生線稿之後，就可以做各種轉型，像是填色上色、3D渲染或render，真實場景...等具體描述。

剩下就是角度或方向描述而已，像是side view, bird's eye view, worm's eye view, wide angle....

以下就是大量圖片，目前提供的prompt都非常簡單，像是：

• 說明這張圖的細節
• 轉黑白線稿
• 轉三視圖
• 做3
• 3D渲染
• 移除導引線
• 移除標記文字
• ...

利用AI多模態模型生成程式的一些經驗分享

最近剛結束一個AI應用在科學的演講分享，來分享幾個多模態AI可以怎麼用。例如輸入影片做為prompt的UI參考，然後生成程式。

提供影片，生成程式

影片來源就是書商電子教科書提供的範例程式操作影片，不提供也可試試。prompt：「html+css+js in a single file互動模擬程式，使用three.js，一群質點排列在立體網格上，使用者可選擇質點排列成一條線，或是一個平面，或是多面形成的立體結構。使用者可以按鈕選擇縱波和橫波，控制頻率和振幅以及波長，使用者可以用滑鼠轉換視角或放大縮小畫面」如果不知道怎麼下prompt，你也可以先讀取其他的程式操作錄影或截圖，讓AI理解後，由AI來生成給AI的 prompt。

成果請見此網頁
https://chihhsiangchien.github.io/wave/index.html

書商的程式錄影到轉成程式的過程，可見此影片

插圖轉程式

提供課本插圖作為prompt一部分，以此生成教學程式

結果見此網頁

https://chihhsiangchien.github.io/neutralization/index.html

剪貼課本截圖組成版面來生成程式

程式見此 https://chihhsiangchien.github.io/molecules-compose/index.html

給設計圖，產生OpenScad程式碼進行建模

給予顯微鏡照片，生成三視圖後，生成OpenScad程式生成stl檔，再匯入js，做成互動顯微鏡。

以下設計圖是給顯微鏡照片，用Gemini生成的三視圖

目前的程式碼我還在修整，只是半成品，未來會做出更適合在課堂上使用的

https://chihhsiangchien.github.io/microscope/

在一年多前，多數 AI 還是「單模態」的設計：

處理文字的就是純文字模型。

處理圖片的就是純影像模型。

因此像「文字生成圖片」的流程，其實是文字模型先把輸入轉成結構化提示，再交給影像生成模型；而「語音對話」在當時則是語音辨識（ASR 系統）→ 傳給文字模型 → 再把文字輸出轉回語音（TTS 系統）。

後來開始出現「多模態模型」，也就是單一模型可以同時處理文字、圖片，甚至聲音與影片，能在同一個架構下理解並跨模態運算，而不是單純「模型接力」。

前幾篇我提到的案例，例如透過影片、插圖或手繪圖直接生成程式，就是多模態模型的應用。

實際應用上也可以這樣做：直接提供互動程式的程式碼，讓 AI 生成操作步驟說明、學習單，甚至考卷。

聰明的你應該也能想到反向應用：即使沒有程式碼，只要有一份學習單、一個虛擬的操作流程，或是一份考卷，也可以把它們作為 prompt 的一部分，來生成對應的程式。