aboutsummaryrefslogtreecommitdiff
path: root/src/client/apis/gpt/customization.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/apis/gpt/customization.ts')
-rw-r--r--src/client/apis/gpt/customization.ts151
1 files changed, 0 insertions, 151 deletions
diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index bc3f57210..71467a1e1 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -6,28 +6,6 @@ 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[] }[];
@@ -98,132 +76,3 @@ export const gptTrailSlideCustomization = async (inputText: string, properties:
return 'Error connecting with API.';
}
};
-
-// layout
-export const smartLayout = async (inputData: { width: number; height: number }[]) => {
- let prompt =
- 'I want to layout documents in a 2d space in a nice, grid-like fashion with nice padding of about 50 units around each document, making sure they do not overlap. Given a json array of documents containing their width and heights in this form: {width: number, height: number}[], give me a json array in this form: {x: number, y: number}[] corresponding to the documents with a nice layout. Return just the json array.';
-
- let messages: ChatCompletionMessageParam[] = [
- { role: 'system', content: prompt },
- { role: 'user', content: JSON.stringify(inputData) },
- ];
-
- console.log('Prompt: ', prompt);
- console.log('Messages: ', messages);
-
- try {
- const response = await openai.chat.completions.create({
- model: 'gpt-4',
- messages: messages,
- temperature: 0.01,
- max_tokens: 2000,
- });
- const content = response.choices[0].message?.content;
- if (content) {
- return content;
- }
- return 'Malformed response.';
- } catch (err) {
- console.log(err);
- return 'Error connecting with API.';
- }
-};
-
-// layout
-export const smartLayout2 = async (inputData: { width: number; height: number }[]) => {
- let prompt =
- 'I want to layout documents in a freeform 2d space in a masonry layout with a padding of around 50 units around each document. Take inspiration from existing UI grid and masonry layout design patterns. Make sure documents do not overlap. Given a json array of documents containing their width and heights in this form: {width: number, height: number}[], give me a json array in this form: {x: number, y: number}[] corresponding to the documents in the same order with the improved layout. Return just the json array.';
-
- let messages: ChatCompletionMessageParam[] = [
- { role: 'system', content: prompt },
- { role: 'user', content: JSON.stringify(inputData) },
- ];
-
- console.log('Prompt: ', prompt);
- console.log('Messages: ', messages);
-
- try {
- const response = await openai.chat.completions.create({
- model: 'gpt-4',
- messages: messages,
- temperature: 0,
- max_tokens: 2000,
- });
- const content = response.choices[0].message?.content;
- if (content) {
- return content;
- }
- return 'Malformed response.';
- } 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: ChatCompletionMessageParam[] = [
- { role: 'system', content: prompt },
- { role: 'user', content: JSON.stringify(inputData) },
- ];
-
- // continuing conversation
- 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.chat.completions.create({
- model: 'gpt-4',
- messages: messages,
- temperature: 0.1,
- max_tokens: 2000,
- });
- const content = response.choices[0].message?.content;
- console.log(content);
- if (content) {
- return content;
- }
- return 'Malformed response.';
- } catch (err) {
- console.log(err);
- return 'Error connecting with API.';
- }
-};