Add License, fix loading more models

Author: NetroScript

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 NetroScript
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/lib/common.ts

@@ -75,3 +75,16 @@ export const getModelType = (model: Model): ModelTypes => {
 
 	return ModelTypes.OTHER;
 };
+
+export const getModelSize = (model: Model): string => {
+	const nameParts = model.id.split('-');
+
+	// The part with /^\d+B$/ is the model size
+	for (const part of nameParts) {
+		if (/^\d+B$/.test(part)) {
+			return part;
+		}
+	}
+
+	return 'Unknown';
+};

src/lib/stores.ts

@@ -1,6 +1,6 @@
 import { derived, type Writable, writable } from 'svelte/store';
 import type { LocalStorageValue, SidePanel } from './common';
-import { FilterModes } from './common';
+import { FilterModes, getModelSize } from './common';
 
 import { localStorageStore } from '@skeletonlabs/skeleton';
 import * as devalue from 'devalue';
@@ -46,17 +46,11 @@ export const availableLicences = derived(state, ($state) => {
 	return Array.from(licences);
 });
 
-// Available Model Metadatas
+// Available Model Sizes
 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);
-			}
-		});
+		modelSizes.add(getModelSize(model));
 	});
 	return Array.from(modelSizes);
 });

src/routes/+layout.svelte

@@ -40,7 +40,7 @@
 				</div>
 				<a
 					class="anchor m-4"
-					href="https://github.com/NetroScript/huggingface-llm-filtering/blob/master/LICENSE.md"
+					href="https://github.com/NetroScript/huggingface-llm-filtering/blob/master/LICENSE"
 					rel="noreferrer"
 					target="_blank">MIT License</a
 				>

src/routes/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import {availableLicences, availableModelSizes, filteredModels, state} from '$lib/stores';
-	import {onMount} from 'svelte';
-	import type {Model} from '$lib/huggingfaceAPI';
-	import {ModelSchema} from '$lib/huggingfaceAPI';
+	import { availableLicences, availableModelSizes, filteredModels, state } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import type { Model } from '$lib/huggingfaceAPI';
+	import { ModelSchema } from '$lib/huggingfaceAPI';
 	import ModelCard from '$lib/components/ModelCard.svelte';
-	import {ProgressRadial} from "@skeletonlabs/skeleton";
-	import InfiniteLoading, {type StateChanger} from 'svelte-infinite-loading';
+	import { ProgressRadial } from '@skeletonlabs/skeleton';
+	import InfiniteLoading, { type StateChanger } from 'svelte-infinite-loading';
 
 	const updateModels = async () => {
 		const res = await fetch('https://huggingface.co/api/models?full=1&author=' + $state.author);
@@ -48,22 +48,24 @@
 	});
 
 	let shownModelCount = 50;
+	let loadingIdentifier = 0;
 
 	filteredModels.subscribe(() => {
 		shownModelCount = 50;
+		loadingIdentifier++;
 	});
 
 	$: currentShownModels = $filteredModels.slice(0, shownModelCount);
 
 	$: canShowMore = $filteredModels.length > shownModelCount;
 
-	let loadingIdentifier = 0;
+
 	const loadMore = async ({detail: {loaded, complete}} : ({detail: StateChanger}) )  => {
 
 		shownModelCount += 50;
 
 
-		if (shownModelCount >= $state.models.length) {
+		if (shownModelCount >= $filteredModels.length) {
 			complete();
 		} else {
 			loaded();
@@ -98,13 +100,14 @@
 			{#each currentShownModels as model, i}
 					<ModelCard {model} />
 			{/each}
-			<InfiniteLoading on:infinite={loadMore} distance={400} identifier={loadingIdentifier}>
-				<div slot="noMore"></div>
-			</InfiniteLoading>
+
 	</div>
 	{/if}
 
 	{#if canShowMore}
+		<InfiniteLoading on:infinite={loadMore} distance={400} identifier={loadingIdentifier}>
+			<div slot="noMore"></div>
+		</InfiniteLoading>
 		<ProgressRadial width="w-8 mx-auto" meter="stroke-surface-50" stroke="{150}"/>
 	{/if}
 </div>