|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Gemini API 代理服务</title> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<style> |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
line-height: 1.6; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
h1, h2, h3 { |
|
|
color: #333; |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.info-box { |
|
|
background-color: #fff; |
|
|
border: 1px solid #dee2e6; |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
|
|
} |
|
|
.status { |
|
|
color: #28a745; |
|
|
font-weight: bold; |
|
|
font-size: 18px; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 15px; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.stat-card { |
|
|
background-color: #e9ecef; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
.stat-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
.stat-value { |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
color: #007bff; |
|
|
} |
|
|
.stat-label { |
|
|
font-size: 14px; |
|
|
color: #6c757d; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.section-title { |
|
|
color: #495057; |
|
|
border-bottom: 1px solid #dee2e6; |
|
|
padding-bottom: 10px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.log-container { |
|
|
background-color: #f5f5f5; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
margin-top: 20px; |
|
|
max-height: 500px; |
|
|
overflow-y: auto; |
|
|
font-family: monospace; |
|
|
font-size: 14px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
.log-entry { |
|
|
margin-bottom: 8px; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.log-entry.INFO { |
|
|
background-color: #e8f4f8; |
|
|
border-left: 4px solid #17a2b8; |
|
|
} |
|
|
.log-entry.WARNING { |
|
|
background-color: #fff3cd; |
|
|
border-left: 4px solid #ffc107; |
|
|
} |
|
|
.log-entry.ERROR { |
|
|
background-color: #f8d7da; |
|
|
border-left: 4px solid #dc3545; |
|
|
} |
|
|
.log-entry.DEBUG { |
|
|
background-color: #d1ecf1; |
|
|
border-left: 4px solid #17a2b8; |
|
|
} |
|
|
.log-timestamp { |
|
|
color: #6c757d; |
|
|
font-size: 12px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
.log-level { |
|
|
font-weight: bold; |
|
|
margin-right: 10px; |
|
|
} |
|
|
.log-level.INFO { |
|
|
color: #17a2b8; |
|
|
} |
|
|
.log-level.WARNING { |
|
|
color: #ffc107; |
|
|
} |
|
|
.log-level.ERROR { |
|
|
color: #dc3545; |
|
|
} |
|
|
.log-level.DEBUG { |
|
|
color: #17a2b8; |
|
|
} |
|
|
.log-message { |
|
|
color: #212529; |
|
|
} |
|
|
.refresh-button { |
|
|
display: block; |
|
|
margin: 20px auto; |
|
|
padding: 10px 20px; |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
.refresh-button:hover { |
|
|
background-color: #0069d9; |
|
|
} |
|
|
.log-filter { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-bottom: 15px; |
|
|
gap: 10px; |
|
|
} |
|
|
.log-filter button { |
|
|
padding: 5px 10px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
background-color: #f8f9fa; |
|
|
cursor: pointer; |
|
|
} |
|
|
.log-filter button.active { |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
border-color: #007bff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>🤖 Gemini API 代理服务</h1> |
|
|
|
|
|
<div class="info-box"> |
|
|
<h2 class="section-title">🟢 运行状态</h2> |
|
|
<p class="status">服务运行中</p> |
|
|
|
|
|
<div class="stats-grid"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ key_count }}</div> |
|
|
<div class="stat-label">可用API密钥数量</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ model_count }}</div> |
|
|
<div class="stat-label">可用模型数量</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ retry_count }}</div> |
|
|
<div class="stat-label">最大重试次数</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="section-title">API调用统计</h3> |
|
|
<div class="stats-grid"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ last_24h_calls }}</div> |
|
|
<div class="stat-label">24小时内调用次数</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ hourly_calls }}</div> |
|
|
<div class="stat-label">一小时内调用次数</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ minute_calls }}</div> |
|
|
<div class="stat-label">一分钟内调用次数</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<h2 class="section-title">⚙️ 环境配置</h2> |
|
|
<div class="stats-grid"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ max_requests_per_minute }}</div> |
|
|
<div class="stat-label">每分钟请求限制</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ max_requests_per_day_per_ip }}</div> |
|
|
<div class="stat-label">每IP每日请求限制</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value">{{ current_time }}</div> |
|
|
<div class="stat-label">当前服务器时间</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<h2 class="section-title">📦 版本信息</h2> |
|
|
<div class="version-info" style="text-align: center; margin-bottom: 15px;"> |
|
|
<div style="font-size: 18px; margin-bottom: 10px;"> |
|
|
当前版本: <span style="font-weight: bold; color: #007bff;">{{ local_version }}</span> |
|
|
</div> |
|
|
{% if has_update %} |
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 15px;"> |
|
|
<div style="background-color: #fef6e0; border: 1px solid #ffeeba; border-radius: 4px; padding: 10px 15px; display: inline-flex; align-items: center;"> |
|
|
<span style="color: #ff9800; margin-right: 10px;"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<line x1="12" y1="8" x2="12" y2="12"></line> |
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line> |
|
|
</svg> |
|
|
</span> |
|
|
<span> |
|
|
<strong>发现新版本!</strong> 最新版本: <span style="font-weight: bold; color: #28a745;">{{ remote_version }}</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<h2 class="section-title"> 系统日志</h2> |
|
|
<div class="log-filter"> |
|
|
<button class="active" data-level="ALL">全部</button> |
|
|
<button data-level="INFO">信息</button> |
|
|
<button data-level="WARNING">警告</button> |
|
|
<button data-level="ERROR">错误</button> |
|
|
</div> |
|
|
<div class="log-container"> |
|
|
{% for log in logs %} |
|
|
<div class="log-entry {{ log.level }}" data-level="{{ log.level }}"> |
|
|
<span class="log-timestamp">{{ log.timestamp }}</span> |
|
|
<span class="log-level {{ log.level }}">{{ log.level }}</span> |
|
|
<span class="log-message"> |
|
|
{% if log.key != 'N/A' %}[{{ log.key }}]{% endif %} |
|
|
{% if log.request_type != 'N/A' %}{{ log.request_type }}{% endif %} |
|
|
{% if log.model != 'N/A' %}[{{ log.model }}]{% endif %} |
|
|
{% if log.status_code != 'N/A' %}{{ log.status_code }}{% endif %} |
|
|
: {{ log.message }} |
|
|
{% if log.error_message %} |
|
|
- {{ log.error_message }} |
|
|
{% endif %} |
|
|
</span> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
<button class="refresh-button" onclick="window.location.reload()">刷新日志</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.log-filter button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.log-filter button').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
const level = this.getAttribute('data-level'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.log-entry').forEach(entry => { |
|
|
if (level === 'ALL' || entry.getAttribute('data-level') === level) { |
|
|
entry.style.display = 'block'; |
|
|
} else { |
|
|
entry.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.onload = function() { |
|
|
const logContainer = document.querySelector('.log-container'); |
|
|
logContainer.scrollTop = logContainer.scrollHeight; |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
