--- title: Image Studio (native panel — generate, compare, library, stats, templates, post-processing) --- # Image Studio (native panel) ## What it is A first-class, in-app image studio built natively into Omniscio. You generate AI images from a prompt, compare several models on the same prompt side-by-side, browse and search your whole generation history, watch your spend, save reusable prompt templates, gather images into named galleries you order by hand, and post-process finished images (AI upscale and background removal) — all inside one panel, without opening a browser. > **Three things share the "Image Studio" name — this page covers only the first.** > Don't confuse them: > > - **Image Studio (native panel)** — *this page.* A native four-tab panel in the > Omniscio sidebar, described below. > - **Image Studio MCP** — a set of agent tools for Claude CLI sessions (generate, > compare, browse, templates, and shareable links). See > [jls-image-studio.md](jls-image-studio.md). This is where **share links** live. > - **Image Studio (embedded website)** — the older sidebar panel that embedded the > live `jls-image-studio.web.app` site in a webview. The native panel on this page > **replaces** it. See [jls-image-studio-app.md](jls-image-studio-app.md). ## Where to find it ### Status — currently hidden behind a flag The native panel ships **dark**: it is behind the in-development `image-studio-native` unreleased feature, **off by default and hidden until it is shipped**. While it is dark, no "Image Studio" entry appears in the sidebar. When the feature is turned on (revealed for testing, or shipped for everyone), an **Image Studio** row appears in the projects sidebar (a pink image icon). Opening it gives the panel the whole content area — a top tab bar with four tabs: **Studio**, **Library**, **My Stats**, and **Templates** — plus a full-screen image viewer that opens over any image. Two more things to know up front: - **Desktop only.** Every operation is refused over the mobile / Web Access bridge — there is no phone surface yet. - **Sign-in required.** Generating, listing, post-processing, and templates all need you to be signed in to your Omniscio account. Signed out, the panel asks you to sign in first. ### The Studio tab — generate images The Studio tab is a two-pane surface: the **generation form** on the left, the **results grid** on the right. > **Visual design — the website layout, but theme-following (owner-directed 2026-08-23).** The > Studio keeps the website's *layout* (prompt prominent at the top, a compact multi-select model > picker, a banana-gradient Generate button), but its surfaces now **follow the app's light/dark > theme** — light in light mode, dark in dark mode — instead of the original always-dark island. > This is done centrally: the JLS-only `dark-*` colour scale in `tailwind.config.js` aliases the > theme surface vars (`--color-surface-*`), so every `bg-dark-*` / `border-dark-*` adapts at once, > and text uses the surface tokens. What stays FIXED regardless of theme: the **`banana`** brand > accent (a yellow-gold ramp; on-accent text is dark — `text-zinc-950` — in both modes), and the > **fullscreen image viewer + `bg-black` image scrims** (a media backdrop stays dark so photos read > and its glass controls survive — the viewer roots a forced-`dark` subtree). The `banana` + `dark` > scales live in `tailwind.config.js`. ### Writing the prompt - **Subject** (required) — describe what to generate. A live counter shows the length; a Clear (×) button appears when there's text. - **Style** (optional) — art direction, e.g. "photorealistic, oil painting, neon." - **Multi-prompt.** The Subject box can hold **several prompts at once**. Separate them with a **blank line** or a line containing only **`---`**. Each prompt then generates its **own batch** of images, and a "**N PROMPTS**" badge appears next to the Subject label so you can see how many were detected. - **Character limit.** Each model has a maximum prompt length. The counter tracks your longest prompt; going over the limit blocks Generate, and getting close warns in amber. In comparison mode the strictest selected model sets the limit. ### Choosing a model The model control is a **compact multi-select dropdown** that sits in the Model / Size / Ratio row (its trigger shows the currently-selected model name(s)). Open it and pick **one** model for a normal generation, or **two or more** to enter multi-model comparison mode; each option is a checkbox row with the model name and a capability hint on hover. It lists **8 models**. | Model | Provider | Sizes | Reference images | Prompt limit | Est. price / image | |-------|----------|-------|------------------|--------------|--------------------| | **NB2 Lite** *(default — cheapest)* | Google Gemini | 1K | up to 14 | 32,000 | ~$0.039 | | Flash *(fastest)* | Google Gemini | 1K | up to 14 | 32,000 | ~$0.039 | | NB2 *(only model that does 0.5K)* | Google Gemini | 0.5K / 1K / 2K / 4K | up to 14 | 32,000 | ~$0.077–0.151 | | Pro *(highest Gemini quality)* | Google Gemini | 1K / 2K / 4K | up to 14 | 32,000 | ~$0.155–0.24 | | SeedDream 4.5 | Replicate | 1K / 2K / 4K | up to 10 | 4,000 | ~$0.06 | | Ideogram 3 *(strong text)* | Replicate | 1K | up to 3 style refs | 4,000 | ~$0.06 | | GPT Image 2 *(best text)* | OpenAI | 1K / 2K | up to 14 | 32,000 | ~$0.211 (1K) / ~$0.844 (2K) | | GPT Image 1.5 *(the only see-through one)* | OpenAI | 1K | up to 14 | 32,000 | ~$0.133 | Prices are pre-generation **estimates** and depend on the size you pick; the charged amount comes from the server. **This list mirrors the JLS app — JLS is upstream and wins.** It was 13 models until 2026-09-01, when six ids JLS had retired (`seedream-5-pro`, `seedream-5-lite`, the three `ideogram-v4` tiers, `muse-image`) were removed: the picker was offering models the server could no longer generate. `gpt-image-1.5` was added in the same pass. If this table and the JLS app disagree, re-derive from JLS, never the other way round. **GPT Image 2 at 2K really is 4× its 1K price**, not cheaper. The estimate said ~$0.165 for a long time — OpenAI's 1024-class price mistaken for a size tier — which made the bigger render look cheaper and under-reported spend ~5×. Do not "restore" that ordering. ### Size and aspect ratio - **Size** — one of **0.5K, 1K, 2K, 4K**, restricted to what the chosen model supports (only NB2 offers 0.5K). A model with a single fixed size locks the selector and says "Fixed for this model." - **Aspect ratio** — **Auto** (matches the first reference image, or 1:1 if there is none), or one of **1:1, 4:3, 3:4, 16:9, 9:16**. ### Transparent background A **Transparent background** switch sits under the size row. Turn it on and the image is generated with a real see-through background (a true alpha channel) instead of a solid one — useful for logos, icons, stickers and anything you want to drop onto another design. - **It only appears for GPT Image 1.5**, because that is the only model that can do it. The control is hidden — not greyed out — for every other model. - **It is not an OpenAI-wide capability.** GPT Image 2 is also an OpenAI model and still cannot do it; the server refuses the whole request rather than quietly returning a solid background, which is why the control is genuinely locked rather than merely discouraged. - **Switching to a model that can't do it turns the switch off** and tells you so, so it can never sit silently on behind a hidden control and surprise your next generation. - **In a comparison**, the setting rides only on the GPT Image 1.5 request. The other models in the comparison are unaffected and still succeed. - **It costs the same** as a normal image, and it works alongside reference images. - A transparent result is drawn on a **checkerboard** in the results grid and the viewer, so you can see at a glance that it worked — the same treatment a background-removed image gets. Downloading keeps the transparency. Related but different: **Remove background** (in the post-processing menu) takes an image you already generated and cuts the background out afterwards. This switch asks the model to render it see-through in the first place — one paid call instead of two, and a real alpha channel rather than an approximate cutout. ### How many, and what it costs - A slider sets the count, **1–10** (default **2**). You can also press **Shift + 1…0** to set it directly. - The **cost pill** next to the count shows the live estimated cost of the batch. - Asking for **20 or more images total** pops a confirmation first, so a big spend is never one accidental click. ### Reference images Some models accept reference images to steer the result. The form shows **two drop zones** — one for **content** references and one for **style** references. Add images by **dragging**, **clicking to browse**, or **pasting**. - **Combined cap: 14** across both zones. **20 MB** per file. Accepted formats: **PNG, JPEG, WebP, GIF**. - How many each model uses varies: the Gemini models and **both GPT Image models** take up to 14; SeedDream 4.5 up to 10; Ideogram 3 up to 3 style references. Every model currently offered accepts at least one reference image. - **GPT Image 2 used to take only the first reference** — that changed when OpenAI's multi-image edit path landed upstream, and it now uses up to the same combined cap of 14. - In comparison mode, references are only available when **every** selected model supports them; otherwise the zones are disabled with a short reason. ### Generate, and cancel - The button reads **"Generate N Images"** (or **"Compare N Models"** in comparison mode). **Ctrl + Enter** (⌘ + Enter on Mac) also fires it. - While a batch runs, the button becomes **Cancel**. Cancelling stops *waiting* on the batch — but any image already paid for and in flight still finishes and lands in your **Library** (a cancel can't refund work already running). ### The results grid Finished images appear on the right, newest batch first, each with a **model badge** and a **cost badge**. A see-through image sits on a **checkerboard** instead of the usual solid tile, so you can tell it worked without opening or downloading it. Hover an image (or focus it) for quick actions: | Action | Shortcut | |--------|----------| | Open in the full-screen viewer | click / Enter | | Copy to clipboard | **C** | | Download | **D** | | Use as a reference (sends it back to the form) | **R** | | Remix (reopens the form with this image's settings) | **X** | An image that failed shows a non-hanging **error tile** instead of spinning forever. Before you've generated anything, the grid shows a friendly "No images yet — write a prompt and hit Generate" empty state. ### Handy extras on the form - **Recent prompts** — a clock popover with your last 20 prompts; click one to restore its settings. - **Session stats** — a popover tallying this session's images, spend, and per-model breakdown (using real server costs). - **Save as Template** — save the current subject, style, and reference images for reuse (see the Templates tab). ## How it behaves ### Billing — read this before you generate Generating images and post-processing them **spend prepaid gateway AI credit** (the same balance you top up under Settings → Accounts & AI → Plan & Usage; see [stripe-credit-topups.md](stripe-credit-topups.md)). A few rules make the spend predictable: - **The price you see before generating is an estimate.** The little cost pill next to the count is computed locally from a price table. The **amount you are actually charged is whatever the server returns** with each finished image — never the estimate. - **You only pay for images that arrive.** If a requested image fails to generate, it is not billed; you get a small error tile that says so ("you weren't charged for it"). - **Out of credit is a clear message.** If your balance can't cover a request, the panel tells you to top up and try again, rather than showing a raw error. The whole money path lives in the Omniscio gateway, not in the app — the app only displays what the server reports. (Wiring: `unified-image-gen-billing-contract`.) ### Multi-model comparison Select **2 to 8 models** and the Studio switches to comparison mode: the same prompt(s) run across every selected model so you can judge them side by side. - Each model generates **1–3 images** (the "images per model" slider; default 1). - Results are grouped into a **"Model Comparison"** block per prompt, organized by model, so you compare like with like. - The size offered is the shared ceiling all selected models can honor, and — as above — reference images require every selected model to support them. ### The Library tab — your whole history Every image you generate (and every post-processed result) is saved to your account and shows up here. - **Grid with infinite scroll**, ~20 images per page — scroll to load more. - **Search** by prompt text — case-insensitive, debounced as you type, over your most recent 500 images (a note tells you when you've hit that window). - **Filters** — a **model** dropdown, **date presets** (Today / This Week / This Month / All), and a **custom date range**. - **Comparison sets are grouped** back together as "Model Comparison" blocks. - **Bulk actions** — click **Select** (or press **Ctrl + A**) to multi-select, then **Delete** (with confirmation) or **Download ZIP** (up to 500 images at once). - **Per-image** — copy, download, use as reference, remix, and delete. A delete is optimistic and offers **Undo**. - **Look** — the Library keeps the website's layout but **follows the app light/dark theme** like the rest of the Studio (see the Studio-tab visual-design note): a theme-following search + filter bar, `aspect-square` image cards with banana hotkey badges and glassy hover actions, and a floating bulk-select pill. Image thumbnails keep a dark `bg-black` mat (media backdrop) and the `banana` accent stays fixed in both modes. ### The full-screen viewer Clicking any image opens a full-screen viewer: - **Zoom** with the scroll wheel (up to 20×, toward the cursor); **double-click** or press **0** to reset. **Pan** by dragging when zoomed. - **Navigate** with the on-screen arrows, the **← / →** keys, or a **swipe** on touch; an index pill shows "N / total." - **Actions** — Copy (**C**), Download (**D**), an **AI** menu (upscale / remove background), and a **Refs** menu (add as reference **A**, set as reference **R**, remix **X**). The prompt is shown beneath the image (**Shift + P** copies it; **?** shows the shortcut help). A background-removed image is shown over a **transparency checkerboard**. ### Post-processing (the AI menu) From the viewer's **AI** menu you can transform a finished image: - **Upscale** — **2×** or **4×** (Topaz). - **Remove background** — via **BRIA** or **851-labs**, producing a transparent PNG. Each of these **creates a new image** (it never overwrites the original). The new image is billed on the cost the server returns, is inserted right after its source in the viewer, and is added to your session and your Library. These operations are **slow** (up to about 1–2.5 minutes) and are **never retried automatically** (a re-run would bill again). If the server can't produce a result, you get an honest message about whether you were charged. ### The My Stats tab An account-wide summary of your usage: - **Headline cards** — total images, total spend, and total prompts. - **Per-model breakdown** — each model you've used, with its image count, spend, and a proportional bar. - **Personal bests** — your favorite (most-used) model, your priciest single image, and the month you started creating. There are no filters or date ranges here — it's your all-time total. Before you've generated anything it shows a "No stats yet" empty state. ### The Templates tab A template is a reusable starting point for the form. > **Visual design — a pixel-for-pixel port of the website (owner-directed).** The Templates > tab renders as a fixed dark "banana" island matching the JLS Image Studio website — a dark > card grid, an inline name/subject/style edit card (reference-image thumbnails read-only), a > banana **Save Changes** button, and a banana-bordered empty state — in the website's palette > **regardless of the app's light/dark/custom theme**. This deliberately **overrides the > Omniscio design language for this surface** (owner directive), part of the surface-by-surface > website match; the shared `banana` / `dark` colour scales live in `tailwind.config.js`. - **What it stores** — a **name** (up to 60 characters), the **subject**, the **style**, and any **reference images** (content and style). It deliberately does **not** store the model, size, or aspect ratio, so a template stays flexible across models. - **Saving** — from the Studio, fill in a subject and/or style and click **Save as Template**. You can keep **up to 50** templates. - **Managing** — the Templates tab lists your templates as cards. **Load** fills the form with a template's subject, style, and references; you can also **edit** or **delete** a template inline. Templates are stored on your account (server-side). ### The Galleries tab — named, ordered collections A **gallery** is a named, hand-ordered set of your images that lives on your account. Where the Library is your whole history in one stream, a gallery is a folder you curate — "Client pitch", "Blue-hour refs" — and it keeps the order you put the images in. **Desktop only.** Every gallery operation is refused over the mobile / Web Access bridge (there is no mobile gallery UI yet), so the tab does not appear in a browser session. - **Make one** — type a name in the Galleries tab and click **Create**. Rename it later by clicking the name; **Delete** on the card removes it after a confirm step — your images are not deleted, only the gallery. - **Put images in it** — two ways, on the same **Add Images** screen. **From History** picks from images you have already generated; **Upload** takes files from your computer by click or drag-and-drop (PNG, JPEG, WebP, GIF, **20 MB per file**, several at once). A file over the limit is skipped by name and the rest still upload. - **Order them by hand** — drag a tile to reorder. The new order saves immediately, and reverts on the spot if the save fails. - **The cover picture is the first image.** There is no "set as cover" control — the cover is whichever image the gallery lists first, so **reordering is how you change it**. - **Rename or remove one image** — from the tile itself. Removing takes it out of the gallery only; the original stays in your Library. - **Copy between galleries** — multi-select in a gallery, then **Copy to Gallery** to drop the same images into another one. Galleries are **free** — every gallery route is organizational CRUD and none of them generate an image, so nothing here costs credit. ### Sharing & collections The native panel has an **in-panel Sharing surface** — a pixel-for-pixel port of the JLS website's sharing UI, rendered as a fixed dark "banana" island (theme-independent, matching the website rather than the app theme). **Desktop-only** for now. Three surfaces: - **Share one image** — a **Share** button in the `ImageViewer` opens `ShareModal`: pick an expiry (1 day / 7 days / 30 days / never) and copy the public link. - **Share several as a collection** — multi-select in the **Library**, then **Share** in the bulk bar opens `BulkShareModal`: name the collection and get one public link. - **Manage everything** — **Manage shares** in the Library header opens `ShareManager`, a full-screen island with two tabs: **Links** (every share link, with view count + expiry; copy or revoke each) and **Collections** (delete a collection — the images are untouched). A share link is a PUBLIC capability URL (`jls-image-studio.web.app/share/`) — anyone with the link can view; the UI says so and lets you revoke anytime. It all flows through the Omniscio gateway (`/v1/jls/{shares,collections}`) under your signed-in account — **never Firebase**. Sharing is FREE (no spend); create / revoke / delete are desktop-only and blocked on the mobile/web bridge. A multi-image collection share is two chained calls (create the collection, then share it) — the REST API has no combined route. Related surfaces under the Image Studio name: the **Image Studio MCP** integration ([jls-image-studio.md](jls-image-studio.md)) exposes the same capability to agents (`create_share` / `list_shares` / `revoke_share`); the standalone **JLS Image Studio web app** ([jls-image-studio-app.md](jls-image-studio-app.md)) is a separate product. ### Known limitations - **Desktop only** — no mobile / Web Access surface yet. - **Requires sign-in and prepaid credit** — generating and post-processing spend real credit; running out prompts a top-up. - **Post-processing is slow and never auto-retries** — upscale / remove-background can take a minute or two, and each run bills. - **Sharing is desktop-only** — the Share / bulk-share / Manage-shares surfaces are hidden on the mobile/web bridge (the share IPC is desktop-only); a paired phone has no sharing UI yet. - **Estimates are approximate** — the cost pill is a guide; the charged amount is whatever the server returns. ## For agents ### How it works - **Renderer** — everything lives under `src/renderer/src/features/jls-image-studio/`. The panel shell is `JlsImageStudioNativePanel.tsx` (it owns the cross-component state and the money-path orchestration); the tabs are `GenerationForm.tsx`, `ResultsGrid.tsx`, `ImageLibrary.tsx`, `StatsPage.tsx`, `TemplateManager.tsx`, and `GalleryManager.tsx` (with `GalleryImageTile.tsx` for the draggable tile and `GalleryPickerModal.tsx` for "copy to gallery"), with `ImageViewer.tsx` as the lightbox and `ShareModal.tsx` / `BulkShareModal.tsx` / `ShareManager.tsx` as the Sharing surfaces (opened from the viewer + library). The model registry, multi-prompt parser, and comparison planner are `image-studio-models.ts`, `image-studio-prompts.ts`, and `image-studio-comparison.ts`. - **IPC** — `src/main/ipc/image-gen-handlers.ts` exposes 30 typed channels: `generate`, `estimate`, `list`, `get`, `download`, `delete`, `stats`, template `list` / `create` / `update` / `delete`, `upscale`, `remove-background`, `save-markup`, and the sharing set — share `create` / `list` / `revoke` and collection `create` / `list` / `delete`, plus the gallery set — `list` / `get` / `create` / `update` / `delete` / `add-images` / `remove-image` / `rename-image` / `upload` (reorder rides on `update`, which writes the new image order). Each Zod-validates the input, then calls the Omniscio gateway's `/v1/jls/*` route (Firebase-token auth), which forwards to the JLS backend (`/api/v1/{images,templates,shares,collections}`). **All billing is in the gateway** (sharing is FREE — no spend). The spend / destroy / mutate channels carry a desktop-only backstop, and the whole feature is blocked on the mobile/web WS bridge. - **Gating** — the `image-studio-native` unreleased feature (`src/shared/unreleased-features.ts`, setting `imageStudioNativeEnabled`, read only through `isUnreleasedFeatureVisible`) reveals the panel; the sidebar entry is gated by that same feature in `src/renderer/src/stores/project-visibility.ts`. The panel is registered as the `jls-image-studio-app` view in `src/renderer/src/integrations/ui-registry.ts`, replacing the now-orphaned embedded webview. ## Related - [jls-image-studio.md](jls-image-studio.md) — the Image Studio **MCP** server (agent image tools **and** shareable links). - [jls-image-studio-app.md](jls-image-studio-app.md) — the **embedded-website** Image Studio panel this native panel replaces. - [stripe-credit-topups.md](stripe-credit-topups.md) — buying the credit these generations spend. - [plan-billing.md](plan-billing.md) — the Plan & Usage money screen where your credit balance lives.