在 Zeabur 使用 n8n 開發 LINE Bot：新手與開發者的真實體驗​

這篇部落格將分享我在 Zeabur 使用 n8n 打造 LINE 聊天機器人的經驗，作為台中 AI 小聚假日場的第一位分享者，很榮幸能拋磚引玉與大家討論 Low Code 工具的實戰心得。

為什麼選擇 Zeabur 與 n8n？​

Zeabur 作為一個部署平台，擁有低門檻且豐富的樣板資源，整個部署流程可以用「絲滑」來形容，非常適合新手快速上手。但當實際開始串接 n8n 後，我發現情況可能稍有不同。

Zeabur 對於初學者來說非常友善，不論是部署速度還是樣板的多樣性，都能顯著降低技術門檻，讓沒有基礎的使用者也能快速啟動專案。

n8n 的真實體驗​

n8n 作為 Low Code 工具，雖然降低了不少開發門檻，但若你原本就習慣程式設計，反而可能需要額外時間熟悉各種節點操作與邏輯，這點可能會有些挫折。不過，對於有 API 串接經驗的人來說，n8n 仍然是個相對容易上手的強大工具。

Low Code 工具可以透過圖形控制拖拉等方式串接工作流程，使用者無須複雜的程式碼即可像積木般串接各個節點，達到方便彈性的優勢。

尤其推薦 5x 紅寶石 n8n 範本（搜尋 5x 即可找到），內建的登入介面能省下不少初始設置時間。這種內建登入系統能讓新手更快地跳過繁瑣的設定步驟，專注於功能實現。

用 n8n 打造彈性的 LINE Bot​

在實際串接 LINE Bot 的過程中，我一開始直接使用 Webhook 節點回傳 Flex Message，但很快遇到了卡片數量彈性不足的問題。後來透過 AI 模型產生結構化 JSON，再透過 Function 節點處理，成功解決了動態調整訊息卡片數量的限制。 GitHub - willismax/n8n-templates: 自己設定可以分享的n8n模板

透過這種結構化的方式，Flex Message 不再受限於固定格式，訊息卡片可以依據需求自由增減，更能滿足用戶互動多元化的需求。

RAG 增強生成檢索與 Supabase 搭配​

為了進一步增強 AI 的效能，我也嘗試在 n8n 中建構了增強生成檢索（RAG）系統，並使用 Supabase 儲存文字與向量混合資料。

Supabase 的預設資料庫結構十分便捷，不過成本稍高，特別要注意 Kong 元件預設記憶體高達 700MB，經過優化可以降到 100MB 左右。

此外，Supabase 雖然功能強大，但成本效益需要特別留意，尤其在專案初期若資源有限，更需謹慎評估使用方式與頻率。

提醒大家一點： 建議不要將 Supabase 與 n8n 部署於同一個 Zeabur 專案內，因為底層都是 PostgreSQL 資料庫，可能會發生意想不到的衝突，創辦人戲稱為「薛丁格的資料庫」。

實際應用建議與經驗總結​

1. 對於沒有程式基礎的使用者，建議先熟悉基本 API 串接技巧，有助於加速 n8n 的使用與應用。
2. 透過 AI 模型輔助設計動態訊息結構，能有效解決 n8n 節點固定格式的問題。
3. 持續監控與優化資源使用狀況，特別是 Supabase 等耗資源服務，才能更有效地控制專案成本。

以自己的經驗而言，Zeabur 與 n8n 的結合確實能為自動化流程提供便捷快速的解決方案，但實務操作中還是需要特別留意技術細節及資源管理，才能避免不必要的問題。最終，親自動手實踐才是掌握這些工具最好的方式。

希望今天的分享能給大家帶來一些啟發，也感謝 AI 小聚能給予我這個破圈的機會，期待未來更多的交流與學習！

簡介​

Whisper 是一個高效能的聲音轉文字工具，由 Const-me 開發，基於 OpenAI 的 Whisper 自動語音識別（ASR）模型。這個工具主要是針對 Windows 平台開發，提供了一個高效且易於使用的介面來處理語音識別任務，重點是可以離線使用、速度快，專案網址為 https://github.com/Const-me/Whisper ，以下介紹如何安裝與使用。

快速開始指南​

1. 下載和安裝：從 GitHub 存儲庫的“Releases”部分下載 WhisperDesktop.zip，解壓縮，並運行 WhisperDesktop.exe。

2. 選擇模型：解壓縮啟動主程式(一個小花圖案)，系統會提示您下載一個模型。建議下載 ggml-medium.bin（大小為1.42GB），因為這是作者最常用於測試的模型。

3. 轉寫音頻文件：接下來的介面允許您選擇要轉寫的音頻文件。 中文可能是繁體或簡體。WebVTT subtitles檔案可以上傳至Youtube影片字幕(有時間軸)，視需要選用。

7. 即時轉譯：此外，還有一個介面可以捕獲並轉寫或翻譯來自麥克風的即時音訊。

主要特點​

• 廣泛的兼容性：基於 DirectCompute 技術，支持各種供應商的 GPU。
• 效能優化：相較於 OpenAI 的實現，經過 C++ 編譯後的 Whisper 在轉寫速度上有明顯的提升。
• 多格式音頻支持：支持大多數音頻和視訊格式，以及大部分在 Windows 上工作的音頻捕獲設備。
• 低內存使用：相比於其他方案，使用的記憶體更少。

系統要求​

• 平台支持：僅支持64位的 Windows 系統。理論上應該在 Windows 8.1 或更新的版本上運行，但開發者僅在 Windows 10 上進行了測試。
• 硬體要求：需要一個支持 Direct3D 11.0 的 GPU，以及支持 AVX1 和 F16C 的 CPU。

結語​

這個開源專案速度快、離線可用，而且對於隱私資料而言相對安全，可以幫助完成會議紀錄等任務，即便有錯誤也瑕不掩瑜，分享給有需要的各位。

介紹​

在這篇文章中，我們將探討如何使用 GitHub Codespace 快速有效地建立和部署 LINE Bot。GitHub Codespace 提供了一個雲端開發環境，使得開發人員可以在任何地方進行開發和部署。這種方式的好處是不需要本地環境配置，且環境變數的設置增加了項目的安全性。

步驟一：設置 GitHub Codespace​

首先，你需要在 GitHub 上啟用 Codespace 並克隆你的專案。

1. 登入你的 GitHub 帳號。
2. 找到你的專案倉庫，點擊 "Code" 按鈕，選擇 "Open with Codespaces"。
3. 選擇 "New codespace" 來建立一個新的開發環境。

步驟二：設置環境變數​

在 Codespace 中設置你的 LINE Bot 的環境變數：

1. 創建一個 .env 檔案。

2. 加入以下環境變數：

   LINE_CHANNEL_SECRET=你的channel_secret
   LINE_CHANNEL_ACCESS_TOKEN=你的access_token 
   

3. 在這個示範專案，可以將MediaSystem-Python-Course\06.Line-bot-fly-flask\的config-templete.py另存為config.py，也就是環境變數儲存在config.py的檔案裡，這是一個簡易用法不建議正式使用，使用環境變數對機密資訊才有較佳的保護。

步驟三：安裝依賴​

在 Codespace 的終端機運行以下命令安裝所需依賴：

pip install -r requirements.txt

步驟四：編輯程式碼​

使用 GitHub Copilot 來協助編寫和優化程式碼。例如，以下是一個簡單的 Flask 應用來回應 LINE Bot 的訊息：

from flask import Flask, request, abort
from linebot import LineBotApi, WebhookHandler
from linebot.exceptions import InvalidSignatureError
from linebot.models import MessageEvent, TextMessage, TextSendMessage

