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" }