layout progress

2 files changed, 15 insertions, 7 deletions

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 42f112f88..db5ef6eb5 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -116,9 +116,9 @@ export const smartLayout = async (inputData: { width: number; height: number }[]
 };
 
 // layout
-export const smartLayout2 = async (inputData: { width: number; height: number; content: string }[]) => {
+export const smartLayout2 = async (inputData: { width: number; height: number }[]) => {
     let prompt =
-        'I want to layout documents in a 2d space in an organized fashion with padding of about 50 units around each document, importantly making sure they do not overlap. I also want you to group documents by their content, with space separating semantic categories. Given a json array of documents containing their width and heights in this form: {width: number, height: number, content: string}[], give me a json array in this form: {x: number, y: number}[] corresponding to the documents in the same order with a nice layout. Return just the json array.';
+        'I want to layout documents in a freeform 2d space in a masonry layout with a padding of around 50 units around each document. Take inspiration from existing UI grid and masonry layout design patterns. Make sure documents do not overlap. Given a json array of documents containing their width and heights in this form: {width: number, height: number}[], give me a json array in this form: {x: number, y: number}[] corresponding to the documents in the same order with the improved layout. Return just the json array.';
 
     let messages: ChatCompletionMessageParam[] = [
         { role: 'system', content: prompt },
@@ -132,7 +132,7 @@ export const smartLayout2 = async (inputData: { width: number; height: number; c
         const response = await openai.chat.completions.create({
             model: 'gpt-4',
             messages: messages,
-            temperature: 0.01,
+            temperature: 0,
             max_tokens: 2000,
         });
         const content = response.choices[0].message?.content;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 1e0840495..19948b7eb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1649,15 +1649,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return url.href.replace(ext, '_m' + ext);
     }
 
+    @action
+    smartLayout = async () => {};
+
+    roundToRoundNumber = (num: number) => {
+        return Math.round(num / 10) * 10;
+    };
+
     // gpt layout
     @action
     gptLayout = async () => {
         const docLayouts = this.childDocs.map(doc => ({
-            width: NumCast(doc.width),
-            height: NumCast(doc.height),
-            content: StrCast(doc.title),
+            width: this.roundToRoundNumber(NumCast(doc.width)),
+            height: this.roundToRoundNumber(NumCast(doc.height)),
+            // content: StrCast(doc.title),
         }));
-        console.log(docLayouts);
+        console.log('Doc layouts', docLayouts);
 
         const res = await smartLayout2(docLayouts);
         console.log('Smart layout result', res);
@@ -1752,6 +1759,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         // Want to condense into a Smart Organize button
         this._props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' });
         this._props.renderDepth && optionItems.push({ description: 'Smart Layout', event: this.gptLayout, icon: 'object-group' });
+        // this._props.renderDepth && optionItems.push({ description: 'Smart Organize', event: this.smartOrganize, icon: 'object-group' });
         if (!Doc.noviceMode) {
             optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' });
         }