Update app.py

app.py

@@ -44,7 +44,7 @@ def registration_interface(name, father_name, age, gender, phone, address):
         "name": name,
         "father_name": father_name,
         "age": age,
-        "gender": gender,
+        "gender": gender,  # Updated field for gender
         "phone": phone,
         "address": address,
         "tests": [],
@@ -52,7 +52,7 @@ def registration_interface(name, father_name, age, gender, phone, address):
     }
     
     save_data(patients, last_sequence)
-    return f"Patient Registered. Patient ID: {patient_id}", patient_id
+    return f"Patient Registered. Patient ID: {patient_id}"
 
 # Tests Selection Tab
 def test_interface(categories):
@@ -74,8 +74,62 @@ def billing_interface(patient_id):
     else:
         return "Invalid Patient ID. Please check the ID."
 
+# Gradio Interface
+with gr.Blocks() as app:
+    gr.Markdown("<h1 style='text-align: center;'>👩🏻‍🔬丂卂ㄒ卄Ҝ尺ㄩㄒ卄卂 ㄥ丨爪丂🔬</h1>", elem_id="header")
+
+    with gr.Tab("Patient Registration"):
+        gr.Markdown("<h2>Register a New Patient</h2>")
+        
+        with gr.Row():
+            name = gr.Textbox(label="Patient Name", placeholder="Enter patient's full name", elem_id="name_field")
+            father_name = gr.Textbox(label="Father/Husband's Name", placeholder="Enter father/husband's full name", elem_id="father_name_field")
+        
+        with gr.Row():
+            age = gr.Number(label="Age", value=None, minimum=0, maximum=120, elem_id="age_field")
+            gender = gr.CheckboxGroup(
+                choices=["Male", "Female", "Other"],
+                label="Gender",
+                elem_id="gender_field"
+            )
+        
+        with gr.Row():
+            phone = gr.Textbox(label="Phone Number", placeholder="Enter a valid 10-digit phone number", elem_id="phone_field")
+            address = gr.Textbox(label="Address", placeholder="Enter full address", lines=2, elem_id="address_field")
+
+        register_button = gr.Button("Register Patient", elem_id="register_button")
+        registration_output = gr.Markdown(label="Registration Output", elem_id="registration_output")
+        
+        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], registration_output)
+
+    with gr.Tab("Tests"):
+        gr.Markdown("<h2>Select Tests for the Patient</h2>")
+        patient_id_test = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID")
+        categories = gr.CheckboxGroup(
+            ["Haematology", "Clinical Pathology", "Biochemistry", "Microbiology", "Specific Diseases", "Serology", "Radiology", "Other Diagnostic Tests"],
+            label="Select Test Categories"
+        )
+        available_tests = gr.CheckboxGroup(label="Available Tests")
+        confirm_button = gr.Button("Confirm Selected Tests")
+        
+        # Use Markdown for Test Selection Output to allow for auto-expanding content
+        test_output = gr.Markdown(label="Test Selection Output", elem_id="test_output")
+
+        categories.change(test_interface, inputs=categories, outputs=available_tests)
+        confirm_button.click(confirm_tests_interface, [patient_id_test, available_tests], test_output)
+
+    with gr.Tab("Billing"):
+        gr.Markdown("<h2>Billing Information</h2>")
+        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
+        fetch_button = gr.Button("Fetch Billing Details")
+        
+        # Use Markdown for Billing Output to allow for auto-expanding content
+        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
+        
+        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
+
+
 # Custom CSS styling
-custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
 
 /* General Page Style */
@@ -91,6 +145,17 @@ body {
     min-height: 100vh;
 }
 
+/* Heading Colors */
+h1 {
+    color: #ffffff; /* White color for h1 */
+    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+h2, h3, h4, h5, h6 {
+    color: #f0e68c; /* Light yellow shadow for other headings */
+    text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.3);
+}
+
 /* Header Styling */
 #header {
     color: #7fffd4;
@@ -133,30 +198,11 @@ input, select, textarea {
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
 }
 
-/* Button Style */
-.gr-button {
-    color: #ffffff;
-    background: linear-gradient(135deg, #1de9b6, #007aff);
-    border: none;
-    border-radius: 12px;
-    padding: 12px 30px;
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 16px;
-    transition: 0.3s ease;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-}
-
-.gr-button:hover {
-    background: linear-gradient(135deg, #005cbf, #00bfa5);
-    transform: scale(1.05);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-}
-
-/* Checkbox Group Styling */
-.gr-checkbox-group label {
+/* Radio Button Group Styling */
+.gr-radio-group label {
     display: flex;
     align-items: center;
+    justify-content: center;
     padding: 10px 20px;
     border: 2px solid #7fffd4;
     border-radius: 8px;
@@ -168,35 +214,77 @@ input, select, textarea {
     margin-right: 10px;
 }
 
-.gr-checkbox-group label:hover {
+.gr-radio-group label:hover {
     background: #e0f7fa;
     color: #00bfa5;
 }
 
-/* Checkbox Styling */
-.gr-checkbox-group input[type="checkbox"] {
+/* Radio Button Styling */
+.gr-radio-group input[type="radio"] {
     appearance: none;
     width: 20px;
     height: 20px;
     border: 2px solid #7fffd4;
-    border-radius: 4px;
+    border-radius: 50%;
     margin-right: 10px;
     transition: all 0.3s ease;
+    position: relative;
 }
 
-/* Selected Checkbox Styling */
-.gr-checkbox-group input[type="checkbox"]:checked {
+/* Selected Radio Button Styling with Checkmark */
+.gr-radio-group input[type="radio"]:checked {
     background-color: #ff8c00;
     border-color: #ff8c00;
 }
 
-/* Simple checkmark indicator */
-.gr-checkbox-group input[type="checkbox"]:checked::after {
+.gr-radio-group input[type="radio"]:checked::after {
     content: "✓";
+    color: #ffffff;
     font-size: 14px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ff8c00;
+}
+
+/* Adjust label for responsive alignment */
+.gr-radio-group span {
+    font-size: 1em;
+    font-weight: 600;
+    color: #2d2d2d;
+}
+
+/* Form Field Hover and Focus */
+input:focus, textarea:focus, select:focus {
+    border-color: #00ffcc;
+    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
+    transform: scale(1.02);
+}
+
+/* Button Style */
+.gr-button {
     color: #ffffff;
-    display: block;
-    text-align: center;
+    background: linear-gradient(135deg, #1de9b6, #007aff);
+    border: none;
+    border-radius: 12px;
+    padding: 12px 30px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 16px;
+    transition: 0.3s ease;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+}
+
+.gr-button:hover {
+    background: linear-gradient(135deg, #005cbf, #00bfa5);
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
 }
 
 /* Tab Styling */
@@ -233,7 +321,7 @@ input, select, textarea {
     padding: 8px 16px;
 }
 
-/* Label Styling */
+/* Field Labels */
 label {
     font-size: 1em;
     font-weight: 600;
@@ -265,82 +353,11 @@ label {
         font-size: 1em;
         padding: 10px;
     }
+
+    .gr-radio-group {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 }
 """
-
-# Gradio Interface
-with gr.Blocks(css=custom_css) as app:
-    gr.Markdown("<h1 style='text-align: center;'>👩🏻‍🔬丂卂ㄒ卄Ҝ尺ㄩㄒ卄卂 ㄥ丨爪丂🔬</h1>", elem_id="header")
-
-    with gr.Tab("Patient Registration"):
-        gr.Markdown("<h2>Register a New Patient</h2>")
-
-        with gr.Row():
-            name = gr.Textbox(label="Patient Name", placeholder="Enter patient's full name", elem_id="name_field")
-            father_name = gr.Textbox(label="Father/Husband's Name", placeholder="Enter father/husband's full name", elem_id="father_name_field")
-
-        with gr.Row():
-            age = gr.Number(label="Age", value=None, minimum=0, maximum=120, elem_id="age_field")
-            gender = gr.Radio(
-                choices=["Male", "Female", "Other"],
-                label="Gender",
-                elem_id="gender_field"
-            )
-
-        with gr.Row():
-            phone = gr.Textbox(label="Phone Number", placeholder="Enter a valid 10-digit phone number", elem_id="phone_field")
-            address = gr.Textbox(label="Address", placeholder="Enter full address", lines=2, elem_id="address_field")
-
-        register_button = gr.Button("Register Patient", elem_id="register_button")
-        registration_output = gr.Markdown(elem_id="registration_output")
-        patient_id_display = gr.Textbox(label="Patient ID", interactive=False, elem_id="patient_id_display")  # Display Patient ID as non-editable text
-        
-        # Copy Patient ID functionality with JavaScript
-        gr.Markdown("""
-        <button onclick="copyPatientID()" class="gr-button" style="margin-top: 10px;">Copy Patient ID</button>
-        <script>
-            function copyPatientID() {
-                const patientID = document.querySelector('#patient_id_display input').value;
-                navigator.clipboard.writeText(patientID).then(() => {
-                    alert('Patient ID copied to clipboard');
-                });
-            }
-        </script>
-        """)
-
-        # Callback for registration and display Patient ID
-        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], [registration_output, patient_id_display])
-
-    with gr.Tab("Tests"):
-        gr.Markdown("<h2>Select Tests for the Patient</h2>")
-        patient_id_test = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID")
-        paste_button_test = gr.Button("Paste Patient ID")  # Paste button to auto-fill Patient ID
-        categories = gr.CheckboxGroup(
-            ["Haematology", "Clinical Pathology", "Biochemistry", "Microbiology", "Specific Diseases", "Serology", "Radiology", "Other Diagnostic Tests"],
-            label="Select Test Categories"
-        )
-        available_tests = gr.CheckboxGroup(label="Available Tests")
-        confirm_button = gr.Button("Confirm Selected Tests")
-
-        test_output = gr.Markdown(label="Test Selection Output", elem_id="test_output")
-
-        categories.change(test_interface, inputs=categories, outputs=available_tests)
-        confirm_button.click(confirm_tests_interface, [patient_id_test, available_tests], test_output)
-
-        # Paste button action for Tests Tab
-        paste_button_test.click(lambda x: x, patient_id_display, patient_id_test)
-
-    with gr.Tab("Billing"):
-        gr.Markdown("<h2>Billing Information</h2>")
-        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
-        paste_button_bill = gr.Button("Paste Patient ID")  # Paste button for Billing
-        fetch_button = gr.Button("Fetch Billing Details")
-        
-        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
-        
-        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
-        
-        # Paste button action for Billing Tab
-        paste_button_bill.click(lambda x: x, patient_id_display, patient_id_bill)
-
-app.launch()
+app.launch()