moved_repo_first_update
This commit is contained in:
rpotter6298
@@ -0,0 +1,481 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hypertower V2 Builder</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<section class="pane left">
|
||||
<header class="pane-header">
|
||||
<div>
|
||||
<h1>Hypertower V2 Builder</h1>
|
||||
<p class="subtitle">
|
||||
Draft your towers, bridges, and transforms, then inspect the generated JSON.
|
||||
</p>
|
||||
</div>
|
||||
<div class="status">
|
||||
<span id="node-count">0 nodes</span>
|
||||
<span id="edge-count">0 edges</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Nodes</h2>
|
||||
<div class="button-grid">
|
||||
<button data-add="data">Add Data Source</button>
|
||||
<button data-add="filter">Add Filter</button>
|
||||
<button data-add="transform">Add Transform</button>
|
||||
<button data-add="loader">Add Loader</button>
|
||||
<button data-add="image_tower">Add Tower</button>
|
||||
<button data-add="bridge">Add Bridge</button>
|
||||
<button data-add="classifier">Add Classifier</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Presets</h2>
|
||||
<div class="field">
|
||||
<label for="preset-select">Preset</label>
|
||||
<select id="preset-select"></select>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="preset-apply">Apply Preset</button>
|
||||
<button id="preset-save" class="ghost">Save Selection</button>
|
||||
</div>
|
||||
<p class="hint">Use Shift + drag on the graph to select multiple nodes.</p>
|
||||
<div class="field">
|
||||
<label for="import-class-select">Import class</label>
|
||||
<select id="import-class-select">
|
||||
<option value="">Select…</option>
|
||||
<option value="PapilaData">PapilaData</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="import-class-btn">Import Class</button>
|
||||
</div>
|
||||
<p class="hint">Adds data sources for the selected dataset.</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Selection</h2>
|
||||
<div class="field">
|
||||
<label>Selected Node</label>
|
||||
<div id="selected-node" class="pill muted">None</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="node-label">Label</label>
|
||||
<input id="node-label" placeholder="Rename node" />
|
||||
</div>
|
||||
|
||||
<div id="selection-generic">
|
||||
<div class="field">
|
||||
<label for="node-slot">Input Slot</label>
|
||||
<input id="node-slot" placeholder="e.g. image_1" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="node-output">Output Slot</label>
|
||||
<input id="node-output" placeholder="e.g. embedding_1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-loader" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Input Type</label>
|
||||
<select id="loader-input-type">
|
||||
<option value="image">image</option>
|
||||
<option value="matrix">matrix</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Input Index</label>
|
||||
<select id="loader-input-index">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Output Type</label>
|
||||
<select id="loader-output-type" disabled>
|
||||
<option value="image">image</option>
|
||||
<option value="matrix">matrix</option>
|
||||
</select>
|
||||
<div class="hint">Output mirrors input type.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-filter" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Input Type</label>
|
||||
<select id="filter-input-type">
|
||||
<option value="image">image</option>
|
||||
<option value="matrix">matrix</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Output Type</label>
|
||||
<select id="filter-output-type" disabled>
|
||||
<option value="image">image</option>
|
||||
<option value="matrix">matrix</option>
|
||||
</select>
|
||||
<div class="hint">Output mirrors input type.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Filter Type</label>
|
||||
<select id="filter-type">
|
||||
<option value="regex">regex</option>
|
||||
<option value="column">column</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="filter-regex-fields">
|
||||
<div class="field">
|
||||
<label for="filter-regex-pattern">Regex Pattern</label>
|
||||
<input id="filter-regex-pattern" placeholder="e.g. OD|_OD|Right" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="filter-column-fields" class="hidden">
|
||||
<div class="field">
|
||||
<label for="filter-column-name">Column</label>
|
||||
<input id="filter-column-name" placeholder="e.g. IOP" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="filter-column-operator">Operator</label>
|
||||
<select id="filter-column-operator">
|
||||
<option value=">">></option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value="<="><=</option>
|
||||
<option value="<"><</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="filter-column-value">Value</label>
|
||||
<input id="filter-column-value" placeholder="e.g. 21" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-transform" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Transform Type</label>
|
||||
<select id="transform-type">
|
||||
<option value="roi_crop">roi_crop</option>
|
||||
<option value="center_crop">center_crop</option>
|
||||
<option value="jitter_bundle">jitter_bundle</option>
|
||||
<option value="resize">resize</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="transform-roi-fields">
|
||||
<div class="field">
|
||||
<label>Mask Source</label>
|
||||
<select id="transform-roi-mask-source">
|
||||
<option value="gt">gt</option>
|
||||
<option value="unet">unet</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="transform-roi-scale">Scale</label>
|
||||
<input id="transform-roi-scale" type="number" step="0.1" value="2.5" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="transform-roi-target">Target Size</label>
|
||||
<input id="transform-roi-target" type="number" step="1" value="224" />
|
||||
<div class="hint">Set empty to skip resizing.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="transform-roi-fallback" type="checkbox" checked />
|
||||
Fallback to original if mask missing
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="transform-center-fields" class="hidden">
|
||||
<div class="field">
|
||||
<label for="transform-center-size">Center Crop Size</label>
|
||||
<input id="transform-center-size" type="number" step="1" value="224" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="transform-jitter-fields" class="hidden">
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="transform-jitter-hflip" type="checkbox" checked />
|
||||
Random horizontal flip
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="transform-jitter-vflip" type="checkbox" checked />
|
||||
Random vertical flip
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="transform-jitter-rotation">Rotation (deg)</label>
|
||||
<input id="transform-jitter-rotation" type="number" step="1" value="15" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="transform-jitter-color-enabled" type="checkbox" checked />
|
||||
Color jitter
|
||||
</label>
|
||||
<input
|
||||
id="transform-jitter-color"
|
||||
placeholder="0.1,0.1,0.1,0.05"
|
||||
value="0.1,0.1,0.1,0.05"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="transform-resize-fields" class="hidden">
|
||||
<div class="field">
|
||||
<label for="transform-resize-size">Resize Size</label>
|
||||
<input id="transform-resize-size" type="number" step="1" value="256" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-tower" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Tower Type</label>
|
||||
<select id="tower-type">
|
||||
<option value="image">image</option>
|
||||
<option value="metadata">metadata</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="tower-image-fields">
|
||||
<div class="field">
|
||||
<label>Backbone</label>
|
||||
<select id="tower-backbone">
|
||||
<option value="efficientnet_b0">efficientnet_b0</option>
|
||||
<option value="resnet50">resnet50</option>
|
||||
<option value="densenet121">densenet121</option>
|
||||
<option value="vgg16">vgg16</option>
|
||||
<option value="mobilenet_v2">mobilenet_v2</option>
|
||||
<option value="inception_v3">inception_v3</option>
|
||||
<option value="refugelike">refugelike</option>
|
||||
<option value="refuge_densenet">refuge_densenet</option>
|
||||
<option value="refuge_efficient_b0">refuge_efficient_b0</option>
|
||||
<option value="refuge_efficient_b7">refuge_efficient_b7</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-freeze-ratio">Freeze Ratio</label>
|
||||
<input id="tower-freeze-ratio" type="number" step="0.05" value="0" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="tower-augment" type="checkbox" checked />
|
||||
Image augmentation
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-geometry-dim">Geometry Dim</label>
|
||||
<input id="tower-geometry-dim" type="number" step="1" value="0" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="tower-use-se" type="checkbox" />
|
||||
Use SE
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-se-reduction">SE Reduction</label>
|
||||
<input id="tower-se-reduction" type="number" step="1" value="16" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="tower-se-pre-norm" type="checkbox" checked />
|
||||
SE Pre-Norm
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tower-md-fields" class="hidden">
|
||||
<div class="field">
|
||||
<label for="tower-md-hidden">Hidden Dim</label>
|
||||
<input id="tower-md-hidden" type="number" step="1" value="128" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-md-dropout">Dropout</label>
|
||||
<input id="tower-md-dropout" type="number" step="0.05" value="0.1" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="tower-md-use-se" type="checkbox" />
|
||||
Use SE
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-md-se-reduction">SE Reduction</label>
|
||||
<input id="tower-md-se-reduction" type="number" step="1" value="16" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="tower-md-se-pre-norm" type="checkbox" checked />
|
||||
SE Pre-Norm
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tower-md-freeze-ratio">Freeze Ratio</label>
|
||||
<input id="tower-md-freeze-ratio" type="number" step="0.05" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-bridge" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Bridge Method</label>
|
||||
<select id="bridge-method">
|
||||
<option value="fusion">fusion</option>
|
||||
<option value="consensus">consensus</option>
|
||||
</select>
|
||||
<div class="hint">Fusion uses embeddings; consensus combines logits.</div>
|
||||
</div>
|
||||
<div id="bridge-fusion-fields">
|
||||
<div class="field">
|
||||
<label for="bridge-fusion-dim">Fusion Dim</label>
|
||||
<input id="bridge-fusion-dim" type="number" step="1" value="256" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="bridge-use-se" type="checkbox" checked />
|
||||
Use SE
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="bridge-se-reduction">SE Reduction</label>
|
||||
<input id="bridge-se-reduction" type="number" step="1" value="16" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
<input id="bridge-se-pre-norm" type="checkbox" checked />
|
||||
SE Pre-Norm
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-classifier" class="selection-block hidden">
|
||||
<div class="hint">
|
||||
Classifier settings are managed at the Hypertower level.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="selection-data" class="selection-block hidden">
|
||||
<div class="field">
|
||||
<label>Output Type (select first)</label>
|
||||
<select id="data-output-type">
|
||||
<option value="">Select…</option>
|
||||
<option value="image">image</option>
|
||||
<option value="matrix">matrix</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Source</label>
|
||||
<div class="button-row">
|
||||
<button id="data-browse" class="ghost">Browse…</button>
|
||||
</div>
|
||||
<div id="data-source-status" class="hint">No source selected.</div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="duplicate-data" class="ghost">Duplicate Data Source</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button id="apply-node">Apply</button>
|
||||
<button id="delete-node" class="danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>State</h2>
|
||||
<div class="button-row">
|
||||
<button id="auto-layout">Auto Layout</button>
|
||||
<button id="reset-graph" class="ghost">Reset</button>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="save-local">Save Local</button>
|
||||
<button id="load-local">Load Local</button>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="export-json">Export JSON</button>
|
||||
<label class="file-upload">
|
||||
Import JSON
|
||||
<input id="import-json" type="file" accept="application/json" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane right">
|
||||
<header class="pane-header">
|
||||
<div>
|
||||
<h2>Model Graph</h2>
|
||||
<div class="hint">Drag to pan. Scroll to zoom.</div>
|
||||
</div>
|
||||
<div class="graph-controls">
|
||||
<button id="connect-mode">Connect</button>
|
||||
<button id="disconnect-selected">Remove Selected Edges</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="graph-container">
|
||||
<svg id="graph" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane bottom">
|
||||
<header class="pane-header">
|
||||
<h2>Configuration JSON</h2>
|
||||
<button id="toggle-json" class="ghost">Collapse</button>
|
||||
</header>
|
||||
<pre id="json-view" class="json-view"></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="modal-overlay" class="modal-overlay hidden">
|
||||
<div class="modal">
|
||||
<header class="modal-header">
|
||||
<div>
|
||||
<h3>Browse Repository</h3>
|
||||
<p id="modal-mode" class="hint">Select a directory.</p>
|
||||
</div>
|
||||
<button id="modal-close" class="ghost">Close</button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<div id="breadcrumb" class="breadcrumb"></div>
|
||||
<div id="modal-list" class="modal-list"></div>
|
||||
</div>
|
||||
<footer class="modal-footer">
|
||||
<button id="modal-select-dir" class="ghost">Use this directory</button>
|
||||
<button id="modal-select-file" class="ghost">Use selected file</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preview-overlay" class="modal-overlay hidden">
|
||||
<div class="modal">
|
||||
<header class="modal-header">
|
||||
<div>
|
||||
<h3>Data Browser</h3>
|
||||
<p id="preview-subtitle" class="hint">No source selected.</p>
|
||||
</div>
|
||||
<button id="preview-close" class="ghost">Close</button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<div id="preview-body" class="preview-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user