Spaces:

ASEM12345
/

monica-proxy

Running

App Files Files Community

asemxin commited on Jan 23

Commit

cc8eb0f

1 Parent(s): 6b10e4d

Add full model list display and cookie management UI

Browse files

Files changed (2) hide show

index.html +361 -96
server.py +100 -2

index.html CHANGED Viewed

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Monica Proxy - Cookie 状态检测</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
@@ -19,13 +20,13 @@
             --error-color: #ff453a;
             --warning-color: #ffd60a;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             background: var(--bg-primary);
@@ -35,16 +36,16 @@
             align-items: center;
             justify-content: center;
             padding: 20px;
-            background-image:
                 radial-gradient(ellipse 80% 50% at 50% -20%, rgba(102, 126, 234, 0.15), transparent),
                 radial-gradient(ellipse 60% 40% at 100% 100%, rgba(118, 75, 162, 0.1), transparent);
         }
         .container {
             width: 100%;
-            max-width: 520px;
         }
         .card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
@@ -52,19 +53,20 @@
             padding: 40px;
             backdrop-filter: blur(20px);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         .header {
             text-align: center;
             margin-bottom: 36px;
         }
         .logo {
             font-size: 48px;
             margin-bottom: 16px;
             display: block;
         }
         h1 {
             font-size: 24px;
             font-weight: 600;
@@ -74,16 +76,16 @@
             background-clip: text;
             margin-bottom: 8px;
         }
         .subtitle {
             color: var(--text-secondary);
             font-size: 14px;
         }
         .form-group {
             margin-bottom: 20px;
         }
         label {
             display: block;
             font-size: 13px;
@@ -91,8 +93,9 @@
             color: var(--text-secondary);
             margin-bottom: 8px;
         }
-        input {
             width: 100%;
             padding: 14px 16px;
             background: var(--bg-secondary);
@@ -103,18 +106,27 @@
             font-family: inherit;
             transition: all 0.2s ease;
         }
-        input:focus {
             outline: none;
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
         }
-        input::placeholder {
             color: var(--text-secondary);
             opacity: 0.6;
         }
         .btn {
             width: 100%;
             padding: 16px;
@@ -129,22 +141,36 @@
             transition: all 0.2s ease;
             margin-top: 8px;
         }
         .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
         }
         .btn:active {
             transform: translateY(0);
         }
         .btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
             transform: none;
         }
         .status-panel {
             margin-top: 28px;
             padding: 20px;
@@ -152,20 +178,20 @@
             border-radius: 14px;
             border: 1px solid var(--border-color);
         }
         .status-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 16px;
         }
         .status-label {
             font-size: 13px;
             font-weight: 500;
             color: var(--text-secondary);
         }
         .status-badge {
             display: flex;
             align-items: center;
@@ -175,49 +201,56 @@
             font-size: 12px;
             font-weight: 600;
         }
         .status-badge.idle {
             background: rgba(142, 142, 147, 0.15);
             color: var(--text-secondary);
         }
         .status-badge.loading {
             background: rgba(255, 214, 10, 0.15);
             color: var(--warning-color);
         }
         .status-badge.success {
             background: rgba(48, 209, 88, 0.15);
             color: var(--success-color);
         }
         .status-badge.error {
             background: rgba(255, 69, 58, 0.15);
             color: var(--error-color);
         }
         .status-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
             background: currentColor;
         }
         .status-badge.loading .status-dot {
             animation: pulse 1.5s ease-in-out infinite;
         }
         @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
         }
         .status-details {
             font-size: 13px;
             color: var(--text-secondary);
             line-height: 1.6;
         }
         .status-details pre {
             background: rgba(0, 0, 0, 0.3);
             padding: 12px;
@@ -229,91 +262,249 @@
             white-space: pre-wrap;
             word-break: break-all;
         }
         .model-list {
-            margin-top: 12px;
         }
         .model-item {
             display: flex;
             align-items: center;
-            gap: 8px;
-            padding: 8px 12px;
             background: rgba(255, 255, 255, 0.03);
-            border-radius: 8px;
-            margin-bottom: 6px;
-            font-size: 13px;
         }
         .model-icon {
-            font-size: 16px;
         }
         .model-name {
             flex: 1;
             font-family: 'SF Mono', 'Consolas', monospace;
         }
         .footer {
             text-align: center;
             margin-top: 24px;
             font-size: 12px;
             color: var(--text-secondary);
         }
         .footer a {
             color: #667eea;
             text-decoration: none;
         }
         .footer a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="card">
             <div class="header">
                 <span class="logo">🤖</span>
                 <h1>Monica Proxy</h1>
