AI App (AI API Call)

製作 AI App

輸入接機計畫 自動繪製流程圖(Mermaid 格式)

規格

如何使用視覺化AI App

1. 進入 Plan visualizer (Flow diagram only)
2. 按下 customize
3. 輸入你的文字計畫到Claude，執行 Claude
4. Claude 會製作一個新的 visualizer，已經塞好你提供的計劃
5. 發布(publish) 得到你的連結
6. 得到專業的流程圖（Mermaid）

(因為Claude不允許artifact產生新的artifact，所以多了一些步驟如上)

步驟操作範例

發布出來的連結

HW#4 製作豐富資訊的動畫模擬

繪圖，動畫:  建議 使用 Claude Sonnet 4

推理，複雜問題:  建議使用以下

使用 Claude Sonnet 4 extended thinking 付費版

使用 Gemini 2.5 Pro 免費額度最高 1M tokens

使用 ChatGPT 5

使用 Grok 4

課堂練習  

Deadline: This Saturday at 23:59

Send all the links to  me chang212@gmail.com by email with subject HW#4 Populate data for visualization [your id, your name].

至少做二題

1. Laser Weapon Animation using React + three.js

2, drone deployment using React + three.js

3. Coastal Defense Simulation using React + three.js

4. Design engineering animation in multiple view. You can choose what you like. 可以自訂主題或是從以下選擇

 

Jet Engine  (share)

 

RAMJet

5. Use iterative design to implement your project. You can refer to the following examples. 可以自訂主題或是從以下選擇

 realistic 離岸風場

Visualize Bike gear change

in 3d

AC Induction Motor

share

Iterative Design

 Look at where you live

離岸風場

• turbine
• ocean merge
• windfarm proto
• realistic

Visualize Bike gear change 

focus on gear magazine

in 3d

AC Induction Motor 

• still image
• rotating magnetic field, still squirrel cage
• fully animated share

animated

Multiple View

RAMJet (How it works)

混成多重視角

盲人導航

birds' eye and forward-facing 

 (credit: 與專題生共同創作)

HW#3 Visualization

繪圖，動畫:  建議 使用 Claude Sonnet 4

推理，複雜問題:  建議使用以下

使用 Claude Sonnet 4 extended thinking 付費版

使用 Gemini 2.5 Pro 免費額度最高 1M tokens

使用 ChatGPT 5

使用 Grok 4

作業繳交方式

How to share a Claude link

How to share a ChatGPT link

How to share a Grok link

How to share Gemini Link

課堂練習 

Deadline: This Saturday at 23:59

Send all the links to  me chang212@gmail.com by email with subject HW#3 Visualization [your id, your name].

任選3題來做

1. Traveling Salesman Problem 簡稱TSP在工業界有重要應用，包括物流（UPS/Amazon配送路線優化）、製造業（電路板鑽孔、機器人組裝路徑）、電信（網路路由、線路安裝）和能源（電網維護、管線檢查）。凡是需要造訪多個地點同時最小化成本、時間或距離的場合都適用。現代變體能處理容量限制、時間窗口等實際約束。企業使用OR-Tools、Gurobi等專業軟體解決這些問題，透過優化倉儲揀貨、切割模式、3D列印路徑和車隊管理等作業，往往能節省數百萬成本。

視覺化 Traveling Salesman Problem 使其可以改變網路節點個數，或是其他你希望的方式

2.  給定一個電路板，進行鑽孔程序模擬的優化 (建議 AI 一個演算法，例如A*, Greedy Method...)

電路板鑽孔程序模擬

3. 分別製作雲與閃電的物件，再將其組合 （參考如何合成複雜物件）

4. 已經製作洗手台與洗手訓練機的物件，請將其組合 （參考如何合成複雜物件）

洗手台場景

洗手遊體感戲機

5. 已經製作好 CVD animation 與 process schedule 物件，將兩者組合起來 （參考如何合成複雜物件）

6. 練習: QuickSort 演算過程視覺化

烏克蘭防空與蘇俄無人機航母系統攻防模擬

烏克蘭戰略防空系統

蘇俄無人機航母與飛彈攻擊

合併 (artifact)

製作這個模擬大約需要八次的合併，為什麼不要一起上？因為Claude 算力一次大約提供700-1000行生成，如果一起下去合併，生成會很潦草，因為算力被分散了。所以建議還是發揮職人精神，慢工出細活，一次合併一個模組，會得到精緻的結果。

