From 0bd9cd991475a1d7f9dbde5cdeb3e1b3bc9d6823 Mon Sep 17 00:00:00 2001
From: hcyuen <hcyuen@live.hk>
Date: Mon, 6 Mar 2023 13:35:24 +0800
Subject: [PATCH 1/7] Use ajax call instead of reload whole page

---
 src/website/static/index.js              |  29 ++++
 src/website/templates/alert_box.html     |   6 +
 src/website/templates/base.html          |   3 +-
 src/website/templates/index.html         | 202 ++++++++++++-----------
 src/website/templates/search_result.html |  28 ++++
 src/website/views.py                     |  39 ++++-
 6 files changed, 199 insertions(+), 108 deletions(-)
 create mode 100644 src/website/templates/alert_box.html
 create mode 100644 src/website/templates/search_result.html

diff --git a/src/website/static/index.js b/src/website/static/index.js
index e69de29..902a66d 100644
--- a/src/website/static/index.js
+++ b/src/website/static/index.js
@@ -0,0 +1,29 @@
+$(document).ready(function () {
+    $('#search-btn').click(function (event) {
+        event.preventDefault();
+        let search_text = $('#form1').val();
+        if (search_text.length === 0) {
+            alert("Please input any search query. ");
+            return
+        }
+        $.ajax({
+            url: '/search',
+            type: 'POST',
+            data: {
+                q: search_text,
+                bing_search_subscription_key: $('#bing_search_subscription_key').val(),
+                openai_api_key: $('#openai_api_key').val(),
+                is_use_source: $('input[name="is_use_source"]').val(),
+                llm_service_provider: $('#llm_service_provider').val(),
+                llm_model: $('#llm_model').val(),
+                semantic_search_provider: $('#semantic_search_provider').val()
+            },
+            success: function (response) {
+                $('#' + response.id).html(response.html)
+            },
+            error: function (error) {
+                console.log(error)
+            }
+        })
+    })
+})
\ No newline at end of file
diff --git a/src/website/templates/alert_box.html b/src/website/templates/alert_box.html
new file mode 100644
index 0000000..a9dbcf9
--- /dev/null
+++ b/src/website/templates/alert_box.html
@@ -0,0 +1,6 @@
+{% if error %}
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <strong>Encountered error</strong> {{ error }}
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/website/templates/base.html b/src/website/templates/base.html
index b1e1bec..30355ad 100644
--- a/src/website/templates/base.html
+++ b/src/website/templates/base.html
@@ -38,8 +38,9 @@
     </div>
 </footer>
 
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+<script type="text/javascript" src="{{url_for('static', filename='index.js')}}"></script>
 </body>
 </html>
diff --git a/src/website/templates/index.html b/src/website/templates/index.html
index 2066c45..ff18921 100644
--- a/src/website/templates/index.html
+++ b/src/website/templates/index.html
@@ -1,113 +1,119 @@
 {% extends "base.html" %} {% block title %}SearchGPT{% endblock %}
 {% block content %}
 <div class="container mt-4">
-    {% if error %}
-    <div class="alert alert-danger alert-dismissible fade show" role="alert">
-        <strong>Encountered error</strong> {{ error }}
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <div id="alert-box">
+        {% include 'alert_box.html' %}
+        <!--    {% if error %}-->
+        <!--    <div class="alert alert-danger alert-dismissible fade show" role="alert">-->
+        <!--        <strong>Encountered error</strong> {{ error }}-->
+        <!--        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>-->
+        <!--    </div>-->
+        <!--    {% endif %}-->
     </div>
-    {% endif %}
     <div>
