|
|
<!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>
|
|
|
|
