Docker

app.py

@@ -143,7 +143,9 @@ def process_results(hits: list, highlight_terms: list) -> str:
                     """
         for subhit in hit['meta']['docs']:
             res_head += f"""
-                        <a href='{subhit['URL']}'>{subhit['URL']}</a> <button>▼</button>
+                        <button onclick="load_image({subhit['_id']})">Load Image</button><br>
+                        <p><img id='{subhit['_id']}' src='{subhit['URL']}'  style="width:400px;height:auto;display:none;"></p>
+                        <a href='{subhit['URL']}'>{subhit['URL']}</a>
                         <p>{highlight_string(subhit['TEXT'], highlight_terms)}</p>
                         """
         res_head += f"""
@@ -217,26 +219,22 @@ if st.sidebar.button("Search"):
             color: green;
             margin-bottom: 0px;
         }
-        
-        .searchresult button {
-            font-size: 10px;
-            line-height: 14px;
-            color: green;
-            margin-bottom: 0px;
-            padding: 0px;
-            border-width: 0px;
-            background-color: white;
-        }
-        
+    
         .dark-mode {
           color: white;
         }
         </style>
         <script>
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-           var element = document.body;
-           element.classList.toggle("dark-mode");
-        }
+        function load_image(id){
+            console.log(id)
+            var x = document.getElementById(id);
+            console.log(x)
+            if (x.style.display === "none") {
+                x.style.display = "block";
+            } else {
+                x.style.display = "none";
+            }
+        };
         function myFunction() {
            var element = document.body;
            element.classList.toggle("dark-mode");