palette, extracting image colors

1 files changed, 44 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 002ebf1ae..fb2de5647 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -27,7 +27,7 @@ import { FollowLinkScript } from '../../../util/LinkFollower';
 import { ReplayMovements } from '../../../util/ReplayMovements';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
-import { freeformScrollMode } from '../../../util/SettingsManager';
+import { freeformScrollMode, SettingsManager } from '../../../util/SettingsManager';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch, UndoManager } from '../../../util/UndoManager';
@@ -52,7 +52,11 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
-import { generatePalette } from '../../../apis/gpt/customization';
+import { DocumentWithColor, GeneratedResponse, generatePalette } from '../../../apis/gpt/customization';
+import { PropertiesView } from '../../PropertiesView';
+import { MainView } from '../../MainView';
+import { ExtractColors } from '../../ExtractColors';
+import { extname } from 'path';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -1796,22 +1800,50 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         });
     };
 
+    @action
+    openProperties = () => {
+        SettingsManager.propertiesWidth = 300;
+    };
+
+    choosePath(url: URL) {
+        if (!url?.href) return '';
+        const lower = url.href.toLowerCase();
+        if (url.protocol === 'data') return url.href;
+        if (url.href.indexOf(window.location.origin) === -1 && url.href.indexOf('dashblobstore') === -1) return Utils.CorsProxy(url.href);
+        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) return `/assets/unknown-file-icon-hi.png`;
+
+        const ext = extname(url.href);
+        return url.href.replace(ext, '_m' + ext);
+    }
+
     // gpt styling
     @action
     gptStyling = async () => {
+        this.openProperties();
         console.log('Title', this.rootDoc.title);
         console.log('bgcolor', this.layoutDoc._backgroundColor);
         // doc.backgroundColor
         console.log('styling');
         const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
+        const imgDocs = this.childDocs.filter(doc => doc.type == 'image');
+        const imgUrls = imgDocs.map(doc => this.choosePath((doc.data as ImageField).url));
+
+        const imageElements = await ExtractColors.loadImagesUrl(imgUrls);
+        const colors = await Promise.all(imageElements.map(elem => ExtractColors.getImgColors(elem)));
+        let colorHexes = colors
+            .reduce((acc, curr) => acc.concat(curr), [])
+            .map(color => color.hex)
+            .slice(0, 10);
+        console.log('Hexes', colorHexes);
+
+        PropertiesView.Instance?.setInputDocs(inputDocs);
+        // also pass it colors
         const gptInput = inputDocs.map((doc, i) => ({
             id: i,
             textContent: (doc.text as RichTextField)?.Text,
             textSize: 16,
         }));
 
-        // inputDocs[0].backgroundColor = '#3392ff';
-
         const collectionDescription = StrCast(this.rootDoc.title);
 
         console.log({
@@ -1823,13 +1855,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const res = await generatePalette({
                 collectionDescription,
                 documents: gptInput,
+                imageColors: colorHexes,
             });
-            console.log('done');
             if (typeof res === 'string') {
-                const resObj = JSON.parse(res);
-                console.log('Result ', resObj);
-                this.rootDoc.backgroundColor = resObj.collectionBackgroundColor;
-                (resObj.documentsWithColors as any[]).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color));
+                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);