Inference Logoinference.sh

SvelteKit

Set up the inference.sh proxy in SvelteKit applications.


Installation

bash
1npm install @inferencesh/sdk

Basic Setup

Create src/routes/api/inference/proxy/+server.ts:

typescript
1import { createRequestHandler } from "@inferencesh/sdk/proxy/svelte";2 3const handler = createRequestHandler();4 5export const GET = handler;6export const POST = handler;7export const PUT = handler;

Environment Variable

Add to your .env:

bash
1INFERENCE_API_KEY="inf_your_key_here"

Make sure to expose it in svelte.config.js if needed:

javascript
1import { defineConfig } from "vite";2import { sveltekit } from "@sveltejs/kit/vite";3 4export default defineConfig({5  plugins: [sveltekit()],6  define: {7    // Expose to server-side code8    "process.env.INFERENCE_API_KEY": JSON.stringify(process.env.INFERENCE_API_KEY),9  },10});

Client Configuration

typescript
1// src/lib/inference.ts2import { inference } from "@inferencesh/sdk";3 4export const client = inference({5  proxyUrl: "/api/inference/proxy"6});

Use in components:

svelte
1<script lang="ts">2  import { client } from "$lib/inference";3 4  let prompt = "";5  let result = null;6  let loading = false;7 8  async function generate() {9    loading = true;10    result = await client.run({11      app: "infsh/flux",12      input: { prompt }13    });14    loading = false;15  }16</script>17 18<input bind:value={prompt} />19<button on:click={generate} disabled={loading}>20  {loading ? "Generating..." : "Generate"}21</button>22 23{#if result}24  <img src={result.output.url} alt={prompt} />25{/if}

With Authentication

Check user session using SvelteKit's event.locals:

typescript
1// src/routes/api/inference/proxy/+server.ts2import { createRequestHandler } from "@inferencesh/sdk/proxy/svelte";3import { error } from "@sveltejs/kit";4 5const proxyHandler = createRequestHandler();6 7export const POST = async (event) => {8  // Check auth (set by hooks.server.ts)9  if (!event.locals.user) {10    throw error(401, "Unauthorized");11  }12  13  return proxyHandler(event);14};15 16export const GET = async (event) => {17  if (!event.locals.user) {18    throw error(401, "Unauthorized");19  }20  21  return proxyHandler(event);22};

Custom API Key Resolution

typescript
1import { createRequestHandler } from "@inferencesh/sdk/proxy/svelte";2 3const handler = createRequestHandler({4  resolveApiKey: async () => {5    // Load from secrets manager or database6    return await getSecret("INFERENCE_API_KEY");7  }8});9 10export const GET = handler;11export const POST = handler;

Streaming

The SvelteKit handler supports streaming responses for real-time task updates.

typescript
1import { client } from "$lib/inference";2 3const result = await client.run(4  { app: "infsh/flux", input: { prompt } },5  {6    onUpdate: (update) => {7      console.log("Status:", update.status);8    }9  }10);

we use cookies

we use cookies to ensure you get the best experience on our website. for more information on how we use cookies, please see our cookie policy.

by clicking "accept", you agree to our use of cookies.
learn more.