Update app.py

app.py

@@ -24,40 +24,25 @@ repo.git_pull()  # Pull the latest changes (if any)
 pdf_file_path = "Private_Book/KOMBI_all2.pdf"  # Replace with your PDF file path
 
 
-# Define a Streamlit component to display cloud-shaped text
-def cloud_text(text_content):
-    cloud_html = f"""
-    <div style="position: relative; background-color: #FFA07A; border-radius: 20px; padding: 10px; width: fit-content;">
-        <div style="position: relative; z-index: 2;">{text_content}</div>
-        <div style="position: absolute; top: -5px; left: 10px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #FFA07A;"></div>
-    </div>
-    """
-    st.markdown(cloud_html, unsafe_allow_html=True)
-
-# Example usage
-text1 = "This is a short text."
-text2 = "This is a longer piece of text to test the cloud shape."
-
-cloud_text(text1)
-cloud_text(text2)
-
-
-
 def cloud_button(label, key=None, color=None):
     button_id = f"cloud-button-{key or label}"
     color_class = f"color-{color}" if color else ""
     num_circles = max(3, min(12, len(label) // 4))
     circle_size = 60
     
+    # Create circles for left, middle, and right
     circles_html = ''.join([
-        f'<div class="circle {color_class}"></div>' for _ in range(num_circles)
+        f'<div class="circle left {color_class}"></div>' for _ in range(num_circles // 2)
+    ])
+    circles_html += f'<div class="text">{label}</div>'
+    circles_html += ''.join([
+        f'<div class="circle right {color_class}"></div>' for _ in range(num_circles // 2)
     ])
 
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
             {circles_html}
-            <div class="text">{label}</div>
         </div>
     </div>
     <style>
@@ -78,14 +63,17 @@ def cloud_button(label, key=None, color=None):
             position: relative;
             font-weight: bold;
             z-index: 2;
+            margin: 0 10px; /* Adjust the margin as needed */
         }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            position: absolute;
-            z-index: 1;
+            position: relative;
+        }}
+        .circle.left, .circle.right {{
+            margin: 0 5px; /* Adjust the margin as needed */
         }}
         .color-1 .circle {{ background-color: #FFA07A; }}
         .color-2 .circle {{ background-color: #FF7F50; }}