From 2232bdc0910f677174e4ad2cb12476890e3caa0c Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 6 Feb 2023 11:45:42 +0000 Subject: [PATCH 1/2] More responsive --- application/static/dist/css/output.css | 48 ++++++++++++++++++++++---- application/static/src/chat.js | 4 +-- application/templates/index.html | 8 ++--- 3 files changed, 48 insertions(+), 12 deletions(-) diff --git a/application/static/dist/css/output.css b/application/static/dist/css/output.css index a9afa825..c2ecec57 100644 --- a/application/static/dist/css/output.css +++ b/application/static/dist/css/output.css @@ -517,6 +517,14 @@ video { position: static; } +.fixed { + position: fixed; +} + +.bottom-0 { + bottom: 0px; +} + .mb-2 { margin-bottom: 0.5rem; } @@ -537,6 +545,34 @@ video { display: flex; } +.hidden { + display: none; +} + +.h-5\/6 { + height: 83.333333%; +} + +.h-1\/2 { + height: 50%; +} + +.h-full { + height: 100%; +} + +.h-screen { + height: 100vh; +} + +.max-h-screen { + max-height: 100vh; +} + +.min-h-screen { + min-height: 100vh; +} + .w-3\/4 { width: 75%; } @@ -592,19 +628,19 @@ video { background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } -.bg-blue-100 { +.bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } -.bg-gray-200 { +.bg-gray-900 { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } -.bg-gray-500 { +.bg-yellow-500 { --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } .p-2 { diff --git a/application/static/src/chat.js b/application/static/src/chat.js index ee53617a..df26216d 100644 --- a/application/static/src/chat.js +++ b/application/static/src/chat.js @@ -8,7 +8,7 @@ if (el) { msg_html += message msg_html += '

' document.getElementById("messages").innerHTML += msg_html; - let chatWindow = document.getElementById("chat-container"); + let chatWindow = document.getElementById("messages-container"); chatWindow.scrollTop = chatWindow.scrollHeight; document.getElementById("message-input").value = ""; document.getElementById("button-submit").innerHTML = ' Thinking...'; @@ -28,7 +28,7 @@ if (el) { msg_html += data.answer msg_html += '' document.getElementById("messages").innerHTML += msg_html; - let chatWindow = document.getElementById("chat-container"); + let chatWindow = document.getElementById("messages-container"); chatWindow.scrollTop = chatWindow.scrollHeight; document.getElementById("button-submit").innerHTML = 'Send'; document.getElementById("button-submit").disabled = false; diff --git a/application/templates/index.html b/application/templates/index.html index 4ebd3c8a..7277c01d 100644 --- a/application/templates/index.html +++ b/application/templates/index.html @@ -13,9 +13,9 @@ About
-
+
-
+
@@ -36,9 +36,9 @@ This will return a new DataFrame with all the columns from both tables, and only
-
+
- +
From 11c1aaec20b9889119badde3f76723eb303c8e0d Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 6 Feb 2023 12:59:50 +0000 Subject: [PATCH 2/2] Mobie version --- application/app.py | 1 + application/static/dist/css/output.css | 152 +++++++++++++------------ application/static/src/input.css | 48 +++----- application/templates/index.html | 20 ++-- 4 files changed, 102 insertions(+), 119 deletions(-) diff --git a/application/app.py b/application/app.py index bbfc0604..95ac4a2b 100644 --- a/application/app.py +++ b/application/app.py @@ -52,6 +52,7 @@ def api_answer(): result['answer'] = result['answer'].replace("\\n", "
") result['answer'] = result['answer'].replace("SOURCES:", "") + return result diff --git a/application/static/dist/css/output.css b/application/static/dist/css/output.css index c2ecec57..47f390b3 100644 --- a/application/static/dist/css/output.css +++ b/application/static/dist/css/output.css @@ -525,6 +525,26 @@ video { bottom: 0px; } +.right-0 { + right: 0px; +} + +.left-0 { + left: 0px; +} + +.left-10 { + left: 2.5rem; +} + +.right-10 { + right: 2.5rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + .mb-2 { margin-bottom: 0.5rem; } @@ -545,26 +565,10 @@ video { display: flex; } -.hidden { - display: none; -} - .h-5\/6 { height: 83.333333%; } -.h-1\/2 { - height: 50%; -} - -.h-full { - height: 100%; -} - -.h-screen { - height: 100vh; -} - .max-h-screen { max-height: 100vh; } @@ -573,22 +577,10 @@ video { min-height: 100vh; } -.w-3\/4 { - width: 75%; -} - .w-full { width: 100%; } -.w-\[46rem\] { - width: 46rem; -} - -.w-1\/4 { - width: 25%; -} - .flex-col { flex-direction: column; } @@ -597,6 +589,10 @@ video { align-items: center; } +.items-stretch { + align-items: stretch; +} + .justify-between { justify-content: space-between; } @@ -609,6 +605,10 @@ video { align-self: flex-end; } +.justify-self-stretch { + justify-self: stretch; +} + .rounded-lg { border-radius: 0.5rem; } @@ -628,21 +628,6 @@ video { background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-yellow-500 { - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - .p-2 { padding: 0.5rem; } @@ -671,39 +656,18 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -#chat-container { - height: 44rem; - background-color: white; - padding: 10px; - overflow: auto; -} +@media screen and (max-width: 1024px) { + .text-lg { + font-size: 3.125rem; + margin: 2rem; + line-height: inherit; + } -.bg-gray-200 { - background-color: #edf2f7; -} - -.bg-gray-900 { - background-color: #1a202c; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.shadow { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} - -.text-gray-700 { - color: #4a5568; -} - -.text-sm { - font-size: 0.875rem; -} - -.p-4 { - padding: 1.5rem; + .text-sm { + font-size: 2.5rem; + margin: 1.5rem; + line-height: inherit; + } } .loader { @@ -732,4 +696,42 @@ video { 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; + } + + .sm\:max-lg\:mb-\[12rem\] { + margin-bottom: 12rem; + } + + .sm\:max-lg\:hidden { + display: none; + } + + .sm\:max-lg\:p-5 { + padding: 1.25rem; + } + } +} + +@media (min-width: 1024px) { + .lg\:flex { + display: flex; + } + + .lg\:w-3\/4 { + width: 75%; + } + + .lg\:w-\[46rem\] { + width: 46rem; + } + + .lg\:w-1\/4 { + width: 25%; + } +} + diff --git a/application/static/src/input.css b/application/static/src/input.css index 8d6c99b5..a17532fe 100644 --- a/application/static/src/input.css +++ b/application/static/src/input.css @@ -2,43 +2,23 @@ @tailwind components; @tailwind utilities; -#chat-container { - height: 44rem; - background-color: white; - padding: 10px; - overflow: auto; + + +@media screen and (max-width: 1024px) { + .text-lg { + font-size: 3.125rem; + margin: 2rem; + line-height: inherit; + } + .text-sm { + font-size: 2.5rem; + margin: 1.5rem; + line-height: inherit; + } + } - -.bg-gray-200 { - background-color: #edf2f7; - } - - .bg-gray-900 { - background-color: #1a202c; - } - - .rounded-lg { - border-radius: 0.5rem; - } - - .shadow { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - } - - .text-gray-700 { - color: #4a5568; - } - - .text-sm { - font-size: 0.875rem; - } - - .p-4 { - padding: 1.5rem; - } - .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ diff --git a/application/templates/index.html b/application/templates/index.html index 7277c01d..b3368182 100644 --- a/application/templates/index.html +++ b/application/templates/index.html @@ -10,14 +10,14 @@

DocsGPT 🦖 Very early Preview

- About + About
-
-
+
+
-
+
-
+

Hello, ask me anything about this library. Im here to help

@@ -36,17 +36,17 @@ This will return a new DataFrame with all the columns from both tables, and only
-
-
- - +
+ + +
-
+

This is a chatbot that uses the GPT-3, Faiss and LangChain to answer questions


The source code is available on Github