add tag colors

api/api/src/models/tag.py

@@ -4,3 +4,4 @@
 class Tag(BaseModel):
     name: str
     category: str
+    color: str

api/api/src/usecases/user/create_api_key.py

@@ -5,7 +5,7 @@
 
 def create_api_key(user: User) -> ApiKey:
     repo = UserDBRepo()
-    if len(retrieve_api_keys(user)) >= 2:
+    if len(retrieve_api_keys(user)) >= 5:
         raise Exception(
             "API key limit reached. Delete an existing key to create a new one."
         )

ui/src/components/Card.svelte

@@ -9,6 +9,7 @@
     export let data;
     export let liked = null;
     export let link = "datasets";
+    export let tags;
 </script>
 
 <a
@@ -22,7 +23,9 @@
         <div class="flex flex-wrap gap-1 content-start mt-1">
             {#each data.tags as tag}
                 <p
-                    class="badge badge-outline bg-white border-slate-300 text-slate-400 text-xs h-full"
+                    class="badge border-0 text-slate-800 text-xs"
+                    style="background-color: {tags?.find((t) => t.name == tag)
+                        .color || 'none'};"
                 >
                     {tag}
                 </p>
@@ -47,7 +50,7 @@
                     <Sd color="gray" size={14} />
                     <p>
                         {formatFileSize(
-                            data.versions[data.versions.length - 1]?.size || 0
+                            data.versions[data.versions.length - 1]?.size || 0,
                         )}
                     </p>
                 </span>

ui/src/components/Tags.svelte

@@ -30,11 +30,12 @@
             {#each tags as tag}
                 {#if tag.category == category}
                     <button
-                        class="badge text-slate-400 text-xs mx-[1px] {selected_tags.includes(
-                            tag.name,
-                        )
-                            ? 'badge badge-accent bg-green-100 text-slate-600 '
-                            : 'badge-outline'}"
+                        class={`badge text-slate-400 text-xs mx-[1px] ${
+                            selected_tags.includes(tag.name)
+                                ? `badge badge-outline text-slate-600 border-0`
+                                : "badge-outline"
+                        }`}
+                        style={`${selected_tags.includes(tag.name) && `background-color: ${tag.color};`}`}
                         on:click={() => toggleTag(tag.name)}
                     >
                         {tag.name}

ui/src/routes/+page.js

@@ -1,8 +1,12 @@
+import retrieveTags from '../lib/tags/retrieveTags'
+
 export const load = async ({fetch}) => {
 	const response = await fetch(`/api/posts`);
 	const posts = await response.json();
+	const tags = await retrieveTags(fetch)
 	return {
-		posts: posts.slice(0, 3)
+		posts: posts.slice(0, 3),
+		tags
 	}
 }
 

ui/src/routes/+page.svelte

@@ -28,16 +28,16 @@
     class="w-full"
     style="background: url('backgrounds/Group-1170.png') center center/cover"
   >
-    <RecentDatasets />
-    <PopularDatasets />
+    <RecentDatasets tags={data.tags} />
+    <PopularDatasets tags={data.tags} />
     <DatasetsLeaderboard />
   </div>
   <div
     class="w-full"
     style="background: url('backgrounds/Group-1170.png') center center/cover"
   >
-    <RecentModels />
-    <PopularModels />
+    <RecentModels tags={data.tags} />
+    <PopularModels tags={data.tags} />
     <ModelsLeaderboard />
   </div>
   <Posts posts={data.posts} />

ui/src/routes/Popular.svelte

@@ -4,6 +4,7 @@
 
     export let data;
     export let title;
+    export let tags;
 </script>
 
 <div class="flex flex-col items-center w-full pt-10">
