updated code UI ✅✅
Browse files- mediSync/app.py +72 -48
mediSync/app.py
CHANGED
@@ -727,65 +727,89 @@ def create_interface():
|
|
727 |
outputs=[end_consultation_status]
|
728 |
)
|
729 |
|
730 |
-
# JavaScript for appointment ID auto-population
|
|
|
731 |
gr.HTML("""
|
732 |
<script>
|
733 |
-
function
|
734 |
-
|
735 |
-
|
736 |
-
|
737 |
-
|
738 |
-
|
739 |
-
function setAppointmentIdValue(val) {
|
740 |
-
// Try by ID (Gradio 3.x and some 4.x)
|
741 |
-
var input = document.getElementById('appointment_id_input');
|
742 |
-
if (input) {
|
743 |
-
input.value = val;
|
744 |
-
input.dispatchEvent(new Event('input', { bubbles: true }));
|
745 |
-
return true;
|
746 |
}
|
747 |
-
|
748 |
-
|
749 |
-
|
750 |
-
|
751 |
-
|
752 |
-
|
753 |
-
|
754 |
-
|
755 |
-
|
756 |
-
|
757 |
-
|
758 |
-
|
759 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
760 |
return true;
|
761 |
}
|
762 |
}
|
763 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
764 |
}
|
765 |
-
|
766 |
-
|
767 |
-
|
768 |
-
if (
|
769 |
-
|
770 |
-
allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
|
771 |
-
return true;
|
772 |
}
|
773 |
}
|
774 |
-
|
775 |
-
|
776 |
-
|
777 |
-
|
778 |
-
|
779 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
780 |
}
|
781 |
-
}
|
782 |
-
document.addEventListener('DOMContentLoaded', function() {
|
783 |
-
setTimeout(tryPopulateAppointmentId, 400);
|
784 |
-
});
|
785 |
-
window.addEventListener('load', function() {
|
786 |
-
setTimeout(tryPopulateAppointmentId, 1000);
|
787 |
-
});
|
788 |
-
setTimeout(tryPopulateAppointmentId, 2000);
|
789 |
</script>
|
790 |
""")
|
791 |
|
|
|
727 |
outputs=[end_consultation_status]
|
728 |
)
|
729 |
|
730 |
+
# --- FIXED: Improved JavaScript for appointment ID auto-population ---
|
731 |
+
# This script will robustly set the value of the Gradio textbox, even in Gradio 4.x shadow DOM.
|
732 |
gr.HTML("""
|
733 |
<script>
|
734 |
+
(function() {
|
735 |
+
function getUrlParameter(name) {
|
736 |
+
name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
|
737 |
+
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
738 |
+
var results = regex.exec(window.location.search);
|
739 |
+
return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
740 |
}
|
741 |
+
|
742 |
+
function setAppointmentIdValue(val) {
|
743 |
+
// Try by element id (Gradio 3.x and some 4.x)
|
744 |
+
var input = document.getElementById('appointment_id_input');
|
745 |
+
if (input) {
|
746 |
+
input.value = val;
|
747 |
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
748 |
+
input.dispatchEvent(new Event('change', { bubbles: true }));
|
749 |
+
return true;
|
750 |
+
}
|
751 |
+
// Try Gradio 4.x shadow DOM
|
752 |
+
var gradioApp = document.querySelector('gradio-app');
|
753 |
+
if (gradioApp && gradioApp.shadowRoot) {
|
754 |
+
// Try to find textbox by label text
|
755 |
+
var labels = gradioApp.shadowRoot.querySelectorAll('label');
|
756 |
+
for (var i = 0; i < labels.length; i++) {
|
757 |
+
if (labels[i].textContent.trim().toLowerCase().includes('appointment id')) {
|
758 |
+
// Find the input in the same parent
|
759 |
+
var parent = labels[i].parentElement;
|
760 |
+
var textbox = parent.querySelector('input[type="text"], textarea');
|
761 |
+
if (textbox) {
|
762 |
+
textbox.value = val;
|
763 |
+
textbox.dispatchEvent(new Event('input', { bubbles: true }));
|
764 |
+
textbox.dispatchEvent(new Event('change', { bubbles: true }));
|
765 |
+
return true;
|
766 |
+
}
|
767 |
+
}
|
768 |
+
}
|
769 |
+
// Fallback: try all textboxes in shadowRoot
|
770 |
+
var allInputs = gradioApp.shadowRoot.querySelectorAll('input[type="text"], textarea');
|
771 |
+
for (var i = 0; i < allInputs.length; i++) {
|
772 |
+
if (allInputs[i].placeholder && allInputs[i].placeholder.toLowerCase().includes('appointment id')) {
|
773 |
+
allInputs[i].value = val;
|
774 |
+
allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
|
775 |
+
allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
|
776 |
return true;
|
777 |
}
|
778 |
}
|
779 |
}
|
780 |
+
// Try all textboxes for fallback (outside shadow DOM)
|
781 |
+
var allInputs = document.querySelectorAll('input[type="text"], textarea');
|
782 |
+
for (var i = 0; i < allInputs.length; i++) {
|
783 |
+
if (allInputs[i].placeholder && allInputs[i].placeholder.toLowerCase().includes('appointment id')) {
|
784 |
+
allInputs[i].value = val;
|
785 |
+
allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
|
786 |
+
allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
|
787 |
+
return true;
|
788 |
+
}
|
789 |
+
}
|
790 |
+
return false;
|
791 |
}
|
792 |
+
|
793 |
+
function tryPopulateAppointmentId() {
|
794 |
+
var appointmentId = getUrlParameter('appointment_id');
|
795 |
+
if (appointmentId) {
|
796 |
+
setAppointmentIdValue(appointmentId);
|
|
|
|
|
797 |
}
|
798 |
}
|
799 |
+
|
800 |
+
// Try multiple times and on different events for robustness
|
801 |
+
document.addEventListener('DOMContentLoaded', function() {
|
802 |
+
setTimeout(tryPopulateAppointmentId, 200);
|
803 |
+
setTimeout(tryPopulateAppointmentId, 800);
|
804 |
+
});
|
805 |
+
window.addEventListener('load', function() {
|
806 |
+
setTimeout(tryPopulateAppointmentId, 1200);
|
807 |
+
});
|
808 |
+
// Also try periodically for 3 seconds
|
809 |
+
for (let t = 0; t <= 3000; t += 400) {
|
810 |
+
setTimeout(tryPopulateAppointmentId, t);
|
811 |
}
|
812 |
+
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
813 |
</script>
|
814 |
""")
|
815 |
|