🎯 Embedding Playground — GIS Edu App

互動式教學 app：用 10 張 NASA 公有領域衛星圖，親手感受 embedding 係咩、點解相似嘅嘢會埋堆、文字同圖片點樣變同一把尺。

R&D 背景：Cyrus 嘅 Embeddings for GIS research（2026-10）。全程 CPU、零 GPU、零 API key。

互動體驗（4 tabs）

Tab	學啲咩	互動
📖 原理	Embedding 概念 + 10 張圖投影 2D 向量空間	Hover 每個點，睇同類自動埋堆
🎮 實驗室	相似度排名 / cosine ruler / 估答案	揀圖 → 睇 top-3 + 分數 bar；兩圖對對碰 → live gauge；「估估吓」quiz → 揭曉
🔬 文字→圖	Zero-shot 文字↔衛星圖（誠實 research gap）	打字 → 全場語義排名，睇佢點 miss
📝 文字→文字	語義相似度（中英都得）	兩句比對 → gauge + verdict；preset 例子

已驗證 R&D finding（app 內部明示）

實測 CLIP ViT-B/32 同 RemoteCLIP ViT-B/32（衛星 fine-tune）：

• ✅ Image → Image embedding：work（water↔ice 0.83 vs water↔desert 0.65）
• ❌ Text → Satellite image zero-shot：兩隻 model 都係噪音級（0.2–0.3），排名隨機 flip；「ocean」偶爾中、「dense city」miss
• 結論：跨 domain（文字↔衛星）係而家嘅 research gap，命名要自己 label fine-tune

技術（重點：冇 torch，RAM < 500MB）

• int8 ONNX（Xenova 移植版）：CLIP ViT-B/32（vision + text）+ paraphrase-multilingual-MiniLM-L12-v2
• onnxruntime + tokenizers + huggingface_hub — 唔使 torch/transformers → Streamlit Community Cloud 1GB free tier 安全
• 圖片 embeddings startup 預計算（10 張，~2 秒），互動即時

本地行

pip install -r requirements.txt
streamlit run app.py        # → http://localhost:8501

部署 Streamlit Community Cloud（免費）

1. 推呢個 repo 上 GitHub（public）
2. https://streamlit.io/cloud → Connect GitHub → New app
3. 揀 repo embedding-playground → branch main → main file app.py → Deploy
4. 攞個 *.streamlit.app URL

免費 tier：idle 自動 sleep、有人 visit 自動 wake（首次 ~30s 冷啟動）。

圖來源

NASA Image and Video Library（images-api.nasa.gov）公有領域：city / forest / desert / reef / farmland / river delta / mountains / volcano / ice / wetland。 → 香港 CSDI 航拍 chips 只可以本地版（license 限制，唔可以公開放 repo）。

驗證

• apptest.py — Streamlit AppTest 全互動驗證（tabs / 揀圖 / gauge / quiz / text→image / text→text）
• python apptest.py 輸出 APPTEST_OK