Gem2a / app /static /index.html
misonL's picture
Refactor: 重构会话和模型控制区域样式,优化按钮和状态文本布局
b1435cd
Raw
History Blame Contribute Delete
16 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gem2a</title>
<link rel="stylesheet" href="/static/css/variables.css">
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/chat.css">
<link rel="stylesheet" href="/static/css/metrics.css">
<link rel="stylesheet" href="/static/css/records.css">
<link rel="stylesheet" href="/static/css/session.css">
<link rel="stylesheet" href="/static/css/footer.css">
<link rel="stylesheet" href="/static/css/responsive.css">
<!-- 引入 marked.js 用于 Markdown 渲染 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- 引入 mermaid.js 用于 Mermaid 流程图渲染 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
// 初始化 Mermaid
mermaid.initialize({ startOnLoad: true });
// 配置 marked.js 启用 GitHub Flavored Markdown 和换行符支持
marked.setOptions({
gfm: true, // 启用 GitHub Flavored Markdown
breaks: true, // 允许换行符作为 <br>
});
</script>
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
<h1>Gem2a</h1>
<button id="logout-button">退出登录</button>
</header>
<div class="content-wrapper">
<!-- 服务指标 -->
<section class="metrics-section card">
<h3>服务指标</h3>
<div class="metrics-grid">
<div class="metric-item">
<h4>总请求数</h4>
<p id="total-requests">0</p>
</div>
<div class="metric-item">
<h4>成功请求数</h4>
<p id="successful-requests">0</p>
</div>
<div class="metric-item">
<h4>失败请求数</h4>
<p id="failed-requests">0</p>
</div>
<div class="metric-item">
<h4>活跃 Key 数</h4>
<p id="active-keys">0</p>
</div>
<div class="metric-item">
<h4>平均响应时间 (s)</h4>
<p id="average-response-time">0.00</p>
</div>
<div class="metric-item">
<h4>内存使用</h4>
<p id="memory-usage">N/A</p>
</div>
</div>
</section>
<!-- Gemini 交互 -->
<section class="interaction-section card">
<h3>Gemini 交互</h3>
<div class="session-and-model-controls">
<div class="session-actions">
<button id="new-session-btn" class="action-button">+ 新建会话</button>
<button id="delete-session-btn" class="action-button">× 删除当前</button>
<span id="session-status" class="session-status-text">会话数: 0/5</span>
</div>
<div class="session-tabs-container">
<div id="session-tabs">
<!-- 会话标签将在这里渲染 -->
</div>
</div>
<div class="model-selector-area">
<label for="model-select" class="model-select-label">选择模型:</label>
<select id="model-select" class="model-select-dropdown">
<option value="gemini-2.5-flash" selected>gemini-2.5-flash (默认)</option>
<option value="gemini-2.5-pro">gemini-2.5-pro</option>
<option value="gemini-2.0-flash">gemini-2.0-flash</option>
<option value="gemini-2.0-flash-thinking">gemini-2.0-flash-thinking</option>
<option value="gemini-2.0-exp-advanced">gemini-2.0-exp-advanced</option>
<!-- 可以根据需要添加更多模型选项 -->
</select>
</div>
</div>
<div class="chat-window" id="chat-window">
<!-- 聊天消息将显示在这里 -->
</div>
<div class="input-area">
<textarea id="user-input" placeholder="输入您的消息... (支持 Ctrl+V 粘贴图片)"></textarea>
<div class="button-group">
<input type="file" id="image-upload" accept="image/*">
<label for="image-upload" class="file-upload-label">选择图片</label>
<button id="send-button">发送</button>
</div>
</div>
</section>
<!-- 调用记录 -->
<section class="records-section card">
<h3>调用记录</h3>
<table id="call-records-table">
<thead>
<tr>
<th>时间</th>
<th>Key</th>
<th>IP</th>
<th>类型</th>
<th>模型</th> <!-- 新增模型列 -->
<th>状态</th>
<th>耗时 (s)</th>
<th>请求摘要</th>
<th>响应摘要</th>
</tr>
</thead>
<tbody>
<!-- 调用记录将显示在这里 -->
</tbody>
</table>
</section>
<!-- 模型信息与限制 -->
<section class="model-info-section card">
<h3>模型信息与限制</h3>
<p>根据截止2025年5月22日的政策信息,谷歌Gemini免费用户与Google AI Pro/Ultra用户的限制区别如下表所示:</p>
<table>
<thead>
<tr>
<th>功能/特性</th>
<th>谷歌Gemini免费用户</th>
<th>Google AI Pro (或称Google One AI 高级版)</th>
<th>Google AI Ultra</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>可访问模型</strong></td>
<td>Gemini 2.5 Flash (默认), 限量访问 Gemini 2.5 Pro</td>
<td>更多访问 Gemini 2.5 Pro 和 Veo 2</td>
<td>最高访问级别,包括 Gemini 2.5 Pro Deep Think (即将推出) 和 Veo 3 (最新视频生成模型)</td>
</tr>
<tr>
<td><strong>上下文窗口</strong></td>
<td>3.2万 (32K) tokens (约50页文本)</td>
<td>100万 (1M) tokens (约1500页文本或3万行代码)</td>
<td>100万 (1M) tokens (约1500页文本或3万行代码)</td>
</tr>
<tr>
<td><strong>深度研究 (Deep Research)</strong></td>
<td>有限访问 (通常每天少于20次报告,部分报道为每月几次)</td>
<td>更多访问,由 Gemini 2.5 Pro 提供支持,可自动浏览和分析数百个网站</td>
<td>最高访问级别</td>
</tr>
<tr>
<td><strong>视频生成</strong></td>
<td>通常不支持或访问权限受限</td>
<td>支持 Veo 2 视频生成,具有更高额度</td>
<td>支持 Veo 3 视频生成,具有最高额度 (Flow, Whisk 等工具)</td>
</tr>
<tr>
<td><strong>音频概览 (Audio Overviews)</strong></td>
<td>有限访问 (例如每天3次)</td>
<td>更多访问 (例如每天20次,是免费版的5倍)</td>
<td>最高访问级别</td>
</tr>
<tr>
<td><strong>Python 代码编辑与运行</strong></td>
<td>不支持</td>
<td>支持直接在界面内编辑和运行代码</td>
<td>支持直接在界面内编辑和运行代码</td>
</tr>
<tr>
<td><strong>文件上传与分析</strong></td>
<td>所有文件类型 (文档、幻灯片) 可上传;电子表格需订阅</td>
<td>所有文件类型可上传 (包括电子表格),可处理更大文件 (高达1500页)</td>
<td>所有文件类型可上传,可处理更大文件</td>
</tr>
<tr>
<td><strong>个性化与记忆功能</strong></td>
<td>有限</td>
<td>优先体验记忆功能,可创建自定义“Gem” (AI专家)</td>
<td>优先体验记忆功能,可创建自定义“Gem” (AI专家)</td>
</tr>
<tr>
<td><strong>速率限制/使用额度</strong></td>
<td>较低 (例如 Gemini 1.5 Pro 可能限制为 2 RPM / 50 RPD)</td>
<td>更高 (例如 Gemini 1.5 Pro/Flash 可达 360 RPM / 10000 RPD)</td>
<td>最高速率限制和使用额度</td>
</tr>
<tr>
<td><strong>Google Workspace 集成</strong></td>
<td>不包含深度集成</td>
<td>包含与 Gmail, Google Docs 等 Google 应用的集成</td>
<td>包含与 Gmail, Google Docs 等 Google 应用的集成</td>
</tr>
<tr>
<td><strong>Google One 额外福利</strong></td>
<td>15 GB 存储</td>
<td>2 TB Google Drive 存储,及其他 Google One 会员专属福利和专家支持</td>
<td>2 TB Google Drive 存储,及其他 Google One 会员专属福利和专家支持</td>
</tr>
<tr>
<td><strong>订阅费用</strong></td>
<td>免费</td>
<td>19.99美元/月 (试用期后)</td>
<td>250美元/月 (最高级方案)</td>
</tr>
</tbody>
</table>
<p><strong>重要提示:</strong></p>
<ul>
<li><strong>Google AI Pro</strong> 是 Google One AI Premium 计划的一部分,通常包含在每月订阅中。</li>
<li><strong>Gemini Advanced</strong> 已被 Google AI Pro 取代或扩展,但部分来源仍可能提及。</li>
<li><strong>Google AI Ultra</strong> 是一个更高级的订阅计划,提供最高级别的访问权限和最新功能。</li>
<li>上述信息基于2025年5月22日之前的公开政策和新闻报道。具体功能和限制可能会根据Google的最新发布和地区政策有所调整。</li>
</ul>
<p>来源:</p>
<ul>
<li><a href="https://one.google.com/about/google-ai-plans/" target="_blank">Google AI Plans and Features</a></li>
<li><a href="https://gemini.google/subscriptions/" target="_blank">Google AI Pro & Ultra — get more out of Gemini</a></li>
<li><a href="https://blog.google/products/gemini/gemini-app-updates-io-2025/" target="_blank">Gemini gets more personal, proactive and powerful - Google Blog</a></li>
<li><a href="https://9to5google.com/2025/04/19/gemini-advanced-features/" target="_blank">What features do you get with Gemini Advanced? [April 2025] - 9to5Google</a></li>
<li><a href="https://www.instituteofaistudies.com/insights/google-gemini-free-vs-paid" target="_blank">Google Gemini Free vs Paid: Is it Worth Upgrading? - Institute of Ai Studies</a></li>
</ul>
</section>
<!-- 如何使用中转 API -->
<section class="api-usage-section card">
<h3>如何使用中转 API</h3>
<p>本服务提供一个兼容 OpenAI API 的中转接口,您可以使用任何支持 OpenAI API 的客户端(如 Chatbox、cURL、Python 库等)来访问。</p>
<h4>API 端点</h4>
<p>您的 API 端点是:<code>[您的 Hugging Face Spaces URL]/v1/chat/completions</code></p>
<h4>认证方式</h4>
<p>请在请求头中包含您的 API Key。支持以下两种方式:</p>
<ul>
<li><code>X-API-Key: your_api_key_here</code></li>
<li><code>Authorization: Bearer your_api_key_here</code></li>
</ul>
<h4>请求示例 (cURL)</h4>
<pre><code>curl -X POST "[您的 Hugging Face Spaces URL]/v1/chat/completions" \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your_admin_or_user_key" \
-d '{
"model": "gemini-2.5-flash",
"messages": [
{"role": "user", "content": "Hello, how are you?"}
]
}'</code></pre>
<h4>请求示例 (Python - 使用 `requests` 库)</h4>
<pre><code>import requests
api_key = "your_admin_or_user_key"
url = "[您的 Hugging Face Spaces URL]/v1/chat/completions"
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
data = {
"model": "gemini-2.5-flash",
"messages": [
{"role": "user", "content": "Hello, how are you?"}
]
}
response = requests.post(url, headers=headers, json=data)
print(response.json())</code></pre>
<p class="small-text"><em>请将 <code>[您的 Hugging Face Spaces URL]</code> 替换为您的实际服务地址,将 <code>your_admin_or_user_key</code> 替换为您在 Hugging Face Spaces 环境变量中配置的 API Key。</em></p>
</section>
</div>
</div>
<script type="module" src="/static/js/main.js"></script>
<footer>
<p>&copy; 2025 Gem2a. 保留所有权利。</p>
<p>本服务根据 <a href="https://huggingface.co/spaces/misonL/Gem2a/blob/main/LICENSE-CN.md" target="_blank">知识共享署名-非商业性使用 4.0 协议国际版</a> 授权。</p>
<p>
<!-- Hugging Face Spaces 徽章,直接作为超链接 -->
<a href="https://huggingface.co/spaces/misonL/Gem2a" target="_blank">
<img src="https://img.shields.io/badge/Hugging%20Face%20Spaces-运行中-blue?style=flat-square" alt="在 Hugging Face Spaces 上运行" style="vertical-align: middle;">
</a>
</p>
</footer>
</body>
</html>