Spaces:
Runtime error
Runtime error
File size: 15,565 Bytes
b39cf15 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 | <!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🌸 尊爵不凡｜早安圖產生器模擬器 🌸</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Noto+Sans+TC:wght@300;400;700;900&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="/static/style.css">
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="logo-area">
<span class="logo-emoji">🌸</span>
<h2>長輩圖產生器</h2>
<span class="badge">V1.0 Dev</span>
</div>
<nav class="nav-links">
<button class="nav-btn active" id="btn-simulator">
<i class="fa-solid fa-comments"></i> 聊天指令模擬器
</button>
<button class="nav-btn" id="btn-developer">
<i class="fa-solid fa-code"></i> FastAPI 串接中心
</button>
<button class="nav-btn" id="btn-history">
<i class="fa-solid fa-clock-rotate-left"></i> 歷史生成紀錄
</button>
</nav>
<div class="sidebar-footer">
<button class="settings-trigger-btn" id="btn-open-settings">
<i class="fa-solid fa-gears"></i> 設定中心 (API Key)
</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="main-content">
<!-- HEADER -->
<header class="content-header">
<div class="header-title">
<h1 id="page-title">聊天指令模擬器</h1>
<p id="page-desc">在這裡模擬通訊軟體的對話，即時檢視生成的「早安圖」效果。</p>
</div>
<div class="api-status">
<span class="status-indicator online"></span>
<span class="status-text">FastAPI Server: 在線</span>
</div>
</header>
<!-- SECTION: SIMULATOR (Default View) -->
<section class="section-panel" id="section-simulator-view">
<div class="grid-layout">
<!-- Left Column: Chat Simulator -->
<div class="card glass-card chat-simulator-card">
<div class="card-header">
<h3><i class="fa-solid fa-mobile-screen-button"></i> 群組聊天模擬</h3>
<span class="chat-status">LINE/Discord 模擬頻道</span>
</div>
<div class="chat-messages" id="chat-messages-container">
<div class="message bot-message">
<div class="avatar">🤖</div>
<div class="msg-bubble">
<p>您好！我是早安圖機器人。請在下方輸入 <code>@create image [主題]</code> 來生成一張令人心曠神怡的早安圖！</p>
<span class="time">系統訊息</span>
</div>
</div>
</div>
<div class="chat-input-area">
<input type="text" id="chat-input" placeholder="輸入 @create image 貓咪..." value="@create image 貓咪">
<button id="btn-send-message" class="btn-primary">
<i class="fa-solid fa-paper-plane"></i> 發送
</button>
</div>
</div>
<!-- Right Column: Inspector Panel (Phase 1 Preview) -->
<div class="card glass-card inspector-card">
<div class="card-header">
<h3><i class="fa-solid fa-magnifying-glass-chart"></i> 圖片效果檢視器 (Phase 1)</h3>
<span class="badge neon-rainbow-badge">預覽畫布</span>
</div>
<div class="inspector-body">
<div class="preview-container" id="preview-image-container">
<div class="empty-state" id="preview-empty-state">
<i class="fa-regular fa-image"></i>
<p>等待指令輸入以生成預覽圖片</p>
<span class="subtext">在左側發送 @create image 指令</span>
</div>
<div class="loading-state hidden" id="preview-loading-state">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
<p id="loading-step-text">正在初始化 API 服務...</p>
<span class="loading-funny-quote" id="loading-funny-quote">「蓮花正在盛開，太陽正在升起...」</span>
</div>
<img id="preview-image" src="" alt="早安圖生成結果" class="hidden">
</div>
<div class="metadata-panel hidden" id="preview-metadata-panel">
<div class="meta-row">
<span class="meta-label">輸入主題:</span>
<span class="meta-val" id="meta-query">貓咪</span>
</div>
<div class="meta-row">
<span class="meta-label">生成賀詞:</span>
<span class="meta-val greeting-text-highlight" id="meta-greeting">早安！吸貓一口，福氣雙倍！認同請分享！</span>
</div>
<div class="meta-row">
<span class="meta-label">擴寫 Prompt:</span>
<span class="meta-val code-block" id="meta-prompt">A kitsch traditional Chinese...</span>
</div>
<div class="button-group">
<a id="btn-download" href="#" download="morning_card.jpg" class="btn-secondary">
<i class="fa-solid fa-download"></i> 下載圖片
</a>
<button id="btn-show-api-details" class="btn-primary">
<i class="fa-solid fa-share-nodes"></i> 取得呼叫 API
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION: DEVELOPER HUB (Phase 2 Integration) -->
<section class="section-panel hidden" id="section-developer-view">
<div class="card glass-card">
<div class="card-header">
<h3><i class="fa-solid fa-network-wired"></i> FastAPI 隊友呼叫串接設定 (Phase 2)</h3>
<span class="badge green-badge">快速呼叫</span>
</div>
<div class="developer-body">
<div class="info-alert">
<i class="fa-solid fa-circle-info"></i>
<p><strong>隊友開發指南：</strong> 已產生之同一張圖片已經由 FastAPI 後端包裝。通訊軟體 API (成員 A) 可直接透過下列 API 端點提取最新生成的圖片或發起新的生成任務。</p>
</div>
<div class="api-links-grid">
<div class="api-link-box">
<div class="link-header">
<span class="method get">GET</span>
<h4>獲取最新生成圖片 (Teammate Bot 最推薦)</h4>
</div>
<p class="link-desc">此端點會直接回傳最新一張早安圖的二進位圖片檔 (image/jpeg)。隊友的機器人可直接將此 URL 丟入 LINE/Discord API 發送！</p>
<div class="url-copy-row">
<input type="text" readonly id="url-latest" value="http://localhost:8000/api/latest">
<button class="btn-copy" data-target="url-latest"><i class="fa-regular fa-copy"></i> 複製</button>
</div>
</div>
<div class="api-link-box">
<div class="link-header">
<span class="method post">POST</span>
<h4>發起新生成任務 (JSON 串接)</h4>
</div>
<p class="link-desc">透過發送 JSON Payload 發起生成任務，回傳 JSON 包含 base64 資料及個別圖片 URL。</p>
<div class="url-copy-row">
<input type="text" readonly id="url-generate" value="http://localhost:8000/api/generate">
<button class="btn-copy" data-target="url-generate"><i class="fa-regular fa-copy"></i> 複製</button>
</div>
</div>
</div>
<div class="code-snippets-section">
<h3><i class="fa-solid fa-laptop-code"></i> 呼叫範例程式碼</h3>
<div class="tab-header">
<button class="tab-btn active" data-tab="code-curl">cURL</button>
<button class="tab-btn" data-tab="code-python">Python (Requests)</button>
<button class="tab-btn" data-tab="code-js">Javascript (Fetch)</button>
</div>
<div class="tab-content" id="code-curl">
<pre><code>curl -X POST "http://localhost:8000/api/generate" \
-H "Content-Type: application/json" \
-d '{
"message": "@create image 貓咪"
}'</code></pre>
</div>
<div class="tab-content hidden" id="code-python">
<pre><code>import requests
url = "http://localhost:8000/api/generate"
payload = {
"message": "@create image 貓咪"
}
response = requests.post(url, json=payload)
data = response.json()
if data.get("success"):
print("生成成功！圖片 URL:", data.get("image_url"))
# Teammates can also download directly from:
# http://localhost:8000/api/latest</code></pre>
</div>
<div class="tab-content hidden" id="code-js">
<pre><code>fetch('http://localhost:8000/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: '@create image 貓咪'
})
})
.then(res => res.json())
.then(data => {
console.log("Image base64:", data.image_base64);
console.log("Image URL:", data.image_url);
});</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION: HISTORY -->
<section class="section-panel hidden" id="section-history-view">
<div class="card glass-card">
<div class="card-header">
<h3><i class="fa-solid fa-images"></i> 早安圖生成庫</h3>
<p class="history-count" id="history-count-text">共 0 張早安圖</p>
</div>
<div class="history-grid" id="history-grid-container">
<!-- History items dynamically inserted here -->
</div>
</div>
</section>
</main>
</div>
<!-- SETTINGS MODAL -->
<div class="modal-overlay hidden" id="settings-modal">
<div class="modal-card glass-card">
<div class="modal-header">
<h3><i class="fa-solid fa-sliders"></i> 產生器偏好設定</h3>
<button class="btn-close" id="btn-close-settings"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input-api-key"><i class="fa-solid fa-key"></i> Google Gemini API Key (GOOGLE_API_KEY)</label>
<input type="password" id="input-api-key" placeholder="輸入 AIzaSy... 金鑰">
<p class="help-text">用於自動擴寫提示詞、自動產出極致俗氣且切合主題的中文賀詞。若留空，將從後端環境變數讀取或使用內建預設賀詞庫。</p>
</div>
<div class="form-group">
<label for="input-custom-greeting"><i class="fa-solid fa-pen-nib"></i> 強制自訂賀詞 (留空則由 AI 自動生成)</label>
<input type="text" id="input-custom-greeting" placeholder="例如：福氣滿滿！認同請分享！">
<p class="help-text">如果設定此項，將覆蓋 AI 生成的早安圖文字內容。</p>
</div>
<div class="form-group">
<label for="select-header-preset"><i class="fa-solid fa-heading"></i> 頂部大字 Banner 標題預設</label>
<select id="select-header-preset">
<option value="random">🌟 隨機 (早安/平安喜樂/吉祥如意...)</option>
<option value="早安">早安</option>
<option value="平安喜樂">平安喜樂</option>
<option value="吉祥如意">吉祥如意</option>
<option value="福氣滿滿">福氣滿滿</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn-secondary" id="btn-reset-settings">重設</button>
<button class="btn-primary" id="btn-save-settings">儲存設定</button>
</div>
</div>
</div>
<script src="/static/app.js"></script>
</body>
</html>
|