如何利用 OpenAI 的隱私過濾器構建可擴展的網頁應用程式

如何使用 OpenAI 的 Privacy Filter 構建具擴展性的 Web 應用程式

這三個應用程式都是基於 gradio.Server 構建的，它讓你能將自定義的 HTML/JS 前端與 Gradio 的隊列系統（queueing）、ZeroGPU 資源分配以及 gradio_client SDK 結合使用。在所有這些應用程式中，gradio.Server 都扮演著相同的後端角色，而這種一致性正是其強大之處。

模型介紹

Privacy Filter 是一個擁有 15 億參數（其中 5000 萬個為活動參數）的模型，採用寬鬆的 Apache 2.0 授權。PII（個人識別資訊）類別包括：私密人員、私密地址、私密電子郵件、私密電話、私密網址、私密日期、帳號、機密資訊。上下文視窗為 128,000 個 token。該模型在 PII-Masking-300k 基準測試中達到了領先（state-of-the-art）的性能。完整的數據和方法論請參閱官方發布部落格。

1. 文件隱私探索器 (Document Privacy Explorer)

請在 ysharma/OPF-Document-PII-Explorer 體驗。

用戶問題： 你想閱讀一份含有大量 PII 的文件（如合約、履歷、匯出的聊天記錄），並希望每個偵測到的區塊都按類別標示高亮，側邊欄設有過濾器，頂部設有摘要儀表板。閱讀體驗應該像普通文件一樣，而不是像填寫表單。

Privacy Filter 的作用： 整個檔案透過單次 128k 上下文的前向傳播完成處理，因此不需要分段（chunking）或拼接，且標註偏移量（span offsets）能直接與渲染的文本對齊。BIOES 解碼確保了在長篇且含糊的內容中，標註邊界依然清晰。

gr.Server 的作用： 你本可以使用 Blocks 搭配 gr.HighlightedText 和側邊欄來構建，這也能運作。但我們想要的閱讀體驗（襯線體正文、在客戶端切換 CSS 類別而非重新執行模型的類別過濾器、不強制頁面重新渲染的摘要儀表板）手寫代碼比組件組合更容易實現。gr.Server 讓我們能將閱讀器視圖作為單個 HTML 檔案提供服務，並將模型暴露在一個排隊的端點後：

請注意裝飾器：是 @server.api(name="analyze_document")，而非普通的 @server.post。這正是將處理程序接入 Gradio 隊列的關鍵，使得並行上傳能被序列化處理，@spaces.GPU 在 ZeroGPU 上能正確運作，且同一個端點可以同時從瀏覽器和 gradio_client 訪問，無需重複代碼。瀏覽器使用 Gradio JS 客戶端調用它：

2. 圖片匿名化工具 (Image Anonymizer)

請在 ysharma/OPF-Image-Anonymizer 體驗。

用戶問題： 你想分享一張圖片或任何截圖（如 Slack 對話串、收據、Stripe 儀表板），並在 PII 上方蓋上黑條。你希望能切換黑條的開關、拖動位置，或者手動繪製黑條以補足模型遺漏的部分，最後匯出結果。

Privacy Filter 的作用： Tesseract 執行 OCR 並回傳每個單詞的邊界框（bounding boxes）。後端重建完整文本並建立字元偏移量與邊界框的映射，然後對整個文本執行一次 Privacy Filter。偵測到的字元區塊會對照單詞映射表，並合併成每行的像素矩形。

gr.Server 的作用： gr.ImageEditor 支持圖層註釋，是圖片遮蓋的一個合理起點。但我們想要的工作流（每個黑條的類別元數據、一次性切換某類別的所有黑條、在客戶端以原始解析度匯出 PNG 而無需伺服器往返）在自定義的 <canvas> 前端構建會更簡潔。gr.Server 從一個排隊端點傳回像素矩形，並讓畫布處理其餘所有事務：

前端使用 client.predict("/anonymize_screenshot", { image: handle_file(file) }) 進行調用，模式與上述相同。切換、拖動、繪製新條和 PNG 匯出都在瀏覽器中發生；編輯過程絕不會往返伺服器。

3. SmartRedact 貼上板 (SmartRedact Paste)

請在 ysharma/OPF-SmartRedact-Paste 體驗。

用戶問題： 你需要一個在分享前自動遮蓋敏感資訊的貼上板（pastebin）。你貼上一行日誌、一封郵件或一張支援工單，會得到兩個網址。公開網址提供遮蓋版本，使用 <PRIVATE_PERSON>、<PRIVATE_EMAIL>、<ACCOUNT_NUMBER> 等佔位符，遵循官方部落格範例的遮蓋慣例。私密網址則由你持有的 token 保護，顯示帶有高亮標註的原始內容。

Privacy Filter 的作用： 在儲存的內容中，將每個偵測到的區塊替換為 <CATEGORY> 佔位符。這就是整個遮蓋步驟。多語言文本（模型卡範例中包含西班牙語、法語、中文、印地語等）透過相同的調用處理，無需更改。

gr.Server 的作用： 此應用程式需要為同一個貼上 ID 提供兩個不同的 GET 路由，一個是公開的，一個是 token 保護的。URL 的形式很重要，因為還原網址是你需要保存的東西。gr.Server 在這裡很適用，因為它底層就是一個 FastAPI 應用程式——這也是為什麼 @server.api 和普通的 @server.get 可以並存於同一個進程中。注意：這也可以透過 gr.Blocks() 掛載 FastAPI 自定義路由來構建：

一個守護線程（daemon thread）每 30 秒清除一次過期的內容。整個服務（包括存儲）大約只有 200 行應用程式代碼，因為所有內容都運行在同一個進程中。

gradio.Server 提供了什麼

這三個應用程式的架構劃分是相同的——任何涉及模型的操作都通過 @server.api，其餘部分則保留在普通的 FastAPI 路由上：

@server.api 為你提供了 Gradio 的隊列（序列化請求、在 ZeroGPU 上正確的 @spaces.GPU 調度、進度事件），這也是瀏覽器通過 @gradio/client 訪問的對象。同一個端點也是 gradio_client 用戶從 Python 訪問的對象——一個函數，兩個 SDK，無重複代碼。普通的 @server.get / @server.post 則保留給靜態介面：HTML 頁面、檔案查詢、低消耗的字典讀取。這是 gradio.Server 介紹文章中的經驗法則，也是讓這三個應用程式儘管 UI 迥異但感覺一致的原因。

立即嘗試

試著丟入一份履歷、一張 Slack 對話截圖，或是一行帶有 token 的日誌。最有趣的部分是觀察 Privacy Filter 在你真正關心的文本中捕捉到了什麼（以及偶爾遺漏了什麼）。