flux-klein-screen-style-realtime

KO | EN

gitlite — search

#hacktoberfest #react #typescript #rust #deep-learning #linux #docker #macos #nodejs #awesome #awesome-list #vue #pytorch #openai

flux-klein-screen-style-realtime

(★ 31)

Real-time screen-to-style: share your screen, pick a style (claymation, oil painting, anime…) or your own prompt, watch it restyled live via fal-ai/flux-2/klein/realtime.

flux-klein-screen-style-realtime Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Screen → Style (Realtime)

Share your screen, pick a style — claymation, oil painting, anime, … — or type
your own prompt, and watch it restyled **live**. Powered by
[`fal-ai/flux-2/klein/realtime`](https://fal.ai/models/fal-ai/flux-2/klein/realtime).

```
┌───────────────────────────────────────────┐
│                                            │
│              Restyled (live)               │
│                              ┌───────────┐ │
│                              │ your screen│ │  ← draggable
│                              └───────────┘ │
└───────────────────────────────────────────┘
```

## Run it (≈1 min)

Needs [Node 18+](https://nodejs.org) and a fal API key
(https://fal.ai/dashboard/keys).

```bash
npm install
FAL_KEY="your-key-id:your-key-secret" npm start
# open http://localhost:3333
```

Open it on `http://localhost` (browsers only allow screen capture on a secure
origin — `localhost` counts), click **Share screen**, and pick a style.

> Prefer to use a `.env` file? Copy `.env.example` to `.env` and run `npm start`.

## Use it

- **Share screen** — choose a browser tab, a window, or a whole monitor.
- **Style preset** fills the **editable prompt** — tweak it freely, it updates live.
- **Select area** — drag a **square** over the captured source to stylize just
  that part (e.g. a video, a canvas).
- **Change source** — switch what you're capturing without stopping.
- **Fullscreen** — put the restyled view full-screen.

### Two monitors? (recommended)

Run the app on one screen and capture the **other** one: click **Share screen**
and pick your second monitor. The restyled output stays on screen 1 while you
use the real content on screen 2 — and there's no feedback loop.

> Don't share *this* window/screen, or you'll capture the restyled output itself.

## How it works

A browser can't safely hold your `FAL_KEY`, so `server.js` is a tiny proxy: the
page talks to `/api/fal/proxy`, the server attaches your key and forwards to
fal. **Your key stays on the server**, never in the page. Only the short
realtime auth-token request goes through the proxy; the realtime WebSocket then
connects straight to fal. That's also why sharing this repo is safe — everyone
runs it with **their own** `FAL_KEY`, and no keys are committed.

The app sends the **largest centered square** of your screen (the model output
is square), at ~8 fps, and shows the streamed result. Frame prompts are framed
as transformations (`Turn this into …`) so the model restyles your screen
instead of inventing a new scene.

## Customize

- **Styles**: edit the `STYLES` list (`[name, prompt]` pairs) near the top of
  the `<script>` in `public/index.html`.
- **Settings** panel (footer): realtime endpoint id, output size
  (`square` 768 / `square_hd` 1024), steps, temporal **feedback**
  (`1.0` = follow the screen each frame, lower = smoother/ghosting), and send FPS.

## Notes & limits

- The endpoint resizes input to a 768×768 square.
- It drops the session roughly every 30s (billing re-check); the app reconnects
  automatically (a brief hitch).
- Latency/FPS depend on the endpoint's current load and your steps setting.

## License

[MIT](./LICENSE)

flux-klein-screen-style-realtime

flux-klein-screen-style-realtime Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

flux-klein-screen-style-realtime

flux-klein-screen-style-realtime Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README