<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>TommyPan's Blog</title><link>https://tommypan.dev/</link><description>Recent content in TommyPan's Blog on TommyPan's Blog</description><generator>Hugo -- gohugo.io</generator><language>zh-tw</language><lastBuildDate>Thu, 31 Jul 2025 11:00:00 +0800</lastBuildDate><atom:link href="https://tommypan.dev/index.xml" rel="self" type="application/rss+xml"/><item><title>如何架設N8N伺服器在本地端的部署教學</title><link>https://tommypan.dev/posts/n8n-localhost-deployment-troubleshooting/</link><pubDate>Thu, 31 Jul 2025 11:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/n8n-localhost-deployment-troubleshooting/</guid><description>&lt;p>&lt;img src="https://tommypan.dev/images/n8n-localhost-deployment-troubleshooting/1.webp" alt="成功畫面" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
本文將帶你一步步從零開始，在本地端（Windows 系統為例）架設 n8n 並使用 Cloudflare Tunnel 將本地服務映射為網路可訪問的固定公開網址。過程中會詳細解說重要設定與可能遇到的注意事項。&lt;/p>
&lt;h2 id="1-n8n是什麽">1. N8N是什麽&lt;/h2>
&lt;p>n8n 是一個開源的自動化工作流程平台，讓用戶可以透過圖形化介面（拖拉節點）來串接和自動化各種工具、平台與服務，無需寫程式也能輕鬆建立自動化流程（雖然我的這個要寫不少JS跟SQL就對了）。&lt;/p>
&lt;p>像是下面的圖片，有許多的節點跟綫條連接，這樣做的好處就是可讀性高，以及維護容易。&lt;/p>
&lt;img src="https://tommypan.dev/images/auto-subscribtion/2.webp" alt="成功畫面" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h3 id="主要特點">主要特點&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>開源免費&lt;/strong>：n8n 完全開源，任何人都可以免費下載、使用、修改，並根據需求自行部署在本地或雲端。&lt;/li>
&lt;li>&lt;strong>視覺化操作&lt;/strong>：只需拖拉節點、設定參數，就能設計複雜的自動化工作流，適合沒有程式基礎的使用者。&lt;/li>
&lt;li>&lt;strong>高度彈性與擴充性&lt;/strong>：支援自訂節點、腳本（如 JavaScript），也能安裝社群第三方擴充，適合開發者進行進階自動化。&lt;/li>
&lt;li>&lt;strong>豐富的整合能力&lt;/strong>：內建超過200～400種第三方應用整合（如 Google Apps、Slack、Trello、GitHub、AWS、Notion、LINE、Shopify 等），可滿足各式自動化需求。&lt;/li>
&lt;li>&lt;strong>自我託管&lt;/strong>：用戶可選擇將 n8n 部署在自己的伺服器，完全掌控資料安全與隱私&lt;/li>
&lt;/ul>
&lt;h2 id="爲什麽需要n8n">爲什麽需要N8N?&lt;/h2>
&lt;h3 id="先想清楚什麽事值得自動化">先想清楚：什麽事值得自動化？&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>重複性高&lt;/strong>：每天、每週都要做的瑣事。&lt;/li>
&lt;li>&lt;strong>很花時間&lt;/strong>：不是難，但就是煩、耗時。&lt;/li>
&lt;li>&lt;strong>流程固定&lt;/strong>：步驟一樣、邏輯清楚。
訂閲系統就符合以上所有需求&lt;/li>
&lt;/ul>
&lt;h2 id="如何開始使用n8n">如何開始使用n8n&lt;/h2>
&lt;h3 id="你可以使用">你可以使用：&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>官方的托管伺服器&lt;/strong>： &lt;a href="https://n8n.io/">https://n8n.io/&lt;/a>&lt;/li>
&lt;li>&lt;strong>本地端伺服器&lt;/strong>: 本次使用Docker Desktop來建立。&lt;/li>
&lt;li>&lt;strong>其他部署平臺&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h2 id="1-環境與準備條件">1. 環境與準備條件&lt;/h2>
&lt;ul>
&lt;li>Windows 電腦已安裝 Docker Desktop&lt;/li>
&lt;li>已擁有自己的網域且 DNS 交由 Cloudflare 管理（或可自行將 DNS 指向 Cloudflare）&lt;/li>
&lt;li>了解 Cloudflare Tunnel 基本概念&lt;/li>
&lt;/ul>
&lt;h2 id="2-用-docker-安裝-n8n">2. 用 Docker 安裝 n8n&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>確認 Docker Desktop 已安裝啟動&lt;/strong>&lt;/p></description><media:content url="https://tommypan.dev/images/n8n-localhost-deployment-troubleshooting/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/n8n-localhost-deployment-troubleshooting/1.webp" type="image/*"/></item><item><title>Gemini Balance 部署體驗：從零開始的AI代理服務搭建心得</title><link>https://tommypan.dev/posts/gemini-balance-deployment/</link><pubDate>Sun, 13 Jul 2025 10:30:00 +0800</pubDate><guid>https://tommypan.dev/posts/gemini-balance-deployment/</guid><description>&lt;img src="https://tommypan.dev/images/gemini-balance-deployment/1.webp" alt="Gemini Balance 部署體驗" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h1 id="前言">前言&lt;/h1>
&lt;p>在探索AI服務部署的過程中，我發現了一個非常實用的項目 - &lt;strong>Gemini Balance&lt;/strong>。這是一個專為 Gemini API 設計的輪詢代理服務，能夠實現負載均衡、API密鑰管理和使用監控等功能。本文將分享我從零開始部署這個服務的完整體驗和心得。&lt;/p>
&lt;h2 id="什麼是-gemini-balance">什麼是 Gemini Balance？&lt;/h2>
&lt;p>Gemini Balance 是一個開源的 Gemini API 代理服務，主要特色包括：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>🔄 負載均衡&lt;/strong>：支援多個 API 密鑰輪詢使用&lt;/li>
&lt;li>&lt;strong>📊 使用監控&lt;/strong>：提供詳細的 API 使用統計和監控面板&lt;/li>
&lt;li>&lt;strong>🔐 訪問控制&lt;/strong>：支援自定義訪問令牌管理&lt;/li>
&lt;li>&lt;strong>💾 數據持久化&lt;/strong>：支援 SQLite 和其他數據庫存儲&lt;/li>
&lt;li>&lt;strong>🌐 易於部署&lt;/strong>：支援多種部署平台&lt;/li>
&lt;/ul>
&lt;h2 id="技術架構分析">技術架構分析&lt;/h2>
&lt;h3 id="核心組件">核心組件&lt;/h3>
&lt;p>Gemini Balance 的技術架構包含以下核心組件：&lt;/p></description><media:content url="https://tommypan.dev/images/gemini-balance-deployment/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/gemini-balance-deployment/1.webp" type="image/*"/></item><item><title>MCP 客戶端建置與設定教學</title><link>https://tommypan.dev/posts/mcp-client-setup/</link><pubDate>Tue, 08 Jul 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/mcp-client-setup/</guid><description>&lt;img src="https://tommypan.dev/images/mcp-client-setup/23.webp" alt="" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h1 id="我們將說明如何建置與設定-mcp-客戶端特別聚焦於-roocode-工具與本地模型的整合以及實際的應用">我們將說明如何建置與設定 MCP 客戶端，特別聚焦於 RooCode 工具與本地模型的整合，以及實際的應用。&lt;/h1>
&lt;h2 id="1-安裝與設定-roo-code">1. 安裝與設定 Roo code&lt;/h2>
&lt;p>roo code 是一款支援本地 AI 助手的 VS Code 擴充套件。安裝步驟如下：&lt;/p>
&lt;ol>
&lt;li>前往 Visual Studio Marketplace 或Extensions 搜尋「Roo code」並點擊安裝。
&lt;img src="https://tommypan.dev/images/mcp-client-setup/19.webp" alt="" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style> &lt;/li>
&lt;li>安裝後，Roo code 圖示會出現在 VS Code 側邊欄。&lt;/li>
&lt;/ol>
&lt;h2 id="2-本地模型支援">2. 本地模型支援&lt;/h2>
&lt;p>Roo code 支援多種本地模型，包括 Ollama、LM Studio 等。這些工具可讓你在本地運行大型語言模型（LLM），並與 MCP 協議整合。&lt;/p></description><media:content url="https://tommypan.dev/images/mcp-client-setup/23.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/mcp-client-setup/23.webp" type="image/*"/></item><item><title>如何使用N8N來建立一個自動化部落格訂閲系統</title><link>https://tommypan.dev/posts/n8n-automated-blog-subscription-system/</link><pubDate>Sat, 05 Jul 2025 11:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/n8n-automated-blog-subscription-system/</guid><description>&lt;img src="https://tommypan.dev/images/auto-subscribtion/1.webp" alt="成功畫面" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;blockquote>
&lt;p>如果你也要做一個電子報系統在 Huggingface Spaces 上了話，可能會遇到以下問題，可以參考這篇文章
&lt;div class="post-preview-card">
&lt;a href="https://tommypan.dev/posts/n8n-localhost-deployment-troubleshooting/" class="post-preview-link">
&lt;div class="post-preview-content has-image">
&lt;div class="post-preview-text">
&lt;div class="post-preview-meta">
&lt;time class="post-preview-date">2025年7月31日&lt;/time>
&lt;span class="post-preview-category">部署&lt;/span>
&lt;/div>
&lt;div class="post-preview-title">如何架設N8N伺服器在本地端的部署教學&lt;/div>
&lt;div class="post-preview-description">
教你如何使用docker架設N8N伺服器在本地端的部署教學，并且講述爲什麽我從完全免費的huggingface spaces平臺換到本地端，以及如何讓外網連接到本地的webhook
&lt;/div>
&lt;div class="post-preview-tags">
&lt;span class="post-preview-tag">#N8N&lt;/span>
&lt;span class="post-preview-tag">#自動化&lt;/span>
&lt;span class="post-preview-tag">#webhook&lt;/span>
&lt;/div>
&lt;div class="post-preview-footer">
&lt;span class="post-preview-author">Tommy Pan&lt;/span>
&lt;span class="post-preview-readmore">閱讀更多 →&lt;/span>
&lt;/div>
&lt;/div>
&lt;div class="post-preview-image">
&lt;img src="https://tommypan.dev/images/n8n-localhost-deployment-troubleshooting/1.webp" alt="如何架設N8N伺服器在本地端的部署教學" loading="lazy">
&lt;/div>
&lt;/div>
&lt;/a>
&lt;/div>
&lt;style>
.post-preview-card {
margin: 2rem 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 2px solid #e5e7eb;
transition: all 0.3s ease;
background: var(--bg-color);
position: relative;
}
.post-preview-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #0056b3);
opacity: 0;
transition: opacity 0.3s ease;
}
.post-preview-card:hover {
box-shadow: 0 8px 25px rgba(0, 123, 204, 0.15);
border-color: var(--primary-color);
transform: translateY(-3px);
}
.post-preview-card:hover::before {
opacity: 1;
}
.post-preview-link {
display: block;
text-decoration: none;
color: inherit;
}
.post-preview-content {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
padding: 1.5rem;
align-items: flex-start;
}
.post-preview-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.post-preview-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.post-preview-date {
font-weight: 500;
}
.post-preview-category {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: 500;
font-size: 0.7rem;
}
.post-preview-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.post-preview-card:hover .post-preview-title {
color: var(--primary-color);
}
.post-preview-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-preview-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.post-preview-tag {
background: var(--bg-tertiary);
color: var(--text-secondary);
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--border-color);
}
.post-preview-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-color);
}
.post-preview-author {
font-size: 0.8rem;
color: var(--text-secondary);
font-weight: 500;
}
.post-preview-readmore {
font-size: 0.85rem;
color: var(--primary-color);
font-weight: 600;
transition: transform 0.3s ease;
}
.post-preview-card:hover .post-preview-readmore {
transform: translateX(3px);
}
.post-preview-image {
width: 140px;
height: 100px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-secondary);
flex-shrink: 0;
}
.post-preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.post-preview-card:hover .post-preview-image img {
transform: scale(1.1);
}
.post-preview-content:not(.has-image) {
grid-template-columns: 1fr;
}
:root[data-theme="light"] .post-preview-card {
background: #ffffff;
border-color: #e5e7eb;
}
:root[data-theme="dark"] .post-preview-card {
background: var(--bg-secondary);
border-color: #4a5568;
}
:root[data-theme="light"] .post-preview-tag {
background: #f8f9fa;
color: #4a5568;
border-color: #e2e8f0;
}
:root[data-theme="dark"] .post-preview-tag {
background: var(--bg-tertiary);
color: var(--text-secondary);
border-color: #4a5568;
}
@media (max-width: 768px) {
.post-preview-content {
grid-template-columns: 1fr;
gap: 1rem;
}
.post-preview-image {
width: 100%;
height: 120px;
order: -1;
}
.post-preview-title {
font-size: 1.125rem;
}
.post-preview-description {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.post-preview-card {
margin: 1.5rem -1rem;
border-radius: 8px;
}
.post-preview-content {
padding: 1.25rem;
}
.post-preview-image {
height: 100px;
}
.post-preview-footer {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
&lt;/style>
&lt;/p></description><media:content url="https://tommypan.dev/images/auto-subscribtion/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/auto-subscribtion/1.webp" type="image/*"/></item><item><title>Hugging Face Spaces 部署指南</title><link>https://tommypan.dev/posts/huggingface-deploy-troubleshooting/</link><pubDate>Mon, 23 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/huggingface-deploy-troubleshooting/</guid><description>&lt;img src="https://tommypan.dev/images/Huggingface-deploy-troubleshooting/1.webp" alt="MCP 服務器架構" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h1 id="前言">前言&lt;/h1>
&lt;p>當你嘗試按照官方指引部署 Hugging Face Spaces 時：&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">git init
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git add app.py requirements.txt
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git commit -m &lt;span class="s2">&amp;#34;Initial commit&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-sentiment
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git push -u origin main
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>你可能會遇到各種錯誤。本指南將帶你逐步解決這些問題，並成功部署到 Hugging Face Spaces。&lt;/p>
&lt;h2 id="為什麼原始指令無法運作">為什麼原始指令無法運作？&lt;/h2>
&lt;p>自 2023 年 10 月 1 日起，Hugging Face 停止支援密碼身分驗證，因此當你使用 HTTPS URL 推送時，會收到以下錯誤訊息：&lt;/p></description><media:content url="https://tommypan.dev/images/Huggingface-deploy-troubleshooting/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/Huggingface-deploy-troubleshooting/1.webp" type="image/*"/></item><item><title>使用 Gradio MCP 建立伺服器，并部署在Hugging Face Space</title><link>https://tommypan.dev/posts/using-gradio-mcp-to-create-a-server/</link><pubDate>Mon, 23 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/using-gradio-mcp-to-create-a-server/</guid><description>&lt;img src="https://tommypan.dev/images/MCP-CH5/1.webp" alt="成功畫面" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h1 id="gradio-mcp-整合介紹">Gradio MCP 整合介紹&lt;/h1>
&lt;p>Gradio 透過自動將您的 Python 函數轉換為 MCP 工具，提供了一種簡單的方式來創建 MCP 伺服器。當您在 launch() 中設置 mcp_server=True 時，Gradio 會：&lt;/p>
&lt;ul>
&lt;li>自動將您的函數轉換為 MCP 工具&lt;/li>
&lt;li>將輸入元件映射到工具參數架構&lt;/li>
&lt;li>從輸出元件確定回應格式&lt;/li>
&lt;li>設置 JSON-RPC over HTTP+SSE 進行客戶端-伺服器通訊&lt;/li>
&lt;li>創建網頁介面和 MCP 伺服器端點&lt;/li>
&lt;/ul>
&lt;h2 id="專案設置">專案設置&lt;/h2>
&lt;p>首先，讓我們為專案創建一個新目錄並設置所需的依賴項：&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Windows&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">mkdir mcp-sentiment
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> mcp-sentiment
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">python -m venv venv
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">source&lt;/span> venv/bin/activate
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">pip install &lt;span class="s2">&amp;#34;gradio[mcp]&amp;#34;&lt;/span> textblob
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="創建伺服器">創建伺服器&lt;/h2>
&lt;blockquote>
&lt;p>Hugging Face Spaces 需要一個 app.py 檔案來建立 space，所以 Python 檔案的名稱必須是 app.py
創建一個名為 app.py 的新檔案，包含以下程式碼：&lt;/p></description><media:content url="https://tommypan.dev/images/MCP-CH5/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/MCP-CH5/1.webp" type="image/*"/></item><item><title>超好用的錄製游標跟隨工具！！</title><link>https://tommypan.dev/posts/obs-zoom-to-mouse/</link><pubDate>Mon, 23 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/obs-zoom-to-mouse/</guid><description>&lt;h1 id="超好用的錄製游標跟隨工具">超好用的錄製游標跟隨工具！！&lt;/h1>
&lt;p>最近在苦惱要用什麽錄製工具來彰顯影片的重點，然後又要是免費的，就發現了OBS的開源脚本 OBS Zoom-to-Mouse！&lt;/p>
&lt;div class="link-preview-card">
&lt;a href="https://obsproject.com/forum/resources/zoom-to-mouse.1823/" target="_blank" rel="noopener noreferrer" class="link-preview-link">
&lt;div class="link-preview-content">
&lt;div class="link-preview-text">
&lt;div class="link-preview-title">Zoom to mouse | OBS Forums&lt;/div>
&lt;div class="link-preview-description">A LUA script for OBS Studio to zoom on the mouse cursor. Great for tutorials or presentations. This script allows you to zoom in on your mouse cursor during recordings or live streams.&lt;/div>
&lt;div class="link-preview-metadata">
&lt;div class="link-preview-domain">obsproject.com&lt;/div>
&lt;div class="link-preview-external-icon">
&lt;svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
&lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
&lt;/svg>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/a>
&lt;/div>
&lt;style>
.link-preview-card {
margin: 2rem 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
background: white;
}
.link-preview-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border-color: #007acc;
transform: translateY(-2px);
}
.link-preview-link {
display: block;
text-decoration: none;
color: inherit;
}
.link-preview-content {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: 1.5rem;
align-items: center;
}
.link-preview-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.link-preview-title {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.link-preview-card:hover .link-preview-title {
color: #007acc;
}
.link-preview-description {
font-size: 0.9rem;
color: #6b7280;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.link-preview-metadata {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: #9ca3af;
}
.link-preview-domain {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.link-preview-external-icon {
width: 14px;
height: 14px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.link-preview-card:hover .link-preview-external-icon {
opacity: 1;
}
.link-preview-image {
width: 120px;
height: 80px;
border-radius: 8px;
overflow: hidden;
background: #f3f4f6;
flex-shrink: 0;
}
.link-preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.link-preview-card:hover .link-preview-image img {
transform: scale(1.05);
}
.link-preview-content:not(.has-image) {
grid-template-columns: 1fr;
}
@media (max-width: 768px) {
.link-preview-content {
grid-template-columns: 1fr;
gap: 1rem;
}
.link-preview-image {
width: 100%;
height: 120px;
order: -1;
}
.link-preview-title {
font-size: 1rem;
}
.link-preview-description {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.link-preview-card {
margin: 1.5rem -1rem;
border-radius: 8px;
}
.link-preview-content {
padding: 1rem;
}
.link-preview-image {
height: 100px;
}
}
@media (prefers-color-scheme: dark) {
.link-preview-card {
background: #1a1a1a;
border-color: #374151;
}
.link-preview-title {
color: #ffffff;
}
.link-preview-card:hover .link-preview-title {
color: #60a5fa;
}
.link-preview-description {
color: #d1d5db;
}
.link-preview-metadata {
color: #9ca3af;
}
}
.link-preview-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #007acc, #0056b3);
opacity: 0;
transition: opacity 0.3s ease;
}
.link-preview-card {
position: relative;
}
.link-preview-card:hover::before {
opacity: 1;
}
[data-theme="dark"] .link-preview-card {
background: #1a1a1a !important;
border-color: #374151 !important;
}
[data-theme="dark"] .link-preview-title {
color: #ffffff !important;
}
&lt;/style>
&lt;h2 id="obs-zoom-to-mouse-腳本簡介">OBS Zoom-to-Mouse 腳本簡介&lt;/h2>
&lt;blockquote>
&lt;p>OBS Zoom-to-Mouse 是一支由社群開發的 Lua 腳本，可讓 OBS Studio 在錄影或直播時，對指定的「顯示擷取 (Display Capture)」來源進行滑鼠位置導向的即時縮放與平移。
適合在教學、程式碼示範或軟體導覽中，快速聚焦游標附近的細節。&lt;/p></description><media:content url="https://tommypan.dev/images/obs-zoom-to-mouse/OBSLua1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/obs-zoom-to-mouse/OBSLua1.webp" type="image/*"/></item><item><title>了解MCP能力以及部署到Anaconda</title><link>https://tommypan.dev/posts/understanding-mcp-capabilities/</link><pubDate>Sun, 22 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/understanding-mcp-capabilities/</guid><description>&lt;img src="https://tommypan.dev/images/MCP-CH4/1.webp" alt="MCP 能力" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;p>MCP 主要有下列四個功能類型，分別對應著不同的使用情景&lt;/p>
&lt;img src="https://tommypan.dev/images/MCP-CH4/2.webp" alt="MCP 各種能力" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h2 id="工具tools">工具（Tools）&lt;/h2>
&lt;p>工具是AI模型可以通過MCP協議調用的可執行函數或行動。&lt;/p></description><media:content url="https://tommypan.dev/images/MCP-CH4/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/MCP-CH4/1.webp" type="image/*"/></item><item><title>MCP 通信協議</title><link>https://tommypan.dev/posts/mcp-protocol/</link><pubDate>Sat, 21 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/mcp-protocol/</guid><description>&lt;h1 id="mcp-通信協議">MCP 通信協議&lt;/h1>
&lt;p>MCP 定義了一套標準化的通信協議，使客戶端和服務器能夠以一致、可預測的方式交換資訊。這種標準化對於整個社區的互操作性至關重要。&lt;/p>
&lt;hr>
&lt;h2 id="json-rpc基礎架構">JSON-RPC：基礎架構&lt;/h2>
&lt;blockquote>
&lt;p>MCP 的核心使用 JSON-RPC 2.0 作為客戶端和服務器之間所有通信的消息格式。JSON-RPC 是一種輕量級的遠程過程調用協議，以 JSON 編碼。&lt;/p>
&lt;/blockquote>
&lt;h2 id="json-rpc-特點">JSON-RPC 特點&lt;/h2>
&lt;ul>
&lt;li>📜 人類可讀性強，易於調試&lt;/li>
&lt;li>🌍 語言無關性，支援在任何編程環境中實現&lt;/li>
&lt;li>🔒 成熟穩定，具有清晰的規範和廣泛的採用&lt;/li>
&lt;/ul>
&lt;h2 id="三種消息類型">三種消息類型&lt;/h2>
&lt;p>MCP 使用三種基本消息類型進行通信：
&lt;img src="https://tommypan.dev/images/MCP-CH3/2.webp" alt="MCP 通信" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style> &lt;/p>
&lt;h3 id="1請求requests">1.請求（Requests）&lt;/h3>
&lt;p>從客戶端發送到服務器以啟動操作。請求消息包括唯一標識符、要調用的方法名稱和方法的參數（如果有）。&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-JSON" data-lang="JSON">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;jsonrpc&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;2.0&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;id&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="mi">1&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;method&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;tools/call&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;params&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;name&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;weather&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;arguments&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;location&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;San Francisco&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h3 id="2響應responses">2.響應（Responses）&lt;/h3>
&lt;p>從服務器發送到客戶端以回覆請求。響應消息包括與相應請求相同的 id 和 result（成功時）或 error（失敗時）。&lt;/p></description><media:content url="https://tommypan.dev/images/MCP-CH3/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/MCP-CH3/1.webp" type="image/*"/></item><item><title>MCP 架構組件</title><link>https://tommypan.dev/posts/mcp-component/</link><pubDate>Fri, 20 Jun 2025 10:00:00 +0800</pubDate><guid>https://tommypan.dev/posts/mcp-component/</guid><description>&lt;img src="https://tommypan.dev/images/MCP-CH2/1.webp" alt="MCP 架構組件" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h2 id="客戶端-服務器架構">客戶端-服務器架構&lt;/h2>
&lt;blockquote>
&lt;p>Model Context Protocol (MCP) 建立在客戶端-服務器架構上，該架構支援 AI 模型與外部系統之間的結構化通信。&lt;/p>
&lt;/blockquote>
&lt;h3 id="三大核心組件">三大核心組件&lt;/h3>
&lt;p>MCP 架構由三個主要組件組成，每個組件都有明確定義的角色和責任：&lt;/p>
&lt;img src="https://tommypan.dev/images/MCP-CH2/2.webp" alt="MCP 三大核心組件" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h4 id="1-主機-host">1. 主機 (Host)&lt;/h4>
&lt;p>使用者直接使用的 AI 應用程式，如 ChatGPT 或 Cursor。負責處理使用者請求、介面呈現和整體協調。&lt;/p></description><media:content url="https://tommypan.dev/images/MCP-CH2/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/MCP-CH2/1.webp" type="image/*"/></item><item><title>🎯 Model Context Protocol (MCP) 基礎概念</title><link>https://tommypan.dev/posts/mcp-fundamental/</link><pubDate>Tue, 17 Jun 2025 14:30:00 +0800</pubDate><guid>https://tommypan.dev/posts/mcp-fundamental/</guid><description>&lt;img src="https://tommypan.dev/images/MCP-CH1/1.webp" alt="MCP 基礎概念" loading="lazy">
&lt;style>
.image-container {
margin: 2rem 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.image-caption {
font-size: 0.9rem;
color: #6b7280;
margin-top: 0.5rem;
font-style: italic;
}
&lt;/style>
&lt;h2 id="爲什麽不能單靠llm來解決事情">爲什麽不能單靠LLM來解決事情&lt;/h2>
&lt;p>雖然大型語言模型（LLM）能憑訓練語料生成近似人類的回答，但它若缺乏對外部世界的即時存取，就難以讀取企業專屬資料或主動執行工具操作。&lt;/p>
&lt;h3 id="-mcp-概述ai-應用程式的-usb-c">📋 MCP 概述：AI 應用程式的 USB-C&lt;/h3>
&lt;p>Model Context Protocol (MCP) 正在重新定義 AI 應用程式與外部世界的互動方式。作為由 Anthropic 在 2024 年底推出的開放標準，MCP 解決了長期困擾 AI 開發者的整合複雜性問題，為整個生態系統帶來了前所未有的標準化和互操作性。&lt;/p>
&lt;h3 id="-什麼是-model-context-protocol">🎯 什麼是 Model Context Protocol？&lt;/h3>
&lt;p>Model Context Protocol 是一個開放的通信協議，專門設計用於標準化 AI 模型與外部數據源、工具和服務之間的交互。該協議建立在 JSON-RPC 2.0 基礎之上，提供了一個輕量級、可擴展的框架，使 AI 應用程式能夠安全、高效地存取外部資源。&lt;/p></description><media:content url="https://tommypan.dev/images/MCP-CH1/1.webp" type="image/*"/><enclosure url="https://tommypan.dev/images/MCP-CH1/1.webp" type="image/*"/></item><item><title>取消訂閱 - Tommy Pan</title><link>https://tommypan.dev/unsubscribe/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://tommypan.dev/unsubscribe/</guid><description/></item><item><title>歡迎訂閱 - Tommy Pan</title><link>https://tommypan.dev/welcome/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://tommypan.dev/welcome/</guid><description/></item><item><title>訂閱結果 - Tommy Pan</title><link>https://tommypan.dev/respound/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://tommypan.dev/respound/</guid><description/></item><item><title>關於我 - Tommy Pan (潘東瑋)</title><link>https://tommypan.dev/about/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://tommypan.dev/about/</guid><description/></item></channel></rss>