update css and js to have a blinking status

app.py

@@ -22,6 +22,7 @@ from assets.utils_javascript import (
     accordion_trigger_end,
     accordion_trigger_spinoza,
     accordion_trigger_spinoza_end,
+    update_footer,
 )
 
 init_env()
@@ -295,6 +296,10 @@ with open("./assets/source_information.md", "r") as f:
 def start_agents():
     gr.Info(message="The agents and Spinoza are loading...", duration=3)
 
+    return [
+        (None, "I am waiting until all the agents are done to generate an answer...")
+    ]
+
 
 def end_agents():
     gr.Info(
@@ -304,7 +309,7 @@ def end_agents():
 
 
 def next_call():
-    print("Next call")
+    return
 
 
 init_prompt = """
@@ -319,6 +324,7 @@ What do you want to learn ?
 with gr.Blocks(
     title=f"🔍 Spinoza",
     css=css,
+    js=update_footer(),
     theme=theme,
 ) as demo:
     chatbots = {}
@@ -472,7 +478,9 @@ with gr.Blocks(
             with gr.Column(scale=1):
                 gr.Markdown("For any issue contact **[email protected]**.")
 
-    ask.submit(start_agents, inputs=[], outputs=[], js=accordion_trigger()).then(
+    ask.submit(
+        start_agents, inputs=[], outputs=[chatbots["spinoza"]], js=accordion_trigger()
+    ).then(
         fn=reformulate_questions,
         inputs=[ask],
         outputs=[agent_questions[tab] for tab in config["tabs"]],
@@ -502,4 +510,4 @@ with gr.Blocks(
 
 
 if __name__ == "__main__":
-    demo.queue().launch(share=True, debug=True)
+    demo.queue().launch(debug=True)

assets/style.css

@@ -265,9 +265,15 @@ label.selected {
 
 }
 
-footer {
+/* footer {
     visibility: hidden;
     display: none !important;
+} */
+
+.footer-ekimetrics {
+    display: flex;
+    align-items: center;
+    margin-left: var(--size-2);
 }
 
 /* @media screen and (max-width: 767px) {
@@ -406,32 +412,14 @@ span.chatbot>p>img {
     background-color: white;
 }
 
-/* HTML: <div class="loader"></div> */
-/* .loader {
-    display: inline-flex;
-    gap: 5px;
-    animation: l2-0 1s infinite;
-  }
-  .loader:before,
-  .loader:after {
-    content: "";
-    width: 25px;
-    aspect-ratio: 1;
-    box-shadow: 0 0 0 3px inset #fff;
-    animation: l2-1 1s infinite;
-  }
-  .loader:after {
-    --s: -1;
-  }
-  @keyframes l2-0 {
-    0%,
-    50% {transform:rotate(0deg)}
-    80%,
-    100% {transform:rotate(180deg)}
-  }
-  @keyframes l2-1 {
-    0%   {transform:translate(0)}
-    50%,
-    80%  {transform:translate(calc(var(--s,1)*2.5px))}
-    100% {transform:translate(0)}
-  } */
+.loader {
+  animation: blink 2s linear infinite;
+}
+@keyframes blink {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }

assets/utils_javascript.py

@@ -1,3 +1,17 @@
+def update_footer():
+    return """
+    function update_footer() {
+        var footer = document.querySelector('footer')
+        footer.innerHTML = "<a href='https://rsf.org/fr' class='footer-ekimetrics' target='_blank' rel='noreferrer'>À l'initiative de RSF</a>";
+        footer.innerHTML += "<a href='https://www.alliancepresse.fr/' class='footer-ekimetrics' target='_blank' rel='noreferrer'>et l'Alliance Presse</a>";
+        footer.innerHTML += "<div class='footer-ekimetrics'> · </div>";
+        footer.innerHTML += "<a href='https://www.culture.gouv.fr/' class='footer-ekimetrics' target='_blank' rel='noreferrer'>Avec le soutien du Ministère de la Culture</a>";
+        footer.innerHTML += "<div class='footer-ekimetrics'> · </div>";
+        footer.innerHTML += "<a href='https://ekimetrics.com/' class='footer-ekimetrics' target='_blank' rel='noreferrer'>Conçu par Ekimetrics</a>";             
+    }
+    """
+
+
 def accordion_trigger():
     return """
     function accordion_trigger() {
@@ -9,16 +23,25 @@ def accordion_trigger():
                 var accordion_politique = document.getElementById("accordion-politique")
                 var accordion_legal = document.getElementById("accordion-legal")
                 var accordion_ademe= document.getElementById("accordion-ademe")
-                accordion_science.children[1].children[0].textContent = "Science agent - loading";
-                accordion_science.children[1].children[1].classList.add('loader');
-                accordion_presse.children[1].children[0].textContent = "Press agent - loading";
-                accordion_presse.children[1].children[0].classList.add('loader');
-                accordion_politique.children[1].children[0].textContent = "Politics agent - loading";
-                accordion_politique.children[1].children[0].classList.add('loader');
-                accordion_legal.children[1].children[0].textContent = "Law agent - loading";
-                accordion_legal.children[1].children[0].classList.add('loader');
-                accordion_ademe.children[1].children[0].textContent = "ADEME agent - loading";
-                accordion_ademe.children[1].children[0].classList.add('loader');
+                var accordion_spinoza = document.getElementById("accordion-spinoza")       
+                document.querySelectorAll(".loader").forEach(el => el.remove());
+                document.querySelectorAll(".loader-helper").forEach(el => el.remove());
+                accordion_science.children[1].children[0].textContent = "Science agent";
+                accordion_presse.children[1].children[0].textContent = "Press agent";
+                accordion_politique.children[1].children[0].textContent = "Politics agent";
+                accordion_legal.children[1].children[0].textContent = "Law agent";
+                accordion_ademe.children[1].children[0].textContent = "ADEME agent";
+                accordion_spinoza.children[1].children[0].textContent = "Spinoza";
+                accordion_science.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+                accordion_science.children[1].children[0].innerHTML += "<span class='loader'>loading</span>";
+                accordion_presse.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+                accordion_presse.children[1].children[0].innerHTML += "<span class='loader'>loading</span>";
+                accordion_politique.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+                accordion_politique.children[1].children[0].innerHTML += "<span class='loader'>loading</span>";
+                accordion_legal.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+                accordion_legal.children[1].children[0].innerHTML += "<span class='loader'>loading</span>";
+                accordion_ademe.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+                accordion_ademe.children[1].children[0].innerHTML += "<span class='loader'>loading</span>";
             }
         });
     }
@@ -34,16 +57,10 @@ def accordion_trigger_end():
         var accordion_legal = document.getElementById("accordion-legal")
         var accordion_ademe = document.getElementById("accordion-ademe")
         accordion_science.children[1].children[0].textContent = "Science agent - ready";
-        accordion_science.children[1].children[1].classList.remove('loader');
         accordion_presse.children[1].children[0].textContent = "Press agent - ready";
-        accordion_presse.children[1].children[0].classList.remove('loader');
         accordion_politique.children[1].children[0].textContent = "Politics agent - ready";
-        accordion_politique.children[1].children[0].classList.remove('loader');
         accordion_legal.children[1].children[0].textContent = "Law agent - ready";
-        accordion_legal.children[1].children[0].classList.remove('loader');
         accordion_ademe.children[1].children[0].textContent = "ADEME agent - ready";
-        accordion_ademe.children[1].children[0].classList.remove('loader');
-
     }
     """
 
@@ -52,8 +69,11 @@ def accordion_trigger_spinoza():
     return """
     function accordion_trigger_spinoza() {
         var accordion_spinoza = document.getElementById("accordion-spinoza")
-        accordion_spinoza.children[1].children[0].textContent = "Spinoza - generating";
-        accordion_spinoza.children[1].children[0].classList.add('loader');
+        document.querySelectorAll(".loader").forEach(el => el.remove());
+        document.querySelectorAll(".loader-helper").forEach(el => el.remove());
+        accordion_spinoza.children[1].children[0].textContent = "Spinoza";
+        accordion_spinoza.children[1].children[0].innerHTML += "<span class='loader-helper'> - </span>";
+        accordion_spinoza.children[1].children[0].innerHTML += "<span class='loader'>generating</span>";
     }
     """
 
@@ -63,46 +83,5 @@ def accordion_trigger_spinoza_end():
     function accordion_trigger_spinoza_end() {
         var accordion_spinoza = document.getElementById("accordion-spinoza")
         accordion_spinoza.children[1].children[0].textContent = "Spinoza - ready";
-        accordion_spinoza.children[1].children[0].classList.remove('loader');
-    }
-    """
-
-
-def accordion_trigger_end_science():
-    return """
-    function accordion_trigger_end() {
-        var accordion_science = document.getElementById("accordion-science")
-        accordion_science.children[1].children[0].textContent = "Science agent - ready";
-        console.log("DONE - end science")
-    }
-    """
-
-
-def accordion_trigger_end_presse():
-    return """
-    function accordion_trigger_end() {
-        var accordion_presse = document.getElementById("accordion-presse")
-        accordion_presse.children[1].children[0].textContent = "Presse agent - ready";
-        console.log("DONE - end presse")
-    }
-    """
-
-
-def accordion_trigger_end_politique():
-    return """
-    function accordion_trigger_end() {
-        var accordion_politique = document.getElementById("accordion-politique")
-        accordion_politique.children[1].children[0].textContent = "Politique agent - ready";
-        console.log("DONE - end politique")
-    }
-    """
-
-
-def accordion_trigger_end_legal():
-    return """
-    function accordion_trigger_end() {
-        var accordion_legal = document.getElementById("accordion-legal")
-        accordion_legal.children[1].children[0].textContent = "Legal agent - ready";
-        console.log("DONE - end legal")
     }
     """