AAAAAAAAAAAAAAA

gui/gui/connection.py

@@ -14,22 +14,22 @@ from PyQt5 import QtCore, QtGui, QtWidgets
 class Ui_Connection(object):
     def setupUi(self, Connection):
         Connection.setObjectName("Connection")
-        Connection.resize(249, 252)
+        Connection.resize(245, 243)
         self.label = QtWidgets.QLabel(Connection)
         self.label.setGeometry(QtCore.QRect(20, 10, 101, 16))
         self.label.setObjectName("label")
-        self.label_2 = QtWidgets.QLabel(Connection)
-        self.label_2.setGeometry(QtCore.QRect(20, 70, 49, 16))
-        self.label_2.setObjectName("label_2")
-        self.label_3 = QtWidgets.QLabel(Connection)
-        self.label_3.setGeometry(QtCore.QRect(20, 100, 61, 16))
-        self.label_3.setObjectName("label_3")
-        self.label_4 = QtWidgets.QLabel(Connection)
-        self.label_4.setGeometry(QtCore.QRect(20, 130, 81, 16))
-        self.label_4.setObjectName("label_4")
-        self.label_5 = QtWidgets.QLabel(Connection)
-        self.label_5.setGeometry(QtCore.QRect(20, 160, 61, 16))
-        self.label_5.setObjectName("label_5")
+        self.portLabel = QtWidgets.QLabel(Connection)
+        self.portLabel.setGeometry(QtCore.QRect(20, 70, 49, 16))
+        self.portLabel.setObjectName("portLabel")
+        self.userLabel = QtWidgets.QLabel(Connection)
+        self.userLabel.setGeometry(QtCore.QRect(20, 100, 61, 16))
+        self.userLabel.setObjectName("userLabel")
+        self.passLabel = QtWidgets.QLabel(Connection)
+        self.passLabel.setGeometry(QtCore.QRect(20, 130, 81, 16))
+        self.passLabel.setObjectName("passLabel")
+        self.databaseLabel = QtWidgets.QLabel(Connection)
+        self.databaseLabel.setGeometry(QtCore.QRect(20, 160, 61, 16))
+        self.databaseLabel.setObjectName("databaseLabel")
         self.portInput = QtWidgets.QLineEdit(Connection)
         self.portInput.setGeometry(QtCore.QRect(100, 70, 131, 21))
         self.portInput.setText("")
@@ -56,9 +56,9 @@ class Ui_Connection(object):
         self.returnLabel = QtWidgets.QLabel(Connection)
         self.returnLabel.setGeometry(QtCore.QRect(20, 220, 211, 16))
         self.returnLabel.setObjectName("returnLabel")
-        self.label_6 = QtWidgets.QLabel(Connection)
-        self.label_6.setGeometry(QtCore.QRect(20, 40, 101, 16))
-        self.label_6.setObjectName("label_6")
+        self.ipLabel = QtWidgets.QLabel(Connection)
+        self.ipLabel.setGeometry(QtCore.QRect(20, 40, 101, 16))
+        self.ipLabel.setObjectName("ipLabel")
         self.ipInput = QtWidgets.QLineEdit(Connection)
         self.ipInput.setGeometry(QtCore.QRect(100, 40, 131, 21))
         self.ipInput.setText("")
@@ -66,6 +66,9 @@ class Ui_Connection(object):
         self.dbtypeCombo = QtWidgets.QComboBox(Connection)
         self.dbtypeCombo.setGeometry(QtCore.QRect(100, 10, 131, 22))
         self.dbtypeCombo.setObjectName("dbtypeCombo")
+        self.dbPath = QtWidgets.QFileDialog(Connection)
+        self.dbPath.setGeometry(QtCore.QRect(100, 15, 131, 22))
+        self.dbPath.setObjectName("dbPath")
 
         self.retranslateUi(Connection)
         self.ipInput.returnPressed.connect(self.portInput.setFocus) # type: ignore
@@ -86,11 +89,11 @@ class Ui_Connection(object):
         _translate = QtCore.QCoreApplication.translate
         Connection.setWindowTitle(_translate("Connection", "Form"))
         self.label.setText(_translate("Connection", "Database"))
