Update app.py

app.py

@@ -29,14 +29,10 @@ 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
-    
-    # Create circles for left, middle, and right
+
+    # Create circles with text enclosed
     circles_html = ''.join([
-        f'<div class="circle left {color_class}"></div>' for _ in range(num_circles // 2)
-    ])
-    circles_html += f'<div class="text">{label}</div>'
-    circles_html += ''.join([
-        f'<div class="circle right {color_class}"></div>' for _ in range(num_circles // 2)
+        f'<div class="circle {color_class}"><div class="circle-text">{label}</div></div>' for _ in range(num_circles)
     ])
 
     cloud_button_html = f"""
@@ -59,11 +55,6 @@ def cloud_button(label, key=None, color=None):
             position: relative;
             padding: 10px 20px;
         }}
-        .text {{
-            position: relative;
-            font-weight: bold;
-            z-index: 2;
-        }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
@@ -71,8 +62,13 @@ def cloud_button(label, key=None, color=None):
             height: {circle_size}px;
             position: relative;
         }}
-        .circle.left, .circle.right {{
-            margin: 0 5px; /* Adjust the margin as needed */
+        .circle-text {{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-weight: bold;
+            z-index: 2;
         }}
         .color-1 .circle {{ background-color: #FFA07A; }}
         .color-2 .circle {{ background-color: #FF7F50; }}
@@ -92,8 +88,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 = ""