[Workers AI] Convert model page code examples from accordion to tabs

[superhighfives]

Summary

Converts code examples on Workers AI model detail pages from accordion-style (<Details>) to tabbed layout (<Tabs>/<TabItem>), improving UX consistency with the rest of the documentation site.

Changes

• 18 components converted to tabbed layout with syncKey="workersAiExamples" for persistent language preference across pages
• 2 single-example components (ImageToTextCode, MelottsCode) converted to bare <Code> blocks
• 1 component (DeepgramFlux) unchanged as it uses step-by-step workflow pattern

Before/After

Before: Accordion-style collapsible sections (all expanded by default)
After: Tabbed interface matching the pattern used elsewhere in the docs (e.g., TypeScriptExample, WranglerConfig)

Files Modified

21 files in src/components/models/code/

Validation

• npm run check passes with 0 errors

---

Jira: AIG-853

[Copilot]

Pull request overview

This PR modernizes the Workers AI model documentation by converting code examples from accordion-style collapsible sections to a tabbed interface. This improves UX consistency with the rest of the documentation site and provides a persistent language preference across model pages via the shared syncKey="workersAiExamples".

Changes:

• Converted 18 model code example components from <Details> accordion to <Tabs>/<TabItem> layout
• Simplified 2 single-example components (ImageToTextCode, MelottsCode) to bare <Code> blocks
• Preserved DeepgramFlux component unchanged as it uses a step-by-step workflow pattern incompatible with tabs

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
WhisperBase64Code.astro	Converted 3-tab layout (TypeScript, Python, curl) with preserved Render component
TranslationCode.astro	Converted 3-tab layout (TypeScript, Python, curl)
TextToImageCode.astro	Converted 2-tab layout (TypeScript, curl)
TextGenerationCode.astro	Converted with conditional rendering: 2 tabs for LoRA models, 4 tabs for standard models including streaming example
TextEmbeddingCode.astro	Converted 3-tab layout (TypeScript, Python, curl) with preserved Aside
TextClassificationCode.astro	Converted 3-tab layout (TypeScript, Python, curl)
SummarizationCode.astro	Converted 2-tab layout (TypeScript, curl)
StableDiffusion-v1-5-inpaintingCode.astro	Converted 2-tab layout (TypeScript, curl)
StableDiffusion-v1-5-img2imgCode.astro	Converted 2-tab layout (TypeScript, curl)
OpenAIResponsesTextGenerationCode.astro	Converted 3-tab layout with preserved multi-format API note
ObjectDetectionCode.astro	Converted 2-tab layout (TypeScript, curl)
MelottsCode.astro	Simplified to bare Code block (single example)
LlamaGuard.astro	Converted 3-tab layout (TypeScript, Python, curl)
ImageToTextCode.astro	Simplified to bare Code block (single example)
ImageClassificationCode.astro	Converted 2-tab layout (TypeScript, curl)
Flux-2.astro	Converted 2-tab layout (TypeScript, curl)
Flux-1-Schnell.astro	Converted 3-tab layout with descriptive labels for different TypeScript implementations
DeepgramNova.astro	Converted 2-tab layout (TypeScript, curl)
DeepgramAura.astro	Converted 2-tab layout (TypeScript, curl)
Bge-Reranker-Base.astro	Converted 3-tab layout (TypeScript, Python, curl)
AutomaticSpeechRecognitionCode.astro	Converted 2-tab layout (TypeScript, curl)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elithrar]

/bonk review and address findings

[ask-bonk]

Review

Clean, well-scoped PR. The conversion from <Details> to <Tabs>/<TabItem> is consistent across all 21 files, the import patterns follow existing codebase conventions (importing from @astrojs/starlight/components), and the decision to simplify single-example components (ImageToTextCode, MelottsCode) to bare <Code> blocks is sensible.

A few observations below — one minor label inconsistency worth addressing, and a note about syncKey behavior with heterogeneous tab labels.

[ask-bonk]

Minor: The first tab here is "Worker (Streaming)" while everywhere else the TypeScript Worker tab is labeled "TypeScript". This means if a user selects "TypeScript" on another model page (synced via syncKey), when they visit a non-LoRA TextGeneration model page, the synced selection won't match any tab label — Starlight will likely fall back to showing the first tab ("Worker (Streaming)").

This is arguably fine for the streaming variant since it's a distinct example, but it's a subtle UX difference worth being aware of. If you want the sync to reliably land on the non-streaming TypeScript tab when coming from other pages, you could swap the order so "TypeScript" is first:

Suggested change

	<TabItem label="Worker (Streaming)" icon="seti:typescript">
	<TabItem label="TypeScript" icon="seti:typescript">
	<Code code={worker} lang="ts" />
	</TabItem>
	<TabItem label="Worker (Streaming)" icon="seti:typescript">

Or keep as-is if you prefer streaming to be the prominent default for text generation models — just wanted to flag the interaction with syncKey.

[ask-bonk]

Same observation as TextGenerationCode.astro — none of these tab labels ("Worker (Data URI)", "Worker (Image)") match the "TypeScript" label used by other components sharing this syncKey. So syncKey sync effectively doesn't work for the TypeScript tabs on this page.

Since these are genuinely different example types (not just language variants), this is reasonable. Just flagging it for awareness. An alternative would be to use a different syncKey (or no syncKey) for components whose tabs don't represent a language choice, but that's a design call.

[ask-bonk]

Nit: the original file was missing a trailing newline (the diff shows No newline at end of file on the old version). Nice that this is fixed as part of the change.

[ask-bonk]

Review submitted. Here's a summary of my findings:

Overall: This is a clean, well-executed PR. The conversion from accordion (<Details>) to tabs (<Tabs>/<TabItem>) is mechanically consistent across all 21 files, imports follow existing codebase conventions, and the Details import is properly removed from all changed files.

Key feedback:

1. syncKey with mismatched tab labels — The main substantive point. All 18 tabbed components share syncKey="workersAiExamples", but TextGenerationCode.astro and Flux-1-Schnell.astro use non-standard tab labels (e.g., "Worker (Streaming)", "Worker (Data URI)") that don't match the "TypeScript" label used everywhere else. This means syncKey tab syncing won't work for those pages when a user has previously selected "TypeScript" elsewhere. I suggested reordering tabs in TextGenerationCode so "TypeScript" comes first if the author wants sync to land correctly.

2. Single-example simplification — ImageToTextCode and MelottsCode correctly drop to bare <Code> blocks since wrapping a single example in tabs would be pointless.

3. DeepgramFlux exclusion — Correctly left unchanged; its three-step tutorial workflow (create/deploy/connect) is structurally different from a language-variant tab pattern.

github run