From 888ddd78737781f8a2d045b5f1e41788c512c94d Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 8 Sep 2023 17:02:49 -0400 Subject: don't remove current recording from overlay, added closeOnSelect option for dropdown. place recording box on screen. fixe overlayView to keep views on screen. fixed schema view checkboxes. don't cause tab to rerender when colelctoin type changes. add dropdown to filter indicator to find filters. --- src/client/util/reportManager/ReportManager.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/util/reportManager') diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index 6a236face..08467448d 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -308,6 +308,7 @@ export class ReportManager extends React.Component<{}> { { @@ -320,6 +321,7 @@ export class ReportManager extends React.Component<{}> { { -- cgit v1.2.3-70-g09d2 From f5e765adff1e7b32250eb503c9724a4ac99117f3 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Mon, 18 Sep 2023 17:39:20 -0400 Subject: prepare merge --- src/client/util/reportManager/ReportManager.tsx | 1 + .../util/reportManager/reportManagerUtils.ts | 1 + src/client/views/pdf/GPTPopup/GPTPopup.tsx | 255 ++++++++++++++------- 3 files changed, 180 insertions(+), 77 deletions(-) (limited to 'src/client/util/reportManager') diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index e684bd637..e6de410a7 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -128,6 +128,7 @@ export class ReportManager extends React.Component<{}> { let formattedLinks: string[] = []; if (this.formData.mediaFiles.length > 0) { const links = await uploadFilesToServer(this.formData.mediaFiles); + console.log('Links', links); if (links) { formattedLinks = links; } diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts index b95417aa1..1bbb60f7a 100644 --- a/src/client/util/reportManager/reportManagerUtils.ts +++ b/src/client/util/reportManager/reportManagerUtils.ts @@ -111,6 +111,7 @@ export const uploadFilesToServer = async (mediaFiles: FileData[]): Promise ({ file: file.file }))); + console.log('Raw links', links); return (links ?? []).map(getServerPath).map(fileLinktoServerLink); } catch (err) { if (err instanceof Error) { diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 8bd060d4f..9b754588a 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,82 +1,227 @@ import React = require('react'); +import './GPTPopup.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import ReactLoading from 'react-loading'; import Typist from 'react-typist'; import { Doc } from '../../../../fields/Doc'; -import { Docs } from '../../../documents/Documents'; -import './GPTPopup.scss'; +import { DocUtils, Docs } from '../../../documents/Documents'; +import { Button, IconButton, Type } from 'browndash-components'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { CgClose } from 'react-icons/cg'; +import { AnchorMenu } from '../AnchorMenu'; +import { gptImageCall } from '../../../apis/gpt/GPT'; +import { Networking } from '../../../Network'; +import { Utils } from '../../../../Utils'; export enum GPTPopupMode { SUMMARY, EDIT, + IMAGE, } -interface GPTPopupProps { - visible: boolean; - text: string; - loading: boolean; - mode: GPTPopupMode; - callSummaryApi: (e: React.PointerEvent) => Promise; - callEditApi: (e: React.PointerEvent) => Promise; - replaceText: (replacement: string) => void; - highlightRange?: number[]; -} +interface GPTPopupProps {} @observer export class GPTPopup extends React.Component { static Instance: GPTPopup; @observable - private done: boolean = false; + public visible: boolean = false; + @action + public setVisible = (vis: boolean) => { + this.visible = vis; + }; @observable - private sidebarId: string = ''; + public loading: boolean = false; + @action + public setLoading = (loading: boolean) => { + this.loading = loading; + }; + @observable + public text: string = ''; + @action + public setText = (text: string) => { + this.text = text; + }; + + @observable + public imgDesc: string = ''; + @action + public setImgDesc = (text: string) => { + this.imgDesc = text; + }; + @observable + public imgUrls: string[][] = []; + @action + public setImgUrls = (imgs: string[][]) => { + this.imgUrls = imgs; + }; + + @observable + public mode: GPTPopupMode = GPTPopupMode.SUMMARY; + @action + public setMode = (mode: GPTPopupMode) => { + this.mode = mode; + }; + + @observable + public highlightRange: number[] = []; + @action callSummaryApi = () => {}; + @action callEditApi = () => {}; + @action replaceText = (replacement: string) => {}; + + @observable + private done: boolean = false; @action public setDone = (done: boolean) => { this.done = done; }; + + // change what can be a ref into a ref + @observable + private sidebarId: string = ''; @action public setSidebarId = (id: string) => { this.sidebarId = id; }; + @observable + private imgTargetDoc: Doc | undefined; + @action + public setImgTargetDoc = (anchor: Doc) => { + this.imgTargetDoc = anchor; + }; + + @observable + private textAnchor: Doc | undefined; + @action + public setTextAnchor = (anchor: Doc) => { + this.textAnchor = anchor; + }; + public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false; + public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; + + /** + * Generates a Dalle image and uploads it to the server. + */ + generateImage = async () => { + if (this.imgDesc === '') return; + this.setImgUrls([]); + this.setMode(GPTPopupMode.IMAGE); + this.setVisible(true); + this.setLoading(true); + + try { + let image_urls = await gptImageCall(this.imgDesc); + if (image_urls && image_urls[0]) { + // need to fix this + const [result] = await Networking.PostToServer('/uploadRemoteImage', { sources: [image_urls[0]] }); + console.log('Result', result); + console.log('Client', result.accessPaths.agnostic.client); + const source = Utils.prepend(result.accessPaths.agnostic.client); + this.setImgUrls([[image_urls[0], source]]); + } + } catch (err) { + console.log(err); + } + GPTPopup.Instance.setLoading(false); + }; /** * Transfers the summarization text to a sidebar annotation text document. */ private transferToText = () => { - const newDoc = Docs.Create.TextDocument(this.props.text.trim(), { + const newDoc = Docs.Create.TextDocument(this.text.trim(), { _width: 200, _height: 50, _layout_fitWidth: true, _layout_autoHeight: true, }); this.addDoc(newDoc, this.sidebarId); + const anchor = AnchorMenu.Instance?.GetAnchor(undefined, false); + if (anchor) { + DocUtils.MakeLink(newDoc, anchor, { + link_relationship: 'GPT Summary', + }); + } + }; + + /** + * Transfers the image urls to actual image docs + */ + private transferToImage = (source: string) => { + const textAnchor = this.imgTargetDoc; + if (!textAnchor) return; + const newDoc = Docs.Create.ImageDocument(source, { + x: NumCast(textAnchor.x) + NumCast(textAnchor._width) + 10, + y: NumCast(textAnchor.y), + _height: 200, + _width: 200, + data_nativeWidth: 1024, + data_nativeHeight: 1024, + }); + if (Doc.IsInMyOverlay(textAnchor)) { + newDoc.overlayX = textAnchor.x; + newDoc.overlayY = NumCast(textAnchor.y) + NumCast(textAnchor._height); + Doc.AddToMyOverlay(newDoc); + } else { + this.addToCollection?.(newDoc); + } + // Create link between prompt and image + DocUtils.MakeLink(textAnchor, newDoc, { link_relationship: 'Image Prompt' }); }; + private getPreviewUrl = (source: string) => source.split('.').join('_m.'); + constructor(props: GPTPopupProps) { super(props); GPTPopup.Instance = this; } componentDidUpdate = () => { - if (this.props.loading) { + if (this.loading) { this.setDone(false); } }; + imageBox = () => { + return ( +
+ {this.heading('GENERATED IMAGE')} +
+ {this.imgUrls.map(rawSrc => ( +
+
+ dalle generation +
+
+
+
+ ))} +
+ {!this.loading && ( + <> + } color={StrCast(Doc.UserDoc().userVariantColor)} /> + + )} +
+ ); + }; + summaryBox = () => ( <>
{this.heading('SUMMARY')}
- {!this.props.loading && + {!this.loading && (!this.done ? ( { @@ -84,39 +229,32 @@ export class GPTPopup extends React.Component { this.setDone(true); }, 500); }}> - {this.props.text} + {this.text} ) : ( - this.props.text + this.text ))}
- {!this.props.loading && ( + {!this.loading && (
{this.done ? ( <> - - + } color={StrCast(Doc.UserDoc().userVariantColor)} /> + + }} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + />
)} @@ -124,43 +262,6 @@ export class GPTPopup extends React.Component { ); - editBox = () => { - const hr = this.props.highlightRange; - return ( - <> -
- {this.heading('TEXT EDIT SUGGESTIONS')} -
- {hr && ( -
- {this.props.text.slice(0, hr[0])} {this.props.text.slice(hr[0], hr[1])} {this.props.text.slice(hr[1])} -
- )} -
-
- {hr && !this.props.loading && ( - <> -
- <> - - - -
- {this.aiWarning()} - - )} - - ); - }; - aiWarning = () => this.done ? (
@@ -174,14 +275,14 @@ export class GPTPopup extends React.Component { heading = (headingText: string) => (
- {this.props.loading && } + {this.loading ? : } onClick={() => this.setVisible(false)} />}
); render() { return ( -
- {this.props.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.editBox()} +
+ {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : <>}
); } -- cgit v1.2.3-70-g09d2 From 0d6c1aa1869963e548374c634a65b27f0ea32de9 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 21 Sep 2023 13:24:03 -0400 Subject: fix non-image (video still broken) --- src/client/util/reportManager/reportManagerUtils.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src/client/util/reportManager') diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts index 1bbb60f7a..948229442 100644 --- a/src/client/util/reportManager/reportManagerUtils.ts +++ b/src/client/util/reportManager/reportManagerUtils.ts @@ -89,7 +89,13 @@ export const fileLinktoServerLink = (fileLink: string): string => { const regex = 'public'; const publicIndex = fileLink.indexOf(regex) + regex.length; - const finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`; + let finalUrl: string = ''; + if (fileLink.includes('.png') || fileLink.includes('.jpg') || fileLink.includes('.jpeg') || fileLink.includes('.gif')) { + finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`; + } else { + finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1)}`; + } + return finalUrl; }; @@ -108,6 +114,7 @@ export const getServerPath = (link: any): string => { * @returns the server paths or undefined on error */ export const uploadFilesToServer = async (mediaFiles: FileData[]): Promise => { + console.log(mediaFiles); try { // need to always upload to browndash const links = await Networking.UploadFilesToServer(mediaFiles.map(file => ({ file: file.file }))); -- cgit v1.2.3-70-g09d2 From 51d74db190ba898af9f62906ccfd1da097330fb4 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Fri, 22 Sep 2023 03:14:03 -0400 Subject: fix: fix report manager for videos, only add _l suffix for images --- src/client/util/reportManager/ReportManager.tsx | 28 +++++++--------------- .../util/reportManager/reportManagerUtils.ts | 3 --- src/server/ApiManagers/UploadManager.ts | 9 +++---- 3 files changed, 14 insertions(+), 26 deletions(-) (limited to 'src/client/util/reportManager') diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index 802a2f09f..e8c69f909 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -333,25 +333,15 @@ export class ReportManager extends React.Component<{}> { fillWidth />
- - {({ getRootProps, getInputProps }) => ( -
- -
- -

Drop or select media that shows the bug (optional)

-
-
- )} - + { + if (!e.target.files) return; + this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...Array.from(e.target.files).map(file => ({ _id: v4(), file }))] }); + }} + /> {this.formData.mediaFiles.length > 0 &&
    {this.formData.mediaFiles.map(file => this.getMediaPreview(file))}
} {this.submitting ? (