Add model card rendering

Author: NetroScript

package.json

@@ -32,6 +32,8 @@
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
+    "svelte-infinite-loading": "^1.3.8",
+    "svelte-relative-time": "^0.0.4",
     "svooltip": "^0.7.4",
     "tailwindcss": "3.3.3",
     "tslib": "^2.4.1",

pnpm-lock.yaml

@@ -23,8 +23,55 @@ export const defaultTooltipOptions: Options = {
 	delay: [1000, 0]
 };
 
-export type LocalStorageValue = {
+export enum FilterModes {
+	TIME_ASC = 'TIME_ASC',
+	TIME_DESC = 'TIME_DESC',
+	LIKES_ASC = 'LIKES_ASC',
+	LIKES_DESC = 'LIKES_DESC',
+	DOWNLOADS_ASC = 'DOWNLOADS_ASC',
+	DOWNLOADS_DESC = 'DOWNLOADS_DESC'
+}
+
+export interface LocalStorageValue {
 	lastUpdate: Date;
 	author: string;
 	models: Model[];
+	filters: {
+		name: string;
+		allowedLicences: string[];
+		allowedModelSizes: string[];
+		allowedModelTypes: ModelTypes[];
+		filterMode: FilterModes;
+	};
+}
+
+export enum ModelTypes {
+	GGML = 'GGML',
+	GPTQ = 'GPTQ',
+	GGUF = 'GGUF',
+	OTHER = 'OTHER'
+}
+
+export const getModelType = (model: Model): ModelTypes => {
+	// First iterate the siblings to check the files as a main indicator
+	// of the model type
+
+	for (const sibling of model.siblings) {
+		if (sibling.rfilename.toLowerCase().includes('.ggml')) {
+			return ModelTypes.GGML;
+		} else if (sibling.rfilename.toLowerCase().includes('.gguf')) {
+			return ModelTypes.GGUF;
+		}
+	}
+
+	// If none of the filenames matched, try the model name instead
+	if (model.id.toLowerCase().includes('ggml')) {
+		return ModelTypes.GGML;
+	} else if (model.id.toLowerCase().includes('gguf')) {
+		return ModelTypes.GGUF;
+	} else if (model.id.toLowerCase().includes('gptq')) {
+		return ModelTypes.GPTQ;
+	}
+
+	return ModelTypes.OTHER;
 };

src/lib/common.ts

@@ -0,0 +1,38 @@
+<script lang="ts">
+
+  import type {Model} from "$lib/huggingfaceAPI";
+  import {relativeTime} from 'svelte-relative-time'
+  import PhDownloadSimpleBold from '~icons/ph/download-simple-bold'
+  import PhHeartBold from '~icons/ph/heart-bold'
+  import PhFileTextBold from '~icons/ph/file-text-bold'
+
+  export let model: Model;
+
+  let license = "";
+
+  model.tags.forEach((tag: string) => {
+    if (tag.startsWith("license:")) {
+      license = tag.substring(8).toUpperCase();
+    }
+  })
+
+</script>
+
+
+<a class="block card card-hover w-full flex" href="https://huggingface.co/{model.id}" target="_blank">
+    <div class="flex-1 flex flex-col p-2 overflow-hidden">
+        <div class="font-bold px-4 truncate text-ellipsis overflow-hidden">
+            {model.id.split("/").pop()}
+        </div>
+
+        <div class="flex-1 flex px-4 truncate text-ellipsis overflow-hidden space-x-4">
+            <span class="opacity-75" use:relativeTime={{date: new Date(model.lastModified)}}/> <span class="opacity-90"><PhFileTextBold class="inline"/> License: {license}</span>
+        </div>
+    </div>
+    <div class="card variant-soft-secondary p-2 flex items-center rounded-r-none">
+        <PhDownloadSimpleBold class="inline mr-2"/> {model.downloads}
+    </div>
+    <div class="card variant-soft-tertiary p-2 flex items-center rounded-l-none">
+        <PhHeartBold class="inline mr-2 text-primary-700"/> {model.likes}
+    </div>
+</a>

src/lib/components/ModelCard.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import {filterText} from '$lib/stores.js';
-	import {AppBar} from '@skeletonlabs/skeleton';
+	import {AppBar, LightSwitch} from '@skeletonlabs/skeleton';
 	import PhGearFill from '~icons/ph/gear-fill';
 	import PhMagnifyingGlass from '~icons/ph/magnifying-glass';
 	import {tooltip} from 'svooltip';
 
-	import {sidePanelRight} from '$lib/stores';
+	import {sidePanelRight, state} from '$lib/stores';
 	import type {SidePanel} from '$lib/common';
 	import {defaultTooltipOptions} from '$lib/common';
 
@@ -45,11 +44,14 @@
 </script>
 
 <AppBar gridColumns="!flex" slotDefault="place-self-center" slotTrail="place-content-end">
+	<svelte:fragment slot="lead">
+		<LightSwitch/>
+	</svelte:fragment>
 	<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] w-full">
 		<div class="input-group-shim">
 			<PhMagnifyingGlass />
 		</div>
