challenges
October 3, 2024
[
Dev W rkshop
]

AI Style Generator: Part 4

Workshops in this series

  1. OpenAI Node SDK
  2. Prompt engineering: color
  3. Apply color response
  4. Prompt engineering: quote cleanup and font
  5. Apply font response
  6. Quote entry

Prerequisites

Workshop context

Before this workshop

  • In previous workshops in this series, we set up an OpenAI Node client, created a chat completion to generate a color appropriate to a quote, and applied that color to display the quote.

This workshop

  • In this workshop, we’ll ask OpenAI to correct the grammar and gendered language for the quote, and to provide a font appropriate for the quote.

After this workshop

  • In the next workshop, we’ll apply the font to the UI for the quote display.

Workshop goal

By the end of this workshop you should have:

  1. a response from the OpenAI SDK that includes:
    • The quotation, with any grammar or gendered language corrected. An example of gendered language would be the word “men” in this quote: “Men acquire a particular quality by constantly acting in particular way.” Non-gendered language would replace “Men” with “People”.
    • A Google font name suggestion for the quotation.
  2. an updated response returned by the api/get-quote-styles route handler that includes this new information.

Note: Since this workshop does not include any UI updates, you can either (temporarily) print the JSON reponse to the console to see the results, or access the endpoint ( http://localhost:3000/api/get-quote-styles ) from a browser.

Hints

Hint 1 As with the prompt for quote color, it takes some experimentation to get the prompt right. I’d recommend:

  • reading OpenAI’s prompt engineering tips and then trying different prompts in the ChatGPT interface until you find a prompt that consistently produces the output you want.
  • providing examples in the prompt of the kind of response you’re looking for.

Hint 2 You’ll have to specify two new keys for OpenAI to add to the JSON output. I called these keys:

  • corrected_quote
  • font_name

Hint 3 For the grammar, you might want to specify punctuation and capitalization as well.

Hint 4 For the gendered language, you might want to give examples of what you’re looking for. Here are the examples I used:

(for example, change "men" to "people", or change "father" to "parent")

Hint 5 I had trouble getting OpenAI to give me a font that fit the quotation. Here’s what I found that helped:

  1. Ask OpenAI to specify three adjectives for the quote that justified the color it chose. I gave it an example of “bold, calm, professional” (which I took from entering a quote into ChatGPT and asking the same question!).
  2. Ask for a font that matches the three adjectives.

You don’t have to ask for the three adjectives in the returned JSON, but I did (I was curious!). I added a key to the JSON called description.

Hint 6 I found that OpenAI was giving me the same common fonts over and over. I wanted more unusual fonts, so I specified that:

Avoid common fonts like "Lato" and "Roboto". 
Try to pick a more unusual font. Examples of 
less common fonts: "Playfair Display", 
"Marck Script", "Oswald", "Salsa"

Resources

Go to solution and explanation