Replace template with Replicate Inference Provider examples

index.html

@@ -1,19 +1,219 @@
 <!doctype html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Replicate Inference Provider Examples</title>
+		<meta name="description" content="Copy-paste examples for running image, video, speech, and audio models on Replicate through Hugging Face Inference Providers." />
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
+		<main>
+			<header>
+				<h1>Run models on Replicate from Hugging Face</h1>
+				<p class="lede">
+					Use Replicate as an Inference Provider with the standard Hugging Face clients. Just your
+					<code>HF_TOKEN</code> and <code>provider="replicate"</code>, no separate integration needed.
+				</p>
+				<nav class="links">
+					<a href="https://huggingface.co/docs/inference-providers/providers/replicate" target="_blank" rel="noopener">Provider docs</a>
+					<a href="https://huggingface.co/collections/replicate/run-with-replicate-6a04d0792d027edbf66c7155" target="_blank" rel="noopener">Featured models</a>
+					<a href="https://huggingface.co/models?inference_provider=replicate&amp;sort=trending" target="_blank" rel="noopener">All Replicate-powered models</a>
+					<a href="https://replicate.com" target="_blank" rel="noopener">replicate.com</a>
+				</nav>
+			</header>
+
+			<section>
+				<h2>Setup</h2>
+				<div class="tabs" data-group="setup">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="setup" data-lang="python"><code>pip install -U huggingface_hub pillow
+export HF_TOKEN=hf_...</code></pre>
+				<pre data-group="setup" data-lang="js" hidden><code>npm install @huggingface/inference
+export HF_TOKEN=hf_...</code></pre>
+				<p class="note">
+					Create a token at <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener">huggingface.co/settings/tokens</a>
+					with the "Make calls to Inference Providers" permission.
+				</p>
+			</section>
+
+			<section>
+				<h2>Text to image</h2>
+				<p class="model">Model: <a href="https://huggingface.co/Tongyi-MAI/Z-Image-Turbo" target="_blank" rel="noopener">Tongyi-MAI/Z-Image-Turbo</a>. Also try <code>black-forest-labs/FLUX.1-dev</code> or <code>Qwen/Qwen-Image</code>.</p>
+				<div class="tabs" data-group="t2i">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="t2i" data-lang="python"><code>import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(provider="replicate", api_key=os.environ["HF_TOKEN"])
+
+image = client.text_to_image(
+    "A cinematic photo of an astronaut riding a horse",
+    model="Tongyi-MAI/Z-Image-Turbo",
+)
+image.save("astronaut.png")</code></pre>
+				<pre data-group="t2i" data-lang="js" hidden><code>import { InferenceClient } from "@huggingface/inference";
+import { writeFile } from "node:fs/promises";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+const image = await client.textToImage({
+  provider: "replicate",
+  model: "Tongyi-MAI/Z-Image-Turbo",
+  inputs: "A cinematic photo of an astronaut riding a horse",
+});
+await writeFile("astronaut.png", Buffer.from(await image.arrayBuffer()));</code></pre>
+			</section>
+
+			<section>
+				<h2>Image editing (image to image)</h2>
+				<p class="model">Model: <a href="https://huggingface.co/black-forest-labs/FLUX.1-Kontext-dev" target="_blank" rel="noopener">black-forest-labs/FLUX.1-Kontext-dev</a>. Also try <code>Qwen/Qwen-Image-Edit</code> or <code>black-forest-labs/FLUX.2-dev</code>.</p>
+				<div class="tabs" data-group="i2i">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="i2i" data-lang="python"><code>import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(provider="replicate", api_key=os.environ["HF_TOKEN"])
+
+image = client.image_to_image(
+    "cat.png",
+    prompt="Turn the cat into a tiger",
+    model="black-forest-labs/FLUX.1-Kontext-dev",
+)
+image.save("tiger.png")</code></pre>
+				<pre data-group="i2i" data-lang="js" hidden><code>import { InferenceClient } from "@huggingface/inference";
+import { readFile, writeFile } from "node:fs/promises";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+const image = await client.imageToImage({
+  provider: "replicate",
+  model: "black-forest-labs/FLUX.1-Kontext-dev",
+  inputs: new Blob([await readFile("cat.png")]),
+  parameters: { prompt: "Turn the cat into a tiger" },
+});
+await writeFile("tiger.png", Buffer.from(await image.arrayBuffer()));</code></pre>
+			</section>
+
+			<section>
+				<h2>Text to video</h2>
+				<p class="model">Model: <a href="https://huggingface.co/Wan-AI/Wan2.2-T2V-A14B-Diffusers" target="_blank" rel="noopener">Wan-AI/Wan2.2-T2V-A14B-Diffusers</a></p>
+				<div class="tabs" data-group="t2v">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="t2v" data-lang="python"><code>import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(provider="replicate", api_key=os.environ["HF_TOKEN"])
+
+video = client.text_to_video(
+    "A young man walking on the street at sunset",
+    model="Wan-AI/Wan2.2-T2V-A14B-Diffusers",
+)
+with open("video.mp4", "wb") as f:
+    f.write(video)</code></pre>
+				<pre data-group="t2v" data-lang="js" hidden><code>import { InferenceClient } from "@huggingface/inference";
+import { writeFile } from "node:fs/promises";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+const video = await client.textToVideo({
+  provider: "replicate",
+  model: "Wan-AI/Wan2.2-T2V-A14B-Diffusers",
+  inputs: "A young man walking on the street at sunset",
+});
+await writeFile("video.mp4", Buffer.from(await video.arrayBuffer()));</code></pre>
+			</section>
+
+			<section>
+				<h2>Speech recognition</h2>
+				<p class="model">Model: <a href="https://huggingface.co/openai/whisper-large-v3" target="_blank" rel="noopener">openai/whisper-large-v3</a></p>
+				<div class="tabs" data-group="asr">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="asr" data-lang="python"><code>import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(provider="replicate", api_key=os.environ["HF_TOKEN"])
+
+result = client.automatic_speech_recognition(
+    "sample.flac",
+    model="openai/whisper-large-v3",
+)
+print(result.text)</code></pre>
+				<pre data-group="asr" data-lang="js" hidden><code>import { InferenceClient } from "@huggingface/inference";
+import { readFile } from "node:fs/promises";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+const result = await client.automaticSpeechRecognition({
+  provider: "replicate",
+  model: "openai/whisper-large-v3",
+  data: new Blob([await readFile("sample.flac")]),
+});
+console.log(result.text);</code></pre>
+			</section>
+
+			<section>
+				<h2>Text to speech</h2>
+				<p class="model">Model: <a href="https://huggingface.co/ResembleAI/chatterbox" target="_blank" rel="noopener">ResembleAI/chatterbox</a></p>
+				<div class="tabs" data-group="tts">
+					<button class="tab active" data-lang="python">Python</button>
+					<button class="tab" data-lang="js">JavaScript</button>
+				</div>
+				<pre data-group="tts" data-lang="python"><code>import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(provider="replicate", api_key=os.environ["HF_TOKEN"])
+
+audio = client.text_to_speech(
+    "Hello from Replicate on Hugging Face!",
+    model="ResembleAI/chatterbox",
+)
+with open("speech.wav", "wb") as f:
+    f.write(audio)</code></pre>
+				<pre data-group="tts" data-lang="js" hidden><code>import { InferenceClient } from "@huggingface/inference";
+import { writeFile } from "node:fs/promises";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+const audio = await client.textToSpeech({
+  provider: "replicate",
+  model: "ResembleAI/chatterbox",
+  inputs: "Hello from Replicate on Hugging Face!",
+});
+await writeFile("speech.wav", Buffer.from(await audio.arrayBuffer()));</code></pre>
+			</section>
+
+			<footer>
+				<p>
+					Need cURL or more tasks? See the
+					<a href="https://huggingface.co/docs/inference-providers/providers/replicate" target="_blank" rel="noopener">Replicate provider docs</a>.
+					Want the full Replicate API? Visit <a href="https://replicate.com/docs" target="_blank" rel="noopener">replicate.com/docs</a>.
+				</p>
+			</footer>
+		</main>
+
+		<script>
+			document.querySelectorAll(".tab").forEach(function (btn) {
+				btn.addEventListener("click", function () {
+					var lang = btn.dataset.lang;
+					document.querySelectorAll(".tab").forEach(function (t) {
+						t.classList.toggle("active", t.dataset.lang === lang);
+					});
+					document.querySelectorAll("pre[data-lang]").forEach(function (p) {
+						p.hidden = p.dataset.lang !== lang;
+					});
+				});
+			});
+		</script>
 	</body>
 </html>

