Spaces:

radames
/

transformers-js-sveltekit-server-example-app

Runtime error

App Files Files Community

radames HF staff commited on Aug 17, 2023

Commit

7a52bc5

•

1 Parent(s): de557e4

Upload 16 files

Browse files

Files changed (16) hide show

Dockerfile +33 -0
README.md +38 -10
package-lock.json +0 -0
package.json +30 -0
postcss.config.js +6 -0
src/app.css +25 -0
src/app.html +12 -0
src/lib/index.js +1 -0
src/lib/server/pipeline.js +31 -0
src/routes/+layout.svelte +5 -0
src/routes/+page.svelte +45 -0
src/routes/classify/+server.js +22 -0
static/favicon.png +0 -0
svelte.config.js +16 -0
tailwind.config.js +8 -0
vite.config.js +14 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,33 @@

+FROM node:18 AS base
+RUN apt-get update && \
+    apt-get install -y tini
+ENTRYPOINT ["/usr/bin/tini", "--"]
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+# Install dependencies based on the preferred package manager
+COPY --link package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN npm ci
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+RUN npm run build
+#  && npm prune --production
+ENV NODE_ENV=production
+EXPOSE 3000
+# Allow the running process to write model files to the cache folder.
+# NOTE: In practice, you would probably want to pre-download the model files to avoid having to download them on-the-fly.
+RUN mkdir -p /app/node_modules/@xenova/.cache/
+RUN chmod 777 -R /app/node_modules/@xenova/
+CMD ["npm", "run", "preview"]

README.md CHANGED Viewed

@@ -1,10 +1,38 @@
----
-title: Transformers Js Sveltekit Server Example App
-emoji: 📈
-colorFrom: blue
-colorTo: pink
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# create-svelte
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## Creating a project
+If you're seeing this, you've probably already done this step. Congrats!
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+## Developing
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```bash
+npm run dev
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+## Building
+To create a production version of your app:
+```bash
+npm run build
+```
+You can preview the production build with `npm run preview`.
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package-lock.json ADDED Viewed

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

package.json ADDED Viewed

	@@ -0,0 +1,30 @@

+{
+	"name": "sveltekit-server",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview --host 0.0.0.0 --port 3000",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^1.3.1",
+		"@sveltejs/kit": "^1.20.4",
+		"@xenova/transformers": "^2.5.2",
+		"autoprefixer": "^10.4.15",
+		"dotenv": "^16.3.1",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.28",
+		"prettier": "^3.0.2",
+		"prettier-plugin-svelte": "^3.0.3",
+		"rollup-plugin-ignore": "^1.0.10",
+		"svelte": "^4.0.5",
+		"tailwindcss": "^3.3.3",
+		"vite": "^4.4.2"
+	},
+	"type": "module"
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css ADDED Viewed

	@@ -0,0 +1,25 @@

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Xanh+Mono&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+	--foreground-rgb: 0, 0, 0;
+	--background-start-rgb: 214, 219, 220;
+	--background-end-rgb: 255, 255, 255;
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--foreground-rgb: 255, 255, 255;
+		--background-start-rgb: 0, 0, 0;
+		--background-end-rgb: 0, 0, 0;
+	}
+}
+body {
+	font-family: 'Inter', sans-serif;
+	color: rgb(var(--foreground-rgb));
+	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
+		rgb(var(--background-start-rgb));
+}

src/app.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/index.js ADDED Viewed

	@@ -0,0 +1 @@


1	+ // place files you want to import through the `$lib` alias in this folder.

src/lib/server/pipeline.js ADDED Viewed

	@@ -0,0 +1,31 @@

+import { pipeline } from '@xenova/transformers';
+// Use the Singleton pattern to enable lazy construction of the pipeline.
+// NOTE: We wrap the class in a function to prevent code duplication (see below).
+const P = () =>
+	class PipelineSingleton {
+		static task = 'text-classification';
+		static model = 'Xenova/distilbert-base-uncased-finetuned-sst-2-english';
+		static instance = null;
+		static async getInstance(progress_callback = null) {
+			if (this.instance === null) {
+				this.instance = pipeline(this.task, this.model, { progress_callback });
+			}
+			return this.instance;
+		}
+	};
+let PipelineSingleton;
+if (process.env.NODE_ENV !== 'production') {
+	// When running in development mode, attach the pipeline to the
+	// global object so that it's preserved between hot reloads.
+	// For more information, see https://vercel.com/guides/nextjs-prisma-postgres
+	if (!global.PipelineSingleton) {
+		global.PipelineSingleton = P();
+	}
+	PipelineSingleton = global.PipelineSingleton;
+} else {
+	PipelineSingleton = P();
+}
+export default PipelineSingleton;

src/routes/+layout.svelte ADDED Viewed

	@@ -0,0 +1,5 @@

+<script>
+	import '../app.css';
+</script>
+<slot />

src/routes/+page.svelte ADDED Viewed

	@@ -0,0 +1,45 @@

+<script>
+	let pipelineWorker;
+	let result = null;
+	let ready = null;
+	async function classify(text) {
+		if (!text) return;
+		if (ready === null) {
+			ready = false;
+		}
+		// Make a request to the /classify route on the server.
+		const response = await fetch(`/classify?text=${encodeURIComponent(text)}`);
+		// If this is the first time we've made a request, set the ready flag.
+		if (!ready) {
+			ready = true;
+		}
+		result = await response.json();
+	}
+</script>
+<main class="flex min-h-screen flex-col items-center justify-center p-12">
+	<h1 class="text-5xl font-bold mb-2 text-center">Transformers.js</h1>
+	<h2 class="text-2xl mb-4 text-center">SvelteKit (server-side)</h2>
+	<input
+		type="text"
+		class="w-full max-w-xs p-2 border border-gray-300 rounded mb-4 dark:text-black"
+		placeholder="Enter text here"
+		on:input={(e) => {
+			classify(e.target.value);
+		}}
+	/>
+	{#if ready !== null}
+		<pre class="bg-gray-100 dark:bg-gray-800 p-2 rounded">{!ready || !result
+				? 'Loading...'
+				: JSON.stringify(result, null, 2)}</pre>
+	{/if}
+</main>
+<style lang="postcss">
+	/* :global(html) {
+		background-color: theme(colors.gray.100);
+	} */
+</style>

src/routes/classify/+server.js ADDED Viewed

	@@ -0,0 +1,22 @@

+import { json } from '@sveltejs/kit';
+import PipelineSingleton from '$lib/server/pipeline.js';
+export async function GET({ url }) {
+	const text = url.searchParams.get('text');
+	if (!text) {
+		return json(
+			{
+				error: 'Missing text parameter'
+			},
+			{ status: 400 }
+		);
+	}
+	// Get the classification pipeline. When called for the first time,
+	// this will load the pipeline and cache it for future use.
+	const classifier = await PipelineSingleton.getInstance();
+	// Actually perform the classification
+	const result = await classifier(text);
+	return json(result);
+}

static/favicon.png ADDED Viewed

svelte.config.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// default options are shown
+			out: 'build',
+			precompress: false,
+			envPrefix: '',
+			polyfill: true
+		})
+	},
+	preprocess: vitePreprocess()
+};
+export default config;

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

vite.config.js ADDED Viewed

	@@ -0,0 +1,14 @@

+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+export default defineConfig({
+	plugins: [sveltekit()]
+	// optimizeDeps: {
+	// 	exclude: ['sharp', 'onnxruntime-node']
+	// },
+	// build: {
+	// 	rollupOptions: {
+	// 		external: ['sharp', 'onnxruntime-node']
+	// 	}
+	// }
+});