-        <form action="/index" method="get">
-            <div class="input-group">
-                <input type="search" id="form1" class="form-control"
-                       placeholder="Ask: e.g. What is ChatGPT"
-                       name="q" value="{{ request.args.get('q', '') }}"
-                       minlength="10" maxlength="200" required/>
-                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
+        <!--        <form action="/index" method="get">-->
+        <div class="input-group">
+            <input type="search" id="form1" class="form-control"
+                   placeholder="Ask: e.g. What is ChatGPT"
+                   name="q" value="{{ request.args.get('q', '') }}"
+                   minlength="10" maxlength="200" required/>
+            <button type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i></button>
+        </div>
+        <div class="row mt-4">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="bing_search_subscription_key">Bing Search Subscription Key</label>
+                    <input type="text" class="form-control" id="bing_search_subscription_key" placeholder="Enter key"
+                           name="bing_search_subscription_key"
+                           value="{{ request.args.get('bing_search_subscription_key', '') }}">
+                </div>
+                <div class="form-group">
+                    <label for="openai_api_key">OpenAI API Key</label>
+                    <input type="text" class="form-control" id="openai_api_key" placeholder="Enter key"
+                           name="openai_api_key" value="{{ request.args.get('openai_api_key', '') }}">
+                </div>
             </div>
-            <div class="row mt-4">
-                <div class="col-md-6">
-                    <div class="form-group">
-                        <label for="bing_search_subscription_key">Bing Search Subscription Key</label>
-                        <input type="text" class="form-control" id="bing_search_subscription_key" placeholder="Enter key"
-                               name="bing_search_subscription_key" value="{{ request.args.get('bing_search_subscription_key', '') }}">
-                    </div>
-                    <div class="form-group">
-                        <label for="openai_api_key">OpenAI API Key</label>
-                        <input type="text" class="form-control" id="openai_api_key" placeholder="Enter key"
-                               name="openai_api_key" value="{{ request.args.get('openai_api_key', '') }}">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="is_use_source">Use source/grounded search?</label>
+                    <div class="form-check">
+                        {% if request.args.get('is_use_source', 'true') != 'False' %}
+                        <input class="form-check-input" type="checkbox" name="is_use_source" checked>
+                        {% else %}
+                        <input class="form-check-input" type="checkbox" name="is_use_source">
+                        {% endif %}
+                        <label class="form-check-label" for="is_use_source">
+                            Check to enable
+                        </label>
                     </div>
+                    <input type="hidden" name="is_use_source" value="False">
                 </div>
-                <div class="col-md-6">
-                    <div class="form-group">
-                        <label for="is_use_source">Use source/grounded search?</label>
-                        <div class="form-check">
-                            {% if request.args.get('is_use_source', 'true') != 'False' %}
-                            <input class="form-check-input" type="checkbox" name="is_use_source" checked>
-                            {% else %}
-                            <input class="form-check-input" type="checkbox" name="is_use_source">
-                            {% endif %}
-                            <label class="form-check-label" for="is_use_source">
-                                Check to enable
-                            </label>
-                        </div>
-                        <input type="hidden" name="is_use_source" value="False">
-                    </div>
-                    <div class="form-group">
-                        <label for="llm_service_provider">LLM Service Provider</label>
-                        <select class="form-control" id="llm_service_provider">
-                            <option value="openai">OpenAI</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="llm_model">LLM Model</label>
-                        <select class="form-control" id="llm_model" name="llm_model">
-                            <option value="gpt-3.5-turbo">gpt-3.5-turbo (Best model that supporting ChatGPT)</option>
-                            <option value="text-davinci-003"
-                                    {% if request.args.get(
-                            'llm_model') == 'text-davinci-003' %} selected {% endif %}
-                            >text-davinci-003</option>
-                            <option value="text-curie-001"
-                                    {% if request.args.get(
-                            'llm_model') == 'text-curie-001' %} selected {% endif %}
-                            >text-curie-001</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="semantic_search_provider">Semantic Search Provider</label>
-                        <select class="form-control" id="semantic_search_provider" name="semantic_search_provider">
-                            <option value="faiss-openai">FAISS-OpenAI Embedding (fast, best accuracy, need OpenAI key)</option>
-                            <option value="faiss-huggingface"
-                                    {% if request.args.get(
-                            'semantic_search_provider') == 'faiss-huggingface' %} selected {% endif %}
-                            >FAISS-HuggingFace Embedding (slow, good accuracy, free)</option>
-                        </select>
-                    </div>
+                <div class="form-group">
+                    <label for="llm_service_provider">LLM Service Provider</label>
+                    <select class="form-control" id="llm_service_provider">
+                        <option value="openai">OpenAI</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="llm_model">LLM Model</label>
+                    <select class="form-control" id="llm_model" name="llm_model">
+                        <option value="gpt-3.5-turbo">gpt-3.5-turbo (Best model that supporting ChatGPT)</option>
+                        <option value="text-davinci-003"
+                                {% if request.args.get(
+                        'llm_model') == 'text-davinci-003' %} selected {% endif %}
+                        >text-davinci-003</option>
+                        <option value="text-curie-001"
+                                {% if request.args.get(
+                        'llm_model') == 'text-curie-001' %} selected {% endif %}
+                        >text-curie-001</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="semantic_search_provider">Semantic Search Provider</label>
+                    <select class="form-control" id="semantic_search_provider" name="semantic_search_provider">
+                        <option value="faiss-openai">FAISS-OpenAI Embedding (fast, best accuracy, need OpenAI key)
+                        </option>
+                        <option value="faiss-huggingface"
+                                {% if request.args.get(
+                        'semantic_search_provider') == 'faiss-huggingface' %} selected {% endif %}
+                        >FAISS-HuggingFace Embedding (slow, good accuracy, free)</option>
+                    </select>
                 </div>
             </div>
