Dynamic Color Blocks

How AI color generation works

We start by sending a prompt to ChatGPT, asking for colors using OpenAI Function Calling. In response, the API sends back a JSON text stream that isn't fully formatted yet. But here's where the efficiency kicks in: even before we've received all of the data, we're already parsing it on-the-fly and turning it into structured payload entities. And send each of these entities straight to the browser using Server Sent Events, ensuring a real-time experience.

Modes

All-Together the UI waits for complete data.

One-By-One goes object by object.

Progressive operates via key-value pairs.

Real-time feeds data by individual tokens.

The Prompt

Give me a palette of 5 gorgeous colors with their hex codes, names, and descriptions.

The Function

name: give_colors
description: Give a list of colors
parameters:
  type: object
  properties:
    colors:
      type: array
      items:
        type: object
        properties:
          hex:
            type: string
            description: The hexadecimal code of the color
          name:
            type: string
            description: The color name
          description:
            type: string
            description: The description of the color

The raw stream of tokens

data: {"he
data: x":"#FF
data: 69B4"
data: ,"na
data: me":"Ho
data: t Pink"

The parsable entity stream

{ "index": 0, "status": "PARTIAL",
"data": { "hex": "#FF69B4", "name": "Hot Pink" },
"entity": "colors" }

Installation

To get started with JavaScript / TypeScript:

npm i openai-partial-stream

Import, and you'll want the manual, check out the documentation on GitHub