hanhan
108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
# AI Edit
|
||
|
||
Photoshop CEP panel for image generation. It sends text prompts to your own image API, previews the result, and places generated PNGs into the active document as new masked layers.
|
||
|
||
## Architecture
|
||
|
||
| Layer | File | Role |
|
||
| --- | --- | --- |
|
||
| Panel UI | `src/panels/ImageGenerator.jsx` | React + Tailwind, runs in the CEP CEF panel |
|
||
| Bridge | `src/cep.js` | Node file/network access and `evalScript` calls |
|
||
| Host | `cep/host/host.jsx` | ExtendScript: masked layer placement, file and prompt dialogs |
|
||
| Manifest | `cep/CSXS/manifest.xml` | CEP extension declaration |
|
||
|
||
Node runs in the panel (`--enable-nodejs --mixed-context`), so temp files and HTTP
|
||
both go through Node rather than UXP storage or `fetch`.
|
||
|
||
## Styling
|
||
|
||
Tailwind CSS 3, compiled by PostCSS into `dist/styles/panel.css`. Utility classes
|
||
carry the exact pixel values from the original design, so arbitrary values
|
||
(`h-[47px]`, `bg-[#2f2f2f]`) are used throughout rather than the default scale.
|
||
|
||
- `tailwind.config.js` — accent color, the rounded font stack, and the `narrow` (max 340px) breakpoint
|
||
- `src/index.css` — Tailwind entry plus base rules for `html`, `body`, and `#root`
|
||
|
||
`src/styles.css` and `src/panels/ImageGenerator.css` are the pre-Tailwind
|
||
originals. Nothing imports them; they are kept as the reference for the
|
||
original pixel values.
|
||
|
||
## Prompt Input
|
||
|
||
The prompt box is a `contentEditable` div. CEF does not reliably receive IME
|
||
composition events, so the button above 词库 opens a native Photoshop
|
||
ScriptUI window for typing Chinese. Text crosses `evalScript` as
|
||
`escape()`-encoded ASCII in both directions.
|
||
|
||
## API Shape
|
||
|
||
The default request is compatible with OpenAI-style image endpoints:
|
||
|
||
```json
|
||
{
|
||
"model": "gpt-image-2",
|
||
"prompt": "your prompt",
|
||
"n": 1,
|
||
"size": "1024x1024",
|
||
"response_format": "b64_json"
|
||
}
|
||
```
|
||
|
||
Accepted response shapes:
|
||
|
||
```json
|
||
{ "data": [{ "b64_json": "..." }] }
|
||
```
|
||
|
||
```json
|
||
{ "data": [{ "url": "https://..." }] }
|
||
```
|
||
|
||
`output` and `images` arrays are also tolerated for gateway variants.
|
||
|
||
## Photoshop Placement
|
||
|
||
Generated images first appear only in the panel's thumbnail list. Clicking a
|
||
thumbnail places it as an embedded smart-object layer with a new layer mask.
|
||
The selection that existed when generation started is saved as a temporary
|
||
alpha channel, so the mask still uses the original selection even if the user
|
||
changes the selection before clicking. Without a selection, the layer gets a
|
||
reveal-all mask.
|
||
|
||
When a selection exists, its merged visible pixels are exported as the first
|
||
reference image. Uploaded reference files follow it. The panel sends these
|
||
images as data URLs in the request body's `images` array.
|
||
|
||
The request size is read from Photoshop: the full canvas dimensions are used
|
||
without a selection, and the selection bounds are used when a selection exists.
|
||
|
||
## Build
|
||
|
||
```bash
|
||
npm install
|
||
npm run build
|
||
```
|
||
|
||
Output goes to `dist`, which is the extension folder itself (`dist/CSXS/manifest.xml`).
|
||
|
||
## Install
|
||
|
||
```bash
|
||
npm run cep:setup
|
||
```
|
||
|
||
This enables `PlayerDebugMode` for CSXS 9–12 and links `dist` into the Adobe
|
||
extensions folder. On Windows it writes to `HKCU\Software\Adobe\CSXS.*` and
|
||
creates a directory junction; on macOS it uses `defaults write` and a symlink.
|
||
|
||
Restart Photoshop, then open the panel from `Plugins`.
|
||
|
||
## Development
|
||
|
||
```bash
|
||
npm run watch
|
||
```
|
||
|
||
Reload the panel from its flyout menu, or open `http://localhost:8088` for
|
||
Chrome DevTools (the port comes from `cep/.debug`).
|