app = Flask(__name__)

line_bot_api = LineBotApi('YOUR_CHANNEL_ACCESS_TOKEN')
handler = WebhookHandler('YOUR_CHANNEL_SECRET')

@app.route("/callback", methods=['POST'])
def callback():
    signature = request.headers['X-Line-Signature']
    body = request.get_data(as_text=True)
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)
    return 'OK'

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    line_bot_api.reply_message(
        event.reply_token, TextSendMessage(text=event.message.text))

if __name__ == "__main__":
    app.run()` 

步驟五：測試與部署​

啟動你的 Flask 應用並進行測試。你不需要使用 ngrok 來建立 TLS 認證。

1. 在 Codespace 的終端機運行你的 Flask 應用。
2. 使用 LINE Bot 進行測試，確保一切運行正常。

結語​

使用 GitHub Codespace 來建立和部署 LINE Bot 是一個高效且安全的方法。這種方式不僅節省了設置本地開發環境的時間，還提供了一個穩定和安全的開發平台。希望這篇文章能夠幫助你順利完成 LINE Bot 的開發和部署。

老師們現在不僅對教學充滿熱情，也愈來愈善於運用科技工具，如LINE官方帳號，來與學生和家長保持緊密的溝通。這些努力無疑是朝著以下兩大目標邁進：

1. 激發學生的好奇心：鼓勵學生主動提問，並引導他們思考解決問題的方法。
2. 個別化教學：深入了解每位學生的學習進度和思維方式，以因材施教。

🤖 專案介紹​

這個專案的核心目的是要讓老師們能在已有的LINE官方帳號上，快速加入一個AI助教—使用ChatGPT技術。這樣一來，AI助教能夠第一時間回應學生的問題，如果遇到AI不能解決的問題，它還會建議學生直接聯繫老師。這讓老師有更多的時間和空間來專注於其他重要的教學任務。

🛠️ 如何開始？​

這個專案極力降低相關的技術門檻。實際上，在幾乎不需要寫任何程式碼的情況下，老師就能設置起這個AI助教服務。你只需完成以下幾個簡單的步驟：

1. 註冊本服務
2. 在LINE官方帳號後台進行相應設定
3. 啟用ChatGPT作為你的AI助教

完成以上步驟後，你就能讓ChatGPT開始擔任你的AI助教，預先回答學生的問題。

👉 歡迎各位老師運用，打造更智慧、更高效、教學相長的教學環境！

📚 在開始之前，你需要了解的​

在你開始使用這個專案之前，有一些基礎的技術和費用信息你需要知道。

技術環境​

• 涉及的技術和環境如下：
  • 程式語言: Python
  • 伺服器後端框架: Flask
  • FaaS雲端服務: Vercel
  • AI對話功能: OpenAI API (ChatGPT-3.5-tubo)
  • 聊天環境: LINE (LINE Message API)

花費預估​

• Vercel

  • Hobby方案允許你免費建立最多3個專案。
  • 注意：如果伺服器處理時間超過10秒，將會被判定為Time Out。
  • Vercel 費用詳情

• OpenAI API

  • 初次註冊有免費額度，API使用需綁信用卡。
  • 本專案預設使用的是2023/11釋出的 GPT-4-1106-preview。
  • OpenAI 費用詳情
  • 

• LINE 主動訊息

  • 額度內免費，目前是200則訊息（2023/9月前為500則）。
  • 由使用者提問的回覆（Reply）免費。
  • 老師主動發送的訊息（Push）有200則限制。
  • LINE 費用詳情
  • 
  • 

  提醒您: 所有的費用和限制可能會隨著各個服務供應商的政策改變而變動，建議定期查看官方網站以獲取最新資訊。

如何建立自己的 LINE AI助教？​

這份指南將引領您從LINE 官方帳號開始，不同於開發者通常從 LINE Developers 開始。不過，不管從哪裡出發，最終目標相同：建立一個集成 ChatGPT 的 LINE 官方帳號。

🌟 步驟1：初始化 LINE 官方帳號 🌟​

首先，我們需要建立一個基本的、無AI功能的 LINE 官方帳號。學生們可以即刻加入這個帳號。這個帳號初期僅支持手動聊天，AI 功能將在後續逐步加入。

1. 前往 LINE 官方帳號管理頁面

2. 填寫必要資訊：這些資訊也會是學生看到的名稱。

3. 選擇「稍後認證官方帳號」：這個認證過程不會影響本專案。

4. （選擇性）建立圖文選單：利用圖文選單可提供班級公告、相片集等。

   • 主頁 > 圖文選單 > 參考說明

5. 啟用 Webhook 🔗

   • Webhook 是一個可用程式處理訊息的通道。
   • 通過 Webhook，我們將使用 Vercel 平台、Python Flask 框架和 OpenAI API。

🌟 步驟2：註冊必要的平台並獲取 API Token​

1. 註冊必要平台：包括 GitHub、Vercel、OpenAI API、LINE Developers。
2. 獲取 OpenAI API Token：保存好這個 Token，它是一次性的。

🌟 步驟3：設置 LINE Developer Channel 及獲取 Secret, Token 🌟​

3.1 獲取 Channel Secret 🔒​

• 從 LINE 官方帳號或 LINE Developer Channel 都可獲取。

3.2 獲取 Channel Access Token 🔑​

• 在 LINE Developer Channel 下生成。

🌟 步驟4：Fork GitHub 專案 🌟​

• Fork 這個專案至您自己的 GitHub 儲存庫。

🌟 步驟5：部署至 Vercel 🌟​

1. 建立 Vercel 專案
2. 連接 GitHub 和選擇專案
3. 設定環境變數並部署

• 您需要設定的環境變數為OPENAI_API_KEY、LINE_CHANNEL_ACCESS_TOKEN及LINE_CHANNEL_SECRET，在這裡的環境變數能受到較佳的保護，至少比放在程式碼裡安全許多。

  

4. 修正支援的Nodejs版本

• 如果遇到Python安裝版本問題，依據官方文件，Vercel預設的Node.js版本為20.x，不支援Python，請在專案的設定>一般的選項裡，將Node.js改選為18.x版本。

• 修改後請選擇部署，或到專案的佈署歷程中選擇再次部署，就會改用Node.js 18.x版再跑一次。

🎉 完成！ 🎉​

恭喜您，現在您已經成功建立了自己的 AI 助教！現在可以透過 LINE 官方帳號進行測試。

🔧 進階設定：打造個性化的AI助手​

• 若要讓AI助手更符合你的需求和風格，OpenAI API提供了一個彈性的方式讓你自行設定AI的角色。具體來說，你只需要在對話設定中添加 messages: [{ role: "system", content: "你的AI助手人設" }] 即可。
• 進行這項設定只需前往api/prompt.py並在AI_GUIDELINES後修改提示文字即可。不過，因為Vercel的免費版有10秒的運行時限制，過長的提示可能會導致Time Out，因此建議不要設置過於複雜的指引。
• 本專案經過精心測試後，已經內建一組最佳實踐的AI_GUIDELINES，但你也可以隨心所欲地進行調整：

  AI_GUIDELINES = '你是一個AI助教，專門使用蘇格拉底教學法來回答學生的問題，如果有需要，會建議學生與老師進一步確認。'
  
• 修改方式也非常簡單，只需登入你的GitHub帳號，找到該專案的api/prompt.py文件，點擊右側的鋼筆圖示✏️即可進行線上編輯。
• 完成後，選擇“Commit Changes”並填入適當的描述。

🚀 專案成果​

• 出色的問答回應: 這個AI助手自2023年11月7日OpenAI大幅降低費率後，採用GPT 4模型，更能通順的、即時地回應學生的問題。

• 問題過濾: 對於需要更深層次討論的問題，AI助手會提供適當的處理建議，協助老師過濾和分類問題，同時也啟發老師改進教學。

• 引導學生思考: 透過蘇格拉底教學法，AI助手不僅回答問題，還能引導學生學會如何提問和解決問題。

  同學A 老師我想要問BMI的python程式怎麼寫
  ----
  AI助教  嗨！關於BMI的Python程式，我可以幫你一起思考。首先，你知道BMI是什麼嗎？
  ----
  同學A BMI=體重/身高平方
  ----
  AI助教  沒錯！BMI是體重除以身高的平方。那麼，你想要寫一個計算BMI的Python程式對吧？你已經有身高和體重的數值了嗎？
  ----
  同學A 70/(1.73**2)
  ----
  AI助教  沒錯！你可以使用這個公式來計算BMI。現在我們可以開始寫一個Python程式來計算BMI。你想要將身高和體重作為變數輸入嗎？
  ----
  同學A 想
  ----
  AI助教  好的！我們可以寫一個簡單的Python函數來計算BMI。以下是一個範例程式碼：
  
      ```python
      def calculate_bmi(weight, height):
      bmi = weight / (height ** 2)
      return bmi
  
      weight = float(input("請輸入您的體重（公斤）："))
      height = float(input("請輸入您的身高（公尺）："))
  
      bmi = calculate_bmi(weight, height)
      print("您的BMI為：", bmi)
      ```
  
  這個程式會要求使用者輸入體重和身高，然後使用`calculate_bmi`函數計算BMI並輸出結果。請注意，身高的單位應該是公尺，體重的單位應該是公斤。
  ----
  同學A 請幫我也寫出測試碼，之後會用pytest測試
  ----
  AI助教  當然！我們可以寫一些測試碼來驗證我們的BMI計算函數是否正確。以下是一個範例的測試碼：
  
      ```python
      import pytest
  
      def calculate_bmi(weight, height):
      bmi = weight / (height ** 2)
      return bmi
  
      def test_calculate_bmi():
      assert calculate_bmi(70, 1.73) == pytest.approx(23.39, 0.01)
      assert calculate_bmi(80, 1.65) == pytest.approx(29.38, 0.01)
      assert calculate_bmi(60, 1.80) == pytest.approx(18.52, 0.01)
  
      if __name__ == "__main__":
      pytest.main()
      ```
  
  這個測試碼使用了pytest套件來執行測試。我們定義了一個`test_calculate_bmi`函數，其中包含了幾個斷言語句，用來驗證`calculate_bmi`函數的輸出是否符合預期。每個斷言語句都使用了`pytest.approx`函數來比較浮點數的近似值，並指定了一個容忍誤差範圍。
  
  你可以將這個測試碼保存為一個.py檔案，然後使用pytest運行測試。如果所有的測試通過，則表示你的BMI計算函數正確無誤。
  ----
  同學A 謝謝老師，我的超人
  ----
  AI助教  不客氣！如果你有任何其他問題，隨時都可以問我。祝你一切順利！
  

  

專案成果​

1. 出色的回應學生問題: 這個功能不僅可以即時解答學生的問題，還可以減輕老師的負擔。
2. 過濾問題: 能過濾並指導學生如何更有效地提問，是一個對教師非常有幫助的功能。
3. 引導學生思考: 這是最讓人印象深刻的部分，因為不僅解答了問題，還教會了學生如何解決問題。

這個專案不僅具有高度的實用性，也很有教育意義。它不只是一個問答工具，更是一個能夠協助教學和學習的平台。

參考資料​

• GPT-3 API 官方文件
• Vercel 官方文件
• GitHub 如何編輯文件
• 本專案GitHub Repo，Forked & Modified from howarder3

🐍 Python 是一種非常流行和強大的程式語言，它有許多優秀的套件可以幫助我們完成各種任務，例如資料分析、機器學習、網頁開發等。然而，如果我們同時在不同的專案中使用 Python，我們可能會遇到一些問題，例如：

• 不同的專案可能需要不同的 Python 版本或套件版本，這可能會造成版本衝突和相依性問題。
• 如果我們在全域環境中安裝或移除套件，可能會影響其他專案的運作。
• 如果我們想要部署或分享我們的專案，我們需要記錄和安裝所有需要的套件和版本，這可能會很麻煩和耗時。

為了解決這些問題，我們可以使用虛擬環境管理工具來創建和管理不同的 Python 環境。虛擬環境是一個隔離的 Python 環境，它可以讓我們在不同的專案中使用不同的 Python 版本和套件，而不會互相干擾。這樣，我們就可以更方便和安全地開發和部署我們的 Python 專案。

目前，有許多虛擬環境管理工具可以選擇，例如 virtualenv, conda, pyenv 等。在這篇文章中，我將重點介紹 pipenv 和 venv 這兩種工具，並且比較它們的優缺點。

pipenv​

• pipenv 是目前 Python 官方推薦的套件管理工具，它集成了 pip 和 virtualenv 的功能，並且改進了它們的一些缺陷 。
• pip 使用 Pipfile 和 Pipfile.lock 來記錄套件的資訊，而不是使用 requirements.txt。
  • Pipfile.lock 包含了套件的Hash值，可以確保安裝的套件是一致和安全的 。
  • pipenv 可以自動產生和更新 Pipfile 和 Pipfile.lock，不需要手動維護 。
• 可以區分開發和生產環境的套件，只需要在安裝時加上 --dev 參數即可 。
• 可並行（parallel）同步安裝套件，提升安裝速度。
• pipenv 可以透過 .env 自動載入不同環境變數。
• pipenv 的指令比較簡單和直觀，例如
  • pipenv install 如同 pip install
  • pipenv uninstall
  • pipenv shell 如同 source venv/bin/activate 進入虛擬環。
  • pipenv run 可以執行虛擬環境內容

venv​

• venv 是 Python 3.3 之後內建的虛擬環境模組，它可以創建一個隔離的 Python 環境，但是不包含任何套件管理功能。
• venv 使用 python -m venv {虛擬機命名} 來創建虛擬環境，然後使用 source venv/bin/activate 來啟動虛擬環境(Windows 以 venv/Scripts/activate 進入)。
• venv 需要配合 pip 和 requirements.txt 來管理套件，因為venv跟pip是兩回事，這可能會造成版本衝突和相依性問題。

比較 pipenv 和 venv 差異​

以下用表格比較 pipenv 和 venv 的差異，我用表格的方式來比較它們的特點：

從表格中，我們可以看出 pipenv 是一個更先進和完善的虛擬環境管理工具，它可以讓我們更方便和安全地開發 Python 專案。如果你想了解更多關於 pipenv 的資訊，但在基礎Python教學時，我更傾向以venv為主，因為你看到的網路專案大多還是venv + pip install -r requirements.txt 來示範的。可以參考以下的連結：

• Pipenv 官方文件
• Pipenv 更簡單、更快速的 Python 套件管理工具
• Pipenv vs Virtualenv vs Conda environment

感謝你閱讀這篇文章，如果你有任何問題或建議，歡迎在下方留言。Enjoy Python。再見！

如果你對如何將 LINE 聊天機器人與 HackMD 結合有興趣，這篇文章正是你需要的。這次，我們將使用 Render 這個雲端平台來部署我們的應用。

前置作業：準備你的 GitHub 倉庫​

1. Fork 專案：首先，請到這個 GitHub Repo 進行 fork，這樣你就有了一個屬於自己的副本。

   

Render 設定​

登入和選擇服務​

1. 登入 Render：前往 Render 的網站 並用 GitHub 帳號登入。

   

2. 選擇 Web 服務：在 Render 的 dashboard，選擇 "Web Service"。

   

設定部署參數​

1. 基本設定：填入應用的名稱和其他基本資訊。在這裡，我們選擇免費的方案。如果你的主程式檔名不是 app.py，記得修改 gunicorn 的指令。

   

2. 設定環境變數：在 .env 檔案中填入所有需要的環境變數。

   

3. 等待部署完成：設定完成後，Render 會自動進行部署。

   

需要的 API 金鑰和資訊​

HackMD API​

• 請參考 HackMD 的官方文件以獲得 API 金鑰。

OpenAI API​

1. 訪問 OpenAI API 官網。

2. 生成一個一次性的 API 金鑰。注意：一旦關閉視窗，這個金鑰將不再顯示。

   

LINE Message API 和 Imgur API​

• 請依照各自平台的文件申請 API 金鑰。

環境變數在 Python 中的使用​

你可以使用以下程式碼來讀取環境變數。

import os
api_key = os.environ.get('KEY')`

