Hey blog, I have a question :) ... increasing interactivity of your blog by utilizing Microsoft Azure QnA Maker

Hello,

26th of March, 2020 - though days under Corona pandemic

Today, I am going to share all details about adding funny feature into my blog for anyone who are suffering a technical problem and want to see how did i sort it out under the same situation :).

It has been more than 13 years keeping "things" of computer world in public area . There are up to 120 posts that address technical issues with solution,workaround or instructions or articles for I.T lover.

In this article, you will see

QnA Service creation
Moving posts from my blopgpot to the QnA Engine as a Knowledge base for training and processing
Sending question and receiving answer
Adding bot to the my blog page.

First of all, let me quickly tell you why I chose QnA Maker engine of Microsoft;

Create and publish a bot in teams, or elsewhere without writing a single line of code. You can also add personality to your bot using pre-built chit-chat datasets.
Extract question-answer pairs from semi-structured content, including FAQ pages, support websites, excel files, SharePoint documents, product manuals and policies.

PREREQUISITES:

You need to have active Azure accounts - https://azure.microsoft.com/en-us/free/-

Creation of QnA Service

1- Connect to https://www.qnamaker.ai/

2- Create an Azure service for your QnA knowledge base and add sources that contain the question and answer pairs you would like to include. -to do so just open https://www.qnamaker.ai/Create -

3- Step one: Create Service by clicking “Create a QnA Service”

QnA Service Creation - Step 1

4- A form will be opened. Fill out the fields then click "Create" from bottom of the page. It may take some time to finalize the deployment.
Note:

a. You can select F (stands for Free – limited capacity and feature for sure 😊) to any pricing sections.

b. AppService Plan initially comes with Standard (not free) but you can change it after QnA Service Creation from resource page.

Setting up subscription, Pricing Tier, Resource Group and Azure location

5- Wizard will open another page for deployment progress and display status of the installation.

Deployment Progress

6- Click “Go to resource” once deployment completes in order to change AppService for free 😊

7- Changing AppService for free subscription:You can search from the top of the window or menu left to open App Service Plan. Click New to Create Free F1 then we are going to bind the QnA App to the service plan.

a. Select F1 from the menu then click apply

b. Fill out mandatory fields finally click “Click + review”

App Service Plan

8- Check settings and click Create.

Review and Create

9- Deployment will start.

1- It is time to move QnA app service to the new free plan from standard plan. Go to App Service from the Azure main portal or you can search in home page for App Service. Once you open the App Service go down and find Change pp Service Plan. Finally Select newly created service plan from the form. Click Ok to continue.

Change App Service Plan

1- Step Two: Go back to qnmaker.ai to continue where we left. Click Refresh button and select values from the picklist.

Connect to the QnA Maker Service

1- Step Three: Give a name for newly generated KB

Unique name for the Knowledge Base

1- Step Four: Select the resource. it can be a URL or a file to be uploaded. Then choose a chit-chat from the list.I set the URL of my blog page (hosted by blogspot.com)

Populate Knowledge base

14- Step Five (Last): Click “Create your KB” button to complete the configuration of QnA Makers. Wait until wizard completes all for us.

Progress

Train It!

We have successfully configured the source of my blog as a KB source.

QnA Maker service created indexes. In the next step we should train it. It is simple, just click “Save and Train”

Save - Train

Please wait until operation finishes

Progress

Test

Click Test for testing.

Test

Publish

You have to publish it before expose it to the internet. Click Publish from top of the windows then click again from the new window to be displayed. It may take some time to complete.

Publishing Knowledge Base

Once publishing completes you will get following screen. We are going to use config. keys while using the service in my blog page as a widget.

Summarization of QnA Service

Caller creation in HTML for widget

Our service is ready to answer any questions regarding posts at my blog page. We have already got necessary connection string(s), credentials detail and response in JSON as seen just above.

I am going to create a html page to send question to and receive answer from MyPosts KB under QnA Maker service.

I use jquery to send request and get response.

Service responds back JSON object that contains answer of the question the best possible one in the Knowledge base.

In order to increase quality of answer we should train it properly and feed it with well format input.

Here is the code snapshot;

QnABot.html

 <!DOCTYPE html>  
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <meta charset="utf-8" />  
   <title>How may I help you?</title>  
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>  
 <body>  
   How may I help you?  
   <br />  
   Type your question below  
   <br />  
   <textarea id="txtQuestionId" maxlength="2048" rows="10" cols="30"></textarea>  
   <br />  
   <br />  
   <textarea id="answerId" maxlength="2048" rows="10" cols="30"></textarea>  
   <br />  
   <br />  
   <script type="text/javascript">  
     $("#txtQuestionId").keypress(function (event) {  
       var keycode = (event.keyCode ? event.keyCode : event.which);  
       if (keycode == '13') {  
         var question = {  
           question: document.getElementById("txtQuestionId").value  
         }  
         $.ajax({  
           type: "POST",  
           url: "https://muhammetatalay.azurewebsites.net/qnamaker/knowledgebases/527abe3c-a503-4a4b-8c56-f0288a772621/generateAnswer",  
           data: JSON.stringify(question),  
           beforeSend: function (xhr) {  
             xhr.setRequestHeader('Authorization', 'EndpointKey e7b198fa-a27b-4a31-ac2b-c51b31288d35');  
           },  
           dataType: "json",  
           contentType: "application/json",  
           success: function (data) {  
             document.getElementById("answerId").value = data.answers[0].answer  
           }  
         });  
       }  
     });  
   </script>  
 </body>  
 </html >

Publish It in muhammetatalay.com

I am using blogspot.com for my posts and I bind domain name of mine to the post through settings in blogspot.com.

Open your blogspot.com panel - Important Notice : not all templates support widget, find proper one if needs.
Go to Layout section from the page.

Layout

Click "Add a Gadget" then choose HTML/Javascript from popup window

Adding a Gadget

check Visible for "Show HTML/Javascript" then add title
Paste html code of above to the Content.Finally click "Save"

Configuration panel of HTML/Javascript

Click "Save arrangement"

Here we go:

How it works !

that's all :)

enjoy...

Search This Blog

I.T. Notes