From 4bbc7ee1a0a94369850c356c6703f0fcc8e26909 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 6 Feb 2023 23:37:18 +0000 Subject: [PATCH] Api key via web interface --- application/app.py | 8 +- application/static/dist/css/output.css | 540 +++++++++++++++++++++++-- application/static/src/authapi.js | 15 + application/static/src/chat.js | 3 +- application/static/src/input.css | 1 + application/templates/index.html | 46 ++- 6 files changed, 585 insertions(+), 28 deletions(-) create mode 100644 application/static/src/authapi.js diff --git a/application/app.py b/application/app.py index 95ac4a2b..08d4d316 100644 --- a/application/app.py +++ b/application/app.py @@ -39,18 +39,24 @@ def home(): def api_answer(): data = request.get_json() question = data["question"] + api_key = data["api_key"] store.index = index # create a prompt template c_prompt = PromptTemplate(input_variables=["summaries", "question"], template=template) # create a chain with the prompt template and the store - chain = VectorDBQAWithSourcesChain.from_llm(llm=OpenAI(temperature=0), vectorstore=store, combine_prompt=c_prompt) + chain = VectorDBQAWithSourcesChain.from_llm(llm=OpenAI(openai_api_key=api_key, temperature=0), vectorstore=store, combine_prompt=c_prompt) # fetch the answer result = chain({"question": question}) # some formatting for the frontend result['answer'] = result['answer'].replace("\\n", "
") result['answer'] = result['answer'].replace("SOURCES:", "") + # mock result + # result = { + # "answer": "The answer is 42", + # "sources": ["https://en.wikipedia.org/wiki/42_(number)", "https://en.wikipedia.org/wiki/42_(number)"] + # } return result diff --git a/application/static/dist/css/output.css b/application/static/dist/css/output.css index 47f390b3..5fc831f4 100644 --- a/application/static/dist/css/output.css +++ b/application/static/dist/css/output.css @@ -513,6 +513,14 @@ video { --tw-backdrop-sepia: ; } +.pointer-events-none { + pointer-events: none; +} + +.pointer-events-auto { + pointer-events: auto; +} + .static { position: static; } @@ -521,24 +529,47 @@ video { position: fixed; } -.bottom-0 { - bottom: 0px; +.absolute { + position: absolute; } -.right-0 { +.relative { + position: relative; +} + +.inset-0 { + top: 0px; right: 0px; + bottom: 0px; + left: 0px; +} + +.top-0 { + top: 0px; } .left-0 { left: 0px; } -.left-10 { - left: 2.5rem; +.bottom-0 { + bottom: 0px; } -.right-10 { - right: 2.5rem; +.z-10 { + z-index: 10; +} + +.ml-1 { + margin-left: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-2 { + margin-right: 0.5rem; } .mt-2 { @@ -553,18 +584,34 @@ video { margin-top: 1rem; } -.ml-2 { - margin-left: 0.5rem; +.mb-3 { + margin-bottom: 0.75rem; } -.mr-2 { - margin-right: 0.5rem; +.box-content { + box-sizing: content-box; +} + +.inline-block { + display: inline-block; } .flex { display: flex; } +.hidden { + display: none; +} + +.h-full { + height: 100%; +} + +.h-4 { + height: 1rem; +} + .h-5\/6 { height: 83.333333%; } @@ -581,10 +628,36 @@ video { width: 100%; } +.w-auto { + width: auto; +} + +.w-4 { + width: 1rem; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-center { align-items: center; } @@ -593,6 +666,14 @@ video { align-items: stretch; } +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + .justify-between { justify-content: space-between; } @@ -605,19 +686,85 @@ video { align-self: flex-end; } -.justify-self-stretch { - justify-self: stretch; +.overflow-hidden { + overflow: hidden; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.overflow-x-hidden { + overflow-x: hidden; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.rounded-none { + border-radius: 0px; } .rounded-lg { border-radius: 0.5rem; } +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} + +.rounded-b-md { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + +.border-2 { + border-width: 2px; +} + +.border-b { + border-bottom-width: 1px; +} + +.border-t { + border-top-width: 1px; +} + +.border-none { + border-style: none; +} + +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); +} + .bg-indigo-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); @@ -628,10 +775,118 @@ video { background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} + +.bg-clip-padding { + background-clip: padding-box; +} + +.p-4 { + padding: 1rem; +} + +.p-1 { + padding: 0.25rem; +} + .p-2 { padding: 0.5rem; } +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pb-20 { + padding-bottom: 5rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + +.pb-4 { + padding-bottom: 1rem; +} + +.pr-16 { + padding-right: 4rem; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -646,9 +901,16 @@ video { font-weight: 500; } -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); +.uppercase { + text-transform: uppercase; +} + +.leading-tight { + line-height: 1.25; +} + +.leading-normal { + line-height: 1.5; } .text-white { @@ -656,6 +918,94 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-current { + color: currentColor; +} + +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} + +.opacity-50 { + opacity: 0.5; +} + +.opacity-75 { + opacity: 0.75; +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-150 { + transition-duration: 150ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + @media screen and (max-width: 1024px) { .text-lg { font-size: 3.125rem; @@ -691,17 +1041,161 @@ video { } } +.hover\:bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.hover\:bg-purple-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.hover\:bg-blue-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.hover\:text-black:hover { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + .hover\:text-blue-800:hover { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity)); } -@media (min-width: 640px) { - @media not all and (min-width: 1024px) { - .sm\:max-lg\:mb-12 { - margin-bottom: 3rem; - } +.hover\:text-yellow-800:hover { + --tw-text-opacity: 1; + color: rgb(133 77 14 / var(--tw-text-opacity)); +} +.hover\:no-underline:hover { + text-decoration-line: none; +} + +.hover\:opacity-75:hover { + opacity: 0.75; +} + +.hover\:shadow-lg:hover { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:border-indigo-700:focus { + --tw-border-opacity: 1; + border-color: rgb(67 56 202 / var(--tw-border-opacity)); +} + +.focus\:bg-blue-700:focus { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.focus\:bg-purple-700:focus { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +.focus\:bg-white:focus { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.focus\:opacity-100:focus { + opacity: 1; +} + +.focus\:shadow-lg:focus { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:shadow-none:focus { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-0:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.active\:bg-blue-800:active { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.active\:bg-purple-800:active { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); +} + +.active\:shadow-lg:active { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +@media (min-width: 640px) { + .sm\:my-8 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .sm\:block { + display: block; + } + + .sm\:inline-block { + display: inline-block; + } + + .sm\:h-screen { + height: 100vh; + } + + .sm\:w-full { + width: 100%; + } + + .sm\:max-w-lg { + max-width: 32rem; + } + + .sm\:p-0 { + padding: 0px; + } + + .sm\:p-6 { + padding: 1.5rem; + } + + .sm\:pb-4 { + padding-bottom: 1rem; + } + + .sm\:align-middle { + vertical-align: middle; + } + + @media not all and (min-width: 1024px) { .sm\:max-lg\:mb-\[12rem\] { margin-bottom: 12rem; } @@ -725,10 +1219,6 @@ video { width: 75%; } - .lg\:w-\[46rem\] { - width: 46rem; - } - .lg\:w-1\/4 { width: 25%; } diff --git a/application/static/src/authapi.js b/application/static/src/authapi.js new file mode 100644 index 00000000..d13d8aa0 --- /dev/null +++ b/application/static/src/authapi.js @@ -0,0 +1,15 @@ +function resetApiKey() { + document.getElementById('modal').classList.toggle('hidden') +} + + +var el2 = document.getElementById('api-key-form'); +if (el2) { + el2.addEventListener("submit", function (event) { + event.preventDefault() + var apiKey = document.getElementById("api-key-input").value; + document.getElementById('modal').classList.toggle('hidden') + localStorage.setItem('apiKey', apiKey) + document.getElementById('api-key-input').value = '' + }); +} diff --git a/application/static/src/chat.js b/application/static/src/chat.js index df26216d..9a830f23 100644 --- a/application/static/src/chat.js +++ b/application/static/src/chat.js @@ -19,7 +19,8 @@ if (el) { headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify({question: message}), + + body: JSON.stringify({question: message, api_key: localStorage.getItem('apiKey')}), }) .then(response => response.json()) .then(data => { diff --git a/application/static/src/input.css b/application/static/src/input.css index a17532fe..9f0736b9 100644 --- a/application/static/src/input.css +++ b/application/static/src/input.css @@ -4,6 +4,7 @@ + @media screen and (max-width: 1024px) { .text-lg { font-size: 3.125rem; diff --git a/application/templates/index.html b/application/templates/index.html index b3368182..80688a8f 100644 --- a/application/templates/index.html +++ b/application/templates/index.html @@ -6,11 +6,20 @@ + + + + + +
-

DocsGPT 🦖 Very early Preview

+

DocsGPT 🦖 Preview

+
About + +
@@ -54,6 +63,41 @@ This will return a new DataFrame with all the columns from both tables, and only

If you want to launch it on your own server - follow this guide

+ +
+ +
+