配置 LINE Webhook​

最後，回到 LINE Channel 設定中加入 webhook。

這樣你就完成了整個部署過程！如果你有任何問題或建議，歡迎在下方留言。祝學習愉快！

對於剛接觸人工智慧的學生來說，建立自己的聊天機器人可能聽起來有點遙不可及。不過，現在有越來越多的工具讓這個過程變得簡單。本篇文章會介紹如何使用 LM Studio 快速在筆電上實現大型語言模型（LLM）。

背景知識：大型語言模型與開源社群​

在開始之前，讓我們先簡單了解一下什麼是大型語言模型。簡單來說，它是一種能夠理解和生成人類語言的人工智慧模型。目前有很多開源的大型語言模型，像是 Meta 的 LLaMa 系列和 Hugging Face（簡稱 HF）的各種模型。

步驟 1：安裝 LM Studio 應用程式​

首先，請至 LM Studio 官網 下載適用於 Windows 或 Mac 的桌面應用程式。

步驟 2：選擇適合的模型​

安裝完畢後，打開 LM Studio。在首頁，你會看到最新或最熱門的模型資訊。使用搜尋框可以找到你需要的模型。例如，我搜尋 "Taiwan"，找到了一個名為 audreyt/Taiwan-LLaMa-v1.0-GGUF 的模型。

