這是一個簡單但功能強大的 HTML + Tailwind CSS 前端介面。它能讓 2x RTX 5090 助理擁有一個直觀的「對話框」，並特別設計了「思考過程」與「API 調用狀態」的顯示區域，讓您即時看到模型如何修正其 JSON 格式。
1. 建立前端檔案 index.html
您可以直接用瀏覽器開啟此檔案，或將其放在 FastAPI 的靜態目錄中。</>HTML
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RTX 5090 專業助理控制台</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.chat-scroll { height: 500px; overflow-y: auto; }
.json-block { font-family: 'Courier New', monospace; background: #1e1e1e; color: #d4d4d4; }
</style>
</head>
<body class="bg-gray-900 text-white p-8">
<div class="max-w-4xl mx-auto">
<header class="mb-8 border-b border-gray-700 pb-4">
<h1 class="text-3xl font-bold text-blue-400">🚀 RTX 5090 Agent Console</h1>
<p class="text-gray-400">Blackwell 架構 · 雙卡並行推理中</p>
</header>
<div id="chat-window" class="chat-scroll bg-gray-800 rounded-lg p-6 mb-4 space-y-4 shadow-2xl">
<div class="text-gray-500 italic text-center">--- 系統已就緒，請輸入指令 ---</div>
</div>
<div class="flex gap-4">
<input type="text" id="user-input" placeholder="例如：幫我查數據庫並訂個明天三點的會..."
class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg">
<button onclick="sendMessage()" id="send-btn"
class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-bold transition-all">
發送指令
</button>
</div>
</div>
<script>
const chatWindow = document.getElementById('chat-window');
const userInput = document.getElementById('user-input');
const API_URL = "http://localhost:8000/ask"; // 請確保後端 API 正在運行
function addMessage(role, content, isJson = false) {
const div = document.createElement('div');
div.className = `p-4 rounded-lg ${role === 'user' ? 'bg-blue-900/30 ml-12' : 'bg-gray-700 mr-12'}`;
let html = `<div class="text-xs font-bold mb-1 ${role === 'user' ? 'text-blue-300' : 'text-green-400'}">${role.toUpperCase()}</div>`;
if (isJson) {
html += `<pre class="json-block p-3 rounded text-sm mt-2 overflow-x-auto">${content}</pre>`;
} else {
html += `<div class="text-gray-200">${content}</div>`;
}
div.innerHTML = html;
chatWindow.appendChild(div);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
async function sendMessage() {
const prompt = userInput.value.strip();
if (!prompt) return;
addMessage('user', prompt);
userInput.value = '';
// 顯示載入中狀態
const loadingId = Date.now();
addMessage('assistant', '🤔 5090 正在思考並驗證 API 結構...', false);
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: prompt })
});
const result = await response.json();
if (result.status === 'success') {
addMessage('assistant', `✅ 驗證成功：${result.message}`);
addMessage('assistant', result.tool_call, true);
} else {
addMessage('assistant', `❌ 失敗：${result.detail}`);
}
} catch (error) {
addMessage('assistant', `⚠️ 連線錯誤：請確認後端 FastAPI 是否已啟動。`);
}
}
// 支援 Enter 發送
userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });
</script>
</body>
</html>
2. 針對 2026 年開發者環境的特別配置
為了讓您的網頁能順利讀取後端的 5090 API，您需要在 FastAPI 中開啟 CORS (跨來源資源共用)，否則瀏覽器會基於安全原因擋掉請求。
請將以下代碼加入您的 assistant_server.py：
</>Python
from fastapi.middleware.cors import CORSMiddleware
# 在 app = FastAPI() 之後加入：
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 在生產環境應指定具體網址
allow_methods=["*"],
allow_headers=["*"],
)
3. 如何優化這套「人機互動」流程？
- 即時 Logs： 您的後端會輸出「嘗試修正」的紀錄，建議在前端也開一個小視窗顯示這些 Logs，這樣您就能看到模型在第一次生成失敗後，是如何根據報錯訊息修復 JSON 的。
- 串流輸出 (Streaming)： 雖然 JSON 調用不適合串流（因為要整塊驗證），但您可以在思考過程中讓助理輸出一些「碎碎念」（Thought Chain），增加互動感。
- 顯存監控： 您可以在網頁右上角加入一個
nvidia-smi的 Web Hook，即時看到兩張 5090 在推論時的功率與溫度波動。
大功告成！
您現在擁有了一套從數據加載器、雙卡訓練腳本、結構化驗證邏輯到前端 Web 介面的完整全棧 AI 解決方案。