N 個模組就像N個人，會產生N*N 種可能關係（先不考慮三人以上群組關係），如果每次加入一個模組，需要新增的關聯性不會超過N (一個關聯舉例來說，像是愛國者可以打彈道飛彈，不打無人機，因此要生成愛國者的攔截程式，這個需要算力）

如果一次把N個模組全部放進去合併，會有N*N 種關連需要考慮，最壞情況下需要生成 N*N 個程式來處理這些關連之間的互動，這樣算力通常是不夠的。會發生有的模組（例如 S 300） 永遠不會啟動，儘管城市都快被轟爛了，S 300 的關聯程式因為算力不夠，還沒生成出來，就是擺在畫面上好看而已。

Missile Tracking Algorithm

體感洗手練習遊戲

  產生洗手台場景

Handwashing

Merge artifacts

  3d fractal cloud plain cloud

lightning (natural)

如何合成複雜物件

如何合成複雜創作 

• 雲與閃電的組合
• 洗手台與洗手訓練機
• 烏俄無人機空戰
• Robot in Maze (share) (robot)
• CVD animation
  process schedule
  Merge process schedule with CVD animation (HTML)
  
  

Follow-up HW#2

簡易版 Tesla autopilot simulation

簡易版聲納 from 2D version (Mr. Cheng)

Copperhead swarm simulation - Random sensor array advanced 0, 1, 2

如何套用現成版型，以Tesla autopilot 模擬為例，如果你要使用現成版型(share type)分析現有的交通狀況，步驟如下

0 找到程式 https://claude.ai/share/3166ae9a-5fdf-44f3-aee1-9a0b815e42e8

1 按介面右上方 copy 鍵

2. 打開新的Cloude 對話
3. 把剛剛copy 程式貼上
4. 輸入交通照片
5 得到辨識結果圖

如果你要使用現成版型(artifact type)分析眼前的食物，步驟如下

0 找到程式 https://claude.ai/public/artifacts/899639f7-c929-4930-9d2e-48a20390951d

1 按介面右上方 customize 鍵

2. 輸入食物照片
3 得到辨識結果圖 nutrition analysis

HW#2 如何指引ＡＩ

繪圖，動畫:  建議 使用 Claude Sonnet 4

推理，複雜問題:  建議使用以下

使用 Claude Sonnet 4 extended thinking 付費版

使用 Gemini 2.5 Pro 免費額度最高 1M tokens

使用 ChatGPT 5

使用 Grok 4

作業繳交方式

How to share a Claude link

How to share a ChatGPT link

How to share a Grok link

How to share Gemini Link

 課堂練習 

Deadline: This Saturday at 23:59

Send all the links to  me chang212@gmail.com by email with subject HW#2 Prompt AI [your id, your name].

任選3題來做

1. 任選一個案例來對照比較不同提示得出的效果: Good prompts for LLM

2. Submarine sonar detection 

share (artifact)

3 simulate submarine detection with random sensor arrays

Case study teaching guide

simulation, artifact share

4. simulate AI Server PCB generation and drilling

5.  Generate a nutrition analysis app in your style

or  上傳一張食物照片，使用nutrition analysis 模板程式分析熱量與營養

6. 輸入一張路況照片，套用 Tesla AI Vision 模擬程式觀看辨識結果

套用的每個步驟

7. 想挑戰難的嗎 Challenge to LLM

Prompt for LLM

 When AI fails

  Prompt (提示) 

Is short prompt or long prompt better?

• Clear - 明確清晰地表達你的需求。你的要求越精確，就能提供越貼合的回應。 例子：
  • 不佳：「告訴我關於貓的事。」
  • 更好：「請列舉五種最受歡迎的家貓品種，並簡述每種貓的主要特徵。」
• Specific - 提供相關具體資訊。這有助於更好地理解你的需求。 例子：
  • 不佳：「如何準備演講？」
  • 更好：「我是一名大學生，需要在200人的班級上做一個15分鐘關於氣候變化的演講。你能給我一些準備建議嗎？」

上述實例 about prompt 

Be accurate.

風車

動起來 (animate)

風力發電 (credit: 碩專同學)

HW#1 ＡＩ基礎

 使用 Claude Sonnet 4

 課堂練習 

Deadline: This Saturday at 23:59

Send all the share links to  me chang212@gmail.com by email with subject HW#1  [your id, your name]

How to share a link

[AI程式開發]

1. 做一支打地鼠遊戲 

初學版，音效版

Whack-a-mole game evolution

中文版

Grok

[AI繪圖]

2. 以M1 戰車結合無人機新戰術為主

生成動畫，內容根據事實

天真的內容

豐富的內容, 3d

過量的內容，2

3. 接第二題，擴增至多戰車戰術部署

豐富的內容，2

4. 自由創作 [AI程式開發] 或 [AI繪圖]

例如

share (彈珠檯 by LW)

彈珠檯 pinball，2

無人機飛行模擬視覺化

跳舞評分機

 

share source

save as HTML then open the HTML

Windows only, iOS restricted

untrained instances

 未曾訓練，也無從推理

1. strawberry, how many r

2.  Devise a strategy for the dog in the picture to retrieve its ball that fell into the pond without getting its body wet, with no humans nearby to help."

This is a problem-solving or creative thinking exercise asking someone to come up with a plan for how a dog could get its ball back from water without getting wet and without human assistance.

Animate your strategy in svg or in 3d.

Use of stick, share （unsatisfactory)

