Improve Workers AI model catalog search and display tags

src/components/ModelCatalog.tsx

@@ -164,7 +164,16 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		}
 
 		if (filters.search) {
-			if (!model.name.toLowerCase().includes(filters.search.toLowerCase())) {
+			const searchTerm = filters.search.toLowerCase();
+			const matchesName = model.name.toLowerCase().includes(searchTerm);
+			const matchesDescription = model.description
+				.toLowerCase()
+				.includes(searchTerm);
+			const matchesTags = model.tags?.some((tag) =>
+				tag.toLowerCase().includes(searchTerm),
+			);
+
+			if (!matchesName && !matchesDescription && !matchesTags) {
 				return false;
 			}
 		}
@@ -309,7 +318,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 					return (
 						<a
 							key={model.model.id}
-							className="relative mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
+							className="relative mb-3 flex w-full flex-col rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
 							href={`/workers-ai/models/${model.model_display_name}`}
 						>
 							{isPinned && (
@@ -340,8 +349,8 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 							<p className="mt-2! line-clamp-2 text-sm leading-6">
 								{model.model.description}
 							</p>
-							<div className="mt-2! text-xs">
-								<ModelBadges model={model.model} />
+							<div className="mt-auto pt-2 text-xs">
+								<ModelBadges model={model.model} showTags />
 							</div>
 						</a>
 					);

src/components/models/ModelBadges.tsx

@@ -1,6 +1,12 @@
 import type { WorkersAIModelsSchema } from "~/schemas";
 
-const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
+const ModelBadges = ({
+	model,
+	showTags = false,
+}: {
+	model: WorkersAIModelsSchema;
+	showTags?: boolean;
+}) => {
 	const badges = model.properties.flatMap(({ property_id, value }) => {
 		if (property_id === "lora" && value === "true") {
 			return {
@@ -50,11 +56,31 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
 		return [];
 	});
 
+	// Add tags as badges if showTags is enabled
+	const tagBadges =
+		showTags && model.tags
+			? model.tags.slice(0, 3).map((tag) => ({
+					variant: "default",
+					text: tag,
+					isTag: true,
+				}))
+			: [];
+
+	const allBadges = [...badges, ...tagBadges];
+
 	return (
-		<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
-			{badges.map((badge) => (
-				<li key={badge.text}>
-					<span className="sl-badge default">{badge.text}</span>
+		<ul className="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-xs">
+			{allBadges.map((badge) => (
+				<li key={badge.text} className="m-0">
+					<span
+						className={`sl-badge ${
+							"isTag" in badge && badge.isTag
+								? "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+								: "default"
+						}`}
+					>
+						{badge.text}
+					</span>
 				</li>
 			))}
 		</ul>

src/pages/workers-ai/models/[name].astro

@@ -217,6 +217,21 @@ const starlightPageProps = {
 
 	<p class="mt-3 mb-2!">{description}</p>
 
+	{
+		model.tags && model.tags.length > 0 && (
+			<div class="mt-3 flex flex-wrap gap-2">
+				{model.tags.map((tag: string) => (
+					<a
+						href={`/workers-ai/models/?search=${encodeURIComponent(tag)}`}
+						class="inline-block rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 no-underline transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+					>
+						{tag}
+					</a>
+				))}
+			</div>
+		)
+	}
+
 	{
 		model.name === "@cf/meta/llama-3.2-11b-vision-instruct" && (
 			<Aside>