(JavaScript) Multimodal Input: Image Data
Demonstrates sending a request that includes both text and image data for the AI to analyze.Note: This example requires Chilkat v11.2.0 or greater.
var success = false;
// This example assumes the Chilkat API to have been previously unlocked.
// See Global Unlock Sample for sample code.
var ai = new CkAi();
// The provider can be "openai", "google", "claude", "deepseek", "xai", or "perplexity".
// Support for additional providers will be added in future versions of Chilkat.
// xAI (Grok) will be used here..
ai.Provider = "xai";
// Use your provider's API key.
ai.ApiKey = "MY_API_KEY";
// Choose a model.
ai.Model = "grok-4";
// Add both text input, and image data
ai.InputAddText("Describe what you see in the following image.");
var bd = new CkBinData();
// We're passing a relative local file path here.. (relative the the app's current working directory)
success = bd.LoadFile("qa_data/jpg/starfish.jpg");
if (success == false) {
console.log(bd.LastErrorText);
return;
}
ai.InputAddImageData(bd,"");
// Ask the AI for text output.
success = ai.Ask("text");
if (success == false) {
console.log(ai.LastErrorText);
return;
}
// Get the text response.
var sbResponse = new CkStringBuilder();
ai.GetOutputTextSb(sbResponse);
console.log(sbResponse.GetAsString());
// -------------------------------------------------------------
// The response is in markdown format.
// Also see Markdown to HTML Conversion Examples.
// -------------------------------------------------------------
// Sample output:
// The image depicts a small, bright orange starfish (also known as a sea star) with five symmetrical arms radiating from a central disc.
// It has a textured, bumpy surface that gives it a realistic, almost spiky appearance, and there's a small hole or indentation at the center,
// which might represent the mouth or a natural feature. The starfish is shown against a plain white background, and it appears to be a simple,
// illustrative or clipart-style graphic rather than a photograph.
|