大家好！歡迎來到「Build on Google AI」工程挑戰的第 19 天。

（我知道各位在等 Action Confirmations，但昨天我們的 PM 抱怨 JSON 太難看懂了，所以我們今天必須先解決 UI/UX 的問題！安全煞車機制確定順延至明天！）

前兩天，我們透過 response_schema 和 Self-Correction 打造了完美的自動化 JSON 產線。對於後端工程師來說，拿到強型別的 Pydantic 物件就可以下班了。但如果這個 Agent 是要交付給非技術人員（如企劃、PM、導演）使用的，我們就必須在「資料層」之上，再鋪一層「展示層 (Presentation Layer)」。

Google ADK 除了強大的 CLI 外，內建的 adk web 提供了一個極佳的展示舞台。今天，我們來教 Agent 如何將生硬的資料，轉化為戰情室裡的精美表格。

第一步：啟用 ADK 的 Web 戰情室
還記得我們在 Day 14 提過的 ADK Web 介面嗎？只要在專案目錄下執行：

adk web ./my_agent_project --port 8000

ADK 就會在本地啟動一個開發者儀表板。這個儀表板的聊天介面不僅能顯示文字，還原生支援解析 Markdown 與基礎 HTML 標籤。我們就是利用這個特性來做視覺化渲染。

第二步：撰寫「資料渲染器 (Data Renderer)」
我們不需要為了呈現表格去寫複雜的 React 或 Vue 前端程式碼。我們可以寫一個 Python 函式，專門攔截昨天產出的 VideoStoryboard 物件，並將其動態轉換為精美的 Markdown 表格。

from pydantic import BaseModel
# 假設這是我們昨天定義好的 VideoStoryboard (包含總時長與 scenes 陣列)
from models import VideoStoryboard 

def render_storyboard_to_markdown(storyboard: VideoStoryboard) -> str:
    """將強型別的 Pydantic 分鏡表，渲染為 ADK Web 支援的 Markdown 表格"""
    
    # 1. 建立標題與摘要區塊
    md_output = f"## 🎬 影片企劃書：{storyboard.video_title}\n\n"
    md_output += f"> **預計發布平台：** `{storyboard.target_platform}` | **總時長：** ⏱️ `{storyboard.total_duration_seconds} 秒`\n\n"
    
    # 2. 建立 Markdown 表格的 Header
    md_output += "| 鏡頭 | 時長 | 🎥 運鏡指示 | 👁️ 視覺畫面 (Visuals) | 🗣️ 旁白 (Voiceover) |\n"
    md_output += "| :---: | :---: | :--- | :--- | :--- |\n"
    
    # 3. 迭代 Pydantic 物件，動態生成表格列
    for scene in storyboard.scenes:
        # 將可能含有換行符號的字串進行替換，確保 Markdown 表格不破版
        visuals = scene.visual_description.replace('\n', '<br>')
        voice = scene.voiceover.replace('\n', '<br>')
        camera = scene.camera_movement
        
        md_output += (
            f"| **#{scene.scene_number}** "
            f"| `{scene.duration_seconds}s` "
            f"| {camera} "
            f"| {visuals} "
            f"| {voice} |\n"
        )
        
    return md_output

第三步：在 Workflow 中串接展示層
在 ADK 中，我們可以在 Agent 完成任務並通過驗證後，呼叫這個渲染器，然後將這段 Markdown 格式的字串作為最終回應丟給 Web UI。

# 模擬工作流 (Workflow) 的最後一步
def execute_video_planning(user_prompt: str):
    # 1. 呼叫昨天的自我修正工具，取得絕對正確的 Pydantic 物件
    storyboard_obj = generate_with_self_correction(user_prompt)
    
    # 2. 轉換為視覺化 Markdown
    visual_output = render_storyboard_to_markdown(storyboard_obj)
    
    # 3. 將視覺化結果回傳給 ADK Web UI 進行渲染
    return visual_output

戰情室視覺化成果！
現在，當 PM 在 localhost:8000 的 ADK 網頁介面上輸入：「幫我發想一支 15 秒的 ADK 宣傳短片」。

幾秒鐘後，他們不再會看到大坨的 { "scenes": [...] }，而是會看到一個排版精美、重點高亮、帶有 Emoji 的時序表格。PM 可以一眼掃過每個分鏡的秒數是否合理，旁白是否生動。這才是真正具備「可用性 (Usability)」的企業級 AI 應用！

小結
「資料結構化保證了系統的下限，而視覺化呈現決定了產品的上限。」 今天我們利用 ADK Web 介面的渲染能力，將複雜的巢狀結構無縫轉換為對人類極度友善的戰情室儀表板。