[Docs Site] Fetching Workers AI models at build-time

Author: KianNH

bin/fetch-ai-models.js

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import ModelInfo from "./models/ModelInfo";
 import ModelBadges from "./models/ModelBadges";
 import { authorData } from "./models/data";
-import type { WorkersAIModelsSchema } from "~/schemas";
 
 type Filters = {
 	search: string;
@@ -11,7 +10,7 @@ type Filters = {
 	capabilities: string[];
 };
 
-const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
+const ModelCatalog = ({ models }: { models: any[] }) => {
 	const [filters, setFilters] = useState<Filters>({
 		search: "",
 		authors: [],
@@ -39,18 +38,21 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		model: {
 			...model,
 			capabilities: model.properties
-				.flatMap(({ property_id, value }) => {
-					if (property_id === "lora" && value === "true") {
+				.flatMap((property: any) => {
+					if (property.property_id === "lora" && property.value === "true") {
 						return "LoRA";
 					}
 
-					if (property_id === "function_calling" && value === "true") {
+					if (
+						property.property_id === "function_calling" &&
+						property.value === "true"
+					) {
 						return "Function calling";
 					}
 
 					return [];
 				})
-				.filter((p) => Boolean(p)),
+				.filter((p: any) => Boolean(p)),
 		},
 		model_display_name: model.name.split("/").at(-1),
 	}));
@@ -61,18 +63,21 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		...new Set(
 			models.flatMap((model) =>
 				model.properties
-					.flatMap(({ property_id, value }) => {
-						if (property_id === "lora" && value === "true") {
+					.flatMap((property: any) => {
+						if (property.property_id === "lora" && property.value === "true") {
 							return "LoRA";
 						}
 
-						if (property_id === "function_calling" && value === "true") {
+						if (
+							property.property_id === "function_calling" &&
+							property.value === "true"
+						) {
 							return "Function calling";
 						}
 
 						return [];
 					})
-					.filter((p) => Boolean(p)),
+					.filter((p: any) => Boolean(p)),
 			),
 		),
 	];
@@ -91,7 +96,9 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		}
 
 		if (filters.capabilities.length > 0) {
-			if (!model.capabilities.some((c) => filters.capabilities.includes(c))) {
+			if (
+				!model.capabilities.some((c: any) => filters.capabilities.includes(c))
+			) {
 				return false;
 			}
 		}
@@ -231,8 +238,8 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 				)}
 				{modelList.map((model) => {
 					const isBeta = model.model.properties.find(
-						({ property_id, value }) =>
-							property_id === "beta" && value === "true",
+						(property: any) =>
+							property.property_id === "beta" && property.value === "true",
 					);
 
 					const author = model.model.name.split("/")[1];

src/components/ModelCatalog.tsx

@@ -1,23 +1,24 @@
-import type { WorkersAIModelsSchema } from "~/schemas";
-
-const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
-	const badges = model.properties.flatMap(({ property_id, value }) => {
-		if (property_id === "lora" && value === "true") {
+const ModelBadges = ({ model }: { model: any }) => {
+	const badges = model.properties.flatMap((property: any) => {
+		if (property.property_id === "lora" && property.value === "true") {
 			return {
 				variant: "tip",
 				text: "LoRA",
 			};
 		}
 
-		if (property_id === "function_calling" && value === "true") {
+		if (
+			property.property_id === "function_calling" &&
+			property.value === "true"
+		) {
 			return {
 				variant: "note",
 				text: "Function calling",
 			};
 		}
 
-		if (property_id === "planned_deprecation_date") {
-			const timestamp = Math.floor(new Date(value).getTime() / 1000);
+		if (property.property_id === "planned_deprecation_date") {
+			const timestamp = Math.floor(new Date(property.value).getTime() / 1000);
 
 			if (Date.now() > timestamp) {
 				return { variant: "danger", text: "Deprecated" };
@@ -31,7 +32,7 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
 
 	return (
 		<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
-			{badges.map((badge) => (
+			{badges.map((badge: any) => (
 				<li key={badge.text}>
 					<span className="sl-badge default">{badge.text}</span>
 				</li>

src/components/models/ModelBadges.tsx

@@ -1,6 +1,4 @@
-import type { WorkersAIModelsSchema } from "~/schemas";
-
-const ModelFeatures = ({ model }: { model: WorkersAIModelsSchema }) => {
+const ModelFeatures = ({ model }: { model: any }) => {
 	const nf = new Intl.NumberFormat("en-US");
 	const properties: any = {};
 	model.properties.forEach((property: any) => {

src/components/models/ModelFeatures.tsx

@@ -1,7 +1,6 @@
-import type { WorkersAIModelsSchema } from "~/schemas";
 import { authorData } from "./data";
 
-const ModelInfo = ({ model }: { model: WorkersAIModelsSchema }) => {
+const ModelInfo = ({ model }: { model: any }) => {
 	const author =
 		authorData[model.name.split("/")[1]]?.name ?? model.name.split("/")[1];
 	return (

src/components/models/ModelInfo.tsx

@@ -16,7 +16,6 @@ import {
 	glossarySchema,
 	learningPathsSchema,
 	videosSchema,
-	workersAiModelsSchema,
 	warpReleasesSchema,
 	releaseNotesSchema,
 	fieldsSchema,
@@ -88,8 +87,20 @@ export const collections = {
 		loader: dataLoader("products"),
 	}),
 	"workers-ai-models": defineCollection({
-		loader: dataLoader("workers-ai-models"),
-		schema: workersAiModelsSchema,
+		loader: async () => {
+			const res = await fetch("https://ai.cloudflare.com/api/models");
+
+			const data: { models: any[] } = await res.json();
+
+			return data.models.map((model) => {
+				const id = model.name.split("/")[2];
+
+				return {
+					id,
+					...model,
+				};
+			});
+		},
 	}),
 	videos: defineCollection({
 		loader: file("src/content/videos/index.yaml"),