初始化 Photoshop AI 编辑面板
This commit is contained in:
hanhan
@@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.debug
|
||||
*.log
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -0,0 +1,107 @@
|
||||
# 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`).
|
||||
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<ExtensionManifest Version="9.0"
|
||||
ExtensionBundleId="com.aiedit.panel"
|
||||
ExtensionBundleName="AI Edit"
|
||||
ExtensionBundleVersion="1.0.0"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
|
||||
<ExtensionList>
|
||||
<Extension Id="com.aiedit.panel.main" Version="1.0.0" />
|
||||
</ExtensionList>
|
||||
<ExecutionEnvironment>
|
||||
<HostList>
|
||||
<Host Name="PHXS" Version="[20.0,99.9]" />
|
||||
<Host Name="PHSP" Version="[20.0,99.9]" />
|
||||
</HostList>
|
||||
<LocaleList>
|
||||
<Locale Code="All" />
|
||||
</LocaleList>
|
||||
<RequiredRuntimeList>
|
||||
<RequiredRuntime Name="CSXS" Version="9.0" />
|
||||
</RequiredRuntimeList>
|
||||
</ExecutionEnvironment>
|
||||
<DispatchInfoList>
|
||||
<Extension Id="com.aiedit.panel.main">
|
||||
<DispatchInfo>
|
||||
<Resources>
|
||||
<MainPath>./index.html</MainPath>
|
||||
<ScriptPath>./host/host.jsx</ScriptPath>
|
||||
<CEFCommandLine>
|
||||
<Parameter>--enable-nodejs</Parameter>
|
||||
<Parameter>--mixed-context</Parameter>
|
||||
</CEFCommandLine>
|
||||
</Resources>
|
||||
<Lifecycle>
|
||||
<AutoVisible>true</AutoVisible>
|
||||
</Lifecycle>
|
||||
<UI>
|
||||
<Type>Panel</Type>
|
||||
<Menu>AI 生图</Menu>
|
||||
<Geometry>
|
||||
<Size>
|
||||
<Height>876</Height>
|
||||
<Width>390</Width>
|
||||
</Size>
|
||||
<MinSize>
|
||||
<Height>420</Height>
|
||||
<Width>300</Width>
|
||||
</MinSize>
|
||||
<MaxSize>
|
||||
<Height>2000</Height>
|
||||
<Width>2000</Width>
|
||||
</MaxSize>
|
||||
</Geometry>
|
||||
<Icons>
|
||||
<Icon Type="Normal">./icons/icon_N.png</Icon>
|
||||
<Icon Type="DarkNormal">./icons/icon_D.png</Icon>
|
||||
</Icons>
|
||||
</UI>
|
||||
</DispatchInfo>
|
||||
</Extension>
|
||||
</DispatchInfoList>
|
||||
</ExtensionManifest>
|
||||
@@ -0,0 +1,281 @@
|
||||
// ExtendScript host for the AI Edit CEP panel.
|
||||
// ASCII only: ExtendScript guesses this file's encoding, so all localized
|
||||
// strings are passed in from the panel instead of written here.
|
||||
|
||||
function aiEditHasDocument() {
|
||||
try {
|
||||
return app.documents.length > 0 ? "yes" : "no";
|
||||
} catch (e) {
|
||||
return "no";
|
||||
}
|
||||
}
|
||||
|
||||
function aiEditShowComposite(doc) {
|
||||
try {
|
||||
doc.activeChannels = doc.componentChannels;
|
||||
} catch (e) {
|
||||
try {
|
||||
doc.activeChannels = [doc.channels[0]];
|
||||
} catch (fallbackError) {}
|
||||
}
|
||||
}
|
||||
|
||||
function aiEditPickImages(title, filter) {
|
||||
try {
|
||||
var picked = File.openDialog(title, filter, true);
|
||||
if (!picked) return "";
|
||||
if (!(picked instanceof Array)) picked = [picked];
|
||||
|
||||
var paths = [];
|
||||
for (var i = 0; i < picked.length; i++) paths.push(picked[i].fsName);
|
||||
return paths.join("\n");
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// A native window is the reliable way to type CJK: the CEF panel does not
|
||||
// always receive IME composition events.
|
||||
function aiEditPromptDialog(title, label, okText, cancelText, initial) {
|
||||
try {
|
||||
var dialog = new Window("dialog", title);
|
||||
dialog.alignChildren = "fill";
|
||||
dialog.margins = 14;
|
||||
dialog.spacing = 10;
|
||||
|
||||
dialog.add("statictext", undefined, label);
|
||||
|
||||
var field = dialog.add("edittext", undefined, initial || "", {
|
||||
multiline: true,
|
||||
wantReturn: true
|
||||
});
|
||||
field.preferredSize = [420, 150];
|
||||
|
||||
var row = dialog.add("group");
|
||||
row.alignment = "right";
|
||||
row.spacing = 8;
|
||||
var cancel = row.add("button", undefined, cancelText, { name: "cancel" });
|
||||
var confirm = row.add("button", undefined, okText, { name: "ok" });
|
||||
|
||||
var text = null;
|
||||
confirm.onClick = function () {
|
||||
text = field.text;
|
||||
dialog.close(1);
|
||||
};
|
||||
cancel.onClick = function () {
|
||||
dialog.close(0);
|
||||
};
|
||||
|
||||
field.active = true;
|
||||
if (dialog.show() !== 1 || text === null) return "cancel";
|
||||
|
||||
// escape() keeps the result ASCII so evalScript can carry it back.
|
||||
return "ok:" + escape(text);
|
||||
} catch (e) {
|
||||
return "cancel";
|
||||
}
|
||||
}
|
||||
|
||||
function aiEditGetGenerationSize() {
|
||||
try {
|
||||
if (app.documents.length === 0) return "";
|
||||
var doc = app.activeDocument;
|
||||
var width = doc.width.as("px");
|
||||
var height = doc.height.as("px");
|
||||
try {
|
||||
var bounds = doc.selection.bounds;
|
||||
width = bounds[2].as("px") - bounds[0].as("px");
|
||||
height = bounds[3].as("px") - bounds[1].as("px");
|
||||
} catch (noSelection) {}
|
||||
return Math.max(1, Math.round(width)) + "x" + Math.max(1, Math.round(height));
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function aiEditCaptureSelection() {
|
||||
var doc = null;
|
||||
var reference = null;
|
||||
try {
|
||||
if (app.documents.length === 0) return "none";
|
||||
doc = app.activeDocument;
|
||||
aiEditShowComposite(doc);
|
||||
|
||||
var bounds;
|
||||
try {
|
||||
bounds = doc.selection.bounds;
|
||||
} catch (selectionError) {
|
||||
return "none";
|
||||
}
|
||||
|
||||
var token = "AI Edit Selection " + new Date().getTime();
|
||||
var channel = doc.channels.add();
|
||||
channel.name = token;
|
||||
doc.selection.store(channel);
|
||||
aiEditShowComposite(doc);
|
||||
|
||||
var width = Math.max(1, Math.round(bounds[2].as("px") - bounds[0].as("px")));
|
||||
var height = Math.max(1, Math.round(bounds[3].as("px") - bounds[1].as("px")));
|
||||
var boundsText = [
|
||||
Math.round(bounds[0].as("px")),
|
||||
Math.round(bounds[1].as("px")),
|
||||
width,
|
||||
height
|
||||
].join(",");
|
||||
|
||||
// Avoid copy/copyMerged: Photoshop reports that command as unavailable
|
||||
// for some active layers and documents. A duplicate keeps the merged
|
||||
// visible pixels and can be cropped without using the clipboard.
|
||||
reference = doc.duplicate("AI Edit Reference", false);
|
||||
reference.flatten();
|
||||
// Do not call selection.clear here. Photoshop rejects that command
|
||||
// when the duplicated document resolves to a locked background layer.
|
||||
// Cropping to the captured bounds keeps the selected image usable as
|
||||
// a reference without changing pixels through the clipboard/delete UI.
|
||||
reference.crop(bounds);
|
||||
|
||||
var file = new File(Folder.temp.fsName + "/ai-edit-selection-" + new Date().getTime() + ".png");
|
||||
var options = new PNGSaveOptions();
|
||||
reference.saveAs(file, options, true, Extension.LOWERCASE);
|
||||
reference.close(SaveOptions.DONOTSAVECHANGES);
|
||||
app.activeDocument = doc;
|
||||
aiEditShowComposite(doc);
|
||||
return "ok:" + token + "|" + file.fsName + "|" + boundsText;
|
||||
} catch (e) {
|
||||
try {
|
||||
if (reference) reference.close(SaveOptions.DONOTSAVECHANGES);
|
||||
if (doc) {
|
||||
app.activeDocument = doc;
|
||||
aiEditShowComposite(doc);
|
||||
}
|
||||
} catch (closeError) {}
|
||||
return "error:" + e.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function aiEditAddLayerMask(hasSelection) {
|
||||
var classicMask = new ActionDescriptor();
|
||||
classicMask.putClass(charIDToTypeID("Nw "), charIDToTypeID("Chnl"));
|
||||
|
||||
var classicTarget = new ActionReference();
|
||||
classicTarget.putEnumerated(
|
||||
charIDToTypeID("Chnl"),
|
||||
charIDToTypeID("Chnl"),
|
||||
charIDToTypeID("Msk ")
|
||||
);
|
||||
classicMask.putReference(charIDToTypeID("At "), classicTarget);
|
||||
classicMask.putEnumerated(
|
||||
charIDToTypeID("Usng"),
|
||||
charIDToTypeID("UsrM"),
|
||||
charIDToTypeID(hasSelection ? "RvlS" : "RvlA")
|
||||
);
|
||||
|
||||
try {
|
||||
executeAction(charIDToTypeID("Mk "), classicMask, DialogModes.NO);
|
||||
return;
|
||||
} catch (classicError) {}
|
||||
|
||||
var modernMask = new ActionDescriptor();
|
||||
var newChannel = new ActionReference();
|
||||
newChannel.putClass(stringIDToTypeID("channel"));
|
||||
modernMask.putReference(charIDToTypeID("null"), newChannel);
|
||||
|
||||
var currentLayer = new ActionReference();
|
||||
currentLayer.putEnumerated(
|
||||
stringIDToTypeID("layer"),
|
||||
stringIDToTypeID("ordinal"),
|
||||
stringIDToTypeID("targetEnum")
|
||||
);
|
||||
modernMask.putReference(charIDToTypeID("At "), currentLayer);
|
||||
modernMask.putEnumerated(
|
||||
stringIDToTypeID("using"),
|
||||
stringIDToTypeID("userMaskEnabled"),
|
||||
stringIDToTypeID(hasSelection ? "revealSelection" : "revealAll")
|
||||
);
|
||||
executeAction(charIDToTypeID("Mk "), modernMask, DialogModes.NO);
|
||||
}
|
||||
|
||||
function aiEditPlaceImage(filePath, layerName, channelName, boundsText) {
|
||||
try {
|
||||
if (app.documents.length === 0) return "error:missing-document";
|
||||
|
||||
var file = new File(filePath);
|
||||
if (!file.exists) return "error:missing-file";
|
||||
|
||||
var doc = app.activeDocument;
|
||||
var selectionChannel = null;
|
||||
var restoreChannel = null;
|
||||
var hadCurrentSelection = false;
|
||||
var hasSelection = false;
|
||||
if (channelName) {
|
||||
try {
|
||||
try {
|
||||
doc.selection.bounds;
|
||||
hadCurrentSelection = true;
|
||||
restoreChannel = doc.channels.add();
|
||||
restoreChannel.name = "AI Edit Restore " + new Date().getTime();
|
||||
doc.selection.store(restoreChannel);
|
||||
} catch (noCurrentSelection) {}
|
||||
|
||||
selectionChannel = doc.channels.getByName(channelName);
|
||||
doc.selection.load(selectionChannel);
|
||||
hasSelection = true;
|
||||
} catch (channelError) {}
|
||||
}
|
||||
|
||||
var place = new ActionDescriptor();
|
||||
place.putPath(charIDToTypeID("null"), file);
|
||||
place.putEnumerated(charIDToTypeID("FTcs"), charIDToTypeID("QCSt"), charIDToTypeID("Qcsa"));
|
||||
|
||||
var offset = new ActionDescriptor();
|
||||
offset.putUnitDouble(charIDToTypeID("Hrzn"), charIDToTypeID("#Pxl"), 0);
|
||||
offset.putUnitDouble(charIDToTypeID("Vrtc"), charIDToTypeID("#Pxl"), 0);
|
||||
place.putObject(charIDToTypeID("Ofst"), charIDToTypeID("Ofst"), offset);
|
||||
|
||||
place.putBoolean(stringIDToTypeID("linked"), false);
|
||||
executeAction(charIDToTypeID("Plc "), place, DialogModes.NO);
|
||||
|
||||
var placedLayer = app.activeDocument.activeLayer;
|
||||
if (layerName) placedLayer.name = layerName;
|
||||
|
||||
if (boundsText) {
|
||||
var boundsValues = boundsText.split(",");
|
||||
if (boundsValues.length === 4) {
|
||||
var targetLeft = Number(boundsValues[0]);
|
||||
var targetTop = Number(boundsValues[1]);
|
||||
var targetWidth = Number(boundsValues[2]);
|
||||
var targetHeight = Number(boundsValues[3]);
|
||||
var placedBounds = placedLayer.bounds;
|
||||
var placedWidth = Math.max(1, placedBounds[2].as("px") - placedBounds[0].as("px"));
|
||||
var placedHeight = Math.max(1, placedBounds[3].as("px") - placedBounds[1].as("px"));
|
||||
placedLayer.resize(
|
||||
targetWidth / placedWidth * 100,
|
||||
targetHeight / placedHeight * 100,
|
||||
AnchorPosition.TOPLEFT
|
||||
);
|
||||
placedBounds = placedLayer.bounds;
|
||||
placedLayer.translate(
|
||||
targetLeft - placedBounds[0].as("px"),
|
||||
targetTop - placedBounds[1].as("px")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
app.activeDocument.activeLayer = placedLayer;
|
||||
aiEditAddLayerMask(hasSelection);
|
||||
|
||||
if (selectionChannel) {
|
||||
if (hadCurrentSelection && restoreChannel) doc.selection.load(restoreChannel);
|
||||
else doc.selection.deselect();
|
||||
if (restoreChannel) restoreChannel.remove();
|
||||
}
|
||||
aiEditShowComposite(doc);
|
||||
|
||||
return "ok";
|
||||
} catch (e) {
|
||||
try {
|
||||
aiEditShowComposite(app.activeDocument);
|
||||
} catch (restoreViewError) {}
|
||||
return "error:" + e.toString();
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 535 B |
Binary file not shown.
|
After Width: | Height: | Size: 995 B |
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles/panel.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
# Direction Approval
|
||||
|
||||
- User instruction: "请不要修改样式，必须严格按照我的设置还原"
|
||||
- Approved source: `C:/Users/Administrator/AppData/Local/Temp/codex-clipboard-fd114ed3-645d-43e5-9cba-821120aa02cf.png`
|
||||
- Decision: Skip design variations and reproduce the supplied two-page UI directly.
|
||||
- Scope: Photoshop UXP panel in `D:/Software/Adobe/uxp/ai-edit`.
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "com.aiedit.panel",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"watch": "nodemon -w src -e js,jsx,json,css,html -w webpack.config.js -w cep -x npm run build",
|
||||
"build": "webpack --mode development",
|
||||
"cep:setup": "node scripts/setup-cep.js"
|
||||
},
|
||||
"author": "Adobe Inc",
|
||||
"license": "Apache-2.0",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.7",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
|
||||
"@babel/plugin-syntax-class-properties": "^7.10.4",
|
||||
"@babel/plugin-transform-react-jsx": "^7.8.3",
|
||||
"autoprefixer": "^10.5.4",
|
||||
"babel-loader": "^8.0.6",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "^6.11.0",
|
||||
"mini-css-extract-plugin": "^2.10.2",
|
||||
"nodemon": "^2.0.7",
|
||||
"postcss": "^8.5.25",
|
||||
"postcss-loader": "^8.2.1",
|
||||
"tailwindcss": "^3.4.19",
|
||||
"webpack": "^5.88.1",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
}
|
||||
}
|
||||
Generated
+3540
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,2 @@
|
||||
allowBuilds:
|
||||
nodemon: true
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
// Enables CEP debug mode and links dist/ into the Adobe extensions folder.
|
||||
// Run once per machine: npm run cep:setup
|
||||
|
||||
const { execFileSync } = require("child_process");
|
||||
const fs = require("fs");
|
||||
const os = require("os");
|
||||
const path = require("path");
|
||||
|
||||
const CSXS_VERSIONS = [9, 10, 11, 12];
|
||||
const EXTENSION_NAME = "com.aiedit.panel";
|
||||
const dist = path.resolve(__dirname, "..", "dist");
|
||||
|
||||
function enableDebugMode() {
|
||||
if (process.platform === "win32") {
|
||||
for (const version of CSXS_VERSIONS) {
|
||||
execFileSync("reg", [
|
||||
"add", `HKCU\\Software\\Adobe\\CSXS.${version}`,
|
||||
"/v", "PlayerDebugMode", "/t", "REG_SZ", "/d", "1", "/f"
|
||||
], { stdio: "ignore" });
|
||||
}
|
||||
} else {
|
||||
for (const version of CSXS_VERSIONS) {
|
||||
execFileSync("defaults", [
|
||||
"write", `com.adobe.CSXS.${version}`, "PlayerDebugMode", "1"
|
||||
], { stdio: "ignore" });
|
||||
}
|
||||
}
|
||||
console.log(`PlayerDebugMode enabled for CSXS ${CSXS_VERSIONS.join(", ")}`);
|
||||
}
|
||||
|
||||
function extensionsFolder() {
|
||||
return process.platform === "win32"
|
||||
? path.join(process.env.APPDATA, "Adobe", "CEP", "extensions")
|
||||
: path.join(os.homedir(), "Library", "Application Support", "Adobe", "CEP", "extensions");
|
||||
}
|
||||
|
||||
function linkExtension() {
|
||||
const root = extensionsFolder();
|
||||
fs.mkdirSync(root, { recursive: true });
|
||||
|
||||
const target = path.join(root, EXTENSION_NAME);
|
||||
const existing = fs.lstatSync(target, { throwIfNoEntry: false });
|
||||
if (existing) {
|
||||
if (!existing.isSymbolicLink()) {
|
||||
console.error(`${target} exists and is not a link. Remove it manually, then rerun.`);
|
||||
process.exit(1);
|
||||
}
|
||||
fs.unlinkSync(target);
|
||||
}
|
||||
|
||||
// Junctions avoid needing administrator rights on Windows.
|
||||
fs.symlinkSync(dist, target, process.platform === "win32" ? "junction" : "dir");
|
||||
console.log(`Linked ${target} -> ${dist}`);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(dist)) {
|
||||
console.error("dist/ not found. Run `npm run build` first.");
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
enableDebugMode();
|
||||
linkExtension();
|
||||
console.log("Restart Photoshop, then open Plugins > AI Edit.");
|
||||
+255
@@ -0,0 +1,255 @@
|
||||
// Bridge between the panel UI and the Photoshop host / Node runtime.
|
||||
|
||||
const HOST_ERRORS = {
|
||||
"missing-file": "临时文件不存在",
|
||||
"missing-document": "请先打开一个 Photoshop 文档"
|
||||
};
|
||||
|
||||
function nodeRequire(id) {
|
||||
const resolver = window.cep_node ? window.cep_node.require : window.require;
|
||||
if (!resolver) throw new Error("Node 运行时不可用，请确认面板启用了 --enable-nodejs");
|
||||
return resolver(id);
|
||||
}
|
||||
|
||||
// evalScript only transports ASCII reliably, and host.jsx is ASCII-only, so any
|
||||
// localized string has to cross the bridge as a \uXXXX escape.
|
||||
function toExtendScriptString(value) {
|
||||
return JSON.stringify(String(value)).replace(
|
||||
/[^\x00-\x7F]/g,
|
||||
(char) => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`
|
||||
);
|
||||
}
|
||||
|
||||
function evalScript(script) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cep = window.__adobe_cep__;
|
||||
if (!cep) {
|
||||
reject(new Error("CEP 环境不可用"));
|
||||
return;
|
||||
}
|
||||
cep.evalScript(script, (result) => {
|
||||
if (result === "EvalScript error.") reject(new Error("ExtendScript 执行失败"));
|
||||
else resolve(result);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function call(fn, ...args) {
|
||||
return evalScript(`${fn}(${args.map(toExtendScriptString).join(", ")})`);
|
||||
}
|
||||
|
||||
export async function hasActiveDocument() {
|
||||
try {
|
||||
return (await evalScript("aiEditHasDocument()")) === "yes";
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getGenerationSize() {
|
||||
const result = await evalScript("aiEditGetGenerationSize()");
|
||||
return result && /^\d+x\d+$/.test(result) ? result : "";
|
||||
}
|
||||
|
||||
export async function captureSelectionReference() {
|
||||
const result = await evalScript("aiEditCaptureSelection()");
|
||||
if (!result || result === "none") return null;
|
||||
if (result.indexOf("error:") === 0) {
|
||||
throw new Error(HOST_ERRORS[result.slice(6)] || result.slice(6));
|
||||
}
|
||||
|
||||
const parts = result.slice(3).split("|");
|
||||
if (parts.length < 3) throw new Error("无法读取 Photoshop 选区");
|
||||
return {
|
||||
channelName: parts[0],
|
||||
filePath: parts[1],
|
||||
bounds: parts[2]
|
||||
};
|
||||
}
|
||||
|
||||
export async function pickReferenceImages() {
|
||||
const result = await call("aiEditPickImages", "选择参考图", "图片:*.png;*.jpg;*.jpeg;*.webp");
|
||||
return result ? result.split("\n").filter(Boolean) : [];
|
||||
}
|
||||
|
||||
// Returns null when the user cancels, so an empty string stays a real answer.
|
||||
export async function openPromptDialog(initial) {
|
||||
const result = await call(
|
||||
"aiEditPromptDialog",
|
||||
"输入提示词",
|
||||
"在此输入描述提示词，支持中文输入法：",
|
||||
"确定",
|
||||
"取消",
|
||||
initial || ""
|
||||
);
|
||||
if (!result || !result.startsWith("ok:")) return null;
|
||||
|
||||
// ExtendScript sends escape()-encoded text; unescape is the only decoder
|
||||
// that understands its %uXXXX form.
|
||||
return unescape(result.slice(3));
|
||||
}
|
||||
|
||||
// Requests go through Node rather than fetch: the panel talks to whatever
|
||||
// endpoint the user configures, and no CORS headers are expected back.
|
||||
function request(url, { method = "GET", headers = {}, body } = {}, redirects = 5) {
|
||||
const { Buffer } = nodeRequire("buffer");
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
let target;
|
||||
try {
|
||||
target = new URL(url);
|
||||
} catch (error) {
|
||||
reject(new Error(`地址无效：${url}`));
|
||||
return;
|
||||
}
|
||||
if (target.protocol !== "http:" && target.protocol !== "https:") {
|
||||
reject(new Error(`不支持的协议：${target.protocol}`));
|
||||
return;
|
||||
}
|
||||
|
||||
const client = nodeRequire(target.protocol === "https:" ? "https" : "http");
|
||||
// Older CEP runtimes ship a Node that cannot take a URL object here.
|
||||
const options = {
|
||||
protocol: target.protocol,
|
||||
hostname: target.hostname,
|
||||
port: target.port || undefined,
|
||||
path: `${target.pathname}${target.search}`,
|
||||
method,
|
||||
headers
|
||||
};
|
||||
|
||||
const req = client.request(options, (res) => {
|
||||
const { statusCode, headers: resHeaders } = res;
|
||||
|
||||
if (statusCode >= 300 && statusCode < 400 && resHeaders.location) {
|
||||
res.resume();
|
||||
if (redirects <= 0) {
|
||||
reject(new Error("重定向次数过多"));
|
||||
return;
|
||||
}
|
||||
const next = new URL(resHeaders.location, target);
|
||||
// Never carry the API key to a host the user did not configure.
|
||||
const nextHeaders = { ...headers };
|
||||
if (next.origin !== target.origin) delete nextHeaders.Authorization;
|
||||
|
||||
request(next.toString(), { method, headers: nextHeaders, body }, redirects - 1)
|
||||
.then(resolve, reject);
|
||||
return;
|
||||
}
|
||||
|
||||
const chunks = [];
|
||||
res.on("data", (chunk) => chunks.push(chunk));
|
||||
res.on("end", () => resolve({ statusCode, buffer: Buffer.concat(chunks) }));
|
||||
});
|
||||
|
||||
req.on("error", (error) => reject(new Error(error.message || "网络请求失败")));
|
||||
if (body) req.write(body);
|
||||
req.end();
|
||||
});
|
||||
}
|
||||
|
||||
export async function postJson(url, { apiKey, body }) {
|
||||
const { Buffer } = nodeRequire("buffer");
|
||||
const payload = JSON.stringify(body);
|
||||
const { statusCode, buffer } = await request(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Content-Length": Buffer.byteLength(payload),
|
||||
Authorization: `Bearer ${apiKey}`
|
||||
},
|
||||
body: payload
|
||||
});
|
||||
return { statusCode, text: buffer.toString("utf8") };
|
||||
}
|
||||
|
||||
export async function postMultipart(url, { apiKey, fields, files }) {
|
||||
const { Buffer } = nodeRequire("buffer");
|
||||
const boundary = `----AIEditBoundary${Date.now().toString(16)}`;
|
||||
const chunks = [];
|
||||
const addText = (value) => chunks.push(Buffer.from(value, "utf8"));
|
||||
|
||||
Object.keys(fields || {}).forEach((name) => {
|
||||
addText(
|
||||
`--${boundary}\r\n` +
|
||||
`Content-Disposition: form-data; name="${name}"\r\n\r\n` +
|
||||
`${String(fields[name])}\r\n`
|
||||
);
|
||||
});
|
||||
|
||||
(files || []).forEach((file) => {
|
||||
const match = String(file.dataUrl).match(/^data:([^;]+);base64,(.*)$/);
|
||||
if (!match) throw new Error("参考图数据格式无效");
|
||||
|
||||
addText(
|
||||
`--${boundary}\r\n` +
|
||||
`Content-Disposition: form-data; name="${file.fieldName}"; filename="${file.fileName}"\r\n` +
|
||||
`Content-Type: ${match[1]}\r\n\r\n`
|
||||
);
|
||||
chunks.push(Buffer.from(match[2], "base64"));
|
||||
addText("\r\n");
|
||||
});
|
||||
|
||||
addText(`--${boundary}--\r\n`);
|
||||
const body = Buffer.concat(chunks);
|
||||
const { statusCode, buffer } = await request(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": `multipart/form-data; boundary=${boundary}`,
|
||||
"Content-Length": body.length,
|
||||
Authorization: `Bearer ${apiKey}`
|
||||
},
|
||||
body
|
||||
});
|
||||
return { statusCode, text: buffer.toString("utf8") };
|
||||
}
|
||||
|
||||
export async function downloadImage(url) {
|
||||
const { statusCode, buffer } = await request(url);
|
||||
if (statusCode < 200 || statusCode >= 300) throw new Error(`图片下载失败：${statusCode}`);
|
||||
return buffer;
|
||||
}
|
||||
|
||||
export function fileName(filePath) {
|
||||
return String(filePath).split(/[\\/]/).pop();
|
||||
}
|
||||
|
||||
export function writeTempImage(buffer, index) {
|
||||
const fs = nodeRequire("fs");
|
||||
const os = nodeRequire("os");
|
||||
const path = nodeRequire("path");
|
||||
const { Buffer } = nodeRequire("buffer");
|
||||
|
||||
const folder = path.join(os.tmpdir(), "ai-edit");
|
||||
if (!fs.existsSync(folder)) fs.mkdirSync(folder, { recursive: true });
|
||||
|
||||
const target = path.join(folder, `ai-edit-${Date.now()}-${index}.png`);
|
||||
fs.writeFileSync(target, Buffer.from(buffer));
|
||||
return target;
|
||||
}
|
||||
|
||||
export function readFileAsDataUrl(filePath) {
|
||||
const fs = nodeRequire("fs");
|
||||
const buffer = fs.readFileSync(filePath);
|
||||
const extension = String(filePath).split(".").pop().toLowerCase();
|
||||
const mime = {
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
webp: "image/webp"
|
||||
}[extension] || "image/png";
|
||||
return `data:${mime};base64,${buffer.toString("base64")}`;
|
||||
}
|
||||
|
||||
export async function placeImageFile(filePath, layerName, channelName, bounds) {
|
||||
const result = await call(
|
||||
"aiEditPlaceImage",
|
||||
filePath,
|
||||
layerName,
|
||||
channelName || "",
|
||||
bounds || ""
|
||||
);
|
||||
if (result === "ok") return;
|
||||
|
||||
const detail = String(result || "").replace(/^error:/, "");
|
||||
throw new Error(HOST_ERRORS[detail] || detail || "图片置入失败");
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Element-level styles Tailwind classes cannot reach (html/body/#root). */
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@apply h-full w-full min-w-0 overflow-hidden bg-[#202124] p-0;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply m-0 text-[12px] text-[#f2f3f5];
|
||||
}
|
||||
|
||||
#root {
|
||||
@apply h-full w-full;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible,
|
||||
[contenteditable]:focus-visible {
|
||||
@apply outline outline-2 outline-offset-1 outline-[#6ba5ff];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
全局隐藏滚动条（保留滚动能力）
|
||||
CEP / Chromium
|
||||
=================================== */
|
||||
|
||||
/* Chrome / Chromium */
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
/* IE / Edge旧版 */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./index.css";
|
||||
import { ImageGenerator } from "./panels/ImageGenerator.jsx";
|
||||
|
||||
ReactDOM.render(<ImageGenerator />, document.getElementById("root"));
|
||||
@@ -0,0 +1,564 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
downloadImage,
|
||||
captureSelectionReference,
|
||||
fileName,
|
||||
getGenerationSize,
|
||||
hasActiveDocument,
|
||||
openPromptDialog,
|
||||
pickReferenceImages,
|
||||
placeImageFile,
|
||||
postMultipart,
|
||||
postJson,
|
||||
readFileAsDataUrl,
|
||||
writeTempImage,
|
||||
} from "../cep.js";
|
||||
|
||||
const SETTINGS_KEY = "ai-edit.settings.v3";
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
endpoint: "",
|
||||
apiKey: "",
|
||||
model: "gpt-image-2",
|
||||
size: "1024x1024",
|
||||
quality: "low",
|
||||
background: "auto",
|
||||
count: 1,
|
||||
taskMode: "default",
|
||||
};
|
||||
|
||||
const MODEL_OPTIONS = [
|
||||
"gpt-image-2",
|
||||
"gpt-image-1",
|
||||
"gpt-image-1.5",
|
||||
"gemini-3.1-flash-lite-image",
|
||||
].map((model) => ({ label: model, value: model }));
|
||||
const QUALITY_OPTIONS = [
|
||||
{ label: "1K", value: "low" },
|
||||
{ label: "2K", value: "medium" },
|
||||
{ label: "3K", value: "high" },
|
||||
];
|
||||
const ICON_PATHS = {
|
||||
help: [
|
||||
"M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4",
|
||||
"M12 18h.01",
|
||||
"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z",
|
||||
],
|
||||
settings: [
|
||||
"M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z",
|
||||
"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34A1.7 1.7 0 0 0 14 20.92V21h-4v-.08A1.7 1.7 0 0 0 9 19.36a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.63 15 1.7 1.7 0 0 0 3.08 14H3v-4h.08A1.7 1.7 0 0 0 4.64 9a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.63 1.7 1.7 0 0 0 10 3.08V3h4v.08A1.7 1.7 0 0 0 15 4.64a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.37 9 1.7 1.7 0 0 0 20.92 10H21v4h-.08A1.7 1.7 0 0 0 19.4 15Z",
|
||||
],
|
||||
refresh: [
|
||||
"M20 7v5h-5",
|
||||
"M4 17v-5h5",
|
||||
"M6.1 9a7 7 0 0 1 11.6-2.6L20 9",
|
||||
"M4 15l2.3 2.6A7 7 0 0 0 18 15",
|
||||
],
|
||||
expand: ["M8 3H3v5", "M16 3h5v5", "M8 21H3v-5", "M16 21h5v-5"],
|
||||
upload: [
|
||||
"M12 16V5",
|
||||
"m7.5 9.5 4.5-4.5 4.5 4.5",
|
||||
"M20 16.5a4.5 4.5 0 0 1-4.5 4.5h-8A4.5 4.5 0 0 1 7 12.03 6 6 0 0 1 18.55 10 3.5 3.5 0 0 1 20 16.5Z",
|
||||
],
|
||||
};
|
||||
|
||||
const SELECT_CLASS = "block w-full min-w-0 flex-auto";
|
||||
const SELECT_FIELD =
|
||||
"h-[33px] w-full appearance-none rounded-[6px] border-0 bg-[#2f2f2f] pl-[10px] pr-[34px] text-[13px] font-semibold text-[#f4f4f4] hover:bg-[#3a3a3a]";
|
||||
const MINI_HELP =
|
||||
"ml-[3px] inline-flex h-[13px] w-[13px] items-center justify-center rounded-full border border-white text-[9px] font-bold leading-[13px] text-white";
|
||||
const GROUP_LABEL =
|
||||
"flex h-[20px] items-center text-[12px] font-bold text-[#eeeeee]";
|
||||
const PRIMARY_BUTTON =
|
||||
"flex h-[28px] w-full items-center justify-center rounded-[5px] border-0 bg-accent px-[10px] text-[12px] font-bold text-white hover:bg-[#3d88fa]";
|
||||
const TOOL_BUTTON =
|
||||
"flex w-[34px] cursor-pointer flex-col items-center justify-center border border-[#6e6e6e] bg-[#3d3d3d] p-0 text-[#ededed] hover:bg-[#474747]";
|
||||
|
||||
const Icon = ({ name, size = 18, stroke = "#f4f4f4" }) => (
|
||||
<svg
|
||||
className="pointer-events-none block flex-none"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke={stroke}
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{ICON_PATHS[name].map((path, index) => (
|
||||
<path d={path} key={`${name}-${index}`} />
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
|
||||
function loadSettings() {
|
||||
try {
|
||||
const saved = localStorage.getItem(SETTINGS_KEY);
|
||||
return saved
|
||||
? { ...DEFAULT_SETTINGS, ...JSON.parse(saved) }
|
||||
: DEFAULT_SETTINGS;
|
||||
} catch (error) {
|
||||
return DEFAULT_SETTINGS;
|
||||
}
|
||||
}
|
||||
|
||||
function cleanEndpoint(endpoint, operation = "generations") {
|
||||
const trimmed = endpoint.trim();
|
||||
if (!trimmed) return "";
|
||||
const suffix = `/images/${operation}`;
|
||||
if (trimmed.endsWith("/images/generations"))
|
||||
return trimmed.replace(/\/images\/generations$/, suffix);
|
||||
if (trimmed.endsWith("/images/edits"))
|
||||
return trimmed.replace(/\/images\/edits$/, suffix);
|
||||
return `${trimmed.replace(/\/$/, "")}${suffix}`;
|
||||
}
|
||||
|
||||
function extractImagePayload(result) {
|
||||
const candidates = [];
|
||||
if (Array.isArray(result && result.data)) candidates.push(...result.data);
|
||||
if (Array.isArray(result && result.output)) candidates.push(...result.output);
|
||||
if (Array.isArray(result && result.images)) candidates.push(...result.images);
|
||||
|
||||
return candidates
|
||||
.map((item) => {
|
||||
if (!item) return null;
|
||||
if (item.b64_json) return { type: "base64", value: item.b64_json };
|
||||
if (item.image) return { type: "base64", value: item.image };
|
||||
if (item.url) return { type: "url", value: item.url };
|
||||
if (typeof item === "string" && item.startsWith("http"))
|
||||
return { type: "url", value: item };
|
||||
if (typeof item === "string") return { type: "base64", value: item };
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function base64ToArrayBuffer(base64) {
|
||||
const binary = atob(base64.replace(/^data:image\/\w+;base64,/, ""));
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let index = 0; index < binary.length; index += 1)
|
||||
bytes[index] = binary.charCodeAt(index);
|
||||
return bytes.buffer;
|
||||
}
|
||||
|
||||
async function payloadToBuffer(payload) {
|
||||
if (payload.type === "url") return downloadImage(payload.value);
|
||||
return base64ToArrayBuffer(payload.value);
|
||||
}
|
||||
|
||||
function payloadToSrc(payload) {
|
||||
if (payload.type === "url") return payload.value;
|
||||
if (payload.value.startsWith("data:")) return payload.value;
|
||||
return `data:image/png;base64,${payload.value}`;
|
||||
}
|
||||
|
||||
function SegmentedControl({ options, value, onChange }) {
|
||||
return (
|
||||
<div className="flex h-[27px] overflow-hidden rounded-[5px] bg-[#2f2f2f]">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
className={`h-[27px] min-w-0 flex-1 rounded-none border-0 px-[4px] text-[12px] font-semibold ${
|
||||
value === option.value
|
||||
? "bg-[#1688f7] text-white"
|
||||
: "bg-transparent text-[#c5c5c5]"
|
||||
}`}
|
||||
onClick={() => onChange(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const ImageGenerator = () => {
|
||||
const [settings, setSettings] = useState(loadSettings);
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [isBusy, setIsBusy] = useState(false);
|
||||
const [referenceFiles, setReferenceFiles] = useState([]);
|
||||
const [activeView, setActiveView] = useState("generate");
|
||||
const [isPromptFocused, setIsPromptFocused] = useState(false);
|
||||
const [results, setResults] = useState([]);
|
||||
const editorRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
|
||||
}, [settings]);
|
||||
|
||||
const updateSetting = (key, value) =>
|
||||
setSettings((current) => ({ ...current, [key]: value }));
|
||||
const canGenerate = useMemo(
|
||||
() =>
|
||||
Boolean(settings.endpoint && settings.apiKey && prompt.trim() && !isBusy),
|
||||
[settings, prompt, isBusy],
|
||||
);
|
||||
|
||||
// The editor is contentEditable, so the dialog result has to be written in directly.
|
||||
const editPromptInPhotoshop = async () => {
|
||||
const text = await openPromptDialog(prompt);
|
||||
if (text === null) return;
|
||||
setPrompt(text);
|
||||
if (editorRef.current) editorRef.current.textContent = text;
|
||||
};
|
||||
|
||||
const chooseReferenceImages = async () => {
|
||||
try {
|
||||
const selected = await pickReferenceImages();
|
||||
setReferenceFiles(selected);
|
||||
setStatus(selected.length ? `已选择 ${selected.length} 张参考图` : "");
|
||||
} catch (error) {
|
||||
setStatus("");
|
||||
}
|
||||
};
|
||||
|
||||
const generate = async () => {
|
||||
if (!canGenerate) {
|
||||
setStatus(
|
||||
settings.endpoint && settings.apiKey
|
||||
? "请输入描述提示词"
|
||||
: "请先在设置中填写 API 地址和 API Key",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsBusy(true);
|
||||
setStatus("正在生成...");
|
||||
try {
|
||||
const selectionReference = await captureSelectionReference();
|
||||
const isEdit = Boolean(selectionReference);
|
||||
const generationSize = await getGenerationSize();
|
||||
if (isEdit) setStatus("正在编辑选区...");
|
||||
const referenceImages = selectionReference
|
||||
? [selectionReference.filePath, ...referenceFiles].map(readFileAsDataUrl)
|
||||
: referenceFiles.map(readFileAsDataUrl);
|
||||
const requestFields = {
|
||||
model: settings.model.trim(),
|
||||
prompt: prompt.trim(),
|
||||
n: Number(settings.count) || 1,
|
||||
size: generationSize || settings.size,
|
||||
quality: settings.quality,
|
||||
response_format: "b64_json",
|
||||
...(settings.background !== "auto"
|
||||
? { background: settings.background }
|
||||
: {}),
|
||||
};
|
||||
const requestResult = isEdit
|
||||
? await postMultipart(
|
||||
cleanEndpoint(settings.endpoint, "edits"),
|
||||
{
|
||||
apiKey: settings.apiKey.trim(),
|
||||
fields: requestFields,
|
||||
files: referenceImages.map((dataUrl, index) => ({
|
||||
fieldName: referenceImages.length === 1 ? "image" : "image[]",
|
||||
fileName: `ai-edit-reference-${index + 1}.png`,
|
||||
dataUrl,
|
||||
})),
|
||||
},
|
||||
)
|
||||
: await postJson(cleanEndpoint(settings.endpoint, "generations"), {
|
||||
apiKey: settings.apiKey.trim(),
|
||||
body: {
|
||||
...requestFields,
|
||||
...(referenceImages.length
|
||||
? { images: referenceImages, image: referenceImages[0] }
|
||||
: {}),
|
||||
},
|
||||
});
|
||||
const { statusCode, text: resultText } = requestResult;
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = JSON.parse(resultText);
|
||||
} catch (error) {
|
||||
throw new Error(resultText || "接口返回不是 JSON");
|
||||
}
|
||||
if (statusCode < 200 || statusCode >= 300)
|
||||
throw new Error(
|
||||
(result.error && (result.error.message || result.error.code)) ||
|
||||
`接口请求失败：${statusCode}`,
|
||||
);
|
||||
|
||||
const payloads = extractImagePayload(result);
|
||||
if (!payloads.length) throw new Error("接口响应里没有找到图片数据");
|
||||
|
||||
setResults((current) =>
|
||||
[
|
||||
...payloads.map((payload) => ({
|
||||
src: payloadToSrc(payload),
|
||||
channelName: selectionReference && selectionReference.channelName,
|
||||
bounds: selectionReference && selectionReference.bounds,
|
||||
})),
|
||||
...current,
|
||||
].slice(0, 12),
|
||||
);
|
||||
setStatus(`完成：已生成 ${payloads.length} 张，请点击缩略图置入`);
|
||||
} catch (error) {
|
||||
setStatus(error.message || String(error));
|
||||
} finally {
|
||||
setIsBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const placeResult = async (result, index) => {
|
||||
if (!(await hasActiveDocument())) {
|
||||
setStatus("请先在 Photoshop 中打开一个文档");
|
||||
return;
|
||||
}
|
||||
setStatus("正在置入...");
|
||||
try {
|
||||
const payload = result.src.startsWith("http")
|
||||
? { type: "url", value: result.src }
|
||||
: { type: "base64", value: result.src };
|
||||
const buffer = await payloadToBuffer(payload);
|
||||
const file = await writeTempImage(buffer, index + 1);
|
||||
await placeImageFile(
|
||||
file,
|
||||
`AI 生图 - ${index + 1}`,
|
||||
result.channelName,
|
||||
result.bounds,
|
||||
);
|
||||
setStatus("已置入当前文档");
|
||||
} catch (error) {
|
||||
setStatus(error.message || String(error));
|
||||
}
|
||||
};
|
||||
|
||||
const saveSettings = () => {
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
|
||||
setStatus("设置已保存");
|
||||
setActiveView("generate");
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="relative h-screen min-h-[520px] w-full min-w-[300px] overflow-y-auto overflow-x-hidden bg-[#4a4a4a] px-[19px] pb-[28px] pt-[15px] text-[#eeeeee] narrow:px-[14px]">
|
||||
<header className="flex h-[47px] items-start justify-between">
|
||||
<div className="flex items-center pt-[1px] text-white">
|
||||
<span
|
||||
className="relative mr-[8px] block h-[17px] w-[17px] rounded-t-[9px] rounded-b-[3px] border-2 border-b-0 border-white before:absolute before:bottom-[-2px] before:left-[-4px] before:right-[-4px] before:h-[2px] before:rounded-[2px] before:bg-white before:content-[''] after:absolute after:bottom-[-6px] after:left-[5px] after:h-[3px] after:w-[5px] after:rounded-b-[4px] after:bg-white after:content-['']"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<strong className="text-[14px] font-bold leading-[25px]">
|
||||
AI-Edite
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex items-center pt-[6px]">
|
||||
<div
|
||||
className="ml-[7px] flex h-[24px] w-[26px] cursor-pointer items-center justify-center rounded-[4px] bg-transparent text-[#f4f4f4] hover:bg-white/10"
|
||||
title="帮助"
|
||||
onClick={() => setStatus("请先配置 API，再输入提示词生成图片")}
|
||||
>
|
||||
<Icon name="help" size={17} />
|
||||
</div>
|
||||
<div
|
||||
className="ml-[7px] flex h-[24px] w-[26px] cursor-pointer items-center justify-center rounded-[4px] bg-transparent text-[#f4f4f4] hover:bg-white/10"
|
||||
title="设置"
|
||||
onClick={() =>
|
||||
setActiveView(activeView === "settings" ? "generate" : "settings")
|
||||
}
|
||||
>
|
||||
<Icon name="settings" size={17} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === "settings" ? (
|
||||
<section className="w-full pt-[5px]">
|
||||
<label className="mb-[16px] block">
|
||||
<span className="flex h-[24px] items-center text-[13px] text-[#eeeeee]">
|
||||
API地址
|
||||
</span>
|
||||
<input
|
||||
className="h-[34px] w-full rounded-[6px] border-0 bg-[#2f2f2f] px-[10px] text-[12px] text-[#eeeeee] placeholder:text-[#898989]"
|
||||
value={settings.endpoint}
|
||||
onChange={(event) =>
|
||||
updateSetting("endpoint", event.target.value)
|
||||
}
|
||||
placeholder="请输入API地址"
|
||||
/>
|
||||
</label>
|
||||
<label className="mb-[16px] block">
|
||||
<span className="flex h-[24px] items-center text-[13px] text-[#eeeeee]">
|
||||
API Key
|
||||
</span>
|
||||
<input
|
||||
className="h-[34px] w-full rounded-[6px] border-0 bg-[#2f2f2f] px-[10px] text-[12px] text-[#eeeeee] placeholder:text-[#898989]"
|
||||
type="password"
|
||||
value={settings.apiKey}
|
||||
onChange={(event) => updateSetting("apiKey", event.target.value)}
|
||||
placeholder="请输入API-Key"
|
||||
/>
|
||||
</label>
|
||||
<label className="mb-[16px] block">
|
||||
<span className="flex h-[24px] items-center text-[13px] text-[#eeeeee]">
|
||||
模型
|
||||
</span>
|
||||
<span className="relative block w-full">
|
||||
<select
|
||||
className="h-[34px] w-full appearance-none rounded-[6px] border-0 bg-[#2f2f2f] px-[10px] text-[12px] text-[#eeeeee]"
|
||||
value={settings.model}
|
||||
onChange={(event) => updateSetting("model", event.target.value)}
|
||||
>
|
||||
{MODEL_OPTIONS.map((model) => (
|
||||
<option key={model.value} value={model.value}>
|
||||
{model.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
className={`${PRIMARY_BUTTON} mt-[22px]`}
|
||||
onClick={saveSettings}
|
||||
>
|
||||
保存设置
|
||||
</button>
|
||||
</section>
|
||||
) : (
|
||||
<section className="w-full">
|
||||
<div className="mx-[2px] mb-[10px] flex h-[36px] items-center">
|
||||
<span className="flex-[0_0_39px] text-[13px] font-bold">模型</span>
|
||||
<span className={`relative ${SELECT_CLASS}`}>
|
||||
<select
|
||||
className={SELECT_FIELD}
|
||||
value={settings.model}
|
||||
onChange={(event) => updateSetting("model", event.target.value)}
|
||||
>
|
||||
{MODEL_OPTIONS.map((model) => (
|
||||
<option key={model.value} value={model.value}>
|
||||
{model.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</span>
|
||||
<div
|
||||
className="ml-[9px] flex h-[33px] flex-[0_0_41px] cursor-pointer items-center justify-center rounded-[5px] border-0 bg-[#2f2f2f] p-0 text-white hover:bg-[#3a3a3a]"
|
||||
title="刷新模型"
|
||||
onClick={() => setStatus("模型列表已刷新")}
|
||||
>
|
||||
<Icon name="refresh" size={17} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="relative mb-[17px] h-[116px] overflow-y-auto rounded-[5px] bg-[#2f2f2f] p-[5px]"
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
onInput={(event) =>
|
||||
setPrompt(event.currentTarget.textContent || "")
|
||||
}
|
||||
onFocus={() => setIsPromptFocused(true)}
|
||||
onBlur={() => setIsPromptFocused(false)}
|
||||
suppressContentEditableWarning
|
||||
>
|
||||
{!prompt && !isPromptFocused && (
|
||||
<span className="pointer-events-none absolute left-[9px] top-[8px] text-[13px] font-semibold leading-[18px] text-[#a8a8a8]">
|
||||
描述提示词...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mb-[13px] flex h-[135px] w-full cursor-pointer flex-col items-center justify-center rounded-[5px] border-0 bg-[#2f2f2f] p-[12px] text-center text-[#e7e7e7] hover:bg-[#3a3a3a]"
|
||||
onClick={chooseReferenceImages}
|
||||
>
|
||||
<div className="mb-[10px] flex h-[30px] w-full items-center justify-center">
|
||||
<Icon name="upload" size={30} stroke="#b0b0b0" />
|
||||
</div>
|
||||
<div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-[13px] font-bold leading-[19px] text-[#ececec]">
|
||||
{referenceFiles.length
|
||||
? `已上传 ${referenceFiles.length} 张参考图`
|
||||
: "点击或者拖拽上传参考图"}
|
||||
</div>
|
||||
<div className="mt-[8px] w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-[10px] leading-[14px] text-[#b6b6b6]">
|
||||
{referenceFiles.length
|
||||
? referenceFiles.map(fileName).join("、")
|
||||
: "(画布选区为图1，上传图依次为图2、图3...)"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-[4px] -mr-[15px] flex flex-wrap narrow:-mr-[9px]">
|
||||
<div className="flex flex-col mb-[9px] mr-[15px] min-w-0 flex-[0_0_calc(50%_-_15px)] narrow:mr-[9px] narrow:flex-[0_0_calc(50%_-_9px)] gap-[5px]">
|
||||
<span className={GROUP_LABEL}>数量</span>
|
||||
<SegmentedControl
|
||||
value={settings.count}
|
||||
onChange={(value) => updateSetting("count", value)}
|
||||
options={[
|
||||
{ label: "1张", value: 1 },
|
||||
{ label: "2张", value: 2 },
|
||||
{ label: "3张", value: 3 },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col mb-[9px] mr-[15px] min-w-0 flex-[0_0_calc(50%_-_15px)] narrow:mr-[9px] narrow:flex-[0_0_calc(50%_-_9px)] gap-[5px]">
|
||||
<span className={GROUP_LABEL}>画质</span>
|
||||
<SegmentedControl
|
||||
value={settings.quality}
|
||||
onChange={(value) => updateSetting("quality", value)}
|
||||
options={QUALITY_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col mb-[9px] mr-[15px] min-w-0 flex-[0_0_calc(50%_-_15px)] narrow:mr-[9px] narrow:flex-[0_0_calc(50%_-_9px)] gap-[5px]">
|
||||
<span className={GROUP_LABEL}>背景</span>
|
||||
<SegmentedControl
|
||||
value={settings.background}
|
||||
onChange={(value) => updateSetting("background", value)}
|
||||
options={[
|
||||
{ label: "默认", value: "auto" },
|
||||
{ label: "透明底", value: "transparent" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col mb-[9px] mr-[15px] min-w-0 flex-[0_0_calc(50%_-_15px)] narrow:mr-[9px] narrow:flex-[0_0_calc(50%_-_9px)] gap-[5px]">
|
||||
<span className={GROUP_LABEL}>
|
||||
生图模式 <span className={MINI_HELP}>?</span>
|
||||
</span>
|
||||
<SegmentedControl
|
||||
value={settings.taskMode}
|
||||
onChange={(value) => updateSetting("taskMode", value)}
|
||||
options={[
|
||||
{ label: "默认", value: "default" },
|
||||
{ label: "多任务", value: "multi" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className={PRIMARY_BUTTON} onClick={generate}>
|
||||
{isBusy ? "生成中..." : "立即生成"}
|
||||
</button>
|
||||
|
||||
{results.length > 0 && (
|
||||
<div className="-mr-[6px] mt-[14px] flex flex-wrap">
|
||||
{results.map((result, index) => (
|
||||
<button
|
||||
className="mb-[6px] mr-[6px] block h-[84px] min-w-0 flex-[0_0_calc(25%_-_6px)] overflow-hidden rounded-[3px] border-0 bg-[#2f2f2f] p-0"
|
||||
key={`${index}-${result.src.slice(-16)}`}
|
||||
title="点击置入当前文档"
|
||||
onClick={() => placeResult(result, index)}
|
||||
>
|
||||
<img
|
||||
className="block h-full w-full object-cover"
|
||||
src={result.src}
|
||||
alt={`生成结果 ${index + 1}`}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="mt-[7px] min-h-[14px] overflow-hidden text-ellipsis whitespace-nowrap text-center text-[9px] leading-[14px] text-[#e1e1e1]"
|
||||
aria-live="polite"
|
||||
>
|
||||
{status}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
accent: "#2f7cf6"
|
||||
},
|
||||
fontFamily: {
|
||||
// Rounded stack: first installed font wins, falling back to the
|
||||
// locally available Maple Mono NF CN for Chinese.
|
||||
sans: [
|
||||
"MiSans", "HarmonyOS Sans SC", "Nunito", "Quicksand", "Varela Round",
|
||||
"Maple Mono NF CN", "Microsoft YaHei UI", "Microsoft YaHei"
|
||||
]
|
||||
},
|
||||
screens: {
|
||||
narrow: { max: "340px" }
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
const path = require("path");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.jsx',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'index.js'
|
||||
},
|
||||
target: 'web',
|
||||
devtool: 'eval-cheap-source-map',
|
||||
resolve: {
|
||||
extensions: [".js", ".jsx"]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
plugins: [
|
||||
"@babel/transform-react-jsx",
|
||||
"@babel/proposal-object-rest-spread",
|
||||
"@babel/plugin-syntax-class-properties",
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({ filename: 'styles/panel.css' }),
|
||||
new CopyPlugin([
|
||||
'cep'
|
||||
], {
|
||||
copyUnmodified: true
|
||||
})
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user