Getting Started With Bing Image Search API

In this tutorial, we will learn how to use Bing Image Search API. Remember, in our first example of cognitive services, we had created a demo Bing Speech API. In this tutorial, we will extend the same demo to search images, i.e., we will pass the text result of Bing Speech API to Bing Image Search API. Yes, and we will call the cognitive service using HTTPS REST, like we are calling normal HTTPS Web Services. In our first example of Bing Speech API, we used .NET Client Library to make REST call of API for the ease in .NET. All the cognitive services are HTTPS REST APIs that can be called using any language which makes an HTTPS call. If you have missed part 1 of this series, you can find it here.

• Getting Started With Bing Speech API In WPF Applications 

To register for Bing Image Search API follow these steps.

1. Navigate to https://azure.microsoft.com/en-us/try/cognitive-services/
2. Navigate to the "Search" tab and select Bing Search API. Then, press "Get API Key".
   
   
   
   
3. Select "I agree" and your region, as shown in the following image.
   
   
   
   
4. Login with Microsoft account to get your API key.
   
   
   
   
5. Save your key.
   
   
   

Now, it’s time to recall part 1 in which we covered "Speech to Text" (STT) using Bing Speech API. We will simply use its result as input for Bing Image Search API.

private async void MicClient_OnResponseReceived(object sender, SpeechResponseEventArgs e)
        {
            if (e.PhraseResponse.Results.Length > 0)
            {
                await Application.Current.Dispatcher.BeginInvoke(
                    DispatcherPriority.Normal, new Action(() =>
                    {
                        this.MySpeechResponse.Text = $"'{e.PhraseResponse.Results[0].DisplayText}',";
                        this.MySpeechResponseConfidence.Text = $"confidence: { e.PhraseResponse.Results[0].Confidence}";

                        //this.Speak(this.MySpeechResponse.Text);
                    }));
this.SearchImage(e.PhraseResponse.Results[0].DisplayText);
            }
        }

Here, in "onResponseReceived" method, we will get the text of what we have spoken. Now, we will use that text as input for Bing Image Search API, as shown in the below code.

private async void SearchImage(string SearchTerm)
        {
            var client = new HttpClient();
            var queryString = HttpUtility.ParseQueryString(string.Empty);

            // Request headers
            client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "Your_key_Bing_Image_Search_API");

            // Request parameters
            queryString["q"] = SearchTerm;
            queryString["count"] = "1";
            queryString["offset"] = "0";
            queryString["mkt"] = "en-us";
            queryString["safeSearch"] = "Moderate";
            var uri = "https://api.cognitive.microsoft.com/bing/v5.0/images/search?" + queryString;

            var response = await client.GetAsync(uri);
            var json = await response.Content.ReadAsStringAsync();
           // MessageBox.Show(json.ToString());
            BingImageSearchResponse bingImageSearchResponse = JsonConvert.DeserializeObject<BingImageSearchResponse>(json);
            var uriSource = new Uri(bingImageSearchResponse.value[0].contentUrl, UriKind.Absolute);

            await Application.Current.Dispatcher.BeginInvoke(
                DispatcherPriority.Normal, new Action(() =>
                {
                    this.searchImage.Source = new BitmapImage(uriSource);

                }));
        }

