From fa48e7d7507e17f7bc19922be6a3cb4d27289fd7 Mon Sep 17 00:00:00 2001
From: Adam Parr <adamparr.uk@gmail.com>
Date: Thu, 16 Jan 2025 20:29:02 +0000
Subject: [PATCH] Make Bing search async with separate search_page

---
 .gitignore                            |  3 ++
 lute/bing/routes.py                   | 46 ++++++++++++++++----
 lute/static/js/dict-tabs.js           |  2 +-
 lute/templates/imagesearch/index.html | 60 ++++++++++++++++++++-------
 4 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/.gitignore b/.gitignore
index 86c057218..d5843b61e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -117,6 +117,9 @@ ENV/
 env.bak/
 venv.bak/
 
+# VS Code config
+.vscode/
+
 # Spyder project settings
 .spyderproject
 .spyproject
diff --git a/lute/bing/routes.py b/lute/bing/routes.py
index 1750c4823..98e4ad827 100644
--- a/lute/bing/routes.py
+++ b/lute/bing/routes.py
@@ -5,12 +5,43 @@
 import os
 import re
 import urllib.request
-from flask import Blueprint, request, Response, render_template, jsonify, current_app
+from flask import (
+    Blueprint,
+    request,
+    Response,
+    render_template,
+    jsonify,
+    current_app,
+    url_for,
+)
 
 
 bp = Blueprint("bing", __name__, url_prefix="/bing")
 
 
+@bp.route(
+    "/search_page/<int:langid>/<string:text>/<string:searchstring>", methods=["GET"]
+)
+def bing_search_page(langid, text, searchstring):
+    """
+    Load initial empty search page, passing real URL for subsequent ajax call to get images.
+
+    Sometimes Bing image searches block or fail, so providing the initial empty search page
+    lets the user know work is in progress.  The user can therefore interact with the page
+    immediately. The template for this route then makes an ajax call to the "bing_search()"
+    method below which actually does the search.
+    """
+
+    # Create URL for bing_search and pass into template.
+    search_url = url_for(
+        "bing.bing_search", langid=langid, text=text, searchstring=searchstring
+    )
+
+    return render_template(
+        "imagesearch/index.html", langid=langid, text=text, search_url=search_url
+    )
+
+
 @bp.route("/search/<int:langid>/<string:text>/<string:searchstring>", methods=["GET"])
 def bing_search(langid, text, searchstring):
     "Do an image search."
@@ -60,12 +91,13 @@ def build_struct(image):
     # Also bing seems to throttle images if the count is higher (??).
     images = images[:25]
 
-    return render_template(
-        "imagesearch/index.html",
-        langid=langid,
-        text=text,
-        images=images,
-        error_message=error_msg,
+    return jsonify(
+        {
+            "langid": langid,
+            "text": text,
+            "images": images,
+            "error_message": error_msg,
+        }
     )
 
 
diff --git a/lute/static/js/dict-tabs.js b/lute/static/js/dict-tabs.js
index 6c0624f0d..80ceabbcc 100644
--- a/lute/static/js/dict-tabs.js
+++ b/lute/static/js/dict-tabs.js
@@ -132,7 +132,7 @@ class ImageLookupButton extends GeneralLookupButton {
 
       const raw_bing_url = 'https://www.bing.com/images/search?q=[LUTE]&form=HDRSC2&first=1&tsc=ImageHoverTitle';
       const binghash = raw_bing_url.replace('https://www.bing.com/images/search?', '');
-      const url = `/bing/search/${LookupButton.LANG_ID}/${encodeURIComponent(use_text)}/${encodeURIComponent(binghash)}`;
+      const url = `/bing/search_page/${LookupButton.LANG_ID}/${encodeURIComponent(use_text)}/${encodeURIComponent(binghash)}`;
 
       iframe.setAttribute("src", url);
     };  // end handler
diff --git a/lute/templates/imagesearch/index.html b/lute/templates/imagesearch/index.html
index 66772c0b8..27f47ac1f 100644
--- a/lute/templates/imagesearch/index.html
+++ b/lute/templates/imagesearch/index.html
@@ -26,25 +26,10 @@
         then paste from your clipboard.
       </p>
 
-      {% for image in images %}
-      <span class="initial"
-            style="margin: 2px; display:inline-block;"
-            onmouseover="highlight_image(this);"
-            onmouseout="un_highlight_image(this);"
-            onclick='save_image_locally("{{ image['src'] }}", {{ langid }}, "{{ text }}")'
-            >
-        {{ image['html'] | safe }}
-      </span>
-      {% endfor %}
-
-      {% if error_message != "" %}
-      <p><i>Error contacting image server: {{ error_message }}</i></p>
-      {% endif %}
     </div>
   </body>
 
   <script>
-
     let update_term_form = function(filename) {
       // Well, this took **far** too long to figure out ...
       let fr = window.parent.frames['wordframe'];
@@ -146,6 +131,51 @@
 
     });
 
+    $(document).ready(function() {
+      const searchUrl = '{{ search_url }}';
+      const container = document.getElementById('termimagesearch');
+
+      $.ajax({
+        url: searchUrl,
+        type: 'GET',
+        dataType: 'json',
+        success: function(data) {
+          if (data.images.length === 0) {
+            const p = document.createElement('p');
+            p.textContent = 'No images found.';
+            container.appendChild(p);
+            return;
+          }
+
+          // Make Bing API call for images asynchronously
+          // This avoids blocking the page load
+          data.images.forEach(function(item) {
+            const imgWrapper = create_imageWrapper_element(item.src, data.langid, data.text);
+            container.appendChild(imgWrapper);
+          });
+        },
+        error: function(xhr, status, error) {
+          console.error(`Error ${error}; ${status}; ${xhr.responseText}`);
+        }
+      });
+    });
+
+    function create_imageWrapper_element(src, langid, text) {
+      const imgWrapper = document.createElement('span');
+      imgWrapper.classList.add('initial');
+      imgWrapper.style.margin = '2px';
+      imgWrapper.style.display = 'inline-block';
+      imgWrapper.onmouseover = () => highlight_image(imgWrapper);
+      imgWrapper.onmouseout = () => un_highlight_image(imgWrapper);
+      imgWrapper.onclick = () => save_image_locally(src, langid, text);
+
+      const img = document.createElement('img');
+      img.src = src;
+      
+      imgWrapper.appendChild(img);
+
+      return imgWrapper;
+    }
   </script>
 
 </html>