How to Insert Unsplash Images into AskHandle AI Responses?
Incorporating images into your AskHandle AI responses can significantly enhance the user experience by providing visual context. By following a few simple steps, you can automate the inclusion of Unsplash images in responses based on certain keywords. This guide will walk you through the process, including how to set up the necessary files and how the AI can use them effectively.
Step 1: Prepare the Unsplash Image URLs
The first step is to create a CSV file that contains the Unsplash image URLs associated with specific keywords. For example, if you're focusing on New York tourist attractions, you could list images related to Manhattan, Times Square, Central Park, and more. Your CSV file should have two columns:
- Keyword: The specific term or phrase that will trigger the insertion of an image.
- Image URL: The direct URL of the Unsplash image that will be inserted.
Here’s a more detailed example of what this might look like in the CSV file:
Step 2: Upload the CSV File
Once your CSV file is ready, upload it to the system. This file will be used by the AI to match keywords in user queries with the appropriate images.
Step 3: Create a Guide for the AI
Next, you need to create a text file that provides guidance to the AI on how to handle the keywords and images. This guide should specify that when the AI encounters certain keywords in a user's message, it should insert the corresponding image before the text response. Here’s an example guide:
If you receive a message about New York tourist attractions like Manhattan, Times Square, Central Park, Brooklyn Bridge, Statue of Liberty, Empire State Building, Rockefeller Center, Fifth Avenue, Wall Street, or Broadway, you should include an image before the text response. If you find them in the New York tourist attraction Images CSV file, you should include the whole link in the answer as an image, and you should use Markdown to display the images. For example, the link https://images.unsplash.com/photo-1485738422979-f5c462d49f74 should be written as:  Always add `w=230` to fit our front-end design. Place the image first, followed by the text response.
This guide ensures that the AI understands when and how to insert images into its responses, following a consistent format.
Step 4: Integrate the Files into AskHandle AI
Once both files (the CSV and the guide text file) are prepared and uploaded, they need to be integrated into the AskHandle AI system. The AI will be programmed to:
- Search for Keywords: When responding to a query, the AI will scan the message for any keywords listed in the CSV file.
- Insert Images: If a keyword is found, the AI will retrieve the corresponding image URL from the CSV file and insert it into the response using Markdown syntax.
- Format the Response: The AI will ensure that the image is displayed at the top of the response, followed by the relevant text, using the specified
w=230parameter to fit the design.
Example of Final Responses
Here are a few examples of how the AI might respond to different queries:
1. Query about Manhattan:
 Manhattan is one of the most iconic boroughs of New York City, known for its towering skyscrapers, bustling streets, and famous landmarks like Times Square and Central Park.
2. Query about the Brooklyn Bridge:
 The Brooklyn Bridge connects Manhattan and Brooklyn, offering stunning views of the city skyline and the East River. It's a popular spot for both tourists and locals to walk, bike, and take in the sights.
3. Query about the Statue of Liberty:
 The Statue of Liberty, a gift from France, stands as a symbol of freedom and democracy. Located on Liberty Island, it is one of the most recognizable landmarks in the United States.
4. Query about Times Square:
 Times Square is the vibrant heart of New York City, known for its bright lights, towering digital billboards, and bustling atmosphere. It's a major commercial and entertainment hub, drawing millions of visitors each year.
By following these steps and examples, you can seamlessly integrate visually appealing Unsplash images into your AskHandle AI responses, enhancing the user experience and providing rich, contextual information.
If you have any further questions or need assistance, feel free to send us an email at [email protected].
