use image toggle

1 files changed, 33 insertions, 4 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 86784d467..6c193f5a7 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,7 +3,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
-import { ColorPicker, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { Button, ColorPicker, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
 import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx';
 import { observer } from 'mobx-react';
@@ -40,7 +40,7 @@ import { PropertiesSection } from './PropertiesSection';
 import './PropertiesView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
 import { FaFillDrip } from 'react-icons/fa';
-import { GeneratedResponse } from '../apis/gpt/customization';
+import { GeneratedResponse, generatePalette } from '../apis/gpt/customization';
 import { ExtractColors } from './ExtractColors';
 const _global = (window /* browser */ || global) /* node */ as any;
 
@@ -95,9 +95,27 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openStyling: boolean = true;
 
     // GPT styling
+    public styleInput: any;
     @observable generatedStyles: GeneratedResponse[] = [];
     @observable inputDocs: Doc[] = [];
     @observable selectedStyle: number = -1;
+    @observable useImageData = false;
+
+    @action
+    gptStyling = async () => {
+        this.generatedStyles = [];
+        this.selectedStyle = -1;
+        try {
+            const res = await generatePalette(this.styleInput, this.useImageData);
+            if (typeof res === 'string') {
+                console.log(res);
+                const resObj = JSON.parse(res) as GeneratedResponse[];
+                this.setGeneratedStyles(resObj);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    };
 
     @action
     setGeneratedStyles = (responses: GeneratedResponse[]) => (this.generatedStyles = responses);
@@ -1190,14 +1208,25 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <div className="propertiesView-content" style={{ position: 'relative', height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                     {this.generatedStyles.length > 0
                         ? this.generatedStyles.map((style, i) => (
-                              <div className="propertiesView-palette" style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }} onClick={() => this.styleCollection(i)}>
+                              <div
+                                  key={i}
+                                  className="propertiesView-palette"
+                                  style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }}
+                                  onClick={() => this.styleCollection(i)}>
                                   <div style={{ width: '24px', height: '24px', backgroundColor: style.collectionBackgroundColor, borderRadius: '2px' }}></div>
                                   {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map(c => (
-                                      <div style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div>
+                                      <div key={c.hex} style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div>
                                   ))}
                               </div>
                           ))
                         : 'Generating styles...'}
+                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+                        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                            <label>Use Images </label>
+                            <input type="checkbox" checked={this.useImageData} onChange={action(e => (this.useImageData = e.target.checked))} />
+                        </div>
+                        <Button text={'Regenerate'} type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={this.gptStyling} />
+                    </div>
                 </div>
             </PropertiesSection>
         );