migration in svelte

.eslintignore

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

.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.FlatConfig } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

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

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

Dockerfile

@@ -0,0 +1,25 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files to the container
+COPY . .
+
+# Build the Next.js application for production
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "preview"]

README.md

@@ -0,0 +1,12 @@
+---
+title: — Inference Api —
+emoji: 📟
+colorFrom: green
+colorTo: yellow
+sdk: docker
+app_port: 3000
+pinned: false
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

package.json

@@ -0,0 +1,42 @@
+{
+	"name": "inference-playground-svelte",
+	"version": "0.0.1",
+	"scripts": {
+		"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 .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@iconify/svelte": "^3.1.4",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.27.4",
+		"@types/cookie": "^0.5.1",
+		"@types/node": "^20.10.0",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.31",
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"svelte-highlight": "^7.4.2",
+		"tailwindcss": "^3.3.5",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"iconify-icon": "^1.0.8"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,18 @@
+<!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, initial-scale=1" />
+		%sveltekit.head%
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap"
+			rel="stylesheet"
+		/>
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/CodePreview.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Curl from "./snippets/Curl.svelte";
+	import Javascript from "./snippets/Javascript.svelte";
+	import Python from "./snippets/Python.svelte";
+
+  export let body: Record<string, any>;
+  export let endpoint: string;
+
+  let headers = {}
+
+  const handleCopyToClipboard = (e: string) => {}
+</script>
+
+<div class="p-6 font-code text-sm text-white flex flex-col gap-6 snippet">
+  <Curl
+    body={body}
+    headers={headers}
+    endpoint={endpoint}
+    onCopyToClipboard={handleCopyToClipboard}
+  />
+  <Javascript
+    body={body}
+    headers={headers}
+    endpoint={endpoint}
+    onCopyToClipboard={handleCopyToClipboard}
+  />
+  <Python
+    body={body}
+    headers={headers}
+    endpoint={endpoint}
+    onCopyToClipboard={handleCopyToClipboard}
+  />
+</div>

src/lib/components/Input.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+
+  export let tooltip: string | undefined = undefined;
+  export let label: string;
+  export let subLabel: string | undefined  = undefined;
+
+  export let type: "text" | "number" = "text"
+  export let value: string | number;
+  export let min: number | undefined = undefined;
+  export let max: number | undefined = undefined;
+  let clazz: string | undefined = undefined;
+	export { clazz as class };
+  export let placeholder: string | undefined = undefined;
+  export let sanitize: undefined | ((value: string | number) => string | number) = undefined;
+  export let onChange: (value: string | number) => void;
+
+  const handleInputChange = (event: any) => {
+    const newValue = event.target.value;
+    if (type === "number" && /^[0-9]*$/.test(newValue)) {
+      return onChange(newValue)
+    }
+
+    return onChange(newValue)
+  };
+
+  const handleBlur = (event: any) => {
+    const newValue = event.target.value;
+    if (sanitize) return onChange(sanitize(newValue))
+  }
+
+</script>
+
+<div class={`w-full relative ${clazz}`}>
+  <div class="flex items-center justify-start gap-2 relative mb-2.5">
+    {#if tooltip}
+      <div class="group cursor-pointer">
+        <Icon icon="lucide:info" class="text-slate-500 group-hover:text-slate-300 text-xl" />
+        <div class="bg-slate-950/90 z-10 rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
+          {tooltip}
+        </div>
+      </div>  
+    {/if}
+    <p class="font-sans text-slate-400 font-regular text-sm">
+      {label}:
+    </p>
+  </div>
+  {#if subLabel} <p class="text-slate-500 text-xs mb-2.5">{subLabel}</p>{/if}
+  <input
+    type={type}
+    value={value}
+    min={min}
+    max={max}
+    placeholder={placeholder}
+    class="shadow-inner font-code border border-slate-800 bg-slate-900/60 focus:bg-slate-900/90 focus:border-slate-700/80 text-white rounded-lg text-sm px-4 py-3.5 w-full transition-all duration-200 leading-relaxed outline-none"
+    on:input={handleInputChange}
+    on:blur={handleBlur}
+  />
+</div>

src/lib/components/Loading.svelte

@@ -0,0 +1,23 @@
+<div class="absolute left-0 top-0 w-full h-full flex items-center justify-center bg-slate-950 bg-opacity-50 flex-col backdrop-blur-sm z-10">
+  <svg
+    class="animate-spin -ml-1 mr-3 h-8 w-8 text-white"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+  <slot />
+</div>

src/lib/components/ProTag.svelte

@@ -0,0 +1,3 @@
+<div class="inline-block -skew-x-12 bg-gradient-to-br text-sm font-bold shadow-lg from-pink-500 via-green-500 to-yellow-500 text-black shadow-green-500/20 rounded-lg px-2.5 py-0.5">
+  PRO
+</div>

src/lib/components/Prompt.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let value: string;
+  export let placeholder: string = "Ask me anything...";
+  export let onChange: (v: string) => void
+</script>
+
+<div class="flex flex-col gap-2.5">
+  <label
+    for="prompt"
+    class="font-sans text-slate-400 font-regular text-sm"
+  >
+    Prompt:
+  </label>
+  <textarea
+    id="prompt"
+    {value}
+    {placeholder}
+    class="shadow-inner font-code border border-slate-800 bg-slate-900/60 focus:bg-slate-900/90 focus:border-slate-700/80 text-white rounded-lg text-sm p-4 w-full transition-all duration-200 h-44 resize-none leading-relaxed outline-none"
+    on:input={(e) => {
+      const target = e.target
+      // @ts-ignore
+      onChange(target.value)
+    }}
+  />
+</div>

src/lib/components/SelectModel.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+	import type { Model } from "$lib/utils/type";
+
+  let open = false;
+
+  export let items: Model[];
+  export let value: string;
+  export let onChange: (value: string) => void;
+
+  $: selectedModel = items.find(({ id }) => id === value)
+
+  const handleSelect = (id: string) => {
+    onChange(id)
+    open = false;
+  }
+
+  const handleOpen = () => open = !open
+</script>
+
+<div class="w-full flex flex-col gap-2.5">
+  <label
+    for="model"
+    class="font-sans text-slate-400 font-regular text-sm"
+  >
+    Model:
+  </label>
+  <div
+    id="model"
+    class={`cursor-pointer shadow-inner font-code border hover:bg-slate-900/90 hover:border-slate-700/80 text-white rounded-lg text-sm w-full transition-all duration-200 leading-relaxed outline-none relative ${open ? 'bg-slate-900/90 border-slate-700/80' : 'border-slate-800 bg-slate-900/60'}`}
+  >
+    <button class="w-full flex justify-between items-center px-4 py-3" role="searchbox" on:click={handleOpen}>
+      {#if selectedModel}
+        <div class="flex items-center justify-start gap-3">
+          <img
+            src={selectedModel.logo}
+            alt={selectedModel.id}
+            width={22}
+            height={22}
+            class="rounded-full"
+          />
+          <p>{selectedModel.id}</p>
+        </div>
+        {:else}
+        <p class="opacity-70">Select a model</p>
+      {/if}
+      <Icon icon="iconamoon:arrow-right-2-light" class={`text-slate-400 w-5 h-5 transition-all duration-150 ${open && 'transform rotate-90'}`}  />
+    </button>
+    <div
+      class="absolute bottom-0 left-0 w-full pt-4 translate-y-full transition-all duration-150"
+      class:pointer-events-none={!open}
+      class:opacity-0={!open}
+    >
+      <div class="bg-slate-900 border border-slate-700/80 text-white p-2 font-code rounded-lg">
+        {#each items as { id, logo}}
+          <button
+            class={`w-full flex items-center justify-start gap-3 p-2 cursor-pointer hover:bg-slate-800/60 rounded-lg ${selectedModel?.id === id && 'bg-slate-800/60'}`}
+            on:click={() => handleSelect(id)}
+          >
+            <img
+              src={logo}
+              alt={id}
+              width={22}
+              height={22}
+              class="rounded-full"
+            />
+            <p>{id}</p>
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

src/lib/components/Toggle.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+
+  export let label: string;
+  export let checked: boolean;
+  export let tooltip: string | undefined = undefined;
+  export let onChange: (c: boolean) => void;
+</script>
+
+<div class="w-full flex items-center justify-between gap-2.5 relative">
+  <div class="flex items-center justify-start gap-2">
+    {#if tooltip}
+      <div class="group cursor-pointer">
+        <Icon icon="lucide:info" class="text-slate-500 group-hover:text-slate-300 text-xl" />
+        <div class="bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto leading-relaxed">
+          {tooltip}
+        </div>
+      </div>
+    {/if}
+    <p class="font-sans text-slate-400 font-regular text-sm">
+      {label}
+    </p>
+  </div>
+  <div class="w-[62px] h-[32px] rounded-md relative cursor-pointer grid grid-cols-2 border border-slate-800 bg-slate-900/60 focus:bg-slate-900/90 focus:border-slate-700/80 overflow-hidden z-[1]">
+    <div class={`bg-slate-800/70 h-full w-[31px] absolute top-0 left-0 transition-all duration-150 z-[-1] ${!checked && 'translate-x-[31px]'}`}/>
+    <button
+      class="flex items-center justify-center"
+      class:text-slate-600={!checked}
+      on:click={() => onChange(true)}
+    >
+      <Icon icon="ic:round-check" class={`w-4 h-4 ${checked && 'text-green-500'}`} />
+    </button>
+    <button
+      class="flex items-center justify-center"
+      class:text-slate-600={checked}
+      on:click={() => onChange(false)}
+    >
+      <Icon icon="ic:round-close" class={`w-4 h-4 ${!checked && 'text-red-500'}`} />
+    </button>
+  </div>
+</div>

src/lib/components/image-generation/Form.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import Prompt from "$lib/components/Prompt.svelte";
+	import SelectModel from "$lib/components/SelectModel.svelte";
+  import Input from "$lib/components/Input.svelte";
+  import Toggle from "$lib/components/Toggle.svelte";
+	import { IMAGE_GENERATIONS } from "$lib/utils/models";
+
+  export let form: Record<string, any>;
+  export let onForm: (form: Record<string, any>) => void;
+</script>
+
+<SelectModel value={form.model} items={IMAGE_GENERATIONS} onChange={(model) => onForm({ ...form, model })} />
+<Prompt
+  value={form.inputs}
+  placeholder="A red apple on a table"
+  onChange={(inputs) => onForm({ ...form, inputs })}
+/>
+<div class="flex items-center justify-start gap-4 mt-3">
+  <p class="text-slate-500 uppercase font-medium text-sm">
+    Optional parameters
+  </p>
+  <div class="w-full flex-1 h-[1px] bg-slate-600" />
+</div>
+<div class="grid grid-cols-2 gap-x-10 gap-y-6">
+  <Input
+    label="Negative prompt"
+    type="text"
+    class="col-span-2"
+    tooltip="A text describing content that you want the model to steer away from."
+    value={form?.parameters?.negative_prompt}
+    onChange={(negative_prompt) =>
+      onForm({
+        ...form,
+        parameters: { ...form.parameters, negative_prompt },
+      })
+    }
+  />
+  <div class="flex flex-col gap-3">
+    <Input
+      label="Guidance scale"
+      type="number"
+      tooltip="How closely you want the model to match the prompt. Lower numbers are less accurate, very high numbers might decrease image quality or generate artifacts."
+      min={1}
+      max={100}
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber > 1) return 1;
+        if (valueAsNumber < 0) return 0;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.guidance_scale}
+      onChange={(guidance_scale) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, guidance_scale },
+        })
+      }
+    />
+    <Input
+      label="Inference steps"
+      type="number"
+      tooltip="The number of denoising steps to run. Larger numbers may produce better quality but will be slower. Typical values are between 20 and 50 steps."
+      min={20}
+      max={50}
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber > 1) return 1;
+        if (valueAsNumber < 0) return 0;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.num_inference_steps}
+      onChange={(num_inference_steps) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, num_inference_steps },
+        })
+      }
+    />
+  </div>
+  <div class="flex flex-col gap-3">
+    <Input
+      label="Width"
+      type="number"
+      tooltip="The desired image dimensions. SDXL works best for sizes between 768 and 1024."
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber > 1) return 1;
+        if (valueAsNumber < 0) return 0;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.width}
+      onChange={(width) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, width },
+        })
+      }
+    />
+    <Input
+      label="Height"
+      type="number"
+      tooltip="The desired image dimensions. SDXL works best for sizes between 768 and 1024."
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber > 1) return 1;
+        if (valueAsNumber < 0) return 0;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.height}
+      onChange={(height) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, height },
+        })
+      }
+    />
+  </div>
+</div>

