internet_ml/web/frontend/pages/NLP/no-context/question-answer.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>