Skip to content

Add UTM parameters to replicate.com links #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zeke merged 3 commits into from
Jul 3, 2025
+8 −8
Merged

Add UTM parameters to replicate.com links #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91a165e
Add UTM parameters to replicate.com links
claude[bot] Jul 3, 2025
daa92a4
Update UTM source parameter to "project"
claude[bot] Jul 3, 2025
5fa6c7f
Remove utm_medium parameters from replicate.com links
claude[bot] Jul 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,26 @@ Create and edit images using your voice.
🍿 [Watch the demo video](https://www.youtube.com/watch?v=72mD_vkG9FU)

This is a realtime demo of voice-powered function calling
using [Cloudflare Workers](https://developers.cloudflare.com), [Replicate](https://replicate.com), and the [OpenAI Realtime API](https://platform.openai.com/docs/api-reference/realtime).
using [Cloudflare Workers](https://developers.cloudflare.com), [Replicate](https://replicate.com?utm_campaign=kontext-realtime&utm_source=project), and the [OpenAI Realtime API](https://platform.openai.com/docs/api-reference/realtime).

It generates images using [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell) and edits them using [Flux Kontext Pro](https://replicate.com/black-forest-labs/flux-kontext-pro).
It generates images using [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell?utm_campaign=kontext-realtime&utm_source=project) and edits them using [Flux Kontext Pro](https://replicate.com/black-forest-labs/flux-kontext-pro?utm_campaign=kontext-realtime&utm_source=project).

Created from this guide and template: https://replicate.com/docs/guides/openai-realtime
Created from this guide and template: https://replicate.com/docs/guides/openai-realtime?utm_campaign=kontext-realtime&utm_source=project

## Prerequisites

Here's what you'll need to build this project:

- An [OpenAI account](https://platform.openai.com/signup). No special plan is required to use the Realtime API Beta.
- A [Replicate account](https://replicate.com/).
- A [Replicate account](https://replicate.com/?utm_campaign=kontext-realtime&utm_source=project).
- [Node.js 20](https://nodejs.org/en/download/prebuilt-installer) or later.
- [Git](https://chatgpt.com/share/673d65dc-8e50-8003-8ce2-4bc7053d0e3a) for cloning the project from
GitHub.
- Optional: A [Cloudflare account](https://www.cloudflare.com/plans/free/) if you want to deploy the app to the web. You can sign up and [run workers for free](https://workers.cloudflare.com/).

## Development

- Create a Replicate API token at [replicate.com/account/api-tokens](https://replicate.com/account/api-tokens)
- Create a Replicate API token at [replicate.com/account/api-tokens](https://replicate.com/account/api-tokens?utm_campaign=kontext-realtime&utm_source=project)
- Create an OpenAI API key at [platform.openai.com/api-keys](https://platform.openai.com/api-keys)

Copy [.dev.vars.example](./.dev.vars.example) to `.dev.vars`:
Expand Down Expand Up @@ -67,7 +67,7 @@ npx wrangler secret put REPLICATE_API_TOKEN

## Replicate API Token

When you first load the app, you will be prompted to enter your Replicate API token in a modal dialog. The token is stored in your browser's localStorage and used for all Replicate API requests. You can get a token from [Replicate's API tokens page](https://replicate.com/account/api-tokens?new-token-name=kontext-realtime).
When you first load the app, you will be prompted to enter your Replicate API token in a modal dialog. The token is stored in your browser's localStorage and used for all Replicate API requests. You can get a token from [Replicate's API tokens page](https://replicate.com/account/api-tokens?new-token-name=kontext-realtime&utm_campaign=kontext-realtime&utm_source=project).

You no longer need to set the `REPLICATE_API_TOKEN` environment variable or use `wrangler secret put` for this project.

Expand Down
4 changes: 2 additions & 2 deletions public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,7 +510,7 @@ const App = () => {
<footer className="py-8 opacity-70 mt-12">
<p>
This is a realtime demo of voice-powered function calling
using <a href="https://developers.cloudflare.com" className="underline">Cloudflare Workers</a>, <a href="https://replicate.com" className="underline">Replicate</a>, and the <a href="https://platform.openai.com/docs/api-reference/realtime" className="underline">OpenAI Realtime API</a>. It generates images using <a href="https://replicate.com/black-forest-labs/flux-schnell" className="underline">Flux Schnell</a> and edits them using <a href="https://replicate.com/black-forest-labs/flux-kontext-pro" className="underline">Flux Kontext Pro</a>.
using <a href="https://developers.cloudflare.com" className="underline">Cloudflare Workers</a>, <a href="https://replicate.com?utm_campaign=kontext-realtime&utm_source=project" className="underline">Replicate</a>, and the <a href="https://platform.openai.com/docs/api-reference/realtime" className="underline">OpenAI Realtime API</a>. It generates images using <a href="https://replicate.com/black-forest-labs/flux-schnell?utm_campaign=kontext-realtime&utm_source=project" className="underline">Flux Schnell</a> and edits them using <a href="https://replicate.com/black-forest-labs/flux-kontext-pro?utm_campaign=kontext-realtime&utm_source=project" className="underline">Flux Kontext Pro</a>.
</p>
<p className="mt-4">
Check out the <a href="https://github.com/zeke/kontext-realtime/" className="underline">code</a>.
Expand Down Expand Up @@ -652,7 +652,7 @@ const TokenModal = ({ onSave }) => {
></iframe>
</div>
<p className="mb-2 text-stone-500">
To use this app, you need to <a href="https://replicate.com/account/api-tokens?new-token-name=kontext-realtime" target="_blank" rel="noopener noreferrer" className="underline">create a Replicate API token</a> and an <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="underline">OpenAI API key</a>.
To use this app, you need to <a href="https://replicate.com/account/api-tokens?new-token-name=kontext-realtime&utm_campaign=kontext-realtime&utm_source=project" target="_blank" rel="noopener noreferrer" className="underline">create a Replicate API token</a> and an <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="underline">OpenAI API key</a>.
</p>
<form onSubmit={e => { e.preventDefault(); handleSave(); }}>
<input
Expand Down