diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 37 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 45 |
2 files changed, 57 insertions, 25 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> ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b0be060bd..f5ba0de96 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1819,8 +1819,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection // gpt styling @action gptStyling = async () => { + // clear it in properties instead + if (!PropertiesView.Instance) return; this.openProperties(); - PropertiesView.Instance?.setGeneratedStyles([]); + PropertiesView.Instance.setGeneratedStyles([]); + PropertiesView.Instance.selectedStyle = -1; console.log('Title', this.rootDoc.title); console.log('bgcolor', this.layoutDoc._backgroundColor); // doc.backgroundColor @@ -1847,29 +1850,29 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const collectionDescription = StrCast(this.rootDoc.title); - console.log({ + const styleInput = { collectionDescription, documents: gptInput, - }); + imageColors: colorHexes, + }; - try { - const res = await generatePalette({ - collectionDescription, - documents: gptInput, - imageColors: colorHexes, - }); - if (typeof res === 'string') { - console.log(res); - const resObj = JSON.parse(res) as GeneratedResponse[]; - PropertiesView.Instance?.setGeneratedStyles(resObj); - // const resObj = JSON.parse(res) as GeneratedResponse; - // console.log('Result ', resObj); - // this.rootDoc.backgroundColor = resObj.collectionBackgroundColor; - // (resObj.documentsWithColors).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color)); - } - } catch (err) { - console.error(err); - } + PropertiesView.Instance.styleInput = styleInput; + PropertiesView.Instance.gptStyling(); + + // try { + // const res = await generatePalette(styleInput); + // if (typeof res === 'string') { + // console.log(res); + // const resObj = JSON.parse(res) as GeneratedResponse[]; + // PropertiesView.Instance.setGeneratedStyles(resObj); + // // const resObj = JSON.parse(res) as GeneratedResponse; + // // console.log('Result ', resObj); + // // this.rootDoc.backgroundColor = resObj.collectionBackgroundColor; + // // (resObj.documentsWithColors).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color)); + // } + // } catch (err) { + // console.error(err); + // } }; onContextMenu = (e: React.MouseEvent) => { |