Spaces:
Runtime error
Runtime error
| <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> | |