Added new ui code

2024-12-18 20:17:50 +00:00 · 2023-05-02 22:53:27 +02:00 · 2023-05-02 22:53:27 +02:00 · 0a15b43fc9
commit 0a15b43fc9
parent a7c6014adc
50 changed files with 4848 additions and 1 deletions
--- a/app.py
+++ b/app.py
@ -41,6 +41,7 @@ from gevent.pywsgi import WSGIServer

 app = Flask("GPT4All-WebUI", static_url_path="/static", static_folder="static")
 socketio = SocketIO(app, async_mode='gevent', ping_timeout=30, ping_interval=15)
+
 app.config['SECRET_KEY'] = 'secret!'
 # Set the logging level to WARNING or higher
 logging.getLogger('socketio').setLevel(logging.WARNING)
@ -64,6 +65,9 @@ class Gpt4AllWebUI(GPT4AllAPI):
        self.cancel_gen = False
        self.socketio = _socketio

+        if "use_new_ui" in self.config:
+            if self.config["use_new_ui"]:
+                app.template_folder = "web/dist"

        self.add_endpoint(
            "/list_backends", "list_backends", self.list_backends, methods=["GET"]
@ -94,6 +98,8 @@ class Gpt4AllWebUI(GPT4AllAPI):
        
        
        self.add_endpoint("/", "", self.index, methods=["GET"])
+        self.add_endpoint("/<path:filename>", "serve_static", self.serve_static, methods=["GET"])
+        
        self.add_endpoint("/export_discussion", "export_discussion", self.export_discussion, methods=["GET"])
        self.add_endpoint("/export", "export", self.export, methods=["GET"])
        self.add_endpoint(
@ -268,6 +274,20 @@ class Gpt4AllWebUI(GPT4AllAPI):

    def index(self):
        return render_template("index.html")
+    
+    def serve_static(self, filename):
+        root_dir = os.getcwd()
+        if "use_new_ui" in self.config:
+            if self.config["use_new_ui"]:
+                path = os.path.join(root_dir, 'web/dist/')+"/".join(filename.split("/")[:-1])
+            else:
+                path = os.path.join(root_dir, 'static/')+"/".join(filename.split("/")[:-1])
+        else:
+            path = os.path.join(root_dir, 'static/')+"/".join(filename.split("/")[:-1])
+                            
+        fn = filename.split("/")[-1]
+        return send_from_directory(path, fn)
+

    def format_message(self, message):
        # Look for a code block within the message
--- a/configs/default.yaml
+++ b/configs/default.yaml
@ -23,4 +23,5 @@ top_p: 0.95
 voice: ""
 use_gpu: false # Not active yet
 auto_read: false
-use_avx2: true # By default we require using avx2 but if not supported, make sure you remove it from here
+use_avx2: true # By default we require using avx2 but if not supported, make sure you remove it from here
+use_new_ui: false # By default use old ui
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/web/.gitignore
+++ b/web/.gitignore
@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/web/.prettierrc.json
+++ b/web/.prettierrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
--- a/web/LICENSE
+++ b/web/LICENSE
@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/web/Readme.md
+++ b/web/Readme.md
@ -0,0 +1,81 @@
+# GPT4ALL-UI Web interface VUE3
+
+## Todo's
+
+- Fix discussion list width so that it stays static and dont resize depending on message contents [DONE]
+- Add chat input field [DONE]
+- Add ability to select multiple discussions to export or delete
+- Add modal to ask user if you sure about to delete
+- Add toast messages for errors and successes
+- Populate settings with settings controls [WIP]
+- Make search filter work [DONE]
+- Add clear filter button to search input field [DONE]
+- Add DB switcher (im thinking in the settings view)
+- Make the UI work good on mobile
+- Scroll to bottom
+- Scroll to top
+- Need to fix colors for `<input />` fields
+
+## Dependencies for development
+
+You mus have [Node.js](https://nodejs.org/en) installed on your computer. 
+
+```
+git clone repo_URL
+cd into-this-repo-dir
+npm install
+```
+
+After that to run development server locally and test the web page at http://localhost:5173/:
+
+```
+npm run dev
+```
+
+To connect to GPT4ALL-UI API server you need to enter its URL in the `.env` or make a copy of `.env` file and name it `.env.local`. This .env.local is added to `.gitignore`. 
+All http requests made to GPT4ALL-UI api has to have /api/ prefix. This prefix gets rewritten in the vite.config.js file.
+Make changes to your usecase in the `.env.local` file.
+
+Once UI id done you can build static files for serving.
+```
+npm run build
+```
+
+This will create /dist/ folder with all the files. Also the build will show you if there are errors or not in your vue code.
+> Make sure you test the static files too, because sometimes the builder dont catch all the errors, and if a component is not refernced it might not load in the built version, but it loads fine in development environment
+### Overview of used dependencies and development
+
+- Nodejs
+- vue
+- feather-icons
+- axios
+
+```
+npm init vue@latest
+```
+```
+cd gpt4all-ui-vue
+npm install
+npm run format
+npm install axios dotenv
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+npm install feather-icons --save
+```
+
+### Running dev environment and building commands
+
+To lint: (not very used)
+```
+npm run lint
+```
+
+To run test:
+```
+npm run dev
+```
+
+To build static files
+```
+npm run build
+```
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GPT4All - WEBUI</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,31 @@
+{
+  "name": "gpt4all-ui-vue",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "axios": "^1.3.6",
+    "dotenv": "^16.0.3",
+    "feather-icons": "^4.29.0",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.4",
+    "tailwindcss": "^3.3.1",
+    "vite": "^4.1.4"
+  }
+}
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/web/public/favicon.ico
+++ b/web/public/favicon.ico
--- a/web/src/App.vue
+++ b/web/src/App.vue
@ -0,0 +1,30 @@
+<template>
+  <div
+    class="flex flex-col h-screen max-h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50">
+
+    <TopBar />
+
+    <div class="flex overflow-hidden flex-grow">
+      <!-- VIEW CONTAINER -->
+
+      <RouterView v-slot="{ Component }">
+        <KeepAlive>
+          <component :is="Component" />
+        </KeepAlive>
+      </RouterView>
+
+
+    </div>
+    <!-- FOOTER -->
+    <!-- <Footer /> -->
+
+  </div>
+</template>
+
+<script setup>
+import { RouterView } from 'vue-router'
+import TopBar from './components/TopBar.vue';
+import Footer from './components/Footer.vue';
+
+</script>
+<!-- <script src="../node_modules/feather-icons/dist/feather"></script> -->
--- a/web/src/assets/fonts/PTSans/OFL.txt
+++ b/web/src/assets/fonts/PTSans/OFL.txt
@ -0,0 +1,94 @@
+Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
+with Reserved Font Names "PT Sans" and "ParaType".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/web/src/assets/fonts/PTSans/PTSans-Bold.ttf
+++ b/web/src/assets/fonts/PTSans/PTSans-Bold.ttf
--- a/web/src/assets/fonts/PTSans/PTSans-BoldItalic.ttf
+++ b/web/src/assets/fonts/PTSans/PTSans-BoldItalic.ttf
--- a/web/src/assets/fonts/PTSans/PTSans-Italic.ttf
+++ b/web/src/assets/fonts/PTSans/PTSans-Italic.ttf
--- a/web/src/assets/fonts/PTSans/PTSans-Regular.ttf
+++ b/web/src/assets/fonts/PTSans/PTSans-Regular.ttf
--- a/web/src/assets/fonts/Roboto/LICENSE.txt
+++ b/web/src/assets/fonts/Roboto/LICENSE.txt
@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/web/src/assets/fonts/Roboto/Roboto-Black.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Black.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-BlackItalic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-BlackItalic.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Bold.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Bold.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-BoldItalic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-BoldItalic.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Italic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Italic.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Light.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Light.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-LightItalic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-LightItalic.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Medium.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Medium.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-MediumItalic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-MediumItalic.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Regular.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Regular.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-Thin.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-Thin.ttf
--- a/web/src/assets/fonts/Roboto/Roboto-ThinItalic.ttf
+++ b/web/src/assets/fonts/Roboto/Roboto-ThinItalic.ttf
--- a/web/src/assets/logo.svg
+++ b/web/src/assets/logo.svg
@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="154.55025mm"
+   height="160.5979mm"
+   viewBox="0 0 154.55025 160.5979"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:export-filename=".\bitmap.svg"
+   inkscape:export-xdpi="100"
+   inkscape:export-ydpi="100"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.74564394"
+     inkscape:cx="34.198628"
+     inkscape:cy="502.92101"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-14.273257,-30.765575)"><g
+       id="g1477"
+       clip-path="none"><g
+         inkscape:label="Clip"
+         id="g1475"><path
+           style="fill:#87bcfc;fill-opacity:1;stroke-width:0.671958"
+           d="m 37.623501,174.81447 c 0.007,-0.32225 0.9351,-1.94664 2.06305,-3.60973 2.92939,-4.31919 6.3891,-11.85421 7.57755,-16.50344 2.42423,-9.48355 2.02669,-14.17374 -2.19558,-25.90381 -1.14539,-3.18206 -2.24968,-7.71777 -2.45398,-10.07937 -0.61281,-7.08403 -0.97277,-8.66153 -1.97638,-8.66153 -0.67782,0 -1.00077,1.08931 -1.14548,3.86375 -0.20152,3.86376 -0.20152,3.86376 -5.28154,4.05771 -4.28191,0.16349 -5.26053,-0.005 -6.2289,-1.07553 -1.49222,-1.64887 -2.13911,-9.75354 -1.48009,-18.543543 0.64593,-8.6156 1.2217,-9.267277 7.94617,-8.99395 4.84284,0.196846 4.84284,0.196846 5.04741,3.76685 0.16812,2.93382 0.40761,3.5311 1.34392,3.35169 0.90629,-0.17365 1.23876,-1.31385 1.62536,-5.57425 1.24545,-13.72509 7.49751,-23.935675 17.85868,-29.165978 7.67738,-3.875526 11.00315,-4.39997 28.02038,-4.418556 12.716999,-0.01389 16.228819,0.193446 19.822759,1.170322 16.87358,4.586448 26.18833,15.973048 28.57473,34.930522 0.57303,4.55212 2.19952,4.33072 2.46819,-0.33598 0.20311,-3.527774 0.20311,-3.527774 4.20685,-3.733474 8.58554,-0.441097 9.28817,0.786184 8.97745,15.680807 -0.26758,12.8269 -0.41714,13.0831 -7.63779,13.0831 -5.48007,0 -5.67938,-0.1788 -5.67938,-5.09464 0,-2.05145 -0.28167,-2.96885 -0.91153,-2.96885 -0.66502,0 -1.03312,1.61078 -1.36117,5.95641 -0.2473,3.27602 -1.07821,8.03852 -1.84646,10.58333 -1.98696,6.58176 -2.1676,9.33137 -0.98406,14.97906 1.33173,6.35492 4.06152,12.17114 7.95714,16.95391 3.07739,3.77821 3.07739,3.77821 -3.15487,1.23266 -19.69789,-8.04552 -35.55024,-11.0994 -48.752359,-9.39192 -15.89274,2.05546 -29.36908,8.40921 -51.13419,24.10845 -0.70296,0.50706 -1.27261,0.65825 -1.26588,0.33598 z m 62.589409,-42.21165 c 5.9799,-1.26742 11.98566,-4.13161 11.98566,-5.71604 0,-1.11368 -0.47322,-1.05196 -5.67146,0.7398 -13.171199,4.53992 -25.095489,3.99787 -38.845739,-1.76584 -0.82894,-0.34747 -1.17592,-0.18264 -1.17592,0.55859 0,1.82186 8.17302,5.69754 14.11111,6.69155 3.96761,0.66417 15.47301,0.36587 19.596349,-0.50806 z M 73.488971,110.38171 c 2.78812,-1.32306 4.43976,-4.1948 4.43976,-7.71954 0,-2.31037 -0.41245,-3.231794 -2.28466,-5.104003 -1.87295,-1.87295 -2.79323,-2.28465 -5.10688,-2.28465 -2.31364,0 -3.23393,0.4117 -5.10688,2.28465 -1.86415,1.864149 -2.28465,2.797883 -2.28465,5.073053 0,3.66807 1.43325,6.29901 4.16485,7.64522 2.76723,1.36377 3.50006,1.37625 6.17846,0.10527 z m 38.709599,-0.90103 c 3.95838,-2.90381 3.91035,-9.13382 -0.0964,-12.505283 -4.8764,-4.10322 -11.98946,-0.26215 -11.99632,6.478043 -0.003,2.6667 2.43096,6.24292 4.98237,7.32146 1.87608,0.79306 5.05342,0.21472 7.11036,-1.29422 z M 50.042481,59.323124 c -2.21746,-0.906755 -4.53378,-2.260293 -5.14739,-3.00786 -0.69217,-0.843283 -1.92333,-1.359213 -3.24349,-1.359213 -3.00243,0 -6.05621,-3.147095 -6.05621,-6.241289 0,-4.458365 3.9273,-7.195145 8.19179,-5.708538 2.75256,0.959548 4.11356,3.947531 3.57655,7.852057 -0.3891,2.829155 -0.24632,3.341284 1.3869,4.974505 1.00136,1.001362 2.83561,2.447931 4.0761,3.214597 2.21006,1.365893 2.75732,1.972171 1.75147,1.940339 -0.27718,-0.0088 -2.31826,-0.757841 -4.53572,-1.664598 z"
+           id="path227"
+           inkscape:export-filename="path227.svg"
+           inkscape:export-xdpi="100"
+           inkscape:export-ydpi="100" /></g></g><use
+       x="0"
+       y="0"
+       xlink:href="#g1475"
+       id="use1481" /><path
+       style="fill:#152f5b;fill-opacity:1;fill-rule:evenodd"
+       d="m 14.273257,111.06452 c 0,-80.298946 0,-80.298946 77.27513,-80.298946 77.275133,0 77.275133,0 77.275133,80.298946 0,80.29894 0,80.29894 -77.275133,80.29894 -77.27513,0 -77.27513,0 -77.27513,-80.29894 z m 35.379964,56.20584 c 15.342626,-10.36485 26.737224,-15.11376 40.550854,-16.90033 13.202125,-1.70748 29.054465,1.3464 48.752365,9.39193 6.23225,2.54554 6.23225,2.54554 3.15486,-1.23267 -3.89562,-4.78276 -6.6254,-10.59899 -7.95714,-16.9539 -1.18353,-5.64769 -1.0029,-8.3973 0.98406,-14.97906 0.76825,-2.54481 1.59916,-7.30731 1.84647,-10.58333 0.32804,-4.34563 0.69614,-5.95642 1.36117,-5.95642 0.62985,0 0.91152,0.91741 0.91152,2.96885 0,4.91585 0.19932,5.09464 5.67939,5.09464 7.22064,0 7.3702,-0.25619 7.63778,-13.08309 0.31072,-14.894621 -0.39191,-16.121904 -8.97745,-15.680807 -4.00374,0.2057 -4.00374,0.2057 -4.20685,3.733478 -0.26867,4.666692 -1.89516,4.888095 -2.46818,0.335978 -2.38641,-18.957476 -11.70116,-30.344076 -28.57474,-34.930524 -6.40613,-1.741265 -33.307084,-1.70484 -39.591771,0.05361 -15.774724,4.413749 -24.562386,15.305116 -26.110047,32.360608 -0.3866,4.260399 -0.719062,5.400597 -1.625358,5.574251 -0.93631,0.179405 -1.1758,-0.417877 -1.343915,-3.351696 -0.20457,-3.570003 -0.20457,-3.570003 -5.047407,-3.766849 -6.724479,-0.273327 -7.300242,0.378355 -7.946179,8.993948 -0.659013,8.789993 -0.01212,16.894663 1.48009,18.543543 0.968373,1.07004 1.946997,1.23902 6.2289,1.07553 5.080026,-0.19395 5.080026,-0.19395 5.281549,-4.05771 0.144707,-2.77445 0.467651,-3.86376 1.145477,-3.86376 1.003609,0 1.363564,1.57751 1.976382,8.66154 0.204295,2.36159 1.308583,6.89731 2.453973,10.07936 4.222278,11.73008 4.619815,16.42027 2.195588,25.90382 -1.188457,4.64923 -4.648163,12.18425 -7.57755,16.50343 -2.35708,3.47535 -2.62989,4.5957 -0.797174,3.27376 0.702962,-0.50705 5.465462,-3.75071 10.583333,-7.20813 z m 31.143844,-34.15948 c -5.938088,-0.99401 -14.111111,-4.8697 -14.111111,-6.69155 0,-0.74124 0.34698,-0.90606 1.175926,-0.55859 13.750249,5.76371 25.674534,6.30576 38.84574,1.76584 5.19823,-1.79176 5.67145,-1.85348 5.67145,-0.7398 0,1.58443 -6.00576,4.44861 -11.98565,5.71603 -4.123348,0.87394 -15.628748,1.17223 -19.596355,0.50807 z M 67.491019,110.27644 c -2.731605,-1.34621 -4.164853,-3.97716 -4.164853,-7.64522 0,-2.27517 0.420505,-3.208899 2.284656,-5.073051 1.872949,-1.872949 2.793236,-2.284656 5.106878,-2.284656 2.313642,0 3.233929,0.411707 5.106878,2.284656 1.872206,1.872209 2.284656,2.793631 2.284656,5.104001 0,3.52474 -1.651633,6.39648 -4.439753,7.71953 -2.678403,1.27099 -3.411237,1.25851 -6.178462,-0.10526 z m 37.777691,0.49846 c -2.55141,-1.07854 -4.98508,-4.65476 -4.98236,-7.32146 0.007,-6.740195 7.11992,-10.581263 11.99631,-6.478042 5.40485,4.547882 3.25353,12.954022 -3.59935,14.064202 -1.10873,0.17961 -2.6453,0.0605 -3.4146,-0.2647 z M 55.262674,60.722496 c 0,-0.154646 -1.014948,-0.908447 -2.25544,-1.675113 -1.240492,-0.766666 -3.074737,-2.213235 -4.076099,-3.214597 -1.63322,-1.633221 -1.776002,-2.14535 -1.386893,-4.974505 0.537009,-3.904526 -0.823996,-6.892509 -3.576557,-7.852057 -4.264486,-1.486607 -8.191783,1.250173 -8.191783,5.708538 0,3.094194 3.053771,6.241289 6.056209,6.241289 1.320156,0 2.551318,0.51593 3.243488,1.359213 1.355602,1.651555 10.187075,5.472314 10.187075,4.407232 z"
+       id="path179"
+       inkscape:export-filename="path2_.svg"
+       inkscape:export-xdpi="100"
+       inkscape:export-ydpi="100" /><path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:1.34112"
+       d="m 197.8156,226.74124 c -8.25478,-3.04445 -23.55905,-11.18647 -25.55853,-13.59737 -2.44173,-2.94415 -9.51068,-5.94042 -14.01495,-5.94042 -6.05295,0 -13.96734,-5.11225 -18.26377,-11.79739 -3.5042,-5.45244 -3.97932,-7.27004 -3.50392,-13.40427 0.58394,-7.53471 3.23697,-12.24459 9.55387,-16.96083 5.23466,-3.90824 17.91215,-3.8769 23.19009,0.0573 7.34751,5.47688 9.15093,10.51741 9.15093,25.5767 0,11.70143 0.39678,14.18674 2.78346,17.43459 2.47061,3.36208 12.54051,11.64558 22.04538,18.13454 4.01238,2.73925 1.36076,2.98415 -5.38256,0.49713 z"
+       id="path1563"
+       transform="scale(0.26458333)" /></g></svg>
--- a/web/src/assets/tailwind.css
+++ b/web/src/assets/tailwind.css
@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+}
+.display-none {
+  @apply hidden;
+}
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@ -0,0 +1,58 @@
+<template>
+    <div class="flex-none sticky bottom-0 p-6 items-center justify-center self-center right-0 left-0 ">
+        <form>
+            <label for="chat" class="sr-only">Send message</label>
+            <div class="flex items-center gap-2 px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg  ">
+
+                <textarea id="chat" rows="1"
+                    class="block min-h-11  no-scrollbar  p-2.5 w-full text-sm text-gray-900 bg-bg-light rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                    placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)" ></textarea>
+                <button type="submit"
+                    class="inline-flex justify-center p-2 rounded-full cursor-pointer hover:text-primary duration-75 active:scale-90">
+                    
+                    <i data-feather="send" class=" w-6 h-6 m-1"></i>
+                    
+                    <span class="sr-only">Send message</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+<style>
+
+</style>
+
+<script>
+import {nextTick} from 'vue'
+import feather from 'feather-icons'
+
+export default {
+    name: 'ChatBox',
+    setup() {
+        return {}
+    },
+    methods: {
+        submitOnEnter(event) {
+            if (event.which === 13) {
+                if (!event.repeat) {
+                    const newEvent = new Event("submit", { cancelable: true });
+                    event.target.form.dispatchEvent(newEvent);
+                }
+
+                event.preventDefault(); // Prevents the addition of a new line in the text field
+            }
+        }
+    },mounted(){
+        nextTick(()=>{
+                feather.replace()
+
+            })
+    },
+    activated(){
+
+    }
+}
+</script>
+<script setup>
+
+</script>
--- a/web/src/components/Discussion.vue
+++ b/web/src/components/Discussion.vue
@ -0,0 +1,57 @@
+<template>
+    <div :class="selected ? 'bg-bg-light-discussion dark:bg-bg-dark-discussion shadow-md' : ''"
+        class="container flex flex-col sm:flex-row item-center  gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
+        <!-- INDICATOR FOR SELECTED ITEM -->
+        <div v-if="selected" class="items-center inline-block min-h-full w-2 rounded-xl self-stretch "
+            :class="loading ? 'animate-bounce bg-accent ' : ' bg-secondary '"></div>
+        <div v-else class="items-center inline-block min-h-full w-2 rounded-xl self-stretch"></div>
+
+        <!-- TITLE -->
+        <p class="truncate w-auto">{{ title }}</p>
+        <!-- CONTROL BUTTONS -->
+        <div class="flex items-center gap-3 flex-1 max-h-6">
+            <div class="flex gap-3 flex-1 items-center justify-end invisible group-hover:visible duration-75">
+                <div class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Edit title">
+                    <i data-feather="edit-2"></i>
+                </div>
+                <div class="text-2xl hover:text-red-600 duration-75 active:scale-90" title="Remove discussion">
+                    <i data-feather="trash"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { nextTick } from 'vue'
+import feather from 'feather-icons'
+
+export default {
+    name: 'Discussion',
+    props: {
+        id: Number,
+        title: String,
+        selected: Boolean,
+        loading: Boolean
+    },
+    setup() {
+
+    },
+    data() {
+        return {
+
+
+        }
+    },
+    methods: {
+
+    }, mounted() {
+        nextTick(() => {
+            feather.replace()
+
+        })
+    },
+
+}
+</script>
+<style scoped></style>
--- a/web/src/components/Footer.vue
+++ b/web/src/components/Footer.vue
@ -0,0 +1,11 @@
+<template>
+    <div class="sticky bottom-0   p-6   bg-bg-light-tone dark:bg-bg-dark-tone shadow-inner ">
+        <!-- <hr class="container flex flex-col sm:flex-row item-center py-0 h-0 border-bg-dark  dark:border-bg-light"> -->
+        <div class="flex justify-center  flex-row items-center gap-2 p-1   ">
+            Visit <a class=" hover:text-primary duration-150" href="https://github.com/nomic-ai/gpt4all-ui"
+                target="_blank">github repository</a> to learn more
+
+        </div>
+    </div>
+</template>
+
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@ -0,0 +1,71 @@
+<template>
+    <div
+        class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2">
+        <div class="w-30 flex">
+            <!-- SENDER -->
+            <div class="w-10 h-10 rounded-lg object-fill drop-shadow-md group-even:bg-primary  bg-secondary">
+                <img v-if="senderImg" :src="senderImg" class="w-10 h-10 rounded-full object-fill ">
+
+            </div>
+            <p class="drop-shadow-sm   py-0 px-2 text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
+        </div>
+        <div class="-mt-4  ml-10 mr-0 pt-1 px-2 max-w-screen-2xl  ">
+            <!-- CONTENT/MESSAGE -->
+            {{ message.content }}
+        </div>
+        <div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
+            <!-- MESSAGE CONTROLS -->
+            <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
+                title="Edit message">
+                <i data-feather="edit"></i>
+            </div>
+            <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
+                title="Copy message to clipboard">
+                <i data-feather="copy"></i>
+            </div>
+            <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
+                title="Resend message">
+                <i data-feather="refresh-cw"></i>
+            </div>
+            <div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
+                title="Remove message">
+                <i data-feather="trash"></i>
+            </div>
+            <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
+                title="Upvote">
+                <i data-feather="thumbs-up"></i>
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
+                title="Downvote">
+                <i data-feather="thumbs-down"></i>
+            </div>
+                <div v-if="message.rank != 0" class="rounded-full px-2 text-sm flex items-center justify-center font-bold"
+                    :class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{ message.rank }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {nextTick} from 'vue'
+import feather from 'feather-icons'
+export default {
+    name: 'Message',
+    props: {
+        message: Object
+    },
+    data() {
+        return {
+           
+            senderImg:''
+        }
+    },mounted(){
+        nextTick(()=>{
+                feather.replace()
+
+            })
+    },
+}
+</script>
--- a/web/src/components/Navigation.vue
+++ b/web/src/components/Navigation.vue
@ -0,0 +1,41 @@
+<template>
+    <div class="container flex flex-col sm:flex-row item-center gap-2 py-1 ">
+        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
+            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 ">
+
+                <li>
+                    <RouterLink :to="{ name: 'discussions' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                        <a href="#" class=" hover:text-primary duration-150">Discussions</a>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="{ name: 'settings' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                        <a href="#" class=" hover:text-primary duration-150">Settings</a>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="{ name: 'extensions' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                        <a href="#" class=" hover:text-primary duration-150">Extensions</a>
+                    </RouterLink>
+                </li>
+
+                <li>
+                    <RouterLink :to="{ name: 'training' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                        <a href="#" class=" hover:text-primary duration-150">Training</a>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="{ name: 'help' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                        <a href="#" class=" hover:text-primary duration-150">Help</a>
+                    </RouterLink>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {nextTick} from 'vue'
+import feather from 'feather-icons'
+import { RouterLink } from 'vue-router'
+</script>
--- a/web/src/components/TopBar.vue
+++ b/web/src/components/TopBar.vue
@ -0,0 +1,115 @@
+<template>
+    <header class=" top-0 shadow-lg">
+        <nav class="container flex flex-col lg:flex-row  item-center gap-2 py-2 ">
+            <!-- LOGO -->
+            <RouterLink :to="{ name: 'discussions' }">
+                <div class="flex items-center gap-3 flex-1">
+                    <img class="w-12  hover:scale-95 duration-150 " title="GPT4ALL-UI" src="@/assets/logo.svg" alt="Logo">
+                    <p class="text-2xl ">GPT4ALL-UI</p>
+
+                </div>
+            </RouterLink>
+            <!-- GITHUB AND THEME BUTTONS -->
+            <div class="flex gap-3 flex-1 items-center justify-end">
+                <a href="https://github.com/nomic-ai/gpt4all-ui" target="_blank">
+
+                    <div class="text-2xl  hover:text-primary duration-150" title="Visit repository page">
+                        <i data-feather="github"></i>
+                    </div>
+                </a>
+                <div class="sun text-2xl w-6  hover:text-primary duration-150" title="Swith to Light theme"
+                    @click="themeSwitch()">
+                    <i data-feather="sun"></i>
+                </div>
+
+
+                <div class="moon text-2xl w-6  hover:text-primary duration-150" title="Swith to Dark theme"
+                    @click="themeSwitch()">
+                    <i data-feather="moon"></i>
+                </div>
+
+            </div>
+
+        </nav>
+        <!-- NAVIGATION BUTTONS -->
+        <Navigation />
+    </header>
+
+    <body>
+
+    </body>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router'
+import Navigation from './Navigation.vue'
+import { nextTick } from 'vue'
+import feather from 'feather-icons'
+</script>
+<script>
+export default {
+    name: 'TopBar',
+    data() {
+        return {
+            sunIcon: document.querySelector(".sun"),
+            moonIcon: document.querySelector(".moon"),
+            userTheme: localStorage.getItem("theme"),
+            systemTheme: window.matchMedia("prefers-color-scheme: dark").matches,
+        }
+    },
+    mounted() {
+        this.sunIcon = document.querySelector(".sun");
+        this.moonIcon = document.querySelector(".moon");
+        this.userTheme = localStorage.getItem("theme");
+        this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
+        this.themeCheck()
+
+        nextTick(() => {
+            feather.replace()
+
+        })
+
+
+    },
+    created() {
+        this.sunIcon = document.querySelector(".sun");
+        this.moonIcon = document.querySelector(".moon");
+        this.userTheme = localStorage.getItem("theme");
+        this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
+    },
+    methods: {
+        themeCheck() {
+
+            if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) {
+                document.documentElement.classList.add("dark");
+                this.moonIcon.classList.add("display-none");
+                return
+            }
+            this.sunIcon.classList.add("display-none")
+
+        },
+        themeSwitch() {
+            if (document.documentElement.classList.contains("dark")) {
+                document.documentElement.classList.remove("dark");
+                localStorage.setItem("theme", "light")
+                this.iconToggle()
+                return
+
+            }
+            document.documentElement.classList.add("dark");
+            localStorage.setItem("theme", "dark")
+            this.iconToggle()
+
+        },
+        iconToggle() {
+            this.sunIcon.classList.toggle("display-none");
+            this.moonIcon.classList.toggle("display-none");
+        }
+    },
+    components: {
+        Navigation,
+
+    }
+}
+
+</script>
--- a/web/src/components/WelcomeComponent.vue
+++ b/web/src/components/WelcomeComponent.vue
@ -0,0 +1,30 @@
+<template>
+    <!-- DEFAULT FIRST PAGE LOAD VIEW -->
+    <div class="flex flex-col text-center">
+        <div class="flex flex-col text-center items-center">
+
+            <div class="flex items-center gap-3 text-5xl drop-shadow-md align-middle pt-24 ">
+                <img class="w-24 animate-bounce" title="GPT4ALL-UI" src="@/assets/logo.svg" alt="Logo">
+                <p class=" ">GPT4ALL-UI</p>
+
+
+            </div>
+            <hr
+                class=" mt-1 w-96 h-1 mx-auto my-2 md:my-2 dark:bg-bg-dark-tone-panel bg-bg-light-tone-panel border-0 rounded ">
+            <p class="text-lg ">Welcome, please create a new discussion or select existing one to start</p>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'WelcomeComponent',
+    setup() {
+
+
+        return {}
+    }
+}
+</script>
--- a/web/src/main.js
+++ b/web/src/main.js
@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import './assets/tailwind.css'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@ -0,0 +1,45 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import ExtensionsView from '../views/ExtensionsView.vue'
+import HelpView from '../views/HelpView.vue'
+import SettingsView from '../views/SettingsView.vue'
+import TrainingView from '../views/TrainingView.vue'
+import DiscussionsView from '../views/DiscussionsView.vue'
+
+// const scrollBehavior = (to, from, savedPosition) => {
+//   return savedPosition || { top: 0, left: 0 }
+// }
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/extensions/',
+      name: 'extensions',
+      component: ExtensionsView
+    },
+    {
+      path: '/help/',
+      name: 'help',
+      component: HelpView
+    },
+    {
+      path: '/settings/',
+      name: 'settings',
+      component: SettingsView
+    },
+    {
+      path: '/training/',
+      name: 'training',
+      component: TrainingView
+    },
+    {
+      path: '/',
+      name: 'discussions',
+      component: DiscussionsView
+    },
+
+  ],
+  // scrollBehavior
+})
+
+export default router
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@ -0,0 +1,204 @@
+<template>
+    <div
+        class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone ">
+        <!-- LEFT SIDE PANEL -->
+        <div
+            class="z-10 sticky top-0 flex-row p-2 flex items-center gap-3 flex-0 bg-bg-light-tone dark:bg-bg-dark-tone mt-0 px-4  shadow-md">
+            <!-- CONTROL PANEL -->
+            <div class=" text-2xl  hover:text-secondary duration-75 active:scale-90 " title="Create new discussion">
+                <i data-feather="plus"></i>
+            </div>
+            <div class=" text-2xl  hover:text-secondary duration-75 active:scale-90 "
+                title="Reset database, remove all discussions">
+                <i data-feather="refresh-ccw"></i>
+            </div>
+            <div class=" text-2xl  hover:text-secondary duration-75 active:scale-90 " title="Export database">
+                <i data-feather="database"></i>
+            </div>
+            <div class=" text-2xl  hover:text-secondary duration-75 active:scale-90 rotate-90"
+                title="Export discussion to a file">
+                <i data-feather="log-out"></i>
+            </div>
+
+            <!-- SEARCH BAR -->
+            <form>
+                <div class="relative">
+                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                        <div class="scale-75 ">
+                            <i data-feather="search"></i>
+                        </div>
+                    </div>
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 ">
+                        <div class=" hover:text-secondary duration-75 active:scale-90 "
+                            :class="filterTitle ? 'visible' : 'invisible'" title="Clear" @click="filterTitle = ''">
+                            <i data-feather="x"></i>
+                        </div>
+                    </div>
+
+                    <input type="search" id="default-search"
+                        class="block w-full p-2 pl-10 pr-10 text-sm border border-gray-300 rounded-lg bg-bg-light focus:ring-secondary focus:border-secondary  dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-secondary dark:focus:border-secondary "
+                        placeholder="Search..." title="Filter discussions by title" v-model="filterTitle"
+                        @input="filterDiscussions()">
+                </div>
+            </form>
+        </div>
+        <div class="relative overflow-y-scroll no-scrollbar">
+            <!-- DISCUSSION LIST -->
+            <div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
+
+                <Discussion v-for="(item, index) in list" :key="index" :id="item.id" :title="item.title"
+                    :selected="currentDiscussion.id == item.id" :loading="currentDiscussion.id == item.id && loading"
+                    @click="selectDiscussion(item)" />
+
+                <div v-if="list.length < 1"
+                    class=" gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
+                    <p class="px-3">No discussions are found</p>
+                </div>
+                <div
+                    class="sticky bottom-0  bg-gradient-to-t  pointer-events-none from-bg-light-tone dark:from-bg-dark-tone  flex height-64 ">
+                    <!-- FADING DISCUSSION LIST END ELEMENT -->
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div class="overflow-y-scroll flex flex-col no-scrollbar flex-grow "
+        :class="loading ? 'opacity-20 pointer-events-none' : ''">
+        <!-- CHAT AREA -->
+        <div>
+            <Message v-for="(msg, index) in discussionArr" :key="index" :message="msg"
+                @click="scrollToElement($event.target)" />
+
+            <WelcomeComponent v-if="discussionArr.length < 1" />
+
+            <ChatBox v-if="discussionArr.length > 1" />
+
+        </div>
+
+
+    </div>
+</template>
+<style scoped>
+.height-64 {
+    min-height: 64px;
+}
+</style>
+
+<script>
+import axios from "axios";
+import { nextTick } from 'vue'
+export default {
+
+    setup() {
+
+
+    },
+    data() {
+
+        return {
+            list: [],
+            tempList: [],
+            currentDiscussion: Number,
+            discussionArr: [],
+            loading: false,
+            filterTitle: "",
+            filterInProgress: false
+        }
+    },
+    methods: {
+        async list_discussions() {
+            try {
+                const res = await axios.get("/list_discussions");
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error)
+                return []
+            }
+
+
+        },
+        async load_discussion(id) {
+            try {
+
+
+                if (id) {
+                    this.loading = true
+                    const res = await axios.post("/load_discussion", {
+                        id: id
+                    });
+
+                    if (res) {
+                        this.discussionArr = res.data
+                        this.loading = false
+                    }
+                }
+
+            } catch (error) {
+                console.log(error)
+                this.loading = false
+            }
+
+        },
+        filterDiscussions() {
+            if (!this.filterInProgress) {
+                this.filterInProgress = true
+                setTimeout(() => {
+
+                    this.list = this.tempList.filter((item) => item.title.includes(this.filterTitle))
+                    this.filterInProgress = false
+
+                }, 100)
+            }
+        },
+        selectDiscussion(item) {
+            this.currentDiscussion = item
+            this.load_discussion(item.id)
+
+        },
+        scrollToElement(el) {
+
+
+            if (el) {
+
+                el.scrollIntoView({ behavior: 'smooth', block: "center", inline: "nearest" });
+            }
+        }
+    },
+    async mounted() {
+        this.list = await this.list_discussions()
+        this.tempList = this.list
+        nextTick(() => {
+            feather.replace()
+
+        })
+    }, components: {
+        Discussion,
+        Message,
+        ChatBox,
+        WelcomeComponent
+    }, watch: {
+        filterTitle(newVal, oldVal) {
+            if (newVal == "") {
+                this.filterInProgress = true
+                this.list = this.tempList
+                this.filterInProgress = false
+            }
+        }
+    }
+
+}
+</script>
+
+<script setup >
+import Discussion from '../components/Discussion.vue';
+import Message from '../components/Message.vue';
+import ChatBox from '../components/ChatBox.vue'
+import WelcomeComponent from '../components/WelcomeComponent.vue'
+import feather from 'feather-icons'
+</script>
--- a/web/src/views/ExtensionsView.vue
+++ b/web/src/views/ExtensionsView.vue
@ -0,0 +1,16 @@
+<template>
+    <div>
+        Extensions
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
--- a/web/src/views/HelpView.vue
+++ b/web/src/views/HelpView.vue
@ -0,0 +1,16 @@
+<template>
+    <div>
+        Help
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@ -0,0 +1,241 @@
+<template>
+    <div
+        class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg min-w-[29rem] max-w-[29rem] bg-bg-light-tone dark:bg-bg-dark-tone ">
+        <div class="p-2">
+            <div class="m-2">
+                <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Backend:
+                </label>
+                <select id="backend"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                    <option v-for="item in backendsArr">{{ item }}</option>
+
+                </select>
+            </div>
+            <div class="m-2">
+                <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Model:
+                </label>
+                <select id="model"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                    <option v-for="item in modelsArr">{{ item }}</option>
+
+                </select>
+            </div>
+            <div class="m-2">
+                <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Personalities Languages:
+                </label>
+                <select id="persLang"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                    <option v-for="item in persLangArr">{{ item }}</option>
+
+                </select>
+            </div>
+            <div class="m-2">
+                <label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Personalities Category:
+                </label>
+                <select id="persCat"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                    <option v-for="item in persCatgArr">{{ item }}</option>
+
+                </select>
+            </div>
+            <div class="m-2">
+                <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Persona:
+                </label>
+                <select id="persona"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                    <option v-for="item in persArr">{{ item }}</option>
+
+                </select>
+            </div>
+            <div class="m-2">
+                <label for="seed" class="block mb-2 text-sm font-medium ">
+                    Seed:
+                </label>
+                <input type="text" id="seed" v-model="configFile.seed"
+                    class="bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="temp" class=" text-sm font-medium">
+                                Temperature:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="temp-val" v-model="configFile.temp"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="temp" type="range" v-model="configFile.temp" min="0" max="5" step="0.1"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="predict" class=" text-sm font-medium">
+                                N Predict:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="predict-val" v-model="configFile.n_predict"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="predict" type="range" v-model="configFile.n_predict" min="0" max="2048" step="32"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="top_k" class=" text-sm font-medium">
+                                Top-K:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="top_k-val" v-model="configFile.top_k"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="top_k" type="range" v-model="configFile.top_k" min="0" max="100" step="1"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="top_p" class=" text-sm font-medium">
+                                Top-P:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="top_p-val" v-model="configFile.top_p"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="top_p" type="range" v-model="configFile.top_p" min="0" max="1" step="0.01"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="repeat_penalty" class=" text-sm font-medium">
+                                Repeat penalty:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="repeat_penalty-val" v-model="configFile.repeat_penalty"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="repeat_penalty" type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+            <div class="m-2">
+                <div class="flex flex-col align-bottom ">
+                    <div class="relative">
+                        <p class="absolute left-0 mt-6">
+                            <label for="repeat_last_n" class=" text-sm font-medium">
+                                Repeat last N:
+                            </label>
+                        </p>
+                        <p class="absolute right-0">
+
+                            <input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n"
+                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        </p>
+
+                    </div>
+
+                    <input id="repeat_last_n" type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1"
+                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+    setup() {
+
+
+        return {
+
+        }
+    },
+    data() {
+
+        return {
+            backendsArr: [],
+            modelsArr: [],
+            persLangArr: [],
+            persCatgArr: [],
+            persArr: [],
+            langArr: [],
+            configFile: {},
+
+        }
+    }, methods: {
+        async api_get_req(endpoint) {
+            try {
+                const res = await axios.get("/" + endpoint);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error)
+                return []
+            }
+
+
+        },
+    }, async mounted() {
+        this.backendsArr = await this.api_get_req("list_backends")
+        this.modelsArr = await this.api_get_req("list_models")
+        this.persLangArr = await this.api_get_req("list_personalities_languages")
+        this.persCatgArr = await this.api_get_req("list_personalities_categories")
+        this.persArr = await this.api_get_req("list_personalities")
+        this.langArr = await this.api_get_req("list_languages")
+        this.configFile = await this.api_get_req("get_config")
+    }
+}
+</script>
+
--- a/web/src/views/TrainingView.vue
+++ b/web/src/views/TrainingView.vue
@ -0,0 +1,16 @@
+<template>
+    <div>
+        Training
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode:'class',
+  theme: {
+    extend: {
+      colors:{
+        "primary": "#0e8ef0",
+        "primary-light": "#3dabff",
+        "secondary": "#0fd974",
+        "accent": "#f0700e",
+        "bg-dark": "#132e59",
+        "bg-dark-tone": "#25477d",
+        "bg-dark-tone-panel": "#4367a3",
+        "bg-light": "#e2edff",
+        "bg-light-tone": "#b9d2f7",
+        "bg-light-tone-panel": "#8fb5ef",
+        "bg-dark-discussion": "#435E8A",
+        "bg-dark-discussion-odd": "#284471",
+        "bg-light-discussion": "#c5d8f8",
+        "bg-light-discussion-odd": "#d6e7ff",
+      },
+      fontFamily: {
+        sans: ["PTSans","Roboto", "sans-serif"],
+      },
+      container: {
+        padding: "2rem",
+        center: true,
+      },
+      
+    },
+  },
+  plugins: [],
+}
+
--- a/web/vite.config.js
+++ b/web/vite.config.js
@ -0,0 +1,31 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+require('dotenv').config()
+require('dotenv').config({ path: `.env.local`, override: true });
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  
+  plugins: [
+    vue()
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  server: {
+    proxy: {
+      "/api/": {
+        target: process.env.GPT4ALL_API,
+        changeOrigin: process.env.GPT4ALL_API_CHANGE_ORIGIN,
+        secure: process.env.GPT4ALL_API_SECURE,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+
+})