-        self.label_2.setText(_translate("Connection", "Port"))
-        self.label_3.setText(_translate("Connection", "Username"))
-        self.label_4.setText(_translate("Connection", "Password"))
-        self.label_5.setText(_translate("Connection", "Database"))
+        self.portLabel.setText(_translate("Connection", "Port"))
+        self.userLabel.setText(_translate("Connection", "Username"))
+        self.passLabel.setText(_translate("Connection", "Password"))
+        self.databaseLabel.setText(_translate("Connection", "Database"))
         self.testButton.setText(_translate("Connection", "Test Connection"))
         self.saveButton.setText(_translate("Connection", "Save"))
         self.returnLabel.setText(_translate("Connection", "Connection ... / Saved..."))
-        self.label_6.setText(_translate("Connection", "IP"))
+        self.ipLabel.setText(_translate("Connection", "IP"))

gui/gui/connection.ui

@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>249</width>
-    <height>252</height>
+    <width>245</width>
+    <height>243</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -26,7 +26,7 @@
     <string>Database</string>
    </property>
   </widget>
-  <widget class="QLabel" name="label_2">
+  <widget class="QLabel" name="portLabel">
    <property name="geometry">
     <rect>
      <x>20</x>
@@ -39,7 +39,7 @@
     <string>Port</string>
    </property>
   </widget>
-  <widget class="QLabel" name="label_3">
+  <widget class="QLabel" name="userLabel">
    <property name="geometry">
     <rect>
      <x>20</x>
@@ -52,7 +52,7 @@
     <string>Username</string>
    </property>
   </widget>
-  <widget class="QLabel" name="label_4">
+  <widget class="QLabel" name="passLabel">
    <property name="geometry">
     <rect>
      <x>20</x>
@@ -65,7 +65,7 @@
     <string>Password</string>
    </property>
   </widget>
-  <widget class="QLabel" name="label_5">
+  <widget class="QLabel" name="databaseLabel">
    <property name="geometry">
     <rect>
      <x>20</x>
@@ -172,7 +172,7 @@
     <string>Connection ... / Saved...</string>
    </property>
   </widget>
-  <widget class="QLabel" name="label_6">
+  <widget class="QLabel" name="ipLabel">
    <property name="geometry">
     <rect>
      <x>20</x>

gui/main.py

@@ -3,7 +3,7 @@ import os
 import sys
 
 from PyQt5.QtCore import QObject, QThread, pyqtSignal
-from PyQt5.QtWidgets import QApplication, QMainWindow, QDialog, QTableWidgetItem, QTableWidget
+from PyQt5.QtWidgets import QApplication, QMainWindow, QDialog, QTableWidgetItem, QTableWidget, QFileDialog
 
 import modules.aisql as aisql
 
@@ -16,8 +16,8 @@ configfile = "config.json"
 
 dbtypes = {
     0: "PostgreSQL",
-    1: "MySQL",
-    2: "SQLite"
+    1: "SQLite",
+    2: "MySQL"
 }
 
 # Load DB Config from file but check if file exists and create if not
@@ -267,14 +267,7 @@ class ConnectionWindow(QDialog):
 
 
         # Load DB Config from file
-        with open(os.path.join(configfolder, configfile), "r") as f:
-            self.config = json.load(f)
-            self.dbtype = self.config["database"]["dbtype"]
-            self.dbip = self.config["database"]["ip"]
-            self.dbport = self.config["database"]["port"]
-            self.dbuser = self.config["database"]["user"]
-            self.dbpass = self.config["database"]["password"]
-            self.dbname = self.config["database"]["database"]
+        self.dbtype, self.dbip, self.dbport, self.dbuser, self.dbpass, self.dbname, apikey = load_config()
 
         self.ui.dbtypeCombo.addItems(dbtypes.values())
         self.ui.dbtypeCombo.setCurrentIndex(self.dbtype)
@@ -284,17 +277,15 @@ class ConnectionWindow(QDialog):
         self.ui.passwordInput.setText(self.dbpass)
         self.ui.databaseInput.setText(self.dbname)
 
