As we do not need image or video search in our smart-house application, we will go on to create a new project. Create this project using the MVVM template that we created in Chapter 1, Getting Started with Microsoft Cognitive Services.

These APIs do not come with any client packages. Like we did previously, we should really make these calls from the server-side application not the client application. In any case, we need to copy the BingWebRequest.cs file from the smart-house application to the Model folder. Make sure to change the namespace.

We will need to install the Newtonsoft.Json NuGet package for our deserialization to work. Do so through the NuGet package manager.

As we will output some of the results as text, we can get away with one common user interface.

Open the MainView.xaml file. Add two TextBox elements, one for the search query and one for the result. We need a ComboBox element to select between search types. Finally, we need to add a Button element for our search command.

In the MainViewModel.xaml file, we need to add an enum with the search types. Add the following at the bottom of the file, beneath the class:

    public enum SearchType {
        ImageSearch,
        VideoSearch,
    }  

We are only interested in image and video searches with queries. In addition to these search forms, both APIs can search for trending images and videos. The Bing Video Search API also allows us to get more detail on any given video we have already searched for.

In the MainViewModel class, we need to add two string properties corresponding to our TextBox elements. We will also need a property of type SearchType to indicate the selected search type. To indicate what search types we have available, we add an IEnumerable property, as follows:

public IEnumerable<SearchType> SearchTypes {
    get { 
        return Enum.GetValues(typeof(SearchType)).Cast<SearchType>();
    }
}

The last property we need to add to our ViewModel is the ICommand property, which will be bound to our Button element.

Now, we need to create a new class, so create a new file called BingSearch.cs, in the Model folder. This will be responsible for constructing the correct endpoints and executing both search types.

We will need to add a member of type BingWebRequest. This should be created in the constructor:

private BingWebRequest _webRequest;

public BingSearch() {
    _webRequest = new BingWebRequest("API_KEY_HERE");
}

That is all we need to do here for now.

Back in the ViewModel, we need to add a member of type BingSearch. With that in place, we can create our constructor:

public MainViewModel() {
    _bingSearch = new BingSearch();

    SearchCommand = new DelegateCommand(Search);

    SelectedSearchType = SearchTypes.FirstOrDefault();
}

With the ViewModel in place, we can do some searches.

For our example, we will only be executing the image search based on user queries. To allow for this, we will need to add a function in the BingSearch class. Call the function SearchImages and let it accept a string as a parameter. The function should return Task<ImageSearchResponse> and be marked as async. ImageSearchResponse will, in this case, be a data contract object, with data deserialized from our response:

