Hacker News 推薦：ASCII Canvas，用於 AI 的視覺化上下文介面
Hacker News·
這篇 "Show HN" 文章介紹了 ASCII Canvas，一個專為大型語言模型 (LLMs) 設計的原生視覺化介面。它提供無限畫布、多位元組支援和可複製貼上的架構，旨在幫助使用者建立 AI 能夠有效理解的圖表。
[英文] | 簡體中文
ASCII Canvas
「LLM 時代的原生視覺介面：一個無限、多位元組的 ASCII 畫布，旨在成為人類與 AI 的共享白板。」
🛠 核心功能
ASCII Canvas 是一個高效能、協作式的 ASCII 藝術創作引擎。與輸出像素（對 LLM 不透明）的傳統白板不同，此引擎會渲染結構化、語義化的 Unicode 網格。
1. 高效能渲染
- 多層架構：利用三個獨立的圖層（背景、暫存、UI）來維持 60FPS。
- 無限視圖：整合螢幕到網格的映射，實現無縫的平移和縮放。
2. 智慧佈局引擎
- 縮排繼承：智慧換行邏輯會自動偵測並維持縮排。
- 寬字元支援：原生支援 CJK 字元、Nerd Fonts 和 表情符號。
- 模組化縮排：專業的 Tab 系統，將游標移動 2 個網格單位。
3. 分散式協作
- Yjs CRDT 整合：即時、低延遲的協作編輯。
- 穩健的持久化：高粒度的復原/重做管理，支援本地儲存同步。
4. 精確編輯工具
- 錨點分區：
Shift + Click可快速進行矩形選取。 - 大量填充：使用任何字元即時填充作用中的選取範圍。
- 上下文中心：專業選單，提供複製、剪下、貼上和刪除操作。
展示
技術堆疊
- 前端：React 18, TypeScript
- 狀態管理：Zustand (Slice Pattern)
- 同步：Yjs / Y-IndexedDB
- 手勢：@use-gesture/react
- UI 組件：Tailwind CSS, Shadcn UI, Radix UI
🚀 開始使用
安裝
git clone https://github.com/Sayhi-bzb/ascii-canvas.git
cd ascii-canvas
npm install
開發
npm run dev
建置
npm run build
⌨️ 快捷鍵參考
| 動作 | 快捷鍵 | 說明 |
|---|---|---|
| 分區 | 拖曳 | 傳統矩形區域選取 |
| 錨點分區 | Shift + Click | 在錨點和目前點之間建立選取範圍 |
| 大量填充 | 字元鍵 | 使用按下的字元填充作用中的選取範圍 |
| 智慧換行 | Enter | 換行並繼承縮排 |
| 鋪設空間 | Tab | 將游標向右移動 2 個網格單位 |
| 上下文選單 | 右鍵點擊 | 存取複製、剪下、貼上和刪除指令 |
🗺 開發路線圖
- 多層畫布渲染引擎。
- 透過 Yjs 進行即時協作。
- 智慧縮排與 Tab 系統。
- 上下文選單與剪貼簿整合。
- NES (下一個編輯建議)：基於佈局模式的預測字元放置。
- AI 聊天整合：用於生成畫布組件的自然語言介面。
- ANSI 序列與 SVG 匯出支援。
📄 授權
此專案根據 MIT 授權 發布。詳情請參閱 LICENSE 檔案。
相關文章