Spaces:

huggingface
/

inference-playground

Running

App Files Files Community

Thomas G. Lopes commited on 25 days ago

Commit

e7bdd98

unverified ·

2 Parent(s): 706ea03 1301eb8

Fix theme and fouc (#58)

Browse files

Files changed (16) hide show

.env.example +1 -0
.github/workflows/lint-and-test.yml +20 -8
.prettierignore +14 -0
Dockerfile +9 -6
README.md +6 -4
package-lock.json +0 -0
package.json +4 -3
pnpm-lock.yaml +0 -0
src/app.html +32 -0
src/lib/components/InferencePlayground/InferencePlayground.svelte +13 -14
src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte +13 -12
src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte +2 -2
src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts +8 -11
src/lib/components/InferencePlayground/types.ts +4 -2
src/routes/+layout.svelte +1 -39
src/routes/+page.server.ts +2 -1

.env.example ADDED Viewed

	@@ -0,0 +1 @@


1	+ HF_TOKEN=

.github/workflows/lint-and-test.yml CHANGED Viewed

@@ -4,24 +4,36 @@ on:
   push:
     branches:
       - main
 jobs:
   lint:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: "20"
-          cache: "npm"
-      - run: |
-          npm install ci
       - name: "Checking lint/format errors"
         run: |
-          npm run lint
       - name: "Checking type errors"
         run: |
-          npm run check

   push:
     branches:
       - main
 jobs:
   lint:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: "20"
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
       - name: "Checking lint/format errors"
         run: |
+          pnpm run lint
       - name: "Checking type errors"
         run: |
+          pnpm run check

.prettierignore CHANGED Viewed

@@ -2,3 +2,17 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock

 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+.pnpm-store
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+yarn.lock

Dockerfile CHANGED Viewed

@@ -1,22 +1,25 @@
 FROM node:alpine
 # Set the working directory
 WORKDIR /app
-# Copy package.json and pnpm-lock.yaml (if available)
-COPY package.json package-lock.json* ./
 # Install all dependencies, including dev dependencies
-RUN npm install --frozen-lockfile
 # Copy the rest of the application code
 COPY . .
 # Build the application
-RUN npm run build
 # Prune dev dependencies
-RUN npm prune --prod
 # Set correct permissions
 RUN chown -R node:node /app
@@ -28,4 +31,4 @@ USER node
 EXPOSE 3000
 # Start the application
-CMD ["node", "build"]

 FROM node:alpine
+# Install pnpm
+RUN npm install -g pnpm
 # Set the working directory
 WORKDIR /app
+# Copy package.json and pnpm-lock.yaml
+COPY package.json pnpm-lock.yaml* ./
 # Install all dependencies, including dev dependencies
+RUN pnpm install --frozen-lockfile
 # Copy the rest of the application code
 COPY . .
 # Build the application
+RUN pnpm run build
 # Prune dev dependencies
+RUN pnpm prune --prod
 # Set correct permissions
 RUN chown -R node:node /app
 EXPOSE 3000
 # Start the application
+CMD ["node", "build"]

README.md CHANGED Viewed

@@ -12,11 +12,13 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 Demo: https://huggingface.co/spaces/huggingface-projects/inference-playground
-### Dev
-```
-npm i
-HF_TOKEN=your_hf_token npm run dev -- --open
 ```
 get your READ token from http://hf.co/settings/token

 Demo: https://huggingface.co/spaces/huggingface-projects/inference-playground
+## Local development
+```sh
+pnpm i
+HF_TOKEN=your_hf_token pnpm run dev
 ```
 get your READ token from http://hf.co/settings/token
+Hint: Use antfu's [ni](https://github.com/antfu-collective/ni) and never memorize a package manager again

package-lock.json DELETED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -6,6 +6,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier . --check . && eslint --ext .js,.ts,.svelte src/",
@@ -36,9 +37,9 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@huggingface/hub": "^0.15.1",
-		"@huggingface/inference": "^2.7.0",
-		"@huggingface/tasks": "^0.10.22",
 		"@tailwindcss/container-queries": "^0.1.1"
 	}
 }

 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier . --check . && eslint --ext .js,.ts,.svelte src/",
 	},
 	"type": "module",
 	"dependencies": {
+		"@huggingface/hub": "^1.0.1",
+		"@huggingface/inference": "^3.5.1",
+		"@huggingface/tasks": "^0.17.1",
 		"@tailwindcss/container-queries": "^0.1.1"
 	}
 }

pnpm-lock.yaml ADDED Viewed

The diff for this file is too large to render. See raw diff

