微軟AI測試

嘗試介接微軟QnA 服務

by sj82516

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="test">
    <h1>微軟 API測試</h1>
    <h2>問題集</h2>
    <p>{{status}}</p>
    <ul>
        <li v-for="qa in qaList">
            {{ qa.question }} : {{qa.answer}}
        </li>
    </ul>
    <form>
        <label>新增問題</label>
        <input v-model="newQA.question" placeholder="問題描述">
        <label>新增回答</label>
        <input v-model="newQA.answer" placeholder="回答描述">
        <button @click.prevent="submitNewQA">提交</button>
    </form>
    <h2>來發問</h2>
    <form>
        <p>AI的回答：{{currentQA.answer}}</p>
        <p>回答相關性分數：{{currentQA.answerScore}}</p>
        <label>請問問題</label>
        <input v-model="currentQA.question" placeholder="問題">
        <button @click.prevent="askQ">提交</button>
        <p style="color:red" v-if="currentQA.error">生回答{{currentQA.error}}</p>
        <h6>生回答{{currentQA.answerRaw}}</h6>
    </form>
</div>

JavaScript

const key = "4ca2379b511745d0a700601f29fbb327"
const kb_id = "b5f52703-8d22-4c5f-883c-8b1801d9710a"
// 固定的Header驗證
const authHeader = {
    headers:{
    	"Content-Type": "application/json",
    	"Ocp-Apim-Subscription-Key": key
    }
}

// 取得目前所有KB的資料
function getKnowledgeBase(params){
	return axios.get("https://westus.api.cognitive.microsoft.com/qnamaker/v3.0/knowledgebases/" + kb_id , authHeader)
}

// 加入Knowledge base
function createKnowledgeBase(params){
	return axios.post("https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/create",params ,authHeader)
}

//產生答案
function generateAnswer(question){
	return axios.post("https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/" + kb_id + "/generateAnswer", {
    	question: question,
        top: 1
    }, authHeader)
}

function publish(){
	return axios.put("https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/" + kb_id,{}, authHeader)
}

// 更新資料集
function updateKnowledgeBase(params){
	return axios.patch("https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/" + kb_id, params, authHeader)
}

////// 頁面邏輯
var demo = new Vue({
    el: '#test',
    data: {
    	status: "完成",
        dataset_url: "",
        newQA:{
        	question: "",
            answer: ""
        },
        currentQA:{
        	question: "",
            answer: "請提問",
            answerScore: 0,
            answerRaw: ""
        },
        qaList: []
    },
    methods: {
    	submitNewQA: function(){
        	this.status = "準備加入新資料"
        	updateKnowledgeBase({
            	"add": {
                    "qnaPairs": [
                        {
                            "answer": this.newQA.answer,
                            "question": this.newQA.question
                        }
                    ],
                },
            }).then(response => {
            	this.status = "資料庫增加成功，準備retrain"
            	this.qaList.push({
                	question:...