Spaces:

mikao007
/

LLM_webSystem

Running

App Files Files Community

mikao007 commited on Sep 7, 2025

Commit

c5edfec

verified ·

1 Parent(s): 17abbb1

Update index.html

Browse files

Files changed (1) hide show

index.html +388 -779

index.html CHANGED Viewed

@@ -3,10 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LLM+ Web scraping Application</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         * {
             margin: 0;
             padding: 0;
@@ -14,644 +12,288 @@
         }
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: radial-gradient(ellipse at top, #667eea 0%, #764ba2 50%, #f093fb 100%);
-            min-height: 100vh;
-            position: relative;
-            overflow-x: hidden;
         }
-        body::before {
-            content: '';
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background:
-                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
-            z-index: -1;
         }
-        .container {
-            max-width: 1600px;
-            margin: 0 auto;
-            padding: 15px;
-            min-height: 100vh;
         }
-        .header {
             text-align: center;
-            margin-bottom: 25px;
-            color: white;
-            position: relative;
-        }
-        .main-title {
-            font-size: 3.2rem;
-            font-weight: 700;
-            margin-bottom: 15px;
-            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
-            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
         }
-        .subtitle {
-            font-size: 1.2rem;
-            opacity: 0.95;
-            font-weight: 400;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-            margin-bottom: 5px;
         }
-        .app-container {
-            display: flex;
-            background: rgba(255,255,255,0.95);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            box-shadow:
-                0 25px 50px rgba(0,0,0,0.15),
-                0 0 0 1px rgba(255,255,255,0.2);
-            overflow: hidden;
-            min-height: 800px;
-            border: 1px solid rgba(255,255,255,0.2);
-        }
-        .sidebar {
-            width: 320px;
-            background: linear-gradient(180deg,
-                rgba(30, 41, 59, 0.95) 0%,
-                rgba(51, 65, 85, 0.95) 50%,
-                rgba(30, 41, 59, 0.95) 100%);
-            backdrop-filter: blur(10px);
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            position: relative;
         }
-        .sidebar::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(45deg,
-                rgba(59, 130, 246, 0.1) 0%,
-                rgba(147, 51, 234, 0.1) 100%);
-            pointer-events: none;
         }
-        .tab-button {
-            padding: 30px 35px;
-            border: none;
-            background: transparent;
-            color: #f1f5f9;
-            font-size: 1.15rem;
-            font-weight: 500;
-            cursor: pointer;
-            text-align: left;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            border-bottom: 1px solid rgba(255,255,255,0.08);
-            position: relative;
-            overflow: hidden;
         }
-        .tab-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
             width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg,
-                transparent 0%,
-                rgba(59, 130, 246, 0.2) 50%,
-                transparent 100%);
-            transition: left 0.6s ease;
         }
-        .tab-button:hover::before {
-            left: 100%;
         }
-        .tab-button:hover {
-            background: rgba(59, 130, 246, 0.15);
-            transform: translateX(8px);
-            color: #ffffff;
         }
-        .tab-button.active {
-            background: linear-gradient(135deg,
-                rgba(59, 130, 246, 0.3) 0%,
-                rgba(147, 51, 234, 0.3) 100%);
-            border-left: 4px solid #3b82f6;
-            color: #ffffff;
-            box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
-        }
-        .tab-button.active::after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border-top: 12px solid transparent;
-            border-bottom: 12px solid transparent;
-            border-right: 12px solid rgba(255,255,255,0.95);
-            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-        }
-        .tab-title {
-            font-weight: 600;
-            margin-bottom: 8px;
-            font-size: 1.1rem;
             display: flex;
             align-items: center;
         }