-        </form>
+        </div>
+        <!--        </form>-->
     </div>
     <hr>
-    <div class="container mt-4">
-        <div class="row">
-            <div class="col-md-6">
-                <h2>{{search_text}}</h2>
-                <p>
-                    {% for item in response_json %}
-                    {% if item['type'] == 'footnote' %}
-                    <span style="font-weight: bold; font-size: 0.8rem; background-color: #88effc;">{{ item['text'] }}</span>
-                    {% else %}
-                    {{ item['text'] }}
-                    {% endif %}
-                    {% endfor %}
-                </p>
-            </div>
-            <div class="col-md-6">
-                <ul class="list-group">
-                    {% for item in source_json %}
-                    <li class="list-group-item">
-                        <h5 class="mb-1">
-                            <img src="https://www.google.com/s2/favicons?domain={{item['domain']}}" alt="Favicon">
-                            <a href="{{item['url']}}">{{item['footnote']}} {{item['domain']}}</a>
-                        </h5>
-                        <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">{{item['title']}}</h4>
-                        <p class="mb-1">{{item['text']}}</p>
-                    </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
+    <div class="container mt-4" id="search-results">
+        {% include 'search_result.html' %}
+        <!--        <div class="row">-->
+        <!--            <div class="col-md-6">-->
+        <!--                <h2>{{search_text}}</h2>-->
+        <!--                <p>-->
+        <!--                    {% for item in response_json %}-->
+        <!--                    {% if item['type'] == 'footnote' %}-->
+        <!--                    <span style="font-weight: bold; font-size: 0.8rem; background-color: #88effc;">{{ item['text'] }}</span>-->
+        <!--                    {% else %}-->
+        <!--                    {{ item['text'] }}-->
+        <!--                    {% endif %}-->
+        <!--                    {% endfor %}-->
+        <!--                </p>-->
+        <!--            </div>-->
+        <!--            <div class="col-md-6">-->
+        <!--                <ul class="list-group">-->
+        <!--                    {% for item in source_json %}-->
+        <!--                    <li class="list-group-item">-->
+        <!--                        <h5 class="mb-1">-->
+        <!--                            <img src="https://www.google.com/s2/favicons?domain={{item['domain']}}" alt="Favicon">-->
+        <!--                            <a href="{{item['url']}}">{{item['footnote']}} {{item['domain']}}</a>-->
+        <!--                        </h5>-->
+        <!--                        <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">{{item['title']}}</h4>-->
+        <!--                        <p class="mb-1">{{item['text']}}</p>-->
+        <!--                    </li>-->
+        <!--                    {% endfor %}-->
+        <!--                </ul>-->
+        <!--            </div>-->
+        <!--        </div>-->
     </div>
     <hr>
 </div>
