[system prompts] Support default system prompts (#56)

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -13,7 +13,7 @@
 	} from "./inferencePlaygroundUtils";
 
 	import { onDestroy, onMount } from "svelte";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
+	import GenerationConfig, { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
@@ -29,10 +29,12 @@
 	export let models: ModelEntryWithTokenizer[];
 
 	const startMessageUser: ChatCompletionInputMessage = { role: "user", content: "" };
-	const startMessageSystem: ChatCompletionInputMessage = { role: "system", content: "" };
-
 	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
 	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
+	const systemMessage: ChatCompletionInputMessage = {
+		role: "system",
+		content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
+	};
 
 	let session: Session = {
 		conversations: [
@@ -40,7 +42,7 @@
 				model: models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
 				config: { ...defaultGenerationConfig },
 				messages: [{ ...startMessageUser }],
-				systemMessage: startMessageSystem,
+				systemMessage,
 				streaming: true,
 			},
 		],
@@ -52,7 +54,7 @@
 				model,
 				config: { ...defaultGenerationConfig },
 				messages: [{ ...startMessageUser }],
-				systemMessage: startMessageSystem,
+				systemMessage,
 				streaming: true,
 			};
 		}) as [Conversation] | [Conversation, Conversation];

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,3 +1,10 @@
+<script context="module" lang="ts">
+	export const defaultSystemMessage: { [key: string]: string } = {
+		"Qwen/QwQ-32B-Preview":
+			"You are a helpful and harmless assistant. You are Qwen developed by Alibaba. You should think step-by-step.",
+	} as const;
+</script>
+
 <script lang="ts">
 	import type { Conversation } from "$lib/components/InferencePlayground/types";
 

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -7,6 +7,7 @@
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import Avatar from "../Avatar.svelte";
+	import { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 
 	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
@@ -19,6 +20,7 @@
 			return;
 		}
 		conversation.model = model;
+		conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
 
 		const url = new URL($page.url);
 		url.searchParams.set("modelId", model.id);