Skip to content

Commit f085f16

Browse files
xenovaxenova
committed
Update sveltekit example
1 parent 08da215 commit f085f16

21 files changed

+5061
-4186
lines changed

‎sveltekit/package-lock.json

+4,821-4,135
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sveltekit/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,8 @@
3030
"typescript": "^5.0.0",
3131
"typescript-eslint": "^8.0.0",
3232
"vite": "^5.0.3"
33+
},
34+
"dependencies": {
35+
"@huggingface/transformers": "^3.0.0"
3336
}
3437
}

‎sveltekit/src/app.css

+18
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
@import "tailwindcss/base";
22
@import "tailwindcss/components";
33
@import "tailwindcss/utilities";
4+
5+
:root {
6+
--background: #ffffff;
7+
--foreground: #171717;
8+
}
9+
10+
@media (prefers-color-scheme: dark) {
11+
:root {
12+
--background: #0a0a0a;
13+
--foreground: #ededed;
14+
}
15+
}
16+
17+
body {
18+
color: var(--foreground);
19+
background: var(--background);
20+
font-family: Arial, Helvetica, sans-serif;
21+
}

‎sveltekit/src/app.d.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// See https://svelte.dev/docs/kit/types#app
22
// for information about these interfaces
33
declare global {
4-
namespace App {
5-
// interface Error {}
6-
// interface Locals {}
7-
// interface PageData {}
8-
// interface PageState {}
9-
// interface Platform {}
10-
}
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
1111
}
1212

1313
export {};

‎sveltekit/src/app.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
%sveltekit.head%
8-
</head>
9-
<body data-sveltekit-preload-data="hover">
10-
<div style="display: contents">%sveltekit.body%</div>
11-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
1212
</html>

‎sveltekit/src/lib/Classifier.svelte

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
let text = $state("I love Transformers.js!");
3+
let result = $state(null);
4+
5+
$effect(() => {
6+
const params = new URLSearchParams();
7+
params.append("text", text);
8+
const url = "/api/classify?" + params.toString();
9+
10+
fetch(url).then(async (res) => {
11+
result = await res.json();
12+
});
13+
});
14+
</script>
15+
16+
<input
17+
bind:value={text}
18+
oninput={(event) => {
19+
text = event.currentTarget.value;
20+
}}
21+
class="w-full rounded border border-gray-300 p-2 dark:bg-black dark:text-white"
22+
/>
23+
24+
<pre
25+
class="min-h-[120px] w-full rounded border border-gray-300 p-2 dark:bg-black dark:text-white">{result
26+
? JSON.stringify(result, null, 2)
27+
: "Loading…"}</pre>

‎sveltekit/src/lib/index.ts

-1
This file was deleted.

‎sveltekit/src/routes/+page.svelte

+97-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,97 @@
1-
<h1>Welcome to SvelteKit</h1>
2-
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
1+
<script>
2+
import Classifier from "$lib/Classifier.svelte";
3+
</script>
4+
5+
<svelte:head>
6+
<title>Create SvelteKit App</title>
7+
</svelte:head>
8+
9+
<div
10+
class="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 sm:p-8"
11+
>
12+
<main class="row-start-2 flex flex-col items-center gap-8 sm:items-start">
13+
<div class="flex items-center">
14+
<img src="/hf-logo.svg" alt="Hugging Face logo" width="50" height="50" />
15+
<span class="mx-5 text-4xl font-light">×</span>
16+
<img
17+
class="dark:invert"
18+
src="/sveltekit.svg"
19+
alt="SvelteKit logo"
20+
width="250"
21+
height="50"
22+
/>
23+
</div>
24+
25+
<ol class="list-inside list-decimal text-center text-sm sm:text-left">
26+
<li class="mb-2">
27+
Get started by editing
28+
<code
29+
class="rounded bg-black/[.05] px-1 py-0.5 font-semibold dark:bg-white/[.06]"
30+
>
31+
src/routes/+page.svelte
32+
</code>.
33+
</li>
34+
<li class="mb-2">
35+
Update Transformers.js code in
36+
<code
37+
class="rounded bg-black/[.05] px-1 py-0.5 font-semibold dark:bg-white/[.06]"
38+
>
39+
src/routes/api/classify/+server.js
40+
</code>.
41+
</li>
42+
<li>Save and see your changes instantly.</li>
43+
</ol>
44+
45+
<div class="flex flex-col items-center gap-4 sm:flex-row">
46+
<a
47+
class="flex h-10 items-center justify-center gap-2 rounded-full border border-solid border-transparent bg-foreground px-4 text-sm text-background transition-colors hover:bg-[#383838] sm:h-12 sm:px-5 sm:text-base dark:hover:bg-[#ccc]"
48+
href="https://github.com/huggingface/transformers.js-examples/tree/main/sveltekit"
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
>
52+
Source code
53+
</a>
54+
55+
<a
56+
class="flex h-10 items-center justify-center rounded-full border border-solid border-black/[.08] px-4 text-sm transition-colors hover:border-transparent hover:bg-[#f2f2f2] sm:h-12 sm:px-5 sm:text-base dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
57+
href="https://huggingface.co/docs/transformers.js/index"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
Read our docs
62+
</a>
63+
</div>
64+
65+
<Classifier />
66+
</main>
67+
68+
<footer class="row-start-3 flex flex-wrap items-center justify-center gap-6">
69+
<a
70+
class="flex items-center gap-2 hover:underline hover:underline-offset-4"
71+
href="https://github.com/huggingface/transformers.js"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
>
75+
<img src="/github.svg" alt="GitHub icon" width="16" height="16" />
76+
Transformers.js
77+
</a>
78+
<a
79+
class="flex items-center gap-2 hover:underline hover:underline-offset-4"
80+
href="https://github.com/huggingface/transformers.js-examples"
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
>
84+
<img src="/window.svg" alt="Window icon" width="16" height="16" />
85+
Examples
86+
</a>
87+
<a
88+
class="flex items-center gap-2 hover:underline hover:underline-offset-4"
89+
href="https://hf.co"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
>
93+
<img src="/globe.svg" alt="Globe icon" width="16" height="16" />
94+
Go to hf.co →
95+
</a>
96+
</footer>
97+
</div>

