Update app.py

app.py

@@ -27,8 +27,8 @@ pdf_file_path = "Private_Book/KOMBI_all2.pdf"  # Replace with your PDF file path
 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
-    circle_size = 60
+    num_circles = max(3, min(12, len(label) // 2))  # Adjust the number of circles based on text length
+    circle_size = 30  # Size of the circles
     
     # Generate circles
     circles_html = ''.join([
@@ -51,26 +51,27 @@ def cloud_button(label, key=None, color=None):
         .wrapper {{
             display: flex;
             align-items: center;
-            background-color: #9BBEFF;
-            border-radius: 30px;  # Adjust as needed
-            padding: 10px 20px;
+            position: relative;
         }}
         .text {{
             position: relative;
             font-weight: bold;
             z-index: 2;
+            background-color: #9BBEFF;
+            border-radius: 15px;
+            padding: 5px 10px;
         }}
         .circle {{
             background-color: #9BBEFF;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            margin: 0 -{circle_size // 4}px;  # Adjust negative margin for overlap
+            margin: 0 -{circle_size // 3}px;
             z-index: 1;
         }}
-        .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; }}
+        .color-1 .text, .color-1 .circle {{ background-color: #FFA07A; }}
+        .color-2 .text, .color-2 .circle {{ background-color: #FF7F50; }}
+        .color-3 .text, .color-3 .circle {{ background-color: #FF6347; }}
     </style>
     <script>
         document.getElementById("{button_id}").onclick = function() {{
@@ -84,6 +85,11 @@ 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")
 
+
+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 = ""