-                <p class="subtitle">Cookie 状态检测工具</p>
-            </div>
-            <div class="form-group">
-                <label for="apiUrl">API 地址</label>
-                <input type="text" id="apiUrl" value="https://asem12345-monica-proxy.hf.space" placeholder="输入 API 地址">
             </div>
-            <div class="form-group">
-                <label for="bearerToken">Bearer Token</label>
-                <input type="password" id="bearerToken" placeholder="输入你的 Bearer Token">
             </div>
-            <button class="btn" id="checkBtn" onclick="checkStatus()">
-                检测 Cookie 状态
-            </button>
-            <div class="status-panel">
-                <div class="status-header">
-                    <span class="status-label">状态</span>
-                    <div class="status-badge idle" id="statusBadge">
-                        <span class="status-dot"></span>
-                        <span id="statusText">等待检测</span>
                     </div>
                 </div>
-                <div class="status-details" id="statusDetails">
-                    点击上方按钮检测 Monica Proxy 的 Cookie 是否可用。
                 </div>
             </div>
         </div>
         <div class="footer">
             Powered by <a href="https://github.com/ycvk/monica-proxy" target="_blank">ycvk/monica-proxy</a>
         </div>
     </div>
     <script>
         async function checkStatus() {
             const apiUrl = document.getElementById('apiUrl').value.trim().replace(/\/$/, '');
             const bearerToken = document.getElementById('bearerToken').value.trim();
@@ -321,24 +512,24 @@
             const statusBadge = document.getElementById('statusBadge');
             const statusText = document.getElementById('statusText');
             const statusDetails = document.getElementById('statusDetails');
             if (!apiUrl) {
                 alert('请输入 API 地址');
                 return;
             }
             if (!bearerToken) {
                 alert('请输入 Bearer Token');
                 return;
             }
             // Loading state
             btn.disabled = true;
             btn.textContent = '检测中...';
             statusBadge.className = 'status-badge loading';
             statusText.textContent = '检测中';
             statusDetails.innerHTML = '正在连接到 Monica Proxy...';
             try {
                 const response = await fetch(`${apiUrl}/v1/models`, {
                     method: 'GET',
@@ -347,23 +538,30 @@
                         'Content-Type': 'application/json'
                     }
                 });
                 const data = await response.json();
                 if (response.ok && data.data && data.data.length > 0) {
                     // Success
                     statusBadge.className = 'status-badge success';
                     statusText.textContent = 'Cookie 可用';
-                    let modelsHtml = `<p>✅ Cookie 工作正常！检测到 <strong>${data.data.length}</strong> 个可用模型：</p><div class="model-list">`;
-                    data.data.slice(0, 10).forEach(model => {
-                        modelsHtml += `<div class="model-item"><span class="model-icon">🧠</span><span class="model-name">${model.id}</span></div>`;
                     });
-                    if (data.data.length > 10) {
-                        modelsHtml += `<div class="model-item" style="color: var(--text-secondary);">... 还有 ${data.data.length - 10} 个模型</div>`;
-                    }
-                    modelsHtml += '</div>';
-                    statusDetails.innerHTML = modelsHtml;
                 } else if (response.status === 401) {
                     // Unauthorized
                     statusBadge.className = 'status-badge error';
@@ -373,7 +571,11 @@
                     // Other error - possibly cookie issue
                     statusBadge.className = 'status-badge error';
                     statusText.textContent = 'Cookie 失效';
-                    statusDetails.innerHTML = `<p>❌ Cookie 可能已失效或存在其他问题</p><pre>${JSON.stringify(data, null, 2)}</pre>`;
                 }
             } catch (error) {
                 statusBadge.className = 'status-badge error';
@@ -384,13 +586,76 @@
                 btn.textContent = '检测 Cookie 状态';
             }
         }
         // Allow Enter key to trigger check