-        if (self.ui.ipInput or self.ui.portInput or self.ui.databaseInput) == "":
+        if self.ui.ipInput == "":
             self.ui.saveButton.setEnabled(False)
             self.ui.testButton.setEnabled(False)
         else:
             self.ui.saveButton.setEnabled(True)
             self.ui.testButton.setEnabled(True)
-        # Unlock Buttons if ip, port and database is not empty
 
+        # Unlock Buttons if ip, port and database is not empty
         self.ui.ipInput.textChanged.connect(self.on_text_changed)
-        self.ui.portInput.textChanged.connect(self.on_text_changed)
-        self.ui.databaseInput.textChanged.connect(self.on_text_changed)
 
         # Pressed Save Button
         self.ui.saveButton.clicked.connect(self.on_save_button_clicked)
@@ -302,14 +293,41 @@ class ConnectionWindow(QDialog):
         # Pressed Test Button
         self.ui.testButton.clicked.connect(self.start_db_test_thread)
 
+        # If SQLite3 is selected, disable ip, port, username and password
+        self.ui.dbtypeCombo.currentIndexChanged.connect(self.on_dbtype_changed)
+
     def on_text_changed(self):
-        if self.ui.ipInput.text() == "" or self.ui.portInput.text() == "" or self.ui.databaseInput.text() == "":
+        if self.ui.ipInput.text() == "":
             self.ui.saveButton.setEnabled(False)
             self.ui.testButton.setEnabled(False)
         else:
             self.ui.saveButton.setEnabled(True)
             self.ui.testButton.setEnabled(True)
 
+    def on_dbtype_changed(self):
+        if self.ui.dbtypeCombo.currentIndex() == 1:
+            self.ui.ipInput.hide()
+            self.ui.portInput.hide()
+            self.ui.usernameInput.hide()
+            self.ui.passwordInput.hide()
+            self.ui.databaseInput.hide()
+            self.ui.ipLabel.hide()
+            self.ui.portLabel.hide()
+            self.ui.userLabel.hide()
+            self.ui.passLabel.hide()
+            self.ui.databaseLabel.hide()
+        else:
+            self.ui.ipInput.show()
+            self.ui.portInput.show()
+            self.ui.usernameInput.show()
+            self.ui.passwordInput.show()
+            self.ui.databaseInput.show()
+            self.ui.ipLabel.show()
+            self.ui.portLabel.show()
+            self.ui.userLabel.show()
+            self.ui.passLabel.show()
+            self.ui.databaseLabel.show()
+
     def on_save_button_clicked(self):
         self.dbtype = self.ui.dbtypeCombo.currentIndex()
         self.dbip = self.ui.ipInput.text()

gui/test.py