diff --git a/src/website/templates/search_result.html b/src/website/templates/search_result.html
new file mode 100644
index 0000000..0f838ce
--- /dev/null
+++ b/src/website/templates/search_result.html
@@ -0,0 +1,28 @@
+<div class="row">
+    <div class="col-md-6">
+        <h2>{{search_text}}</h2>
+        <p>
+            {% for item in response_json %}
+            {% if item['type'] == 'footnote' %}
+            <span style="font-weight: bold; font-size: 0.8rem; background-color: #88effc;">{{ item['text'] }}</span>
+            {% else %}
+            {{ item['text'] }}
+            {% endif %}
+            {% endfor %}
+        </p>
+    </div>
+    <div class="col-md-6">
+        <ul class="list-group">
+            {% for item in source_json %}
+            <li class="list-group-item">
+                <h5 class="mb-1">
+                    <img src="https://www.google.com/s2/favicons?domain={{item['domain']}}" alt="Favicon">
+                    <a href="{{item['url']}}">{{item['footnote']}} {{item['domain']}}</a>
+                </h5>
+                <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">{{item['title']}}</h4>
+                <p class="mb-1">{{item['text']}}</p>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/website/views.py b/src/website/views.py
index f9185d9..00c0a08 100644
--- a/src/website/views.py
+++ b/src/website/views.py
@@ -1,4 +1,5 @@
 from flask import Blueprint, render_template, request
+
 from SearchGPTService import SearchGPTService
 from Util import setup_logger
 
@@ -7,11 +8,22 @@
 
 
 @views.route('/', methods=['GET'])
-@views.route('/index', methods=['GET'])
+def start_page():
+    data_json = {'response_json': [], 'source_json': []}
+    return render_template("index.html",
+                           search_text='' or "Please search for something.",
+                           response_json=data_json.get('response_json'),
+                           source_json=data_json.get('source_json'),
+                           error=None
+                           )
+
+
+@views.route('/search', methods=['POST'])
 def index_page():
     error = None
+    data_json = {'response_json': [], 'source_json': []}
+    search_text = request.values.get('q')
     try:
-        search_text = request.values.get('q')
         ui_overriden_config = {
             'bing_search_subscription_key': request.values.get('bing_search_subscription_key'),
             'openai_api_key': request.values.get('openai_api_key'),
@@ -22,19 +34,28 @@ def index_page():
         }
         logger.info(f"GET ui_overriden_config: {ui_overriden_config}")
 
-        data_json = {'response_json': [], 'source_json': []}
         if search_text is not None:
             search_gpt_service = SearchGPTService(ui_overriden_config)
             response_text, response_text_with_footnote, source_text, data_json = search_gpt_service.query_and_get_answer(search_text)
             # response_text, response_text_with_footnote, source_text, data_json = "test", "test", "test", {'response_json': [], 'source_json': []}
     except Exception as e:
         error = str(e)
-    return render_template("index.html",
-                           search_text=search_text or "Please search for something.",
-                           response_json=data_json.get('response_json'),
-                           source_json=data_json.get('source_json'),
-                           error=error
-                           )
+
+    if error is None:
+        result_html = render_template('search_result.html',
+                                      search_text=search_text,
+                                      response_json=data_json.get('response_json'),
+                                      source_json=data_json.get('source_json'))
+        return {
+            'id': 'search-results',
+            'html': result_html
+        }
+    else:
+        result_html = render_template('alert_box.html', error=error)
+        return {
+            'id': 'alert-box',
+            'html': result_html
+        }
 
 
 @views.route('/index_static', methods=['GET', 'POST'])