備註： 模型資訊通常會包含在 HF 的模型卡（Model Card）和相關的論文連結。

步驟 3：下載模型到本地​

選擇一個適合你硬體配置的模型進行下載。如果你的筆電不是高性能的，建議選擇小型的模型。

步驟 4：開始與聊天機器人對話​

下載完成後，在左側選擇聊天頁籤。選擇你剛才下載的模型，等待模型加載完成後，就可以開始與聊天機器人對話了。

結論與後續步驟​

建立自己的聊天機器人是一個不斷演進的過程。儘管 LM Studio 提供了一個相當方便的平台，但要達到商業應用水平，還需要進一步的微調和量化調教。如果你想要更進一步，可以考慮使用 OpenAI、Azure、Google 或 AWS 等平台的 API 進行模型的微調。

希望這篇文章能幫助你更輕鬆地入手聊天機器人的建立，祝你在人工智慧的旅程中一切順利！

如果有任何問題或需要進一步的說明，歡迎留言。

• Selenium 是一個自動化測試框架，專門用於測試 Web 應用程式。作為一位經常需要隨著套件更新來調整教學內容的講師。將針對最近升級至 4.x 版本的 Selenium 進行比較，以及如何解決版本更新的程式碼問題。

預期 Selenium 版本更新會遇到的狀況​

在過去，我預期會遇到以下幾種情況：

• 需要更新至新版的 webdriver。
• 程式參數更新，需要查看 log 以解決問題。

然而，升級至 Selenium 4.x 後，我發現了一些令人驚喜的改變。

1. webdriver管理更聰明了​

舊版流程​

在 Selenium 4.x 版本之前，安裝 Selenium 是一件相對繁瑣的事情。你需要：

1. 用 pip install 安裝 Selenium 主要套件。

   pip install selenium
   
2. 然後，你還需要手動下載與你的 Chrome 版本相對應的 WebDriver。
3. 解壓縮 WebDriver，然後將其放入指定目錄。

過渡版本- 需額外的 webdriver_manager​

• 在2023年之前的一段時間簡化了上述流程，透過pip install webdriver_manager直接安裝好對應的測試瀏覽器，不用找對應的瀏覽器與版本，但需要引入webdriver_manager套件。

  pip install webdriver_manager
  

• 然後，使用webdriver_manager的範例如下:

  from selenium import webdriver
  from webdriver_manager.chrome import ChromeDriverManager
  
  options = webdriver.ChromeOptions()
  # options.add_argument('--headless')
  
  wd = webdriver.Chrome(ChromeDriverManager().install(), options=options)
  wd.get("https://www.google.com")
  wd.save_screenshot("google_homepage.png")
  wd.quit()
  
  

新版流程​

• 現在，在 Selenium 4.x 版本，你只需執行一個指令即可：

  pip install selenium
  

• 這個改變意味著，你不再需要手動去管理 WebDriver，Selenium 會為你處理一切。

