Update app.py

app.py

@@ -30,17 +30,17 @@ def cloud_button(label, key=None, color=None):
     num_circles = max(3, min(12, len(label) // 4))  # Adjust the number of circles based on text length
     circle_size = 60
     
-    # Generate circles on both sides of the text
+    # Generate circles
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="margin-right: -{circle_size // 2}px;"></div>' for _ in range(num_circles//2)
-    ] + [
-        f'<div class="circle {color_class}" style="margin-left: -{circle_size // 2}px;"></div>' for _ in range(num_circles//2)
+        f'<div class="circle {color_class}"></div>' for _ in range(num_circles)
     ])
 
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
-        {circles_html}
-        <div class="text">{label}</div>
+        <div class="wrapper {color_class}">
+            {circles_html}
+            <div class="text">{label}</div>
+        </div>
     </div>
     <style>
         .cloud {{
@@ -48,24 +48,29 @@ def cloud_button(label, key=None, color=None):
             display: inline-flex;
             align-items: center;
         }}
+        .wrapper {{
+            display: flex;
+            align-items: center;
+            background-color: #9BBEFF;
+            border-radius: 30px;  # Adjust as needed
+            padding: 10px 20px;
+        }}
         .text {{
             position: relative;
             font-weight: bold;
-            padding: 10px 20px;
-            z-index: 2;  # Higher z-index to place text on top of circles
-            background-color: transparent;
+            z-index: 2;
         }}
         .circle {{
             background-color: #9BBEFF;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            position: relative;
-            z-index: 1;  # Lower z-index to place circles below text
+            margin: 0 -{circle_size // 4}px;  # Adjust negative margin for overlap
+            z-index: 1;
         }}
-        .color-1 .circle {{ background-color: #FFA07A; }}
-        .color-2 .circle {{ background-color: #FF7F50; }}
-        .color-3 .circle {{ background-color: #FF6347; }}
+        .color-1 .wrapper, .color-1 .circle {{ background-color: #FFA07A; }}
+        .color-2 .wrapper, .color-2 .circle {{ background-color: #FF7F50; }}
+        .color-3 .wrapper, .color-3 .circle {{ background-color: #FF6347; }}
     </style>
     <script>
         document.getElementById("{button_id}").onclick = function() {{
@@ -79,9 +84,6 @@ 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):
     pdf_reader = PdfReader(file_path)
     text = ""