# AWOOOI Inspiration Lab

> **版本**: 1.0
> **建立日期**: 2026-03-28 (台北時間)
> **建立者**: Claude Code
> **用途**: 收集所有學習、模仿、發想、討論未定案的內容

---

## 使用說明

這個文件是 **靈感實驗室**，用於收集：
- 從外部學習/模仿的設計
- 突發奇想但尚未決定的功能
- 討論中但未定案的架構
- 未來可能採用的工具/服務

**注意**: 這裡的內容都是 **待評估** 狀態，採用前需統帥批准。

---

## 目錄

1. [視覺設計 (Visual)](#1-視覺設計-visual)
2. [UI/UX 互動](#2-uiux-互動)
3. [風格參考 (Style)](#3-風格參考-style)
4. [功能構想 (Features)](#4-功能構想-features)
5. [工具評估 (Tools)](#5-工具評估-tools)
6. [服務/平台 (Services)](#6-服務平台-services)
7. [突發奇想 (Wild Ideas)](#7-突發奇想-wild-ideas)
8. [待討論 (Pending Discussion)](#8-待討論-pending-discussion)

---

## 1. 視覺設計 (Visual)

### 1.1 NVIDIA Build 卡片網格 ✨ NEW

> **來源**: https://build.nvidia.com/search?categories=models&q=Nemotron
> **新增日期**: 2026-03-28
> **狀態**: 🟡 待整合至 Nothing.tech 風格
> **統帥指示**: 「這網頁的視覺呈現、風格、卡片樣式等等的、UI/UX，就是我們要參考的！」

#### 🔴 整合原則 (最重要!)

**統帥明確指示**: 不要變動原本定義的視覺呈現風格規範，要把學習模仿到的這些整合進去，但是還是以原本的定義規範為主！

| 層級 | 來源 | 說明 |
|------|------|------|
| **主** | Nothing.tech 純白工業風 | 見 `01-awoooi-frontend-aesthetics.md` |
| **從** | NVIDIA Build | 本節內容，僅供參考整合 |

#### 整合對照表

| NVIDIA 元素 | 採用? | 整合方式 |
|-------------|-------|----------|
| 深色主題 (`manitoulinLightBlack`) | ❌ 衝突 | 維持 `bg-white/70 backdrop-blur-[20px]` |
| 半透明邊框 (`white/20`) | ⚠️ 轉換 | 改為 `border-nothing-black/20` |
| 卡片結構/排版 | ✅ 參考 | 套用至純白磨砂玻璃卡片 |
| 間距系統 | ✅ 採用 | `px-4 pt-4 lg:px-8` |
| 最大寬度 | ✅ 採用 | `max-w-[1920px]` |
| 篩選器多維度設計 | ✅ 參考 | 改為白色風格 + Glacier Blue 強調 |
| 導航結構 | ✅ 參考 | 頂部導航 + 側邊篩選 |
| 響應式斷點 | ✅ 採用 | Mobile/lg/超寬 |
| Hover 效果 | ⚠️ 轉換 | 改為 `hover:text-glacier-blue` |
| 字體 | ❌ 衝突 | 維持 `VT323` 點陣風格 |

#### NVIDIA 原版設計規格

**1. 配色系統**
| 元素 | 設計 |
|------|------|
| 背景色 | 深色主題 (Deep Black)，營造專業科技感 |
| 主色調 | 黑色 + 深灰色為基礎 |
| 強調色 | 白色文字、半透明邊框 (`border-white/20`) |
| 對比 | 高對比度，文字清晰易讀 |

**2. 卡片設計**
- 邊框: 細微半透明邊框 (`border-white/20`)
- 背景: 略淺於頁面背景，創造層次感
- 圓角: 現代感圓角設計
- Hover 效果: 文字變亮 (`hover:text-n000`)
- 陰影: 低調陰影，不喧賓奪主

**3. 排版布局**
- 最大寬度: 1920px (超寬螢幕適配)
- Grid 系統: Flexbox + Grid 混合
- 間距: Mobile `px-4 pt-4` / Desktop `lg:px-8`
- 響應式: 完整行動裝置適配

**4. 字體風格**
- 標題: 粗體、大尺寸、高對比
- 內文: 清晰可讀、適當行高
- 技術感: Sans-serif 字體為主

**5. 搜尋/篩選介面**
- 多層篩選機制: Use Case / Provider / Publisher
- 即時搜尋: 支援快捷鍵 (⌘K)
- 標籤/Badge: 清楚標示分類

**6. 導航結構**
- 頂部導航: Explore | Models | Blueprints | GPUs | Docs
- 層級清晰: 主導航 + 側邊篩選 + 內容區
- 快捷鍵支援: ⌘K 快速搜尋

#### 🔄 風格轉換範例

**卡片 (NVIDIA → Nothing.tech)**
```tsx
// ❌ NVIDIA 原版 (深色)
<div className="bg-manitoulinLightBlack border-white/20 hover:text-n000">

// ✅ AWOOOI 轉換 (純白工業風)
<div className="bg-white/70 backdrop-blur-[20px] border-2 border-nothing-black shadow-lg/20 hover:border-glacier-blue">
```

**篩選器 Badge (NVIDIA → Nothing.tech)**
```tsx
// ❌ NVIDIA 原版
<span className="bg-n700 text-n000 text-xs">Provider</span>

// ✅ AWOOOI 轉換
<span className="bg-glacier-blue/10 text-nothing-black border border-glacier-blue font-vt323 text-xs">Provider</span>
```

**導航連結 (NVIDIA → Nothing.tech)**
```tsx
// ❌ NVIDIA 原版
<a className="text-n500 hover:text-n000">Models</a>

// ✅ AWOOOI 轉換
<a className="text-nothing-black/70 hover:text-glacier-blue font-vt323">Models</a>
```

#### 應用場景

| 場景 | 參考元素 |
|------|----------|
| Dashboard 卡片 | 卡片結構、間距、Grid |
| 模型/服務列表 | 卡片網格、標籤系統 |
| 篩選介面 | 多維度篩選 UI |
| 導航結構 | 頂部導航 + 側邊欄 |

---

### 1.2 (預留位置)

<!-- 未來新增視覺參考時填入 -->

---

## 2. UI/UX 互動

### 2.1 NVIDIA 多維度篩選器

> **來源**: build.nvidia.com
> **狀態**: 🟡 可參考
> **關聯**: 見 [1.1 NVIDIA Build 卡片網格](#11-nvidia-build-卡片網格--new)

**設計模式**:
```
┌─────────────────────────────────────────────┐
│  Sidebar Filters                             │
│  ┌─────────────────────────────────────────┐│
│  │ Use Case                                 ││
│  │ □ Object Detection                       ││
│  │ □ RAG                                    ││
│  │ □ Text Embedding                         ││
│  └─────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────┐│
│  │ Provider                                 ││
│  │ □ Deep Infra                             ││
│  │ □ Together AI                            ││
│  └─────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────┐│
│  │ Publisher                                ││
│  │ □ NVIDIA                                 ││
│  │ □ Mistral AI                             ││
│  └─────────────────────────────────────────┘│
└─────────────────────────────────────────────┘
```

**AWOOOI 風格轉換**:
```tsx
// ✅ 篩選器容器 (Nothing.tech 風格)
<aside className="w-64 bg-white/50 backdrop-blur-sm border-r border-nothing-black/10 p-4">
  <div className="space-y-4">
    {/* 篩選群組 */}
    <div className="border border-nothing-black/20 rounded-lg p-3">
      <h3 className="font-vt323 text-sm text-nothing-black mb-2">Use Case</h3>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" className="accent-glacier-blue" />
        <span className="font-vt323">Object Detection</span>
      </label>
    </div>
  </div>
</aside>
```

**可應用場景**:
- Knowledge Base 文件篩選
- Action Log 多條件過濾
- 模型/服務列表
- Incident 歷史查詢

---

### 2.2 快捷鍵搜尋 (⌘K)

> **來源**: build.nvidia.com, Linear, Notion
> **狀態**: 🟢 已有類似實作 (Omni-Terminal)

**增強方向**:
- 全局搜尋 (跨頁面)
- 命令面板 (Command Palette)
- 模糊搜尋 + 熱鍵提示

---

## 3. 風格參考 (Style)

### 3.1 企業級深色主題

> **來源**: NVIDIA, Vercel, Linear
> **狀態**: ❌ 不採用 (與 Nothing.tech 衝突)

**記錄原因**: 統帥明確指示維持純白工業風

---

### 3.2 (預留位置)

<!-- 未來新增風格參考時填入 -->

---

## 4. 功能構想 (Features)

### 4.1 (預留位置)

<!-- 未來新增功能構想時填入 -->

---

## 5. 工具評估 (Tools)

### 5.1 (預留位置)

<!-- 未來評估工具時填入，例如:
- 新的監控工具
- 新的 CI/CD 工具
- 新的測試框架
-->

---

## 6. 服務/平台 (Services)

### 6.1 NVIDIA NIM APIs ✅ 已實測

> **來源**: build.nvidia.com
> **狀態**: 🟢 **評估通過，建議整合**
> **測試日期**: 2026-03-28

**說明**: NVIDIA 提供的雲端 AI 模型 API 服務

**可用模型** (Nemotron 系列):
- `nvidia/nemotron-mini-4b-instruct` - 輕量、Tool Calling 專用
- `nvidia/llama-3.1-nemotron-70b-instruct` - 複雜推理
- Nemotron-3 系列 (MoE 架構)

**實測結果 (2026-03-28)**:

| 指標 | Nemotron (NIM) | Ollama (CPU) |
|------|----------------|--------------|
| **Tool Calling 精準度** | 83.3% (5/6) | ~50% |
| **平均延遲** | 11-23 秒 | 100+ 秒 |
| **最慢延遲** | 45 秒 | 超時 |
| **繁中支援** | ✅ 良好 | ✅ 良好 |
| **成本** | 免費 tier | 免費 |

**結論**:
- ✅ Tool Calling 精準度比 Ollama 高
- ✅ 延遲比 CPU Ollama 快 5-10 倍
- ⚠️ 免費 tier 有排隊延遲 (11-45 秒)
- ⚠️ 不適合即時對話，適合背景/批次任務

**建議用途**:
- OpenClaw Tool Calling 決策
- Incident 分析 (背景任務)
- Playbook 生成

**整合提案**: [NEMOTRON-INTEGRATION-PROPOSAL.md](proposals/NEMOTRON-INTEGRATION-PROPOSAL.md)

---

### 6.2 (預留位置)

<!-- 未來評估服務時填入 -->

---

## 7. 突發奇想 (Wild Ideas)

### 7.1 (預留位置)

<!-- 記錄任何突發奇想，不論可行性
格式範例:
> **想法**: xxx
> **來源**: 統帥/Claude/外部
> **日期**: 2026-xx-xx
> **可行性**: 🟢/🟡/🔴
> **備註**: xxx
-->

---

## 8. 待討論 (Pending Discussion)

### 8.1 (預留位置)

<!-- 需要與統帥討論確認的項目
格式範例:
> **議題**: xxx
> **背景**: xxx
> **選項**:
> - A: xxx
> - B: xxx
> **建議**: xxx
> **狀態**: 待討論
-->

---

## 狀態圖例

| 圖示 | 狀態 | 說明 |
|------|------|------|
| 🟢 | 已採用/已實作 | 已整合至專案 |
| 🟡 | 待整合 | 已批准，待實作 |
| 🔵 | 觀察中 | 持續評估 |
| 🔴 | 不採用 | 已決定不使用 |
| ⚪ | 未評估 | 尚未開始評估 |

---

## 變更紀錄

| 日期 | 執行者 | 變更內容 |
|------|--------|----------|
| 2026-03-28 | Claude Code | 初始建立，加入 NVIDIA Build 參考 |