Direct model page (#858)

* Direct model page

* Remove auto redirect

* fix thumbnail

* css warning

* change url for models

* instantSet from settings

* Get rid of redirect

* thumbnail

* also link from /models

* use public app color

---------

Co-authored-by: Victor Mustar <victor.mustar@gmail.com>

src/routes/models/+page.svelte

@@ -40,7 +40,7 @@
 		<dl class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 xl:grid-cols-2">
 			{#each data.models.filter((el) => !el.unlisted) as model, index (model.id)}
 				<a
-					href="{base}/?model={model.id}"
+					href="{base}/models/{model.id}"
 					class="relative flex flex-col gap-2 overflow-hidden rounded-xl border bg-gray-50/50 px-6 py-5 shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
 				>
 					<div class="flex items-center justify-between">

src/routes/models/[...model]/+page.server.ts

@@ -0,0 +1,39 @@
+import { base } from "$app/paths";
+import { authCondition } from "$lib/server/auth.js";
+import { collections } from "$lib/server/database.js";
+import { models } from "$lib/server/models";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ params, locals, parent }) {
+	const model = models.find(({ id }) => id === params.model);
+	const data = await parent();
+
+	if (!model || model.unlisted) {
+		throw redirect(302, `${base}/`);
+	}
+
+	if (locals.user?._id ?? locals.sessionId) {
+		await collections.settings.updateOne(
+			authCondition(locals),
+			{
+				$set: {
+					activeModel: model.id,
+					updatedAt: new Date(),
+				},
+				$setOnInsert: {
+					createdAt: new Date(),
+				},
+			},
+			{
+				upsert: true,
+			}
+		);
+	}
+
+	return {
+		settings: {
+			...data.settings,
+			activeModel: model.id,
+		},
+	};
+}