From 35d10a65f0ea0a38c44ea2a2c9a11f971e239018 Mon Sep 17 00:00:00 2001
From: hcyuen <hcyuen@live.hk>
Date: Mon, 6 Mar 2023 14:41:13 +0800
Subject: [PATCH 2/7] add load spinner

---
 src/website/static/index.js      |  9 +++++++
 src/website/templates/index.html | 45 +++++++-------------------------
 2 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/src/website/static/index.js b/src/website/static/index.js
index 902a66d..3bb0bb2 100644
--- a/src/website/static/index.js
+++ b/src/website/static/index.js
@@ -6,6 +6,9 @@ $(document).ready(function () {
             alert("Please input any search query. ");
             return
         }
+        $('#search-btn')[0].disabled = true;
+        $('#search-result-spinner').addClass('d-flex');
+        $('#search-results').hide();
         $.ajax({
             url: '/search',
             type: 'POST',
@@ -20,9 +23,15 @@ $(document).ready(function () {
             },
             success: function (response) {
                 $('#' + response.id).html(response.html)
+                $('#search-btn')[0].disabled = false;
+                $('#search-result-spinner').removeClass('d-flex');
+                $('#search-results').show();
             },
             error: function (error) {
                 console.log(error)
+                $('#search-btn')[0].disabled = false;
+                $('#search-result-spinner').removeClass('d-flex');
+                $('#search-results').show();
             }
         })
     })
diff --git a/src/website/templates/index.html b/src/website/templates/index.html
index ff18921..186ce92 100644
--- a/src/website/templates/index.html
+++ b/src/website/templates/index.html
@@ -3,12 +3,6 @@
 <div class="container mt-4">
     <div id="alert-box">
         {% include 'alert_box.html' %}
-        <!--    {% if error %}-->
-        <!--    <div class="alert alert-danger alert-dismissible fade show" role="alert">-->
-        <!--        <strong>Encountered error</strong> {{ error }}-->
-        <!--        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>-->
-        <!--    </div>-->
-        <!--    {% endif %}-->
     </div>
     <div>
         <!--        <form action="/index" method="get">-->
@@ -84,36 +78,15 @@
         <!--        </form>-->
     </div>
     <hr>
-    <div class="container mt-4" id="search-results">
-        {% include 'search_result.html' %}
-        <!--        <div class="row">-->
-        <!--            <div class="col-md-6">-->
-        <!--                <h2>{{search_text}}</h2>-->
-        <!--                <p>-->
-        <!--                    {% for item in response_json %}-->
-        <!--                    {% if item['type'] == 'footnote' %}-->
-        <!--                    <span style="font-weight: bold; font-size: 0.8rem; background-color: #88effc;">{{ item['text'] }}</span>-->
-        <!--                    {% else %}-->
-        <!--                    {{ item['text'] }}-->
-        <!--                    {% endif %}-->
-        <!--                    {% endfor %}-->
-        <!--                </p>-->
-        <!--            </div>-->
-        <!--            <div class="col-md-6">-->
-        <!--                <ul class="list-group">-->
-        <!--                    {% for item in source_json %}-->
-        <!--                    <li class="list-group-item">-->
-        <!--                        <h5 class="mb-1">-->
-        <!--                            <img src="https://www.google.com/s2/favicons?domain={{item['domain']}}" alt="Favicon">-->
-        <!--                            <a href="{{item['url']}}">{{item['footnote']}} {{item['domain']}}</a>-->
-        <!--                        </h5>-->
-        <!--                        <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">{{item['title']}}</h4>-->
-        <!--                        <p class="mb-1">{{item['text']}}</p>-->
-        <!--                    </li>-->
-        <!--                    {% endfor %}-->
-        <!--                </ul>-->
-        <!--            </div>-->
-        <!--        </div>-->
+    <div class="container mt-4">
+        <div class="justify-content-center" id="search-result-spinner" hidden>
+            <div class="spinner-border" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <div id="search-results">
+            {% include 'search_result.html' %}
+        </div>
     </div>
     <hr>
 </div>