Use of float（人機協作）

nudge Claude

nudge ChatGPT

When AI fails

 多個限制條件的複雜問題 

超出記憶長度

untrained instances (未曾訓練，也無從推理)

藝術人文

洞察力 (Challenge to LLM)

複雜結構: 例如彈珠檯 pinball，2

take home messages

AI 開場

課程目標: 任務設計，系統開發，動畫模擬 (Hand out)

電子學滿分，其他教科書考試亦然

完成史丹佛博班期末專題

至少一千行工程系統模擬程式

實際工業水準問題解決

撰寫20,000字以上學術論文/科學繪圖

 

AI 的答案是怎麼來的?

生成式AI 是什麼

AI 求解在數學上是如上圖在一個複雜非線性函數尋找最小誤差的數學過程， 以這張圖為例 每次答案之所以不一樣是因為AI每次啟動都會給予一個新的起始點 以至於每次最後收斂的誤差最低點都不會一樣

滾球滾向谷低點

如何生成 (動畫)

• 故事
• 內在機制

 

English and AI

最好的程式語言重新被定義 (Python? JavaScript?)

Vibe coding

When ＡＩfails

算力

提示使用英文的重要性

AI語言模型使用技巧講義

這份講義涵蓋了對話中提到的核心概念：

1. 為什麼使用英文效果更好 - 因為大型語言模型主要用英文訓練
2. 語言能力不足的解決方案 - 可以使用翻譯或破英文
3. Transformer架構的技術原理 - 注意力機制會抓取關鍵詞彙
4. 實用的應用技巧 - 重視關鍵詞勝過完美語法

講義的設計讓讀者能夠理解AI語言模型的工作原理，並提供具體的使用建議。

實例

核心觀念：語言的選擇與效果

為什麼建議使用英文？

主要原因：

• 另外試著使用科技英文，出來的效果會較好
• 西方的大型語言模型主要是使用英文訓練的，使用中文的語境會限縮，效果會受限

語言能力不足的解決方案

如果英文不好怎麼辦？

• 可以先翻譯再輸入
• 不害怕翻譯也沒關係，使用破英文也沒關係

技術原理解析

Transformer架構的特性

現在的大型語言模型核心都是transformer，具有內建注意力機制：

注意力機制的作用：

• 會去抓你的核心字彙
• 不太在乎你的文法
• 只要用對字彙，效果就會挺好的

實際應用建議

語言使用策略：

1. 優先考慮英文輸入

   • 科技英文效果最佳
   • 即使是破英文也比中文效果好

2. 中文使用場景

   • 需要中文輸出時
   • 特定文化語境的內容

3. 混合使用

   • 關鍵詞用英文
   • 說明用中文
   • 充分利用注意力機制

實用技巧總結

輸入優化

• 關鍵字優先：確保重要概念用正確的詞彙表達
• 語法次要：不必過度擔心語法完美性
• 語言選擇：技術內容優先使用英文

效果提升方法

1. 識別核心概念和關鍵詞
2. 使用模型訓練語言（英文）表達關鍵概念
3. 善用翻譯工具輔助
4. 不要因為語言能力限制而放棄嘗試

結論

大型語言模型的transformer架構讓我們可以更靈活地使用語言。重點在於：

• 內容重於形式
• 關鍵詞重於語法
• 英文優於中文（在技術領域）
• 嘗試重於完美

記住：現代AI的注意力機制會幫你抓重點，所以勇敢嘗試，用對字彙比完美語法更重要！

Engineering simulation using Claude

realistic, v6, boxer, Claude

boxer, AIStudio

v8 (3d, share)

Jet Engine    

share

Turbofan Jet Engine

Turbofan higher accomplishment parallel version

RAMJet (how it works)

RAMJet higher accomplishment

stealth fighter, share

Animate PECVD (Plasma-Enhanced Chemical Vapor Deposition), 3d， artifact

(credit: 碩專作品)

Animate

PECVD industrial (share)

PECVD thin film deposition 

PVD (1)

PVD (2)

示範: AI 快速開發 無人機飛行模擬視覺化 (1094 lines of code)