Update app.py

app.py

@@ -25,16 +25,23 @@ pdf_file_path = "Private_Book/KOMBI_all2.pdf"  # Replace with your PDF file path
 
 
 
+import streamlit as st
+
 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))  # Adjust the number of circles based on text length
     
+    # Calculate the overlap and spacing for the circles
+    circle_diameter = 60
+    overlap = 0.4  # 40% overlap
+    spacing = circle_diameter * (1 - overlap)
+    
     # Generate circles on both sides of the text
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="margin-right: -20px; background-color: #FF6347;"></div>' for _ in range(num_circles//2)
+        f'<div class="circle {color_class}" style="margin-right: -{spacing}px;"></div>' for _ in range(num_circles//2)
     ] + [
-        f'<div class="circle {color_class}" style="margin-left: -20px; background-color: #FF6347;"></div>' for _ in range(num_circles//2)
+        f'<div class="circle {color_class}" style="margin-left: -{spacing}px;"></div>' for _ in range(num_circles//2)
     ])
 
     cloud_button_html = f"""
@@ -67,8 +74,8 @@ def cloud_button(label, key=None, color=None):
         }}
         .circle {{
             border-radius: 50%;
-            width: 60px;
-            height: 60px;
+            width: {circle_diameter}px;
+            height: {circle_diameter}px;
             position: relative;
             z-index: 1;
         }}
@@ -88,9 +95,9 @@ def cloud_button(label, key=None, color=None):
     """
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
-
-
-
+cloud_button("Short Text", color="1")
+cloud_button("This is a longer piece of text", color="2")
+cloud_button("This is an even longer piece of text to test the cloud button", color="3")
 
 
 def load_pdf(file_path):