public async Task<ImageSearchResponse> SearchImages(string query)
{
    string endpoint = string.Format("{0}{1}","https://api.cognitive.microsoft.com/bing/v5.0/images/search?q=", query);

We will start by constructing our endpoint. In this case, we only specify the query parameter, q. This is a required parameter.

Apart from the common query parameters, which we will see presently, we can also add the following parameters:

In addition, we can specify the following parameters as filters:

With the endpoint in place, we can execute the request:

    try {
       ImageSearchResponse response = await _webRequest.MakeRequest<ImageSearchResponse>(endpoint);

        return response;
    } 
    catch (Exception ex) {
        Debug.WriteLine(ex.Message);
    }

    return null;

We will call MakeRequest on the _webRequest object, passing on the endpoint as a parameter. A successful call will result in an ImageSearchResponse, which is the deserialized data contract object from the JSON response.

The resulting object will contain a lot of data. Among that data is an array that contains information about images. Each item in that array contains data, such as an image name, date published, URL, and image ID.

Heading over to MainViewModel.cs, we can now create the Search function:

    private async void Search(object obj) {
        SearchResult = string.Empty;
switch(SelectedSearchType) {
            case SearchType.ImageSearch:
                var imageResponse = await _bingSearch.SearchImages(SearchQuery);
                ParseImageResponse(imageResponse);
                break;
            default:
                break;
        }
    }

With a successful response, we parse the imageResponse. Normally, this would mean displaying images in a list or similar, but we will take the easier option by outputting textual information:

private void ParseImageResponse(ImageSearchResponse imageResponse)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("Image search results:

");
    sb.AppendFormat("# of results: {0}

", imageResponse.totalEstimatedMatches);

    foreach (Value image in imageResponse.value) {
        sb.AppendFormat("	Image name: {0}
	Image size: {1}
	Image host: {2}
	Image URL:{3}	

", image.name, image.contentSize, image.hostPageDisplayUrl, image.contentUrl);
    }

    SearchResult = sb.ToString();
}

We will print out the number of matches in the search. Then, we will loop through the image array, printing the name, size, host, and URL of each image.

A successful test run should present us with the following screen:

In addition to the query-based image search, we can also search for trending images. To do so, you will have to call the following endpoint: https://api.cognitive.microsoft.com/bing/v7.0/images/trending.

Currently, this is only available for the following markets: en-US, en-CA, and en-AU. A successful call to this endpoint will result in an array of categories. Each item in this array will contain an array of trending images, as well as the title of the category.

Searching for videos is nearly the same process as for images. The only real difference is how we construct the endpoint and the response we get.

We are going to add a new function in the BingSearch class to accompany a video search:

public async Task<VideoSearchResponse> SearchVideos(string query)
{
    string endpoint = string.Format("{0}{1}", "https://api.cognitive.microsoft.com/bing/v7.0/videos/search?q=", query);

As you can see, there is only one required parameter: the query string, q. We can also specify a few optional parameters that are common to all the search APIs, which will be described later.

Aside from common filters, video can also filter results based on the following filters:

With the endpoint in place, we call the API:

try {
   VideoSearchResponse response = await _webRequest.MakeRequest<VideoSearchResponse>(endpoint);

    return response;
}
catch (Exception ex) {
    Debug.WriteLine(ex.Message);
}

return null;

We will call MakeRequest on the _webRequest object, passing on the endpoint as a parameter. A successful call will result in a VideoSearchResponse object. This is a data contract, deserialized from the JSON response.

Among other data, it will contain an array of videos. Each item in this array contains a video name, description, publisher, duration, URL, and more.

To be able to search for videos, we add a new case in the Search function, in MainViewModel:

case SearchType.VideoSearch:
  var videoResponse = await _bingSearch.SearchVideos(SearchQuery);
  ParseVideoResponse(videoResponse);
  break;

We call the newly created SearchVideos, passing on the search query as a parameter. If the call succeeds, we go on to parse the video:

private void ParseVideoResponse(VideoSearchResponse videoResponse)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("Video search results:

");
    sb.AppendFormat("# of results: {0}

",
    videoResponse.totalEstimatedMatches);

    foreach (VideoValue video in videoResponse.value) {
        sb.AppendFormat("	Video name: {0}
	Video duration: {1}
	Video URL: {2}	
",video.name, video.duration, video.contentUrl);

        foreach(Publisher publisher in video.publisher) { 
            sb.AppendFormat("	Publisher: {0}
", publisher.name);
        }

        sb.Append("
");
    }
    SearchResult = sb.ToString();
}

As for images, we just show video information textually. In our example, we choose to show the video name, duration, URL, and all publishers of a video.

A successful video search should give the following result:

In addition to the query-based video search, we can also search for trending videos. To do so, you would have to call the following endpoint: https://api.cognitive.microsoft.com/bing/v7.0/videos/trending.

Currently, this is only available for the following markets: en-US, en-CA, and en-AU. A successful call to this endpoint will result in an array of categories and tiles. Each item in the category array will contain a title and an array of subcategories. Each subcategory will contain an array of tiles and the title. Each item in a tile array will contain the video thumbnail and a query to use to get the specific video.

If we want to get more information about any video, we can query the following endpoint: https://api.cognitive.microsoft.com/bing/v7.0/videos/details.

This requires us to specify an id so that we can identify a video. We can also specify the modulesRequested. This is a comma-separated list of the details we want. Currently, the legal values are All, RelatedVideos, and VideoResult.