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