@@ -0,0 +1,164 @@
+import modules.aisql as aisql
+import main
+
+import time
+import sys
+
+from PyQt5.QtCore import QObject, QThread, pyqtSignal, pyqtSlot
+from PyQt5.QtWidgets import QApplication, QPushButton, QTextEdit, QVBoxLayout, QWidget
+
+apikey = "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"
+
+def trap_exc_during_debug(*args):
+    # when app raises uncaught exception, print info
+    print(args)
+
+
+# install exception hook: without this, uncaught exception would cause application to exit
+sys.excepthook = trap_exc_during_debug
+
+
+class Worker(QObject):
+    """
+    Must derive from QObject in order to emit signals, connect slots to other signals, and operate in a QThread.
+    """
+
+    sig_step = pyqtSignal(int, str)  # worker id, step description: emitted every step through work() loop
+    sig_done = pyqtSignal(int)  # worker id: emitted at end of work()
+    sig_msg = pyqtSignal(str)  # message to be shown to user
+
+    def __init__(self, id: int):
+        super().__init__()
+        self.__id = id
+        self.__abort = False
+
+    @pyqtSlot()
+    def work(self):
+        """
+        Pretend this worker method does work that takes a long time. During this time, the thread's
+        event loop is blocked, except if the application's processEvents() is called: this gives every
+        thread (incl. main) a chance to process events, which in this sample means processing signals
+        received from GUI (such as abort).
+        """
+        thread_name = QThread.currentThread().objectName()
+        thread_id = int(QThread.currentThreadId())  # cast to int() is necessary
+        self.sig_msg.emit('Running worker #{} from thread "{}" (#{})'.format(self.__id, thread_name, thread_id))
+
+        for step in range(100):
+            time.sleep(0.1)
+            self.sig_step.emit(self.__id, 'step ' + str(step))
+
+            # check if we need to abort the loop; need to process events to receive signals;
+            app.processEvents()  # this could cause change to self.__abort
+            if self.__abort:
+                # note that "step" value will not necessarily be same for every thread
+                self.sig_msg.emit('Worker #{} aborting work at step {}'.format(self.__id, step))
+                break
+
+        self.sig_done.emit(self.__id)
+
+    def abort(self):
+        self.sig_msg.emit('Worker #{} notified to abort'.format(self.__id))
+        self.__abort = True
+
+
+class MyWidget(QWidget):
+    NUM_THREADS = 5
+
+    # sig_start = pyqtSignal()  # needed only due to PyCharm debugger bug (!)
+    sig_abort_workers = pyqtSignal()
+
+    def __init__(self):
+        super().__init__()
+
+        self.setWindowTitle("Thread Example")
+        form_layout = QVBoxLayout()
+        self.setLayout(form_layout)
+        self.resize(400, 800)
+
+        self.button_start_threads = QPushButton()
+        self.button_start_threads.clicked.connect(self.start_threads)
+        self.button_start_threads.setText("Start {} threads".format(self.NUM_THREADS))
+        form_layout.addWidget(self.button_start_threads)
+
+        self.button_stop_threads = QPushButton()
+        self.button_stop_threads.clicked.connect(self.abort_workers)
+        self.button_stop_threads.setText("Stop threads")
+        self.button_stop_threads.setDisabled(True)
+        form_layout.addWidget(self.button_stop_threads)
+
+        self.log = QTextEdit()
+        form_layout.addWidget(self.log)
+
+        self.progress = QTextEdit()
+        form_layout.addWidget(self.progress)
+
+        QThread.currentThread().setObjectName('main')  # threads can be named, useful for log output
+        self.__workers_done = None
+        self.__threads = None
+
+    def start_threads(self):
+        self.log.append('starting {} threads'.format(self.NUM_THREADS))
+        self.button_start_threads.setDisabled(True)
+        self.button_stop_threads.setEnabled(True)
+
+        self.__workers_done = 0
+        self.__threads = []
+        for idx in range(self.NUM_THREADS):
+            worker = Worker(idx)
+            thread = QThread()
+            thread.setObjectName('thread_' + str(idx))
+            self.__threads.append((thread, worker))  # need to store worker too otherwise will be gc'd
+            worker.moveToThread(thread)
+
+            # get progress messages from worker:
+            worker.sig_step.connect(self.on_worker_step)
+            worker.sig_done.connect(self.on_worker_done)
+            worker.sig_msg.connect(self.log.append)
+
+            # control worker:
+            self.sig_abort_workers.connect(worker.abort)
+
+            # get read to start worker:
+            # self.sig_start.connect(worker.work)  # needed due to PyCharm debugger bug (!); comment out next line
+            thread.started.connect(worker.work)
+            thread.start()  # this will emit 'started' and start thread's event loop
+
+        # self.sig_start.emit()  # needed due to PyCharm debugger bug (!)
+
+    @pyqtSlot(int, str)
+    def on_worker_step(self, worker_id: int, data: str):
+        self.log.append('Worker #{}: {}'.format(worker_id, data))
+        self.progress.append('{}: {}'.format(worker_id, data))
+
+    @pyqtSlot(int)
+    def on_worker_done(self, worker_id):
+        self.log.append('worker #{} done'.format(worker_id))
+        self.progress.append('-- Worker {} DONE'.format(worker_id))
+        self.__workers_done += 1
+        if self.__workers_done == self.NUM_THREADS:
+            self.log.append('No more workers active')
+            self.button_start_threads.setEnabled(True)
+            self.button_stop_threads.setDisabled(True)
+            # self.__threads = None
+
+    @pyqtSlot()
+    def abort_workers(self):
+        self.sig_abort_workers.emit()
+        self.log.append('Asking each worker to abort')
+        for thread, worker in self.__threads:  # note nice unpacking by Python, avoids indexing
+            thread.quit()  # this will quit **as soon as thread event loop unblocks**
+            thread.wait()  # <- so you need to wait for it to *actually* quit
+
+        # even though threads have exited, there may still be messages on the main thread's
+        # queue (messages that threads emitted before the abort):
+        self.log.append('All threads exited')
+
+
+if __name__ == "__main__":
+    app = QApplication([])
+
+    form = MyWidget()
+    form.show()
+
+    sys.exit(app.exec_())

