++
This commit is contained in:
jack
+342
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BRAIN Alpha 模拟器 - 用户界面</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||||
<style>
|
||||
.simulator-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.simulator-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.simulator-panel {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.form-group input, .form-group textarea, .form-group select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input[type="number"] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.form-group input[type="file"] {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
height: 60px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.log-viewer {
|
||||
background: #1e1e1e;
|
||||
color: #f8f8f2;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', 'SimSun', 'Microsoft YaHei', monospace;
|
||||
font-size: 12px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
margin-top: 10px;
|
||||
unicode-bidi: embed;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.status-idle {
|
||||
background: #e9ecef;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background: #d1edff;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.parameter-help {
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-run {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-run:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.btn-run:disabled {
|
||||
background: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #d1ecf1;
|
||||
border: 1px solid #bee5eb;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
color: #0c5460;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="simulator-container">
|
||||
<a href="/" class="back-link">← 返回主页</a>
|
||||
|
||||
<header>
|
||||
<h1>🚀 BRAIN Alpha 模拟器</h1>
|
||||
<p class="subtitle">用户友好的界面，用于运行 alpha 模拟</p>
|
||||
|
||||
<div class="status-indicator" id="simulatorStatus">
|
||||
准备配置模拟参数
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="simulator-grid">
|
||||
<!-- 配置面板 -->
|
||||
<div class="simulator-panel">
|
||||
<h3>📋 模拟配置</h3>
|
||||
|
||||
<form id="simulatorForm">
|
||||
<!-- JSON 文件选择 -->
|
||||
<div class="form-group">
|
||||
<label for="jsonFile">📁 表达式 JSON 文件</label>
|
||||
<input type="file" id="jsonFile" accept=".json" required>
|
||||
<div class="parameter-help">选择 expressions_with_settings.json 文件</div>
|
||||
<div id="jsonFileInfo" class="file-info" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 身份验证 -->
|
||||
<div class="form-group">
|
||||
<label for="username">👤 BRAIN 用户名</label>
|
||||
<input type="text" id="username" required placeholder="your.email@domain.com">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">🔒 BRAIN 密码</label>
|
||||
<div class="password-input">
|
||||
<input type="password" id="password" required placeholder="您的密码">
|
||||
<button type="button" class="password-toggle" onclick="togglePassword()">👁️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模拟参数 -->
|
||||
<div class="form-group">
|
||||
<label for="startPosition">🎯 起始位置</label>
|
||||
<input type="number" id="startPosition" min="0" value="0" required>
|
||||
<div class="parameter-help">从表达式 N 开始（基于 0 的索引）</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="concurrentCount">⚡ 并发模拟</label>
|
||||
<input type="number" id="concurrentCount" min="1" value="3" required>
|
||||
<div class="parameter-help">并行模拟的数量</div>
|
||||
</div>
|
||||
|
||||
<!-- 高级选项 -->
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="randomShuffle">
|
||||
<label for="randomShuffle">🔀 随机打乱</label>
|
||||
</div>
|
||||
<div class="parameter-help">随机打乱表达式顺序</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="useMultiSim" onchange="toggleMultiSimOptions()">
|
||||
<label for="useMultiSim">🎛️ 多重模拟模式</label>
|
||||
</div>
|
||||
<div class="parameter-help">在一个模拟槽中组合多个 alpha</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="multiSimOptions" style="display: none;">
|
||||
<label for="alphaCountPerSlot">📊 每个槽的 Alphas</label>
|
||||
<input type="number" id="alphaCountPerSlot" min="2" max="10" value="3">
|
||||
<div class="parameter-help">每个多重模拟槽的 alpha 数量（2-10）</div>
|
||||
</div>
|
||||
|
||||
<div class="warning-box" id="overwriteWarning" style="display: none;">
|
||||
⚠️ 警告：如果起始位置 > 0 或启用了随机打乱，则原始 JSON 文件将被覆盖！
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn-run" id="runSimulator" onclick="runSimulator()">
|
||||
🚀 开始模拟
|
||||
</button>
|
||||
<button class="btn btn-outline" onclick="testConnection()" id="testBtn">
|
||||
🔗 测试连接
|
||||
</button>
|
||||
<button class="btn btn-outline" onclick="stopSimulation()" id="stopBtn" style="display: none;">
|
||||
⏹️ 停止
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志查看面板 -->
|
||||
<div class="simulator-panel">
|
||||
<h3>📊 模拟日志与状态</h3>
|
||||
|
||||
<div class="info-box" id="currentLogFile">
|
||||
未选择日志文件。模拟开始时将自动监控最新日志。
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="logSelector">📁 选择日志文件</label>
|
||||
<select id="logSelector" onchange="loadSelectedLog()">
|
||||
<option value="">选择一个日志文件...</option>
|
||||
</select>
|
||||
<button class="btn btn-small btn-outline" onclick="refreshLogFiles()">🔄 刷新</button>
|
||||
</div>
|
||||
|
||||
<div class="log-viewer" id="logViewer">
|
||||
欢迎使用 BRAIN Alpha 模拟器！
|
||||
|
||||
该界面将显示：
|
||||
- 实时模拟进度
|
||||
- 身份验证状态
|
||||
- Alpha 生成结果
|
||||
- 错误消息和警告
|
||||
|
||||
配置您的参数并点击“开始模拟”以开始。
|
||||
</div>
|
||||
|
||||
<div id="simulationProgress" style="margin-top: 15px; display: none;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>进度：</span>
|
||||
<span id="progressText">0/0</span>
|
||||
</div>
|
||||
<div style="background: #e9ecef; height: 8px; border-radius: 4px; margin-top: 5px;">
|
||||
<div id="progressBar" style="background: #28a745; height: 100%; border-radius: 4px; width: 0%; transition: width 0.3s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果部分 -->
|
||||
<div class="simulator-panel" id="resultsPanel" style="margin-top: 20px; display: none;">
|
||||
<h3>✅ 模拟请求成功发送</h3>
|
||||
<div id="simulationResults"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='simulator.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user