Couple of Changes

_helper_functions.py

@@ -890,52 +890,51 @@ def display_question_box(container):
 
 
 
-# # --------------------------------------------------------- Front-End Functions/Class 10
-import streamlit as st
+# --------------------------------------------------------- Front-End Functions/Class 10
 import markdown
-
-
+import random
 def display_citations(heading, contents, container):
-    # Define CSS styles for the flip card with unique class names
-    css_styles = """
+    unique_id = str(random.randint(10000000, 99999999))
+
+    css_styles = f"""
     <style>
-    @keyframes move-in-from-left {
-      0% {
+    @keyframes move-in-from-left {{
+      0% {{
         transform: translateX(-100%);
         opacity: 0;
-      }
-      100% {
+      }}
+      100% {{
         transform: translateX(0);
         opacity: 1;
-      }
-    }
-    .fancy-container {
+      }}
+    }}
+    .fancy-container-{unique_id} {{
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 30px auto;
       animation: move-in-from-left 1s ease-out forwards;
-    }
-    .fancy-card {
+    }}
+    .fancy-card-{unique_id} {{
       width: 500px;
       height: 200px;
       perspective: 1000px;
       position: relative;
       border-radius: 20px;
       overflow: hidden; /* Ensure contents do not overflow */
-    }
-    .fancy-card-inner {
+    }}
+    .fancy-card-inner-{unique_id} {{
       width: 100%;
       height: 100%;
       text-align: center;
       transition: transform 1.25s;
       transform-style: preserve-3d;
       border-radius: 20px;
-    }
-    .fancy-card:hover .fancy-card-inner {
+    }}
+    .fancy-card-{unique_id}:hover .fancy-card-inner-{unique_id} {{
       transform: rotateY(180deg);
-    }
-    .fancy-card-front, .fancy-card-back {
+    }}
+    .fancy-card-front-{unique_id}, .fancy-card-back-{unique_id} {{
       position: absolute;
       width: 100%;
       height: 100%;
@@ -949,13 +948,13 @@ def display_citations(heading, contents, container):
       border-radius: 20px;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
       overflow: hidden; /* Ensure contents do not overflow */
-    }
-    .fancy-card-front {
+    }}
+    .fancy-card-front-{unique_id} {{
       background: linear-gradient(to bottom right, #000, #222);
       color: white;
       animation: fancy-wiggle 0.5s ease-in-out infinite;
-    }
-    .fancy-card-front h2 {
+    }}
+    .fancy-card-front-{unique_id} h2 {{
       font-size: 20px;
       font-style: italic;
       color: white;
@@ -965,50 +964,47 @@ def display_citations(heading, contents, container):
       word-wrap: break-word; /* Ensure long words wrap */
       overflow-wrap: break-word; /* Ensure long words wrap */
       word-break: break-all; /* Ensure words break if too long */
-    }
-    @keyframes fancy-wiggle {
-      0% { transform: translateX(-4px); }
-      50% { transform: translateX(4px); }
-      100% { transform: translateX(-4px); }
-    }
-    .fancy-card-back {
+    }}
+    @keyframes fancy-wiggle {{
+      0% {{ transform: translateX(-4px); }}
+      50% {{ transform: translateX(4px); }}
+      100% {{ transform: translateX(-4px); }}
+    }}
+    .fancy-card-back-{unique_id} {{
       background: linear-gradient(to bottom right, #ffd700, #ffff00);
       background-color: #f7f7f7;
       color: #333;
       transform: rotateY(180deg);
       overflow: auto; /* Enable vertical and horizontal scrolling */
-
-    }
-    .fancy-card-back p {
+    }}
+    .fancy-card-back-{unique_id} p {{
       margin: 10px 0px; /* Add margin to separate paragraphs */
-    #   word-wrap: break-word; /* Ensure long words wrap */
-    #   overflow-wrap: break-word; /* Ensure long words wrap */
       word-break: normal; /* Ensure words break if too long */
-    }
-    .fancy-card-back a {
+    }}
+    .fancy-card-back-{unique_id} a {{
       color: blue; /* Make links blue */
       text-decoration: underline; /* Underline links */
       word-wrap: break-word; /* Ensure long links wrap */
       overflow-wrap: break-word; /* Ensure long links wrap */
       word-break: normal; /* Ensure words break if too long */
       display: inline-block;
-    }
+    }}
     </style>
     """
 
     # Convert markdown contents to HTML
-    import markdown
+
     html_contents = markdown.markdown(contents)
 
     # Define the HTML structure for the fancy card
     html_content = f"""
-    <div class="fancy-container">
-      <div class="fancy-card">
-        <div class="fancy-card-inner">
-          <div class="fancy-card-front">
+    <div class="fancy-container-{unique_id}" id="{unique_id}">
+      <div class="fancy-card-{unique_id}" id="{unique_id}">
+        <div class="fancy-card-inner-{unique_id}" id="{unique_id}">
+          <div class="fancy-card-front-{unique_id}" id="{unique_id}">
             <h2>{heading}</h2>
           </div>
-          <div class="fancy-card-back">
+          <div class="fancy-card-back-{unique_id}" id="{unique_id}">
             {html_contents}
           </div>
         </div>
@@ -1022,7 +1018,6 @@ def display_citations(heading, contents, container):
 
 
 def display_allCitations(resp, contain):
-
     for res in resp['context']:
         if res.metadata['source'].endswith('.pdf') or res.metadata['source'].endswith('.txt'):
             headingText = f"{res.metadata['source'].split("---")[-1]}  &nbsp;&nbsp Page No.&nbsp;&nbsp;{res.metadata['page']}"
@@ -1030,4 +1025,5 @@ def display_allCitations(resp, contain):
             headingText = f"{res.metadata['source']}"
             
         contents_text = f"A <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Content <br><br> {res.page_content}"
-        display_citations(headingText, contents_text, contain)
+        display_citations(headingText, contents_text, contain)
+        time.sleep(0.5)