109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template lang="pug">
|
|
div
|
|
.container.mx-auto.p-4
|
|
form(v-if="!loading", @submit.prevent="submitForm")
|
|
label.block.font-bold.text-lg.mb-2(for="question") Question
|
|
textarea#question.border.rounded.w-full.py-2.px-3(
|
|
v-model="form.question",
|
|
rows="5"
|
|
)
|
|
button.bg-blue-500.text-white.font-bold.py-2.px-4.rounded(
|
|
class="hover:bg-blue-700",
|
|
type="submit",
|
|
v-if="form.submitCounter < 600"
|
|
)
|
|
| Submit
|
|
p.bg-red-500(v-if="form.submitCounter >= 600") Please wait for sometime as you have made 600 requests within one hour.
|
|
.flex.items-center.justify-center.h-screen(v-if="loading")
|
|
loadingwheel
|
|
.mt-4.font-bold(v-if="answer !== null")
|
|
p Question: {{ tmpquestion }}
|
|
p.typed-text Answer: {{ typedAnswer }}
|
|
p Urls:
|
|
ul(v-if="typedAnswer.length === answer.length && urls !== null")
|
|
li(v-for="url in urls", :key="url")
|
|
a.url(:href="url") - {{ url }}
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import LoadingWheel from '~/components/LoadingWheel.vue'
|
|
|
|
export default {
|
|
components: { LoadingWheel },
|
|
data() {
|
|
return {
|
|
form: {
|
|
question: '',
|
|
submitCounter: 0
|
|
},
|
|
answer: null,
|
|
loading: false,
|
|
typedAnswer: '',
|
|
urls: null
|
|
}
|
|
},
|
|
created() {
|
|
setInterval(() => {
|
|
this.form.submitCounter = 0
|
|
}, 3600000)
|
|
},
|
|
methods: {
|
|
resetForm() {
|
|
this.form.question = ''
|
|
this.answer = null
|
|
this.loading = false
|
|
this.typedAnswer = ''
|
|
this.urls = null
|
|
},
|
|
async submitForm() {
|
|
this.form.submitCounter++
|
|
this.loading = true
|
|
try {
|
|
const { data } = await this.$axios.post(
|
|
'http://localhost:8080/api/nlp/no-context/question-answering/',
|
|
{
|
|
question: this.form.question
|
|
}
|
|
)
|
|
this.tmpquestion = this.form.question
|
|
this.resetForm()
|
|
this.answer = data.response.answer
|
|
const typingInterval = setInterval(() => {
|
|
this.typedAnswer +=
|
|
this.answer[this.typedAnswer.length] || ''
|
|
if (this.typedAnswer.length === this.answer.length) {
|
|
clearInterval(typingInterval)
|
|
}
|
|
}, 150)
|
|
this.urls = data.resources
|
|
} catch (error) {
|
|
// console.error(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.typed-text {
|
|
position: relative;
|
|
display: inline;
|
|
}
|
|
|
|
.typed-text::after {
|
|
content: '|';
|
|
animation: blink 0.7s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|