跳至內容

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

出自江振維的課程知識庫
← 較舊編輯較新編輯 →
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
視覺化wikitext
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
標籤：已被回退
Skipclass​（留言 | 貢獻）
行政員、​介面管理員、​管理員
993筆編輯
無編輯摘要
標籤：手動回退
第1行： 第1行：
<div style="background-color: #2c3e50; color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<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="font-size: 2em; font-weight: bold; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 10px;">VS Code × Quarto 環境建置與實作指南</div>
 
<div style="font-size: 1.1em; opacity: 0.9;">
<div style="padding: 15px 0 10px 5px;">
🚫 <b>無須範例檔</b> | 🚀 <b>從零開始 (From Scratch)</b> | 🎓 <b>適用於論文、講義與報告</b>
<span style="background:#dfe6e9; padding:6px 15px; border-radius:20px; font-size:0.9em; font-weight:bold;">
[[首頁|← 回首頁]]
</span>
</div>
 
<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>
<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;">
⚠️ 安全提醒：請務必從官方來源取得軟體，以確保版本正確與資訊安全。
</div>
</div>
</div>
</div>


== 🛠️ 一、安裝清單 (必備環境) ==
<div style="margin-bottom: 30px;">
<div style="background-color: #fff3cd; border-left: 6px solid #ffc107; padding: 10px; margin: 15px 0;">
<div style="font-size:1.5em; font-weight:bold; color:#8e44ad; margin-bottom:15px; border-left:5px solid #8e44ad; padding-left:15px;">
'''注意：''' 請務必依照下列順序安裝，這是運作的基礎。
🤖 語言模型與輔助工具 LLMs
</div>
</div>


