Build variations of the Image Description Generator in minutes
toolConfig.ts
file, and the output
can be automatically displayed by the components/output/OutputLayout.tsx
file, regardless of the JSON structure.Image Description Generator using GPT-4o
lib/types/toolconfig.ts
to understand the various configuration
fields in the demo app.prompt.ts
file should manage user input like this:
descriptionType
). We’ll use these later.toolConfig.ts
to include:
prompt.ts
should match name
in toolConfig.ts
. See example below.InputCapture
component will automatically include an upload form, upload it to Cloudflare R2, return an URL and send it to GPT-4o for analysis.
type
field in toolConfig.ts
is specified correctly.
InputCapture.tsx
uses this to determine what to include (fields, file
uploads) and which API endpoint to call.page.tsx
page in /app
folder of our demo app will get the data from toolConfig.ts
and pass it to the InputCapture
component to automatically build a form based on this.
app/(apps)/vision/[id]/page.tsx
will automatically fetch data from Supabase based on the uuid
& render the JSON, no matter the structure.
The OutputLayout
component handles all the heavy lifting, automatically fetching and displaying the JSON. Review it for better understanding.