LUIS Mobile Apps That Understands You

LUIS, Language Understanding Intelligent Service, is an AI service that understands your intention and involving entities in what you say or type. We have learnt how to create an LUIS app @ www.luis.ai. Today, we are going to learn how we can integrate it to our mobile app that we created using .NETStandard 2.0 previously.

Don’t have an Azure account yet? Create one for free before we create a subscription at Azure Portal.

Sample Code: https://github.com/hmheng/HmhengXamLuis

Create a LUIS subscription at Azure Portal & luis.ai

The reason we need a subscription is to bring the LUIS app we created to staging or production. If you are ready, let’s begin!

  1. Login with your Azure account @ portal.azure.com, click “+New” and search for LUIS.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  2. Select “Language Understanding Intelligent Service”.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  3. Let’s hit “Create” to create a subscription for staging & production.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  4. Enter your preferred name & the rest let it as default while I select free pricing for this demo. Then click “Create”.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  5. Now, we head to www.luis.ai with what we created previously in tutorial @ Together We Can Make World Smarter with LUIS”.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  6. Before we publish it to production, we need to click “Add Key” to add a new key.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  7. Select your subscription that was just created at portal.azure.com and click “Add Key”. A key should then be generated.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  8. Please take note of the Key in 8a, and app ID underlined in light blue while endpoint in purple (Optionally obtained from Dashboard) at 8b.
    We will need these information at later step.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped

Code to Turn Your App to Understands What You Typed

  1. First, we need to create one Xamarin Cross Platform using .NET Standard 2.0 by following the tutorial here.
  2. Secondly, Replace the code in ContentPage.Content of MainPage.xaml with following code.
    …
    <ContentPage.Content>
    <StackLayout>
    <Entry x:Name="txtMessage" Text="Command Here" />
    <Button x:Name="btnConnect" Text="Send" />
    <Label x:Name="lblIntentLabel" Text="Intent:" />
    <Label x:Name="lblIntent" Text="" />
    <Label x:Name="lblEntitiesLabel" Text="Entities:" />
    <Label x:Name="lblEntities" Text="" />
    </StackLayout>
    </ContentPage.Content>
    …
    
  3. Thirdly, we will need to get some sample code from LUIS’s documentation and do some changes for Xamarin.MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  4. Then, copy the code from MakeRequest function.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  5. Fifthly, Paste it in MainPage.xaml.cs & make it an event function. This function will call LUIS api & get the results from LUIS API.
    public async void MakeRequest(object sender, EventArgs e)
    {
    var client = new HttpClient();
    var queryString = HttpUtility.ParseQueryString(string.Empty);
    //this is sample code
    var luisAppId = “<Your App Id>";
    var subscriptionKey = “<Your App Key>";// The request header contains your subscription key
    client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
    // The "q" parameter contains the utterance to send to LUIS
    queryString["q"] = txtMessage.Text;
    // These optional request parameters are set to their default values
    queryString["timezoneOffset"] = "0";
    queryString["verbose"] = "false";
    queryString["spellCheck"] = "false";
    queryString["staging"] = "false";
    var uri = "https://southeastasia.api.cognitive.microsoft.com/luis/v2.0/apps/" + luisAppId + "?" + queryString;
    var response = await client.GetAsync(uri);
    var strResponseContent = await response.Content.ReadAsStringAsync();
    }
  6. Replace the ID, Key & endpoint region which you can obtain from the previous page.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  7. Following that, right click the project, create a new Folder “Models” and a Class “LuisResponse.cs”.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  8. After that, add in the following codes to the newly created class – LuisResponse.cs for de-serializating the JSON String response from LUIS later.
        public class LuisResponse
        {
            public string query { get; set; }
            public TopScoringIntent topScoringIntent { get; set; }
            public List intents { get; set; }
            public List entities { get; set; }
        }
    
        public class TopScoringIntent
        {
            public string intent { get; set; }
            public double score { get; set; }
        }
    
        public class Intent
        {
            public string intent { get; set; }
            public double score { get; set; }
        }
    
        public class Value
        {
            public string timex { get; set; }
            public string type { get; set; }
            public string value { get; set; }
        }
    
        public class Resolution
        {
            public List values { get; set; }
        }
    
        public class Entity
        {
            public string entity { get; set; }
            public string type { get; set; }
            public int startIndex { get; set; }
            public int endIndex { get; set; }
            public double score { get; set; }
            public Resolution resolution { get; set; }
        }
    
    
  9. Moving forward, add following lines in white after the last line of var strResponseContent = await response.Content.ReadAsStringAsync() in MakeRequest function.
    …
    try
    {
    lblIntent.Text = "";
    lblEntities.Text = "";
    LuisResponse luisResponse = JsonConvert.DeserializeObject(strResponseContent);
    if (luisResponse != null)
    {
    if (luisResponse.topScoringIntent != null)
    {
    lblIntent.Text = luisResponse.topScoringIntent.intent;
    }if(luisResponse.entities.Count() > 0)
    {
    foreach (var entities in luisResponse.entities)
    {
    lblEntities.Text += entities.entity + "(" + entities.type + ")\n";
    }
    }
    }
    }catch(Exception ex)
    {
    Console.WriteLine(ex.ToString());
    }
    …
  10. We have to tell btnConnect to fire MakeRequest function when the button is being clicked. In order to do so, add the following line after InitializeComponent(); in MainPage constructor of MainPage.xaml.cs.
    btnConnect.Clicked += MakeRequest;

    MobileAppsthatUnderstandsYourIntentionWhenYouTyped

  11. Finally, let’s compile and run on your device.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped
  12. Let’s try it with some sentences, eg. “Meet Marvin at Starbucks tomorrow”, you should get the intention & entities involved.
    MobileAppsthatUnderstandsYourIntentionWhenYouTyped

 

Give yourself a challenge, making it a smart chatbox or smart personal assistance that will help you carry out some tasks!

Click here to download an offline copy!

MobileAppsthatUnderstandsYourIntentionWhenYouTyped

 

Don’t forget to follow me @
Twitter: @hmheng
More slides @ SlideShare: https://www.slideshare.net/HiangMengHengMarvin
Blog: http://hmheng.pinsland.com

You may also like...

3 Responses

  1. December 20, 2017

    […] the interaction between us and the device by introducing much natural language? Learn more about LUIS and how I had developed a mobile app that understands your natural language. Leave a comment at below if you have any idea to do […]

  2. December 23, 2017

    […] natural human interaction, such as creating a chat bot on web, on mobile app using BotFramework, LUIS mobile app using LUIS, a PictureTeller app using Vision API, till the very recent one – Voice Command […]

  3. July 15, 2018

    […] LUIS Mobile Apps That Understands You […]

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: