1 files changed, 150 insertions, 0 deletions
diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
new file mode 100644
index 000000000..135b83353
--- /dev/null
+++ b/src/client/apis/gpt/customization.ts
@@ -0,0 +1,150 @@
+import { ChatCompletionRequestMessage } from 'openai';
+import { openai } from './setup';
+
+export enum CustomizationType {
+    PRES_TRAIL_SLIDE = 'trails',
+}
+
+export interface GeneratedResponse {
+    collectionBackgroundColor: string;
+    documentsWithColors: DocumentWithColor[];
+}
+
+export interface DocumentWithColor {
+    id: number;
+    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[] }[];
+}
+const prompts: { [key: string]: PromptInfo } = {
+    trails: {
+        description:
+            'We are adding customization to a slide in a presentation. Given a natural language input, translate it into a json with the required fields: [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection].',
+        features: [],
+    },
+};
+
+export const addCustomizationProperty = (type: CustomizationType, name: string, description: string, values?: string[]) => {
+    values ? prompts[type].features.push({ name, description, values }) : prompts[type].features.push({ name, description });
+};
+
+const setupPresSlideCustomization = () => {
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'title', 'is the title/name of the slide.');
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_transition', 'is a number in milliseconds for how long it should take to transition/move to a slide.');
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Fade in', 'Flip', 'Rotate', 'Bounce', 'Roll']);
+};
+
+setupPresSlideCustomization();
+
+export const gptTrailSlideCustomization = async (inputText: string) => {
+    let prompt = prompts.trails.description;
+
+    prompts.trails.features.forEach(feature => {
+        prompt += feature.name + feature.description;
+        if (feature.values) {
+            prompt += `Its only possible values are [${feature.values.join(', ')}].`;
+        }
+    });
+
+    // prompt +=
+    //     'title is the title/name of the slide. presentation_transition is a number in milliseconds for how long it should take to transition/move to a slide. presentation_effect is an effect applied to the slide when we transition to it. Its only possible values are: [None, Fade in, Flip, Rotate, Bounce, Roll]. presentation_effectDirection is what direction the effect is applied. Its only possible values are:  [Enter from left, Enter from right, Enter from bottom, Enter from Top, Enter from center]. config_zoom is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.';
+
+    prompt += 'If the input does not contain info a specific key, please set their value to null. Please only return the json with these keys and their values.';
+
+    try {
+        const response = await openai.createChatCompletion({
+            model: 'gpt-3.5-turbo',
+            messages: [
+                { role: 'system', content: prompt },
+                { role: 'user', content: inputText },
+            ],
+            temperature: 0.1,
+            max_tokens: 1000,
+        });
+        return response.data.choices[0].message?.content;
+    } catch (err) {
+        console.log(err);
+        return 'Error connecting with API.';
+    }
+};
+
+// palette / styling
+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 +=
+        ' The user is going to give you a json object of this format:' +
+        JSON.stringify({ collectionDescription: 'string', documents: 'Document[]', imageColors: 'string[]' }) +
+        '. 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',
+            textContent: 'string',
+        }) +
+        (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.' : '') +
+        '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[]',
+        }) +
+        '. collectionBackgroundColor, should be a string hex value for the background color of the collection. documentsWithColors has the same length and order of the input documents. DocumentWithColor has this format:' +
+        JSON.stringify({
+            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.";
+
+    // 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);
+
+    try {
+        const response = await openai.createChatCompletion({
+            model: 'gpt-4',
+            messages: messages,
+            temperature: 0.1,
+            max_tokens: 2000,
+        });
+        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.';
+    }
+};