src/app.html CHANGED Viewed

@@ -6,7 +6,39 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>

 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
+		<script>
+			(function () {
+				const urlParams = new URLSearchParams(window.location.search);
+				const theme = urlParams.get("__theme");
+				let systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+				function updateTheme() {
+					if (theme === "dark") {
+						document.body.classList.add("dark");
+					} else if (theme === "light") {
+						document.body.classList.remove("dark");
+					} else if (theme === "system" || theme === null || theme === undefined) {
+						if (systemPrefersDark) {
+							document.body.classList.add("dark");
+						} else {
+							document.body.classList.remove("dark");
+						}
+					}
+				}
+				// Initial theme update
+				updateTheme();
+				// Listen for system preference changes
+				window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
+					systemPrefersDark = event.matches;
+					updateTheme();
+				});
+			})();
+		</script>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>

src/lib/components/InferencePlayground/InferencePlayground.svelte CHANGED Viewed

@@ -1,37 +1,36 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer, Session } from "./types";
-	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import { page } from "$app/stores";
 	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import {
 		createHfInference,
-		handleStreamingResponse,
 		handleNonStreamingResponse,
 		isSystemPromptSupported,
-		FEATURED_MODELS_IDS,
 	} from "./inferencePlaygroundUtils";
 	import { onDestroy, onMount } from "svelte";
 	import GenerationConfig, { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
-	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
-	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
-	import IconDelete from "../Icons/IconDelete.svelte";
-	import IconCode from "../Icons/IconCode.svelte";
-	import IconInfo from "../Icons/IconInfo.svelte";
-	import IconCompare from "../Icons/IconCompare.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import IconThrashcan from "../Icons/IconThrashcan.svelte";
-	import { goto } from "$app/navigation";
 	export let models: ModelEntryWithTokenizer[];
-	const startMessageUser: ChatCompletionInputMessage = { role: "user", 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]] ?? "") : "",
 	};

 <script lang="ts">
+	import type { Conversation, ConversationMessage, ModelEntryWithTokenizer, Session } from "./types";
 	import { page } from "$app/stores";
 	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import {
 		createHfInference,
+		FEATURED_MODELS_IDS,
 		handleNonStreamingResponse,
+		handleStreamingResponse,
 		isSystemPromptSupported,
 	} from "./inferencePlaygroundUtils";
+	import { goto } from "$app/navigation";
 	import { onDestroy, onMount } from "svelte";
+	import IconCode from "../Icons/IconCode.svelte";
+	import IconCompare from "../Icons/IconCompare.svelte";
+	import IconDelete from "../Icons/IconDelete.svelte";
+	import IconInfo from "../Icons/IconInfo.svelte";
+	import IconThrashcan from "../Icons/IconThrashcan.svelte";
+	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
+	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
 	import GenerationConfig, { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	export let models: ModelEntryWithTokenizer[];
+	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
 	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
+	const systemMessage: ConversationMessage = {
 		role: "system",
 		content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
 	};

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte CHANGED Viewed

@@ -85,12 +85,13 @@
 			messages.unshift(systemMessage);
 		}
-		messages = messages.map(({ role, content }) => ({
 			role,
 			content: JSON.stringify(content).slice(1, -1),
 		}));
-		return messages;
 	}
 	function highlight(code: string, language: Language) {
@@ -139,7 +140,7 @@ for await (const chunk of stream) {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
-	}
 }`,
 			});
 		} else {
@@ -210,7 +211,7 @@ for await (const chunk of stream) {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
-	}
 }`,
 			});
 		} else {
@@ -270,8 +271,8 @@ client = InferenceClient(api_key="${tokenStr}")
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 stream = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
@@ -291,8 +292,8 @@ client = InferenceClient(api_key="${tokenStr}")
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 completion = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )
@@ -338,8 +339,8 @@ client = OpenAI(
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 stream = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
@@ -362,8 +363,8 @@ client = OpenAI(
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 completion = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )

 			messages.unshift(systemMessage);
 		}
+		const res = messages.map(({ role, content }) => ({
 			role,
 			content: JSON.stringify(content).slice(1, -1),
 		}));