-        .tab-title::before {
-            content: '⚡';
-            margin-right: 10px;
-            font-size: 1.2rem;
-        }
-        .tab-button:nth-child(2) .tab-title::before {
-            content: '🤖';
-        }
-        .tab-button:nth-child(3) .tab-title::before {
-            content: '📸';
-        }
-        .tab-description {
-            font-size: 0.95rem;
-            opacity: 0.85;
-            line-height: 1.5;
-            color: #cbd5e1;
-        }
-        .content {
             flex: 1;
-            padding: 0;
-            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-            position: relative;
-        }
-        .tab-content {
-            display: none;
-            width: 100%;
-            height: 100%;
-            padding: 25px;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        .iframe-container {
-            width: 100%;
-            height: 750px;
-            border-radius: 15px;
-            overflow: hidden;
-            box-shadow:
-                0 20px 40px rgba(0,0,0,0.12),
-                0 0 0 1px rgba(0,0,0,0.05);
-            background: white;
-            position: relative;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .iframe-container:hover {
-            transform: translateY(-2px);
-            box-shadow:
-                0 25px 50px rgba(0,0,0,0.15),
-                0 0 0 1px rgba(0,0,0,0.05);
         }
-        iframe {
-            width: 100%;
-            height: 100%;
             border: none;
-            border-radius: 15px;
-        }
-        .loading {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
-            color: #64748b;
-            font-size: 1.15rem;
-            font-weight: 500;
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        }
-        .loading::before {
-            content: '';
-            width: 24px;
-            height: 24px;
-            border: 3px solid #e2e8f0;
-            border-top: 3px solid #3b82f6;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-right: 15px;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
-        .floating-elements {
-            position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: -1;
-        }
-        .floating-element {
-            position: absolute;
-            background: rgba(255,255,255,0.1);
-            border-radius: 50%;
-            animation: float 6s ease-in-out infinite;
-        }
-        .floating-element:nth-child(1) {
-            top: 20%;
-            left: 10%;
-            width: 60px;
-            height: 60px;
-            animation-delay: 0s;
-        }
-        .floating-element:nth-child(2) {
-            top: 60%;
-            right: 15%;
-            width: 80px;
-            height: 80px;
-            animation-delay: 2s;
-        }
-        .floating-element:nth-child(3) {
-            bottom: 30%;
-            left: 20%;
-            width: 40px;
-            height: 40px;
-            animation-delay: 4s;
         }
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            33% { transform: translateY(-20px) rotate(120deg); }
-            66% { transform: translateY(10px) rotate(240deg); }
         }
-        @media (max-width: 1024px) {
-            .container {
-                padding: 10px;
-            }
-            .app-container {
-                min-height: 700px;
-            }
-            .sidebar {
-                width: 280px;
-            }
-            .iframe-container {
-                height: 650px;
-            }
         }
-        @media (max-width: 768px) {
-            .app-container {
-                flex-direction: column;
-                min-height: auto;
-            }
-            .sidebar {
-                width: 100%;
-                flex-direction: row;
-                overflow-x: auto;
-                min-height: auto;
-            }
-            .tab-button {
-                min-width: 250px;
-                white-space: nowrap;
-                padding: 20px 25px;
-            }
-            .tab-button.active::after {
-                display: none;
-            }
-            .iframe-container {
-                height: 500px;
-            }
-            .main-title {
-                font-size: 2.5rem;
-            }
-            .tab-content {
-                padding: 15px;
-            }
         }
-        @media (max-width: 480px) {
-            .main-title {
-                font-size: 2rem;
-            }
-            .iframe-container {
-                height: 400px;
-            }
         }
-        /* 登入頁面樣式 */
-        .login-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(ellipse at center, #667eea 0%, #764ba2 50%, #f093fb 100%);
             display: flex;
-            justify-content: center;
             align-items: center;
-            z-index: 1000;
-            transition: opacity 0.5s ease, visibility 0.5s ease;
-        }
-        .login-container.hidden {
-            opacity: 0;
-            visibility: hidden;
-        }
-        .login-box {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow:
-                0 25px 50px rgba(0,0,0,0.2),
-                0 0 0 1px rgba(255,255,255,0.3);
-            width: 100%;
-            max-width: 420px;
-            position: relative;
-            overflow: hidden;
-        }
-        .login-box::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
         }
-        .login-header {
-            text-align: center;
-            margin-bottom: 35px;
         }
-        .login-title {
-            font-size: 2.2rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .login-subtitle {
-            color: #64748b;
-            font-size: 1rem;
-            font-weight: 400;
         }
-        .form-group {
-            margin-bottom: 25px;
-            position: relative;
         }
-        .form-label {
-            display: block;
-            margin-bottom: 8px;
-            color: #374151;
-            font-weight: 500;
-            font-size: 0.95rem;
         }
-        .form-input {
             width: 100%;
             padding: 15px 20px;
-            border: 2px solid #e5e7eb;
-            border-radius: 12px;
-            font-size: 1rem;
-            transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.8);
-            box-sizing: border-box;
-        }
-        .form-input:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-            background: rgba(255, 255, 255, 1);
         }
