Merge pull request #53 from michaelthwan/ajax

ajax call and avoid full page refresh / config change

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)

src/website/static/index.js

@@ -0,0 +1,34 @@
+$(document).ready(function () {
+    $('form').submit(function(event) {
+        event.preventDefault();
+        let search_text = $('#form1').val();
+        $('#search-btn')[0].disabled = true;
+        $('#search-result-spinner').addClass('d-flex');
+        $('#search-results').hide();
+        $.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"]')[0].checked,
+                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)
+                $('#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();
+            }
+        })
+    })
+})

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 %}

src/website/templates/base.html

@@ -30,16 +30,17 @@
     <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>
         </div>
     </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>

src/website/templates/index.html

@@ -1,27 +1,26 @@
 {% 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' %}
     </div>
-    {% endif %}
     <div>
-        <form action="/index" method="get">
+        <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"><i class="fa fa-search"></i></button>
+                       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">
                 <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', '') }}">
+                        <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>
@@ -67,7 +66,8 @@
                     <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-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 %}
@@ -80,34 +80,14 @@
     </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 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>

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>

src/website/views.py

@@ -1,4 +1,5 @@
 from flask import Blueprint, render_template, request
+
 from SearchGPTService import SearchGPTService
 from Util import setup_logger
 
@@ -8,10 +9,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 +35,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'])