Een op vision gebaseerde chat-app ontwikkelen

Voltooid

Als u een client-app wilt ontwikkelen die deelneemt aan visuele chats met een multimodale model, kunt u dezelfde basistechnieken gebruiken als voor chats op basis van tekst. U hebt een verbinding met het eindpunt nodig waarop het model is geïmplementeerd en u gebruikt dat eindpunt om prompts te verzenden die bestaan uit berichten naar het model en de antwoorden te verwerken.

Het belangrijkste verschil is dat prompts voor een visiegerichte chat meerdere gebruikersberichten bevatten die zowel een tekstitem als een afbeelding bevatten.

Diagram van een meerdelige prompt die wordt verzonden naar een model.

Een beeldgebaseerde prompt indienen met behulp van de Antwoorden-API

Als u een afbeelding wilt opnemen in een prompt met behulp van de Antwoorden-API , geeft u een URL op voor een afbeeldingsbestand op internet of laadt u een lokale afbeelding en codeert u de gegevens in de Base64-indeling en verzendt u een URL in de indeling data:image/jpeg;base64,{image_data} (waarbij u 'jpeg' vervangt door 'png' pr andere indelingen, indien van toepassing).

In het volgende Python-voorbeeld ziet u hoe u een afbeelding verzendt in een prompt met behulp van de Antwoorden-API :

# Read the image data from a local file
image_path = Path("dragon-fruit.jpeg")
image_format = "jpeg"
with open(image_path, "rb") as image_file:
    image_data = base64.b64encode(image_file.read()).decode("utf-8")

data_url = f"data:image/{image_format};base64,{image_data}" # You can also use a web URL

# Send the image data in a prompt to the model
response = client.responses.create(
    model="gpt-4.1",
    input=[
        {"role": "developer", "content": "You are an AI assistant for chefs planning recipes."},
        {"role": "user", "content": [  
            { "type": "input_text", "text": "What desserts could I make with this?"},
            { "type": "input_image", "image_url": data_url}
        ] } 
    ]
)
print(response.output_text)

Een afbeeldingsgestuurde prompt verzenden met behulp van de ChatCompletions-API.

Wanneer u het Azure OpenAI-eindpunt gebruikt om prompts te verzenden naar modellen die geen ondersteuning bieden voor de Antwoorden-API , kunt u de CatCompletions-API gebruiken; als volgt:

# Read the image data from a local file
image_path = Path("orange.jpeg")
image_format = "jpeg"
with open(image_path, "rb") as image_file:
    image_data = base64.b64encode(image_file.read()).decode("utf-8")

data_url = f"data:image/{image_format};base64,{image_data}" # You can also use a web URL

# Send the image data in a prompt to the model
response = client.chat.completions.create(
    model="Phi-4-multimodal-instruct",
    messages=[
        {"role": "system", "content": "You are an AI assistant for chefs planning recipes."},
        { "role": "user", "content": [  
            { "type": "text", "text": "What can I make with this fruit?"},
            { "type": "image_url", "image_url": {"url": data_url}}
        ] }
    ]
)
print(response.choices[0].message.content)