From 7fba74a85469a13f1a5bc0ba50f3ee4f0c3a01fd Mon Sep 17 00:00:00 2001
From: hcyuen <hcyuen@live.hk>
Date: Mon, 6 Mar 2023 18:16:36 +0800
Subject: [PATCH 3/7] add back /index for routing to main page

---
 src/website/views.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/website/views.py b/src/website/views.py
index 00c0a08..71e4d57 100644
--- a/src/website/views.py
+++ b/src/website/views.py
@@ -8,6 +8,7 @@
 
 
 @views.route('/', methods=['GET'])
+@views.route('/index', methods=['GET'])
 def start_page():
     data_json = {'response_json': [], 'source_json': []}
     return render_template("index.html",

From 695f11df990a6012fe08b2e273d4bce232960053 Mon Sep 17 00:00:00 2001
From: hcyuen <hcyuen@live.hk>
Date: Mon, 6 Mar 2023 19:17:39 +0800
Subject: [PATCH 4/7] fix search text num char validation

---
 src/website/static/index.js      |   6 +-
 src/website/templates/index.html | 133 ++++++++++++++++---------------
 2 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/src/website/static/index.js b/src/website/static/index.js
index 3bb0bb2..e80827d 100644
--- a/src/website/static/index.js
+++ b/src/website/static/index.js
@@ -1,11 +1,7 @@
 $(document).ready(function () {
-    $('#search-btn').click(function (event) {
+    $('form').submit(function(event) {
         event.preventDefault();
         let search_text = $('#form1').val();
-        if (search_text.length === 0) {
-            alert("Please input any search query. ");
-            return
-        }
         $('#search-btn')[0].disabled = true;
         $('#search-result-spinner').addClass('d-flex');
         $('#search-results').hide();
diff --git a/src/website/templates/index.html b/src/website/templates/index.html
index 186ce92..b5c14b6 100644
--- a/src/website/templates/index.html
+++ b/src/website/templates/index.html
@@ -5,77 +5,78 @@
         {% include 'alert_box.html' %}
     </div>
     <div>
-        <!--        <form action="/index" method="get">-->
-        <div class="input-group">
-            <input type="search" id="form1" class="form-control"
-                   placeholder="Ask: e.g. What is ChatGPT"
-                   name="q" value="{{ request.args.get('q', '') }}"
-                   minlength="10" maxlength="200" required/>
-            <button type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i></button>
-        </div>
-        <div class="row mt-4">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="bing_search_subscription_key">Bing Search Subscription Key</label>
-                    <input type="text" class="form-control" id="bing_search_subscription_key" placeholder="Enter key"
-                           name="bing_search_subscription_key"
-                           value="{{ request.args.get('bing_search_subscription_key', '') }}">
-                </div>
-                <div class="form-group">
-                    <label for="openai_api_key">OpenAI API Key</label>
-                    <input type="text" class="form-control" id="openai_api_key" placeholder="Enter key"
-                           name="openai_api_key" value="{{ request.args.get('openai_api_key', '') }}">
-                </div>
+        <form action="/search" method="post">
+            <div class="input-group">
+                <input type="search" id="form1" class="form-control"
+                       placeholder="Ask: e.g. What is ChatGPT"
+                       name="q" value="{{ request.args.get('q', '') }}"
+                       minlength="10" maxlength="200" required/>
+                <button type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i></button>
             </div>
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="is_use_source">Use source/grounded search?</label>
-                    <div class="form-check">
-                        {% if request.args.get('is_use_source', 'true') != 'False' %}
-                        <input class="form-check-input" type="checkbox" name="is_use_source" checked>
-                        {% else %}
-                        <input class="form-check-input" type="checkbox" name="is_use_source">
-                        {% endif %}
-                        <label class="form-check-label" for="is_use_source">
-                            Check to enable
-                        </label>
+            <div class="row mt-4">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="bing_search_subscription_key">Bing Search Subscription Key</label>
+                        <input type="text" class="form-control" id="bing_search_subscription_key"
+                               placeholder="Enter key"
+                               name="bing_search_subscription_key"
+                               value="{{ request.args.get('bing_search_subscription_key', '') }}">
+                    </div>
+                    <div class="form-group">
+                        <label for="openai_api_key">OpenAI API Key</label>
+                        <input type="text" class="form-control" id="openai_api_key" placeholder="Enter key"
+                               name="openai_api_key" value="{{ request.args.get('openai_api_key', '') }}">
                     </div>
-                    <input type="hidden" name="is_use_source" value="False">
-                </div>
-                <div class="form-group">
-                    <label for="llm_service_provider">LLM Service Provider</label>
-                    <select class="form-control" id="llm_service_provider">
-                        <option value="openai">OpenAI</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label for="llm_model">LLM Model</label>
-                    <select class="form-control" id="llm_model" name="llm_model">
-                        <option value="gpt-3.5-turbo">gpt-3.5-turbo (Best model that supporting ChatGPT)</option>
-                        <option value="text-davinci-003"
-                                {% if request.args.get(
-                        'llm_model') == 'text-davinci-003' %} selected {% endif %}
-                        >text-davinci-003</option>
-                        <option value="text-curie-001"
-                                {% if request.args.get(
-                        'llm_model') == 'text-curie-001' %} selected {% endif %}
-                        >text-curie-001</option>
-                    </select>
                 </div>
-                <div class="form-group">
-                    <label for="semantic_search_provider">Semantic Search Provider</label>
-                    <select class="form-control" id="semantic_search_provider" name="semantic_search_provider">
-                        <option value="faiss-openai">FAISS-OpenAI Embedding (fast, best accuracy, need OpenAI key)
-                        </option>
-                        <option value="faiss-huggingface"
-                                {% if request.args.get(
-                        'semantic_search_provider') == 'faiss-huggingface' %} selected {% endif %}
-                        >FAISS-HuggingFace Embedding (slow, good accuracy, free)</option>
-                    </select>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="is_use_source">Use source/grounded search?</label>
+                        <div class="form-check">
+                            {% if request.args.get('is_use_source', 'true') != 'False' %}
+                            <input class="form-check-input" type="checkbox" name="is_use_source" checked>
+                            {% else %}
+                            <input class="form-check-input" type="checkbox" name="is_use_source">
+                            {% endif %}
+                            <label class="form-check-label" for="is_use_source">
+                                Check to enable
+                            </label>
+                        </div>
+                        <input type="hidden" name="is_use_source" value="False">
+                    </div>
+                    <div class="form-group">
+                        <label for="llm_service_provider">LLM Service Provider</label>
+                        <select class="form-control" id="llm_service_provider">
+                            <option value="openai">OpenAI</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="llm_model">LLM Model</label>
+                        <select class="form-control" id="llm_model" name="llm_model">
+                            <option value="gpt-3.5-turbo">gpt-3.5-turbo (Best model that supporting ChatGPT)</option>
+                            <option value="text-davinci-003"
+                                    {% if request.args.get(
+                            'llm_model') == 'text-davinci-003' %} selected {% endif %}
+                            >text-davinci-003</option>
+                            <option value="text-curie-001"
+                                    {% if request.args.get(
+                            'llm_model') == 'text-curie-001' %} selected {% endif %}
+                            >text-curie-001</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="semantic_search_provider">Semantic Search Provider</label>
+                        <select class="form-control" id="semantic_search_provider" name="semantic_search_provider">
+                            <option value="faiss-openai">FAISS-OpenAI Embedding (fast, best accuracy, need OpenAI key)
+                            </option>
+                            <option value="faiss-huggingface"
+                                    {% if request.args.get(
+                            'semantic_search_provider') == 'faiss-huggingface' %} selected {% endif %}
+                            >FAISS-HuggingFace Embedding (slow, good accuracy, free)</option>
+                        </select>
+                    </div>
                 </div>
             </div>
-        </div>
-        <!--        </form>-->
+        </form>
     </div>
     <hr>
     <div class="container mt-4">

From 7ff900290d801fcf2bf3fee0e9340dcda5aaf958 Mon Sep 17 00:00:00 2001
From: hcyuen <hcyuen@live.hk>
Date: Mon, 6 Mar 2023 20:07:19 +0800
Subject: [PATCH 5/7] fix is_use_source checkbox

---
 src/website/static/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/website/static/index.js b/src/website/static/index.js
index e80827d..282b0d6 100644
--- a/src/website/static/index.js
+++ b/src/website/static/index.js
@@ -12,7 +12,7 @@ $(document).ready(function () {
                 q: search_text,
                 bing_search_subscription_key: $('#bing_search_subscription_key').val(),
                 openai_api_key: $('#openai_api_key').val(),
-                is_use_source: $('input[name="is_use_source"]').val(),
+                is_use_source: $('input[name="is_use_source"]')[0].checked,
                 llm_service_provider: $('#llm_service_provider').val(),
                 llm_model: $('#llm_model').val(),
                 semantic_search_provider: $('#semantic_search_provider').val()

From d73b0b986efebcd87c65b2abcccde7495a720540 Mon Sep 17 00:00:00 2001
From: Michael Wan <michaelthwan@gmail.com>
Date: Mon, 6 Mar 2023 21:12:40 +0800
Subject: [PATCH 6/7] config change

---
 src/config/config.yaml           | 2 +-
 src/website/templates/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/config.yaml b/src/config/config.yaml
index d08571f..031a164 100644
--- a/src/config/config.yaml
+++ b/src/config/config.yaml
@@ -31,7 +31,7 @@ goose_ai_api:
 cache:  # .cache result for efficiency and consistency
   is_enable_cache: false
   path: .cache
-  max_number_of_cache: 10
+  max_number_of_cache: 0
 semantic_search:
   # provider list:
   # faiss-openai (default): Use OpenAIEmbedding. fast, good accuracy but need openai key (cost)
diff --git a/src/website/templates/index.html b/src/website/templates/index.html
index b5c14b6..38edf22 100644
--- a/src/website/templates/index.html
+++ b/src/website/templates/index.html
@@ -10,7 +10,7 @@
                 <input type="search" id="form1" class="form-control"
                        placeholder="Ask: e.g. What is ChatGPT"
                        name="q" value="{{ request.args.get('q', '') }}"
-                       minlength="10" maxlength="200" required/>
+                       minlength="5" maxlength="200" required/>
                 <button type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i></button>
             </div>
             <div class="row mt-4">

From 6c9388d9796609f9db4011cbbf257b7a0890f886 Mon Sep 17 00:00:00 2001
From: Michael Wan <michaelthwan@gmail.com>
Date: Mon, 6 Mar 2023 21:14:47 +0800
Subject: [PATCH 7/7] update version

---
 src/website/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/website/templates/base.html b/src/website/templates/base.html
index 30355ad..43778fe 100644
--- a/src/website/templates/base.html
+++ b/src/website/templates/base.html
@@ -30,7 +30,7 @@
     <div class="container text-center">
         <div class="row">
             <div class="col-lg-12">
-                <p class="text-muted small mb-0">SearchGPT 20230305 Version (
+                <p class="text-muted small mb-0">SearchGPT 20230306 Version (
                     <a href="https://github.com/michaelthwan/searchGPT">Github</a>
                     ). Your feedback will help us to improve</p>
             </div>