forked from genewildish/Mainline
fix(performance): use simple height estimation instead of PIL rendering
- Replace estimate_block_height (PIL-based) with estimate_simple_height (word wrap) - Update viewport filter tests to match new height-based filtering (~4 items vs 24) - Fix CI task duplication in mise.toml (remove redundant depends) Closes #38 Closes #36
This commit is contained in:
313
client/editor.html
Normal file
313
client/editor.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mainline Pipeline Editor</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
background: #1a1a1a;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
background: #222;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stage-list {
|
||||
list-style: none;
|
||||
}
|
||||
.stage-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
background: #333;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.stage-item:hover { background: #444; }
|
||||
.stage-item.selected { background: #0066cc; }
|
||||
.stage-item input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.stage-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
}
|
||||
.param-group {
|
||||
background: #2a2a2a;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.param-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.param-name {
|
||||
width: 100px;
|
||||
color: #aaa;
|
||||
}
|
||||
.param-slider {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.param-value {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #4f4;
|
||||
}
|
||||
.preset-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.preset-btn {
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
color: #ccc;
|
||||
padding: 4px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
.preset-btn:hover { background: #444; }
|
||||
.preset-btn.active { background: #0066cc; border-color: #0077ff; color: #fff; }
|
||||
button.action-btn {
|
||||
background: #0066cc;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
button.action-btn:hover { background: #0077ee; }
|
||||
#status {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
#status.connected { color: #4f4; }
|
||||
#status.disconnected { color: #f44; }
|
||||
#pipeline-view {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pipeline-node {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 2px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.pipeline-node.enabled { border-left: 3px solid #4f4; }
|
||||
.pipeline-node.disabled { border-left: 3px solid #666; opacity: 0.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<div class="section">
|
||||
<h2>Preset</h2>
|
||||
<div id="preset-list" class="preset-list"></div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Stages</h2>
|
||||
<ul id="stage-list" class="stage-list"></ul>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Parameters</h2>
|
||||
<div id="param-editor" class="param-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2>Pipeline</h2>
|
||||
<div id="pipeline-view"></div>
|
||||
<div style="margin-top: 20px;">
|
||||
<button class="action-btn" onclick="sendCommand({action: 'cycle_preset', direction: 1})">Next Preset</button>
|
||||
<button class="action-btn" onclick="sendCommand({action: 'cycle_preset', direction: -1})">Prev Preset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="status">Disconnected</div>
|
||||
|
||||
<script>
|
||||
const ws = new WebSocket(`ws://${location.hostname}:8765`);
|
||||
let state = { stages: {}, preset: '', presets: [], selected_stage: null };
|
||||
|
||||
function updateStatus(connected) {
|
||||
const status = document.getElementById('status');
|
||||
status.textContent = connected ? 'Connected' : 'Disconnected';
|
||||
status.className = connected ? 'connected' : 'disconnected';
|
||||
}
|
||||
|
||||
function connect() {
|
||||
ws.onopen = () => {
|
||||
updateStatus(true);
|
||||
// Request initial state
|
||||
ws.send(JSON.stringify({ type: 'state_request' }));
|
||||
};
|
||||
ws.onclose = () => {
|
||||
updateStatus(false);
|
||||
setTimeout(connect, 2000);
|
||||
};
|
||||
ws.onerror = () => {
|
||||
updateStatus(false);
|
||||
};
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'state') {
|
||||
state = data.state;
|
||||
render();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Parse error:', e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function sendCommand(command) {
|
||||
ws.send(JSON.stringify({ type: 'command', command }));
|
||||
}
|
||||
|
||||
function render() {
|
||||
renderPresets();
|
||||
renderStageList();
|
||||
renderPipeline();
|
||||
renderParams();
|
||||
}
|
||||
|
||||
function renderPresets() {
|
||||
const container = document.getElementById('preset-list');
|
||||
container.innerHTML = '';
|
||||
(state.presets || []).forEach(preset => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'preset-btn' + (preset === state.preset ? ' active' : '');
|
||||
btn.textContent = preset;
|
||||
btn.onclick = () => sendCommand({ action: 'change_preset', preset });
|
||||
container.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
function renderStageList() {
|
||||
const list = document.getElementById('stage-list');
|
||||
list.innerHTML = '';
|
||||
Object.entries(state.stages || {}).forEach(([name, info]) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'stage-item' + (name === state.selected_stage ? ' selected' : '');
|
||||
li.innerHTML = `
|
||||
<input type="checkbox" ${info.enabled ? 'checked' : ''}
|
||||
onchange="sendCommand({action: 'toggle_stage', stage: '${name}'})">
|
||||
<span class="stage-name">${name}</span>
|
||||
`;
|
||||
li.onclick = (e) => {
|
||||
if (e.target.type !== 'checkbox') {
|
||||
sendCommand({ action: 'select_stage', stage: name });
|
||||
}
|
||||
};
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPipeline() {
|
||||
const view = document.getElementById('pipeline-view');
|
||||
view.innerHTML = '';
|
||||
const stages = Object.entries(state.stages || {});
|
||||
if (stages.length === 0) {
|
||||
view.textContent = '(No stages)';
|
||||
return;
|
||||
}
|
||||
stages.forEach(([name, info]) => {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'pipeline-node' + (info.enabled ? ' enabled' : ' disabled');
|
||||
span.textContent = name;
|
||||
view.appendChild(span);
|
||||
});
|
||||
}
|
||||
|
||||
function renderParams() {
|
||||
const container = document.getElementById('param-editor');
|
||||
container.innerHTML = '';
|
||||
const selected = state.selected_stage;
|
||||
if (!selected || !state.stages[selected]) {
|
||||
container.innerHTML = '<div style="color:#666;font-size:11px;">(select a stage)</div>';
|
||||
return;
|
||||
}
|
||||
const stage = state.stages[selected];
|
||||
if (!stage.params || Object.keys(stage.params).length === 0) {
|
||||
container.innerHTML = '<div style="color:#666;font-size:11px;">(no params)</div>';
|
||||
return;
|
||||
}
|
||||
Object.entries(stage.params).forEach(([key, value]) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'param-row';
|
||||
// Infer min/max/step from typical ranges
|
||||
let min = 0, max = 1, step = 0.1;
|
||||
if (typeof value === 'number') {
|
||||
if (value > 1) { max = value * 2; step = 1; }
|
||||
else { max = 1; step = 0.1; }
|
||||
}
|
||||
row.innerHTML = `
|
||||
<div class="param-name">${key}</div>
|
||||
<input type="range" class="param-slider" min="${min}" max="${max}" step="${step}"
|
||||
value="${value}"
|
||||
oninput="adjustParam('${key}', this.value)">
|
||||
<div class="param-value">${typeof value === 'number' ? Number(value).toFixed(2) : value}</div>
|
||||
`;
|
||||
container.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function adjustParam(param, newValue) {
|
||||
const selected = state.selected_stage;
|
||||
if (!selected) return;
|
||||
// Update display immediately for responsiveness
|
||||
const num = parseFloat(newValue);
|
||||
if (!isNaN(num)) {
|
||||
// Show updated value
|
||||
document.querySelectorAll('.param-value').forEach(el => {
|
||||
if (el.parentElement.querySelector('.param-name').textContent === param) {
|
||||
el.textContent = num.toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Send command
|
||||
sendCommand({
|
||||
action: 'adjust_param',
|
||||
stage: selected,
|
||||
param: param,
|
||||
delta: num - (state.stages[selected].params[param] || 0)
|
||||
});
|
||||
}
|
||||
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user