Function initializeVisualizer

assets/main.js:172–329

()

}

async function initializeVisualizer() {
  initializeInfoDialog();

  const weightDefinitionUrl = new URL(VISUALIZER_CONFIG.weightUrl, window.location.href);
  const definition = await fetchNetworkDefinition(weightDefinitionUrl.toString());
  if (!definition?.network) {
    throw new Error("Ungültige Netzwerkdefinition.");
  }

  const timelineSnapshots = hydrateTimeline(definition.timeline, {
    layerMetadata: definition.network.layers,
    baseUrl: weightDefinitionUrl,
  });
  if (!timelineSnapshots.length) {
    throw new Error("Keine gültigen Timeline-Snapshots gefunden.");
  }
  const defaultSnapshotIndex = Math.max(timelineSnapshots.length - 1, 0);
  const initialSnapshot = timelineSnapshots[defaultSnapshotIndex];
  const initialLayers = await initialSnapshot.loadLayers();

  const neuralModel = new FeedForwardModel({
    normalization: definition.network.normalization,
    architecture: definition.network.architecture,
    layers: initialLayers,
  });
  const gridContainerElement = document.getElementById("gridContainer");
  const digitCanvas = new DigitSketchPad(gridContainerElement, 28, 28, {
    brush: VISUALIZER_CONFIG.brush,
  });
  const probabilityPanel = new ProbabilityPanel(document.getElementById("predictionChart"));
  const networkInfoPanelElement = document.getElementById("networkInfoPanel");
  const networkInfoPanel = networkInfoPanelElement ? new NetworkInfoPanel(networkInfoPanelElement) : null;
  const neuronDetailPanelElement = document.getElementById("neuronDetailPanel");
  const neuronDetailPanel = new NeuronDetailPanel(neuronDetailPanelElement);
  const neuralScene = new NeuralVisualizer(neuralModel, {
    layerSpacing: VISUALIZER_CONFIG.layerSpacing,
    maxConnectionsPerNeuron: VISUALIZER_CONFIG.maxConnectionsPerNeuron,
    inputSpacing: VISUALIZER_CONFIG.inputSpacing,
    hiddenSpacing: VISUALIZER_CONFIG.hiddenSpacing,
    inputNodeSize: VISUALIZER_CONFIG.inputNodeSize,
    hiddenNodeRadius: VISUALIZER_CONFIG.hiddenNodeRadius,
    connectionRadius: VISUALIZER_CONFIG.connectionRadius,
    connectionWeightThreshold: VISUALIZER_CONFIG.connectionWeightThreshold,
    showFpsOverlay: VISUALIZER_CONFIG.showFpsOverlay,
    onNeuronFocusChange: (payload) => neuronDetailPanel.update(payload),
  });
  networkInfoPanel?.update(neuralModel);
  neuronDetailPanel.setOnClear(() => neuralScene.clearSelection());

  if (gridContainerElement && neuronDetailPanelElement) {
    const rootStyle = document.documentElement?.style ?? null;
    const spacingBelowSketchPad = 16;
    const bottomMargin = 24;

    const applyNeuronPanelLayout = () => {
      if (!rootStyle) return;
      const gridRect = gridContainerElement.getBoundingClientRect();
      const rawTop = Math.round(gridRect.bottom + spacingBelowSketchPad);