2. selenium.webdriver.Chrome()`參數簡化​

舊版用法​

• 在舊版中，初始化 Chrome WebDriver 的代碼通常會看起來像這樣：

  from selenium import webdriver
  
  options = webdriver.ChromeOptions()
  options.add_argument('--headless')
  
  wd = webdriver.Chrome('path/to/chromedriver', chrome_options=options)
  

新版用法​

• 在新版中，由於 WebDriver 已經被整合，你可以簡單地這樣做：

  from selenium import webdriver
  
  options = webdriver.ChromeOptions()
  options.add_argument('--headless')
  
  wd = webdriver.Chrome(options=options)
  

Selenium 搜尋 PTT 指定列表範例​

如你所見，新版省去了指定 chromedriver 路徑的需求，使得代碼更為簡潔，最後分享一個這學期調整的selenium範例:

from selenium import webdriver
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup


def make_webdriver() -> Chrome:
  options = create_options()
  driver = Chrome(options=options) #簡化參數
  return driver


def create_options() -> Options:
  options = Options()
  options.add_argument("--headless")
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument("--start-maximized")
  return options


def get_ptt_board_list(board) -> list:
  url = f"https://www.ptt.cc/bbs/{board}/index.html"
  wd = make_webdriver()
  wd.get(url=url)
  soup = BeautifulSoup(wd.page_source,"html.parser")
  links = soup.select('div.title > a')
  res = [{
      'title': link.get_text(),
      'href': f'https://www.ptt.cc{link.get("href")}'
  } for link in links if '公告' not in link.get_text() ]
  wd.quit()
  return res

if __name__ == '__main__':
  res = get_ptt_board_list('movie')
  print(res)

小結​

Selenium 4.x 版本帶來了許多便利性的提升，尤其是在 WebDriver 管理和參數簡化方面。這對於減少教學備課的負擔以及提高自動化測試的效率都有很大的幫助。

我個人非常推薦升級至這個版本，以便能夠利用這些新的特性和優化。

在這篇文章中，將探討如何使用Python的PlayWright模組來抓取巴哈姆特動漫瘋的彈幕數據。 目標如下:

• 認識PlayWright
• 如何安裝PlayWright。
• 如何利用PlayWright控制網頁行為。
• 如何改寫腳本，抓取、整理和儲存需要的數據。

什麼是PlayWright?​

PlayWright 是Microsoft推出的開源專案，是一個Python用戶端，讓我們能夠自動化Web瀏覽器的行為，包括Chrome, Firefox, 和Safari等主流瀏覽器。你可以使用它來進行網站測試、抓取資料，甚至製作自動化的網頁腳本。透過PlayWright，你能控制整個瀏覽過程，包括產生彈幕等動態內容。

如何安裝PlayWright​

安裝PlayWright相當簡單，只需要在你的命令列工具 (例如：終端機或Command Prompt) 輸入以下命令即可：

> pip install playwright

如何利用PlayWright控制網頁行為​

首先，我們需要啟動一個PlayWright的實例，並且以我們選定的瀏覽器來執行我們的程式。以下是一個以Chromium瀏覽器為例的程式碼，同理也可以使用webkit瀏覽器：

> python -m playwright codegen -b chromium

執行上述命令後，您將開啟一個Chromium瀏覽器並開始與其互動。你的每一個操作，都會自動生成對應的Python程式碼。

codegen命令包含一些可用的參數，例如：

• --target: 設定你的程式語言，如 python、JavaScript等。
• -o: 指定存放生成程式碼的檔案名稱。
• -b: 選擇你想要使用的瀏覽器，如 chromium、firefox或webkit。

以下是一個實際的例子，使用webkit瀏覽器抓取巴哈姆特動漫瘋網站並將程式碼儲存在damun.py文件中：

> python -m playwright codegen --target python -o damun.py -b webkit https://ani.gamer.com.tw/

此時的damun.py內容參考如下:

from playwright.sync_api import Playwright, sync_playwright
from bs4 import BeautifulSoup
import json
import sys
import time


def run(playwright: Playwright, sn) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    page.goto(f"https://ani.gamer.com.tw/animeVideo.php?sn={sn}")
    time.sleep(5)

    # screenshot
    page.screenshot(path='ani.jpg', full_page = True)
    
    ### 稍後加上網頁解析
    ### 稍後加上內容萃取
    ### 稍後加上資料儲存
    
    page.close()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright, sys.argv[1])

修改PlayWright腳本​

為了包含抓取後的解析及整理，可以在前面透過點選產製的damun.py腳本中，新增解析的程式

• 網頁解析: page內容為HTML，將其轉換成BeautifulSoup物件，方便後續操作。

  from bs4 import BeautifulSoup
  
  soup = BeautifulSoup(page.content(), 'lxml')
  

• 內容萃取: 這邊藏的一個很關鍵的做法，用For迴圈直接將結果設計為JSON like的Python Dictionary格式。

  • 每次回圈的過程一次性的將擷取對象整理好。

    # for-loops
    res = []
    k = {}
    for li in soup.select('.sub-list-li'):
        k['userid'] = li.select_one('.name > span').text.strip()
        k['text'] = li.select_one('.sub_content').text.strip()
        k['msg_time'] = li.select_one('b').text.strip()
        print(k)
        res.append(k)
    
  • 如果你熟悉列表推導式(list comprehension)，以下改寫更為直觀:

        res = [ {
            'userid': li.select_one('.name > span').text.strip(),
            'text' : li.select_one('.sub_content').text.strip(),
            'msg_time' : li.select_one('b').text.strip()
        } for li in soup.select('.sub-list-li')]
    

• 資料儲存: 將Dict樣式存成JSON格式，方便後續運用。

  import json
  
  with open(f'damun_{sn}.json', 'w') as f:
      json.dump(res, f)
  

• 最終的damun.py腳本內容:

from playwright.sync_api import Playwright, sync_playwright
from bs4 import BeautifulSoup
import json
import sys
import time


def run(playwright: Playwright, sn) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    page.goto(f"https://ani.gamer.com.tw/animeVideo.php?sn={sn}")
    time.sleep(5)

    # screenshot
    page.screenshot(path='ani.jpg', full_page = True)
    
    # 網頁解析
    soup = BeautifulSoup(page.content(), 'lxml')

    # 內容萃取(列表推導式)
    res = [ {
        'userid': li.select_one('.name > span').text.strip(),
        'text' : li.select_one('.sub_content').text.strip(),
        'msg_time' : li.select_one('b').text.strip()
    } for li in soup.select('.sub-list-li')]

    print(res)

    
    # 資料儲存(JSON檔)
    with open(f'damun_{sn}.json', 'w') as f:
        json.dump(res, f)

    page.close()

    # ---------------------
    context.close()
    browser.close()
    return res


with sync_playwright() as playwright:
    run(playwright, sys.argv[1])

執行playwright腳本​

接下來，執行我們生成的腳本，可以在命令列執行腳本。

33846為動畫的編號，可以更換成想要分析的動畫序號。

python damun.py 33846

然後，使用Python的ast模組將結果轉換為Python對象。以下是一個實際的例子：

# 此欄位內容於ipynb執行
res = ! python damun.py 33846
import ast
res = [ast.literal_eval(i) for i in res]
print(res)

將內容存為page.json​

有兩種方式可以將我們獲得的結果儲存為json格式。一種方式是使用linux的命令行將結果重定向到一個json檔案中。例如：

> python damun.py 33846 > page.json

另一種方式是直接在Python腳本中將結果儲存為json檔案。以下是一個實際的例子：

import json

file_name = 'damun_33846.json'

with open(file_name, 'r', encoding='utf-8') as f:
    my_data = json.loads(f.read())

    print(my_data) 

    print(type(my_data))

解析的結果為:

擷取完成!

重點精華​

• PlayWright可以輕鬆的將使用者操作流程紀錄為程式碼。
• PlayWright與Selenium最大的差異，不用刻意搜尋並安裝對應版本的模擬瀏覽器。
• 結合常用的Beautiful可以快速解析內容，我偏好用類似CSS Selec。
• 用列表推導式將爬梳的資料整理成字典，語法相當簡潔。
• 將結果儲存成JSON2檔案，方便後續運用

小結​

在上述的Python腳本中，首先定義了我們的檔案名稱。然後，我們使用Python的內建函數open讀取該檔案。最後，我們使用json模組的loads函數將讀取到的資料轉換為Python物件。

以上就是如何使用PlayWright抓取並分析巴哈姆特動漫瘋的彈幕數據的全過程。透過這個過程，我們不僅學習到如何使用PlayWright，如果有興趣，後續再介紹如何進一步分析數據，歡迎留言讓我知道。

用 "LINE Chat BOT"可以解決什麼問題​

• 隨手筆記的需求
• 從不同APP分享連結的蒐集去處
• 不用再經手別的生產力工具，直接歸一到最熟悉的HackMD

建立 "LINE Chat BOT" 的流程​

• 首先要申請 HackMD API 。
• 在 LINE Developers 創一個專屬 Channel，取得Token等資訊與訊息設定。
• 在 Fly.io 創立雲端服務、建立好開發連線環境。
• Fork 我的GitHub HackMD LINE bot on fly 程式碼，修改為您準備部屬在 Fly.io 的 LINE BOT 程式。
• 將您 Fly.io 的連結 https://[APP Name].fly.io/callback填入您LINE Channel 的 Webhook。
• 感動! 成功!。

LINE Chat BOT程式碼​

https://github.com/willismax/hackmd-line-bot-on-fly

"LINE Chat BOT" 功能需求​

• 標示@靈感為開頭的文字，將作為一個獨立的靈感筆記。

• 標示@TODO為開頭的文字，將寫入一個連續的的代辦清單。

• 無上述標示的文字，將寫入一個連續附加的在暫存筆記。也就是從別的文章分享的超連結都直接灌到此暫存筆記。

• 如果要整理筆記，用電腦編輯整理即可。

:::spoiler 部署教學文參考

如何建立 LINE bot​

• 在 LINE Developers 登入您的 LINE 帳號，建立 Provider 以及所屬 Channel， Channel 名稱就是您的 LINE bot 名稱，管理方式如同 LINE 官方帳號。

• 用程式控制的聊天機器人需要以下3個參數，請保管好勿外流。 在此範例程式中，需要將 Channel 查到的以下參數填入config.py檔案。

  CHANNEL_ACCESS_TOKEN = ''
  CHANNEL_SECRET = ''
  LINE_USER_ID = ''
  

在 Fly.io 創立與部署雲端服務​

先 Clone Fly.io 的 Python 示範專案。​

• 在本機電腦安裝git，您可以先完成以下示範範例後，再將程式碼改成LINE Chat BOT程式碼即可。

  git clone https://github.com/fly-apps/python-hellofly-flask
  

• 進入專案資料夾

  cd  .\python-hellofly-flask\
  

• 安裝該專案所需的外部套件

  python -m pip install -r requirements.txt
  

• [選用] 如果要在本機進行開發測試，可以設置環境變數FLASK_APP，目的是指定主程式的執行檔，對此專案而言主程式為hellofly.py，經指定後flask run指定就是跑主程式，而且要結合 Ngrok建立臨時通道，對您來說太複雜的話可以跳過，只是各種測試就必須等待部署後。

  //設置環境變數
  export FLASK_APP=hellofly.py   #linux
  set FLASK_APP=hellofly.py   #windows
  

  //日後啟動flask的指令
  flask run
  

  !! 如果用環境變數都跑不出來，退而求其次，在hellofly.py最後加入:

  if __name__ == '__main__':
      app.run(debug=True)
  

  啟動flask指令改為python hello.py，請注意，這不是flask現在建議的啟用方式，本方法只適用於本機測試。

使用fly ctl 指令工具完成部署​

上述範例程式碼測試無誤後，接續安裝 fly ctl 指令工具。Fly.io 最方便部署服務的方式是使用終端機指令工具flyctl，可以讓本機直接部署。

• 安裝flyctl
  PowerShell

  iwr https://fly.io/install.ps1 -useb | iex
  

  Mac

  brew install flyctl #MAC
  

  Linux

  curl -L https://fly.io/install.sh | sh #LINUX
  

• 用 flyctl 登入 fly.io

  flyctl auth login
  

• 啟動一個 fly App 專案，執行 flyctl launch

  flyctl launch
  

• 選擇伺服器區域，台灣鄰近的區域有香港、東京可選。

• 修改程式，這邊在範例專案中特別提醒，Procfile檔案為設定連線服務用，與您的主程式檔名務必相符，也就是原本為web: gunicorn server:app記得改成web: gunicorn hellofly:app，這原理跟部署在 Heroku 是一樣的。

  # file name: Procfile
  
  web: gunicorn hellofly:app  
                ^^^^^^^^記得確認為主程式
  

• 檢查完程式後，一鍵佈署。

  flyctl deploy
  

• 查看佈署，其中hostname就是網址了，可以用flyctl status確認狀態、用flyctl open開啟 APP、用flyctl logs確認有無 BUG。

  flyctl status    
  

  flyctl open
  

  flyctl logs
  

• 如果需要設定 secrets

  flyctl secrets set DATABASE_URL= ....
  

  取消 secrets

  flyctl secrets unset DATABASE_URL= ....
  

  列出 secrets list

  flyctl secrets list
  

LINE Chat BOT程式碼​

https://github.com/willismax/hackmd-line-bot-on-fly

• 可以對照您上述部署完成的python-hellofly-flask程式碼進行修改，

  • 填入對應的參數到config.py
  • 修改app.py
  • 修改requestments.txt

• 執行flyctl deploy部署。請注意，*.toml請用您自己的，該檔案是由 flyctl launch 產生，為了您的專案部屬所需的檔案，用範例檔會出錯唷。

• 也請記得補上 HackMD API token 與筆記ID相關資訊:

  HACKMD_API_TOKEN = ''
  TODO_NOTE_ID = '' #  paste your fixed TODO note id, len == 22
  TEMP_NOTE_ID = '' # paste your fixed TEMP note id, len == 22
  

• 上述有問題的話就耐心看flyctl logs，我常作的方式是開兩個終端機，一個執行操作、一個看 log 。

• 部署完成後，記得把您的 fly.io 專屬服務網址貼入 LINE Channel 的 Webhook ，網址應為 https://[APP Name].fly.io/callback ，特別是 */callback 記得填，並且設定開啟 Webhook。

• 恭喜您完成!

多元化的課程內容 📚🎥​

六角學院是台灣前端知名的線上教學服務平台，這次已非常少的售價開設了短期密集軟工體驗營，體驗的內容包含前端基礎、CSS、SCSS、切版任務、JS、Jquery、Ajax、Axios，在這次的體驗營中，我們在有限的時間內接觸了相當多的課程內容。這些線上影音很多是不同的直播、教學課程的集合。真的讓我感到既驚訝又欣喜！🎉

每日的切版與JS練習 🖥️🔬​

除了假日以外，每日我們都有關於切版、JS的兩種練習。最後，這些練習都會回到產出作業上，讓我們有機會將所學應用到實際操作中，真的是學以致用！💡📝

作業審視與助教回饋 📋🔍​

在產出作業的過程中，作業等級越高越完整。而這其中，最讓我感動的是有助教群細心審視我們的作業並提供回饋。這樣的機會真的非常難得，我們能夠從中學習到很多，進步也就在這一點一滴中實現。👍👏

交流討論與提問 🗣️💭​

最後，也很感謝能夠在課程提問區提出問題，並透過交流討論來解答疑惑，慢慢走也是會往前的😊🐢

總結來說，我真的很感謝六角學院提供這樣的體驗機會。從中我學習到很多，並且在學習的道路上也逐步累積。期待下一次的學習體驗！🎈🚀

為什麼會有這篇文章?​

• 近期工作與推動ESG高度相關，也記錄此時此刻的一些心得感想。
• 本篇文章內容由Bing協作。

從亞當斯密的"看不見的手"討論ESG

你有沒有聽過亞當斯密的「看不見的手」？這是一個經濟學的名詞，指的是市場機能能夠自動調節供需，讓每個人都能追求自己的利益，同時也促進社會的福祉。聽起來很神奇，但是這個「看不見的手」其實有一個隱藏的秘密，那就是它其實是一隻「ESG」的手！今天我想和大家聊聊亞當斯密的"看不見的手"和ESG之間的關係。😊

什麼是ESG？​

ESG是環境、社會和治理（Environmental, Social and Governance）的縮寫，它是一種評估企業對社會責任和可持續發展的影響的方法。ESG涵蓋了許多方面，例如減少碳排放、保護生物多樣性、改善勞工權益、反對貪腐和提高透明度等。🌎

近年來，ESG越來越受到投資者、消費者和政策制定者的重視，因為它不僅關係到企業的道德和聲譽，也關係到企業的長期競爭力和風險管理。許多研究表明，高ESG表現的企業往往能夠創造更高的股東價值、更低的資金成本、更強的創新能力和更高的員工忠誠度。💰

什麼是"看不見的手"？​

"看不見的手"是一個出現在經濟學之父亞當斯密的《國富論》和《道德情操論》中的一個詞彙，它指的是在自由市場中，每個人追求自己的利益，通過價格機制，最終會促進社會整體的福利，就像有一隻看不見的手在指導經濟活動一樣。👋

舉個例子，假設你想買一個蘋果，你會在市場上找到最便宜的蘋果賣家，而賣家則會根據供需關係設定一個合理的價格，這樣你們雙方都能得到最大的滿足。同時，這也會刺激其他蘋果生產者提高產量和品質，降低成本和價格，從而增加社會的總產出和消費。🍎

"看不見的手"和ESG有什麼關係？​

你可能會覺得"看不見的手"和ESG是相互對立的概念，因為前者強調市場自由和個人利益，後者強調社會責任和公共利益。但其實，它們之間並不是那麼簡單的對立關係，而是有著複雜而微妙的互動。😉

首先，亞當斯密在他的另一本著作《道德情操論》中，提出了一個重要的概念，那就是「同情心」（sympathy）。他認為人類是一種社會性的動物，具有與他人共感和同理的能力，這種能力讓我們能夠關心他人的利益和幸福，也讓我們能夠遵守道德規範和社會規則。這不就是ESG中的「社會」嗎？

你可能會問，那他怎麼沒有提到「愛心」（love）呢？因為他知道愛情是盲目的，而市場是明智的！（笑）

其次，亞當斯密在他的《國富論》中，也沒有忽視環境問題。他指出了農業對土地資源的消耗和浪費，並且主張應該通過稅收來抑制農業生產過剩和土地荒廢。他還提出了「公共工程」（public works）的概念，認為政府應該負責建設和維護基礎設施，如道路、橋樑、港口等，以促進交通和貿易，也以保護環境和公共安全。這不就是ESG中的「環境」嗎？

你可能會問，那他怎麼沒有提到「節約」（save）呢？因為他知道節約是美德，但消費才能帶動經濟！（笑）

最後，亞當斯密在他的《國富論》中，也強調了治理問題。他批判了當時英國政府對商業和貿易的過度干預和限制，例如重商主義政策、商業壟斷、關稅壁壘等。他主張政府應該放寬市場准入，保護私有財產權和契約自由，打擊貪污和腐敗，保障法治和司法公正。這不就是ESG中的「治理」嗎？

你可能會問，那他怎麼沒有提到「民主」（democracy）呢？因為他知道民主是好事，但市場才是王道！（笑）

結語​

所以你看，亞當斯密其實是一個ESG的先驅！他不僅提出了「看不見的手」這個偉大的經濟學思想，也提出了「ESG」這個偉大的企業社會責任思想！我們今天所看到的市場經濟和企業社會責任，都是他留給我們的寶貴遺產！。😊

感謝大家閱讀我的部落格文章，如果你有任何意見或建議，歡迎在下面留言或聯絡我。下次再見！👋 (本文笑點提供: Bing)

如果你是一個 Docusaurus 使用者，你可能已經知道如何使用 Github Pages 部署你的網誌。但是，手動更新並部署你的網誌非常耗時，而且容易出錯。為了解決這個問題，你可以使用 GitHub Actions 來自動生成和部署你的網誌，這樣你就可以專注於撰寫新的文章了。

什麼是 GitHub Actions？​

GitHub Actions 是一個自動化工具，可以幫助你自動執行各種任務，例如建立和測試你的應用程序，將你的應用程序部署到不同的環境中，或者自動發佈你的網誌文章。你可以使用 GitHub Actions 的預設工作流程，或者創建自己的自訂工作流程。

如何使用 GitHub Actions 自動部署 Docusaurus 網誌？​

下面是一個簡單的步驟，可以幫助你在 GitHub Actions 中自動生成和部署你的 Docusaurus 網誌。

1. 在你的 Docusaurus 存儲庫中，創建一個名為 .github/workflows/deploy.yml 的文件。

2. 在 deploy.yml 文件中添加以下內容：

   name: Deploy website
   on:
   push:
       branches:
       - main
   jobs:
   deploy:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v2
       - name: Install Node.js
       uses: actions/setup-node@v1
       with:
           node-version: '14.x'
       - name: Build and deploy
       uses: JamesIves/github-pages-deploy-action@4.1.3
       with:
           branch: gh-pages
           folder: build
           clean: true
   

   這個工作流程會在主分支上進行 push 時運行。它會在最新的 Ubuntu 環境中運行，安裝 Node.js，構建你的 Docusaurus 網誌，然後將它部署到 gh-pages 分支。

3. 在你的 Docusaurus 存儲庫中，建立一個名為 build 的文件夾。

4. 執行以下命令，生成你的 Docusaurus 網誌：

   npm run build` 
   

   這將在 build 文件夾中生成編譯後的靜態網頁。

