跳至內容

「Tool:Tool:AI工具」：修訂間差異

出自江振維的課程知識庫
← 較舊編輯
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
視覺化wikitext
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
無編輯摘要
標籤：已被回退
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
Refactoring: Fixed link to 'Tool:VS_Code_+_GitHub'
 
（未顯示同一使用者於中間所作的 7 次修訂）
第1行： 第1行：
= VS Code × Quarto 環境建置與使用教學 =
<div style="width:100%; max-width:1000px; margin:0 auto; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color:#f4f5f7; color:#2d3436; box-sizing: border-box; line-height: 1.6;">


== 一、安裝清單 ==
<div style="padding: 15px 0 10px 5px;">
下列項目為使用 VS Code 撰寫、編譯與預覽 Quarto 專案（SIGGRAPH Asia 論文、課程講義、研究報告）所需的全部環境。
<span style="background:#dfe6e9; padding:6px 15px; border-radius:20px; font-size:0.9em; font-weight:bold;">
[[首頁|← 回首頁]]
</span>
</div>


{| class="wikitable" style="width:100%;"
<div style="background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%); color:white; border-radius:16px; padding:40px 30px; box-shadow: 0 10px 20px rgba(44, 62, 80, 0.2); margin-bottom: 25px;">
! 類別 !! 名稱 !! 功能說明 !! 安裝方式
<div style="font-size:2.5em; font-weight:800; letter-spacing:-1px; margin-bottom:8px;">工具說明與官方資訊查詢</div>
|-
<div style="font-size:1.3em; font-weight:300; opacity:0.9;">Essential Tools & Official Resources</div>
| Quarto 主程式 || [https://quarto.org/download Quarto CLI] || Markdown → PDF / HTML / LaTeX 論文轉換核心 || 下載後安裝，終端機輸入 <code>quarto check</code> 測試
<div style="margin-top:15px; border-top:1px solid rgba(255,255,255,0.2); padding-top:15px; font-size:0.95em; background:rgba(0,0,0,0.1); display:inline-block; padding:8px 15px; border-radius:8px;">
|-
⚠️ 安全提醒：請務必從官方來源取得軟體，以確保版本正確與資訊安全。
| TeX 系統 || macOS：MacTeX<br>Windows：MikTeX<br>Linux：TeX Live Full || 用於輸出 PDF（含 ACM acmart 模板） || 安裝後輸入 <code>kpsewhich acmart.cls</code> 檢查
</div>
|-
</div>
| Graphviz || [https://graphviz.org/download Graphviz] || 繪製 DOT 流程圖與研究架構圖 || 安裝後輸入 <code>dot -V</code> 測試
|-
| VS Code 編輯器 || [https://code.visualstudio.com/ Visual Studio Code] || 撰寫與預覽 Quarto 檔案 || 下載後安裝即可
|}


== 二、VS Code 必裝擴充套件 ==
<div style="margin-bottom: 30px;">
於 VS Code 左側 Extensions 搜尋並安裝以下外掛：
<div style="font-size:1.5em; font-weight:bold; color:#8e44ad; margin-bottom:15px; border-left:5px solid #8e44ad; padding-left:15px;">
🤖 語言模型與輔助工具 LLMs
</div>


{| class="wikitable" style="width:100%;"
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
! 套件名稱 !! 功能說明
|-
| '''Quarto''' || 官方外掛，提供編譯、Render、Preview 與語法高亮（必裝）
|-
| '''Markdown All in One''' || 改善 Markdown 編輯體驗，自動標題、快速格式化、目錄生成功能
|-
| '''LaTeX Workshop''' || LaTeX 文件輔助、PDF 即時預覽與錯誤提示
|-
| '''Graphviz Preview'''（可選） || 於 VS Code 內直接預覽 .dot 或 Quarto Graphviz 圖
|-
| '''Better BibTeX for Zotero'''（Zotero 外掛） || 自動產生引用鍵與 BibTeX 檔，供 Quarto 文獻引用
|}


== 三、環境測試 ==
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #9b59b6;">
開啟終端機輸入：
<div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:10px;">
<pre>
<div style="font-size:1.3em; font-weight:bold; color:#2d3436;">LM Studio</div>
quarto check
</div>
</pre>
<div style="margin-bottom:15px;">
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://lmstudio.ai/ LM Studio 官網]</li>
<li>📖 <strong>教學資源：</strong> [https://the-walking-fish.com/p/lmstudio/?utm_source=chatgpt.com 本地模型部署教學 (The Walking Fish)]</li>
</ul>
</div>


若顯示以下內容，代表環境安裝成功：
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #9b59b6;">
<pre>
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">AnythingLLM</div>
✓ Checking versions...
<div style="margin-bottom:15px;">
✓ Pandoc found
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
✓ TeX found
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
✓ Graphviz found
<span style="background:#fef9e7; color:#d35400; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Docker</span>
</pre>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://anythingllm.com AnythingLLM]｜[https://docs.useanything.com/ 文件]</li>
<li>💡 <strong>特色：</strong> 支援桌面版與自行部署。</li>
</ul>
</div>


== 四、專案結構 ==
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #9b59b6;">
建立或開啟範例專案，結構建議如下：
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Ollama</div>
<pre>
<div style="margin-bottom:15px;">
siggraph_quarto_template/
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
├─ _quarto.yml
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
├─ siggraph.qmd
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
├─ siggraph_bilingual.qmd
</div>
├─ references.bib
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
├─ figures/
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://ollama.com/download 下載 Ollama]</li>
│  └─ dot-graphs/
</ul>
└─ README.md
</div>
</pre>


== 五、基本使用步驟 ==
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #9b59b6;">
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Superpower ChatGPT</div>
<div style="margin-bottom:15px;">
<span style="background:#f4f6f6; color:#2c3e50; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Chrome</span>
<span style="background:#f4f6f6; color:#2c3e50; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Edge</span>
<span style="background:#f4f6f6; color:#2c3e50; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Firefox</span>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://spchatgpt.com/ 官網]｜[https://github.com/saeedezzati/superpower-chatgpt GitHub]</li>
<li>🧩 <strong>類型：</strong> 瀏覽器外掛 (Extension)</li>
</ul>
</div>


=== 1. 開啟檔案 ===
</div>
開啟 <code>siggraph.qmd</code> 或 <code>siggraph_bilingual.qmd</code>。
</div>


=== 2. 編輯 Markdown 內容 ===
<div style="margin-bottom: 30px;">
<pre>
<div style="font-size:1.5em; font-weight:bold; color:#d35400; margin-bottom:15px; border-left:5px solid #e67e22; padding-left:15px;">
# Introduction
🎨 圖像生成與設計工具 Image Gen
This paper explores...
</div>


## Related Work
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
Haraway argues that... [@Haraway2016]
</pre>


=== 3. 插入 DOT 流程圖 ===
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #e67e22;">
<pre>
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">ComfyUI</div>
```{dot}
<div style="margin-bottom:15px;">
digraph Example {
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
  rankdir=LR;
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
  A[label="Concept"];
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
  B[label="Artifact"];
</div>
  A -> B;
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
}
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://www.comfy.org/ ComfyUI]｜[https://github.com/comfyanonymous/ComfyUI GitHub]</li>
</pre>
<li>📖 <strong>教學資源：</strong> [https://stable-diffusion-art.com/comfyui/?utm_source=chatgpt.com 入門與安裝完整教學]</li>
</ul>
</div>


<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #e67e22;">
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">DiffusionBee</div>
<div style="margin-bottom:15px;">
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS (M1/M2/Intel)</span>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://diffusionbee.com/ DiffusionBee 官網]</li>
<li>⚠️ <strong>需求：</strong> 需 macOS 12.3 以上版本。</li>
</ul>
</div>


== 六、在 VS Code 中編譯與預覽 ==
</div>
* 點擊右上角「Render」按鈕（藍色 Quarto 圖示）
</div>
* 或使用快捷鍵：<code>Ctrl + Shift + K</code> (Windows) / <code>Cmd + Shift + K</code> (Mac)
* '''輸出：'''
** <code>siggraph.pdf</code> → ACM SIGGRAPH 樣式論文
** 若設定 <code>format: [pdf, html]</code> → 可同時產生 HTML 預覽


== 七、引用與文獻管理 ==
<div style="margin-bottom: 30px;">
# 在 Zotero 中安裝「Better BibTeX」。
<div style="font-size:1.5em; font-weight:bold; color:#2980b9; margin-bottom:15px; border-left:5px solid #3498db; padding-left:15px;">
# 匯出 BibTeX 檔至專案根目錄（命名為 <code>references.bib</code>）。
💻 開發與程式編輯工具 Development
# 在文章中插入引用，例如：<code>[@AuthorYear]</code>。
</div>
# Render 後 Quarto 會自動生成 ACM 樣式參考文獻。


== 八、常見問題 ==
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
{| class="wikitable" style="width:100%;"
! 問題 !! 可能原因與解決方式
|-
| 產生 PDF 失敗 || 檢查 TeX 是否安裝完整，或查看 Log 中的 LaTeX 錯誤訊息。
|-
| 中文亂碼 || 檢查字型設定（Font Family）是否包含支援中文的字體（如 Noto Sans TC）。
|-
| DOT 圖未顯示 || 確保 Graphviz 已安裝且已加入系統路徑（Path）。
|-
| 引用不顯示 || 檢查 <code>.bib</code> 檔案路徑是否於 YAML Header 中正確設定。
|}


== 九、進階用途 ==
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #3498db;">
* 使用 <code>siggraph_bilingual.qmd</code> 製作中英雙語版（左英右中）。
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">VS Code</div>
* 將多份 <code>.qmd</code> 納入 <code>_quarto.yml</code> 管理，建立 18 週教學講義。
<div style="margin-bottom:15px;">
* 使用 <code>{dot}</code>、<code>{python}</code>、<code>{r}</code> 程式區塊自動產生圖表。
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
* 將計畫書（FITI / NSTC）改寫為 Quarto 專案版本。
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
* 以 <code>quarto render --to html</code> 生成互動式網站展示作品。
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://code.visualstudio.com/ VS Code 官網]</li>
<li style="margin-bottom:8px;">📘 <strong>校內資源：</strong> [[Tool:VS_Code_+_GitHub|VS Code + GitHub 新手上手快速指南]]</li>
<li>⚙️ <strong>進階設定：</strong> [https://github.com/doggy8088/github-copilot-configs 最佳 VS Code 工作環境設定]</li>
</ul>
</div>


== 十、建議工作流程 ==
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #3498db;">
# 在 Zotero 收集文獻
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Cursor</div>
# 匯出 references.bib
<div style="margin-bottom:15px;">
# 在 VS Code 撰寫 .qmd 檔
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
# 插入 Graphviz 圖表
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
# 按「Render」輸出 SIGGRAPH Asia 論文 PDF
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
# 最後校對字型與排版
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://cursor.com/ Cursor 官網]</li>
<li>✨ <strong>特色：</strong> AI 深度整合的程式碼編輯器。</li>
</ul>
</div>


== 十一、檢查指令速查 ==
</div>
{| class="wikitable" style="width:100%;"
</div>
! 功能 !! 指令
|-
| 測試環境 || <code>quarto check</code>
|-
| 產生 PDF || <code>quarto render doc.qmd --to pdf</code>
|-
| 產生 HTML || <code>quarto render doc.qmd --to html</code>
|-
| 預覽檔案 || <code>quarto preview doc.qmd</code>
|}


== 十二、延伸建議 ==
<div style="margin-bottom: 30px;">
* 以 Git 管理 Quarto 專案版本。
<div style="font-size:1.5em; font-weight:bold; color:#f39c12; margin-bottom:15px; border-left:5px solid #f1c40f; padding-left:15px;">
* 在 <code>_quarto.yml</code> 中定義多檔輸出（論文、講義、簡報）。
📢 表達與簡報工具 Presentation
* 若需要投稿 SIGGRAPH Asia，請移除作者資訊以符合匿名審稿規範。
</div>


----
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
'''撰寫者：'''[[江振維]]<br>
 
'''版本：'''2025-11<br>
<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 4px solid #f1c40f;">
'''用途：'''SIGGRAPH Asia、設計研究、教學講義與學術寫作之 Quarto + VS Code 整合指南。
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Gamma</div>
<div style="margin-bottom:15px;">
<span style="background:#f4f6f6; color:#2c3e50; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Web (瀏覽器)</span>
</div>
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://gamma.app/zh-tw Gamma 官網]</li>
<li>📖 <strong>教學資源：</strong> [https://app.genape.ai/zh-TW/tutorial-article/ai-generator/gamma-ai-presentation?utm_source=chatgpt.com Gamma AI 簡報製作教學]</li>
</ul>
</div>
 
</div>
</div>
 
</div>

於 2026年2月1日 (日) 13:39 的最新修訂

工具說明與官方資訊查詢
Essential Tools & Official Resources

⚠️ 安全提醒：請務必從官方來源取得軟體，以確保版本正確與資訊安全。

🤖 語言模型與輔助工具 LLMs

LM Studio

Windows macOS Linux

AnythingLLM

Windows macOS Docker

  • 🌐 官方來源： AnythingLLM｜文件
  • 💡 特色： 支援桌面版與自行部署。
Ollama

Windows macOS Linux

Superpower ChatGPT

Chrome Edge Firefox

  • 🌐 官方來源： 官網｜GitHub
  • 🧩 類型： 瀏覽器外掛 (Extension)

🎨 圖像生成與設計工具 Image Gen

ComfyUI

Windows macOS Linux

DiffusionBee

macOS (M1/M2/Intel)

💻 開發與程式編輯工具 Development

VS Code

Windows macOS Linux

Cursor

Windows macOS Linux

  • 🌐 官方來源： Cursor 官網
  • ✨ 特色： AI 深度整合的程式碼編輯器。

📢 表達與簡報工具 Presentation

Gamma

Web (瀏覽器)

取自「https://wiki.interaction.tw/index.php?title=Tool:Tool:AI工具&oldid=852」