Spaces:

ASEM12345
/

monica-proxy

Running

App Files Files Community

asemxin commited on 15 days ago

Commit

776bfbd

1 Parent(s): 784ab0d

Add status page with nginx proxy

Browse files

Files changed (3) hide show

.gitignore +13 -0
Dockerfile +44 -7
index.html +396 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,13 @@

+# Local scripts with secrets
+local_refresh.py
+get_cookie.py
+deploy.py
+# Python
+__pycache__/
+*.pyc
+*.pyo
+# Editor
+.vscode/
+.idea/

Dockerfile CHANGED Viewed

@@ -1,5 +1,5 @@
 # Stage 1: Build from source
-FROM golang:1.23-alpine AS builder
 RUN apk add --no-cache git ca-certificates
@@ -12,19 +12,56 @@ RUN git clone https://github.com/ycvk/monica-proxy.git .
 RUN go mod download
 RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o monica-proxy main.go
-# Stage 2: Runtime
 FROM alpine:latest
-RUN apk --no-cache add ca-certificates tzdata
 WORKDIR /app
 COPY --from=builder /app/monica-proxy .
-# HF Spaces uses port 7860
-ENV SERVER_PORT=7860
-ENV SERVER_HOST=0.0.0.0
 EXPOSE 7860
-CMD ["./monica-proxy"]

 # Stage 1: Build from source
+FROM golang:1.25-alpine AS builder
 RUN apk add --no-cache git ca-certificates
 RUN go mod download
 RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o monica-proxy main.go
+# Stage 2: Runtime with nginx
 FROM alpine:latest
+RUN apk --no-cache add ca-certificates tzdata nginx
 WORKDIR /app
 COPY --from=builder /app/monica-proxy .
+COPY index.html /usr/share/nginx/html/
+# nginx config
+RUN cat > /etc/nginx/http.d/default.conf << 'EOF'
+server {
+listen 7860;
+# Static files (status page)
+location = / {
+root /usr/share/nginx/html;
+try_files /index.html =404;
+}
+location = /index.html {
+root /usr/share/nginx/html;
+}
+# Proxy all API requests to monica-proxy
+location / {
+proxy_pass http://127.0.0.1:8080;
+proxy_http_version 1.1;
+proxy_set_header Host $host;
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+proxy_buffering off;
+proxy_read_timeout 300s;
+}
+}
+EOF
+# Start script
+RUN cat > /app/start.sh << 'EOF'
+#!/bin/sh
+# Start monica-proxy in background on port 8080
+SERVER_PORT=8080 SERVER_HOST=0.0.0.0 ./monica-proxy &
+# Start nginx in foreground
+nginx -g 'daemon off;'
+EOF
+RUN chmod +x /app/start.sh
 EXPOSE 7860
+CMD ["/app/start.sh"]

index.html ADDED Viewed

	@@ -0,0 +1,396 @@

+<!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>
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-card: rgba(255, 255, 255, 0.03);
+            --border-color: rgba(255, 255, 255, 0.08);
+            --text-primary: #f5f5f7;
+            --text-secondary: #8e8e93;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --success-color: #30d158;
+            --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);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            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);
+            border-radius: 20px;
+            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;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            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;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+        }
+        input {
+            width: 100%;
+            padding: 14px 16px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 14px;
+            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;
+            background: var(--accent-gradient);
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-size: 15px;
+            font-weight: 600;
+            font-family: inherit;
+            cursor: pointer;
+            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;
+            background: var(--bg-secondary);
+            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;
+            gap: 6px;
+            padding: 6px 12px;
+            border-radius: 20px;
+            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;
+            border-radius: 8px;
+            overflow-x: auto;
+            font-family: 'SF Mono', 'Consolas', monospace;
+            font-size: 12px;
+            margin-top: 12px;
+            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();
+            const btn = document.getElementById('checkBtn');
+            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',
+                    headers: {
+                        'Authorization': `Bearer ${bearerToken}`,
+                        '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';
+                    statusText.textContent = 'Token 错误';
+                    statusDetails.innerHTML = `<p>❌ Bearer Token 验证失败</p><pre>${JSON.stringify(data, null, 2)}</pre>`;
+                } else {
+                    // 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';
+                statusText.textContent = '连接失败';
+                statusDetails.innerHTML = `<p>❌ 无法连接到 API</p><pre>${error.message}</pre><p style="margin-top: 12px; color: var(--text-secondary);">可能原因：网络问题、CORS 限制、或服务不可用</p>`;
+            } finally {
+                btn.disabled = false;
+                btn.textContent = '检测 Cookie 状态';
+            }
+        }
+        // Allow Enter key to trigger check
+        document.getElementById('bearerToken').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                checkStatus();
+            }
+        });
+    </script>
+</body>
+</html>