‎sveltekit/src/routes/api/classify/+server.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// https://svelte.dev/tutorial/kit/get-handlers
2+
3+
import { pipeline } from "@huggingface/transformers";
4+
import { json, error } from "@sveltejs/kit";
5+
6+
import type { TextClassificationPipeline } from "@huggingface/transformers";
7+
8+
// NOTE: We attach the classifier to the global object to avoid unnecessary reloads during development
9+
declare global {
10+
var classifier: TextClassificationPipeline;
11+
}
12+
13+
const classifier = (globalThis.classifier ??= await pipeline(
14+
"text-classification",
15+
"Xenova/distilbert-base-uncased-finetuned-sst-2-english",
16+
));
17+
18+
export async function GET({ url }: { url: URL }) {
19+
const text = url.searchParams.get("text");
20+
21+
if (!text) {
22+
return error(400, "No text provided");
23+
}
24+
25+
const result = await classifier(text);
26+
return json(result[0]);
27+
}

‎sveltekit/static/favicon.ico

46.8 KB
Binary file not shown.

‎sveltekit/static/favicon.png

-1.53 KB
Binary file not shown.

‎sveltekit/static/github.svg

+3
Loading

‎sveltekit/static/globe.svg

+1
Loading

‎sveltekit/static/hf-logo.svg

+8
Loading

‎sveltekit/static/next.svg

+1
Loading

‎sveltekit/static/sveltekit.svg

+1
Loading

‎sveltekit/static/window.svg

+1
Loading

‎sveltekit/svelte.config.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import adapter from '@sveltejs/adapter-auto';
2-
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
1+
import adapter from "@sveltejs/adapter-auto";
2+
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
33

44
/** @type {import('@sveltejs/kit').Config} */
55
const config = {
6-
// Consult https://svelte.dev/docs/kit/integrations#preprocessors
7-
// for more information about preprocessors
8-
preprocess: vitePreprocess(),
6+
// Consult https://svelte.dev/docs/kit/integrations#preprocessors
7+
// for more information about preprocessors
8+
preprocess: vitePreprocess(),
99

10-
kit: {
11-
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12-
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13-
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14-
adapter: adapter()
15-
}
10+
kit: {
11+
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12+
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13+
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14+
adapter: adapter(),
15+
},
1616
};
1717

1818
export default config;

‎sveltekit/tailwind.config.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ export default {
44
content: ["./src/**/*.{html,js,svelte,ts}"],
55

66
theme: {
7-
extend: {},
7+
extend: {
8+
colors: {
9+
background: "var(--background)",
10+
foreground: "var(--foreground)",
11+
},
12+
},
813
},
914

1015
plugins: [],

‎sveltekit/tsconfig.json

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
2-
"extends": "./.svelte-kit/tsconfig.json",
3-
"compilerOptions": {
4-
"allowJs": true,
5-
"checkJs": true,
6-
"esModuleInterop": true,
7-
"forceConsistentCasingInFileNames": true,
8-
"resolveJsonModule": true,
9-
"skipLibCheck": true,
10-
"sourceMap": true,
11-
"strict": true,
12-
"moduleResolution": "bundler"
13-
}
14-
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15-
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16-
//
17-
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18-
// from the referenced tsconfig.json - TypeScript does not merge them in
2+
"extends": "./.svelte-kit/tsconfig.json",
3+
"compilerOptions": {
4+
"allowJs": true,
5+
"checkJs": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"resolveJsonModule": true,
9+
"skipLibCheck": true,
10+
"sourceMap": true,
11+
"strict": true,
12+
"moduleResolution": "bundler"
13+
}
14+
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15+
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16+
//
17+
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18+
// from the referenced tsconfig.json - TypeScript does not merge them in
1919
}

‎sveltekit/vite.config.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { sveltekit } from '@sveltejs/kit/vite';
2-
import { defineConfig } from 'vite';
1+
import { sveltekit } from "@sveltejs/kit/vite";
2+
import { defineConfig } from "vite";
33

44
export default defineConfig({
5-
plugins: [sveltekit()]
5+
plugins: [sveltekit()],
66
});

0 commit comments

Comments
 (0)