Workers AI Model Catalog & Model Pages (#17068)

* Implement catalog and new model pages

* Implement build-time model data fetching

* Create prompting guide

* Clean up schema handling

* Fix schema links

* Re-add external links

* Fix rehypeExternalLinks import

* Fix Models navigation link

* Styling fixes for Dark Mode

* Implement responsive design

* Type fixes

* Update Model page types

* Add llama-3.2 agreement notice

* Fix search types

* Add static model fetching

* Added flux

* Add llama-70b

---------

Co-authored-by: Kian <[email protected]>

Author: 2 people

astro.config.mjs

@@ -13,6 +13,7 @@ import { h } from "hastscript";
 import { readdir } from "fs/promises";
 import icon from "astro-icon";
 import sitemap from "@astrojs/sitemap";
+import react from "@astrojs/react";
 import rehypeTitleFigure from "rehype-title-figure";
 
 const runLinkCheck = process.env.RUN_LINK_CHECK || false;
@@ -35,25 +36,35 @@ async function autogenSections() {
 		};
 	});
 }
-
 const AnchorLinkIcon = h(
 	"span",
-	{ ariaHidden: "true", class: "anchor-icon" },
+	{
+		ariaHidden: "true",
+		class: "anchor-icon",
+	},
 	h(
 		"svg",
-		{ width: 16, height: 16, viewBox: "0 0 24 24" },
+		{
+			width: 16,
+			height: 16,
+			viewBox: "0 0 24 24",
+		},
 		h("path", {
 			fill: "currentcolor",
 			d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
 		}),
 	),
 );
-
 const autolinkConfig = {
-	properties: { class: "anchor-link" },
+	properties: {
+		class: "anchor-link",
+	},
 	behavior: "after",
 	group: ({ tagName }) =>
-		h("div", { tabIndex: -1, class: `heading-wrapper level-${tagName}` }),
+		h("div", {
+			tabIndex: -1,
+			class: `heading-wrapper level-${tagName}`,
+		}),
 	content: () => [AnchorLinkIcon],
 };
 
@@ -89,6 +100,7 @@ export default defineConfig({
 	},
 	experimental: {
 		contentIntellisense: true,
+		contentLayer: true,
 	},
 	server: {
 		port: 1111,
@@ -196,14 +208,17 @@ export default defineConfig({
 		tailwind({
 			applyBaseStyles: false,
 		}),
-		liveCode({ layout: "~/components/live-code/Layout.astro" }),
+		liveCode({
+			layout: "~/components/live-code/Layout.astro",
+		}),
 		icon(),
 		sitemap({
 			serialize(item) {
 				item.lastmod = new Date();
 				return item;
 			},
 		}),
+		react(),
 	],
 	vite: {
 		build: {

bin/fetch-ai-models.js

@@ -0,0 +1,14 @@
+import fs from "fs";
+
+fetch("https://ai.cloudflare.com/api/models")
+	.then((res) => res.json())
+	.then((data) => {
+		data.models.forEach((model) => {
+			const fileName = model.name.split("/")[2];
+			fs.writeFileSync(
+				`./src/content/workers-ai-models/${fileName}.json`,
+				JSON.stringify(model),
+				"utf-8",
+			);
+		});
+	});