-        .captcha-container {
-            display: flex;
-            gap: 10px;
-            align-items: center;
         }
-        .captcha-display {
-            background: #f8fafc;
-            border: 2px solid #e5e7eb;
-            border-radius: 8px;
-            padding: 12px 15px;
-            font-family: 'Courier New', monospace;
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #374151;
-            letter-spacing: 3px;
-            text-align: center;
-            user-select: none;
-            min-width: 100px;
-            position: relative;
-            overflow: hidden;
         }
-        .captcha-display::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 2px,
-                rgba(59, 130, 246, 0.1) 2px,
-                rgba(59, 130, 246, 0.1) 4px
-            );
-        }
-        .captcha-refresh {
-            background: #3b82f6;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 12px 15px;
-            cursor: pointer;
-            font-size: 1.1rem;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
         }
-        .captcha-refresh:hover {
-            background: #2563eb;
-            transform: translateY(-1px);
         }
-        .captcha-input {
-            flex: 1;
         }
-        .login-button {
             width: 100%;
-            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            color: white;
             border: none;
-            border-radius: 12px;
-            padding: 16px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
         }
-        .login-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg,
-                transparent 0%,
-                rgba(255, 255, 255, 0.2) 50%,
-                transparent 100%);
-            transition: left 0.6s ease;
         }
-        .login-button:hover::before {
-            left: 100%;
         }
-        .login-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
         }
-        .login-button:active {
-            transform: translateY(0);
         }
-        .error-message {
-            background: #fef2f2;
-            border: 1px solid #fecaca;
-            color: #dc2626;
-            padding: 12px 15px;
-            border-radius: 8px;
-            margin-top: 15px;
-            font-size: 0.9rem;
-            text-align: center;
-            display: none;
         }
-        .success-message {
-            background: #f0fdf4;
-            border: 1px solid #bbf7d0;
-            color: #16a34a;
-            padding: 12px 15px;
-            border-radius: 8px;
-            margin-top: 15px;
-            font-size: 0.9rem;
-            text-align: center;
-            display: none;
         }
-        /* 登出按鈕 */
-        .logout-button {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-            color: white;
             border: none;
-            border-radius: 12px;
-            padding: 12px 20px;
-            font-size: 0.95rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
-            z-index: 100;
-        }
-        .logout-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
-        }
-        .logout-button:active {
-            transform: translateY(0);
-        }
-        /* 響應式設計 */
-        @media (max-width: 480px) {
-            .login-box {
-                margin: 20px;
-                padding: 30px 25px;
-            }
-            .login-title {
-                font-size: 1.8rem;
-            }
-            .captcha-container {
-                flex-direction: column;
-                gap: 15px;
-            }
-            .captcha-display {
-                width: 100%;
-            }
         }
     </style>
 </head>
@@ -659,99 +301,153 @@
     <!-- 登入頁面 -->
     <div class="login-container" id="loginContainer">
         <div class="login-box">
-            <div class="login-header">
-                <h1 class="login-title">系統登入</h1>
-                <p class="login-subtitle">歡迎使用 LLM+ Web scraping Application</p>
             </div>
-            <form id="loginForm" onsubmit="handleLogin(event)">
-                <div class="form-group">
-                    <label class="form-label" for="username">帳號</label>
-                    <input type="text" id="username" class="form-input" placeholder="請輸入帳號" required>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="password">密碼</label>
-                    <input type="password" id="password" class="form-input" placeholder="請輸入密碼" required>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="captcha">驗證碼</label>
-                    <div class="captcha-container">
-                        <div class="captcha-display" id="captchaDisplay"></div>
-                        <button type="button" class="captcha-refresh" onclick="generateCaptcha()" title="重新生成驗證碼">
-                            🔄
-                        </button>
-                        <input type="text" id="captcha" class="form-input captcha-input" placeholder="請輸入驗證碼" required>
-                    </div>
-                </div>
-                <button type="submit" class="login-button">登入</button>
-                <div class="error-message" id="errorMessage"></div>
-                <div class="success-message" id="successMessage"></div>
-            </form>
         </div>
     </div>
-    <!-- 登出按鈕 -->
-    <button class="logout-button" id="logoutButton" onclick="handleLogout()" style="display: none;">
-        登出
-    </button>
-    <div class="floating-elements">
-        <div class="floating-element"></div>
-        <div class="floating-element"></div>
-        <div class="floating-element"></div>
-    </div>
-    <div class="container" id="mainContainer" style="display: none;">
         <div class="header">
