More refactor (#41)

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+	import type { ModelEntryWithTokenizer } from "./types";
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+
+	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import {
 		createHfInference,
 		handleStreamingResponse,
 		handleNonStreamingResponse,
 		isSystemPromptSupported,
 	} from "./inferencePlaygroundUtils";
+
+	import { onDestroy } from "svelte";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import Conversation from "./InferencePlaygroundConversation.svelte";
-	import { onDestroy } from "svelte";
-	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
-	import type { ModelEntryWithTokenizer } from "$lib/types";
-	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import IconShare from "../Icons/IconShare.svelte";
 	import IconDelete from "../Icons/IconDelete.svelte";
 	import IconCode from "../Icons/IconCode.svelte";
@@ -39,10 +41,6 @@
 
 	$: systemPromptSupported = isSystemPromptSupported(conversation.model);
 
-	onDestroy(() => {
-		abortController?.abort();
-	});
-
 	function addMessage() {
 		conversation.messages = [
 			...conversation.messages,
@@ -132,6 +130,10 @@
 			submit();
 		}
 	}
+
+	onDestroy(() => {
+		abortController?.abort();
+	});
 </script>
 
 {#if showTokenModal}

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Conversation } from "./types";
+
+	import { onDestroy } from "svelte";
 	import hljs from "highlight.js/lib/core";
 	import javascript from "highlight.js/lib/languages/javascript";
 	import python from "highlight.js/lib/languages/python";
 	import http from "highlight.js/lib/languages/http";
-	import type { Conversation } from "$lib/types";
+
 	import IconCopyCode from "../Icons/IconCopyCode.svelte";
-	import { onDestroy } from "svelte";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
@@ -27,6 +29,12 @@
 		language?: Language;
 	}
 
+	interface MessagesJoiner {
+		sep: string;
+		start: string;
+		end: string;
+	}
+
 	$: snippetsByLanguage = {
 		javascript: getJavascriptSnippets(conversation),
 		python: getPythonSnippets(conversation),
@@ -50,14 +58,14 @@
 	}
 
 	function getJavascriptSnippets(conversation: Conversation) {
-		const formattedMessages = ({ sep, start, end }) =>
+		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			getMessages()
 				.map(({ role, content }) => `{ role: "${role}", content: "${content}" }`)
 				.join(sep) +
 			end;
 
-		const formattedConfig = ({ sep, start, end }) =>
+		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			Object.entries(conversation.config)
 				.map(([key, val]) => `${key}: ${val}`)
@@ -116,14 +124,14 @@ console.log(out.choices[0].message);`,
 	}
 
 	function getPythonSnippets(conversation: Conversation) {
-		const formattedMessages = ({ sep, start, end }) =>
+		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			getMessages()
 				.map(({ role, content }) => `{ "role": "${role}", "content": "${content}" }`)
 				.join(sep) +
 			end;
 
-		const formattedConfig = ({ sep, start, end }) =>
+		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			Object.entries(conversation.config)
 				.map(([key, val]) => `${key}: ${val}`)
@@ -176,14 +184,14 @@ print(output.choices[0].message)`,
 	}
 
 	function getHttpSnippets(conversation: Conversation) {
-		const formattedMessages = ({ sep, start, end }) =>
+		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			getMessages()
 				.map(({ role, content }) => `{ "role": "${role}", "content": "${content}" }`)
 				.join(sep) +
 			end;
 
-		const formattedConfig = ({ sep, start, end }) =>
+		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
 			start +
 			Object.entries(conversation.config)
 				.map(([key, val]) => `"${key}": ${val}`)

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import type { Conversation } from "$lib/types";
+
 	import { createEventDispatcher } from "svelte";
+
 	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
 	import Message from "./InferencePlaygroundMessage.svelte";
 	import IconPlus from "../Icons/IconPlus.svelte";
-	import type { Conversation } from "$lib/types";
 
-	export let loading;
 	export let conversation: Conversation;
-	export let viewCode;
+	export let loading: boolean;
+	export let viewCode: boolean;
 
 	const dispatch = createEventDispatcher<{
 		addMessage: void;

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types";
+
 	import {
 		GENERATION_CONFIG_KEYS,
 		GENERATION_CONFIG_KEYS_ADVANCED,

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -1,7 +1,8 @@
-<!-- Main modal -->
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import { browser } from "$app/environment";
+
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+
 	import IconCross from "../Icons/IconCross.svelte";
 
 	let backdropEl: HTMLDivElement;
@@ -10,8 +11,8 @@
 	const dispatch = createEventDispatcher<{ close: void }>();
 
 	function handleKeydown(event: KeyboardEvent) {
-		// close on ESC
-		if (event.key === "Escape") {
+		const { key } = event;
+		if (key === "Escape") {
 			event.preventDefault();
 			dispatch("close");
 		}

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+	import { createEventDispatcher } from "svelte";
 
 	export let message: ChatCompletionInputMessage;
 	export let autofocus: boolean = false;

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from "$lib/types";
+	import type { Conversation, ModelEntryWithTokenizer } from "./types";
+
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 
@@ -20,7 +21,7 @@
 		return avatarUrl;
 	}
 
-	function changeModel(modelId: string) {
+	function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
 		const model = models.find(m => m.id === modelId);
 		if (!model) {
 			return;

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import type { ModelEntryWithTokenizer } from "$lib/types";
+	import type { ModelEntryWithTokenizer } from "./types";
+
 	import { createEventDispatcher } from "svelte";
+
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
 
@@ -11,8 +13,8 @@
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
 	function handleKeydown(event: KeyboardEvent) {
-		// close on ESC
-		if (event.key === "Escape") {
+		const { key } = event;
+		if (key === "Escape") {
 			event.preventDefault();
 			dispatch("close");
 		}

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,6 +1,7 @@
 import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+import type { Conversation, ModelEntryWithTokenizer } from "./types";
+
 import { HfInference } from "@huggingface/inference";
-import type { Conversation, ModelEntryWithTokenizer } from "$lib/types";
 
 export function createHfInference(token: string): HfInference {
 	return new HfInference(token);

src/lib/{types/index.d.ts → components/InferencePlayground/types.ts}

@@ -2,7 +2,7 @@ import type { GenerationConfig } from "$lib/components/InferencePlayground/gener
 import type { ModelEntry } from "@huggingface/hub";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
-type Conversation = {
+export type Conversation = {
 	model: ModelEntryWithTokenizer;
 	config: GenerationConfig;
 	messages: ChatCompletionInputMessage[];

src/routes/+page.server.ts

@@ -1,4 +1,4 @@
-import type { ModelEntryWithTokenizer } from "$lib/types";
+import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
 import type { ModelEntry } from "@huggingface/hub";
 import type { PageServerLoad } from "./$types";
 import { env } from "$env/dynamic/private";
@@ -16,7 +16,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 	compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 
 	const promises = compatibleModels.map(async model => {
-		const configUrl = `https://huggingface.co/${model.modelId}/raw/main/tokenizer_config.json`;
+		const configUrl = `https://huggingface.co/${model.id}/raw/main/tokenizer_config.json`;
 		const res = await fetch(configUrl);
 		if (!res.ok) {
 			return null; // Ignore failed requests by returning null