5. 執行以下命令，將你的更改提交到存儲庫中：

   git add .
   git commit -m "Update website"
   git push
   

   這會觸發 GitHub Actions，自動生成和部署你的 Docusaurus 網誌。你可以在 GitHub Actions 的頁面上查看進度和結果。如果一切順利，你的網誌應該已經部署到 gh-pages 分支中。

6. 現在你可以在瀏覽器中訪問你的網誌，例如 https://yourusername.github.io/yourblog/。如果一切正常，你應該能夠看到你的網誌文章。

如何優化你的 Docusaurus 網誌的 SEO？​

現在你已經成功地使用 GitHub Actions 自動部署了你的 Docusaurus 網誌，接下來你可能想要優化你的網誌的 SEO，以便更好地吸引流量和讀者。以下是一些簡單的技巧，可以幫助你優化你的網誌的 SEO。

1. 使用關鍵字進行標題和內容的優化​

在你的網誌文章的標題和內容中使用關鍵字，以便搜索引擎能夠更好地理解你的內容，並將其排名更高。但是，不要過度使用關鍵字，否則你的內容可能會被搜索引擎視為垃圾郵件。關鍵字優化的訣竅是參考Google搜尋結果的相關搜尋，將相關搜尋的文章進一步整理為合適的內容，讓讀者能在這一篇文章就可以滿足需求。

2. 創建有價值的內容​

創建有價值的內容是吸引讀者和排名更高的關鍵。寫出具有深度和價值的內容，以便讀者和搜索引擎都能夠看到你的專業知識和價值，自己的洞見非常重要，讀者不會想只看到類似 ChatGPT 生成的大量文章。

3. 使用適當的標記和元數據​

使用適當的標記和元數據，例如標題標記、描述標記和關鍵字標記，以幫助搜索引擎更好地理解你的內容。同時，使用適當的元數據，例如 Open Graph 協議和 Twitter 卡片，以使你的內容在社交媒體上分享時更有吸引力。

4. 使用友好的 URL​

使用友好的 URL，以便讀者和搜索引擎更好地理解你的內容。使用有意義的字詞和短條目，避免使用難以理解的符號和數字。同時，使用靜態 URL，以便搜索引擎可以更輕鬆地索引你的網站。

5. 關注網站的速度和性能​

優化你的網站的速度和性能，以便更好地吸引流量和提高排名。使用快速的網站主機和優化的圖像，避免使用過多的 JavaScript 和 CSS，以減少網站的加載時間。同時，使用快取和網站緩存，以便減少服務器負載並提高網站的速度。

6. 建立高質量的內部和外部連結​

建立高質量的內部和外部連結，以幫助搜索引擎更好地理解你的內容並提高你的排名。使用有意義的錨文本和鏈接到相關的內容，同時建立高質量的外部鏈接，以提高你的網站的權威性和排名。

7. 監測和分析你的流量和排名​

