Revolutionising Hotel Search with Azure Maps and Azure AI Services

introduction

RoomRadar.ai is an AI-based hotel search application developed by the following companies:
@Anchit https://www.linkedin.com/in/anchitchandran/
@mat https://www.linkedin.com/in/matt-peniket-6a051318a
Me too @Soran https://www.linkedin.com/in/an-tien-huang/

As part of my MSc project in Computer Science at University College London. Under the professional guidance of advisor Dr. Yun Fu, https://www.linkedin.com/in/dryunfu/ UCL and Professor LeeStott https://linkedin.com/in/leestott/ At Microsoft, we’ve leveraged the Microsoft Azure infrastructure to create cutting-edge solutions that deliver great user experiences.

Our application leverages Azure OpenAI and Azure AI Search to provide a multimodal interface, allowing users to search for hotels using text, voice, and images. Azure Maps is also integrated to provide interactive maps that provide a more engaging and intuitive experience for users.

RoomRadar.ai demonstrates the potential of AI to enhance travel planning by combining advanced technology and user-friendly design to transform the way people find their ideal accommodation.

In this blog, I will walk through the project development process for Azure Maps and Image Vector Search, which were my main contributions to the project.

Image similarity search demo

Azure Maps demo

outline

• Project overview and goals
• technical details
  • Azure map
  • Azure AI Vision and Azure AI Search
• results and results
• future development
• conclusion

Overview and Goals

RoomRadar.ai is designed to enhance the hotel search user experience with features not available in traditional hotel search applications. Interactive maps and image search are two of these features, and their detailed goals are listed in the following table.

The diagram below provides a high-level overview of the RoomRadar architecture.

technical details

Azure map

Azure Maps demo

RoomRadar’s map component, used for both the map view and the hotel map on the details page, leverages the Azure Maps service. The map-making process is as follows:

Step 0: Set up Azure Maps resources in Azure

Please refer to my tutorial for detailed steps on this and troubleshooting issues related to Azure Maps integration with NextJS and TypeScript. here.

Step 1. Initializing base maps using Microsoft *atlas* packages

Step 1.1: Reset Map

import * as atlas from 'azure-maps-control';

const map = new atlas.Map(mapRef.current!, {
    authOptions: {
        authType: atlas.AuthenticationType.subscriptionKey,
        subscriptionKey: 'key'
    }
});

Step 1.2: Add custom icons for hotels and subway stations

Added Promise.all to prevent maps from accessing custom icons before they have finished loading.

var iconPromises = [
    map.imageSprite.add('underground_icon', '/map_icons/metro.png'),
    map.imageSprite.add('hotel_red_icon', '/map_icons/hotel_red.png'),
];
Promise.all(iconPromises).then(function () {
    // Rest of initialising code omitted for brevity
});

Step 1.3: Add layers to display hotels and subway stations and display route information

// Add symbol layer for hotels and stations
const symbolLayer = new atlas.layer.SymbolLayer(datasource, 'symbolLayer', {
  iconOptions: { 
    image: [
    'match',
    ['get', 'type'],
    //For each entity type, specify the icon name to use.
    'tube', 'underground_icon',
    'hotel', 'hotel_red_icon',
    'hotel_red_icon' //Default icon
    ],
    allowOverlap: false,
    size: 0.1
  },
  textOptions: {
    // Additional code omitted for brevity
  },
  filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]
});          
map.layers.add(symbolLayer);

// Add route layer
const routeLayer = new atlas.layer.LineLayer(datasource, 'routeLayer', {
  strokeColor: '#0059ff',
  strokeWidth: 5,
  lineJoin: 'round',
  lineCap: 'round'
});
map.layers.add(routeLayer, 'labels');

Step 2: Add hotel points to the map

Hotel points are added using props(‘Properties’) passed in from the search results.

const datasource = new atlas.source.DataSource();
map.source.add(datasource);

const hotelPoints = Properties.map((property: Property) => 
new atlas.data.Feature(new atlas.data.Point([Number(property.longitude), Number(property.latitude)]), {
    hotel_id: property.location_id,
    type: 'hotel',
    name: property.name,
})
);
datasource.add(hotelPoints);

Step 3. Add hotel card

