From f59e343553878029d846e5eae2963fc9c3481b13 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 6 Dec 2023 22:06:16 -0500
Subject: types

---
 src/client/apis/gpt/customization.ts | 51 ++++++++++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 11 deletions(-)

(limited to 'src/client/apis')

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 38458f22c..135b83353 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -1,3 +1,4 @@
+import { ChatCompletionRequestMessage } from 'openai';
 import { openai } from './setup';
 
 export enum CustomizationType {
@@ -14,6 +15,18 @@ export interface DocumentWithColor {
     color: string;
 }
 
+export interface StyleInputDocument {
+    id: number;
+    textContent: string;
+    textSize: number;
+}
+
+export interface StyleInput {
+    collectionDescription: string;
+    documents: StyleInputDocument[];
+    imageColors: string[];
+}
+
 interface PromptInfo {
     description: string;
     features: { name: string; description: string; values?: string[] }[];
@@ -71,12 +84,12 @@ export const gptTrailSlideCustomization = async (inputText: string) => {
 };
 
 // palette / styling
-export const generatePalette = async (inputData: any, useImageData: boolean) => {
-    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 cohesive color palettes for a collection.';
+export const generatePalette = async (inputData: StyleInput, useImageData: boolean, inputText: string, lastResponse?: GeneratedResponse[]) => {
+    let prompt = 'Dash is a hypermedia web application that allows users to organize documents of different media types into collections. The user wants you to come up with cohesive color palettes for a collection.';
     prompt +=
-        'I am going to give you a json object of this format:' +
+        ' The user is going to give you a json object of this 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:' +
+        '. The user may follow by giving more specific instructions on what kind of palettes they want. 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',
@@ -84,7 +97,7 @@ export const generatePalette = async (inputData: any, useImageData: boolean) =>
         }) +
         (useImageData ? '. Finally, imageColors are the main hex colors of the images in the collection.' : '. Ignore imageColors.') +
         '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.' +
-        (useImageData && 'You should slightly take imageColors into account, but primarly focus on crafting a palette that matches the text content.') +
+        (useImageData ? 'You should slightly take imageColors into account, but primarly focus on crafting a palette that matches 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',
@@ -95,16 +108,32 @@ export const generatePalette = async (inputData: any, useImageData: boolean) =>
             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. Important: Respond with only the JSON array and no other text.";
+        ", 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.";
+
+    // enforce format
+    prompt += 'Important: Respond with only the JSON array and no other text.';
+
+    // iteration
+
+    let messages: ChatCompletionRequestMessage[] = [
+        { role: 'system', content: prompt },
+        { role: 'user', content: JSON.stringify(inputData) },
+    ];
+
+    if (lastResponse && inputText !== '') {
+        messages.push({ role: 'assistant', content: JSON.stringify(lastResponse) });
+        messages.push({ role: 'user', content: 'Please modify the previously generated palettes with the following: ' + inputText });
+    } else if (inputText !== '') {
+        messages.push({ role: 'user', content: inputText });
+    }
+
+    console.log('Prompt: ', prompt);
+    console.log('Messages: ', messages);
 
-    console.log('Prompt', prompt);
     try {
         const response = await openai.createChatCompletion({
             model: 'gpt-4',
-            messages: [
-                { role: 'system', content: prompt },
-                { role: 'user', content: JSON.stringify(inputData) },
-            ],
+            messages: messages,
             temperature: 0.1,
             max_tokens: 2000,
         });
-- 
cgit v1.2.3-70-g09d2