-        document.getElementById('bearerToken').addEventListener('keypress', function(e) {
             if (e.key === 'Enter') {
                 checkStatus();
             }
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Monica Proxy - 控制面板</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
             --error-color: #ff453a;
             --warning-color: #ffd60a;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             background: var(--bg-primary);
             align-items: center;
             justify-content: center;
             padding: 20px;
+            background-image:
                 radial-gradient(ellipse 80% 50% at 50% -20%, rgba(102, 126, 234, 0.15), transparent),
                 radial-gradient(ellipse 60% 40% at 100% 100%, rgba(118, 75, 162, 0.1), transparent);
         }
         .container {
             width: 100%;
+            max-width: 600px;
         }
         .card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             padding: 40px;
             backdrop-filter: blur(20px);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            margin-bottom: 20px;
         }
         .header {
             text-align: center;
             margin-bottom: 36px;
         }
         .logo {
             font-size: 48px;
             margin-bottom: 16px;
             display: block;
         }
         h1 {
             font-size: 24px;
             font-weight: 600;
             background-clip: text;
             margin-bottom: 8px;
         }
         .subtitle {
             color: var(--text-secondary);
             font-size: 14px;
         }
         .form-group {
             margin-bottom: 20px;
         }
         label {
             display: block;
             font-size: 13px;
             color: var(--text-secondary);
             margin-bottom: 8px;
         }
+        input,
+        textarea {
             width: 100%;
             padding: 14px 16px;
             background: var(--bg-secondary);
             font-family: inherit;
             transition: all 0.2s ease;
         }
+        textarea {
+            resize: vertical;
+            min-height: 80px;
+            font-family: 'SF Mono', 'Consolas', monospace;
+            font-size: 12px;
+        }
+        input:focus,
+        textarea:focus {
             outline: none;
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
         }
+        input::placeholder,
+        textarea::placeholder {
             color: var(--text-secondary);
             opacity: 0.6;
         }
         .btn {
             width: 100%;
             padding: 16px;
             transition: all 0.2s ease;
             margin-top: 8px;
         }
         .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
         }
         .btn:active {
             transform: translateY(0);
         }
         .btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
             transform: none;
         }
+        .btn-secondary {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: none;
+        }
+        .btn-danger {
+            background: linear-gradient(135deg, #ff453a 0%, #d63031 100%);
+        }
         .status-panel {
             margin-top: 28px;
             padding: 20px;
             border-radius: 14px;
             border: 1px solid var(--border-color);
         }
         .status-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 16px;
         }
         .status-label {
             font-size: 13px;
             font-weight: 500;
             color: var(--text-secondary);
         }
         .status-badge {
             display: flex;
             align-items: center;
             font-size: 12px;
             font-weight: 600;
         }
         .status-badge.idle {
             background: rgba(142, 142, 147, 0.15);
             color: var(--text-secondary);
         }
         .status-badge.loading {
             background: rgba(255, 214, 10, 0.15);
             color: var(--warning-color);
         }
         .status-badge.success {
             background: rgba(48, 209, 88, 0.15);
             color: var(--success-color);
         }
         .status-badge.error {
             background: rgba(255, 69, 58, 0.15);
             color: var(--error-color);
         }
         .status-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
             background: currentColor;
         }
         .status-badge.loading .status-dot {
             animation: pulse 1.5s ease-in-out infinite;
         }
         @keyframes pulse {
+            0%,
+            100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.4;
+            }
         }
         .status-details {
             font-size: 13px;
             color: var(--text-secondary);
             line-height: 1.6;
         }
         .status-details pre {
             background: rgba(0, 0, 0, 0.3);
             padding: 12px;
             white-space: pre-wrap;
             word-break: break-all;
         }
         .model-list {
+            margin-top: 16px;
+            max-height: 400px;
+            overflow-y: auto;
         }
         .model-item {
             display: flex;
             align-items: center;
+            gap: 10px;
+            padding: 10px 14px;
             background: rgba(255, 255, 255, 0.03);
+            border-radius: 10px;
+            margin-bottom: 8px;
+            border: 1px solid transparent;
+            transition: all 0.2s ease;
         }
