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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
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;
}
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, 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.';
prompt +=
'I am 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:' +
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. Important: Respond with only the JSON array and no other text.";
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,
});
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.';
}
};
|