{| class="wikitable" style="width:100%; border-collapse: collapse;"
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
|- style="background-color: #f8f9fa; text-align: left;"
! style="padding: 10px;" | 步驟
! style="padding: 10px;" | 軟體名稱
! style="padding: 10px;" | 功能說明
! style="padding: 10px;" | 安裝與檢查方式
|-
| align="center" | 1
| '''[https://code.visualstudio.com/ Visual Studio Code]'''
| 編輯器主程式
| 下載後安裝即可。
|-
| align="center" | 2
| '''[https://quarto.org/download Quarto CLI]'''
| 轉換核心 (Markdown → PDF/HTML)
| 安裝後，開啟終端機輸入 <code>quarto check</code> 測試。
|-
| align="center" | 3
| '''TeX 系統'''
| PDF 輸出引擎
|
* '''macOS:''' 安裝 [https://www.tug.org/mactex/ MacTeX]
* '''Windows:''' 安裝 [https://miktex.org/download MiKTeX]
|-
| align="center" | 4
| '''[https://graphviz.org/download Graphviz]'''
| 流程圖繪製工具
| 安裝後輸入 <code>dot -V</code> 測試。<br>''(Windows 安裝時請勾選 "Add to PATH")''
|}


== 🧩 二、VS Code 擴充套件設定 ==
<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;">
請開啟 VS Code 左側 '''Extensions''' (方塊圖示)，搜尋並安裝以下套件：
<div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:10px;">
<div style="font-size:1.3em; font-weight:bold; color:#2d3436;">LM Studio</div>
</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;">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>


{| class="wikitable" style="width:100%;"
<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;">AnythingLLM</div>
|-
<div style="margin-bottom:15px;">
| '''Quarto''' || style="color:red; font-weight:bold;" | ★★★ || 官方外掛，提供語法高亮、預覽與自動補全。
<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>
| '''Markdown All in One''' || ★★☆ || 自動編號、目錄生成、快捷鍵優化。
<span style="background:#fef9e7; color:#d35400; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Docker</span>
|-
</div>
| '''Graphviz Preview''' || ★★☆ || 讓你可以直接預覽 <code>.dot</code> 流程圖檔案。
<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>
| '''LaTeX Workshop''' || ★☆☆ || 輔助 PDF 輸出除錯與語法檢查。
<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>
<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://ollama.com/download 下載 Ollama]</li>
</ul>
</div>


=== 步驟 1：建立資料夾 ===
<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;">
* 在電腦中建立新資料夾，命名為 <code>My_Quarto_Paper</code>。
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Superpower ChatGPT</div>
* 使用 VS Code 開啟此資料夾。
<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>


=== 步驟 2：設定檔 (_quarto.yml) ===
</div>
在 VS Code 建立新檔案 <code>_quarto.yml</code>，並貼上以下內容：
</div>


<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
<div style="margin-bottom: 30px;">
project:
<div style="font-size:1.5em; font-weight:bold; color:#d35400; margin-bottom:15px; border-left:5px solid #e67e22; padding-left:15px;">
  title: "我的學術研究專案"
🎨 圖像生成與設計工具 Image Gen
  type: website
</div>
  output-dir: docs


format:
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
  html:
    theme: cosmo
    toc: true
  pdf:
    documentclass: scrartcl
    number-sections: true
</pre>


=== 步驟 3：文獻檔 (references.bib) ===
<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;">
建立新檔案 <code>references.bib</code>，貼上測試用文獻：
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">ComfyUI</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;">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://www.comfy.org/ ComfyUI]｜[https://github.com/comfyanonymous/ComfyUI GitHub]</li>
<li>📖 <strong>教學資源：</strong> [https://stable-diffusion-art.com/comfyui/?utm_source=chatgpt.com 入門與安裝完整教學]</li>
</ul>
</div>


<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
<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;">
@article{Example2025,
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">DiffusionBee</div>
  title={Designing with AI: A Practical Guide},
<div style="margin-bottom:15px;">
  author={Chiang, Chen-Wei and GPT, Chat},
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS (M1/M2/Intel)</span>
  journal={Journal of Creative Technology},
</div>
  year={2025},
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
  volume={1},
<li style="margin-bottom:8px;">🌐 <strong>官方來源：</strong> [https://diffusionbee.com/ DiffusionBee 官網]</li>
  pages={1--10}
<li>⚠️ <strong>需求：</strong> 需 macOS 12.3 以上版本。</li>
}
</ul>
</pre>
</div>


=== 步驟 4：主文件 (index.qmd) ===
</div>
建立新檔案 <code>index.qmd</code>，這是撰寫論文的地方。請完整複製貼上：
</div>


<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
<div style="margin-bottom: 30px;">
---
<div style="font-size:1.5em; font-weight:bold; color:#2980b9; margin-bottom:15px; border-left:5px solid #3498db; padding-left:15px;">
title: "Quarto 論文實作範例"
💻 開發與程式編輯工具 Development
author: "你的名字"
</div>
date: last-modified
bibliography: references.bib
format:
  html: default
  pdf: default
---


# 緒論 (Introduction)
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
這是使用 VS Code 與 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 #3498db;">
根據研究指出，AI 協作能提升設計效率 [@Example2025]。
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">VS Code</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;">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://code.visualstudio.com/ VS Code 官網]</li>
<li style="margin-bottom:8px;">📘 <strong>校內資源：</strong> [[VS Code + GitHub|VS Code + GitHub 新手上手快速指南]]</li>
<li>⚙️ <strong>進階設定：</strong> [https://github.com/doggy8088/github-copilot-configs 最佳 VS Code 工作環境設定]</li>
</ul>
</div>


# 研究方法 (Methodology)
<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;">
本研究採用 DOT 語言繪製研究架構圖，如下所示：
<div style="font-size:1.3em; font-weight:bold; color:#2d3436; margin-bottom:10px;">Cursor</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;">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://cursor.com/ Cursor 官網]</li>
<li>✨ <strong>特色：</strong> AI 深度整合的程式碼編輯器。</li>
</ul>
</div>


```{dot}
</div>
//| label: fig-flowchart
</div>
//| fig-cap: "研究流程圖"
 
digraph G {
  rankdir=LR;
  fontname="Helvetica";
  node [shape=box, style=filled, fillcolor="#E6F3FF"];
 
  Step1 [label="文獻探討"];
  Step2 [label="建立假說"];
  Step3 [label="實驗驗證"];
 
  Step1 -> Step2 -> Step3;
}
結論 (Conclusion)
Quarto 能夠將上述內容自動排版為高品質的 PDF 與 HTML。 </pre>


== ▶️ 四、編譯與預覽 (Render) ==
<div style="margin-bottom: 30px;">
<div style="background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 10px; margin: 10px 0;">
<div style="font-size:1.5em; font-weight:bold; color:#f39c12; margin-bottom:15px; border-left:5px solid #f1c40f; padding-left:15px;">
💡 <b>操作技巧：</b> 請確保目前編輯視窗停留在 <code>index.qmd</code> 檔案上。
📢 表達與簡報工具 Presentation
</div>
</div>


# 點擊 VS Code 右上角的 '''「Preview」按鈕''' (放大鏡與文件圖示)。
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
# 或使用快捷鍵：
#* Windows: <code>Ctrl</code> + <code>Shift</code> + <code>K</code>
#* macOS: <code>Cmd</code> + <code>Shift</code> + <code>K</code>
# '''檢查結果：'''
#* 右側出現 HTML 互動預覽。
#* 資料夾內產生 <code>index.pdf</code> 文件。


== 📄 五、進階：使用 ACM SIGGRAPH 模板 ==  
<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;">
若需投稿學術研討會，請使用官方模板：
<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>


開啟 VS Code 終端機 (<code>Ctrl</code> + <code>~</code>)。
</div>
輸入指令：<code>quarto add quarto-journals/acm</code> (詢問時按 Y)。
</div>
修改 <code>index.qmd</code> 標頭如下：
<pre style="background-color: #f4f4f4; border: 1px solid #ccc; padding: 10px;">
title: "My SIGGRAPH Paper" format: acm-pdf: default <-- 修改這裡 acm-html: default bibliography: references.bib
</pre>


== ❓ 六、常見問題排除 (Troubleshooting) ==
</div>
 
{| class="wikitable" style="width:100%;"
! width="20%" | 問題現象 !! 解決方法
|-
| '''PDF 無法產生'''
|
* 檢查 TeX 系統是否安裝完整。
* 查看 Log，若 Quarto 詢問是否安裝缺少的套件，請選 '''Yes'''。
|-
| '''中文顯示亂碼'''
|
* 在 PDF 設定加入字型參數：<br><code>mainfont: "Microsoft JhengHei"</code> (或 Noto Sans TC)
|-
| '''DOT 圖表未顯示'''
|
* 確認已安裝 Graphviz。
* Windows 用戶需確認安裝時勾選 '''"Add to PATH"'''。
|}

於 2025年11月22日 (六) 11:01 的修訂

工具說明與官方資訊查詢
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=597」