Skip to content

Instantly share code, notes, and snippets.

@lixinsu

lixinsu/index.html

Created June 7, 2018 01:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lixinsu/d76d63ed1402a93f7b89a6810bfb1c55 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lixinsu/d76d63ed1402a93f7b89a6810bfb1c55 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="app-5" class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
<select class="selectpicker" v-model="P">
<option>P1</option>
<option>P2</option>
<option>P3</option>
<option>P4</option>
<option>P5</option>
<option>P6</option>
<option>P7</option>
<option>P8</option>
<option>P9</option>
<option>P10</option>
</select>
<div class="form-group">
<label for="passage">Passage:</label></br>
<textarea v-model="passage" id="passage" class="form-control" rows="5"></textarea></br>
<label for="question">Query:</label></br>
<textarea v-model="question" id="question" class="form-control" rows="1"></textarea>
<label for="ganswer">Groundtruth Answers:</label></br>
<textarea v-model="ganswer" id="ganswer" class="form-control" rows="1"></textarea>
<label for="answer">Answers:</label></br>
<textarea v-model="answer" id="answer" class="form-control" rows="1"></textarea>
</div>
<button v-on:click="reverseMessage"> get answer</button>
</div>
<div class="col-md-6">
<p>each token with start end probability</p>
<ol>
<li v-for="token in tokens">
{{ token }}
</li>
</ol>
</div>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
answer: 'test',
question: 'what are gummy worms really made of',
passage: 'In its factory in Turkey , Haribo produces halal bears and other sweets which are made with bovine gelatin . Also , some gummy bears are made with pectin or starch instead of gelatin , making them suitable for vegetarians',
tokens: ['token','token'],
P: 'P1'
},
watch:{
P (val, oldval){
console.log(val, oldval)
var vm = this
axios.post('/case', {
caseid: val}).then(function (response) {
vm.question = response.data.q
vm.passage = response.data.p
vm.ganswer = response.data.ga
}).catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
,
methods: {
reverseMessage: function () {
var vm = this
vm.answer = 'Thinking...'
if (vm.question === '' || vm.passage === ''){
vm.answer = 'please input question and passage'
return
}
axios.post('/rc', {
q: this.question, p: this.passage}).then(function (response) {
vm.answer = response.data.answer
vm.tokens = response.data.detail
console.log(response.data.detail)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment