Images

If you use vision models or interact with images in your application, you can add them to your trace logs and see the rendered images on the platform. Models like gpt-4-turbo or the Claude 3 models that take image (URLs) as inputs are automatically traced. You can add generated images, such as those generated using DALL-E, to your traces using the trace_insert method.

TraceLogImage

Trace Logs have a images field that accepts a list of TraceLogImage objects.

class TraceLogImage:
    url: str
    caption: Optional[str] = None

class TraceLog:
    ...
    images: Optional[list[TraceLogImage]] = field(factory=list)

Parameters

url: The URL of the image to be attached to the trace. Note that image URLs from model providers like DALL-E expire after a short period of time. If the URL expires, the image will no longer be visible in the UI.
caption: An optional caption for the image. This can be used to help identify where in the trace the image was generated or any other relevant information.

Getting Started

Python
Typescript

from openai import OpenAI
from parea import Parea, trace, trace_insert
from parea.schemas import TraceLogImage

client = OpenAI(api_key="OPENAI_API_KEY")
p = Parea(api_key="PAREA_API_KEY")
p.wrap_openai_client(client)

@trace
def image_maker(query: str) -> str:
    response = client.images.generate(prompt=query, model="dall-e-3")
    image_url = response.data[0].url
    # you can insert an image into the current Trace
    trace_insert({"images": [TraceLogImage(url=image_url, caption=query]})
    return image_url

@trace
def ask_vision(image_url: str) -> str:
    # gpt-4-vision images will be automatically traced
    response = client.chat.completions.create(
        model="gpt-4-vision-preview",
        messages=[{"role": "user", "content": [
            {"type": "text", "text": "What’s in this image?"},
            {"type": "image_url", "image_url": {"url": image_url}},
        ]}],
    )
    return response.choices[0].message.content

import OpenAI from 'openai';
import { Parea, trace, traceInsert, patchOpenAI } from 'parea-ai';

const openai = new OpenAI();
new Parea("PAREA_API_KEY"); // need to initialize Parea
patchOpenAI(openai);

const imageMaker = trace('imageMaker', async (query: string): Promise<string | undefined> => {
  const response = await openai.images.generate({ prompt: query, model: 'dall-e-3' });
  const image_url = response.data[0].url;
  // you can insert an image into the current Trace
  traceInsert({ images: [{ url: image_url, caption: query }] });
  return image_url;
});

const askVision = trace('askVision', async (image_url: string): Promise<string | null> => {
  // gpt-4-vision images will be automatically traced
  const response = await openai.chat.completions.create({
    model: 'gpt-4-turbo',
    messages: [{role: 'user', content: [
      { type: 'text', text: 'What’s in this image?' },
      { type: 'image_url', image_url: { url: image_url } },
    ]}],
  });
  return response.choices[0].message.content;
});

Visualisation

On the detailed trace logs page, you will see the images rendered in the Inputs/Outputs and Messages tabs.

Inputs/Outputs

Messages

To keep the messages legible, the images are displayed below the actual message and are replaced in the message display by e.g. [PLACEHOLDER FOR IMAGE - SEE image-1 MESSAGE].

Welcome

Guides

Tutorials

TraceLogImage

Parameters

Getting Started

Visualisation

Inputs/Outputs

Messages

Next Steps

​TraceLogImage

​Parameters

​Getting Started

​Visualisation

​Inputs/Outputs

​Messages

​Next Steps

TraceLogImage

Parameters

Getting Started

Visualisation

Inputs/Outputs

Messages

Next Steps