aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
-rw-r--r--src/client/views/nodes/ImageBox.tsx180
1 files changed, 83 insertions, 97 deletions
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-17 11:15:37 +0000