+        .model-item:hover {
+            border-color: var(--border-color);
+            background: rgba(255, 255, 255, 0.05);
+        }
         .model-icon {
+            font-size: 18px;
         }
         .model-name {
             flex: 1;
             font-family: 'SF Mono', 'Consolas', monospace;
+            font-size: 13px;
+        }
+        .model-count {
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 600;
+            font-size: 14px;
+        }
+        .section-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .section-title .icon {
+            font-size: 20px;
+        }
+        .tabs {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+        .tab {
+            flex: 1;
+            padding: 12px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            color: var(--text-secondary);
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-align: center;
+        }
+        .tab:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .tab.active {
+            background: var(--accent-gradient);
+            color: white;
+            border-color: transparent;
         }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
         .footer {
             text-align: center;
             margin-top: 24px;
             font-size: 12px;
             color: var(--text-secondary);
         }
         .footer a {
             color: #667eea;
             text-decoration: none;
         }
         .footer a:hover {
             text-decoration: underline;
         }
+        .alert {
+            padding: 14px 16px;
+            border-radius: 10px;
+            font-size: 13px;
+            margin-bottom: 16px;
+            display: none;
+        }
+        .alert.success {
+            background: rgba(48, 209, 88, 0.15);
+            border: 1px solid rgba(48, 209, 88, 0.3);
+            color: var(--success-color);
+            display: block;
+        }
+        .alert.error {
+            background: rgba(255, 69, 58, 0.15);
+            border: 1px solid rgba(255, 69, 58, 0.3);
+            color: var(--error-color);
+            display: block;
+        }
+        .info-box {
+            background: rgba(102, 126, 234, 0.1);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 10px;
+            padding: 14px 16px;
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+        }
+        .info-box code {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'SF Mono', 'Consolas', monospace;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="card">
             <div class="header">
                 <span class="logo">🤖</span>
                 <h1>Monica Proxy</h1>
+                <p class="subtitle">控制面板</p>
             </div>
+            <div class="tabs">
+                <div class="tab active" onclick="switchTab('status')">📊 状态检测</div>
+                <div class="tab" onclick="switchTab('cookie')">🔑 Cookie 管理</div>
             </div>
+            <!-- Status Tab -->
+            <div id="status-tab" class="tab-content active">
+                <div class="form-group">
+                    <label for="apiUrl">API 地址</label>
+                    <input type="text" id="apiUrl" value="https://asem12345-monica-proxy.hf.space"
+                        placeholder="输入 API 地址">
+                </div>
+                <div class="form-group">
+                    <label for="bearerToken">Bearer Token</label>
+                    <input type="password" id="bearerToken" placeholder="输入你的 Bearer Token">
+                </div>
+                <button class="btn" id="checkBtn" onclick="checkStatus()">
+                    检测 Cookie 状态
+                </button>
+                <div class="status-panel">
+                    <div class="status-header">
+                        <span class="status-label">状态</span>
+                        <div class="status-badge idle" id="statusBadge">
+                            <span class="status-dot"></span>
+                            <span id="statusText">等待检测</span>
+                        </div>
                     </div>
+                    <div class="status-details" id="statusDetails">
+                        点击上方按钮检测 Monica Proxy 的 Cookie 是否可用。
+                    </div>
+                </div>
+            </div>
+            <!-- Cookie Management Tab -->
+            <div id="cookie-tab" class="tab-content">
+                <div class="info-box">
+                    ⚠️ 更新 Cookie 需要提供 Bearer Token 进行身份验证。Cookie 更新后，代理服务将自动重启以应用新配置。
+                </div>
+                <div id="cookieAlert" class="alert"></div>
+                <div class="form-group">
+                    <label for="cookieApiUrl">API 地址</label>
+                    <input type="text" id="cookieApiUrl" value="https://asem12345-monica-proxy.hf.space"
+                        placeholder="输入 API 地址">
+                </div>
+                <div class="form-group">
+                    <label for="cookieBearerToken">Bearer Token（身份验证）</label>
+                    <input type="password" id="cookieBearerToken" placeholder="输入你的 Bearer Token">
                 </div>
+                <div class="form-group">
+                    <label for="newCookie">新的 MONICA_COOKIE</label>
+                    <textarea id="newCookie" placeholder="粘贴新的 Monica Cookie 值..."></textarea>
                 </div>
+                <button class="btn btn-danger" id="updateCookieBtn" onclick="updateCookie()">
+                    🔄 更新 Cookie
+                </button>
             </div>
         </div>
         <div class="footer">
             Powered by <a href="https://github.com/ycvk/monica-proxy" target="_blank">ycvk/monica-proxy</a>
         </div>
     </div>
     <script>
+        function switchTab(tabName) {
+            // Update tab buttons
+            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+            event.target.classList.add('active');
+            // Update tab content
+            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+            document.getElementById(tabName + '-tab').classList.add('active');
+        }
         async function checkStatus() {
             const apiUrl = document.getElementById('apiUrl').value.trim().replace(/\/$/, '');
             const bearerToken = document.getElementById('bearerToken').value.trim();
             const statusBadge = document.getElementById('statusBadge');
             const statusText = document.getElementById('statusText');
             const statusDetails = document.getElementById('statusDetails');
             if (!apiUrl) {
                 alert('请输入 API 地址');
                 return;
             }
             if (!bearerToken) {
                 alert('请输入 Bearer Token');
                 return;
             }
             // Loading state
             btn.disabled = true;
             btn.textContent = '检测中...';
             statusBadge.className = 'status-badge loading';
             statusText.textContent = '检测中';
             statusDetails.innerHTML = '正在连接到 Monica Proxy...';
             try {
                 const response = await fetch(`${apiUrl}/v1/models`, {
                     method: 'GET',
                         'Content-Type': 'application/json'
                     }
                 });
                 const data = await response.json();
                 if (response.ok && data.data && data.data.length > 0) {
                     // Success
                     statusBadge.className = 'status-badge success';
                     statusText.textContent = 'Cookie 可用';
+                    let html = `
+                        <p>✅ Cookie 工作正常！</p>
+                        <div style="margin-top: 16px; display: flex; align-items: center; justify-content: space-between;">
+                            <span class="section-title" style="margin: 0;"><span class="icon">🧠</span> 可用模型</span>
+                            <span class="model-count">${data.data.length} 个</span>
+                        </div>
+                        <div class="model-list">
+                    `;
+                    data.data.forEach(model => {
+                        const icon = getModelIcon(model.id);
+                        html += `<div class="model-item"><span class="model-icon">${icon}</span><span class="model-name">${model.id}</span></div>`;
                     });
+                    html += '</div>';
+                    statusDetails.innerHTML = html;
                 } else if (response.status === 401) {
                     // Unauthorized
                     statusBadge.className = 'status-badge error';
                     // Other error - possibly cookie issue
                     statusBadge.className = 'status-badge error';
                     statusText.textContent = 'Cookie 失效';
+                    statusDetails.innerHTML = `
+                        <p>❌ Cookie 可能已失效或存在其他问题</p>
+                        <pre>${JSON.stringify(data, null, 2)}</pre>
+                        <p style="margin-top: 16px;">👉 请切换到 <strong>Cookie 管理</strong> 标签页更新 Cookie</p>
+                    `;
                 }
             } catch (error) {
                 statusBadge.className = 'status-badge error';
                 btn.textContent = '检测 Cookie 状态';
             }
         }
+        function getModelIcon(modelId) {
+            const id = modelId.toLowerCase();
+            if (id.includes('gpt')) return '🟢';
+            if (id.includes('claude')) return '🟠';
+            if (id.includes('gemini')) return '🔵';
+            if (id.includes('grok')) return '⚫';
+            if (id.includes('llama')) return '🦙';
+            if (id.includes('qwen')) return '🟣';
+            if (id.includes('deepseek')) return '🔷';
+            if (id.includes('sonar')) return '📡';
+            if (id.includes('o1') || id.includes('o3')) return '🧪';
+            return '🤖';
+        }
+        async function updateCookie() {
+            const apiUrl = document.getElementById('cookieApiUrl').value.trim().replace(/\/$/, '');
+            const bearerToken = document.getElementById('cookieBearerToken').value.trim();
+            const newCookie = document.getElementById('newCookie').value.trim();
+            const btn = document.getElementById('updateCookieBtn');
+            const alertBox = document.getElementById('cookieAlert');
+            if (!apiUrl || !bearerToken || !newCookie) {
+                showAlert('error', '请填写所有字段');
+                return;
+            }
+            btn.disabled = true;
+            btn.textContent = '更新中...';
+            alertBox.className = 'alert';
+            try {
+                const response = await fetch(`${apiUrl}/admin/update-cookie`, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${bearerToken}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ cookie: newCookie })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    showAlert('success', '✅ Cookie 更新成功！服务将在几秒后重启。');
+                    document.getElementById('newCookie').value = '';
+                } else {
+                    showAlert('error', `❌ 更新失败: ${data.error || data.message || '未知错误'}`);
+                }
+            } catch (error) {
+                showAlert('error', `❌ 请求失败: ${error.message}`);
+            } finally {
+                btn.disabled = false;
+                btn.textContent = '🔄 更新 Cookie';
+            }
+        }
+        function showAlert(type, message) {
+            const alertBox = document.getElementById('cookieAlert');
+            alertBox.className = `alert ${type}`;
+            alertBox.textContent = message;
+        }
         // Allow Enter key to trigger check
+        document.getElementById('bearerToken').addEventListener('keypress', function (e) {
             if (e.key === 'Enter') {
                 checkStatus();
             }
         });
     </script>
 </body>
+</html>

server.py CHANGED Viewed

@@ -1,14 +1,19 @@
 """
 Simple reverse proxy + static file server for Monica Proxy
 """
 import asyncio
 import subprocess
 import os
 from aiohttp import web, ClientSession, ClientTimeout
 BACKEND_PORT = 8080
 FRONTEND_PORT = 7860
 async def proxy_handler(request: web.Request):
     """Proxy requests to monica-proxy backend"""
     backend_url = f"http://127.0.0.1:{BACKEND_PORT}{request.path_qs}"
@@ -43,6 +48,87 @@ async def index_handler(request: web.Request):
     """Serve the status page"""
     return web.FileResponse('index.html')
 async def start_backend():
     """Start monica-proxy in background"""
     env = os.environ.copy()
@@ -68,16 +154,26 @@ async def start_backend():
     return process
 async def main():
     # Start backend
     print(f"Starting monica-proxy on port {BACKEND_PORT}...")
-    backend = await start_backend()
     # Give backend time to start
     await asyncio.sleep(2)
     # Setup web server
     app = web.Application()
     app.router.add_get('/', index_handler)
     app.router.add_route('*', '/v1/{path:.*}', proxy_handler)
     app.router.add_route('*', '/{path:.*}', proxy_handler)
@@ -91,12 +187,14 @@ async def main():
     print(f"Server ready!")
     print(f"  Status page: http://0.0.0.0:{FRONTEND_PORT}/")
     print(f"  API: http://0.0.0.0:{FRONTEND_PORT}/v1/...")
     # Keep running
     try:
         await asyncio.Event().wait()
     finally:
-        backend.terminate()
 if __name__ == '__main__':
     asyncio.run(main())

 """
 Simple reverse proxy + static file server for Monica Proxy
+with admin endpoints for cookie management
 """
 import asyncio
 import subprocess
 import os
+import signal
 from aiohttp import web, ClientSession, ClientTimeout
 BACKEND_PORT = 8080
 FRONTEND_PORT = 7860
+# Global reference to backend process
+backend_process = None
 async def proxy_handler(request: web.Request):
     """Proxy requests to monica-proxy backend"""
     backend_url = f"http://127.0.0.1:{BACKEND_PORT}{request.path_qs}"
     """Serve the status page"""
     return web.FileResponse('index.html')
+async def update_cookie_handler(request: web.Request):
+    """Update MONICA_COOKIE and restart backend"""
+    global backend_process
+    # Verify authorization
+    auth_header = request.headers.get('Authorization', '')
+    expected_token = os.environ.get('BEARER_TOKEN', '')
+    if not expected_token:
+        return web.json_response(
+            {"error": "BEARER_TOKEN not configured on server"},
+            status=500
+        )
+    if not auth_header.startswith('Bearer ') or auth_header[7:] != expected_token:
+        return web.json_response(
+            {"error": "Invalid authorization"},
+            status=401
+        )
+    try:
+        data = await request.json()
+        new_cookie = data.get('cookie', '').strip()
+        if not new_cookie:
+            return web.json_response(
+                {"error": "Cookie value is required"},
+                status=400
+            )
+        # Update environment variable
+        os.environ['MONICA_COOKIE'] = new_cookie
+        print(f"[admin] MONICA_COOKIE updated, length: {len(new_cookie)}")
+        # Restart backend
+        if backend_process:
+            print("[admin] Restarting backend...")
+            backend_process.terminate()
+            await asyncio.sleep(1)
+            backend_process = await start_backend()
+            await asyncio.sleep(2)
+            print("[admin] Backend restarted")
+        return web.json_response({
+            "success": True,
+            "message": "Cookie updated and backend restarted"
+        })
+    except Exception as e:
+        return web.json_response(
+            {"error": str(e)},
+            status=500
+        )
+async def get_cookie_status_handler(request: web.Request):
+    """Get current cookie status (masked)"""
+    auth_header = request.headers.get('Authorization', '')
+    expected_token = os.environ.get('BEARER_TOKEN', '')
+    if not auth_header.startswith('Bearer ') or auth_header[7:] != expected_token:
+        return web.json_response(
+            {"error": "Invalid authorization"},
+            status=401
+        )
+    cookie = os.environ.get('MONICA_COOKIE', '')
+    if cookie:
+        # Mask the cookie, show only first and last 10 chars
+        if len(cookie) > 30:
+            masked = cookie[:10] + '...' + cookie[-10:]
+        else:
+            masked = cookie[:5] + '...'
+    else:
+        masked = '(not set)'
+    return web.json_response({
+        "cookie_set": bool(cookie),
+        "cookie_length": len(cookie),
+        "cookie_preview": masked
+    })
 async def start_backend():
     """Start monica-proxy in background"""
     env = os.environ.copy()
     return process
 async def main():
+    global backend_process
     # Start backend
     print(f"Starting monica-proxy on port {BACKEND_PORT}...")
+    backend_process = await start_backend()
     # Give backend time to start
     await asyncio.sleep(2)
     # Setup web server
     app = web.Application()
+    # Static routes
     app.router.add_get('/', index_handler)
+    # Admin routes
+    app.router.add_post('/admin/update-cookie', update_cookie_handler)
+    app.router.add_get('/admin/cookie-status', get_cookie_status_handler)
+    # Proxy routes (must be last due to catch-all)
     app.router.add_route('*', '/v1/{path:.*}', proxy_handler)
     app.router.add_route('*', '/{path:.*}', proxy_handler)
     print(f"Server ready!")
     print(f"  Status page: http://0.0.0.0:{FRONTEND_PORT}/")
     print(f"  API: http://0.0.0.0:{FRONTEND_PORT}/v1/...")
+    print(f"  Admin: http://0.0.0.0:{FRONTEND_PORT}/admin/...")
     # Keep running
     try:
         await asyncio.Event().wait()
     finally:
+        if backend_process:
+            backend_process.terminate()
 if __name__ == '__main__':
     asyncio.run(main())