Function initOne

docs/source/_static/config_selector.js:176–564

(container, payload)

  }

  function initOne(container, payload) {
    const allowedModels = parseCsvModels(container.getAttribute("data-models"));

    const allEntries = Array.isArray(payload.entries) ? payload.entries : [];
    const entries = allowedModels
      ? allEntries.filter((e) => allowedModels.includes(e.model))
      : allEntries.slice();

    const modelsInfo = payload.models || {};

    const state = {
      model: "",
      topology: "",
      islOsl: "",
      profile: "",
      concurrency: "",
    };

    container.innerHTML = "";
    container.classList.add("trtllm-config-selector");

    const header = el("div", { class: "trtllm-config-selector__header" }, [
      el("div", {
        class: "trtllm-config-selector__subtitle",
        text: "Select a model + deployment shape to generate a trtllm-serve command.",
      }),
    ]);

    const form = el("div", { class: "trtllm-config-selector__form" });

    function mkSelect(labelText, id, stepNumber) {
      const label = el("label", {
        class: "trtllm-config-selector__label",
        for: id,
      });
      label.appendChild(
        el("span", {
          class: "trtllm-config-selector__step",
          "aria-hidden": "true",
          text: String(stepNumber),
        }),
      );
      label.appendChild(
        el("span", {
          class: "trtllm-config-selector__labelText",
          text: labelText,
        }),
      );
      const select = el("select", { class: "trtllm-config-selector__select", id });
      const wrap = el("div", { class: "trtllm-config-selector__field" }, [label, select]);
      return { wrap, select };
    }

    const id = ++widgetId;
    const selModel = mkSelect("Model", `trtllm-model-${id}`, 1);
    const selTopo = mkSelect("GPU(s)", `trtllm-topo-${id}`, 2);
    const selSeq = mkSelect("ISL / OSL", `trtllm-seq-${id}`, 3);
    const selProf = mkSelect("Performance profile", `trtllm-prof-${id}`, 4);