The above method is simply making HTTPS REST request to API (that means it is not necessary for anyone to use Cognitive Services only in WPF application or by using C# language, one can use it with any other language too) and it will result in a JSON response.

Now, let’s perform the following steps to implement Bing Image Search API. First, download part 1 from here.

1. First, add an Image tag in MainWindow.xaml or simply replace the code between <Grid></Grid> with the given code.
   

   <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="*"></RowDefinition>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"></ColumnDefinition>
               <ColumnDefinition Width="*"></ColumnDefinition>
               <ColumnDefinition Width="3*"></ColumnDefinition>
           </Grid.ColumnDefinitions>
           <TextBlock FontSize="24" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="4">Bing Speech API with Image Search</TextBlock>
           <Button x:Name="button" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Click="button_Click"
                   Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Margin="4" Height="75">
               <Button.Content>
                   <StackPanel Orientation="Vertical">
                       <TextBlock FontSize="16">Speak</TextBlock>
                   </StackPanel>
               </Button.Content>
           </Button>
   
           <TextBlock x:Name="status" TextWrapping="Wrap" Text="Not Listening" VerticalAlignment="Center" FontSize="16" Visibility="Collapsed"
                      Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Margin="4"/>
   
           <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
               <TextBlock x:Name="MySpeechResponse" FontSize="20" Margin="4" TextWrapping="Wrap" VerticalAlignment="Center" />
               <TextBlock x:Name="MySpeechResponseConfidence" FontSize="12" Margin="4" TextWrapping="Wrap" VerticalAlignment="Center" />
           </StackPanel>
           <Image x:Name="searchImage" Margin="4" Stretch="Uniform"
                  Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3"/>
   
   
           <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="RecordingBar" Visibility="Collapsed"
                       Grid.Row="0" Grid.Column="0" Grid.RowSpan="5" Grid.ColumnSpan="3">
   
               <ProgressBar HorizontalAlignment="Left" Width="207" Margin="0,16,0,0" IsIndeterminate="True" />
           </StackPanel>
   
       </Grid>

2. Then, inside Solution Explorer, right click your project and click "Manage NuGet Packages".
   
   
   
   
3. Inside NuGet Package Manager window, navigate to the "Browse" tab and search for Newtonsoft.Json.
   
   
   
   
4. Also, right click on "References" and reference the System.Web.
   
   
   
   
5. Create a class or data structure to store the JSON result as per your need (optional).
   

   using System;
   
   public class BingImageSearchResponse
   {
       public string _type { get; set; }
       public string readLink { get; set; }
       public string webSearchUrl { get; set; }
       public string webSearchUrlPingSuffix { get; set; }
       public int totalEstimatedMatches { get; set; }
       public Value[] value { get; set; }
       public int nextOffsetAddCount { get; set; }
       public bool displayShoppingSourcesBadges { get; set; }
       public bool displayRecipeSourcesBadges { get; set; }
   }
   
   public class Value
   {
       public string name { get; set; }
       public string webSearchUrl { get; set; }
       public string webSearchUrlPingSuffix { get; set; }
       public string thumbnailUrl { get; set; }
       public DateTime datePublished { get; set; }
       public string contentUrl { get; set; }
       public string hostPageUrl { get; set; }
       public string hostPageUrlPingSuffix { get; set; }
       public string contentSize { get; set; }
       public string encodingFormat { get; set; }
       public string hostPageDisplayUrl { get; set; }
       public int width { get; set; }
       public int height { get; set; }
       public string imageInsightsToken { get; set; }
       public string imageId { get; set; }
       public string accentColor { get; set; }
   }

6. Finally, add "Search Image" method and call it to MainWindow.xaml.cs.
   

   namespace BingSpeechDemowithImageSerach
   {
       using System.Media;
       using System.Threading;
       using System.Windows.Threading;
   
       using Microsoft.CognitiveServices.SpeechRecognition;
       using System.Net.Http;
       using Newtonsoft.Json;
       using System.Web;
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window
       {
           private MicrophoneRecognitionClient micClient;
           public MainWindow()
           {
               InitializeComponent();
               this.micClient = SpeechRecognitionServiceFactory.CreateMicrophoneClient(
                   SpeechRecognitionMode.ShortPhrase,
                   "en-US",
                   "Your_Bing_Speech_API_KEY");
               this.micClient.OnMicrophoneStatus += MicClient_OnMicrophoneStatus;
               this.micClient.OnResponseReceived += MicClient_OnResponseReceived;
           }
   
           private void button_Click(object sender, RoutedEventArgs e)
           {
               this.MySpeechResponse.Text = string.Empty;
               this.MySpeechResponseConfidence.Text = string.Empty;
               this.searchImage.Source = null;
               this.micClient.StartMicAndRecognition();
           }
   
           private void MicClient_OnMicrophoneStatus(object sender, MicrophoneEventArgs e)
           {
               Application.Current.Dispatcher.BeginInvoke(
                   DispatcherPriority.Normal,
                   new Action(
                       () =>
                       {
                           if (e.Recording)
                           {
                               this.status.Text = "Listening";
                               this.RecordingBar.Visibility = Visibility.Visible;
                           }
                           else
                           {
                               this.status.Text = "Not Listening";
                               this.RecordingBar.Visibility = Visibility.Collapsed;
                           }
                       }));
           }
   
           private async void MicClient_OnResponseReceived(object sender, SpeechResponseEventArgs e)
           {
               if (e.PhraseResponse.Results.Length > 0)
               {
                   await Application.Current.Dispatcher.BeginInvoke(
                       DispatcherPriority.Normal, new Action(() =>
                       {
                           this.MySpeechResponse.Text = $"'{e.PhraseResponse.Results[0].DisplayText}',";
                           this.MySpeechResponseConfidence.Text = $"confidence: { e.PhraseResponse.Results[0].Confidence}";
                       }));
                   this.SearchImage(e.PhraseResponse.Results[0].DisplayText);
               }
           }
           private async void SearchImage(string phraseToSearch)
           {
               var client = new HttpClient();
               var queryString = HttpUtility.ParseQueryString(string.Empty);
   
               // Request headers
               client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "Your_Key_Bing_Image_search_API_HERE");
   
               // Request parameters
               queryString["q"] = phraseToSearch;
               queryString["count"] = "1";
               queryString["offset"] = "0";
               queryString["mkt"] = "en-us";
               queryString["safeSearch"] = "Moderate";
               var uri = "https://api.cognitive.microsoft.com/bing/v5.0/images/search?" + queryString;
   
               var response = await client.GetAsync(uri);
               var json = await response.Content.ReadAsStringAsync();
               // MessageBox.Show(json.ToString());
               BingImageSearchResponse bingImageSearchResponse = JsonConvert.DeserializeObject<BingImageSearchResponse>(json);
               var uriSource = new Uri(bingImageSearchResponse.value[0].contentUrl, UriKind.Absolute);
   
               await Application.Current.Dispatcher.BeginInvoke(
                   DispatcherPriority.Normal, new Action(() =>
                   {
                       this.searchImage.Source = new BitmapImage(uriSource);
   
                   }));
           }
   
       }
   }

Source Code

Output