palette, extracting image colors

1 files changed, 20 insertions, 6 deletions

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 20dac0a4e..fec0a50f9 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -4,6 +4,16 @@ export enum CustomizationType {
     PRES_TRAIL_SLIDE = 'trails',
 }
 
+export interface GeneratedResponse {
+    collectionBackgroundColor: string;
+    documentsWithColors: DocumentWithColor[];
+}
+
+export interface DocumentWithColor {
+    id: number;
+    color: string;
+}
+
 interface PromptInfo {
     description: string;
     features: { name: string; description: string; values?: string[] }[];
@@ -65,14 +75,14 @@ export const generatePalette = async (inputData: any) => {
     let prompt = 'Dash is a hypermedia web application that allows users to organize documents of different media types into collections. I want you to come up with a cohesive color palette for a collection.';
     prompt +=
         'I am going to give you a json object of this format:' +
-        JSON.stringify({ collectionDescription: 'string', documents: 'Document[]' }) +
-        '. collectionDescription is the title of the collection, which you should create a color palette based on. This is the document format:' +
+        JSON.stringify({ collectionDescription: 'string', documents: 'Document[]', imageColors: 'string[]' }) +
+        '. collectionDescription is the title of the collection, which you should create color palettes based on. This is the document format:' +
         JSON.stringify({
             id: 'number',
             textSize: 'number',
             textContent: 'string',
         }) +
-        '. You are going to create a color palette based mostly on collectionDescription, and loosely on the text content and text size of the documents. Return a json object in this format:' +
+        '. Finally, imageColors are the main hex colors of the images in the collection. You are going to generate three distinct variants of color palettes for the user to choose from based mostly on collectionDescription, and loosely on the text content and text size of the documents. You should also take the imageColors into account, but mostly rely on the text content. The variants should start with a light palette and grow increasingly more intense and vibrant. Return a json array of three objects in this format:' +
         JSON.stringify({
             collectionBackgroundColor: 'string',
             documentsWithColors: 'DocumentWithColor[]',
@@ -82,7 +92,7 @@ export const generatePalette = async (inputData: any) => {
             id: 'number',
             color: 'string',
         }) +
-        ", and each element’s color is based on the theme of the overall color palette and also by its document’s textContent. Please pay attention to aesthetics of how each document's color complement the background and each other and choose a variety of colors when appropriate. Respond with only the JSON object.";
+        ", and each element’s color is based on the theme of the overall color palette and also by its document’s textContent. Please pay attention to aesthetics of how each document's color complement the background and each other and choose a variety of colors when appropriate. Respond with only the JSON array.";
 
     // console.log('Prompt', prompt);
     try {
@@ -95,8 +105,12 @@ export const generatePalette = async (inputData: any) => {
             temperature: 0.1,
             max_tokens: 2000,
         });
-        console.log(response.data.choices[0].message?.content);
-        return response.data.choices[0].message?.content;
+        const content = response.data.choices[0].message?.content;
+        console.log(content);
+        if (content) {
+            return content;
+        }
+        return 'Malformed response.';
     } catch (err) {
         console.log(err);
         return 'Error connecting with API.';