-            <h1 class="main-title">LLM+ Web scraping Application</h1>
-            <p class="subtitle">mikao07@2025copyright</p>
         </div>
-        <div class="app-container">
             <div class="sidebar">
-                <button class="tab-button active" onclick="showTab('tab1')">
-                    <div class="tab-title">ESG爬蟲</div>
-                    <div class="tab-description">環境、社會與治理數據爬蟲工具</div>
-                </button>
-                <button class="tab-button" onclick="showTab('tab2')">
-                    <div class="tab-title">多模態API應用</div>
-                    <div class="tab-description">整合多種模態的API應用介面</div>
-                </button>
-                <button class="tab-button" onclick="showTab('tab3')">
-                    <div class="tab-title">OCR識別並傳送至LINE</div>
-                    <div class="tab-description">攝影機拍照OCR文字辨識並發送至LINE Bot</div>
-                </button>
             </div>
-            <div class="content">
-                <div id="tab1" class="tab-content active">
-                    <div class="iframe-container">
-                        <div class="loading">載入中...</div>
-                        <iframe src="https://mikao007-g-space-st.hf.space" onload="hideLoading(this)"></iframe>
                     </div>
                 </div>
-                <div id="tab2" class="tab-content">
-                    <div class="iframe-container">
-                        <div class="loading">載入中...</div>
-                        <iframe src="https://mikao007-groq-api-gradio.hf.space" onload="hideLoading(this)"></iframe>
                     </div>
                 </div>
-                <div id="tab3" class="tab-content">
-                    <div class="iframe-container">
-                        <div class="loading">載入中...</div>
-                        <iframe
-                            src="https://mikao007-webcam-groq-linebot.hf.space"
-                            onload="hideLoading(this)"
-                            allow="camera *; microphone *; fullscreen *; clipboard-read; clipboard-write; web-share"
-                            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-downloads allow-top-navigation-by-user-activation"
-                            referrerpolicy="strict-origin-when-cross-origin">
-                        </iframe>
                     </div>
                 </div>
             </div>
@@ -759,200 +455,113 @@
     </div>
     <script>
-        // 全局變量
-        let currentCaptcha = '';
-        // 使用SHA-256
-        const VALID_USERNAME_HASH = '8b3404dd5f3ff5c6a8c8fbd8b4a2c39c7bdf67fe31c1a46c1b63a2ed59e6d7b8';
-        const VALID_PASSWORD_HASH = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92';
-        // SHA-256 雜湊函數
-        async function sha256(text) {
-            const encoder = new TextEncoder();
-            const data = encoder.encode(text);
-            const hash = await crypto.subtle.digest('SHA-256', data);
-            const hashArray = Array.from(new Uint8Array(hash));
-            const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-            return hashHex;
-        }
         // 生成驗證碼
         function generateCaptcha() {
             const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
             let result = '';
-            for (let i = 0; i < 5; i++) {
                 result += chars.charAt(Math.floor(Math.random() * chars.length));
             }
-            currentCaptcha = result;
-            document.getElementById('captchaDisplay').textContent = result;
-        }
-        // 顯示錯誤訊息
-        function showError(message) {
-            const errorDiv = document.getElementById('errorMessage');
-            const successDiv = document.getElementById('successMessage');
-            errorDiv.textContent = message;
-            errorDiv.style.display = 'block';
-            successDiv.style.display = 'none';
-            // 3秒後自動隱藏
-            setTimeout(() => {
-                errorDiv.style.display = 'none';
-            }, 3000);
         }