監測和分析你的網站的流量和排名，以了解你的目標讀者是誰，以及他們如何找到你的內容。使用 Google Analytics 或其他分析工具來跟踪你的流量和排名，並根據這些數據調整你的 SEO 策略。

結論​

使用 GitHub Actions 自動部署你的 Docusaurus 網誌是一個簡單而有效的方式，可以幫助你更輕鬆地管理和更新你的網誌。同時，優化你的網誌的 SEO 是一個重要的步驟，可以幫助你吸引更多的流量和讀者，並提高你的排名。遵循上述的技巧和策略，你可以建立一個成功的網誌，吸引更多的讀者和流量，並在搜索引擎上排名更高。

您也想要自己用AI繪圖嗎?​

• 生成式AI ( AIGC ) 是2023年的顯學，開源的 AI 繪圖模型越來越多，在Civitai有非常多網友創作(需註冊，許多有年齡限制)，您也想自己嘗試嗎? 網路上已經有許多自行下載執行 Python 程式與模型，但就需要自備 GPU 顯卡。
• 有網友在此 GitHub 整理諸多 AIGC 模型，而且可以用 Colab 直接產圖， Colab 是個可以免費暫時執行 GPU 運算的虛擬機，可執行 Python 及 Linux指令，您唯一要付出的是等待時間，一起來製作香香的圖吧。

在這個範例，您只要兩個步驟就可以完成囉:

1. 打開以下 Colab ，一鍵執行以下程式碼，程式跑完會出現3個連結，點選第2個連結會開啟新分頁，是生圖的 UI 介面。
2. 在介面新介面的 Text2Img 有兩個文字框，可以輸入以下兩個正向、負向語詞(Prompt)，
   • 正面語詞

     8k, RAW photo, best quality, masterpiece:1.2), (realistic, photo-realistic:1.4), ultra-detailed, (Kpop idol),perfect detail ,  looking at viewer,make up,
     
   • 負面語詞

     paintings,sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, bad anatomy,(long hair:1.4),DeepNegative,(fat:1.2),facing away, looking away,tilted head, {Multiple people}, lowres,bad anatomy,bad hands, text, error, missing fingers,extra digit, fewer digits, cropped, worstquality, low quality, normal quality,jpegartifacts,signature, watermark, username,blurry,bad feet,cropped,poorly drawn hands,poorly drawn face,mutation,deformed,worst quality,low quality,normal quality,jpeg artifacts,signature,watermark,extra fingers,fewer digits,extra limbs,extra arms,extra legs,malformed limbs,fused fingers,too many fingers,long neck,cross-eyed,mutated hands,polar lowres,bad body,bad proportions,gross proportions,text,error,missing fingers,missing arms,missing legs,extra digit, extra arms, extra leg, extra foot,
     

• 還可以img2img繼續生圖

Colab 遏阻了腳本指令濫用​

• 鑒於越來越多人使用 Colab 跑 stable-diffusion，已經對前述 WebUI 的腳本操作封鎖，您可以有限制的使用或付費，但最好的情況是自行下載在自己的電腦跑，如果電腦運算資源夠的話。
• 相信未來會有更適當的做法，像是 Bing 可以直接以文字繪圖(模型是 OpenAI 的 Dell.E)，或者使用 Leonardo.ai 就可以做出驚人的效果。

參考​

• https://www.kocpc.com.tw/archives/482754
• https://github.com/camenduru/stable-diffusion-webui-colab
• https://leonardo.ai/

如何使用 GitHub Pages 部署 Docusaurus，可以透過以下步驟，輕鬆地建立自己的網誌。

• 步驟1. 事前準備一個 GitHub 帳號，並且安裝 Git 工具 及 Node.js。
• 步驟2. 創建新的 Repository，作為 GitHub Pages 靜態網頁存放用。
• 步驟3. 下載 Docusaurus 範本
• 步驟4. 安裝和測試 Docusaurus

步驟一：事前準備​

在開始之前，我們需要先確保以下條件都已經滿足：

• 一個 GitHub 帳號，可以在 GitHub 上免費註冊。
• 安裝 Git 工具，可以從 Git 官網 下載安裝包進行安裝。
• 安裝 Node.js 和 npm，可以在 Node.js 官網 下載安裝包進行安裝。

步驟二：創建新的 Repository​

首先，在 GitHub 上創建一個新的 Repository，用來存放網誌的代碼和部署文件。以下是創建 Repository 的步驟：

1. 登錄 GitHub，進入主頁面。
2. 點擊右上角的 “+” 按鈕，然後選擇 “New repository”。
3. 在創建 Repository 的頁面中，填寫 Repository 名稱、描述和設置等信息，然後點擊 “Create repository” 按鈕創建 Repository。

步驟三：下載 Docusaurus 範本​

接下來，我們需要下載 Docusaurus 的範本代碼，作為網誌的基礎。以下是下載 Docusaurus 範本的步驟：

1. 打開命令行工具，進入要存放 Docusaurus 範本的文件夾。
2. 輸入以下命令，下載最新版本的 Docusaurus 範本：

   npx @docusaurus/init@latest init my-blog classic
   
3. 執行命令後，Docusaurus 範本會被下載到當前目錄下的 my-blog 文件夾中。

步驟四：安裝和測試 Docusaurus​

在下載 Docusaurus 範本之後，我們需要進行安裝和測試，以確保網誌可以正常運行。以下是安裝和測試 Docusaurus 的步驟：

1. 進入 my-blog 文件夾，打開命令行工具。

2. 輸入以下命令，安裝 Docusaurus 和相關的依賴：

   npm install
   

3. 安裝完成後，輸入以下命令，啟動 Docusaurus 的本地測試服務：

   npm start
   

4. 在 Github 上建立新的 repository

   在 Github 上建立一個新的 repository，命名為 {username}.github.io，其中 username 是你的 Github 使用者名稱。例如，我的 Github 使用者名稱是 chatgpt，因此我會命名我的 repository 為 chatgpt.github.io。

5. 將 Docusaurus 專案上傳至 Github

   在你的電腦上開啟終端機（Terminal）或命令提示字元（Command Prompt），進入到 Docusaurus 專案的根目錄下，並執行以下指令：

   git init
   git remote add origin git@github.com:{username}/{username}.github.io.git
   npm run build
   npm run deploy
   

   其中，username 是你的 Github 使用者名稱，請注意要改成你自己的。這些指令的作用如下：

   • git init：初始化 Git 儲存庫。
   • git remote add origin git@github.com:{username}/{username}.github.io.git：設定 Git 儲存庫的遠端位置。
   • npm run build：建立 Docusaurus 專案的靜態網頁檔案。
   • npm run deploy：將靜態網頁檔案上傳至 Github。

   在執行 npm run deploy 的時候，會需要你輸入 Github 的使用者名稱和密碼（或是 Personal Access Token）。請輸入正確的資訊後，等待上傳完成。

6. 檢查網站是否正常運作

   完成上傳後，打開瀏覽器，輸入 https://{username}.github.io，其中 username 是你的 Github 使用者名稱，就可以看到你的 Docusaurus 網站了！如果你看到了你的網站，那就代表部署成功了。

7. 編輯 Docusaurus 網站

   現在，你可以開始編輯你的 Docusaurus 網站了。編輯完成後，只需要執行以下指令：

   git add .
   git commit -m "Update website"
   git push origin main
   

   其中，Update website 是你的提交訊息，你可以自己替換成任何訊息。執行這些指令後，你的修改就會自動更新到你的 Github Pages 上了。

結語​

以上使用 Github Pages 部署 Docusaurus 教學，希望能幫助到您。