Model Picker
Pick the FLUX model by the endpoint it's called at, each option saying what it's for and, if you charge per generation, what it costs.
In use
In the Playground's toolbar, each option priced for the run's image count and size. Models over the balance disable.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/model-picker.jsonModelPicker
| Prop | Type | Default |
|---|---|---|
| value / defaultValue | stringThe endpoint, e.g. "flux-3-image" for /v1/flux-3-image. Controlled with onValueChange. | — |
| onValueChange | (value: string) => voidCalled with the picked endpoint. | — |
| models | { value, label, description?, kind, cost? }[]Options, in order. kind is "image" or "video"; cost is what a run costs your user, in your unit. | BFL_MODELS |
| balance | numberWhat the user can spend. Models costing more are disabled. | Infinity |
| formatCost | (cost: number) => ReactNodeLabels each option's cost: "4 credits", "$0.04". Defaults to Cost Badge's formatCredits. | formatCredits |
| disabled | booleanE.g. while a generation is in flight. | false |
Pricing
Charging per generation? Costs are yours, not BFL's: map your prices onto the models from the run's settings, e.g. times the number of outputs, and pass the user's balance. The demo's balance of 20 disables FLUX 3 Video.
Parts
| Prop | Type | Default |
|---|---|---|
| ModelPickerItem | { model, formatCost? }One option: its kind, name, what it's for and its cost. | — |
| BFL_MODELS | Model[]FLUX 3, FLUX.2 and Kontext; filter by kind or endpoint. | — |