Hotel Cards provide a clear and convenient way for users to browse results while receiving visual feedback on the map. To associate a hotel card with its corresponding map element, we use a hash map to store the hotel ID and associated shape ID on the map. This allows for interactive UI experiences, such as displaying a pop-up on a map when the user hovers over the hotel card.

const listItemHover = (id?: string) => {
    const shapeId = id && hotelIdToShapeIdMap.get(id);
    const shape = shapeId && datasource.getShapeById(shapeId);
    if (shape) {
        showPopup(shape);
    }
};

Step 4: Add nearby subway stations when clicking on the hotel

Subway station points are added in the same way as hotel points, except the type is set to ‘Tube’ instead of ‘Hotel’.

Step 5: Calculate direction information by calling Azure Maps’ Get Route Direction API.

When you click on a subway station point, Azure Maps Get route direction API Called to retrieve route coordinates and estimated travel time. The results are then displayed on the map using `routeLayer` and a popup.

Azure AI Vision and Azure AI Search

Image similarity search demo

The image search functionality is implemented using a combination of the following technologies:

• Azure AI Vision: Convert the image to vector embedding. Azure AI Vision was chosen for inclusion creation due to its generous free quotas to accommodate the required image volume.
• MongoDB Atlas: Save the converted vector embeddings for efficient retrieval.
• Azure AI Search and MongoDB Atlas Vector Search: Performs a vector search to find and return similar images based on embeddings.

The entire process is illustrated in the diagram below.

Step 1: Convert image to vector

When called, the image will be converted. Multimode Embedding API Azure AI Services takes binary data as input and returns a 1×1024 vector.

Step 2: Store and Index Vectors

Converted image vectors are stored in MongoDB Atlas and Azure AI Search for indexing. Each record contains three fields: hotel ID, image URL, and image vector. Hotel ID and image URL are included so you can easily search and display hotels with similar images.

Step 3: Search for image vectors in your search

When the user clicks the “Find Similar” button, the saved image vectors are retrieved from the database and a vector search is performed. Compared to real-time image conversion, this approach reduces costs and improves performance by avoiding redundant API calls to Azure AI Vision.

Step 4: Perform a Vector Search

The retrieved vectors are used to perform Atlas vector searches and Azure AI searches in parallel. Atlas vector search is implemented using: PrismaThis feature is supported by default. function. Azure AI Search, on the other hand, is implemented through API calls.

const body = {
    count: true,
    select: 'hotel_location_id, image_url',
    vectorQueries: [
        {
        vector: image_vector,
        k: 6,
        fields: 'image_vector',
        kind: 'vector',
        exhaustive: true
        }
    ]
}

const response = await fetch(`${baseUrl}/indexes/${indexName}/docs/search?api-version=${apiVersion}`, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    'api-key': token
    },
    body: JSON.stringify(body)
});

Step 5: Combine and Return Results

Once the results from both searches are ready, the returned hotel listings are merged and de-duplicated before being displayed to users.

results and results

Key achievements of this project include:

• The user experience is further improved by combining route planning with the implementation of the Azure Maps API for dynamic map views of search results.
• AI-based image search capabilities allow users to find hotels with similar visual attributes, solving complex search requirements that cannot be met by traditional platforms.

Both features also received positive feedback during the user acceptance testing phase. In particular, the 20 friends invited to test the system, who had no prior knowledge of the project and had never seen a demo of the system, found the system interaction to be intuitive and user-friendly.

future development

To make RoomRadar more valuable, we can develop the following features:

• Expand your route planning beyond hotels and subway stations. By integrating chatbots with Azure Maps, the system can display optimized tourist routes, thus improving the user’s decision-making process.
• Add a personalized touch to the search process by allowing users to upload their own images and search for hotels with similar images.

conclusion

RoomRadar.ai demonstrates the transformative potential of AI and cloud computing in travel planning. We leveraged Azure Maps and Azure AI Search to create an innovative hotel search platform that provides an interactive map view with route planning and groundbreaking image-based search capabilities. Positive feedback from User Acceptance Testing validates our approach and confirms that RoomRadar.ai meets real user requirements in the hotel search market. As we look to the future, we are excited about the possibilities to expand the capabilities of our platform and continue to push the boundaries of AI-driven travel planning.

For more information or to get involved: