Reports tooltip & Guidelines revision

app.py

@@ -409,7 +409,11 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
                     #---------------- tab for REPORTS SELECTION ----------------------
                     
                     with gr.Tab("Reports",elem_id = "tab-config",id = 2):
-                        gr.Markdown("Reminder: To get better results select the specific report/reports")
+                        with gr.Row():
+                            gr.Markdown("Reminder: To get better results select the specific report/reports")
+                            gr.Markdown("""<div class="question-tooltip">?
+                                <div class="tooltip-content">Select the audit reports that you want to analyse directly or browse through categories and select reports</div>
+                            </div>""", elem_id="reports-tooltip")
 
                         
                         #----- First level filter for selecting Report source/category ----------
@@ -501,28 +505,32 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
     with gr.Tab("Guidelines", elem_classes="max-height other-tabs"):
         gr.Markdown("""
 
-        Welcome to Audit Q&A, your AI-powered assistant for exploring and understanding Uganda's audit reports. This tool leverages advanced language models to help you get clear and structured answers based on audit publications. To get you started, here a few tips on how to use the tool:
+        #### Welcome to Audit Q&A, your AI-powered assistant for exploring and understanding Uganda's audit reports. This tool leverages advanced language models to help you get clear and structured answers based on audit publications. To get you started, here a few tips on how to use the tool:
+
+        ## 💬 Crafting Effective Prompts
+
+        Clear, specific questions will give you the best results. Here are some examples:
 
-        ### Crafting Effective Prompts
+        | ❌ Less Effective | ✅ More Effective |
+        |------------------|-------------------|
+        | "What are the findings?" | "What were the main issues identified in procurement practices in the Ministry of Health in 2022?" |
+        | "Tell me about revenue collection" | "What specific challenges were identified in revenue collection at the local government level in 2021-2022?" |
+        | "Is there corruption?" | "What audit findings related to misappropriation of funds were reported in the education sector between 2020-2023?" |
+
+        ## Best Practices
 
         - **Be Clear and Specific**: Frame your questions clearly and focus on what you want to learn.
         - **One Topic at a Time**: Break complex queries into simpler, focused questions.
-        - **Be Direct**: Instead of "What are the findings?", try "What were the main issues identified in procurement practices?" or "What challenges were found in revenue collection?"
+        - **Provide Context**: Mentioning specific ministries, years, or projects helps narrow the focus.
+        - **Follow Up**: Ask follow-up questions to explore a topic more deeply.
         
-        ### Best Practices
-
-        - Start with a simple, focused question.
-        - Follow up with additional questions if your initial query doesn't yield the desired results.
-        - Experiment with different phrasings to get the most accurate answers.
-        - Use the source citations as a reference to validate the provided information.
-
-        ### Utilizing Filters
+        ## Utilizing Filters
 
         - **Report Category & Subtype**: Use the "Reports" tab to choose your preferred report category and refine your query by selecting a specific sub-type. This will help narrow down the context for your question.
         - **Year Selection**: Choose one or more years from the "Year" filter to target your query to specific time periods.
         - **Specific Reports**: Optionally, select specific reports using the dropdown to focus on a particular document or set of documents.
 
-        ### Useful Resources
+        ## Useful Resources
                             
         - <ins>[**Short Course: Generative AI for Everyone** (3 hours)](https://www.deeplearning.ai/courses/generative-ai-for-everyone/)</ins>
         - <ins>[**Short Course: Advanced Prompting** (1 hour)](https://www.deeplearning.ai/courses/ai-for-everyone/)</ins>

style.css

@@ -473,7 +473,7 @@ span.chatbot > p > img{
 #warning-row.warning-message span.warning-icon,
 #warning-row.warning-message .prose span.warning-icon {
     font-size: 1.7em !important;
-    color: #856404 !important;
+    color: #000000 !important;
     margin-right: 10px !important;
     display: inline-block !important;
     vertical-align: middle !important;
@@ -484,12 +484,14 @@ span.chatbot > p > img{
     font-size: 14px !important;
     line-height: 1.5 !important;
     font-weight: bold;
+    color: #000000 !important; /* Ensure text is always visible */
 }
 
 #warning-row.warning-message {
     padding: 20px 25px !important;
 }
 
+
 #warning-row .warning-buttons {
     display: flex;
     justify-content: center;
@@ -525,29 +527,60 @@ span.chatbot > p > img{
     background-color: #d0d0d0;
 }
 
-/* Dark mode support */
-body.dark #warning-row {
-    background-color: #382f22;
-    border-color: #6b5b30;
+
+/* Tooltip styling (report tab)*/
+.question-tooltip {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    background-color: #ffd866;
+    color: #333;
+    border-radius: 50%;
+    cursor: help;
+    position: relative;
+    margin-left: 8px;
+    font-weight: bold;
 }
 
-body.dark #warning-row p, 
-body.dark #warning-row .warning-content,
-body.dark #warning-row .warning-icon {
-    color: #ffd866;
+.question-tooltip .tooltip-content {
+    visibility: hidden;
+    width: 300px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 10px;
+    position: absolute;
+    z-index: 9999;
+    top: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-weight: normal;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
-body.dark #warning-row button.cancel {
-    background-color: #4a4a4a;
-    color: #e0e0e0;
-    border-color: #555;
+.question-tooltip:hover .tooltip-content {
+    visibility: visible;
+    opacity: 1;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
+/* Arrow for tooltip */
+.question-tooltip .tooltip-content::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #333 transparent;
 }
 
 
 
 
+