Update app.py

app.py

@@ -8,12 +8,12 @@ def generate_table(number):
     try:
         number = int(number)
         table = f"<h2 style='color:green;'>📋 Multiplication Table for {number}:</h2><br>"
-        table += "<table style='border-collapse: collapse; width: 50%;'>"
-        table += "<thead><tr style='background-color: #FFD700; color: #000; text-align: left;'><th>Multiplier</th><th>Result</th></tr></thead>"
+        table += "<table style='border-collapse: collapse; width: 100%; text-align: center;'>"
+        table += "<thead><tr style='background-color: #FFD700; color: #000;'><th style='padding: 10px;'>Multiplier</th><th style='padding: 10px;'>Result</th></tr></thead>"
         
         for i in range(1, 11):
             color = "#FFB6C1" if i % 2 == 0 else "#ADD8E6"  # Alternate row colors
-            table += f"<tr style='background-color: {color};'><td>{number} x {i}</td><td>{number * i}</td></tr>"
+            table += f"<tr style='background-color: {color};'><td style='padding: 8px;'>{number} x {i}</td><td style='padding: 8px;'>{number * i}</td></tr>"
         
         table += "</table>"
         return table
@@ -22,23 +22,69 @@ def generate_table(number):
         return "<h3 style='color:red;'>⚠️ Please enter a valid number!</h3>"
 
 # Gradio interface
-title = "🌈 Multiplication Table Chatbot for Kids 🌈"
+title = "<span style='color:purple;'>🌟 Multiplication Table Chatbot for Kids 🌟</span>"
 description = """
-Welcome to the fun and colorful multiplication chatbot for kids!  
-🎨 Enter a number to see a vibrant multiplication table.  
-🚪 Type 0 to say goodbye!
+<h3 style='color:orange;'>🎨 Welcome to the fun and colorful multiplication chatbot for kids! 🎨</h3>
+<ul style="color:darkblue; font-size: 16px;">
+    <li>Type a number to see its vibrant multiplication table!</li>
+    <li>Type <b>0</b> to exit.</li>
+</ul>
 """
 
-# Create Gradio interface
-interface = gr.Interface(
-    fn=generate_table,
-    inputs=gr.Number(label="Enter a number (Type 0 to exit)", precision=0),  # Accept only integers
-    outputs=gr.HTML(label="Your Colorful Multiplication Table"),  # Display colorful HTML table
-    title=title,
-    description=description,
-    allow_flagging="never",  # Disable flagging
-)
+# Define colorful input and output components
+with gr.Blocks() as interface:
+    gr.Markdown(title)
+    gr.Markdown(description)
+    
+    with gr.Row():
+        with gr.Column():
+            input_box = gr.Number(label="<span style='color:teal;'>Enter a number</span> 🎲", elem_id="input-box")
+        with gr.Column():
+            output_box = gr.HTML(label="<span style='color:crimson;'>Your Colorful Multiplication Table</span>", elem_id="output-box")
+    
+    generate_button = gr.Button("🎉 Generate Table 🎉", elem_id="generate-button")
+    exit_message = gr.HTML(elem_id="exit-message")
+    
+    # Link input and output
+    generate_button.click(
+        fn=generate_table,
+        inputs=input_box,
+        outputs=output_box,
+    )
 
-# Launch the app
-if __name__ == "__main__":
-    interface.launch()
+# Add custom CSS for styling
+interface.css = """
+#input-box input {
+    background-color: #F0E68C;
+    color: #00008B;
+    font-size: 18px;
+    padding: 10px;
+    border: 2px solid #8A2BE2;
+    border-radius: 8px;
+    text-align: center;
+}
+#output-box {
+    background-color: #FFFACD;
+    color: #8B0000;
+    font-size: 16px;
+    padding: 15px;
+    border: 2px solid #FF4500;
+    border-radius: 10px;
+    overflow: auto;
+}
+#generate-button {
+    background-color: #7FFFD4;
+    color: #4B0082;
+    font-size: 18px;
+    padding: 10px 20px;
+    border-radius: 10px;
+    border: 2px solid #00CED1;
+    cursor: pointer;
+    transition: 0.3s ease;
+}
+#generate-button:hover {
+    background-color: #32CD32;
+    color: white;
+}
+"""
+interface.launch()