How to Include Pictures in AI Responses?
Incorporating pictures into your AskHandle AI responses can enhance user engagement by providing visual context alongside text. This guide will show you how to automate the inclusion of pictures in your AI’s responses based on specific keywords.
Step 1: Prepare the Picture URLs
The first step is to create a CSV file that contains the picture URLs associated with specific keywords. For instance, if your chatbot is answering questions about New York tourist attractions, you can associate pictures for keywords like "Manhattan," "Central Park," and "Statue of Liberty."
Your CSV file should have two columns:
- Keyword: The word or phrase that will trigger the image insertion.
- Picture URL: The direct Unsplash link to the image.
Here’s an example of what the CSV might look like:
| Keyword | Picture URL |
|---|---|
| Manhattan | https://images.unsplash.com/photo-1485738422979-f5c462d49f74 |
| Times Square | https://images.unsplash.com/photo-1533577116850-9cc66cad8a9b |
| Central Park | https://images.unsplash.com/photo-1528747045269-390fe33c19e1 |
| Brooklyn Bridge | https://images.unsplash.com/photo-1559582792-cb2137b2ad63 |
| Statue of Liberty | https://images.unsplash.com/photo-1559170054-0762eaff38c2 |
Step 2: Upload the CSV File
Once your CSV file is ready, upload it to the AskHandle system. This file will be used by the AI to match keywords in user queries with the corresponding pictures.
Step 3: Create a Guide for the AI
Next, you need to guide the AI on how to handle these keywords and when to insert pictures. Create a text file outlining that when the AI detects specific keywords, it should display the related image before the text response using Markdown.
Here’s an example guide for your AI:
If a user asks about New York tourist attractions like Manhattan, Times Square, or Central Park, include an image before the text response. Look up the keyword in the New York tourist attractions CSV file and insert the link using Markdown format.
For example, display the link https://images.unsplash.com/photo-1485738422979-f5c462d49f74 as:
Always add w=230 to fit the front-end design. The picture should be followed by the text response.
This guide instructs the AI on how to format and place pictures properly in its responses.
Step 4: Integrate the Files into AskHandle AI
Once your CSV and text guide files are ready, add them into AskHandle. The AI will be trained to:
- Search for Keywords: When responding to a query, the AI scans for keywords listed in the CSV file.
- Insert Pictures: If a keyword is detected, the AI retrieves the corresponding picture URL and inserts it into the response using Markdown syntax.
- Format the Response: The AI ensures that the picture appears at the top of the response, followed by the relevant text, using the specified
w=230parameter to fit the design.
Step 5: Test the AI Responses
After integrating the files, test the AI to ensure it displays images correctly. Here are examples of how your AI might respond to queries:
Example 1: Query about Manhattan
 Manhattan is known for its iconic skyline, towering skyscrapers, and famous landmarks like Times Square and Central Park.
Example 2: Query about Brooklyn Bridge
 The Brooklyn Bridge connects Manhattan and Brooklyn and offers stunning views of the New York City skyline.
Example 3: Query about Statue of Liberty
 The Statue of Liberty is a symbol of freedom and democracy, standing tall on Liberty Island in New York Harbor.
By following these steps, you can easily include pictures in your AI responses, making the experience more engaging and visually informative for your users. This setup helps the AI provide not only text-based answers but also relevant visuals, enhancing the overall user experience.
