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
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
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.
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
Responses are generated using AI and may contain mistakes.
