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

Lines changed: 4821 additions & 4135 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sveltekit/package.json

Lines changed: 3 additions & 0 deletions
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

Lines changed: 18 additions & 0 deletions
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

Lines changed: 7 additions & 7 deletions
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

Lines changed: 9 additions & 9 deletions
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

Lines changed: 27 additions & 0 deletions
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

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎sveltekit/src/routes/+page.svelte

Lines changed: 97 additions & 2 deletions
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

Lines changed: 27 additions & 0 deletions
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.

0 commit comments

Comments
 (0)