feat(www): boilerplate code on model cards and modal#722
Open
MaanavD wants to merge 6 commits into
Open
Conversation
…modal - Add model-boilerplate.ts: generates language-specific starter code (Python/JS/C#/Rust) for chat, audio, and embedding model types - Add ModelStarterCode.svelte: compact card strip (Py/JS/C#/Rs pills + Copy) and full modal panel (tabs + scrollable code block + Copy code) - ModelCard: replace cluttered variant grid with single run command row + compact starter code strip; audio models show SDK-only badge - ModelDetailsModal: add Get started panel near top; simplify Available Variants to a clean list with Copy ID buttons; remove per-variant run command blocks and violet gradient SDK callout - Audio models show 'SDK only — not available via foundry model run' in both card and modal surfaces Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the models UI to present language-specific starter code (Python/JS/C#/Rust) on model cards and within the model details modal, replacing the previous variant-grid and callout-heavy layout with a more focused “Get started” experience.
Changes:
- Added a shared
model-boilerplate.tsutility to generate starter snippets (chat / audio transcription / embeddings) across 4 languages. - Introduced a new
ModelStarterCode.sveltecomponent that renders a compact “language pills + copy” strip on cards and a full tabbed panel in the modal. - Simplified the model details “Available Variants” section into a flat list with Copy ID actions and removed per-variant run command blocks.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| www/src/routes/models/model-boilerplate.ts | Adds snippet generation utilities and language metadata for starter code. |
| www/src/routes/models/components/ModelStarterCode.svelte | New UI component rendering starter code in compact (card) and full (modal) modes. |
| www/src/routes/models/components/ModelDetailsModal.svelte | Adds “Get started” panel; simplifies variants UI; removes run-command copy flow. |
| www/src/routes/models/components/ModelCard.svelte | Replaces variant grid/callouts with a single run row + compact starter code strip. |
| www/src/routes/models/+page.svelte | Removes the now-unused onCopyCommand prop wiring for the modal. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| e.stopPropagation(); | ||
| activeLanguage = lang.id; | ||
| }} | ||
| aria-label="Select {lang.label}" |
Collaborator
Author
There was a problem hiding this comment.
Addressed in 4d73bd7: the compact card pills are now plain <button>s with aria-pressed={activeLanguage === lang.id}, so the active language is exposed to assistive tech.
Comment on lines
+109
to
+113
| <div | ||
| class="border-border -mx-1 flex gap-0.5 border-b px-1" | ||
| role="tablist" | ||
| aria-label="Starter code language" | ||
| > |
Collaborator
Author
There was a problem hiding this comment.
Addressed in 4d73bd7: removed role="tablist" (and the now-orphaned aria-label) from the container. The selector is now a plain group of buttons using aria-pressed, per the simpler recommendation.
Add 'foundry model run {alias}' row above the SDK boilerplate panel in
ModelDetailsModal for non-audio models, matching what the model card
already shows. Audio/STT models continue to show SDK-only note only.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- CLI install panel detects current OS via userAgent and shows only the
matching install button (Windows or macOS) by default, with a small
'All platforms' toggle to reveal the other. Unknown OS still sees all.
- Single-OS layout uses a 2-column grid (install | run) instead of 3,
giving the run command more breathing room.
- Model card bottom now uses small uppercase section labels ('Run with
CLI' and 'Starter code') with extra spacing between them so the two
actions read as distinct rows — like the old variant-button card had.
- Removed redundant 'Code:' inline label from compact ModelStarterCode
since the section now has its own heading.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Avoids the toggle overlapping the Run command box when the panel expands. The link now sits naturally beside the helper copy. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Resolve conflicts from #778 (CLI surfaces -> cli-preview-0.10.0 release): - +page.svelte: adopt main's CLI_INSTALL_LINKS (Windows/macOS/Linux download links to the release) and the 'foundry run' command, while keeping this PR's OS-aware install panel (detectedOs, showAllPlatforms, visibleInstallLinks now filtering the links; added Linux detection). - ModelCard.svelte / ModelDetailsModal.svelte: keep this PR's rewrite and apply main's 'foundry model run' -> 'foundry run' rename. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Address accessibility review on ModelStarterCode.svelte. The language pill buttons conveyed the active selection only visually, and the modal selector used a partial tab pattern (role=tablist/role=tab/aria-selected) with no tabpanel, aria-controls, or keyboard navigation, which misleads assistive technology. Switch both the compact card strip and the modal language selector to plain buttons that expose state with aria-pressed; drop the tab-specific roles/attributes. Visuals and behavior are unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Comment on lines
+85
to
+88
| {#if snippet.kind === 'audio'} | ||
| <p class="text-primary mt-1 text-[11px] font-medium"> | ||
| SDK only — not available via <code class="font-mono">foundry model run</code> | ||
| </p> |
Comment on lines
+244
to
+259
| foundry run {genericModelName} | ||
| </code> | ||
| <button | ||
| type="button" | ||
| onclick={() => onCopyModelId(`run-${genericModelName}`)} | ||
| class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1.5 rounded border px-2.5 py-1 text-xs transition-colors" | ||
| aria-label="Copy run command for {genericModelName}" | ||
| > | ||
| {#if copiedModelId === `run-${genericModelName}`} | ||
| <Check class="size-3.5 text-green-500" aria-hidden="true" /> | ||
| <span>Copied</span> | ||
| {:else} | ||
| <Copy class="size-3.5" aria-hidden="true" /> | ||
| <span>Copy</span> | ||
| {/if} | ||
| </button> |
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
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
Adds language-specific starter code (Python, JavaScript, C#, Rust) to model cards and the detail modal, replacing the cluttered variant grid and gradient callouts with a clean, focused layout.
Changes
New files
Model cards (\ModelCard.svelte)
Detail modal (\ModelDetailsModal.svelte)
SDK-only models
Both card and modal surfaces show an \SDK only\ note — starter code still works via the Python/JS/C#/Rust SDKs.