Update app.py

app.py

@@ -31,10 +31,14 @@ def estimate_num_circles(text, character_width=7, circle_diameter=30):
 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 = estimate_num_circles(label)
+    num_circles = max(3, min(12, len(label) // 4))  # Adjust the number of circles based on text length
     
-    # Generate circles
-    circles_html = ''.join([f'<div class="circle" style="left: {-i * 30}px;"></div>' for i in range(num_circles)])
+    # Generate circles on both sides of the text
+    circles_html = ''.join([
+        f'<div class="circle" style="margin-right: -10px;"></div>' for _ in range(num_circles//2)
+    ] + [
+        f'<div class="circle" style="margin-left: -10px;"></div>' for _ in range(num_circles//2)
+    ])
 
     cloud_button_html = f"""
     <div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 20px;">
@@ -50,7 +54,6 @@ def cloud_button(label, key=None, color=None):
             user-select: none;
             font-size: 16px;
             white-space: nowrap;
-            background-color: #f8f9fa;
         }}
         .rectangle {{
             min-width: 120px;
@@ -66,29 +69,27 @@ def cloud_button(label, key=None, color=None):
             transition: background-color 0.4s;
         }}
         .circle {{
-            background-color: #f8f9fa;
+            background-color: inherit;
             border-radius: 50%;
             width: 30px;
             height: 30px;
-            position: absolute;
+            position: relative;
             z-index: 1;
-            top: 50%;
-            transform: translateY(-50%);
         }}
         .cloud:hover .rectangle {{
             background-color: #008CBA;
             color: white;
         }}
-        .color-1 .rectangle {{ background-color: #FFA07A; }}
-        .color-2 .rectangle {{ background-color: #FF7F50; }}
-        .color-3 .rectangle {{ background-color: #FF6347; }}
-        .color-4 .rectangle {{ background-color: #FF4500; }}
-        .color-5 .rectangle {{ background-color: #FF8C00; }}
-        .color-6 .rectangle {{ background-color: #FFD700; }}
+        .color-1 .rectangle, .color-1 .circle {{ background-color: #FFA07A; }}
+        .color-2 .rectangle, .color-2 .circle {{ background-color: #FF7F50; }}
+        .color-3 .rectangle, .color-3 .circle {{ background-color: #FF6347; }}
+        .color-4 .rectangle, .color-4 .circle {{ background-color: #FF4500; }}
+        .color-5 .rectangle, .color-5 .circle {{ background-color: #FF8C00; }}
+        .color-6 .rectangle, .color-6 .circle {{ background-color: #FFD700; }}
     </style>
     <script>
         document.getElementById("{button_id}").onclick = function() {{
-            // Add your JavaScript code here
+            // Your existing JavaScript code for handling button click
         }};
     </script>
     """