webgui/app.py

@@ -0,0 +1,18 @@
+from flask import Flask, render_template, request
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('main.html')
+
+@app.route('/', methods=['POST'])
+def convert():
+    text_input = request.form['textInput']
+    # Process the text_input and generate the SQL
+    # For example:
+    generated_sql = text_input
+    return render_template('main.html', generated_sql=generated_sql)
+
+if __name__ == '__main__':
+    app.run(debug=True)

webgui/design.html

@@ -0,0 +1,89 @@
+<DOCTYPE html>
+    <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport"
+                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+            <meta http-equiv="X-UA-Compatible" content="ie=edge">
+            <title>Document</title>
+            <link rel="stylesheet" type="text/css" href="static/bootstrap-5.3.0-alpha3-dist/css/bootstrap.css">
+        </head>
+<body>
+    <nav class="navbar navbar-expand-md navbar-light bg-dark-subtle">
+        <div class="container">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#">Human to SQL</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Setup Database</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Setup API Key</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mt-3">
+        <div class="row">
+            <div class="col">
+                <label for="textInput">Prompt:</label>
+                <div class="input-group">
+                    <input type="text" id="textInput" class="form-control" placeholder="Enter prompt">
+                    <div class="input-group-append">
+                        <button class="btn btn-primary" type="button">Convert</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-3">
+            <div class="col">
+                <label for="textArea1">Generated SQL:</label>
+                <textarea id="textArea1" class="form-control" rows="4" placeholder="" disabled="disabled"></textarea>
+                <div class="mt-3">
+                    <button class="btn btn-primary" type="button">Paste to shell</button>
+                </div>
+            </div>
+            <div class="col">
+                <label for="textArea2">SQL Shell:</label>
+                <textarea id="textArea2" class="form-control" rows="4" placeholder="Enter sql"></textarea>
+                <div class="mt-3">
+                    <button class="btn btn-primary" type="button">Execute</button>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-3">
+            <div class="col">
+                <p> For x in data, for i in x etc:</p>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Column 1</th>
+                            <th>Column 2</th>
+                            <th>Column 3</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Data 1</td>
+                            <td>Data 2</td>
+                            <td>Data 3</td>
+                        </tr>
+                        <tr>
+                            <td>Data 4</td>
+                            <td>Data 5</td>
+                            <td>Data 6</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

webgui/static/bootstrap-5.3.0-alpha3-dist/css/bootstrap-reboot.css

