challenges

AI Style Generator: Part 3

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 (coming October 10, 2024)
  6. Quote entry (coming October 17, 2024)

Prerequisites

Workshop context

Before this workshop

  • In the previous workshop, we used OpenAI to generate color recommendations that match the mood of the quote.

This workshop

  • In this workshop, we will apply the colors to the quote in the UI.

After this workshop

  • In future workshops, we will:
    • clean up the quote’s grammar and gendered language via the OpenAI SDK
    • apply a font for the quote selected via the OpenAI SDK
    • create an interface for the user to enter their own quotation

Workshop goal

By the end of this workshop you will have an updated UI with a card that displays the quote with the colors returned by OpenAI.

Example page after the button is clicked:

UI with a button to generate a random quote. A quote with purple background and white text is shown beneath the button.

(Note we’ll have OpenAI clean up the grammar and punctuation in the next workshop!)

Hints

Hint 1 In src/hooks/use-quote-styles.tsx, create a new state for quoteProperties. The value can be an object with this shape:

export interface QuoteProperties {
  quote: string;
  colors: {
    text: string;
    background: string;
  };
  // include font later
}

Define and export this type in src/types/index.ts; we’re going to need this type for the revised QuoteContent props, too.

Hint 2 Populate the quoteProperties state after receiving a response from the server (remove the quote state, since we’re storing the quote text in quoteProperties now). Then pass quoteProperties as a prop to QuoteContent and use the values as props for Card.

Hint 3 As the JSON gets more complicated, so will the logic to validate it. Consider making an isValidJson function to check the JSON properties and see whether the “Malformed Response” error needs to be thrown in useQuoteStyles.

The type of the argument for isValidJson will be any, since the output of await response.json() is any

Hint 4 Because Card has already been set up to use the props for styles, you should not have to edit Card at all to see the colors.