@@ -14,7 +15,7 @@
         >
             {#if data}
                 {#each data as item}
-                    <Card data={item} />
+                    <Card data={item} {tags} />
                 {/each}
             {:else}
                 {#each [1, 2, 3] as _}

ui/src/routes/PopularDatasets.svelte

@@ -3,10 +3,12 @@
 	import retrievePopularDatasets from "$lib/datasets/retrievePopularDatasets";
 	import Popular from "./Popular.svelte";
 
+	export let tags;
+
 	let data = null;
 	onMount(async () => {
 		data = await retrievePopularDatasets(fetch, 3);
 	});
 </script>
 
-<Popular {data} title="Popular datasets" />
+<Popular {data} title="Popular datasets" {tags} />

ui/src/routes/PopularModels.svelte

@@ -3,10 +3,12 @@
 	import retrievePopularModels from "$lib/models/retrievePopularModels";
 	import Popular from "./Popular.svelte";
 
+	export let tags;
+
 	let data = null;
 	onMount(async () => {
 		data = await retrievePopularModels(fetch, 3);
 	});
 </script>
 
-<Popular {data} title="Popular models" />
+<Popular {data} title="Popular models" {tags} />

ui/src/routes/Recent.svelte

@@ -4,6 +4,7 @@
 
     export let data;
     export let title;
+    export let tags;
 </script>
 
 <div class="flex flex-col items-center w-full">
@@ -27,7 +28,7 @@
         >
             {#if data}
                 {#each data as item}
-                    <Card data={item} />
+                    <Card data={item} {tags} />
                 {/each}
             {:else}
                 {#each [1, 2, 3] as _}

ui/src/routes/RecentDatasets.svelte

@@ -3,10 +3,12 @@
 	import retrieveDatasets from "$lib/datasets/retrieveDatasets";
 	import Recent from "./Recent.svelte";
 
+	export let tags;
+
 	let data = null;
 	onMount(async () => {
 		data = await retrieveDatasets(fetch, 3);
 	});
 </script>
 
-<Recent {data} title="Recent datasets" />
+<Recent {data} title="Recent datasets" {tags} />

ui/src/routes/RecentModels.svelte

@@ -3,10 +3,12 @@
 	import retrieveModels from "$lib/models/retrieveModels";
 	import Recent from "./Recent.svelte";
 
+	export let tags;
+
 	let data = null;
 	onMount(async () => {
 		data = await retrieveModels(fetch, 3);
 	});
 </script>
 
-<Recent {data} title="Recent models" />
+<Recent {data} title="Recent models" {tags} />

ui/src/routes/datasets/+page.svelte

@@ -126,6 +126,7 @@
 					<Card
 						data={dataset}
 						liked={$user?.liked_datasets.includes(dataset.id)}
+						tags={data.tags}
 					/>
 				{/each}
 			</div>

ui/src/routes/datasets/IngestForm.svelte

@@ -133,11 +133,14 @@
     <div class="flex flex-wrap gap-1">
       {#each tags as tag}
         <p
-          class="badge badge-outline cursor-pointer text-slate-400 text-xs {selected_tags.includes(
+          class="badge cursor-pointer text-slate-400 text-xs {selected_tags.includes(
             tag.name,
-          ) && 'badge-accent'}"
+          )
+            ? 'text-slate-800 border-0'
+            : 'badge-outline'}"
           on:click={() => toggleTag(tag.name)}
           on:keyup={() => {}}
+          style={`${selected_tags.includes(tag.name) && `background-color: ${tag.color};`}`}
         >
           {tag.name}
         </p>

ui/src/routes/datasets/[name]/+page.svelte

@@ -55,7 +55,10 @@
 					<div class="flex flex-wrap gap-1">
 						{#each dataset.tags as tag}
 							<p
-								class="badge badge-outline border-slate-300 text-slate-400 text-xs"
+								class="badge border-0 text-slate-800 text-xs"
+								style="background-color: {data.tags?.find(
+									(t) => t.name == tag,
+								).color || 'none'};"
 							>
 								{tag}
 							</p>

ui/src/routes/models/+page.svelte

@@ -33,7 +33,9 @@
 		filtered_models = $models.data
 			?.filter((models) => {
 				if (selected_tags.length === 0) return true;
-				return selected_tags.every((tag) => models.tags.includes(tag.name));
+				return selected_tags.every((tag) =>
+					models.tags.includes(tag.name),
+				);
 			})
 			.filter((models) => {
 				if (filterName.length === 0) return true;
@@ -123,6 +125,7 @@
 						data={model}
 						link="models"
 						liked={$user?.liked_models?.includes(model.id)}
+						tags={data.tags}
 					/>
 				{/each}
 			</div>

ui/src/routes/models/[name]/+page.svelte

@@ -47,7 +47,10 @@
 					<div class="flex flex-wrap gap-1">
 						{#each model.tags as tag}
 							<p
-								class="badge badge-outline border-slate-300 text-slate-400 text-xs"
+								class="badge border-0 text-slate-800 text-xs"
+								style="background-color: {data.tags?.find(
+									(t) => t.name == tag,
+								).color || 'none'};"
 							>
 								{tag}
 							</p>