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

​

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].

​

Next Steps

• Python Cookbook
• Typescript Cookbook