Update app.py

app.py

@@ -23,27 +23,23 @@ repo.git_pull()  # Pull the latest changes (if any)
 # Step 2: Load the PDF File
 pdf_file_path = "Private_Book/KOMBI_all2.pdf"  # Replace with your PDF file path
 
-
 def cloud_button(label, key=None, color=None, overlap=20):
     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
-    text_size = 14  # Adjust the text font size as needed
 
-    # Create circles with overlap
+    # Create circles with text enclosed
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="margin-left: -{overlap * i}px;"></div>'
-        for i in range(num_circles)
+        f'<div class="circle {color_class}" style="margin-right: -{overlap}px;"></div>'
+        for _ in range(num_circles)
     ])
+    circles_html += f'<div class="circle-text">{label}</div>'  # Add the text after the circles
 
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
-            <div class="circle-container">
-                {circles_html}
-            </div>
-            <div class="circle-text" style="font-size: {text_size}px;">{label}</div>
+            {circles_html}
         </div>
     </div>
     <style>
@@ -60,24 +56,19 @@ def cloud_button(label, key=None, color=None, overlap=20):
             position: relative;
             padding: 10px 20px;
         }}
-        .circle-container {{
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            position: absolute;
-            z-index: 1;
+            position: relative;
         }}
         .circle-text {{
-            position: relative;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             font-weight: bold;
-            text-align: center;
             z-index: 2;
         }}
         .color-1 .circle {{ background-color: #FFA07A; }}
@@ -93,9 +84,10 @@ def cloud_button(label, key=None, color=None, overlap=20):
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
 # Example usage with a specified overlap value
-cloud_button("Short Text", color="1", overlap=40)
-cloud_button("This is a longer piece of text", color="2", overlap=60)
-cloud_button("This is an even longer piece of text to test the cloud button", color="3", overlap=80)
+cloud_button("Short Text", color="1", overlap=20)
+cloud_button("This is a longer piece of text", color="2", overlap=20)
+cloud_button("This is an even longer piece of text to test the cloud button", color="3", overlap=20)
+
 
 
 def load_pdf(file_path):