From 2df4ef9660c7eac1ef15724b26226d4b8a78a843 Mon Sep 17 00:00:00 2001
From: Thamognya Kodi <contact@thamognya.com>
Date: Mon, 2 Jan 2023 23:34:56 +0700
Subject: [PATCH] update: look at todo

---
 .github/TODO.md                               |   3 +-
 web/frontend/assets/css/main.scss             |  24 +++
 web/frontend/assets/css/url.module.scss       |  23 ---
 web/frontend/components/FooterBar.vue         |   0
 web/frontend/components/NavBar.vue            |   6 +
 web/frontend/package.json                     |   2 +
 web/frontend/pages/NLP/context/index.vue      |   0
 web/frontend/pages/{NLP.vue => NLP/index.vue} |  24 +--
 web/frontend/pages/NLP/no-context/index.vue   |  24 +++
 .../pages/NLP/no-context/question-answer.vue  | 154 ++++++++++++++++++
 web/frontend/pages/index.vue                  |  40 ++---
 web/frontend/yarn.lock                        |  18 +-
 12 files changed, 261 insertions(+), 57 deletions(-)
 delete mode 100644 web/frontend/assets/css/url.module.scss
 create mode 100644 web/frontend/components/FooterBar.vue
 create mode 100644 web/frontend/components/NavBar.vue
 create mode 100644 web/frontend/pages/NLP/context/index.vue
 rename web/frontend/pages/{NLP.vue => NLP/index.vue} (51%)
 create mode 100644 web/frontend/pages/NLP/no-context/index.vue
 create mode 100644 web/frontend/pages/NLP/no-context/question-answer.vue

diff --git a/.github/TODO.md b/.github/TODO.md
index 1942cb3..0c47261 100644
--- a/.github/TODO.md
+++ b/.github/TODO.md
@@ -1,4 +1,5 @@
-- [ ] make frontend
+- [ ] make frontend -> look better plus clean up code 
 - [ ] find better way of using .env from django (possibly)
+- [ ] use gpt-neox-20b for qa
 - [x] Get package to use .env from django
 - [x] IMP IMP work on API_KEY fixing config or use .env
diff --git a/web/frontend/assets/css/main.scss b/web/frontend/assets/css/main.scss
index 16ea3a9..20d51d8 100644
--- a/web/frontend/assets/css/main.scss
+++ b/web/frontend/assets/css/main.scss
@@ -5,3 +5,27 @@
 * {
     font-family: 'Fira Code', 'Times New Roman', Times, serif;
 }
+
+.url {
+    display: inline-block;
+    position: relative;
+    color: #000;
+}
+
+.url::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+}
+
+.url:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+}
diff --git a/web/frontend/assets/css/url.module.scss b/web/frontend/assets/css/url.module.scss
deleted file mode 100644
index ef74f47..0000000
--- a/web/frontend/assets/css/url.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.url {
-    display: inline-block;
-    position: relative;
-    color: #000;
-}
-
-.url::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    transform: scaleX(0);
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    background-color: #000;
-    transform-origin: bottom right;
-    transition: transform 0.25s ease-out;
-}
-
-.url:hover::after {
-    transform: scaleX(1);
-    transform-origin: bottom left;
-}
diff --git a/web/frontend/components/FooterBar.vue b/web/frontend/components/FooterBar.vue
new file mode 100644
index 0000000..e69de29
diff --git a/web/frontend/components/NavBar.vue b/web/frontend/components/NavBar.vue
new file mode 100644
index 0000000..8773dd9
--- /dev/null
+++ b/web/frontend/components/NavBar.vue
@@ -0,0 +1,6 @@
+<script lang="typescript">
+// const mobileOpen = useState('mobileOpen', () => false)
+</script>
+
+<template lang="pug">
+</template>
diff --git a/web/frontend/package.json b/web/frontend/package.json
index d70a11f..4edb47f 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -22,7 +22,9 @@
     },
     "dependencies": {
         "@nuxt/content": "^1.0.0",
+        "@nuxt/vue-app": "^2.15.8",
         "@nuxtjs/axios": "^5.13.6",
+        "@nuxtjs/composition-api": "^0.33.1",
         "@nuxtjs/pwa": "^3.3.5",
         "core-js": "^3.25.3",
         "nuxt": "^2.15.8",
diff --git a/web/frontend/pages/NLP/context/index.vue b/web/frontend/pages/NLP/context/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/web/frontend/pages/NLP.vue b/web/frontend/pages/NLP/index.vue
similarity index 51%
rename from web/frontend/pages/NLP.vue
rename to web/frontend/pages/NLP/index.vue
index 24fdace..6c2f2ca 100644
--- a/web/frontend/pages/NLP.vue
+++ b/web/frontend/pages/NLP/index.vue
@@ -1,18 +1,22 @@
+<script>
+import Vue from 'vue'
+export default Vue.extend({
+    name: 'InternetNLP'
+})
+</script>
+
 <template lang="pug">
 html(lang="en")
   body
     div(class="grid grid-cols-1 place-content-center align-middle gap-y-10 h-screen text-center")
       div(class="grid grid-cols-1 place-self-center")
         h1(class="text-5xl")
-          a(href="/" class="url") Internet-NLP
+          a(href="/" class="url") internet-nlp
         h1(class="text-2xl")
-          a(href="https://links.thamognya.com" class="url") by Thamognya Kodi
+          a(href="/" class="url") part of internet-ml
+      div(class="grid md:grid-cols-2 grid-cols-1 gap-y-4 place-items-center")
+        h1(class="text-2xl")
+          a(href="/nlp/no-context" class="url") no context
+        h1(class="text-2xl")
+          a(href="/nlp/context" class="url") context
 </template>
-
-<script>
-import Vue from 'vue'
-import '@/assets/css/url.module.scss'
-export default Vue.extend({
-    name: 'InternetNLP'
-})
-</script>
diff --git a/web/frontend/pages/NLP/no-context/index.vue b/web/frontend/pages/NLP/no-context/index.vue
new file mode 100644
index 0000000..6b214be
--- /dev/null
+++ b/web/frontend/pages/NLP/no-context/index.vue
@@ -0,0 +1,24 @@
+<script>
+import Vue from 'vue'
+export default Vue.extend({
+    name: 'InternetNLP'
+})
+</script>
+
+<template lang="pug">
+html(lang="en")
+  body
+    div(class="grid grid-cols-1 place-content-center align-middle gap-y-10 h-screen text-center")
+      div(class="grid grid-cols-1 place-self-center")
+        h1(class="text-5xl")
+          a(href="/NLP" class="url") Internet-NLP
+        h1(class="text-2xl")
+          a(href="/NLP/no-context" class="url") No context tools
+        h1(class="text-2xl")
+          a(href="/" class="url") Part of Internet-ML
+      div(class="grid md:grid-cols-2 grid-cols-1 gap-y-4 place-items-center")
+        h1(class="text-2xl")
+          a(href="/NLP/no-context/question-answer" class="url") Question Answering
+        h1(class="text-2xl")
+          a(href="/NLP/context/NLI" class="url") NLI
+</template>
diff --git a/web/frontend/pages/NLP/no-context/question-answer.vue b/web/frontend/pages/NLP/no-context/question-answer.vue
new file mode 100644
index 0000000..c1870e3
--- /dev/null
+++ b/web/frontend/pages/NLP/no-context/question-answer.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="container mx-auto p-4">
+        <form v-if="!loading" @submit.prevent="submitForm">
+            <label class="block font-bold text-lg mb-2" for="question"
+                >Question</label
+            >
+            <textarea
+                id="question"
+                v-model="form.question"
+                class="border rounded w-full py-2 px-3"
+                rows="5"
+            ></textarea>
+            <button
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                type="submit"
+            >
+                Submit
+            </button>
+        </form>
+        <div v-if="loading" class="flex items-center justify-center h-screen">
+            <div class="lds-ring">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <div v-if="answer !== null" class="mt-4 font-bold">
+            <p>Question: {{ tmpquestion }}</p>
+            <p class="typed-text">Answer: {{ typedAnswer }}</p>
+            <p>Urls:</p>
+            <ul v-if="typedAnswer.length === answer.length && urls !== null">
+                <li v-for="url in urls" :key="url">
+                    <a :href="url" class="url">- {{ url }}</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                question: ''
+            },
+            answer: null,
+            loading: false,
+            typedAnswer: '',
+            urls: null
+        }
+    },
+    methods: {
+        resetForm() {
+            this.form.question = ''
+            this.answer = null
+            this.loading = false
+            this.typedAnswer = ''
+            this.urls = null
+        },
+        async submitForm() {
+            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
+                this.loading = false
+                // console.log(this.answer)
+                const interval = setInterval(() => {
+                    this.typedAnswer +=
+                        this.answer[this.typedAnswer.length] || ''
+                    if (this.typedAnswer.length === this.answer.length) {
+                        clearInterval(interval)
+                    }
+                }, 150)
+                this.urls = data.resources
+            } catch (error) {
+                // console.error(error)
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #000;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #000 transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.typed-text {
+    position: relative;
+    display: inline;
+}
+
+.typed-text::after {
+    content: '|';
+    animation: blink 0.7s infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+</style>
diff --git a/web/frontend/pages/index.vue b/web/frontend/pages/index.vue
index e45e7e5..f0bcbc2 100644
--- a/web/frontend/pages/index.vue
+++ b/web/frontend/pages/index.vue
@@ -1,25 +1,25 @@
-<template lang="pug">
-html(lang="en")
-  body
-    div(class="grid grid-cols-1 place-content-center align-middle gap-y-10 h-screen text-center")
-      div(class="grid grid-cols-1 place-self-center")
-        h1(class="text-5xl")
-          a(href="/" class="url") Internet-ML
-        h1(class="text-2xl")
-          a(href="https://links.thamognya.com" class="url") by Thamognya Kodi
-      div(class="grid sm:grid-cols-3 grid-cols-1 gap-y-4 place-items-center")
-        h1(class="text-3xl")
-          a(href="/NLP" class="url") NLP
-        h1(class="text-3xl")
-          a(href="/#" class="url") Image Generation (in-progress)
-        h1(class="text-3xl")
-          a(href="/#" class="url") Audio (in-progress)
-</template>
-
-<script>
+<script lang="typescript">
 import Vue from 'vue'
-import '@/assets/css/url.module.scss'
 export default Vue.extend({
     name: 'IndexPage'
 })
 </script>
+
+<template lang="pug">
+html(lang="en")
+  body
+    //- navbar
+    div(class="grid grid-cols-1 place-content-center align-middle gap-y-10 h-screen text-center")
+      div(class="grid grid-cols-1 place-self-center")
+        h1(class="text-5xl")
+          a(href="/" class="url") Internet-ML
+        h1(class="text-xl")
+          a(href="https://links.thamognya.com" class="url") by Thamognya Kodi
+      div(class="grid md:grid-cols-3 grid-cols-1 gap-y-4 place-items-center")
+        h1(class="text-2xl")
+          a(href="/NLP" class="url") NLP
+        h1(class="text-2xl")
+          a(href="/#" class="url") Image Generation (in-progress)
+        h1(class="text-2xl")
+          a(href="/#" class="url") Audio (in-progress)
+</template>
diff --git a/web/frontend/yarn.lock b/web/frontend/yarn.lock
index 2c52062..0eff329 100644
--- a/web/frontend/yarn.lock
+++ b/web/frontend/yarn.lock
@@ -1898,7 +1898,7 @@
     ua-parser-js "^0.7.28"
     ufo "^0.7.4"
 
-"@nuxt/vue-app@2.15.8":
+"@nuxt/vue-app@2.15.8", "@nuxt/vue-app@^2.15.8":
   version "2.15.8"
   resolved "https://registry.yarnpkg.com/@nuxt/vue-app/-/vue-app-2.15.8.tgz#46b7ec8fc93f8d1f4cdf4f6b04134cb40ceb7c4a"
   integrity sha512-FJf9FSMPsWT3BqkS37zEuPTxLKzSg2EIwp1sP8Eou25eE08qxRfe2PwTVA8HnXUPNdpz2uk/T9DlNw+JraiFRQ==
@@ -1993,6 +1993,18 @@
     consola "^2.15.3"
     defu "^5.0.0"
 
+"@nuxtjs/composition-api@^0.33.1":
+  version "0.33.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/composition-api/-/composition-api-0.33.1.tgz#509ace1ac1e5d3e73ab3a949efacf14f35a46da3"
+  integrity sha512-dI0c5atKDsEIVycrsKw9T+aaos2VggscSJBPZpC1BXKzHR7+9Ilor+SHvnAEb5j2E2v+8x407Uo339oJzhlD1A==
+  dependencies:
+    defu "^6.0.0"
+    estree-walker "^2.0.2"
+    fs-extra "^9.1.0"
+    magic-string "^0.26.2"
+    pathe "^0.3.3"
+    ufo "^0.8.5"
+
 "@nuxtjs/eslint-config-typescript@^11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/eslint-config-typescript/-/eslint-config-typescript-11.0.0.tgz#748a0cc063a5cf93ec52dc2d5a2ed94309cacb5b"
@@ -8966,7 +8978,7 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-magic-string@^0.26.7:
+magic-string@^0.26.2, magic-string@^0.26.7:
   version "0.26.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"
   integrity sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==
@@ -10370,7 +10382,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathe@^0.3.8, pathe@^0.3.9:
+pathe@^0.3.3, pathe@^0.3.8, pathe@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.3.9.tgz#4baff768f37f03e3d9341502865fb93116f65191"
   integrity sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==