Spaces:
Running
Running
File size: 5,663 Bytes
9bd422a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | /**
* InputOutputDisplay - Displays model inputs and outputs
* Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6
*/
class InputOutputDisplay {
/**
* @param {string} containerId - ID of the container element
*/
constructor(containerId) {
this._containerId = containerId;
this._container = document.getElementById(containerId);
if (!this._container) {
console.warn(`[InputOutputDisplay] Container #${containerId} not found`);
}
}
// ─── Private ──────────────────────────────────────────────────────────────
/**
* Escape HTML special characters.
* @param {string} str
* @returns {string}
*/
_escapeHtml(str) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(String(str)));
return div.innerHTML;
}
/**
* Format a tensor shape array to a human-readable string.
* Dynamic dimensions (negative numbers or strings) are shown as-is.
* e.g. [1, 3, 224, 224] → "[1, 3, 224, 224]"
* [-1, 3, 224, 224] → "[-1, 3, 224, 224]"
* ["batch", 3, 224, 224] → "[batch, 3, 224, 224]"
* @param {Array<number|string>} shape
* @returns {string}
*/
_formatShape(shape) {
if (!shape || shape.length === 0) return '[]';
const dims = shape.map((d) => {
if (typeof d === 'string') return d;
if (d === -1 || d < 0) return 'dynamic';
return String(d);
});
return `[${dims.join(', ')}]`;
}
/**
* Resolve a numeric data type to its string name.
* @param {number|string} dataType
* @returns {string}
*/
_resolveDataType(dataType) {
if (typeof dataType === 'string') return dataType;
if (CONFIG && CONFIG.DATA_TYPES && CONFIG.DATA_TYPES[dataType]) {
return CONFIG.DATA_TYPES[dataType];
}
return String(dataType);
}
/**
* Build the HTML for a single tensor entry (input or output).
* @param {TensorInfo} tensor
* @param {'input'|'output'} kind
* @returns {string}
*/
_buildTensorItem(tensor, kind) {
const badgeClass = kind === 'input' ? 'bg-primary' : 'bg-success';
const badgeLabel = kind === 'input' ? 'Input' : 'Output';
const shape = this._formatShape(tensor.shape);
const dtype = this._resolveDataType(tensor.dataType);
return `
<div class="tensor-item border rounded p-2 mb-2 cursor-pointer"
role="button"
tabindex="0"
data-tensor-name="${this._escapeHtml(tensor.name)}"
data-kind="${kind}"
title="Click to highlight in graph"
aria-label="${this._escapeHtml(tensor.name)} ${badgeLabel}">
<div class="d-flex align-items-center justify-content-between mb-1">
<span class="fw-medium text-truncate me-2">${this._escapeHtml(tensor.name)}</span>
<span class="badge ${badgeClass} flex-shrink-0">${badgeLabel}</span>
</div>
<div class="small text-muted">
<span class="me-3"><i class="fas fa-shapes me-1"></i>${this._escapeHtml(shape)}</span>
<span><i class="fas fa-tag me-1"></i>${this._escapeHtml(dtype)}</span>
</div>
${tensor.description ? `<div class="small text-secondary mt-1 fst-italic">${this._escapeHtml(tensor.description)}</div>` : ''}
</div>`;
}
/**
* Attach click (and keyboard) handlers to tensor items.
*/
_attachItemHandlers() {
if (!this._container) return;
const items = this._container.querySelectorAll('.tensor-item');
items.forEach((item) => {
const handler = () => {
const name = item.dataset.tensorName;
if (name && window.EventBus) {
window.EventBus.emit(CONFIG.EVENTS.NODE_SELECTED, { nodeId: name, source: 'inputOutput' });
}
if (name && window.StateManager) {
window.StateManager.setSelectedNodeId(name);
}
};
item.addEventListener('click', handler);
item.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handler();
}
});
});
}
// ─── Public API ───────────────────────────────────────────────────────────
/**
* Render inputs and outputs for a parsed model.
* @param {ParsedModel} model
*/
render(model) {
if (!this._container) return;
const inputs = (model && model.inputs) ? model.inputs : [];
const outputs = (model && model.outputs) ? model.outputs : [];
if (inputs.length === 0 && outputs.length === 0) {
this._container.innerHTML = '<p class="text-muted">No inputs or outputs found.</p>';
return;
}
let html = '';
if (inputs.length > 0) {
html += `<h6 class="text-primary mb-2"><i class="fas fa-arrow-right me-1"></i>Inputs (${inputs.length})</h6>`;
html += inputs.map((t) => this._buildTensorItem(t, 'input')).join('');
}
if (outputs.length > 0) {
html += `<h6 class="text-success mb-2 ${inputs.length > 0 ? 'mt-3' : ''}"><i class="fas fa-arrow-left me-1"></i>Outputs (${outputs.length})</h6>`;
html += outputs.map((t) => this._buildTensorItem(t, 'output')).join('');
}
this._container.innerHTML = html;
this._attachItemHandlers();
}
/**
* Clear the display.
*/
clear() {
if (!this._container) return;
this._container.innerHTML = '<p class="text-muted">Select a model to view inputs and outputs</p>';
}
}
window.InputOutputDisplay = InputOutputDisplay;
|