src/lib/components/image-generation/Response.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+
+  import Loading from "$lib/components/Loading.svelte"
+  import CodePreview from '$lib/components/CodePreview.svelte';
+	import Preview from '$lib/components/text-generation/Preview.svelte';
+
+  export let loading: boolean;
+  export let res: any;
+  export let form: Record<string, any>;
+  export let body: Record<string, any>;
+  export let endpoint: string;
+
+  let tab = 0
+
+  $: code = JSON.stringify(res ?? {}, null, 2)
+
+  let TABS = [
+  {
+    label: "Formatted preview",
+    icon: "material-symbols:preview",
+  },
+  {
+    label: "Code example",
+    icon: "carbon:code",
+  },
+];
+</script>
+
+<div class="h-screen flex flex-col relative">
+  <div class="bg-slate-950 overflow-auto flex-1">
+    <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
+      {#each TABS as { label, icon }, idx }
+      <button
+        class={`flex items-center justify-start gap-2 px-5 border-r py-4 border-slate-900 bg-slate-900/40 cursor-pointer hover:bg-slate-900/60 transition-all duration-200 ${tab === idx ? '!bg-slate-950 hover:bg-slate-900/40' : 'border-b'}`}
+        on:click={() => tab = idx}
+      >
+        <Icon icon={icon} class="w-5 h-5" />
+        {label}
+      </button>
+      {/each}
+      <div class="flex flex-1 w-full pointer-events-none text-slate-950 border-b border-slate-900 h-[53px] bg-slate-900/40"></div>
+    </div>
+    {#if tab === 0}
+      <Preview body={body} res={res} />
+      {:else if tab === 1}
+      <CodePreview body={form} endpoint={endpoint} />
+    {/if}
+  </div>
+  {#if loading}
+    <Loading>
+      <p class="text-slate-400 text-lg mt-4">Processing...</p>
+    </Loading>
+  {/if}
+</div>

src/lib/components/sidebar/Sidebar.svelte

@@ -0,0 +1,93 @@
+<script>
+	import Icon from '@iconify/svelte';
+	
+	import logo from '$lib/images/hf-logo.svg';
+	import ProTag from '$lib/components/ProTag.svelte';
+	import PrimaryLink from '$lib/components/sidebar/links/Primary.svelte';
+	import SecondaryLink from '$lib/components/sidebar/links/Secondary.svelte';
+
+	const LINKS = [
+  {
+    path: "/text-generation",
+    label: "Text Generation",
+    description: "Generate text from a prompt, using a model of your choice.",
+    icon: "heroicons:chat-bubble-left-right-20-solid",
+    type: "green",
+  },
+  {
+    path: "/image-generation",
+    label: "Image Generation",
+    description: "Generate images from a prompt, using a model of your choice.",
+    icon: "ph:images-square-fill",
+    type: "pink",
+  },
+];
+
+const FEW_SHOTS = [
+  {
+    path: "/text-generation/translation",
+    label: "Translation",
+    icon: "bi:translate",
+  },
+  {
+    path: "/text-generation/chat",
+    label: "Chat",
+    icon: "ph:chat-dots-fill",
+  },
+];
+
+</script>
+
+<aside class="hidden xl:block bg-slate-900 w-full max-w-[360px] h-screen border-r border-slate-800 text-white">
+	<header class="flex items-center justify-start p-8 gap-4">
+		<img src={logo} alt="Logo" width={34} height={34} />
+		<div class="flex items-center justify-start gap-2">
+			<p class="text-white font-bold text-xl">Inference API for</p>
+			<ProTag />
+		</div>
+	</header>
+	<nav class="grid grid-cols-1 gap-8 px-4">
+		<a
+			href="https://huggingface.co/pricing#pro"
+			target="_blank"
+			class="px-4"
+		>
+			<button class="group text-base font-bold uppercase tracking-wide bg-white text-slate-950 transition-all duration-200 px-6 py-3 w-full rounded-full relative">
+				Subscribe to Pro
+			</button>
+		</a>
+		<ul class="grid grid-cols-1 gap-4">
+			{#each LINKS as { path, description, label, type, icon }, i}
+				<PrimaryLink href={path} type={type}>
+					<div class="flex items-center justify-start gap-4">
+						<Icon icon={icon} class="w-6 h-6" />
+						<p class="font-semibold text-sm uppercase font-code">
+							{label}
+						</p>
+					</div>
+					<p class="text-sm mt-2 text-white/90">
+						{description ||
+							"Generate text from a prompt, using a model of your choice."}
+					</p>
+				</PrimaryLink>
+				{/each}
+		</ul>
+		<div class="grid grid-cols-1 gap-4">
+			<div class="flex items-center justify-start gap-4 mb-2">
+				<p class="text-slate-600 uppercase font-medium text-sm font-sans">
+					FEW SHOTS
+				</p>
+				<div class="w-full flex-1 h-[1px] bg-slate-800" />
+			</div>
+			{#each FEW_SHOTS as { path, label, icon }, i}
+				<SecondaryLink href={path}>
+					<Icon icon={icon} class="w-5 h-5" />
+					<p class="font-semibold text-sm uppercase font-code">
+						{label}
+					</p>
+				</SecondaryLink>
+				{/each}
+		</div>
+	</nav>
+</aside>
+

src/lib/components/sidebar/links/Primary.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+  export let href: string;
+  export let type: string = "green"
+
+  $: active_class = $page.url.pathname === href ? type === 'green' ? 'bg-green-600 !text-green-500' : 'bg-pink-500 !text-pink-500' : 'bg-slate-700';
+</script>
+
+<a href={href} data-sveltekit-preload-data class="p-5 transition-all duration-200 bg-opacity-20 border-transparent rounded-xl {active_class}">
+  <li>
+    <slot />
+  </li>
+</a>

src/lib/components/sidebar/links/Secondary.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+  export let href: string;
+
+  $: active_class = $page.url.pathname === href ? '!text-slate-800 !bg-white/90 !from-transparent' : 'hover:text-slate-200 hover:border-slate-800';
+</script>
+
+<a href={href} data-sveltekit-preload-data class="px-5 py-3.5 rounded-xl bg-gradient-to-r border from-slate-800/70 to-slate-900 border-slate-800/50 text-slate-400 flex items-center justify-start gap-4 cursor-pointer {active_class}">
+    <slot />
+</a>

src/lib/components/snippets/Curl.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight from "svelte-highlight";
+  import powershell from "svelte-highlight/languages/powershell";
+  import { PUBLIC_INFERENCE_API_URL } from '$env/static/public'
+
+
+  export let body: Record<string, any>;
+  export let endpoint: string;
+  export let headers: Record<string, any>;
+  export let onCopyToClipboard: (e: string) => void;
+
+  let isCopied: boolean = false;
+
+  const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const fullpath = `${PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
+    delete body.model
+    return `curl -X POST "${fullpath}" \\
+  -H ${JSON.stringify(headers)}
+  -d ${JSON.stringify(body)}
+`;
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generateCurlRequestFromEndpoint(body));
+    isCopied = true
+    setTimeout(() => {
+      isCopied = false
+    }, 1000);
+  };
+
+  $: code = generateCurlRequestFromEndpoint(body)
+</script>
+
+<div class="bg-slate-900/50 rounded-xl overflow-hidden">
+  <header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-slate-300">
+    <Icon icon="icon-park-outline:code-brackets" class="text-xl" />
+    <p class="text-xs font-semibold">Curl</p>
+  </header>
+  <main class="px-6 py-6">
+    <Highlight language={powershell} {code} />
+    <button class="flex justify-end relative w-full" on:click={handleCopy}>
+      <Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
+      <div
+        class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
+        class:opacity-0={!isCopied}
+      >
+        Copied!
+      </div>
+    </button>
+  </main>
+</div>

src/lib/components/snippets/Javascript.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight from "svelte-highlight";
+  import javascript from "svelte-highlight/languages/javascript";
+  import { PUBLIC_INFERENCE_API_URL } from '$env/static/public'
+
+  export let body: Record<string, any>;
+  export let endpoint: string;
+  export let headers: Record<string, any>;
+  export let onCopyToClipboard: (e: string) => void;
+
+  let isCopied: boolean = false;
+
+  const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const fullpath = `${PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
+    delete body.model
+    
+    return `const response = await fetch(
+      "${fullpath}",
+      {
+        method: "POST",
+        headers: ${JSON.stringify(headers)},
+        body: ${JSON.stringify(body)}
+      }
+    )`;
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generateCurlRequestFromEndpoint(body));
+    isCopied = true
+    setTimeout(() => {
+      isCopied = false
+    }, 1000);
+  };
+
+  $: code = generateCurlRequestFromEndpoint(body)
+</script>
+
+<div class="bg-slate-900/50 rounded-xl overflow-hidden">
+  <header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-yellow-500">
+    <Icon icon="ri:javascript-fill" class="text-xl" />
+    <p class="text-xs font-semibold">Javascript</p>
+  </header>
+  <main class="px-6 py-6">
+    <Highlight language={javascript} {code} />
+    <button class="flex justify-end relative w-full" on:click={handleCopy}>
+      <Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
+      <div
+        class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
+        class:opacity-0={!isCopied}
+      >
+        Copied!
+      </div>
+    </button>
+  </main>
+</div>

src/lib/components/snippets/Python.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight from "svelte-highlight";
+  import javascript from "svelte-highlight/languages/javascript";
+  import { PUBLIC_INFERENCE_API_URL } from '$env/static/public'
+
+  export let body: Record<string, any>;
+  export let endpoint: string;
+  export let headers: Record<string, any>;
+  export let onCopyToClipboard: (e: string) => void;
+
+  let isCopied: boolean = false;
+
+  const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const fullpath = `${PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
+    delete body.model
+
+    const removeEmptyValues = (data: Record<string, any>) => {
+      const formattedData = { ...data };
+      Object.entries(formattedData).forEach(([key, value]) => {
+        if (typeof value === "object") {
+          const new_value = removeEmptyValues(value);
+          formattedData[key] = new_value
+        } else {
+          if (typeof value === "boolean") {
+            formattedData[key] = value ? "True" : "False";
+          }
+        }
+      });
+      return formattedData;
+    };
+
+    const formattedBody = removeEmptyValues(body ?? {});
+    return `import requests
+response = requests.post(
+  "${fullpath}",
+  json=${JSON.stringify(formattedBody)},
+  headers=${JSON.stringify(headers)}
+)`;
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generateCurlRequestFromEndpoint(body));
+    isCopied = true
+    setTimeout(() => {
+      isCopied = false
+    }, 1000);
+  };
+
+  $: code = generateCurlRequestFromEndpoint(body)
+</script>
+
+<div class="bg-slate-900/50 rounded-xl overflow-hidden">
+  <header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-blue-500">
+    <Icon icon="logos:python" class="text-xl" />
+    <p class="text-xs font-semibold">Python</p>
+  </header>
+  <main class="px-6 py-6">
+    <Highlight language={javascript} {code} />
+    <button class="flex justify-end relative w-full" on:click={handleCopy}>
+      <Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
+      <div
+        class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
+        class:opacity-0={!isCopied}
+      >
+        Copied!
+      </div>
+    </button>
+  </main>
+</div>

src/lib/components/text-generation/Form.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import Prompt from "$lib/components/Prompt.svelte";
+	import SelectModel from "$lib/components/SelectModel.svelte";
+  import Input from "$lib/components/Input.svelte";
+  import Toggle from "$lib/components/Toggle.svelte";
+	import { TEXT_GENERATIONS } from "$lib/utils/models";
+
+  export let loading: boolean;
+  export let form: Record<string, any>;
+  export let onForm: (form: Record<string, any>) => void;
+</script>
+
+<SelectModel value={form.model} items={TEXT_GENERATIONS} onChange={(model) => onForm({ ...form, model })} />
+<Prompt
+  value={form.inputs}
+  onChange={(inputs) => onForm({ ...form, inputs })}
+/>
+<div class="flex items-center justify-start gap-4 mt-3">
+  <p class="text-slate-500 uppercase font-medium text-sm">
+    Optional parameters
+  </p>
+  <div class="w-full flex-1 h-[1px] bg-slate-600" />
+</div>
+<div class="grid grid-cols-2 gap-x-10 gap-y-6">
+  <div class="flex flex-col gap-3">
+    <Toggle
+      label="Do Sample"
+      tooltip="If set to False (the default), the generation method will be greedy search, which selects the most probable continuation sequence after the prompt you provide. Greedy search is deterministic, so the same results will always be returned from the same input. When do_sample is True, tokens will be sampled from a probability distribution and will therefore vary across invocations."
+      checked={form?.parameters?.do_sample}
+      onChange={(do_sample) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, do_sample },
+        })
+      }
+    />
+    <Input
+      label="Max new tokens"
+      type="number"
+      tooltip="Whether to include the input sequence in the output returned by the endpoint. The default used by InferenceClient is False, but the endpoint itself uses True by default."
+      min={1}
+      max={244}
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber < 1) return 1;
+        if (valueAsNumber > 244) return 244;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.max_new_tokens}
+      onChange={(max_new_tokens) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, max_new_tokens },
+        })
+      }
+    />
+    <Input
+      label="Temperature"
+      type="number"
+      tooltip="Controls the amount of variation we desire from the generation. A temperature of 0 is equivalent to greedy search. If we set a value for temperature, then do_sample will automatically be enabled. The same thing happens for top_k and top_p. When doing code-related tasks, we want less variability and hence recommend a low temperature. For other tasks, such as open-ended text generation, we recommend a higher one."
+      min={0}
+      max={1}
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber > 1) return 1;
+        if (valueAsNumber < 0) return 0;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.temperature}
+      onChange={(temperature) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, temperature },
+        })
+      }
+    />
+  </div>
+  <div class="flex flex-col gap-3">
+    <Toggle
+      label="Return full Text"
+      tooltip="Whether to include the input sequence in the output returned by the endpoint. The default used by InferenceClient is False, but the endpoint itself uses True by default."
+      checked={form?.parameters?.return_full_text}
+      onChange={(return_full_text) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, return_full_text },
+        })
+      }
+    />
+    <Input
+      label="Top K"
+      type="number"
+      tooltip={`Enables "Top-K" sampling: the model will choose from the K most probable tokens that may occur after the input sequence. Typical values are between 10 to 50.`}
+      min={10}
+      max={50}
+      sanitize={(value) => {
+        const valueAsNumber = Number(value);
+        if (valueAsNumber < 10) return 10;
+        if (valueAsNumber > 50) return 50;
+        return valueAsNumber;
+      }}
+      value={form?.parameters?.top_k}
+      onChange={(top_k) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, top_k },
+        })
+      }
+    />
+    <Input
+      label="Stop sequences"
+      tooltip="A list of sequences that will cause generation to stop when encountered in the output."
+      subLabel="Separate each sequence with a comma"
+      value={form?.parameters?.stop_sequences}
+      onChange={(stop_sequences) =>
+        onForm({
+          ...form,
+          parameters: { ...form.parameters, stop_sequences },
+        })
+      }
+    />
+  </div>
+</div>

src/lib/components/text-generation/Preview.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let body: Record<string, any>;
+  export let res: Record<string, any>;
+
+  console.log(body)
+</script>
+
+<div class="text-white p-6 font-code text-xs !leading-loose">
+  {body.inputs ?? "No input provided"}
+  {#if res?.[0]?.generated_text}
+  <span>{res[0]?.generated_text?.replace(body?.inputs, "")}</span>
+  {/if}
+</div>

src/lib/components/text-generation/Response.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import json from "svelte-highlight/languages/json";
+  import "svelte-highlight/styles/night-owl.css"
+  
+  import Loading from "$lib/components/Loading.svelte"
+  import CodePreview from '$lib/components/CodePreview.svelte';
+	import Preview from '$lib/components/text-generation/Preview.svelte';
+
+  export let loading: boolean;
+  export let res: any;
+  export let form: Record<string, any>;
+  export let body: Record<string, any>;
+  export let endpoint: string;
+
+  let tab = 0
+
+  $: code = JSON.stringify(res ?? {}, null, 2)
+
+  let TABS = [
+  {
+    label: "Formatted preview",
+    icon: "material-symbols:preview",
+  },
+  {
+    label: "Code example",
+    icon: "carbon:code",
+  },
+];
+</script>
+
+<div class="h-screen flex flex-col relative">
+  <div class="w-full jsonResponse relative">
+    <div class="bg-slate-950 w-full uppercase px-5 py-4 text-zinc-400 text-sm font-semibold border-b border-slate-900 flex items-center justify-start gap-2">
+      <Icon icon="carbon:json" class="w-5 h-5" />
+      Response
+    </div>
+    <Highlight language={json} {code}>
+    </Highlight>
+    {#if loading}
+      <Loading>
+        <p class="text-slate-400 text-lg mt-4">Processing...</p>
+      </Loading>
+    {/if}
+  </div>
+  <div class="bg-slate-950 overflow-auto flex-1">
+    <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
+      {#each TABS as { label, icon }, idx }
+      <button
+        class={`flex items-center justify-start gap-2 px-5 border-r py-4 border-slate-900 bg-slate-900/40 cursor-pointer hover:bg-slate-900/60 transition-all duration-200 ${tab === idx ? '!bg-slate-950 hover:bg-slate-900/40' : 'border-b'}`}
+        on:click={() => tab = idx}
+      >
+        <Icon icon={icon} class="w-5 h-5" />
+        {label}
+      </button>
+      {/each}
+      <div class="flex flex-1 w-full pointer-events-none text-slate-950 border-b border-slate-900 h-[53px] bg-slate-900/40"></div>
+    </div>
+    {#if tab === 0}
+      <Preview body={body} res={res} />
+      {:else if tab === 1}
+      <CodePreview body={form} endpoint={endpoint} />
+    {/if}
+  </div>
+</div>

src/lib/styles/tailwind.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body, html {
+  @apply bg-slate-950 overflow-hidden min-h-screen;
+  font-family: "Source Sans 3", "sans-serif";
+}
+
+.jsonResponse .hljs {
+  @apply !text-sm !bg-black !font-code !whitespace-pre-wrap !p-8 !leading-relaxed;
+}
+.jsonResponse tbody.hljs {
+  @apply !h-full !leading-loose
+}
+.jsonResponse tbody.hljs tr td:first-of-type code {
+  @apply opacity-60 pl-2
+}
+
+.snippet .hljs {
+  @apply text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed
+}

src/lib/utils/models.ts

@@ -0,0 +1,23 @@
+import type { Model } from "./type";
+
+export const TEXT_GENERATIONS: Array<Model> = [
+  {
+    id: "meta-llama/Llama-2-7b-chat-hf",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/646cf8084eefb026fb8fd8bc/oCTqufkdTkjyGodsx1vo1.png?w=200&h=200&f=face",
+  },
+  {
+    id: "HuggingFaceH4/zephyr-7b-beta",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/5f0c746619cb630495b814fd/j26aNEdiOgptZxJ6akGCC.png?w=200&h=200&f=face",
+  },
+  {
+    id: "mistralai/Mistral-7B-v0.1",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/62dac1c7a8ead43d20e3e17a/wrLf5yaGC6ng4XME70w6Z.png?w=200&h=200&f=face",
+  },
+];
+
+export const IMAGE_GENERATIONS: Array<Model> = [
+  {
+    id: "stabilityai/stable-diffusion-xl-base-1.0",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/643feeb67bc3fbde1385cc25/7vmYr2XwVcPtkLzac_jxQ.png?w=200&h=200&f=face"
+  },
+]

src/lib/utils/type.ts

@@ -0,0 +1,4 @@
+export interface Model {
+  id: string;
+  logo: string;
+}

src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
+	import '$lib/styles/tailwind.css';
+</script>
+
+<div class="app flex items-start justify-start">
+	<Sidebar />
+
+	<slot />
+
+</div>
+

src/routes/+page.svelte

@@ -0,0 +1,59 @@
+<script>
+	import Counter from './Counter.svelte';
+	import welcome from '$lib/images/svelte-welcome.webp';
+	import welcome_fallback from '$lib/images/svelte-welcome.png';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<h1>
+		<span class="welcome">
+			<picture>
+				<source srcset={welcome} type="image/webp" />
+				<img src={welcome_fallback} alt="Welcome" />
+			</picture>
+		</span>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/+page.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 0.6;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>

src/routes/+page.ts

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/Counter.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
+
+	function modulo(n: number, m: number) {
+		// handle negative numbers
+		return ((n % m) + m) % m;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5" />
+		</svg>
+	</button>
+
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
+
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+		</svg>
+	</button>
+</div>
+
+<style>
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		margin: 1rem 0;
+	}
+
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		touch-action: manipulation;
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--color-bg-1);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: #444;
+	}
+
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-viewport strong {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--color-theme-1);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
+</style>

src/routes/Header.svelte

@@ -0,0 +1,129 @@
+<script>
+	import { page } from '$app/stores';
+	import logo from '$lib/images/svelte-logo.svg';
+	import github from '$lib/images/github.svg';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<img src={logo} alt="SvelteKit" />
+		</a>
+	</div>
+
+	<nav>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
+		</svg>
+		<ul>
+			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+				<a href="/">Home</a>
+			</li>
+			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+				<a href="/about">About</a>
+			</li>
+			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
+				<a href="/sverdle">Sverdle</a>
+			</li>
+		</ul>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
+		</svg>
+	</nav>
+
+	<div class="corner">
+		<a href="https://github.com/sveltejs/kit">
+			<img src={github} alt="GitHub" />
+		</a>
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	path {
+		fill: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li[aria-current='page']::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--color-theme-1);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 0.5rem;
+		color: var(--color-text);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--color-theme-1);
+	}
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1,26 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm create svelte@latest</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
+		using it with JavaScript disabled!
+	</p>
+</div>

src/routes/about/+page.ts

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/api/image-generation/+server.ts

@@ -0,0 +1,47 @@
+import { error, type RequestEvent } from '@sveltejs/kit';
+import { SECRET_HF_TOKEN } from '$env/static/private'
+import { PUBLIC_INFERENCE_API_URL } from '$env/static/public'
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request }: RequestEvent) {
+  const body = await request?.json().catch(() => {});
+
+  if (!body?.model) {
+    throw error(400, 'missing model value')
+  }
+
+  if (!body?.inputs || body.inputs === null) {
+    throw error(400, 'missing inputs value')
+  }
+
+  const response = await fetch(PUBLIC_INFERENCE_API_URL + "/models/" + body.model, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${SECRET_HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify({
+      ...body,
+      stop_sequences: body?.stop_sequences?.split(",") ?? undefined,
+    }),
+  })
+  .then((res) => res.blob())
+  .then((blob) => blob)
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    error(400, response.error as string)
+  }
+
+  return {
+    headers: {
+      'Content-Type': 'image/png',
+    },
+    body: response,
+  }
+}

src/routes/api/text-generation/+server.ts

@@ -0,0 +1,42 @@
+import { error, json, type RequestEvent } from '@sveltejs/kit';
+import { SECRET_HF_TOKEN } from '$env/static/private'
+import { PUBLIC_INFERENCE_API_URL } from '$env/static/public'
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request }: RequestEvent) {
+  const body = await request?.json().catch(() => {});
+
+  if (!body?.model) {
+    throw error(400, 'missing model value')
+  }
+
+  if (!body?.inputs || body.inputs === null) {
+    throw error(400, 'missing inputs value')
+  }
+
+  const response = await fetch(PUBLIC_INFERENCE_API_URL + "/models/" + body.model, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${SECRET_HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify({
+      ...body,
+      stop_sequences: body?.stop_sequences?.split(",") ?? undefined,
+    }),
+  })
+  .then((res) => res.json())
+  .then((res) => res)
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    error(400, response.error as string)
+  }
+
+  return json(response)
+}

src/routes/image-generation/+page.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Form from "$lib/components/image-generation/Form.svelte";
+  import Response from "$lib/components/image-generation/Response.svelte";
+
+  let loading: boolean = false;
+  let data: string | ArrayBuffer | null = ''
+  let bodyRequest: Record<string, any> = {}
+
+  let form: Record<string, any> = {
+    model: "stabilityai/stable-diffusion-xl-base-1.0",
+    inputs: "A red apple on a table, high definition, realistic, 4k",
+    parameters: {
+      negative_prompt: "not blurry, not low resolution, not pixelated",
+      guidance_scale: 9,
+      width: 768,
+      height: 1024,
+      num_inference_steps: 20,
+    },
+  }
+
+  const onchange = (newForm: Record<string, any>) => form = newForm
+
+  const onsubmit = async () => {
+    loading = true
+    const request = await fetch('/api/image-generation', {
+      method: 'POST',
+      body: JSON.stringify(form),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+    const blob = await request?.clone()?.blob()
+
+    const reader = new FileReader()
+    reader.readAsDataURL(blob)
+    reader.onloadend = () => {
+      const base64data = reader.result
+      data = base64data
+    }
+    
+    bodyRequest = form
+    loading = false
+  }
+</script>
+
+<main class="min-h-screen w-full grid grid-cols-2">
+  <div class="p-10 w-full flex flex-col gap-6">
+    <Form form={form} onForm={onchange} />
+    <div>
+      <button
+        class="bg-gradient-to-r from-slate-900/50 to-slate-900 border border-slate-800/40 text-white rounded-lg text-base transition-all duration-200 leading-relaxed outline-none relative py-3 px-6"
+        disabled={loading}
+        on:click={onsubmit}
+      >
+        Submit
+      </button>
+    </div>
+  </div>
+  <div class="border-l border-slate-900 bg-slate-950">
+    <Response loading={loading} res={data} body={bodyRequest} form={form} endpoint={form.model} />
+    response
+  </div>
+</main>