index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<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>
		<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",
});
const ext = image.type.split("/")[1];
await writeFile(`astronaut.${ext}`, 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" },
});
const ext = image.type.split("/")[1];
await writeFile(`tiger.${ext}`, 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>