aboutsummaryrefslogtreecommitdiff
path: root/src/client/apis/gpt/customization.ts
blob: 20dac0a4ed1b8ebf00da527658b24ffbd6cf7857 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { openai } from './setup';

export enum CustomizationType {
    PRES_TRAIL_SLIDE = 'trails',
}

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: 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({
            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:' +
        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. Respond with only the JSON object.";

    // console.log('Prompt', prompt);
    try {
        const response = await openai.createChatCompletion({
            model: 'gpt-4',
            messages: [
                { role: 'system', content: prompt },
                { role: 'user', content: JSON.stringify(inputData) },
            ],
            temperature: 0.1,
            max_tokens: 2000,
        });
        console.log(response.data.choices[0].message?.content);
        return response.data.choices[0].message?.content;
    } catch (err) {
        console.log(err);
        return 'Error connecting with API.';
    }
};