[TRTC-121] [feat] Add recipe selector UI to complement the recipe database

docs/source/_ext/trtllm_config_selector.py

@@ -0,0 +1,46 @@
+# SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+
+from __future__ import annotations
+
+from docutils import nodes
+from docutils.parsers.rst import Directive, directives
+
+
+class TRTLLMConfigSelector(Directive):
+    """Embed the interactive config selector widget.
+
+    Usage:
+        .. trtllm_config_selector::
+           :models: deepseek-ai/DeepSeek-R1-0528, nvidia/DeepSeek-R1-0528-FP4-v2
+           :config_db: _static/config_db.json
+    """
+
+    has_content = False
+    option_spec = {
+        # Comma-separated list of HF model ids to include (optional).
+        "models": directives.unchanged,
+        # Path relative to doc root (optional).
+        "config_db": directives.unchanged,
+    }
+
+    def run(self):
+        models = (self.options.get("models") or "").strip()
+        config_db = (self.options.get("config_db") or "").strip()
+
+        attrs = ['data-trtllm-config-selector="1"']
+        if models:
+            attrs.append(f'data-models="{models}"')
+        if config_db:
+            attrs.append(f'data-config-db="{config_db}"')
+
+        html = f"<div {' '.join(attrs)}></div>"
+        return [nodes.raw("", html, format="html")]
+
+
+def setup(app):
+    # Static assets live under docs/source/_static/.
+    app.add_css_file("config_selector.css")
+    app.add_js_file("config_selector.js")
+    app.add_directive("trtllm_config_selector", TRTLLMConfigSelector)
+    return {"version": "0.1", "parallel_read_safe": True, "parallel_write_safe": True}

docs/source/_static/config_selector.css

@@ -0,0 +1,161 @@
+.trtllm-config-selector {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  padding: 16px;
+  margin: 16px 0;
+}
+
+.trtllm-config-selector__header {
+  margin-bottom: 12px;
+}
+
+.trtllm-config-selector__title {
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+
+.trtllm-config-selector__subtitle {
+  font-size: 0.95rem;
+  opacity: 0.8;
+  margin-top: 4px;
+}
+
+.trtllm-config-selector__form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.trtllm-config-selector__label {
+  display: block;
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+  opacity: 0.9;
+}
+
+.trtllm-config-selector__select {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  background: transparent;
+}
+
+.trtllm-config-selector__output {
+  margin-top: 14px;
+}
+
+.trtllm-config-selector__cmd {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  position: relative;
+  padding-right: 54px; /* room for inline copy button */
+}
+
+.trtllm-config-selector__copy {
+  margin-top: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  background: transparent;
+  cursor: pointer;
+}
+
+.trtllm-config-selector__copy:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.trtllm-config-selector__meta {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  opacity: 0.85;
+}
+
+.trtllm-config-selector__yamlDetails {
+  margin-top: 12px;
+}
+
+.trtllm-config-selector__yamlSummary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.trtllm-config-selector__yamlBox {
+  margin-top: 10px;
+}
+
+.trtllm-config-selector__yamlActions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.trtllm-config-selector__yamlLink {
+  font-size: 0.95rem;
+}
+
+.trtllm-config-selector__yamlPre {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  overflow-x: auto;
+  max-height: 520px;
+  position: relative;
+  padding-right: 54px; /* room for inline copy button */
+}
+
+.trtllm-config-selector__copyInline {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 0.85rem;
+  padding: 6px 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+}
+
+.trtllm-config-selector__copyInline:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.trtllm-config-selector__copyInline:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 1);
+}
+
+.trtllm-config-selector__configLink {
+  text-decoration: underline;
+}
+
+/* Minimal YAML syntax highlighting (no hard-coded colors). */
+.yaml-key {
+  font-weight: 600;
+}
+
+.yaml-comment {
+  opacity: 0.7;
+}
+
+.yaml-punct,
+.yaml-bool,
+.yaml-num,
+.yaml-str {
+  opacity: 0.9;
+}
+
+.trtllm-config-selector__error {
+  margin-top: 10px;
+  font-size: 0.9rem;
+  opacity: 0.85;
+}