org billing

README.md

@@ -69,5 +69,28 @@ Follow these steps to get the Inference Playground running on your local machine
 - **Configuration:** Adjust generation parameters like temperature, max tokens, and top-p.
 - **Session Management:** Save and load your conversation setups using Projects and Checkpoints.
 - **Code Snippets:** Generate code snippets for various languages to replicate your inference calls.
+- **Organization Billing:** Specify an organization to bill usage to for Team and Enterprise accounts.
+
+## Organization Billing
+
+For Team and Enterprise Hugging Face Hub organizations, you can centralize billing for all users by specifying an organization to bill usage to. This feature allows:
+
+- **Centralized Billing:** All inference requests can be billed to your organization instead of individual user accounts
+- **Usage Tracking:** Track inference usage across your organization from the organization's billing page
+- **Spending Controls:** Organization administrators can set spending limits and manage provider access
+
+### How to Use Organization Billing
+
+1. **In the UI:** Navigate to the settings panel and enter your organization name in the "Billing Organization" field
+2. **In Code Snippets:** Generated code examples will automatically include the billing organization parameter
+3. **API Integration:** The playground will include the `X-HF-Bill-To` header in API requests when an organization is specified
+
+### Requirements
+
+- You must be a member of a Team or Enterprise Hugging Face Hub organization
+- The organization must have billing enabled
+- You need appropriate permissions to bill usage to the organization
+
+For more information about organization billing, see the [Hugging Face documentation](https://huggingface.co/docs/inference-providers/pricing#billing-for-team-and-enterprise-organizations).
 
 We hope you find the Inference Playground useful for exploring and experimenting with language models!

src/lib/components/inference-playground/billing-modal.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { billing } from "$lib/state/billing.svelte";
+	import Dialog from "../dialog.svelte";
+
+	interface Props {
+		onClose: () => void;
+	}
+
+	const { onClose }: Props = $props();
+
+	let inputValue = $state(billing.organization);
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		const org = (formData.get("billing-org") as string).trim() ?? "";
+		billing.organization = org;
+		inputValue = org;
+		onClose();
+	}
+
+	function handleReset() {
+		billing.reset();
+		inputValue = "";
+	}
+</script>
+
+<Dialog title="Billing Settings" open={true} {onClose}>
+	<div class="space-y-4">
+		<form onsubmit={handleSubmit} class="space-y-4">
+			<div>
+				<div class="mb-2 flex items-center gap-2">
+					<label for="billing-org" class="text-sm font-medium text-gray-900 dark:text-white"> Organization Name </label>
+				</div>
+				<input
+					type="text"
+					id="billing-org"
+					name="billing-org"
+					bind:value={inputValue}
+					placeholder="my-org-name"
+					class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+				/>
+			</div>
+
+			<!-- Current Status -->
+			<div class="flex items-center gap-2">
+				<div class="h-6 w-1 rounded-full bg-neutral-600"></div>
+				<span class="text-sm font-medium text-neutral-800 dark:text-neutral-300">
+					{#if billing.organization}
+						Currently billing to: <strong>{billing.organization}</strong>
+					{:else}
+						Currently using personal billing
+					{/if}
+				</span>
+			</div>
+
+			<!-- Actions -->
+			<div class="flex gap-3 pt-2">
+				{#if billing.organization}
+					<button
+						type="button"
+						onclick={handleReset}
+						class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+					>
+						Reset
+					</button>
+				{/if}
+
+				<button
+					type="submit"
+					class="flex-1 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+				>
+					Save Settings
+				</button>
+			</div>
+		</form>
+
+		<!-- Help Link -->
+		<div class="border-t border-gray-200 pt-4 dark:border-gray-700">
+			<a
+				href="https://huggingface.co/docs/inference-providers/pricing#billing-for-team-and-enterprise-organizations"
+				target="_blank"
+				class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+			>
+				Learn more about organization billing →
+			</a>
+		</div>
+	</div>
+</Dialog>

src/lib/components/inference-playground/code-snippets.svelte

@@ -2,6 +2,7 @@
 	import { type ConversationClass } from "$lib/state/conversations.svelte";
 	import { structuredForbiddenProviders } from "$lib/state/models.svelte";
 	import { token } from "$lib/state/token.svelte.js";
+	import { billing } from "$lib/state/billing.svelte";
 	import { isCustomModel } from "$lib/types.js";
 	import {
 		getInferenceSnippet,
@@ -54,6 +55,7 @@
 			temperature: data.config.temperature,
 			top_p: data.config.top_p,
 			accessToken: tokenStr,
+			billTo: billing.organization || undefined,
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} as any;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any

src/lib/components/inference-playground/playground.svelte

@@ -13,6 +13,7 @@
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
 	import IconShare from "~icons/carbon/share";
+	import IconReceipt from "~icons/carbon/receipt";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
 	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
@@ -24,11 +25,13 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
+	import BillingModal from "./billing-modal.svelte";
 	import { TEST_IDS } from "$lib/constants.js";
 	import MessageTextarea from "./message-textarea.svelte";
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
+	let billingModalOpen = $state(false);
 
 	let selectCompareModelOpen = $state(false);
 
@@ -218,40 +221,51 @@
 
 					<GenerationConfig conversation={conversations.active[0]!} />
 
-					<div class="mt-auto flex items-center justify-end gap-4 whitespace-nowrap">
-						<button
-							onclick={() => projects.current && showShareModal(projects.current)}
-							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-						>
-							<IconShare class="text-xs" />
-							Share
-						</button>
-						<a
-							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-							href="https://huggingface.co/spaces/victor/providers-metrics"
-							target="_blank"
-						>
-							<IconWaterfall class="text-xs" />
-							Metrics
-						</a>
-						{#if token.value}
+					<div class="mt-auto space-y-3">
+						<div class="flex items-center justify-end">
+							<button
+								onclick={() => (billingModalOpen = true)}
+								class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+							>
+								<IconReceipt class="text-xs" />
+								Billing
+							</button>
+						</div>
+						<div class="flex items-center justify-end gap-4 whitespace-nowrap">
 							<button
-								onclick={token.reset}
+								onclick={() => projects.current && showShareModal(projects.current)}
 								class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 							>
-								<svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
-									<path
-										fill="currentColor"
-										d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
-									/>
-									<path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
-										fill="currentColor"
-										d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
-									/>
-								</svg>
-								Reset token
+								<IconShare class="text-xs" />
+								Share
 							</button>
-						{/if}
+							<a
+								class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+								href="https://huggingface.co/spaces/victor/providers-metrics"
+								target="_blank"
+							>
+								<IconWaterfall class="text-xs" />
+								Metrics
+							</a>
+							{#if token.value}
+								<button
+									onclick={token.reset}
+									class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
+										<path
+											fill="currentColor"
+											d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
+										/>
+										<path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
+											fill="currentColor"
+											d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
+										/>
+									</svg>
+									Reset token
+								</button>
+							{/if}
+						</div>
 					</div>
 
 					<div class="mt-auto hidden">
@@ -312,3 +326,7 @@
 		onClose={() => (selectCompareModelOpen = false)}
 	/>
 {/if}
+
+{#if billingModalOpen}
+	<BillingModal onClose={() => (billingModalOpen = false)} />
+{/if}

src/lib/state/billing.svelte.ts

@@ -0,0 +1,22 @@
+import { PersistedState } from "runed";
+
+const STORAGE_KEY = "hf_billing_org";
+
+class Billing {
+	#organization = new PersistedState(STORAGE_KEY, "");
+
+	get organization() {
+		return this.#organization.current;
+	}
+
+	set organization(org: string) {
+		this.#organization.current = org;
+	}
+
+	reset = () => {
+		this.organization = "";
+		localStorage.removeItem(STORAGE_KEY);
+	};
+}
+
+export const billing = new Billing();

src/lib/utils/business.svelte.ts

@@ -10,6 +10,7 @@ import ctxLengthData from "$lib/data/context_length.json";
 import { InferenceClient, snippets } from "@huggingface/inference";
 import { ConversationClass, type ConversationEntityMembers } from "$lib/state/conversations.svelte";
 import { token } from "$lib/state/token.svelte";
+import { billing } from "$lib/state/billing.svelte";
 import {
 	isCustomModel,
 	isHFModel,
@@ -169,9 +170,14 @@ async function getCompletionMetadata(
 	} as any;
 
 	// Handle HuggingFace models
+	const clientOptions: ConstructorParameters<typeof InferenceClient>[1] = {};
+	if (billing.organization) {
+		clientOptions.billTo = billing.organization;
+	}
+
 	return {
 		type: "huggingface",
-		client: new InferenceClient(token.value),
+		client: new InferenceClient(token.value, clientOptions),
 		args,
 	};
 }
@@ -324,6 +330,7 @@ export function getInferenceSnippet(
 		temperature?: ConversationEntityMembers["config"]["temperature"];
 		top_p?: ConversationEntityMembers["config"]["top_p"];
 		structured_output?: ConversationEntityMembers["structuredOutput"];
+		billTo?: string;
 	},
 ): GetInferenceSnippetReturn {
 	const model = conversation.model;
@@ -344,7 +351,6 @@ export function getInferenceSnippet(
 		{ ...providerMapping, hfModelId: model.id } as any,
 		{ ...opts, directRequest: false },
 	);
-	console.log(allSnippets);
 
 	return allSnippets
 		.filter(s => s.language === language)