Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
superhighfives wants to merge 1 commit into
base: production
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/components/models/code/AutomaticSpeechRecognitionCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -45,10 +44,11 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Workers - TypeScript" open>
<Code code={worker} lang="ts" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
25 changes: 12 additions & 13 deletions src/components/models/code/Bge-Reranker-Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -66,14 +65,14 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Worker" open>
<Code code={worker} lang="ts" />
</Details>

<Details header="Python" open>
<Code code={python} lang="py" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</TabItem>
<TabItem label="Python" icon="seti:python">
<Code code={python} lang="py" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
16 changes: 7 additions & 9 deletions src/components/models/code/DeepgramAura.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -37,12 +36,11 @@ curl --request POST \
`;
---

<>
<Details header="Worker" open>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</Details>

<Details header="curl" open>
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</Details>
</>
</TabItem>
</Tabs>
16 changes: 7 additions & 9 deletions src/components/models/code/DeepgramNova.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -41,12 +40,11 @@ curl --request POST \
`;
---

<>
<Details header="Worker" open>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</Details>

<Details header="curl" open>
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</Details>
</>
</TabItem>
</Tabs>
25 changes: 12 additions & 13 deletions src/components/models/code/Flux-1-Schnell.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -62,14 +61,14 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Workers - Returning a data URI - TypeScript" open>
<Code code={workerReturningDataURI} lang="ts" />
</Details>

<Details header="Workers - Returning an image - TypeScript" open>
<Code code={workerReturningImage} lang="ts" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="Worker (Data URI)" icon="seti:typescript">
Copy link
Contributor

@ask-bonk ask-bonk bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<Code code={workerReturningDataURI} lang="ts" />
</TabItem>
<TabItem label="Worker (Image)" icon="seti:typescript">
<Code code={workerReturningImage} lang="ts" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
18 changes: 9 additions & 9 deletions src/components/models/code/Flux-2.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -54,10 +53,11 @@ curl --request POST \\
`;
---

<Details header="Workers - TypeScript" open>
<Code code={workerCode} lang="ts" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={workerCode} lang="ts" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
18 changes: 9 additions & 9 deletions src/components/models/code/ImageClassificationCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -43,10 +42,11 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Workers - TypeScript" open>
<Code code={worker} lang="ts" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
5 changes: 1 addition & 4 deletions src/components/models/code/ImageToTextCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -36,6 +35,4 @@ export default {
`;
---

<Details header="Workers - TypeScript" open>
<Code code={worker} lang="ts" />
</Details>
<Code code={worker} lang="ts" />
25 changes: 12 additions & 13 deletions src/components/models/code/LlamaGuard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -65,14 +64,14 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Worker" open>
<Code code={worker} lang="ts" />
</Details>

<Details header="Python" open>
<Code code={python} lang="py" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</TabItem>
<TabItem label="Python" icon="seti:python">
<Code code={python} lang="py" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
5 changes: 1 addition & 4 deletions src/components/models/code/MelottsCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";

type Props = z.infer<typeof props>;

Expand All @@ -28,6 +27,4 @@ export default {
} satisfies ExportedHandler<Env>;`;
---

<Details header="Workers - TypeScript" open>
<Code code={worker} lang="ts" />
</Details>
<Code code={worker} lang="ts" />
Copy link
Contributor

@ask-bonk ask-bonk bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

18 changes: 9 additions & 9 deletions src/components/models/code/ObjectDetectionCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -43,10 +42,11 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run
`;
---

<Details header="Workers - TypeScript" open>
<Code code={worker} lang="ts" />
</Details>

<Details header="curl" open>
<Code code={curl} lang="sh" />
</Details>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</TabItem>
</Tabs>
64 changes: 31 additions & 33 deletions src/components/models/code/OpenAIResponsesTextGenerationCode.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
import { z } from "astro:schema";
import { Aside, Code } from "@astrojs/starlight/components";
import Details from "~/components/Details.astro";
import { Aside, Code, Tabs, TabItem } from "@astrojs/starlight/components";

type Props = z.infer<typeof props>;

Expand Down Expand Up @@ -56,38 +55,37 @@ curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/v1/
`;
---

<>
<Details header="Worker" open>
<Tabs syncKey="workersAiExamples">
<TabItem label="TypeScript" icon="seti:typescript">
<Code code={worker} lang="ts" />
</Details>

<Details header="Python" open>
</TabItem>
<TabItem label="Python" icon="seti:python">
<Code code={python} lang="py" />
</Details>

<Details header="curl" open>
</TabItem>
<TabItem label="curl" icon="seti:shell">
<Code code={curl} lang="sh" />
</Details>
</TabItem>
</Tabs>

<Aside type="note" title="Multiple API format support">
This model supports three different API formats:
<ul>
<li>
<strong>Responses API</strong> (<code>/ai/v1/responses</code>) - Native
OpenAI responses format shown above with <code>input</code> parameter
</li>
<li>
<strong>Workers AI Run</strong> (<code>/ai/run</code>) - Dynamic format
detection, accepts Chat Completions (<code>messages</code>), legacy Completions
(<code>prompt</code>), or Responses API (<code>input</code>)
</li>
<li>
<strong>Chat Completions</strong> (<code>/v1/chat/completions</code>) -
OpenAI-compatible endpoint with <code>messages</code> array. Refer to{" "}
<a href="/workers-ai/configuration/open-ai-compatibility/">
OpenAI Compatibility
</a>{" "}
for details.
</li>
</ul>
</Aside>
<Aside type="note" title="Multiple API format support">
This model supports three different API formats:
<ul>
<li>
<strong>Responses API</strong> (<code>/ai/v1/responses</code>) - Native
OpenAI responses format shown above with <code>input</code> parameter
</li>
<li>
<strong>Workers AI Run</strong> (<code>/ai/run</code>) - Dynamic format
detection, accepts Chat Completions (<code>messages</code>), legacy Completions
(<code>prompt</code>), or Responses API (<code>input</code>)
</li>
<li>
<strong>Chat Completions</strong> (<code>/v1/chat/completions</code>) -
OpenAI-compatible endpoint with <code>messages</code> array. Refer to{" "}
<a href="/workers-ai/configuration/open-ai-compatibility/">
OpenAI Compatibility
</a>{" "}
for details.
</li>
</ul>
</Aside>
Loading
Loading