Update app.py

app.py

@@ -29,10 +29,12 @@ def cloud_button(label, key=None, color=None):
     color_class = f"color-{color}" if color else ""
     num_circles = max(3, min(12, len(label) // 4))
     circle_size = 60
+    overlap = 20  # Adjust the overlap value as needed
 
-    # Create circles with text enclosed
+    # Create circles with text enclosed and overlap them
     circles_html = ''.join([
-        f'<div class="circle {color_class}"></div>' for _ in range(num_circles)
+        f'<div class="circle {color_class}" style="left: {i * overlap}px; top: {i * overlap}px;"></div>'
+        for i in range(num_circles)
     ])
     circles_html += f'<div class="circle-text">{label}</div>'  # Add the text after the circles
 
@@ -61,7 +63,7 @@ def cloud_button(label, key=None, color=None):
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            position: relative;
+            position: absolute;
         }}
         .circle-text {{
             position: absolute;
@@ -89,7 +91,6 @@ 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):
     pdf_reader = PdfReader(file_path)
     text = ""