aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx35
-rw-r--r--src/client/views/nodes/DocumentView.tsx1
-rw-r--r--src/client/views/nodes/FieldView.tsx1
-rw-r--r--src/client/views/nodes/ImageBox.scss9
-rw-r--r--src/client/views/nodes/ImageBox.tsx62
-rw-r--r--src/client/views/smartdraw/DrawingFillHandler.tsx2
-rw-r--r--src/server/ApiManagers/FireflyManager.ts35
7 files changed, 65 insertions, 80 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e1144f21a..66e0ba5d9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2194,38 +2194,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
@observable private _regenInput = '';
@observable private _drawingFillInput = '';
- @observable private _canInteract = true;
@observable private _regenLoading = false;
@observable private _drawingFillLoading = false;
@observable private _fireflyRefStrength = 50;
- // _oldDrag: HTMLElement | null = null;
-
- // onPassiveDrag = (e: PointerEvent) => e.stopPropagation();
- // protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
- // // this._dropDisposer?.();
- // this._oldDrag?.removeEventListener('pointerdown', this.onPassiveDrag);
- // this._oldDrag = ele;
- // // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
- // ele?.addEventListener('pointerdown', this.onPassiveDrag, { passive: false });
- // };
-
- componentAIViewHistory = () => {
- return (
- <div className="imageBox-aiView-history">
- {/* {this._prevImgs.map(img => (
- <img
- className="imageBox-aiView-img"
- src={img.href}
- onClick={() => {
- this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
- this.dataDoc.ai_firefly_prompt = img.prompt;
- this.dataDoc.ai_firefly_seed = img.seed;
- }}
- />
- ))} */}
- </div>
- );
- };
componentAIView = () => {
const showRegenerate = this.Document[DocData].ai;
@@ -2241,7 +2212,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
aria-label="Edit instructions input"
type="text"
value={this._regenInput}
- onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+ onChange={action(e => (this._regenInput = e.target.value))}
placeholder="Prompt (Optional)"
/>
<Button
@@ -2264,7 +2235,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
<div className="collectionfreeformview-aiView-options-container">
<text className="collectionfreeformview-aiView-subtitle"> Create Image with Firefly </text>
<div className="collectionfreeformview-aiView-options">
- <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))} />
+ <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => (this._drawingFillInput = e.target.value))} />
<div className="collectionfreeformview-aiView-strength">
<Slider
className="collectionfreeformview-aiView-slider"
@@ -2278,7 +2249,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
step={1}
size="small"
value={this._fireflyRefStrength}
- onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+ onChange={action((e, val) => (this._fireflyRefStrength = val as number))}
valueLabelDisplay="auto"
/>
Reference Strength
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 640d27aa1..44b214644 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -718,6 +718,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
@observable _aiWinHeight = 100;
rpw = () => this._props.PanelWidth() - this._aiWinHeight;
rph = () => this.panelHeight() - this._aiWinHeight;
+
@computed get viewBoxContents() {
TraceMobx();
const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 02d4d9adb..2e40f39ed 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -68,6 +68,7 @@ export interface FieldViewSharedProps {
isGroupActive?: () => string | undefined; // is this document part of a group that is active
// eslint-disable-next-line no-use-before-define
setContentViewBox?: (view: ViewBoxInterface<FieldViewProps>) => void; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox
+
PanelWidth: () => number;
PanelHeight: () => number;
isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 759f2584b..94a497cf0 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -163,6 +163,7 @@
.imageBox-aiView {
text-align: center;
font-weight: bold;
+ width: 100%;
.imageBox-aiView-subtitle {
position: relative;
@@ -179,13 +180,7 @@
.imageBox-aiView-regenerate,
.imageBox-aiView-options {
display: flex;
- flex-direction: row;
- justify-content: center;
- flex-direction: row;
+ margin: auto;
gap: 5px;
}
-
- .imageBox-aiView-input {
- width: 50%;
- }
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8a7fb99b1..3a9086777 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -96,8 +96,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// variables for AI Image Editor
@observable private _regenInput = '';
- @observable private _canInteract = true;
- @observable private _regenerateLoading = false;
+ @observable private _regenLoading = false;
@observable private _prevImgs: FireflyImageData[] = [];
constructor(props: FieldViewProps) {
@@ -535,20 +534,31 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
);
}
+ protected _btnWidth = 50;
+ protected _inputWidth = 50;
+ protected _sideBtnMaxPanelPct = 0.12;
+ @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
+ @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale; } // prettier-ignore
+ @computed get maxWidgetSize() { return Math.min(this._btnWidth * this.contentScaling, (this._props.fitWidth?.(this.Document) && this._props.PanelWidth() > NumCast(this.layoutDoc._width) ? 1 : this._sideBtnMaxPanelPct) * NumCast(this.layoutDoc.width, 1)); } // prettier-ignore
+ @computed get uiBtnScaling() { return this.maxWidgetSize / this._btnWidth; } // prettier-ignore
+ @computed get uiInputScaling() { return this.maxWidgetSize / this._inputWidth; } // prettier-ignore
+
componentAIViewHistory = () => {
const imgs: FireflyImageData[] = this.dataDoc.ai_firefly_history ? JSON.parse(StrCast(this.dataDoc.ai_firefly_history)) : [];
return (
- <div className="imageBox-aiView-history" ref={this.createDashEventsTarget}>
- <Button
- text="Clear History"
- type={Type.SEC}
- style={{ marginTop: '5px' }}
- size={Size.XSMALL}
- onClick={action(() => {
- this._prevImgs = [];
- this.dataDoc.ai_firefly_history = undefined;
- })}
- />
+ <div className="imageBox-aiView-history">
+ {imgs.length >= 2 && (
+ <Button
+ text="Clear History"
+ type={Type.SEC}
+ style={{ marginTop: '5px' }}
+ size={Size.XSMALL}
+ onClick={action(() => {
+ this._prevImgs = [];
+ this.dataDoc.ai_firefly_history = undefined;
+ })}
+ />
+ )}
{imgs.length >= 2 &&
imgs.map(img => (
<div>
@@ -574,26 +584,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const showRegenerate = this.Document[DocData].ai;
return (
<div className="imageBox-aiView">
- Edit Image with AI
+ <text>Edit Image with AI </text>
{showRegenerate && (
<div className="imageBox-aiView-regenerate-container">
<div className="imageBox-aiView-regenerate">
<input
+ style={{ transform: `scale(${this.uiInputScaling})` }}
className="imageBox-aiView-input"
aria-label="Edit instructions input"
type="text"
value={this._regenInput}
- onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+ onChange={action(e => (this._regenInput = e.target.value))}
placeholder="Prompt (Optional)"
/>
<Button
+ style={{ transform: `scale(${this.uiBtnScaling})` }}
text="Regenerate Image"
type={Type.SEC}
- // style={{ alignSelf: 'flex-end' }}
- icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
- iconPlacement="right"
onClick={action(async () => {
- this._regenerateLoading = true;
+ this._regenLoading = true;
SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newImgs => {
if (newImgs[0]) {
const url = newImgs[0].pathname;
@@ -603,20 +612,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.dataDoc[this.fieldKey] = imgField;
this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url });
this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs);
- this._regenerateLoading = false;
+ this._regenLoading = false;
this._regenInput = '';
}
});
})}
/>
- <Button text="Get Variations" type={Type.SEC} iconPlacement="right" />
+ <Button style={{ transform: `scale(${this.uiBtnScaling})` }} text="Get Variations" type={Type.SEC} iconPlacement="right" />
</div>
</div>
)}
<div className="imageBox-aiView-options-container">
- {showRegenerate && <text className="imageBox-aiView-subtitle"> More Options: </text>}
<div className="imageBox-aiView-options">
+ {showRegenerate && (
+ <text className="imageBox-aiView-subtitle" style={{ transform: `scale(${this.uiBtnScaling})` }}>
+ More Options:
+ </text>
+ )}
<Button
+ style={{ transform: `scale(${this.uiBtnScaling})` }}
type={Type.TERT}
text="Get Text"
icon={<FontAwesomeIcon icon="font" />}
@@ -632,11 +646,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}}
/>
<Button
+ style={{ transform: `scale(${this.uiBtnScaling})` }}
type={Type.TERT}
text="Generative Fill"
icon={<FontAwesomeIcon icon="fill" />}
color={SettingsManager.userBackgroundColor}
- // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
onClick={action(() => {
ImageEditorData.Open = true;
@@ -646,11 +660,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
})}
/>
<Button
+ style={{ transform: `scale(${this.uiBtnScaling})` }}
type={Type.TERT}
text="Expand"
icon={<FontAwesomeIcon icon="expand" />}
color={SettingsManager.userBackgroundColor}
- // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
onClick={() => {
Networking.PostToServer('/expandImage', {
diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 57327631a..57e75e86a 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -48,7 +48,7 @@ export class DrawingFillHandler {
.then((hrefBase64: string) => gptDescribeImage(hrefBase64))
.then(prompt => {
Networking.PostToServer('/queryFireflyImageFromStructure',
- { prompt: `${user_prompt}, ${prompt}`, width: dims.width, height: dims.height, structure: structureUrl, strength: strength, presets: styles, styleRef: styleUrl})
+ { prompt: `${user_prompt}, ${prompt}`, width: dims.width, height: dims.height, structure: structureUrl, strength: strength, presets: styles, styleUrl: styleUrl})
.then((info: Upload.ImageInformation) =>
DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client,
{ ai: 'firefly', ai_firefly_prompt: user_prompt || prompt, _width: 500, data_nativeWidth: info.nativeWidth, data_nativeHeight: info.nativeHeight }), OpenWhere.addRight)
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index 185752404..d92db1522 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -20,11 +20,11 @@ export default class FireflyManager extends ApiManager {
return undefined;
});
- generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string) =>
+ generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined) =>
this.getBearerToken().then(response =>
- response?.json().then((data: { access_token: string }) =>
+ response?.json().then((data: { access_token: string }) => {
//prettier-ignore
- fetch('https://firefly-api.adobe.io/v3/images/generate', {
+ return fetch('https://firefly-api.adobe.io/v3/images/generate', {
method: 'POST',
headers: [
['Content-Type', 'application/json'],
@@ -43,12 +43,14 @@ export default class FireflyManager extends ApiManager {
source: { url: structureUrl },
},
},
- //prettier-ignore
- style: {
- imageReference: {
- source: { uploadId: styleUrl }
- },
- presets: styles
+ // prettier-ignore
+ style: {
+ presets: styles,
+ ...(styleUrl && {
+ imageReference: {
+ source: { uploadId: styleUrl },
+ },
+ }),
}
}),
})
@@ -57,7 +59,7 @@ export default class FireflyManager extends ApiManager {
console.error('Error:', error);
return '';
})
- )
+ })
);
uploadImageToDropbox = (fileUrl: string, dbx = new Dropbox({ accessToken: process.env.DROPBOX_TOKEN })) =>
@@ -239,8 +241,8 @@ export default class FireflyManager extends ApiManager {
register({
method: Method.POST,
subscription: '/queryFireflyImageFromStructure',
- secureHandler: async ({ req, res }) =>
- this.uploadImageToDropbox(req.body.styleRef)
+ secureHandler: async ({ req, res }) => {
+ (req.body.styleRef ? this.uploadImageToDropbox(req.body.styleRef) : Promise.resolve(undefined))
.then(styleUrl => {
if (styleUrl instanceof Error) {
_invalid(res, styleUrl.message);
@@ -255,13 +257,14 @@ export default class FireflyManager extends ApiManager {
});
})
.then(uploads =>
- this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, uploads.styleUrl).then(fire =>
+ this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, req.body.styleUrl).then(fire => {
DashUploadUtils.UploadImage(JSON.parse(fire ?? '').url).then(info => {
if (info instanceof Error) _invalid(res, info.message);
else _success(res, info);
- })
- )
- ),
+ });
+ })
+ );
+ },
});
register({
method: Method.POST,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 08:59:54 +0000