@@ -0,0 +1,591 @@
+/*!
+ * Bootstrap Reboot v5.3.0-alpha3 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #adb5bd;
+  --bs-body-color-rgb: 173, 181, 189;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(173, 181, 189, 0.75);
+  --bs-secondary-color-rgb: 173, 181, 189;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
+  --bs-tertiary-color-rgb: 173, 181, 189;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color, inherit);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

webgui/static/bootstrap-5.3.0-alpha3-dist/css/bootstrap-reboot.rtl.css

@@ -0,0 +1,588 @@
+/*!
+ * Bootstrap Reboot v5.3.0-alpha3 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #adb5bd;
+  --bs-body-color-rgb: 173, 181, 189;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(173, 181, 189, 0.75);
+  --bs-secondary-color-rgb: 173, 181, 189;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
+  --bs-tertiary-color-rgb: 173, 181, 189;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color, inherit);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

webgui/templates/main.html

@@ -0,0 +1,92 @@
+<DOCTYPE html>
+    <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport"
+                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+            <meta http-equiv="X-UA-Compatible" content="ie=edge">
+            <title>Document</title>
+            <link rel="stylesheet" type="text/css" href="static/bootstrap-5.3.0-alpha3-dist/css/bootstrap.css">
+        </head>
+<body>
+    <nav class="navbar navbar-expand-md navbar-light bg-dark-subtle">
+        <div class="container">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#">Human to SQL</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Setup Database</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Setup API Key</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mt-3">
+        <div class="row">
+            <div class="col">
+               <!-- Add this form tag to wrap your input field and Convert button -->
+                <form action="/" method="post">
+                    <label for="textInput">Prompt:</label>
+                    <div class="input-group">
+                        <input type="text" id="textInput" name="textInput" class="form-control" placeholder="Enter prompt">
+                        <div class="input-group-append">
+                            <button class="btn btn-primary" type="submit">Convert</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="row mt-3">
+            <div class="col">
+                <label for="textArea1">Generated SQL:</label>
+                <textarea id="textArea1" class="form-control" rows="4" placeholder="" disabled="disabled">{{ generated_sql }}</textarea>
+                <div class="mt-3">
+                    <button class="btn btn-primary" type="button">Paste to shell</button>
+                </div>
+            </div>
+            <div class="col">
+                <label for="textArea2">SQL Shell:</label>
+                <textarea id="textArea2" class="form-control" rows="4" placeholder="Enter sql"></textarea>
+                <div class="mt-3">
+                    <button class="btn btn-primary" type="button">Execute</button>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-3">
+            <div class="col">
+                <p> For x in data, for i in x etc:</p>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Column 1</th>
+                            <th>Column 2</th>
+                            <th>Column 3</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Data 1</td>
+                            <td>Data 2</td>
+                            <td>Data 3</td>
+                        </tr>
+                        <tr>
+                            <td>Data 4</td>
+                            <td>Data 5</td>
+                            <td>Data 6</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

webgui/test/app.py

@@ -0,0 +1,53 @@
+# app.py
+
+from flask import Flask, render_template, jsonify
+from multiprocessing import Process, Queue
+import time
+
+app = Flask(__name__)
+
+# Queue to store task results
+task_queue = Queue()
+task_process = None
+
+
+def long_running_task():
+    # Simulate a long-running task
+    time.sleep(5)
+    # Store the result in the task queue
+    task_queue.put("Task completed")
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/start-task')
+def start_task():
+    global task_process
+
+    if task_process is None or not task_process.is_alive():
+        # Start the long-running task in a separate process
+        task_process = Process(target=long_running_task)
+        task_process.start()
+        return jsonify({'status': 'Task started'})
+    else:
+        return jsonify({'status': 'Task already in progress'})
+
+
+@app.route('/task-status')
+def task_status():
+    # Check the status of the task
+    if task_process is not None and task_process.is_alive():
+        status = 'In progress'
+    elif not task_queue.empty():
+        status = task_queue.get()
+    else:
+        status = 'Task not started'
+
+    return jsonify({'status': status})
+
+
+if __name__ == '__main__':
+    app.run()

webgui/test/templates/index.html

@@ -0,0 +1,36 @@
+<!-- index.html -->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Long Task Example</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('#start-task').click(function() {
+                $.getJSON('/start-task', function(response) {
+                    console.log(response);
+                });
+            });
+
+            setInterval(function() {
+                $.getJSON('/task-status', function(response) {
+                    console.log(response);
+                    if (response.status === 'In progress') {
+                        // Update the page with a loading indicator or progress bar
+                        $('#task-status').text('Task in progress...');
+                    } else {
+                        // Update the page with the task completion message
+                        $('#task-status').text('Task completed!');
+                    }
+                });
+            }, 1000);  // Periodically check the task status every 1 second
+        });
+    </script>
+</head>
+<body>
+    <h1>Long Task Example</h1>
+    <button id="start-task">Start Task</button>
+    <p id="task-status"></p>
+</body>
+</html>