src/routes/models/[...model]/+page.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { base } from "$app/paths";
+	import { goto } from "$app/navigation";
+	import { onMount } from "svelte";
+	import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { findCurrentModel } from "$lib/utils/models";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+
+	export let data;
+
+	let loading = false;
+	let files: File[] = [];
+
+	const settings = useSettingsStore();
+	const modelId = $page.params.model;
+
+	async function createConversation(message: string) {
+		try {
+			loading = true;
+			// check if $settings.activeModel is a valid model
+			// else check if it's an assistant, and use that model
+			// else use the first model
+
+			const validModels = data.models.map((model) => model.id);
+
+			let model;
+			if (validModels.includes($settings.activeModel)) {
+				model = $settings.activeModel;
+			} else {
+				if (validModels.includes(data.assistant?.modelId)) {
+					model = data.assistant?.modelId;
+				} else {
+					model = data.models[0].id;
+				}
+			}
+			const res = await fetch(`${base}/conversation`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					model,
+					preprompt: $settings.customPrompts[$settings.activeModel],
+				}),
+			});
+
+			if (!res.ok) {
+				error.set("Error while creating conversation, try again.");
+				console.error("Error while creating conversation: " + (await res.text()));
+				return;
+			}
+
+			const { conversationId } = await res.json();
+
+			// Ugly hack to use a store as temp storage, feel free to improve ^^
+			pendingMessage.set({
+				content: message,
+				files,
+			});
+
+			// invalidateAll to update list of conversations
+			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
+		} catch (err) {
+			error.set(ERROR_MESSAGES.default);
+			console.error(err);
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(async () => {
+		settings.instantSet({
+			activeModel: modelId,
+		});
+	});
+</script>
+
+<svelte:head>
+	<meta property="og:title" content={modelId + " - " + PUBLIC_APP_NAME} />
+	<meta property="og:type" content="link" />
+	<meta property="og:description" content={`Use ${modelId} inside of ${PUBLIC_APP_NAME}`} />
+	<meta
+		property="og:image"
+		content="{PUBLIC_ORIGIN || $page.url.origin}{base}/models/{modelId}/thumbnail.png"
+	/>
+	<meta property="og:url" content={$page.url.href} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<ChatWindow
+	on:message={(ev) => createConversation(ev.detail)}
+	{loading}
+	currentModel={findCurrentModel([...data.models, ...data.oldModels], modelId)}
+	models={data.models}
+	bind:files
+/>

src/routes/models/[...model]/thumbnail.png/+server.ts

@@ -0,0 +1,57 @@
+import ModelThumbnail from "./ModelThumbnail.svelte";
+import { redirect, type RequestHandler } from "@sveltejs/kit";
+import type { SvelteComponent } from "svelte";
+
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import { html } from "satori-html";
+
+import InterRegular from "../../../../../static/fonts/Inter-Regular.ttf";
+import InterBold from "../../../../../static/fonts/Inter-Bold.ttf";
+import { base } from "$app/paths";
+import { models } from "$lib/server/models";
+
+export const GET: RequestHandler = (async ({ params }) => {
+	const model = models.find(({ id }) => id === params.model);
+
+	if (!model || model.unlisted) {
+		throw redirect(302, `${base}/`);
+	}
+	const renderedComponent = (ModelThumbnail as unknown as SvelteComponent).render({
+		name: model.name,
+		logoUrl: model.logoUrl,
+	});
+
+	const reactLike = html(
+		"<style>" + renderedComponent.css.code + "</style>" + renderedComponent.html
+	);
+
+	const svg = await satori(reactLike, {
+		width: 1200,
+		height: 648,
+		fonts: [
+			{
+				name: "Inter",
+				data: InterRegular as unknown as ArrayBuffer,
+				weight: 500,
+			},
+			{
+				name: "Inter",
+				data: InterBold as unknown as ArrayBuffer,
+				weight: 700,
+			},
+		],
+	});
+
+	const png = new Resvg(svg, {
+		fitTo: { mode: "original" },
+	})
+		.render()
+		.asPng();
+
+	return new Response(png, {
+		headers: {
+			"Content-Type": "image/png",
+		},
+	});
+}) satisfies RequestHandler;

src/routes/models/[...model]/thumbnail.png/ModelThumbnail.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { PUBLIC_APP_COLOR } from "$env/static/public";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+
+	export let name: string;
+	export let logoUrl: string | undefined;
+
+	import logo from "../../../../../static/huggingchat/logo.svg?raw";
+</script>
+
+<div class=" flex h-[648px] w-full flex-col items-center bg-white">
+	<div class="flex flex-1 flex-col items-center justify-center gap-2">
+		{#if logoUrl}
+			<img class="h-48 w-48" src={logoUrl} alt="avatar" />
+		{/if}
+		<h1 class="m-0 text-5xl font-bold text-black">
+			{name}
+		</h1>
+	</div>
+
+	<div
+		class="flex h-[200px] w-full flex-col items-center justify-center rounded-b-none bg-{PUBLIC_APP_COLOR}-500/10 pb-10 pt-10 text-4xl text-gray-500"
+		style="border-radius: 100% 100% 0 0;"
+	>
+		Try it now
+		{#if isHuggingChat}
+			on
+		{/if}
+
+		{#if isHuggingChat}
+			<div class="flex flex-row pt-3 text-5xl font-bold text-black">
+				<div class="mr-5 flex items-center justify-center" id="logo">
+					<!-- eslint-disable-next-line -->
+					{@html logo}
+				</div>
+				<span>HuggingChat</span>
+			</div>
+		{/if}
+	</div>
+</div>

src/routes/settings/(nav)/[...model]/+page.svelte

@@ -77,7 +77,7 @@
 			</a>
 		{/if}
 		<CopyToClipBoardBtn
-			value="{PUBLIC_ORIGIN || $page.url.origin}{base}?model={model.id}"
+			value="{PUBLIC_ORIGIN || $page.url.origin}{base}/models/{model.id}"
 			classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
 		>
 			<div class="flex items-center gap-1.5 hover:underline">