Spaces:
Sleeping
Sleeping
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Space Demo</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* 登入頁面樣式 */ | |
| .login-container { | |
| background: white; | |
| padding: 40px; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| width: 100%; | |
| max-width: 400px; | |
| text-align: center; | |
| } | |
| .login-title { | |
| color: #333; | |
| margin-bottom: 10px; | |
| font-size: 28px; | |
| font-weight: 600; | |
| } | |
| .login-subtitle { | |
| color: #666; | |
| margin-bottom: 30px; | |
| font-size: 14px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: #333; | |
| font-weight: 500; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .captcha-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .captcha-code { | |
| background: #f8f9fa; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 8px; | |
| padding: 12px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: #333; | |
| letter-spacing: 2px; | |
| min-width: 100px; | |
| text-align: center; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .captcha-input { | |
| flex: 1; | |
| padding: 12px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| } | |
| .captcha-refresh { | |
| background: #667eea; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| padding: 12px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.3s; | |
| } | |
| .captcha-refresh:hover { | |
| background: #5a6fd8; | |
| } | |
| .login-btn { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .login-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .error-message { | |
| color: #e74c3c; | |
| margin-top: 10px; | |
| font-size: 14px; | |
| } | |
| /* 主應用程式樣式 */ | |
| .app-container { | |
| display: none; | |
| width: 100vw; | |
| height: 100vh; | |
| background: #f5f7fa; | |
| } | |
| .app-header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .app-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .app-subtitle { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| .logout-btn { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: rgba(255,255,255,0.2); | |
| color: white; | |
| border: 2px solid rgba(255,255,255,0.3); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.3s; | |
| } | |
| .logout-btn:hover { | |
| background: rgba(255,255,255,0.3); | |
| border-color: rgba(255,255,255,0.5); | |
| } | |
| .main-content { | |
| display: flex; | |
| height: calc(100vh - 120px); | |
| } | |
| .sidebar { | |
| width: 250px; | |
| background: white; | |
| box-shadow: 2px 0 10px rgba(0,0,0,0.1); | |
| padding: 20px 0; | |
| } | |
| .tab { | |
| display: block; | |
| width: 100%; | |
| padding: 15px 25px; | |
| background: none; | |
| border: none; | |
| text-align: left; | |
| cursor: pointer; | |
| font-size: 16px; | |
| color: #333; | |
| border-left: 4px solid transparent; | |
| transition: all 0.3s; | |
| } | |
| .tab:hover { | |
| background: #f8f9fa; | |
| color: #667eea; | |
| } | |
| .tab.active { | |
| background: #f0f3ff; | |
| color: #667eea; | |
| border-left-color: #667eea; | |
| font-weight: 600; | |
| } | |
| .content-area { | |
| flex: 1; | |
| padding: 20px; | |
| } | |
| .iframe-container { | |
| display: none; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .iframe-container.active { | |
| display: block; | |
| } | |
| .iframe-container iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .welcome-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| flex-direction: column; | |
| color: #666; | |
| } | |
| .welcome-content h2 { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .welcome-content p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 登入頁面 --> | |
| <div id="loginPage" class="login-container"> | |
| <h1 class="login-title">Hugging Face Space Demo</h1> | |
| <p class="login-subtitle">cjhuang@2025copyright</p> | |
| <form id="loginForm"> | |
| <div class="form-group"> | |
| <label for="username">帳號</label> | |
| <input type="text" id="username" name="username" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">密碼</label> | |
| <input type="password" id="password" name="password" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="captcha">驗證碼</label> | |
| <div class="captcha-container"> | |
| <div class="captcha-code" id="captchaCode" onclick="generateCaptcha()"></div> | |
| <input type="text" id="captchaInput" class="captcha-input" placeholder="請輸入驗證碼" required> | |
| <button type="button" class="captcha-refresh" onclick="generateCaptcha()">刷新</button> | |
| </div> | |
| </div> | |
| <button type="submit" class="login-btn">登入</button> | |
| <div id="errorMessage" class="error-message"></div> | |
| </form> | |
| </div> | |
| <!-- 主應用程式 --> | |
| <div id="appContainer" class="app-container"> | |
| <header class="app-header"> | |
| <h1 class="app-title">Hugging Face Space Demo</h1> | |
| <p class="app-subtitle">cjhuang@2025copyright</p> | |
| <button class="logout-btn" onclick="logout()">登出</button> | |
| </header> | |
| <div class="main-content"> | |
| <nav class="sidebar"> | |
| <button class="tab active" onclick="showTab('welcome')">歡迎頁面</button> | |
| <button class="tab" onclick="showTab('multimodal')">多模態API</button> | |
| <button class="tab" onclick="showTab('webcam')">WEBCAM_LineBot</button> | |
| </nav> | |
| <main class="content-area"> | |
| <div id="welcomeContent" class="iframe-container active"> | |
| <div class="welcome-content"> | |
| <h2>歡迎使用 Hugging Face Space Demo</h2> | |
| <p>請選擇左側選單來瀏覽不同的應用程式。</p> | |
| </div> | |
| </div> | |
| <div id="multimodalContent" class="iframe-container"> | |
| <iframe src="https://cjian2025-groq-api-gradio.hf.space" title="多模態API"></iframe> | |
| </div> | |
| <div id="webcamContent" class="iframe-container"> | |
| <iframe src="https://cjian2025-webcam-groq-linebot-application.hf.space" title="WEBCAM_LineBot"></iframe> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| let currentCaptcha = ''; | |
| // 生成驗證碼 | |
| function generateCaptcha() { | |
| const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789'; | |
| let captcha = ''; | |
| for (let i = 0; i < 5; i++) { | |
| captcha += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| currentCaptcha = captcha; | |
| document.getElementById('captchaCode').textContent = captcha; | |
| } | |
| // 初始化驗證碼 | |
| generateCaptcha(); | |
| // 登入表單處理 | |
| document.getElementById('loginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const username = document.getElementById('username').value; | |
| const password = document.getElementById('password').value; | |
| const captchaInput = document.getElementById('captchaInput').value; | |
| const errorDiv = document.getElementById('errorMessage'); | |
| // 清除之前的錯誤訊息 | |
| errorDiv.textContent = ''; | |
| // 驗證帳號密碼 | |
| if (username !== 'ROOT2025') { | |
| errorDiv.textContent = '帳號錯誤！'; | |
| return; | |
| } | |
| if (password !== '123456') { | |
| errorDiv.textContent = '密碼錯誤！'; | |
| return; | |
| } | |
| // 驗證驗證碼（不區分大小寫） | |
| if (captchaInput.toLowerCase() !== currentCaptcha.toLowerCase()) { | |
| errorDiv.textContent = '驗證碼錯誤！'; | |
| generateCaptcha(); // 重新生成驗證碼 | |
| document.getElementById('captchaInput').value = ''; | |
| return; | |
| } | |
| // 登入成功 | |
| document.getElementById('loginPage').style.display = 'none'; | |
| document.getElementById('appContainer').style.display = 'block'; | |
| }); | |
| // 頁籤切換功能 | |
| function showTab(tabName) { | |
| // 隱藏所有內容 | |
| const contents = document.querySelectorAll('.iframe-container'); | |
| contents.forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // 移除所有頁籤的active狀態 | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // 顯示選中的內容 | |
| if (tabName === 'welcome') { | |
| document.getElementById('welcomeContent').classList.add('active'); | |
| tabs[0].classList.add('active'); | |
| } else if (tabName === 'multimodal') { | |
| document.getElementById('multimodalContent').classList.add('active'); | |
| tabs[1].classList.add('active'); | |
| } else if (tabName === 'webcam') { | |
| document.getElementById('webcamContent').classList.add('active'); | |
| tabs[2].classList.add('active'); | |
| } | |
| } | |
| // 登出功能 | |
| function logout() { | |
| // 重置表單 | |
| document.getElementById('loginForm').reset(); | |
| document.getElementById('errorMessage').textContent = ''; | |
| generateCaptcha(); | |
| // 切換回登入頁面 | |
| document.getElementById('appContainer').style.display = 'none'; | |
| document.getElementById('loginPage').style.display = 'block'; | |
| // 重置到歡迎頁面 | |
| showTab('welcome'); | |
| } | |
| // 頁面載入時生成驗證碼 | |
| window.addEventListener('load', function() { | |
| generateCaptcha(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |