✨ Add model id to be able to switch models while keeping conversations valid (#181)

src/lib/components/ModelsModal.svelte

@@ -13,7 +13,7 @@
 	export let settings: LayoutData["settings"];
 	export let models: Array<Model>;
 
-	let selectedModelName = settings.activeModel;
+	let selectedModelId = settings.activeModel;
 
 	const dispatch = createEventDispatcher<{ close: void }>();
 </script>
@@ -40,7 +40,7 @@
 		<div class="space-y-4">
 			{#each models as model}
 				<div
-					class="rounded-xl border border-gray-100 {model.name === selectedModelName
+					class="rounded-xl border border-gray-100 {model.id === selectedModelId
 						? 'bg-gradient-to-r from-yellow-200/40 via-yellow-500/10'
 						: ''}"
 				>
@@ -49,8 +49,8 @@
 							type="radio"
 							class="sr-only"
 							name="activeModel"
-							value={model.name}
-							bind:group={selectedModelName}
+							value={model.id}
+							bind:group={selectedModelId}
 						/>
 						<span>
 							<span class="text-md block font-semibold leading-tight text-gray-800"
@@ -61,7 +61,7 @@
 							{/if}
 						</span>
 						<CarbonCheckmark
-							class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {model.name === selectedModelName
+							class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {model.id === selectedModelId
 								? 'text-yellow-400'
 								: 'text-transparent group-hover:text-gray-200'}"
 						/>

src/lib/server/modelEndpoint.ts

@@ -1,34 +1,23 @@
 import { HF_ACCESS_TOKEN } from "$env/static/private";
 import { sum } from "$lib/utils/sum";
-import { models } from "./models";
+import type { BackendModel } from "./models";
 
 /**
  * Find a random load-balanced endpoint
  */
-export function modelEndpoint(model: string): {
+export function modelEndpoint(model: BackendModel): {
 	url: string;
 	authorization: string;
 	weight: number;
 } {
-	const modelDefinition = models.find((m) => m.name === model);
-	if (!modelDefinition) {
-		throw new Error(`Invalid model: ${model}`);
-	}
-	if (typeof modelDefinition === "string") {
-		return {
-			url: `https://api-inference.huggingface.co/models/${modelDefinition}`,
-			authorization: `Bearer ${HF_ACCESS_TOKEN}`,
-			weight: 1,
-		};
-	}
-	if (!modelDefinition.endpoints) {
+	if (!model.endpoints) {
 		return {
-			url: `https://api-inference.huggingface.co/models/${modelDefinition.name}`,
+			url: `https://api-inference.huggingface.co/models/${model.name}`,
 			authorization: `Bearer ${HF_ACCESS_TOKEN}`,
 			weight: 1,
 		};
 	}
-	const endpoints = modelDefinition.endpoints;
+	const endpoints = model.endpoints;
 	const totalWeight = sum(endpoints.map((e) => e.weight));
 
 	let random = Math.random() * totalWeight;

src/lib/server/models.ts

@@ -4,6 +4,9 @@ import { z } from "zod";
 const modelsRaw = z
 	.array(
 		z.object({
+			/** Used as an identifier in DB */
+			id: z.string().optional(),
+			/** Used to link to the model page, and for inference */
 			name: z.string().min(1),
 			displayName: z.string().min(1).optional(),
 			description: z.string().min(1).optional(),
@@ -46,6 +49,7 @@ const modelsRaw = z
 export const models = await Promise.all(
 	modelsRaw.map(async (m) => ({
 		...m,
+		id: m.id || m.name,
 		displayName: m.displayName || m.name,
 		preprompt: m.prepromptUrl ? await fetch(m.prepromptUrl).then((r) => r.text()) : m.preprompt,
 	}))

src/lib/types/Model.ts

@@ -2,6 +2,7 @@ import type { BackendModel } from "$lib/server/models";
 
 export type Model = Pick<
 	BackendModel,
+	| "id"
 	| "name"
 	| "displayName"
 	| "websiteUrl"

src/lib/utils/models.ts

@@ -2,9 +2,9 @@ import type { Model } from "$lib/types/Model";
 import { z } from "zod";
 
 export const findCurrentModel = (models: Model[], name?: string) =>
-	models.find((m) => m.name === name) ?? models[0];
+	models.find((m) => m.id === name) ?? models[0];
 
 export const validateModel = (models: Model[]) => {
 	// Zod enum function requires 2 parameters
-	return z.enum([models[0].name, ...models.slice(1).map((m) => m.name)]);
+	return z.enum([models[0].id, ...models.slice(1).map((m) => m.id)]);
 };

src/routes/+layout.server.ts

@@ -50,9 +50,10 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 		settings: {
 			shareConversationsWithModelAuthors: settings?.shareConversationsWithModelAuthors ?? true,
 			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
-			activeModel: settings?.activeModel ?? defaultModel.name,
+			activeModel: settings?.activeModel ?? defaultModel.id,
 		},
 		models: models.map((model) => ({
+			id: model.id,
 			name: model.name,
 			websiteUrl: model.websiteUrl,
 			datasetName: model.datasetName,

src/routes/conversation/+server.ts

@@ -5,7 +5,7 @@ import { error, redirect } from "@sveltejs/kit";
 import { base } from "$app/paths";
 import { z } from "zod";
 import type { Message } from "$lib/types/Message";
-import { defaultModel, models } from "$lib/server/models";
+import { models } from "$lib/server/models";
 import { validateModel } from "$lib/utils/models";
 
 export const POST: RequestHandler = async (input) => {
@@ -17,7 +17,7 @@ export const POST: RequestHandler = async (input) => {
 	const values = z
 		.object({
 			fromShare: z.string().optional(),
-			model: validateModel(models).default(defaultModel.name),
+			model: validateModel(models),
 		})
 		.parse(JSON.parse(body));
 

src/routes/conversation/[id]/+page.svelte

@@ -36,7 +36,7 @@
 				model: $page.url.href,
 				inputs,
 				parameters: {
-					...data.models.find((m) => m.name === data.model)?.parameters,
+					...data.models.find((m) => m.id === data.model)?.parameters,
 					return_full_text: false,
 				},
 			},

src/routes/conversation/[id]/+server.ts

@@ -3,7 +3,7 @@ import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken.js";
 import { abortedGenerations } from "$lib/server/abortedGenerations.js";
 import { collections } from "$lib/server/database.js";
 import { modelEndpoint } from "$lib/server/modelEndpoint.js";
-import { defaultModel, models } from "$lib/server/models.js";
+import { models } from "$lib/server/models.js";
 import type { Message } from "$lib/types/Message.js";
 import { concatUint8Arrays } from "$lib/utils/concatUint8Arrays.js";
 import { streamToAsyncIterable } from "$lib/utils/streamToAsyncIterable";
@@ -28,7 +28,11 @@ export async function POST({ request, fetch, locals, params }) {
 		throw error(404, "Conversation not found");
 	}
 
-	const model = conv.model ?? defaultModel.name;
+	const model = models.find((m) => m.id === conv.model);
+
+	if (!model) {
+		throw error(400, "Model not availalbe anymore");
+	}
 
 	const json = await request.json();
 	const {
@@ -61,20 +65,7 @@ export async function POST({ request, fetch, locals, params }) {
 		];
 	})() satisfies Message[];
 
-	// Todo: on-the-fly migration, remove later
-	for (const message of messages) {
-		if (!message.id) {
-			message.id = crypto.randomUUID();
-		}
-	}
-
-	const modelInfo = models.find((m) => m.name === model);
-
-	if (!modelInfo) {
-		throw error(400, "Model not availalbe anymore");
-	}
-
-	const prompt = buildPrompt(messages, modelInfo);
+	const prompt = buildPrompt(messages, model);
 
 	const randomEndpoint = modelEndpoint(model);
 
@@ -112,7 +103,7 @@ export async function POST({ request, fetch, locals, params }) {
 			PUBLIC_SEP_TOKEN
 		).trimEnd();
 
-		for (const stop of [...(modelInfo?.parameters?.stop ?? []), "<|endoftext|>"]) {
+		for (const stop of [...(model?.parameters?.stop ?? []), "<|endoftext|>"]) {
 			if (generated_text.endsWith(stop)) {
 				generated_text = generated_text.slice(0, -stop.length).trimEnd();
 			}

src/routes/conversation/[id]/message/[messageId]/prompt/+server.ts

@@ -24,7 +24,7 @@ export async function GET({ params, locals }) {
 		throw error(404, "Message not found");
 	}
 
-	const model = models.find((m) => m.name === conv.model);
+	const model = models.find((m) => m.id === conv.model);
 
 	if (!model) {
 		throw error(404, "Conversation model not found");
@@ -37,7 +37,7 @@ export async function GET({ params, locals }) {
 			{
 				note: "This is a preview of the prompt that will be sent to the model when retrying the message. It may differ from what was sent in the past if the parameters have been updated since",
 				prompt,
-				model: model.name,
+				model: model.id,
 				parameters: {
 					...model.parameters,
 					return_full_text: false,

src/routes/conversation/[id]/summarize/+server.ts

@@ -34,7 +34,7 @@ export async function POST({ params, locals, fetch }) {
 		return_full_text: false,
 	};
 
-	const endpoint = modelEndpoint(defaultModel.name);
+	const endpoint = modelEndpoint(defaultModel);
 	let { generated_text } = await textGeneration(
 		{
 			model: endpoint.url,

src/routes/r/[id]/message/[messageId]/prompt/+server.ts

@@ -20,7 +20,7 @@ export async function GET({ params }) {
 		throw error(404, "Message not found");
 	}
 
-	const model = models.find((m) => m.name === conv.model);
+	const model = models.find((m) => m.id === conv.model);
 
 	if (!model) {
 		throw error(404, "Conversation model not found");
@@ -33,7 +33,7 @@ export async function GET({ params }) {
 			{
 				note: "This is a preview of the prompt that will be sent to the model when retrying the message. It may differ from what was sent in the past if the parameters have been updated since",
 				prompt,
-				model: model.name,
+				model: model.id,
 				parameters: {
 					...model.parameters,
 					return_full_text: false,

src/routes/settings/+page.server.ts

@@ -18,7 +18,7 @@ export const actions = {
 			.parse({
 				shareConversationsWithModelAuthors: formData.get("shareConversationsWithModelAuthors"),
 				ethicsModalAccepted: formData.get("ethicsModalAccepted"),
-				activeModel: formData.get("activeModel") ?? defaultModel.name,
+				activeModel: formData.get("activeModel") ?? defaultModel.id,
 			});
 
 		await collections.settings.updateOne(