New Architecture — Rename Refactoring Plan¶

export const LayerRegistry = new Map([
  ["task", {
    label: "Task",
    icon: "🎯",
    color: "var(--color-layer-task)",
    description: "Select the ML task. Currently only Image Classification is enabled.",
    options: [...]
  }],
  ["model", {
    label: "Model",
    icon: "🧠",
    color: "var(--color-layer-model)",
    description: "Choose a pre-trained model.",
    options: null // dynamic from MODEL_REGISTRY
  }],
  ["runtime", {
    label: "Runtime",
    icon: "⚙️",
    color: "var(--color-layer-runtime)",
    description: "Select the inference engine.",
    options: [tfjs, onnx, litert, transformers, mediapipe]
  }],
  ["framework", {
    label: "Framework",
    icon: "📦",
    color: "var(--color-layer-framework)",
    description: "Optional wrapper around the runtime.",
    options: null // dynamic from FRAMEWORK_REGISTRY
  }],
  ["backend", {
    label: "Backend",
    icon: "🖥️",
    color: "var(--color-layer-backend)",
    description: "Hardware execution backend.",
    options: BACKEND_OPTIONS
  }],
  ["inputData", {
    label: "Input Data",
    icon: "🗃️",
    color: "var(--color-layer-inputdata)",
    description: "Upload an image or choose a sample.",
    options: null // dynamic: upload + sample grid
  }],
]);

export class PipelineState {
  constructor() {
    this._config = {
      task: null,
      model: null,
      runtime: null,
      framework: null,
      backend: null,
      inputData: null
    };
  }

  set(layerType, value) {
    if (this._config[layerType] === value) return;
    this._config[layerType] = value;

    // Cascade: clear downstream layers
    if (layerType === "task") {
      Object.assign(this._config, {
        model: null, runtime: null, framework: null,
        backend: null, inputData: null
      });
    }
    if (layerType === "model") {
      this._config.runtime = null;
      this._config.framework = null;
      this._config.backend = null;
    }
    if (layerType === "runtime") {
      this._config.framework = null;
      this._config.backend = null;
    }
    if (layerType === "framework") {
      this._config.backend = null;
    }

    document.dispatchEvent(
      new CustomEvent("layer-change", { detail: { ...this._config } })
    );
    if (this.isReady()) {
      document.dispatchEvent(
        new CustomEvent("layer-ready", { detail: { ...this._config } })
      );
    }
  }
}