updated UI code ✅✅

mediSync/app.py

@@ -533,14 +533,24 @@ def create_interface():
             """,
             elem_id="medisync-header"
         )
-
+        
         with gr.Row():
-            # --- Appointment ID auto-population logic: always leave value blank, use JS to set value after render ---
+            import urllib.parse
+            try:
+                url_params = {}
+                if hasattr(gr, 'get_current_url'):
+                    current_url = gr.get_current_url()
+                    if current_url:
+                        parsed = urllib.parse.urlparse(current_url)
+                        url_params = urllib.parse.parse_qs(parsed.query)
+                default_appointment_id = url_params.get('appointment_id', [''])[0]
+            except:
+                default_appointment_id = ""
             appointment_id_input = gr.Textbox(
                 label="Appointment ID",
                 placeholder="Enter your appointment ID here...",
                 info="This will be automatically populated if you came from the doctors page",
-                value="",  # Always blank, let JS set value after render
+                value=default_appointment_id,
                 elem_id="appointment_id_input"
             )
 
@@ -729,89 +739,33 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # --- Improved JavaScript for appointment ID auto-population ---
-        # This script will robustly set the value of the Gradio textbox, even in Gradio 4.x shadow DOM.
+        # --- Appointment ID auto-population logic (copied from template in working_hugging_face_code.py) ---
+#         # JavaScript for appointment ID auto-population
         gr.HTML("""
         <script>
-        (function() {
-            function getUrlParameter(name) {
-                name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
-                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-                var results = regex.exec(window.location.search);
-                return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
-            }
-
-            function setAppointmentIdValue(val) {
-                // Try by element id (Gradio 3.x and some 4.x)
+        function getUrlParameter(name) {
+            name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
+            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+            var results = regex.exec(location.search);
+            return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
+        }
+        function populateAppointmentId() {
+            var appointmentId = getUrlParameter('appointment_id');
+            if (appointmentId) {
                 var input = document.getElementById('appointment_id_input');
                 if (input) {
-                    input.value = val;
-                    input.dispatchEvent(new Event('input', { bubbles: true }));
-                    input.dispatchEvent(new Event('change', { bubbles: true }));
-                    return true;
-                }
-                // Try Gradio 4.x shadow DOM
-                var gradioApp = document.querySelector('gradio-app');
-                if (gradioApp && gradioApp.shadowRoot) {
-                    // Try to find textbox by label text
-                    var labels = gradioApp.shadowRoot.querySelectorAll('label');
-                    for (var i = 0; i < labels.length; i++) {
-                        if (labels[i].textContent.trim().toLowerCase().includes('appointment id')) {
-                            // Find the input in the same parent
-                            var parent = labels[i].parentElement;
-                            var textbox = parent.querySelector('input[type="text"], textarea');
-                            if (textbox) {
-                                textbox.value = val;
-                                textbox.dispatchEvent(new Event('input', { bubbles: true }));
-                                textbox.dispatchEvent(new Event('change', { bubbles: true }));
-                                return true;
-                            }
-                        }
-                    }
-                    // Fallback: try all textboxes in shadowRoot
-                    var allInputs = gradioApp.shadowRoot.querySelectorAll('input[type="text"], textarea');
-                    for (var i = 0; i < allInputs.length; i++) {
-                        if (allInputs[i].placeholder && allInputs[i].placeholder.toLowerCase().includes('appointment id')) {
-                            allInputs[i].value = val;
-                            allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
-                            allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
-                            return true;
-                        }
-                    }
-                }
-                // Try all textboxes for fallback (outside shadow DOM)
-                var allInputs = document.querySelectorAll('input[type="text"], textarea');
-                for (var i = 0; i < allInputs.length; i++) {
-                    if (allInputs[i].placeholder && allInputs[i].placeholder.toLowerCase().includes('appointment id')) {
-                        allInputs[i].value = val;
-                        allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
-                        allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
-                        return true;
-                    }
+                    input.value = appointmentId;
+                    var event = new Event('input', { bubbles: true });
+                    input.dispatchEvent(event);
                 }
-                return false;
             }
-
-            function tryPopulateAppointmentId() {
-                var appointmentId = getUrlParameter('appointment_id');
-                if (appointmentId) {
-                    setAppointmentIdValue(appointmentId);
-                }
-            }
-
-            // Try multiple times and on different events for robustness
-            document.addEventListener('DOMContentLoaded', function() {
-                setTimeout(tryPopulateAppointmentId, 200);
-                setTimeout(tryPopulateAppointmentId, 800);
-            });
-            window.addEventListener('load', function() {
-                setTimeout(tryPopulateAppointmentId, 1200);
-            });
-            // Also try periodically for 3 seconds
-            for (let t = 0; t <= 3000; t += 400) {
-                setTimeout(tryPopulateAppointmentId, t);
-            }
-        })();
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(populateAppointmentId, 800);
+        });
+        window.addEventListener('load', function() {
+            setTimeout(populateAppointmentId, 1200);
+        });
         </script>
         """)