style.css

@@ -1,28 +1,140 @@
+:root {
+	--bg: #ffffff;
+	--fg: #111827;
+	--muted: #6b7280;
+	--border: #e5e7eb;
+	--code-bg: #0f172a;
+	--code-fg: #e2e8f0;
+	--accent: #ea2804;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #0b0f19;
+		--fg: #f3f4f6;
+		--muted: #9ca3af;
+		--border: #1f2937;
+		--code-bg: #111827;
+	}
+}
+
+* {
+	box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	margin: 0;
+	background: var(--bg);
+	color: var(--fg);
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	line-height: 1.6;
+}
+
+main {
+	max-width: 860px;
+	margin: 0 auto;
+	padding: 2.5rem 1.25rem 4rem;
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+	font-size: 2rem;
+	line-height: 1.2;
+	margin: 0 0 0.75rem;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+h2 {
+	font-size: 1.25rem;
+	margin: 0 0 0.5rem;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+section {
+	border-top: 1px solid var(--border);
+	padding-top: 1.5rem;
+	margin-top: 1.5rem;
+}
+
+a {
+	color: var(--accent);
+}
+
+.lede {
+	font-size: 1.1rem;
+	color: var(--muted);
+	margin: 0 0 1rem;
+}
+
+.links {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.links a {
+	border: 1px solid var(--border);
+	border-radius: 999px;
+	padding: 0.3rem 0.85rem;
+	text-decoration: none;
+	font-size: 0.9rem;
+}
+
+.links a:hover {
+	border-color: var(--accent);
+}
+
+.model,
+.note {
+	color: var(--muted);
+	font-size: 0.9rem;
+	margin: 0 0 0.75rem;
+}
+
+.tabs {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.tab {
+	border: 1px solid var(--border);
+	border-bottom: none;
+	border-radius: 6px 6px 0 0;
+	background: transparent;
+	color: var(--muted);
+	padding: 0.35rem 0.9rem;
+	font-size: 0.85rem;
+	cursor: pointer;
+}
+
+.tab.active {
+	background: var(--code-bg);
+	color: var(--code-fg);
+	border-color: var(--code-bg);
+}
+
+pre {
+	margin: 0;
+	background: var(--code-bg);
+	color: var(--code-fg);
+	padding: 1rem;
+	border-radius: 0 6px 6px 6px;
+	overflow-x: auto;
+	font-size: 0.85rem;
+}
+
+code {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+p code {
+	background: var(--border);
+	padding: 0.1rem 0.3rem;
+	border-radius: 4px;
+	font-size: 0.85em;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+footer {
+	border-top: 1px solid var(--border);
+	margin-top: 2rem;
+	padding-top: 1.5rem;
+	color: var(--muted);
+	font-size: 0.9rem;
 }