created input box for gpt draw

1 files changed, 154 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx b/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx
new file mode 100644
index 000000000..fc88b5cc6
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx
@@ -0,0 +1,154 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import { SettingsManager } from '../../../util/SettingsManager';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { Button, IconButton } from 'browndash-components';
+import ReactLoading from 'react-loading';
+import { AiOutlineSend } from 'react-icons/ai';
+import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
+import './ImageLabelHandler.scss';
+import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
+import { InkingStroke } from '../../InkingStroke';
+import { InkData } from '../../../../fields/InkField';
+
+@observer
+export class SmartDrawHandler extends ObservableReactComponent<{}> {
+    static Instance: SmartDrawHandler;
+
+    @observable private _display: boolean = false;
+    @observable private _pageX: number = 0;
+    @observable private _pageY: number = 0;
+    @observable private _yRelativeToTop: boolean = true;
+    @observable private _isLoading: boolean = false;
+    @observable private _userInput: string = '';
+    @observable public coords: InkData | undefined = undefined;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        SmartDrawHandler.Instance = this;
+    }
+
+    @action
+    setIsLoading = (isLoading: boolean) => {
+        this._isLoading = isLoading;
+    };
+
+    @action
+    setUserInput = (input: string) => {
+        this._userInput = input;
+    };
+
+    @action
+    displaySmartDrawHandler = (x: number, y: number) => {
+        this._pageX = x;
+        this._pageY = y;
+        this._display = true;
+    };
+
+    @action
+    hideLabelhandler = () => {
+        this._display = false;
+    };
+
+    @action
+    drawWithGPT = async (startPoint: {X: number, Y: number}, input: string) => {
+        this.setIsLoading(true);
+        try {
+            const res = await gptAPICall(input, GPTCallType.DRAW);
+            if (!res) {
+                console.error('GPT call failed');
+                return;
+            }
+            console.log("GPT response:", res);
+            // controlPts: {X: number, Y: number}[] = []
+            // code to extract list of coords from the string
+            // this.coords = controlPts.map(pt: {X: number, Y: number } => {pt.X + startPoint.X, pt.Y + startPoint.Y});
+           
+
+        } catch (err) {
+            console.error('GPT call failed');
+        }
+
+        this.setIsLoading(false);
+        this.setUserInput('');
+    };
+
+    render() {
+        if (this._display) {
+            return (
+                <div
+                    id="label-handler"
+                    className="contextMenu-cont"
+                    style={{
+                        display: this._display ? '' : 'none',
+                        left: this._pageX,
+                        ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
+                        background: SettingsManager.userBackgroundColor,
+                        color: SettingsManager.userColor,
+                    }}>
+                    <div>
+                        <IconButton tooltip={'Cancel'} onPointerDown={this.hideLabelhandler} icon={<FontAwesomeIcon icon="xmark" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
+                        <input
+                            aria-label="label-input"
+                            id="new-label"
+                            type="text"
+                            style={{ color: 'black' }}
+                            value={this._userInput}
+                            onChange={e => {
+                                this.setUserInput(e.target.value);
+                            }}
+                            placeholder="Enter item to draw"
+                        />
+                        <Button
+                            style={{ alignSelf: 'flex-end' }}
+                            text="Send"
+                            icon={this._isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
+                            iconPlacement="right"
+                            color={MarqueeOptionsMenu.Instance.userColor}
+                            onClick={e => {
+                                this.drawWithGPT({X: e.clientX, Y: e.clientY}, this._userInput);
+                            }}
+                        />
+                        {/* <IconButton
+                            tooltip={'Generate Drawing'}
+                            onPointerDown={() => {
+                                const input = document.getElementById('new-label') as HTMLInputElement;
+                                const newLabel = input.value;
+                                // this.addLabel(newLabel);
+                                // this._currentLabel = '';
+                                input.value = '';
+                            }}
+                            icon={<FontAwesomeIcon icon="plus" />}
+                            color={MarqueeOptionsMenu.Instance.userColor}
+                            style={{ width: '19px' }}
+                        />
+                        <IconButton tooltip={'Group Images'} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} /> */}
+                    </div>
+                    <div>
+                        {/* {this._labelGroups.map(group => {
+                            return (
+                                <div>
+                                    <p>{group}</p>
+                                    <IconButton
+                                        tooltip={'Remove Label'}
+                                        onPointerDown={() => {
+                                            this.removeLabel(group);
+                                        }}
+                                        icon={'x'}
+                                        color={MarqueeOptionsMenu.Instance.userColor}
+                                        style={{ width: '19px' }}
+                                    />
+                                </div>
+                            );
+                        })} */}
+                    </div>
+                </div>
+            );
+        } else {
+            return <></>;
+        }
+    }
+}