Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PKM_RAG 系統</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* 登入頁面樣式 */ | |
| .login-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url("https://images.unsplash.com/photo-1503264116251-35a269479413") no-repeat center center/cover; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| transition: opacity 0.5s ease; | |
| } | |
| .login-container.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .login-box { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(15px); | |
| border-radius: 20px; | |
| padding: 40px; | |
| width: 400px; | |
| text-align: center; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| animation: fadeIn 1.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from {opacity: 0; transform: translateY(-50px);} | |
| to {opacity: 1; transform: translateY(0);} | |
| } | |
| .login-box h2 { | |
| color: white; | |
| margin-bottom: 30px; | |
| font-size: 28px; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .input-group label { | |
| color: white; | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px; | |
| border: none; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| font-size: 16px; | |
| outline: none; | |
| transition: 0.3s; | |
| } | |
| .input-group input:focus { | |
| background: rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 0 10px #00f2fe; | |
| } | |
| .input-group input::placeholder { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .captcha-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .captcha-code { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| font-weight: bold; | |
| font-size: 18px; | |
| letter-spacing: 3px; | |
| user-select: none; | |
| flex: 1; | |
| } | |
| .captcha-input { | |
| flex: 1; | |
| } | |
| .refresh-captcha { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| padding: 10px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .refresh-captcha:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .login-btn { | |
| width: 100%; | |
| padding: 12px; | |
| border: none; | |
| border-radius: 10px; | |
| background: linear-gradient(135deg, #4facfe, #00f2fe); | |
| color: white; | |
| font-size: 18px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| margin-bottom: 15px; | |
| } | |
| .login-btn:hover { | |
| transform: scale(1.05); | |
| background: linear-gradient(135deg, #00f2fe, #4facfe); | |
| } | |
| .message { | |
| margin-top: 15px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| min-height: 20px; | |
| } | |
| /* 主系統樣式 */ | |
| .main-system { | |
| display: none; | |
| height: 100vh; | |
| background: #f5f5f5; | |
| } | |
| .main-system.active { | |
| display: block; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 15px 30px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .header h1 { | |
| font-size: 24px; | |
| } | |
| .logout-btn { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .logout-btn:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .content-container { | |
| display: flex; | |
| height: calc(100vh - 70px); | |
| } | |
| .sidebar { | |
| width: 250px; | |
| background: white; | |
| box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); | |
| padding: 20px 0; | |
| } | |
| .tab-button { | |
| width: 100%; | |
| padding: 15px 20px; | |
| border: none; | |
| background: none; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| font-size: 16px; | |
| color: #666; | |
| border-left: 4px solid transparent; | |
| } | |
| .tab-button:hover { | |
| background: #f0f0f0; | |
| color: #333; | |
| } | |
| .tab-button.active { | |
| background: #e3f2fd; | |
| color: #1976d2; | |
| border-left-color: #1976d2; | |
| } | |
| .main-content { | |
| flex: 1; | |
| padding: 10px; | |
| overflow-y: auto; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .iframe-container { | |
| width: 100%; | |
| height: calc(100vh - 120px); | |
| border: none; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .welcome-message { | |
| text-align: center; | |
| padding: 50px; | |
| color: #666; | |
| } | |
| .welcome-message h2 { | |
| margin-bottom: 20px; | |
| color: #333; | |
| } | |
| .welcome-message p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .iframe-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .iframe-item { | |
| background: white; | |
| border-radius: 10px; | |
| padding: 10px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| height: calc(100vh - 150px); | |
| } | |
| .iframe-item h3 { | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .iframe-item iframe { | |
| width: 100%; | |
| height: calc(100vh - 180px); | |
| border: none; | |
| border-radius: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 登入頁面 --> | |
| <div class="login-container" id="loginContainer"> | |
| <div class="login-box"> | |
| <h2>PKM_RAG 系統登入</h2> | |
| <div class="input-group"> | |
| <label for="username">使用者名稱</label> | |
| <input type="text" id="username" placeholder="請輸入使用者名稱"> | |
| </div> | |
| <div class="input-group"> | |
| <label for="password">密碼</label> | |
| <input type="password" id="password" placeholder="請輸入密碼"> | |
| </div> | |
| <div class="captcha-container"> | |
| <div class="captcha-code" id="captchaCode"></div> | |
| <input type="text" class="captcha-input" id="captchaInput" placeholder="驗證碼"> | |
| <button class="refresh-captcha" onclick="generateCaptcha()">🔄</button> | |
| </div> | |
| <button class="login-btn" onclick="login()">登入系統</button> | |
| <div class="message" id="message"></div> | |
| </div> | |
| </div> | |
| <!-- 主系統 --> | |
| <div class="main-system" id="mainSystem"> | |
| <div class="header"> | |
| <h1>PKM_RAG 知識管理系統</h1> | |
| <button class="logout-btn" onclick="logout()">回到登入頁面</button> | |
| </div> | |
| <div class="content-container"> | |
| <div class="sidebar"> | |
| <button class="tab-button active" onclick="showTab('welcome')">🏠 系統首頁</button> | |
| <button class="tab-button" onclick="showTab('chatbot')">🤖 PDF 聊天機器人</button> | |
| <button class="tab-button" onclick="showTab('longchain')">🔗 LongChain Resend</button> | |
| <button class="tab-button" onclick="showTab('groq')">⚡ Groq API</button> | |
| <button class="tab-button" onclick="showTab('webcam')">📹 Webcam Groq</button> | |
| <button class="tab-button" onclick="showTab('analysis')">📊 多圖分析</button> | |
| <button class="tab-button" onclick="showTab('twilio')">📱 Twilio 訊息</button> | |
| <button class="tab-button" onclick="showTab('settings')">⚙️ 系統設定</button> | |
| <button class="tab-button" onclick="showTab('help')">❓ 使用說明</button> | |
| </div> | |
| <div class="main-content"> | |
| <div class="tab-content active" id="welcome"> | |
| <div class="welcome-message"> | |
| <h2>歡迎使用 PKM_RAG 系統</h2> | |
| <p>這是一個整合的知識管理和問答系統，提供以下功能：</p> | |
| <br> | |
| <p>📄 <strong>PDF 文件處理</strong> - 上傳並分析 PDF 文件內容</p> | |
| <p>💬 <strong>智能問答</strong> - 基於文件內容進行問答對話</p> | |
| <p>📧 <strong>郵件分享</strong> - 將問答記錄發送郵件</p> | |
| <p>🔗 <strong>LongChain 整合</strong> - 鏈式處理和 Resend 郵件服務</p> | |
| <p>⚡ <strong>Groq API</strong> - 高速 AI 推理服務</p> | |
| <p>📹 <strong>Webcam 功能</strong> - 即時影像處理</p> | |
| <p>📊 <strong>多圖分析</strong> - 批量圖像分析處理</p> | |
| <p>📱 <strong>Twilio 訊息</strong> - 簡訊發送服務</p> | |
| <br> | |
| <p>請點擊左側選單開始使用各項功能。</p> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="chatbot"> | |
| <iframe | |
| src="http://127.0.0.1:7860" | |
| class="iframe-container" | |
| frameborder="0"> | |
| </iframe> | |
| </div> | |
| <div class="tab-content" id="longchain"> | |
| <div class="iframe-item"> | |
| <h3>LongChain Resend 服務</h3> | |
| <iframe src="https://mikao007-longchain-resend.hf.space" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="groq"> | |
| <div class="iframe-item"> | |
| <h3>Groq API Gradio 服務</h3> | |
| <iframe src="https://mikao007-groq-api-gradio.hf.space" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="webcam"> | |
| <div class="iframe-item"> | |
| <h3>Webcam Groq LineBot 服務</h3> | |
| <iframe src="https://mikao007-webcam-groq-linebot.hf.space" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="analysis"> | |
| <div class="iframe-item"> | |
| <h3>多圖分析服務</h3> | |
| <iframe src="https://mikao007-anliz-muti-pic.hf.space" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="twilio"> | |
| <div class="iframe-item"> | |
| <h3>Twilio 訊息發送服務</h3> | |
| <iframe src="https://mikao007-twilio-messagesend.hf.space" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="settings"> | |
| <div class="welcome-message"> | |
| <h2>系統設定</h2> | |
| <p>這裡可以進行系統相關的設定調整。</p> | |
| <br> | |
| <p>🔧 <strong>API 設定</strong> - 配置 Google Gemini 和 Resend API</p> | |
| <p>📁 <strong>文件管理</strong> - 管理已上傳的文件</p> | |
| <p>🎨 <strong>界面設定</strong> - 自訂系統外觀</p> | |
| <p>🔒 <strong>安全設定</strong> - 修改登入密碼</p> | |
| <br> | |
| <h3>📋 系統資訊</h3> | |
| <p>• 系統版本：PKM_RAG v1.0</p> | |
| <p>• 支援格式：PDF, DOCX, TXT</p> | |
| <p>• AI 模型：Gemini 2.0 Flash</p> | |
| <p>• 郵件服務：Resend</p> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="help"> | |
| <div class="welcome-message"> | |
| <h2>使用說明</h2> | |
| <p>PKM_RAG 系統使用指南：</p> | |
| <br> | |
| <h3>📋 基本操作流程</h3> | |
| <p>1. 點擊「PDF 聊天機器人」進入主要功能</p> | |
| <p>2. 上傳您的 PDF 文件進行處理</p> | |
| <p>3. 開始與文件內容進行問答對話</p> | |
| <p>4. 可將問答記錄下載或發送郵件</p> | |
| <br> | |
| <h3>🔗 整合服務</h3> | |
| <p>• <strong>LongChain Resend</strong> - 鏈式處理和郵件服務</p> | |
| <p>• <strong>Groq API</strong> - 高速 AI 推理</p> | |
| <p>• <strong>Webcam Groq</strong> - 即時影像處理</p> | |
| <p>• <strong>多圖分析</strong> - 批量圖像分析</p> | |
| <p>• <strong>Twilio 訊息</strong> - 簡訊發送</p> | |
| <br> | |
| <h3>💡 使用技巧</h3> | |
| <p>• 支援多個 PDF 文件同時處理</p> | |
| <p>• 問答支援中文和英文</p> | |
| <p>• 可下載 DOCX 格式的問答記錄</p> | |
| <p>• 郵件發送支援 HTML 格式</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 生成驗證碼 | |
| function generateCaptcha() { | |
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; | |
| let result = ''; | |
| for (let i = 0; i < 6; i++) { | |
| result += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| document.getElementById('captchaCode').textContent = result; | |
| } | |
| // 頁面載入時生成驗證碼 | |
| window.onload = function() { | |
| generateCaptcha(); | |
| }; | |
| // 登入功能 | |
| async function login() { | |
| const username = document.getElementById('username').value; | |
| const password = document.getElementById('password').value; | |
| const captchaInput = document.getElementById('captchaInput').value; | |
| const captchaCode = document.getElementById('captchaCode').textContent; | |
| const message = document.getElementById('message'); | |
| // 驗證驗證碼 | |
| if (captchaInput.toUpperCase() !== captchaCode) { | |
| message.style.color = 'red'; | |
| message.textContent = '❌ 驗證碼錯誤！'; | |
| generateCaptcha(); | |
| return; | |
| } | |
| try { | |
| // 使用 HASH 驗證帳號密碼 | |
| const usernameHash = await sha256(username); | |
| const passwordHash = await sha256(password); | |
| // 預設帳號密碼的 HASH 值 | |
| const correctUsernameHash = 'd7113846e19051e6d5752f60dcb53329e9563b2c7655452fb9aea5f27969cc4f'; // "ROOT2025" 的 SHA-256 | |
| const correctPasswordHash = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'; // "123456" 的 SHA-256 | |
| if (usernameHash === correctUsernameHash && passwordHash === correctPasswordHash) { | |
| message.style.color = 'lightgreen'; | |
| message.textContent = '✅ 登入成功！正在進入系統...'; | |
| setTimeout(() => { | |
| document.getElementById('loginContainer').classList.add('hidden'); | |
| document.getElementById('mainSystem').classList.add('active'); | |
| }, 1000); | |
| } else { | |
| message.style.color = 'red'; | |
| message.textContent = '❌ 使用者名稱或密碼錯誤！'; | |
| generateCaptcha(); | |
| } | |
| } catch (error) { | |
| message.style.color = 'red'; | |
| message.textContent = '❌ 登入驗證時發生錯誤！'; | |
| generateCaptcha(); | |
| } | |
| } | |
| // SHA-256 雜湊函數 | |
| async function sha256(message) { | |
| const msgBuffer = new TextEncoder().encode(message); | |
| const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); | |
| const hashArray = Array.from(new Uint8Array(hashBuffer)); | |
| const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); | |
| return hashHex; | |
| } | |
| // 登出功能 | |
| function logout() { | |
| document.getElementById('mainSystem').classList.remove('active'); | |
| document.getElementById('loginContainer').classList.remove('hidden'); | |
| // 清空輸入欄位 | |
| document.getElementById('username').value = ''; | |
| document.getElementById('password').value = ''; | |
| document.getElementById('captchaInput').value = ''; | |
| document.getElementById('message').textContent = ''; | |
| // 重新生成驗證碼 | |
| generateCaptcha(); | |
| } | |
| // 頁籤切換功能 | |
| function showTab(tabName) { | |
| // 隱藏所有頁籤內容 | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // 移除所有按鈕的 active 狀態 | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => button.classList.remove('active')); | |
| // 顯示選中的頁籤內容 | |
| document.getElementById(tabName).classList.add('active'); | |
| // 設定對應按鈕為 active | |
| event.target.classList.add('active'); | |
| } | |
| // Enter 鍵登入 | |
| document.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| login(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |