Add Granite Switch Adapter Composer page#2
Merged
yairallouche merged 10 commits intoMay 11, 2026
Conversation
added 10 commits
May 9, 2026 23:11
Adds docs/adapter_catalog.html: a self-contained interactive page covering all 12 Granite Library adapters (RAG, Core, Guardian). Each adapter shows a description, flavor badges (LoRA/aLoRA), pipeline stage, and a grouped bar chart comparing prompted baselines, LoRA, and aLoRA adapters across all four model sizes, with dashed reference lines for external models (GPT-4o, GPT-OSS-120B) where benchmarked. Also adds a composition cart: users select adapters, choose a base model size, and get a ready-to-run compose_granite_switch command using --include-adapters to target exactly the selected adapters. The URL hash reflects the current adapter selection, making individual adapter views directly linkable (e.g. #hallucination-detection). Updates README.md to link to the catalog (landing on hallucination detection) from the Accurate bullet point.
The cart now exposes a two-button toggle alongside the base model
selector:
Prefer aLoRA — default; aLoRA wins when both variants exist
(no extra CLI flag needed, this is the default
discovery behavior)
All LoRAs — adds --technology-filter lora to the generated
command, so only LoRA variants are selected even
when an aLoRA counterpart is present
Replace hand-rolled CSS components with official @carbon/web-components v2 loaded from IBM's CDN (White theme, no build step): cds-select + cds-select-item-group — adapter dropdown cds-tag — library, stage, and flavor badges cds-button — add/remove/clear actions cds-content-switcher — base model and build type selectors cds-code-snippet (type="multi") — command box with built-in copy cds-link — adapter README link Adapts event handling: cds-select fires cds-select-changed; content-switcher fires cds-content-switcher-item-selected. Adds attachCartListeners() to re-bind switcher events after each innerHTML rebuild. Tracks currentId so the add-button state can be synced when an adapter is removed from the cart. Removes copyCommand() (now handled by cds-code-snippet's built-in copy button).
Two fixes: - Add @carbon/styles@1 CSS from unpkg before the custom <style> block. Without this, Carbon design token CSS variables (--cds-field, --cds-border-strong, etc.) are undefined at the document level, which causes components like cds-select to render with transparent backgrounds and invisible borders. - Remove size="sm" from all cds-tag elements. The sm height is too short for the badge text to render without clipping; default (md) size is correct.
cds-tag enforces a ~7.5rem max-width in its Shadow DOM that cannot be overridden from the light DOM. Replace all cds-tag usage with custom <span class="badge ..."> elements using Carbon White-theme colors. This allows badges like "Guardian Library" and long stage labels to render without clipping. cds-code-snippet controls its internal padding via Shadow DOM, making it impossible to add breathing room without CSS parts (which Carbon does not expose). Switch back to a custom <pre class="command-box"> with explicit padding, alongside a plain copy button. Restore copyCommand(). Also increase command-section padding (1rem → 1.25rem top, 1.25rem → 1.5rem sides) for better visual separation inside the cart panel.
Dropdown: replace cds-select (unreliable custom event) with a native <select> using Carbon CSS classes (cds--select, cds--select-input, etc.). With @carbon/styles already loaded the styling is identical. The standard change event is reliable and needs no custom event wiring or deduplication. Chart order: non-IBM baselines (external bar + dashed reference lines) first, then prompted (IBM model zero-shot), then aLoRA, then LoRA — so the fine-tuned adapters appear rightmost in each bar group.
The cds--select__arrow SVG was rendering at full unconstrained size due to our CSS reset interfering with Carbon's absolute positioning. The native <select> already provides a browser dropdown indicator; removing the custom SVG eliminates the duplicate giant arrow.
Points readers to the interactive adapter catalog page where they can browse adapters, compare benchmarks, and generate a compose command.
lastras
changed the title
yairallouche
approved these changes
May 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
docs/adapter_catalog.html: a self-contained interactive Adapter Composer page covering all 12 Granite Library adapters (RAG, Core, Guardian)compose_granite_switchcommand#hallucination-detection)README.mdto link to the Adapter Composer page from the compose command sectionHow to preview
Once GitHub Pages is enabled on this repo, the page will be live at:
https://generative-computing.github.io/granite-switch/adapter_catalog.html
Until then, preview via the fork:
https://raw.githack.com/lastras/granite-switch/feature/adapter-catalog/docs/adapter_catalog.html
Or open locally: