aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/TagsView.scss20
-rw-r--r--src/client/views/TagsView.tsx18
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss27
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx78
-rw-r--r--src/client/views/nodes/DocumentView.scss7
-rw-r--r--src/client/views/nodes/DocumentView.tsx76
-rw-r--r--src/client/views/nodes/ImageBox.scss42
-rw-r--r--src/client/views/nodes/ImageBox.tsx180
8 files changed, 264 insertions, 184 deletions
diff --git a/src/client/views/TagsView.scss b/src/client/views/TagsView.scss
index b741e7bfd..303a08e1e 100644
--- a/src/client/views/TagsView.scss
+++ b/src/client/views/TagsView.scss
@@ -4,13 +4,19 @@
flex-direction: column;
border: 1px solid;
border-radius: 4px;
-}
-
-.tagsView-list {
- display: flex;
- flex-wrap: wrap;
- .iconButton-container {
- min-height: unset !important;
+ width: 100%;
+ position: relative;
+ .tagsView-content {
+ width: 100%;
+ height: inherit;
+ .tagsView-list {
+ display: flex;
+ flex-wrap: wrap;
+ height: inherit;
+ .iconButton-container {
+ min-height: unset !important;
+ }
+ }
}
}
diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx
index 0edd89204..73f404596 100644
--- a/src/client/views/TagsView.tsx
+++ b/src/client/views/TagsView.tsx
@@ -295,15 +295,6 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
return this._props.Views.lastElement();
}
- // x: 1 => 1/vs 0 => 1 1/(vs - (1-x)*(vs-1))
- @computed get currentScale() {
- if (this._props.Views.length > 1) return 1;
- const x = NumCast(this.View.Document.height) / this.View.screenToContentsTransform().Scale / 80;
- const xscale = x >= 1 ? 0 : 1 / (1 + x * (this.View.screenToLocalScale() - 1)); //docheight / this.View.screenToContentsTransform().Scale / 35 / this.View.screenToLocalScale() - ;
- const y = NumCast(this.View.Document.width) / this.View.screenToContentsTransform().Scale / 200;
- const yscale = y >= 1 ? 0 : 1 / (1 + y * (this.View.screenToLocalScale() - 1)); //docheight / this.View.screenToContentsTransform().Scale / 35 / this.View.screenToLocalScale() - ;
- return Math.max(xscale, yscale, 1 / this.View.screenToLocalScale());
- }
@computed get isEditing() {
return this._isEditing && (this._props.Views.length > 1 || (DocumentView.Selected().length === 1 && DocumentView.Selected().includes(this.View)));
}
@@ -359,16 +350,11 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
ref={r => r && new ResizeObserver(action(() => this._props.Views.length === 1 && (this.View.TagPanelHeight = Math.max(0, (r?.getBoundingClientRect().height ?? 0) - this.InsetDist)))).observe(r)}
style={{
display: SnappingManager.IsResizing === this.View.Document[Id] ? 'none' : undefined,
- transformOrigin: 'top left',
- maxWidth: `${100 * this.currentScale}%`,
- width: `${100 * this.currentScale}%`,
- transform: `scale(${1 / this.currentScale})`,
backgroundColor: this.isEditing ? Colors.LIGHT_GRAY : Colors.TRANSPARENT,
borderColor: this.isEditing ? Colors.BLACK : Colors.TRANSPARENT,
- position: 'relative',
- top: this._props.Views.lastElement()._showAIEditor ? undefined : this._props.Views.length > 1 ? 25 : `calc(-${this.InsetDist} * ${1 / this.currentScale}px)`,
+ height: !this._props.Views.lastElement()?.isSelected() ? 0 : undefined,
}}>
- <div className="tagsView-content" style={{ width: '100%' }}>
+ <div className="tagsView-content">
<div className="tagsView-list">
{this._props.Views.length === 1 && !this.View.showTags ? null : ( //
<IconButton
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 6dabcb8b2..46bd37f6d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -312,14 +312,28 @@
.collectionfreeformview-aiView-prompt {
height: 25px;
- width: 100%;
+ width: 65%;
}
.collectionFreeFormView-aiView-strength {
text-align: center;
align-items: center;
display: flex;
- width: 150px;
+ width: 25%;
+ .collectionFreeFormView-aiView-similarity {
+ max-width: 65px;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .collectionFreeForView-aiView-send {
+ width: 10%;
+ .button-container {
+ width: 100% !important;
+ justify-content: left !important;
+ }
}
.collectionFreeformView-aiView-options-container,
@@ -341,5 +355,14 @@
align-items: center;
width: 100%;
gap: 10px;
+ .collectionFreeformView-aiView-input {
+ width: 100%;
+ }
+ .collectionFreeFormView-aiView-regenBtn {
+ width: 10%;
+ .button-container {
+ width: 100% !important;
+ }
+ }
}
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index eeb97bf15..796949378 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2209,10 +2209,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
type="text"
value={this._drawingFillInput}
- onChange={action(e => {this._drawingFillInput = e.target.value})}
+ onChange={action(e => {
+ this._drawingFillInput = e.target.value;
+ })}
/>
- <div className="collectionfreeformview-aiView-strength">
- Similarity
+ <div className="collectionFreeFormView-aiView-strength">
+ <span className="collectionFreeFormView-aiView-similarity">Similarity</span>
<Slider
className="collectionfreeformview-aiView-slider"
sx={{
@@ -2229,23 +2231,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
valueLabelDisplay="auto"
/>
</div>
- <Button
- text="Send"
- type={Type.SEC}
- icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
- iconPlacement="right"
- onClick={undoable(
- action(() => {
- this._drawingFillLoading = true;
- DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
- action(() => {
- this._drawingFillLoading = false;
- })
- );
- }),
- 'create image'
- )}
- />
+ <div className="collectionFreeFormView-aiView-send">
+ <Button
+ text="Send"
+ type={Type.SEC}
+ icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+ iconPlacement="right"
+ onClick={undoable(
+ action(() => {
+ this._drawingFillLoading = true;
+ DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
+ action(() => {
+ this._drawingFillLoading = false;
+ })
+ );
+ }),
+ 'create image'
+ )}
+ />
+ </div>
</div>
</div>
<div className="collectionfreeformview-aiView-regenerate-container">
@@ -2256,23 +2260,27 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
aria-label="Edit instructions input"
type="text"
value={this._regenInput}
- onChange={action(e => {this._regenInput = e.target.value})}
+ onChange={action(e => {
+ this._regenInput = e.target.value;
+ })}
placeholder="..under development.."
/>
- <Button
- text="Regenerate"
- type={Type.SEC}
- icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
- iconPlacement="right"
- // onClick={action(async () => {
- // this._regenLoading = true;
- // SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
- // SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
- // SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
- // await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
- // this._regenLoading = false;
- // })}
- />
+ <div className="collectionFreeFormView-aiView-regenBtn">
+ <Button
+ text="Regenerate"
+ type={Type.SEC}
+ icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+ iconPlacement="right"
+ // onClick={action(async () => {
+ // this._regenLoading = true;
+ // SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
+ // SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
+ // SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
+ // await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
+ // this._regenLoading = false;
+ // })}
+ />
+ </div>
</div>
</div>
</div>
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index cd813cb67..7e5507586 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -271,8 +271,14 @@
}
}
+.documentView-noAIWidgets {
+ transform-origin: top left;
+ position: relative;
+}
+
.documentView-editorView-history {
position: absolute;
+ transform-origin: top right;
right: 0;
top: 0;
overflow-y: scroll;
@@ -284,6 +290,7 @@
scrollbar-width: thin;
justify-items: center;
background-color: rgb(223, 223, 223);
+ transform-origin: top left;
.documentView-editorView-resizer {
height: 5px;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bc3f27124..83c948f0b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -551,6 +551,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => DocumentView.SetLightboxDoc(this.Document), icon: 'external-link-alt' });
}
appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'map-pin' });
+ appearanceItems.push({ description: 'AI view', event: () => this._docView?.toggleAIEditor(), icon: 'map-pin' });
!Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
!appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' });
@@ -687,7 +688,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
this._props
.ScreenToLocalTransform()
.translate(0, -this.headerMargin)
- .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.rph() : 1);
+ .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1);
onClickFunc = this.disableClickScriptFunc ? undefined : () => this.onClickHdlr;
setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height)); } // prettier-ignore
setContentView = action((view: ViewBoxInterface<FieldViewProps>) => { this._componentView = view; }); // prettier-ignore
@@ -713,9 +714,32 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
return this._props.styleProvider?.(doc, props, property);
};
- @observable _aiWinHeight = 95;
- rpw = () => (this.rph() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1);
- rph = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight);
+ @observable _aiWinHeight = 88;
+
+ private _sideBtnWidth = 22;
+ @computed get currentScale() {
+ const viewXfScale = this._props.DocumentView!().screenToLocalScale();
+ const x = NumCast(this.Document.height) / viewXfScale / 80;
+ const xscale = x >= 1 ? 0 : 1 / (1 + x * (viewXfScale - 1));
+ const y = NumCast(this.Document.width) / viewXfScale / 200;
+ const yscale = y >= 1 ? 0 : 1 / (1 + y * viewXfScale - 1);
+ return Math.max(xscale, yscale, 1 / viewXfScale);
+ }
+ /**
+ * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
+ */
+ @computed get viewScaling() { return 1 / this.currentScale; } // prettier-ignore
+ /**
+ * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
+ */
+ @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.viewScaling, 0.25 * Math.min(NumCast(this.Document.width), NumCast(this.Document.height))); } // prettier-ignore
+ /**
+ * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
+ */
+ @computed get uiBtnScaling() { return Math.max(this.maxWidgetSize / this._sideBtnWidth, 1) * Math.min(1, this.viewScaling); } // prettier-ignore
+
+ aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1);
+ aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight * this.uiBtnScaling);
@computed get viewBoxContents() {
TraceMobx();
const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
@@ -726,8 +750,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
className="documentView-contentsView"
style={{
pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
- width: this._props.showAIEditor ? this.rpw() : undefined,
- height: this._props.showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
+ width: this._props.showAIEditor ? this.aiContentsWidth() : undefined,
+ height: this._props.showAIEditor ? this.aiContentsHeight() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
}}>
<DocumentContentsView
{...this._props}
@@ -735,8 +759,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
pointerEvents={this.contentPointerEvents}
setContentViewBox={this.setContentView}
childFilters={this.childFilters}
- PanelWidth={this._props.showAIEditor ? this.rpw : this._props.PanelWidth}
- PanelHeight={this._props.showAIEditor ? this.rph : this.panelHeight}
+ PanelWidth={this._props.showAIEditor ? this.aiContentsWidth : this._props.PanelWidth}
+ PanelHeight={this._props.showAIEditor ? this.aiContentsHeight : this.panelHeight}
setHeight={this.setHeight}
isContentActive={this.isContentActive}
ScreenToLocalTransform={this.screenToLocalContent}
@@ -746,23 +770,38 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
/>
</div>
- {!this._props.showAIEditor ? null : (
+ {!this._props.showAIEditor ? (
+ <div
+ className="documentView-noAiWidgets"
+ style={{
+ width: `${100 / this.uiBtnScaling}%`, //
+ transform: `scale(${this.uiBtnScaling})`,
+ bottom: this.maxWidgetSize,
+ }}>
+ {this.widgetDecorations ?? null}
+ </div>
+ ) : (
<>
<div
className="documentView-editorView-history"
- ref={r => {
- this.historyRef(this._oldAiWheel, (this._oldAiWheel = r));
- }}
- style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) * 0.95 }}>
+ ref={r => this.historyRef(this._oldAiWheel, (this._oldAiWheel = r))}
+ style={{
+ transform: `scale(${this.uiBtnScaling})`,
+ height: this.aiContentsHeight() / this.uiBtnScaling,
+ width: ((this._props.PanelWidth() - this.aiContentsWidth()) * 0.95) / this.uiBtnScaling,
+ }}>
{this._componentView?.componentAIViewHistory?.() ?? null}
</div>
<div
className="documentView-editorView"
- ref={r => {
- this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r));
- }}>
+ style={{
+ width: `${100 / this.uiBtnScaling}%`, //
+ transform: `scale(${this.uiBtnScaling})`,
+ }}
+ ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
<div className="documentView-editorView-resizer" />
{this._componentView?.componentAIView?.() ?? null}
+ {this.widgetDecorations ?? null}
</div>
</>
)}
@@ -934,7 +973,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
{this.captionView}
</div>
)}
- {this.widgetDecorations ?? null}
</div>
));
};
@@ -1232,7 +1270,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
}
@computed get layout_fitWidth() {
- return this._showAIEditor ? false : (this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth);
+ return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth;
}
@computed get anchorViewDoc() {
return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined;
@@ -1430,7 +1468,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
public docViewPath = () => (this.containerViewPath ? [...this.containerViewPath(), this] : [this]);
layout_fitWidthFunc = (/* doc: Doc */) => BoolCast(this.layout_fitWidth);
- screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale;
+ screenToLocalScale = () => this.screenToViewTransform().Scale;
isSelected = () => this.IsSelected;
select = (extendSelection: boolean, focusSelection?: boolean) => {
if (!this._props.dontSelect?.()) DocumentView.SelectView(this, extendSelection);
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 29b24b774..fe4f0b1a2 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -164,16 +164,15 @@
.imageBox-aiView {
text-align: center;
font-weight: bold;
+ transform-origin: top left;
+ width: 100%;
.imageBox-aiView-subtitle {
position: relative;
align-content: center;
- }
-
- .imageBox-aiView-regenerate-container,
- .imageBox-aiView-options-container {
- font-weight: normal;
- display: flex;
+ max-width: 10%;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.imageBox-aiView-regenerate,
@@ -183,19 +182,46 @@
flex-direction: row;
gap: 5px;
width: 100%;
+ .imageBox-aiView-regenerate-createBtn {
+ max-width: 10%;
+ .button-container {
+ width: 100% !important;
+ justify-content: left !important;
+ }
+ }
+ }
+
+ .imageBox-aiView-firefly {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 10%;
+ width: 100%;
+ }
+ .imageBox-aiView-regenerate-send {
+ max-width: 10%;
}
.imageBox-aiView-strength {
text-align: center;
align-items: center;
display: flex;
- width: 125px;
+ max-width: 25%;
+ width: 100%;
+ .imageBox-aiView-similarity {
+ max-width: 65;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ }
}
.imageBox-aiView-slider {
- width: 50px;
+ width: 90%;
margin-left: 5px;
}
.imageBox-aiView-input {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 65%;
width: 100%;
}
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 82d8ea5f1..caefbf542 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -541,10 +541,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
protected _sideBtnMaxPanelPct = 0.12;
@observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
@observable private _fireflyRefStrength = 0;
- @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 = () => (
<div className="imageBox-aiView-history">
@@ -570,35 +566,35 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey]));
return (
<div className="imageBox-aiView">
- <div className="imageBox-aiView-regenerate-container">
- <div className="imageBox-aiView-regenerate">
- Firefly:
- <input
- className="imageBox-aiView-input"
- aria-label="Edit instructions input"
- type="text"
- value={this._regenInput}
- onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
- placeholder={this._regenInput || StrCast(this.Document.title)}
+ <div className="imageBox-aiView-regenerate">
+ <span className="imageBox-aiView-firefly">Firefly:</span>
+ <input
+ className="imageBox-aiView-input"
+ aria-label="Edit instructions input"
+ type="text"
+ value={this._regenInput}
+ onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+ placeholder={this._regenInput || StrCast(this.Document.title)}
+ />
+ <div className="imageBox-aiView-strength">
+ <span className="imageBox-aiView-similarity">Similarity</span>
+ <Slider
+ className="imageBox-aiView-slider"
+ sx={{
+ '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+ '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
+ '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
+ }}
+ min={0}
+ max={100}
+ step={1}
+ size="small"
+ value={this._fireflyRefStrength}
+ onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+ valueLabelDisplay="auto"
/>
- <div className="imageBox-aiView-strength">
- <span style={{ width: 60 }}>Similarity</span>
- <Slider
- className="imageBox-aiView-slider"
- sx={{
- '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
- '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
- '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
- }}
- min={0}
- max={100}
- step={1}
- size="small"
- value={this._fireflyRefStrength}
- onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
- valueLabelDisplay="auto"
- />
- </div>
+ </div>
+ <div className="imageBox-aiView-regenerate-createBtn">
<Button
text="Create"
type={Type.SEC}
@@ -634,71 +630,61 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
/>
</div>
</div>
- <div className="imageBox-aiView-options-container">
- <span className="imageBox-aiView-subtitle"> More Options: </span>
- <div className="imageBox-aiView-options">
- {SmartDrawHandler.Instance.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" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={() => {
- Networking.PostToServer('/queryFireflyImageText', {
- file: (file => {
- const ext = extname(file);
- return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
- })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
- }).then(text => alert(text));
- }}
- />
- <Button
- style={{ transform: `scale(${this.uiBtnScaling})` }}
- type={Type.TERT}
- text="Generative Fill"
- icon={<FontAwesomeIcon icon="fill" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={action(() => {
- ImageEditorData.Open = true;
- ImageEditorData.Source = (field && this.choosePath(field.url)) || '';
- ImageEditorData.AddDoc = this._props.addDocument;
- ImageEditorData.RootDoc = this.Document;
- })}
- />
- <Button
- style={{ transform: `scale(${this.uiBtnScaling})` }}
- type={Type.TERT}
- text="Expand"
- icon={<FontAwesomeIcon icon="expand" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={() => {
- Networking.PostToServer('/expandImage', {
- prompt: 'sunny skies',
- file: (file => {
- const ext = extname(file);
- return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
- })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
- }).then((info: Upload.ImageInformation) => {
- const img = Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { title: 'expand:' + this.Document.title });
- DocUtils.assignImageInfo(info, img);
- const genratedDocs = this.Document.generatedDocs
- ? DocCast(this.Document.generatedDocs)
- : Docs.Create.MasonryDocument([], { _width: 400, _height: 400, x: NumCast(this.Document.x) + NumCast(this.Document.width), y: NumCast(this.Document.y) });
- Doc.AddDocToList(genratedDocs, undefined, img);
- this.Document[DocData].generatedDocs = genratedDocs;
- if (!DocumentView.getFirstDocumentView(genratedDocs)) this._props.addDocTab(genratedDocs, OpenWhere.addRight);
- });
- }}
- />
- </div>
+ <div className="imageBox-aiView-options">
+ <span className="imageBox-aiView-subtitle"> More: </span>
+ <Button
+ type={Type.TERT}
+ text="Get Text"
+ icon={<FontAwesomeIcon icon="font" />}
+ color={SettingsManager.userBackgroundColor}
+ iconPlacement="right"
+ onClick={() => {
+ Networking.PostToServer('/queryFireflyImageText', {
+ file: (file => {
+ const ext = extname(file);
+ return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
+ })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
+ }).then(text => alert(text));
+ }}
+ />
+ <Button
+ type={Type.TERT}
+ text="Generative Fill"
+ icon={<FontAwesomeIcon icon="fill" />}
+ color={SettingsManager.userBackgroundColor}
+ iconPlacement="right"
+ onClick={action(() => {
+ ImageEditorData.Open = true;
+ ImageEditorData.Source = (field && this.choosePath(field.url)) || '';
+ ImageEditorData.AddDoc = this._props.addDocument;
+ ImageEditorData.RootDoc = this.Document;
+ })}
+ />
+ <Button
+ type={Type.TERT}
+ text="Expand"
+ icon={<FontAwesomeIcon icon="expand" />}
+ color={SettingsManager.userBackgroundColor}
+ iconPlacement="right"
+ onClick={() => {
+ Networking.PostToServer('/expandImage', {
+ prompt: 'sunny skies',
+ file: (file => {
+ const ext = extname(file);
+ return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
+ })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
+ }).then((info: Upload.ImageInformation) => {
+ const img = Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { title: 'expand:' + this.Document.title });
+ DocUtils.assignImageInfo(info, img);
+ const genratedDocs = this.Document.generatedDocs
+ ? DocCast(this.Document.generatedDocs)
+ : Docs.Create.MasonryDocument([], { _width: 400, _height: 400, x: NumCast(this.Document.x) + NumCast(this.Document.width), y: NumCast(this.Document.y) });
+ Doc.AddDocToList(genratedDocs, undefined, img);
+ this.Document[DocData].generatedDocs = genratedDocs;
+ if (!DocumentView.getFirstDocumentView(genratedDocs)) this._props.addDocTab(genratedDocs, OpenWhere.addRight);
+ });
+ }}
+ />
</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 16:34:39 +0000