+		messages = res;
+		return res;
 	}
 	function highlight(code: string, language: Language) {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
+	}
 }`,
 			});
 		} else {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
+	}
 }`,
 			});
 		} else {
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 stream = client.chat.completions.create(
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 completion = client.chat.completions.create(
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 stream = client.chat.completions.create(
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 completion = client.chat.completions.create(
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte CHANGED Viewed

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

 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
+	import type { ConversationMessage } from "./types";
+	export let message: ConversationMessage;
 	export let loading: boolean = false;
 	export let autofocus: boolean = false;

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ChatCompletionInputMessage } from "@huggingface/tasks";
 import type { Conversation, ModelEntryWithTokenizer } from "./types";
 import { HfInference } from "@huggingface/inference";
@@ -25,7 +25,7 @@ export async function handleStreamingResponse(
 			messages,
 			...conversation.config,
 		},
-		{ signal: abortController.signal, use_cache: false }
 	)) {
 		if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
 			out += chunk.choices[0].delta.content;
@@ -37,21 +37,18 @@ export async function handleStreamingResponse(
 export async function handleNonStreamingResponse(
 	hf: HfInference,
 	conversation: Conversation
-): Promise<{ message: ChatCompletionInputMessage; completion_tokens: number }> {
 	const { model, systemMessage } = conversation;
 	const messages = [
 		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
 		...conversation.messages,
 	];
-	const response = await hf.chatCompletion(
-		{
-			model: model.id,
-			messages,
-			...conversation.config,
-		},
-		{ use_cache: false }
-	);
 	if (response.choices && response.choices.length > 0) {
 		const { message } = response.choices[0];

+import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 import type { Conversation, ModelEntryWithTokenizer } from "./types";
 import { HfInference } from "@huggingface/inference";
 			messages,
 			...conversation.config,
 		},
+		{ signal: abortController.signal }
 	)) {
 		if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
 			out += chunk.choices[0].delta.content;
 export async function handleNonStreamingResponse(
 	hf: HfInference,
 	conversation: Conversation
+): Promise<{ message: ChatCompletionOutputMessage; completion_tokens: number }> {
 	const { model, systemMessage } = conversation;
 	const messages = [
 		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
 		...conversation.messages,
 	];
+	const response = await hf.chatCompletion({
+		model: model.id,
+		messages,
+		...conversation.config,
+	});
 	if (response.choices && response.choices.length > 0) {
 		const { message } = response.choices[0];

src/lib/components/InferencePlayground/types.ts CHANGED Viewed

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

 import type { ModelEntry } from "@huggingface/hub";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
 export type Conversation = {
 	model: ModelEntryWithTokenizer;
 	config: GenerationConfig;
+	messages: ConversationMessage[];
+	systemMessage: ConversationMessage;
 	streaming: boolean;
 };

src/routes/+layout.svelte CHANGED Viewed

@@ -1,43 +1,5 @@
 <script lang="ts">
 	import "../app.css";
-	import { onMount } from "svelte";
-	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
-	type Theme = "light" | "dark" | "system" | null | undefined;
-	let systemPrefersDark = false;
-	function updateTheme(theme: Theme, systemPrefersDark: boolean) {
-		if (theme === "dark" || (theme === "system" && systemPrefersDark)) {
-			document.documentElement.classList.add("dark");
-		} else {
-			document.documentElement.classList.remove("dark");
-		}
-	}
-	$: if (browser) {
-		const theme = $page.url.searchParams.get("__theme") as Theme;
-		updateTheme(theme, systemPrefersDark);
-	}
-	onMount(() => {
-		if (browser) {
-			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-			systemPrefersDark = mediaQuery.matches;
-			const handleChange = (event: MediaQueryListEvent) => {
-				systemPrefersDark = event.matches;
-				updateTheme($page.url.searchParams.get("__theme") as Theme, systemPrefersDark);
-			};
-			mediaQuery.addEventListener("change", handleChange);
-			return () => mediaQuery.removeEventListener("change", handleChange);
-		}
-	});
 </script>
-<slot></slot>
-<style></style>

 <script lang="ts">
 	import "../app.css";
 </script>
+<slot />

src/routes/+page.server.ts CHANGED Viewed

@@ -4,7 +4,8 @@ import type { PageServerLoad } from "./$types";
 import { env } from "$env/dynamic/private";
 export const load: PageServerLoad = async ({ fetch }) => {
-	const apiUrl = "https://huggingface.co/api/models?pipeline_tag=text-generation&inference_provider=hf-inference&filter=conversational";
 	const HF_TOKEN = env.HF_TOKEN;
 	const res = await fetch(apiUrl, {

 import { env } from "$env/dynamic/private";
 export const load: PageServerLoad = async ({ fetch }) => {
+	const apiUrl =
+		"https://huggingface.co/api/models?pipeline_tag=text-generation&inference_provider=hf-inference&filter=conversational";
 	const HF_TOKEN = env.HF_TOKEN;
 	const res = await fetch(apiUrl, {