Select Page

Stagehand 教學|AI 驅動的瀏覽器自動化神器,TypeScript 與 Python 都支援!

想用 AI 控制網頁自動化,但程式碼又要精準可靠,同時享受自然語言,高效又方便?那你絕不能錯過由 Browserbase 團隊推出的 Stagehand —— 這款專為 AI 時代設計的瀏覽器自動化框架,不僅支援 TypeScript 與 Python、可本地或雲端部署,還比 Browser‑Use 更快、更耐變動!

Stagehand 兼具控制力與智慧的 AI 瀏覽器自動化框架

Stagehand 是以 Playwright 為核心構建的 AI-native 自動化工具,它加入了 LLM 判斷能力,結合程式精準控制與自然語言指令,令自動化腳本更穩定、更智慧也更高效

  • 自然語言 + 程式碼混合操作:你可以用程式寫明確動作,也能用「act(‘點擊第一個 Stagehand 元件’)」這樣類人語法完成UI操作 。
  • 接口完整,支援察看、執行與資料萃取:核心三大命令 actobserveextract,讓操作更透明、更可控
  • 容錯與自恢復能力:UI 略有變動也不怕,Stagehand 的 observe + 快取策略讓腳本更具彈性
  • 完美整合 Playwright:所有 Playwright 腳本都能無縫升級 Stagehand,省心又高效

核心玩法!TypeScript/JavaScript 快速上手範例

// Use Playwright functions on the page object
const page = stagehand.page;
await page.goto("https://github.com/browserbase");

// Use act() to execute individual actions
await page.act("click on the stagehand repo");

// Use Computer Use agents for larger actions
const agent = stagehand.agent({
    provider: "openai",
    model: "computer-use-preview",
});
await agent.execute("Get to the latest PR");

// Use extract() to read data from the page
const { author, title } = await page.extract({
  instruction: "extract the author and title of the PR",
  schema: z.object({
    author: z.string().describe("The username of the PR author"),
    title: z.string().describe("The title of the PR"),
  }),
});

這段程式完整示範了初始化、導航、AI 驅動操作到資料萃取的流程,不僅省事,也大幅提升開發效率。

Stagehand 與 Browser-Use 比較

功能面Stagehand(此文主角)Browser-Use
控制精準度Token 級動作掌控 + 自然語言指令混合攻擊角度偏自然語言,程式控制較弱
容錯能力observe + 快取策略,對 DOM 變化更耐受缺少自恢復機制
雲端支援原生整合 Browserbase,輕鬆雲端部署需額外集成,無預設雲平台支援
語言支援TypeScript / Python主要依賴 Python
AI 整合天生結合 LLM,支援複雜任務拆解依賴外部 LLM,不那麼一體化

只要先學四個指令,快速上手

指定去那一個網頁

goto():

    # 初始化
    page = stagehand.page
    # 指定去那一個頁面
    await page.goto("https://rain.tips/")

使用自然語言操作

act():

    await page.act("點選確定按鈕");

抓取數據資料

extract():

    post = await page.extract("取得標題")

預覽功能

observe():

   links = await page.observe("找到頁面中的所有連結")

實戰快速導覽

安裝

# 用 pip
pip install stagehand python-dotenv

# 安裝playwright
python -m playwright install

# 裝 chromium 瀏覽器
python -m playwright install chromium

建立 .env

export BROWSERBASE_API_KEY="your_browserbase_api_key"
export BROWSERBASE_PROJECT_ID="your_browserbase_project_id"
export MODEL_API_KEY="your_model_api_key"  # OpenAI, Anthropic, etc.

建立程式碼 main.py

import asyncio
import os
from stagehand import Stagehand, StagehandConfig
from dotenv import load_dotenv

load_dotenv()

async def main():
    config = StagehandConfig(
        env="BROWSERBASE",
        api_key=os.getenv("BROWSERBASE_API_KEY"),
        project_id=os.getenv("BROWSERBASE_PROJECT_ID"),
        model_name="gpt-4o",
        model_api_key=os.getenv("MODEL_API_KEY")
    )
    
    stagehand = Stagehand(config)
    
    try:
        await stagehand.init()
        page = stagehand.page
        
        await page.goto("https://docs.stagehand.dev/")
        await page.act("click the quickstart link")
        
        result = await page.extract("extract the main heading of the page")
        
        print(f"Extracted: {result}")
        
    finally:
        await stagehand.close()

