From 6a624acf5589cf61e1cfe6ad9ccf104c7c97f175 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sat, 7 Dec 2024 19:38:04 +0100
Subject: Use custom user data dir for each provider Reuse cookies and access
 token in Copilot Send in the gui messages to multiple providers at once Add
 GUI documenation

---
 g4f/gui/client/index.html | 44 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 9 deletions(-)

(limited to 'g4f/gui/client/index.html')

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 301de1b8..eb67bb7a 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -20,6 +20,7 @@
     <script src="/static/js/chat.v1.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
     <link rel="stylesheet" href="/static/css/dracula.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
     <script>
         MathJax = {
             chtml: {
@@ -37,9 +38,34 @@
     </script>
     <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
     <script src="/static/js/text_to_speech/index.js" async></script>
-    <!--
-            <script src="/static/js/whisper-web/index.js" async></script>
-    -->
+    <script type="module" async>
+        import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: '#messages',
+            children: 'a:has(img)',
+            showHideAnimationType: 'none',
+            pswpModule: () => import('https://unpkg.com/photoswipe'),
+        });
+        lightbox.on('uiRegister', function() {
+            lightbox.pswp.ui.registerElement({
+                name: 'custom-caption',
+                order: 9,
+                isButton: false,
+                appendTo: 'root',
+                html: 'Caption text',
+                onInit: (el, pswp) => {
+                    lightbox.pswp.on('change', () => {
+                        const currSlideElement = lightbox.pswp.currSlide.data.element;
+                        let captionHTML = '';
+                        if (currSlideElement) {
+                            el.innerHTML = currSlideElement.querySelector('img').getAttribute('alt');
+                        }
+                    });
+                }
+            });
+        });
+        lightbox.init();
+    </script>
     <script>
         const user_image = '<img src="/static/img/user.png" alt="your avatar">';
         const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
@@ -261,16 +287,16 @@
                      <option value="">Provider: Auto</option>
                      <option value="OpenaiChat">OpenAI ChatGPT</option>
                      <option value="Copilot">Microsoft Copilot</option>
-                     <option value="ChatGpt">ChatGpt</option>
-                     <option value="Gemini">Gemini</option>
-                     <option value="MetaAI">Meta AI</option>
-                     <option value="DeepInfraChat">DeepInfraChat</option>
-                     <option value="Blackbox">Blackbox</option>
+                     <option value="Gemini">Google Gemini</option>
                      <option value="DDG">DuckDuckGo</option>
-                     <option value="Pizzagpt">Pizzagpt</option>
                      <option disabled="disabled">----</option>
                     </select>
                 </div>
+                <div class="field">
+                    <button id="pin">
+                        <i class="fa-solid fa-thumbtack"></i>
+                    </button>
+                </div>
             </div>
         </div>
         <div class="log hidden"></div>
-- 
cgit v1.2.3