shadcn.io is not affiliated with official shadcn/ui
Photo Editor Chat Block for Solid
A retouch chat where typed edits (brighter, more contrast, blur, rotate, flip) become steps with an on-off switch each, redrawn live on a lighthouse scene, with a Show original comparison.
Installation
Overview
Edit a picture by asking for it, with this photo editor chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Lumenlab, a retouch chat: you talk to Lumenlab Bot, and the pane at the end shows a drawn greyscale lighthouse, never a photograph. Typing "brighter", "more contrast", "blur", "rotate" or "flip" (or pressing its chip) adds a step: the thread gets a card ("Step 2: Brighter +10%") and the Edits list gets a Switch for it, with Remove and Reset. The picture is the enabled steps applied in order as CSS filters and transforms, so turning step 2 off redraws it without that step, and a Toggle shows the original for comparison. Anything the parser does not know is answered with the eight phrases it does. The composer's Shine Button, the only colored control, sends your edit. It's built from Switch, Toggle, Button, Badge, Message, Shine Button and Guides, with a CSS entrance only. For design tools and any chat that edits something visible.
FAQ
What stays in the page, and how do I make it real?
Everything. The scene is a drawing, the eight phrases are matched by a small function in this file, the edits are CSS filters on the drawing, and no photo is uploaded or edited. To wire it for real, keep the steps as the edit history, send the enabled steps to your image service (or apply them with canvas or WebGL) and render its result in the same place; the list, the switches and the cards already work from the steps.
What can I type?
Brighter, darker, more contrast, less contrast, blur, fade, rotate and flip, in any sentence that contains them ("make it brighter please"). The chips send the most common six. Anything else gets a reply listing the phrases, and no step is added.
How do the steps combine?
In order: brightness and contrast and blur multiply as CSS filters, each Rotate adds 90 degrees, and an odd number of Flip steps mirrors the picture. Switching a step off removes only its part, which is why the order is kept and the cards in the thread show whether each step is on, off or removed.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden sender and time, and the composer's status line announces what each action did. The picture has a text description that says how many edits are applied, every switch is named with its step, and Show original is a toggle button with a pressed state. Motion on the picture stops under reduced-motion settings.