## Description Apply the shared layout and components from #3586402 to the **Image-To-Image Explorer** (`modules/ai_api_explorer/src/Plugin/AiApiExplorer/ImageToImageGenerator.php`) and build its redesign. **Design:** [design canvas](https://claude.ai/artifact/3BNzywVcnMjRCgo5jCQ6GM), page "Image to image" (light and dark, desktop and phone). This issue is blocked by #3586402. This explorer must also switch to the **AI Provider Configuration form element** (`ai_provider_configuration`, [docs](https://project.pages.drupalcode.org/ai/1.3.x/developers/ai_provider_configuration_element/#ai-provider-configuration-form-element)) in place of `AiProviderFormHelper::generateAiProvidersForm()`, as the Decision explorer already does. ### What the design adds * Pick the source from recent results (Text to image or this explorer), the media library or an upload (#3586778). * Choose a task: edit with a prompt, remove background, fill an area or upscale. Only the fields that task needs are shown. * Mask editor: paint on the image instead of uploading a separate mask file (brush, eraser, size, undo, invert, clear). * Every result has a before/after slider or side by side (#3586776). Transparent results sit on a checkerboard; JPEG is disabled when the output is transparent. * **Use as source** chains edits without downloading and uploading again. ### Bugs to fix while here Checked on 1.x (`c3b8595d7`); paths relative to `modules/ai_api_explorer/src/Plugin/AiApiExplorer/` unless shown. * The upload label says the provider "will generate a classification" (`ImageToImageGenerator.php:113`). * Code example reads the mask from the source filename (`:257`), repeats the config block (`:259`), calls `textToImage()` with a model field that does not exist on this form (`:273`) and `$response->getRaw()` (`:283`). * No try/catch around provider creation in `getResponse()` (`:166`). * Seen while building the design: a gpt-image-1 edit of a PNG with an alpha channel returned a mostly transparent image. Flatten the source to RGB first, or warn. ## Tasks * [ ] Replace the provider/model selection with the `ai_provider_configuration` element. * [ ] Rebuild the form on the shell, regions and components from #3586402; remove local styling. * [ ] Build each point under "What the design adds". * [ ] Store each run with run history (#3586772) and render Results from stored runs. * [ ] Generate the code example per run with the shared builder (#3586773). * [ ] Use the shared input picker (#3586778) for file input. * [ ] Use the shared player / image viewers (#3586776) for results. * [ ] States: running, error kept next to its run with Retry, empty before the first run. * [ ] Fix the bugs listed above. * [ ] Keyboard and screen reader check: labels, focus order, pressed and selected states. * [ ] Tests: build and submit the form against the `ai_test` provider where it supports the operation, and cover each fixed bug. ## Acceptance criteria * The explorer matches the canvas page "Image to image" in Gin and Claro, light and dark, desktop and phone width. * Provider and model selection use the `ai_provider_configuration` element. * Runs survive a reload when run history is on, and the explorer works as before when it is off. * The bugs above are fixed and covered by tests. * No ad-hoc styling remains in this plugin. ## Related issues * Blocked by #3586402 (shared layout, CSS and components). * Uses #3586772 (run history), #3586773 (code examples), #3586778 (input picker), #3586776 (audio player and image viewers). AI-Generated: Yes (Used Claude Code to update this issue from the design canvas and a check of `ImageToImageGenerator.php` on 1.x.)