Models page (#849)

* add models page

* add logo

* models discussion

* add default hint

* Update +page.svelte

* mishig review

* fix typecheck

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

.env.template

@@ -4,6 +4,7 @@ MODELS=`[
     {
     "name" : "mistralai/Mixtral-8x7B-Instruct-v0.1",
     "description" : "The latest MoE model from Mistral AI! 8x7B and outperforms Llama 2 70B in most benchmarks.",
+    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/mistral-logo.png",
     "websiteUrl" : "https://mistral.ai/news/mixtral-of-experts/",
     "modelUrl": "https://huggingface.co/mistralai/Mixtral-8x7B-Instruct-v0.1",
     "preprompt" : "",
@@ -33,6 +34,7 @@ MODELS=`[
     {
       "name": "meta-llama/Llama-2-70b-chat-hf",
       "description": "The latest and biggest model from Meta, fine-tuned for chat.",
+      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/meta-logo.png",
       "websiteUrl": "https://ai.meta.com/llama/",
       "modelUrl": "https://huggingface.co/meta-llama/Llama-2-70b-chat-hf",
       "preprompt": " ",
@@ -62,6 +64,7 @@ MODELS=`[
     {
       "name" : "NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO",
       "description" : "Nous Hermes 2 Mixtral 8x7B DPO is the new flagship Nous Research model trained over the Mixtral 8x7B MoE LLM.",
+      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/nous-logo.png",
       "websiteUrl" : "https://nousresearch.com/",
       "modelUrl": "https://huggingface.co/NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO",
       "chatPromptTemplate" : "{{#if @root.preprompt}}<|im_start|>system\n{{@root.preprompt}}<|im_end|>\n{{/if}}{{#each messages}}{{#ifUser}}<|im_start|>user\n{{content}}<|im_end|>\n<|im_start|>assistant\n{{/ifUser}}{{#ifAssistant}}{{content}}<|im_end|>\n{{/ifAssistant}}{{/each}}",
@@ -91,6 +94,7 @@ MODELS=`[
       "name": "codellama/CodeLlama-70b-Instruct-hf",
       "displayName": "codellama/CodeLlama-70b-Instruct-hf",
       "description": "Code Llama, a state of the art code model from Meta. Now in 70B!",
+      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/meta-logo.png",
       "websiteUrl": "https://ai.meta.com/blog/code-llama-large-language-model-coding/",
       "modelUrl": "https://huggingface.co/codellama/CodeLlama-70b-Instruct-hf",
       "preprompt": "",
@@ -121,6 +125,7 @@ MODELS=`[
       "name": "mistralai/Mistral-7B-Instruct-v0.1",
       "displayName": "mistralai/Mistral-7B-Instruct-v0.1",
       "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
+      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/mistral-logo.png",
       "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
       "modelUrl": "https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.1",
       "preprompt": "",
@@ -152,6 +157,7 @@ MODELS=`[
       "name": "mistralai/Mistral-7B-Instruct-v0.2",
       "displayName": "mistralai/Mistral-7B-Instruct-v0.2",
       "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
+      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/mistral-logo.png",
       "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
       "modelUrl": "https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.2",
       "preprompt": "",
@@ -182,6 +188,7 @@ MODELS=`[
     "name": "openchat/openchat-3.5-0106",
     "displayName": "openchat/openchat-3.5-0106",
     "description": "OpenChat 3.5 is the #1 model on MT-Bench, with only 7B parameters.",
+    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/openchat-logo.png",
     "websiteUrl": "https://huggingface.co/openchat/openchat-3.5-0106",
     "modelUrl": "https://huggingface.co/openchat/openchat-3.5-0106",
     "preprompt": "",

src/lib/components/NavMenu.svelte

@@ -8,6 +8,7 @@
 	import NavConversationItem from "./NavConversationItem.svelte";
 	import type { LayoutData } from "../../routes/$types";
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+	import type { Model } from "$lib/types/Model";
 	import { page } from "$app/stores";
 
 	export let conversations: ConvSidebar[] = [];
@@ -41,6 +42,8 @@
 		month: "This month",
 		older: "Older",
 	} as const;
+
+	const nModels: number = $page.data.models.filter((el: Model) => !el.unlisted).length;
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -108,6 +111,18 @@
 	>
 		Theme
 	</button>
+	{#if nModels > 1}
+		<a
+			href="{base}/models"
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			Models
+			<span
+				class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
+				>{nModels}</span
+			>
+		</a>
+	{/if}
 	{#if $page.data.enableAssistants}
 		<a
 			href="{base}/assistants"

src/lib/server/models.ts

@@ -25,6 +25,7 @@ const modelConfig = z.object({
 	name: z.string().default(""),
 	displayName: z.string().min(1).optional(),
 	description: z.string().min(1).optional(),
+	logoUrl: z.string().url().optional(),
 	websiteUrl: z.string().url().optional(),
 	modelUrl: z.string().url().optional(),
 	datasetName: z.string().min(1).optional(),

src/lib/types/Model.ts

@@ -10,6 +10,7 @@ export type Model = Pick<
 	| "promptExamples"
 	| "parameters"
 	| "description"
+	| "logoUrl"
 	| "modelUrl"
 	| "datasetUrl"
 	| "preprompt"

src/routes/+layout.server.ts

@@ -149,6 +149,7 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 			datasetUrl: model.datasetUrl,
 			displayName: model.displayName,
 			description: model.description,
+			logoUrl: model.logoUrl,
 			promptExamples: model.promptExamples,
 			parameters: model.parameters,
 			preprompt: model.preprompt,

src/routes/api/models/+server.ts

@@ -10,6 +10,7 @@ export async function GET() {
 		datasetUrl: model.datasetUrl,
 		displayName: model.displayName,
 		description: model.description,
+		logoUrl: model.logoUrl,
 		promptExamples: model.promptExamples,
 		preprompt: model.preprompt,
 		multimodal: model.multimodal,

src/routes/models/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+
+	import { PUBLIC_APP_NAME } from "$env/static/public";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+
+	import CarbonHelpFilled from "~icons/carbon/help-filled";
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	{#if isHuggingChat}
+		<title>HuggingChat - Models</title>
+		<meta property="og:title" content="HuggingChat - Models" />
+		<meta property="og:type" content="link" />
+		<meta property="og:description" content="Browse HuggingChat available models" />
+		<meta property="og:url" content={$page.url.href} />
+	{/if}
+</svelte:head>
+
+<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
+	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
+		<div class="flex items-center">
+			<h1 class="text-2xl font-bold">Models</h1>
+			{#if isHuggingChat}
+				<a
+					href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/372"
+					class="ml-auto dark:text-gray-400 dark:hover:text-gray-300"
+					target="_blank"
+				>
+					<CarbonHelpFilled />
+				</a>
+			{/if}
+		</div>
+		<h3 class="text-gray-500">All models available on {PUBLIC_APP_NAME}</h3>
+		<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}/settings/{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">
+						{#if model.logoUrl}
+							<img
+								class=" overflown aspect-square size-6 rounded border dark:border-gray-700"
+								src={model.logoUrl}
+								alt=""
+							/>
+						{:else}
+							<div class="size-6 rounded border border-transparent bg-gray-300 dark:bg-gray-800" />
+						{/if}
+						{#if index === 0}
+							<div
+								class="rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
+							>
+								Default
+							</div>
+						{/if}
+					</div>
+					<dt class="flex items-center gap-2 font-semibold">
+						{model.displayName}
+					</dt>
+					<dd class="text-sm text-gray-500 dark:text-gray-400">{model.description || "-"}</dd>
+				</a>
+			{/each}
+		</dl>
+	</div>
+</div>