if __name__ == "__main__":
    asyncio.run(main())

驗證與測試

python main.py 

若要用本地端的瀏覽器的話,可以改成下面的程式碼

import asyncio
import os
from dotenv import load_dotenv
from stagehand import StagehandConfig, Stagehand

load_dotenv()

async def main():
    # 检查API密钥是否设置
    api_key = os.getenv("OPENAI_API_KEY")

    config = StagehandConfig(
        env="LOCAL",  # 本地运行
        # AI模型配置 - 使用环境变量
        model_name="gpt-4o-mini",  # 使用更便宜的模型
        model_api_key=api_key,  # 从环境变量读取

        # 本地运行配置
        headless=False,  # 显示浏览器窗口
        verbose=3,  # 详细日志
        debug_dom=True,  # DOM调试
    )

    # 使用配置创建Stagehand实例
    stagehand = Stagehand(config)

    # 初始化Stagehand(启动浏览器会话)
    await stagehand.init()

    # 获取页面对象,用于后续的页面操作
    page = stagehand.page

    await page.goto("https://rain.tips/")

    # # 使用observe()取得文章的連結
    blog_links = await page.observe("取得文章中的所有連結)
    print(f"✅ Page link: {blog_links}")

    await page.act(blog_links[0]) 
    data_post_1 = await page.extract("取得文章的標題和內文")
    print(f"✅ 文章資訊如下: {data_post_1}")

if __name__ == "__main__":
    asyncio.run(main())

總結:為什麼 Stagehand 是下一代自動化框架?

  • 語言直覺更自然,人類可理解
  • 對 UI 變化具彈性、不易失效
  • 結合 LLM,自動拆解任務,效率提升數倍
  • 支援本地與雲端,開發與生產環境都得心應手

Stagehand 正重新定義瀏覽器自動化,不再只是死板指令,而是一場「程式控+AI 智能」的完美結合,無論對開發者或 AI 自動化愛好者,都是一大利器。快一起駕馭它,打造更強、更智慧的自動化流程!

參考資料

BrowserBase

GitHub Stagehand

Demo

開發說明文件

https://www.aivi.fyi/aiagents/introduce-stagehand

完全免費無限制!使用 OpenAI 開源模型 gpt‑oss 在本地離線運行

完全免費無限制!使用 OpenAI 開源模型 gpt‑oss 在本地離線運行

gpt‑oss 教學,可以在 16 GB 筆電上免費使用 OpenAI 的開源 gpt‑oss‑20B / 120B GPT 模型,2025/8/5 OpenAI 終於推出的 gpt‑oss(包括 gpt‑oss‑20B 與 gpt‑oss‑120B)簡直是福音!這些開源模型支持在具備足夠資源的電腦上離線運行,完全不需要存取 OpenAI 伺服器,既保護資料隱私,又零使用量限制。

GPT‑OSS 模型概覽

  • gpt‑oss‑120B
    1170 億參數的強大模型,在主要推理基準上接近 OpenAI 的 o4‑mini 表現,同時支援 chain-of-thought 規劃,適用於需要高級推理能力的場景。
  • gpt‑oss‑20B
    約 210 億參數,效能與 o3‑mini 相當,卻可在只需 16 GB 記憶體的裝置上運行,是輕量級的最佳選擇。

兩者皆採用 Mixture-of-Experts 架構(MoE),對每個 token 只啟用一部分參數,有效節省記憶體與運算資源。
模型授權為 Apache 2.0,開放商業使用、修改與分發。

為什麼它值得推薦?

  • 真·免費 & 無使用限制:完全無需訂閱、不計費,也無 API 次數限制。
  • 離線運行,資料更安全:不連網執行,所有運算都在本地完成,隱私無虞。
  • 高效能與實用性並重:gpt‑oss‑20B 適合筆電、家庭工作站;gpt‑oss‑120B 則適用於高性能 GPU 主機。

如何開始在本地使用 GPT‑OSS?

以下以 Ollama 為例,快速上手流程:

  1. 安裝 Ollama(適用於 Windows / macOS / Linux)。
  2. 使用指令下載模型:ollama pull gpt‑oss:20b
  3. 啟動模型聊天介面:ollama run gpt‑oss:20b
  4. 要完全離線,也可在 Ollama 設定中啟用「飛航模式」。
ollama pull gpt‑oss:20b   # 適合 16 GB 裝置
ollama pull gpt‑oss:120b  # 適用於 GPU ≥ 60 GB 設備

對部分硬體較低端的使用者,也可透過像 llama.cpp 加上 GGUF 精簡版模型運行,建議至少 14 GB 記憶體以獲得流暢回應。

歸納總結

模型版本適用裝置模型特性
gpt‑oss‑20B筆電 / Mac 開發者約 210 億參數、效能近 o3‑mini
gpt‑oss‑120B高階工作站 / GPU 主機約 1170 億參數、推理接近 o4‑mini

兩者皆具備開源特性,可離線運行、免費使用、無使用量限制,非常適合自主部署與隱私需求高的專案。此外,也可透過 Hugging Face、Azure、AWS 等多平台取得模型。

同場加映

  1. 可以用於 mac mini 建議用 oss-120B 放在 MAC 128G 共同記憶體以上的機器,可以有每秒 40 token
  2. 不想買機器的,可以先用 openrouter 或是 Groq
  3. 內建有 BrowserUse,Python,MCP
  4. 可以控制推理強度
  5. MoE混合推理模型
  6. 支援企業級應用 vLLMSGLang
  7. 可以用於 Agent,微調
  8. 原生支援MXFP4,ollama等無須轉換

參考資料

https://github.com/openai/gpt-oss

如何用 Nginx 反向代理 SSL 的網站

在從網路上取得網頁時,如果想用 Nginx 作為反向代理器來連線一個介由 Cloudflare 保護且介面是 HTTPS 的網站,你可能會遇到一些繁複的錯誤,包括 Cloudflare Error 1001,502 Bad Gateway,或 421 Misdirected Request 等,這邊就分享一下我遇到的經驗以及如何正確設定 Nginx,反向代理一個有 SSL 保護的網站。

環境概要

  • Nginx 作為前端 proxyshop.example.com
  • Upstream 目標https://target.example.com(Cloudflare 網站)
  • Cloudflare 用於 DNS + CDN + WAF

1. Nginx 基礎設定

幾個重點

1.1 要聽 443 port

1.2 要設定 proxy_ssl_name, proxy_ssl_server_name

1.3 DNS 要設定 resolver

upstream secure_pool {
    server target.example.com:443;
    keepalive 16;
}

server {
    listen 443 ssl;
    server_name shop.example.com;

    ssl_certificate /etc/letsencrypt/live/shop.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/shop.example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    resolver 1.1.1.1 8.8.8.8 valid=300s;

    location / {
        proxy_pass https://secure_pool;
        proxy_ssl_server_name on;
        proxy_ssl_name target.example.com;
        proxy_set_header Host target.example.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header User-Agent "Mozilla/5.0 (compatible; Nginx Proxy)";
    }
}

2. 常見錯誤與解決方案

❌ Error 1001 – DNS Resolution Error (Cloudflare)

  • 原因:Cloudflare 無法解析 upstream hostname
  • 解決:確保 Nginx 加入 resolver 設定

❌ 502 Bad Gateway

  • 原因:upstream HTTPS 連線失敗
  • 解決:
    • proxy_pass 設為 https://...
    • proxy_ssl_server_name on;
    • 加入 proxy_ssl_name + Host 不要用 $host

❌ 421 Misdirected Request

  • 原因:SNI 與 Host header 不符
  • 解決:
    • proxy_ssl_name target.example.com;
    • proxy_set_header Host target.example.com;

3. Debug 技巧

看 error log 解答還原:

用 curl 測試 upstream 是否支援 HTTPS

4. 結論

要用 Nginx 來反向代理一個 SSL 網站,最重要的是使 Nginx 能「知道」你的 upstream 是 HTTPS,且 TLS SNI 與 Host 項目必須一致。

免費文字轉語音工具推薦:Speech Synthesis 支援 40 種語言與多樣語音選擇

免費文字轉語音工具推薦:Speech Synthesis 支援 40 種語言與多樣語音選擇

Speech Synthesis 是一款免費的線上文字轉語音工具,支援超過 40 種語言和數百種語音選擇,並可自訂語調(SSML)、節奏與語氣,讓語音更貼近您的需求。

🔑 主要特色

  • 多語言支援:涵蓋繁體中文、粵語、英語、日語等多種語言,滿足全球用戶的需求。
  • 多樣化語音選擇:提供數百種語音,包括不同性別、年齡和口音的選項。
  • 自訂語音參數:可調整語速(如 x-slow、slow、medium、fast、x-fast)、語調和音量,打造個性化的語音輸出。
  • 支援 SSML:支援語音合成標記語言(SSML),讓進階用戶能夠更精細地控制語音輸出。
  • 多種音訊格式:可選擇 MP3、WAV 等格式,並提供不同的音質設定,如 16kHz-128k、24kHz-160k、48kHz-192k。

🧪 使用方式

  1. 前往 Speech Synthesis 官方網站
  2. 在「TEXT」欄位輸入您要轉換的文字,或上傳文件。
  3. 選擇語言和語音,並調整語速、語調和音量等參數。
  4. 點擊「合成語音」按鈕,系統將生成語音檔案。
  5. 試聽並下載生成的語音檔案。

🔍 與其他熱門 TTS 工具的比較

工具名稱語言支援數語音選擇數自訂參數支援 SSML價格
Speech Synthesis40+數百種免費
TTSMaker100+600+免費
Google Text-to-Speech30+220+免費(有使用限制)
MyEdit26+多種免費

參考資料

提升 App 測試效率:UIAutoDev UI定位與 XPath 自動生成指南

提升 App 測試效率:UIAutoDev UI定位與 XPath 自動生成指南

UIAutoDev 是一款不可或缺的工具,它支援 Android 和 iOS 平台,提供直觀的圖形介面,讓開發者能夠輕鬆地定位 UI 元素、生成選擇器,並進行色彩分析。

UIAutoDev UI DEMO

🔧 UIAutoDev 的核心特色

1. 支援 Android 和 iOS 平台

UIAutoDev 同時支援 Android 和 iOS 裝置的 UI 元素檢視與操作。​對於 iOS,用戶需自行啟動 WebDriverAgent(WDA)服務,以實現與裝置的連接。​

2. 直觀的控件選擇與屬性檢視

透過滑鼠點選應用程式中的控件,UIAutoDev 會即時顯示該元素的屬性資訊,如 resource-idtextclass 等,並在控件樹中高亮顯示,方便用戶精確定位。​

3. 自動生成 XPath 選擇器

UIAutoDev 能夠根據選取的控件,自動生成多個 XPath 選擇器,並標示每個選擇器匹配的元素數量,協助用戶選擇最合適的定位方式。​

4. 色彩分析與坐標微調

工具提供找色功能,允許用戶獲取指定位置的 RGB 和 HSB 色值。​同時,透過方向鍵微調坐標,精確定位需要操作的區域,提升自動化腳本的準確性。​


🚀 安裝與使用指南

1. 安裝 Python 環境

確保系統已安裝 Python 3.8 或以上版本。​

2. 安裝 UIAutoDev

在終端機中執行以下命令:

pip install uiautodev

3. 啟動 UIAutoDev

安裝完成後,執行以下命令啟動工具:

python -m uiautodev

啟動後,瀏覽器將自動打開 UIAutoDev 的網頁介面。​

4. 連接裝置

  • Android:​啟用開發者選項並允許 USB 偵錯,使用 USB 或 Wi-Fi 連接裝置。
  • iOS:​啟動 WebDriverAgent(WDA)服務,並確保裝置與電腦在同一網路下。​

5. 使用工具進行 UI 元素定位

  • 在網頁介面中選擇已連接的裝置。
  • 點擊「刷新」按鈕,同步裝置當前畫面。
  • 使用滑鼠點選畫面中的控件,查看其屬性資訊,並在右側控件樹中進行導航。
  • 利用自動生成的 XPath 選擇器,快速編寫自動化腳本。

🧪 實際應用範例

可以先看DEMO

以下是一段使用 uiautomator2 與 UIAutoDev 結合的 Python 腳本範例:

import uiautomator2 as u2

# 連接到裝置
d = u2.connect()

# 啟動應用程式
d.app_start("com.example.app")

# 點擊指定的控件
d(resourceId="com.example.app:id/button").click()

# 輸入文字
d(resourceId="com.example.app:id/input").set_text("測試輸入")

# 關閉應用程式
d.app_stop("com.example.app")

透過 UIAutoDev 提供的控件屬性資訊,您可以輕鬆取得 resource-id 等屬性,快速編寫上述腳本。

參考資料

https://testerhome.com/topics/40069