-		<input bind:value={$filterText} placeholder="Filter by Name" type="search" />
+		<input bind:value={$state.filters.name} placeholder="Filter by Name" type="search" />
 	</div>
 	<svelte:fragment slot="trail">
 		<button

src/lib/components/layout/HeaderBar.svelte

@@ -1,26 +1,110 @@
-import { type Writable, writable } from 'svelte/store';
+import { derived, type Writable, writable } from 'svelte/store';
 import type { LocalStorageValue, SidePanel } from './common';
+import { FilterModes } from './common';
 
 import { localStorageStore } from '@skeletonlabs/skeleton';
 import * as devalue from 'devalue';
 
-export const filterText = writable('');
-
 export const sidePanelRight = writable<SidePanel>({
 	width: 300,
 	offset: 0,
 	visible: true,
 	side: 'right'
 });
 
-export const state: Writable<LocalStorageValue> = localStorageStore(
+export const state: Writable<LocalStorageValue> = localStorageStore<LocalStorageValue>(
 	'state',
 	{
 		lastUpdate: new Date(0),
 		author: 'TheBloke',
-		models: []
+		models: [],
+		filters: {
+			name: '',
+			allowedLicences: [],
+			allowedModelSizes: [],
+			allowedModelTypes: [],
+			filterMode: FilterModes.TIME_DESC
+		}
 	},
 	{
 		serializer: devalue
 	}
 );
+
+// Derivative stores
+
+// Extract all possible licences from the models
+export const availableLicences = derived(state, ($state) => {
+	const licences = new Set<string>();
+	$state.models.forEach((model) => {
+		model.tags.forEach((tag) => {
+			if (tag.startsWith('license:')) {
+				licences.add(tag.substring(8));
+			}
+		});
+	});
+	return Array.from(licences);
+});
+
+// Available Model Metadatas
+export const availableModelSizes = derived(state, ($state) => {
+	const modelSizes = new Set<string>();
+	$state.models.forEach((model) => {
+		const nameParts = model.id.split('-');
+		// The part with /^\d+B$/ is the model size
+		nameParts.forEach((part) => {
+			if (/^\d+B$/.test(part)) {
+				modelSizes.add(part);
+			}
+		});
+	});
+	return Array.from(modelSizes);
+});
+
+export const filteredModels = derived(state, ($state) => {
+	let filtered = $state.models.filter((model) => {
+		if (
+			$state.filters.name !== '' &&
+			!model.id.toLowerCase().includes($state.filters.name.toLowerCase())
+		) {
+			return false;
+		}
+
+		return true;
+	});
+
+	switch ($state.filters.filterMode) {
+		case FilterModes.TIME_ASC:
+			filtered = filtered.sort((a, b) => {
+				return a.lastModified.getTime() - b.lastModified.getTime();
+			});
+			break;
+		case FilterModes.TIME_DESC:
+			filtered = filtered.sort((a, b) => {
+				return b.lastModified.getTime() - a.lastModified.getTime();
+			});
+			break;
+		case FilterModes.LIKES_ASC:
+			filtered = filtered.sort((a, b) => {
+				return a.likes - b.likes;
+			});
+			break;
+		case FilterModes.LIKES_DESC:
+			filtered = filtered.sort((a, b) => {
+				return b.likes - a.likes;
+			});
+			break;
+		case FilterModes.DOWNLOADS_ASC:
+			filtered = filtered.sort((a, b) => {
+				return a.downloads - b.downloads;
+			});
+			break;
+		case FilterModes.DOWNLOADS_DESC:
+			filtered = filtered.sort((a, b) => {
+				return b.downloads - a.downloads;
+			});
+			break;
+	}
+
+	return filtered;
+});