-        // 顯示成功訊息
-        function showSuccess(message) {
-            const successDiv = document.getElementById('successMessage');
-            const errorDiv = document.getElementById('errorMessage');
-            successDiv.textContent = message;
-            successDiv.style.display = 'block';
-            errorDiv.style.display = 'none';
-        }
-        // 處理登入 (使用雜湊驗證)
-        async function handleLogin(event) {
-            event.preventDefault();
-            const username = document.getElementById('username').value.trim();
             const password = document.getElementById('password').value;
-            const captcha = document.getElementById('captcha').value.trim().toUpperCase();
-            // 驗證輸入
-            if (!username || !password || !captcha) {
-                showError('請填寫所有欄位');
-                return;
-            }
             // 驗證驗證碼
-            if (captcha !== currentCaptcha) {
-                showError('驗證碼錯誤，請重新輸入');
-                generateCaptcha(); // 重新生成驗證碼
-                document.getElementById('captcha').value = '';
                 return;
             }
             try {
-                // 計算輸入的帳號密碼雜湊值
                 const usernameHash = await sha256(username);
                 const passwordHash = await sha256(password);
-                // 驗證帳號密碼雜湊 (使用動態計算的正確雜湊值)
-                if (usernameHash !== window.CORRECT_USERNAME_HASH || passwordHash !== window.CORRECT_PASSWORD_HASH) {
-                    showError('帳號或密碼錯誤');
-                    generateCaptcha(); // 重新生成驗證碼
-                    document.getElementById('captcha').value = '';
-                    return;
-                }
-                // 登入成功
-                showSuccess('登入成功，正在跳轉...');
-                setTimeout(() => {
-                    // 隱藏登入頁面
-                    document.getElementById('loginContainer').classList.add('hidden');
-                    // 顯示主系統
                     setTimeout(() => {
-                        document.getElementById('loginContainer').style.display = 'none';
-                        document.getElementById('mainContainer').style.display = 'block';
-                        document.getElementById('logoutButton').style.display = 'block';
-                    }, 500);
-                }, 1000);
             } catch (error) {
-                showError('系統錯誤，請稍後再試');
-                console.error('雜湊計算錯誤:', error);
-            }
-        }
-        // 處理登出
-        function handleLogout() {
-            if (confirm('確定要登出嗎？')) {
-                // 隱藏主系統
-                document.getElementById('mainContainer').style.display = 'none';
-                document.getElementById('logoutButton').style.display = 'none';
-                // 顯示登入頁面
-                document.getElementById('loginContainer').style.display = 'flex';
-                document.getElementById('loginContainer').classList.remove('hidden');
-                // 清空表單
-                document.getElementById('loginForm').reset();
                 generateCaptcha();
-                // 隱藏訊息
-                document.getElementById('errorMessage').style.display = 'none';
-                document.getElementById('successMessage').style.display = 'none';
             }
         }
-        // 標籤切換功能
-        function showTab(tabId) {
-            // 隱藏所有內容
-            const contents = document.querySelectorAll('.tab-content');
-            contents.forEach(content => {
-                content.classList.remove('active');
-            });
-            // 移除所有按鈕的active狀態
-            const buttons = document.querySelectorAll('.tab-button');
-            buttons.forEach(button => {
-                button.classList.remove('active');
-            });
-            // 顯示選中的內容
-            document.getElementById(tabId).classList.add('active');
-            // 添加選中按鈕的active狀態
-            event.target.closest('.tab-button').classList.add('active');
         }
-        function hideLoading(iframe) {
-            const container = iframe.parentElement;
-            const loading = container.querySelector('.loading');
-            if (loading) {
-                loading.style.display = 'none';
-            }
-            iframe.style.display = 'block';
         }
-        // 計算並顯示正確的雜湊值 (僅供開發驗證使用)
-        async function calculateCorrectHashes() {
-            const usernameHash = await sha256('ROOT2025');
-            const passwordHash = await sha256('123456');
-            console.log('正確的帳號雜湊值:', usernameHash);
-            console.log('正確的密碼雜湊值:', passwordHash);
-            // 更新正確的雜湊值
-            window.CORRECT_USERNAME_HASH = usernameHash;
-            window.CORRECT_PASSWORD_HASH = passwordHash;
         }
-        // 初始化
-        document.addEventListener('DOMContentLoaded', async function() {
-            // 初始化載入動畫
-            const iframes = document.querySelectorAll('iframe');
-            iframes.forEach(iframe => {
-                iframe.style.display = 'none';
-            });
-            // 計算正確的雜湊值
-            await calculateCorrectHashes();
-            // 生成第一個驗證碼
-            generateCaptcha();
-            // 為驗證碼輸入框添加大寫轉換
-            document.getElementById('captcha').addEventListener('input', function(e) {
-                e.target.value = e.target.value.toUpperCase();
-            });
-            // Enter 鍵提交登入表單
-            document.getElementById('loginForm').addEventListener('keypress', async function(e) {
-                if (e.key === 'Enter') {
-                    await handleLogin(e);
-                }
-            });
         });
     </script>
 </body>
-</html>

 <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;
         }
         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>
     <!-- 登入頁面 -->
     <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>
     <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>