element.style {
}
.lg.svelte-1137axg {
    border-radius: var(--button-large-radius);
    padding: var(--button-large-padding);
    font-weight: var(--button-large-text-weight);
    font-size: var(--button-large-text-size);
}
.primary.svelte-1137axg {
    border: var(--button-border-width) solid #36607c;
    background: #36607c;
    color: #ffffff;
    box-shadow: var(--button-primary-shadow);
}
div.svelte-vt1mxs>*, div.svelte-vt1mxs>.form > * {
    width: var(--size-full);
}
button.svelte-1137axg, a.svelte-1137axg {
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    transition: var(--button-transition);
    padding: var(--size-0-5) var(--size-2);
    text-align: center;
}
.gradio-container-5-8-0 button, .gradio-container-5-8-0 [role="button"] {
    cursor: pointer;
}
.gradio-container-5-8-0 button, .gradio-container-5-8-0 [type="button"], .gradio-container-5-8-0 [type="reset"], .gradio-container-5-8-0 [type="submit"] {
    -webkit-appearance: button;
    background-image: none;
    background-color: transparent;
}
.gradio-container-5-8-0 button, .gradio-container-5-8-0 select {
    text-transform: none;
}
.gradio-container-5-8-0 button, .gradio-container-5-8-0 input, .gradio-container-5-8-0 optgroup, .gradio-container-5-8-0 select, .gradio-container-5-8-0 textarea {
    margin: 0;
    padding: 0;
    color: inherit;
    font-weight: inherit;
    font-size: 100%;
    line-height: inherit;
    font-family: inherit;
}
.gradio-container-5-8-0, .gradio-container-5-8-0 *, .gradio-container-5-8-0 ::before, .gradio-container-5-8-0 ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}
user agent stylesheet
button {
    appearance: auto;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-variant-emoji: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-size-adjust: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em;
    padding-block: 1px;
    padding-inline: 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}
.wrap.svelte-1rjryqp.svelte-1rjryqp.svelte-1rjryqp {
    display: flex
;
    flex-grow: 1;
    flex-direction: column;
    width: var(--size-full);
    font-weight: var(--body-text-weight);
    font-size: var(--body-text-size);
}
.gradio-container-5-8-0 {
    display: flex
;
    position: relative;
    flex-direction: column;
    padding: 0;
    min-height: 1px;
    overflow: hidden;
    color: var(--button-secondary-text-color);
}
.gradio-container-5-8-0 {
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    font-family: var(--font);
    -moz-tab-size: 4;
    tab-size: 4;
}
<style>
body {
    font-family: Roboto, sans-serif;
    background-color: rgb(240, 244, 247);
}
body {
    background: var(--body-background-fill);
    color: var(--body-text-color);
}
body {
    margin: 0;
    line-height: inherit;
}
:root {
    --name: default;
    --primary-50: #fff7ed;
    --primary-100: #ffedd5;
    --primary-200: #ffddb3;
    --primary-300: #fdba74;
    --primary-400: #fb923c;
    --primary-500: #f97316;
    --primary-600: #ea580c;
    --primary-700: #c2410c;
    --primary-800: #9a3412;
    --primary-900: #7c2d12;
    --primary-950: #6c2e12;
    --secondary-50: #eff6ff;
    --secondary-100: #dbeafe;
    --secondary-200: #bfdbfe;
    --secondary-300: #93c5fd;
    --secondary-400: #60a5fa;
    --secondary-500: #3b82f6;
    --secondary-600: #2563eb;
    --secondary-700: #1d4ed8;
    --secondary-800: #1e40af;
    --secondary-900: #1e3a8a;
    --secondary-950: #1d3660;
    --neutral-50: #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #bbbbc2;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #0f0f11;
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-xxl: 16px;
    --radius-xxs: 1px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-xxl: 22px;
    --text-xxs: 9px;
    --text-xs: 10px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 22px;
    --text-xxl: 26px;
    --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
    --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
    --body-background-fill: var(--background-fill-primary);
    --body-text-color: var(--neutral-800);
    --body-text-size: var(--text-md);
    --body-text-weight: 400;
    --embed-radius: var(--radius-sm);
    --color-accent: var(--primary-500);
    --color-accent-soft: var(--primary-50);
    --background-fill-primary: white;
    --background-fill-secondary: var(--neutral-50);
    --border-color-accent: var(--primary-300);
    --border-color-primary: var(--neutral-200);
    --link-text-color: var(--secondary-600);
    --link-text-color-active: var(--secondary-600);
    --link-text-color-hover: var(--secondary-700);
    --link-text-color-visited: var(--secondary-500);
    --body-text-color-subdued: var(--neutral-400);
    --accordion-text-color: var(--body-text-color);
    --table-text-color: var(--body-text-color);
    --shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
    --shadow-spread: 3px;
    --block-background-fill: var(--background-fill-primary);
    --block-border-color: var(--border-color-primary);
    --block-border-width: 1px;
    --block-info-text-color: var(--body-text-color-subdued);
    --block-info-text-size: var(--text-sm);
    --block-info-text-weight: 400;
    --block-label-background-fill: var(--background-fill-primary);
    --block-label-border-color: var(--border-color-primary);
    --block-label-border-width: 1px;
    --block-label-shadow: var(--block-shadow);
    --block-label-text-color: var(--neutral-500);
    --block-label-margin: 0;
    --block-label-padding: var(--spacing-sm) var(--spacing-lg);
    --block-label-radius: calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px) 0;
    --block-label-right-radius: 0 calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px);
    --block-label-text-size: var(--text-sm);
    --block-label-text-weight: 400;
    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
    --block-radius: var(--radius-sm);
    --block-shadow: none;
    --block-title-background-fill: none;
    --block-title-border-color: none;
    --block-title-border-width: 0px;
    --block-title-text-color: var(--neutral-500);
    --block-title-padding: 0;
    --block-title-radius: none;
    --block-title-text-size: var(--text-md);
    --block-title-text-weight: 400;
    --container-radius: var(--radius-sm);
    --form-gap-width: 0px;
    --layout-gap: var(--spacing-xxl);
    --panel-background-fill: var(--background-fill-secondary);
    --panel-border-color: var(--border-color-primary);
    --panel-border-width: 0;
    --section-header-text-size: var(--text-md);
    --section-header-text-weight: 400;
    --border-color-accent-subdued: var(--primary-200);
    --code-background-fill: var(--neutral-100);
    --chatbot-text-size: var(--text-lg);
    --checkbox-background-color: var(--background-fill-primary);
    --checkbox-background-color-focus: var(--checkbox-background-color);
    --checkbox-background-color-hover: var(--checkbox-background-color);
    --checkbox-background-color-selected: var(--color-accent);
    --checkbox-border-color: var(--neutral-300);
    --checkbox-border-color-focus: var(--color-accent);
    --checkbox-border-color-hover: var(--neutral-300);
    --checkbox-border-color-selected: var(--color-accent);
    --checkbox-border-radius: var(--radius-sm);
    --checkbox-border-width: var(--input-border-width);
    --checkbox-label-background-fill: var(--background-fill-primary);
    --checkbox-label-background-fill-hover: var(--background-fill-secondary);
    --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
    --checkbox-label-border-color: var(--border-color-primary);
    --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
    --checkbox-label-border-color-selected: var(--checkbox-label-border-color);
    --checkbox-label-border-width: var(--input-border-width);
    --checkbox-label-gap: var(--spacing-lg);
    --checkbox-label-padding: var(--spacing-md) calc(2* var(--spacing-md));
    --checkbox-label-shadow: none;
    --checkbox-label-text-size: var(--text-md);
    --checkbox-label-text-weight: 400;
    --checkbox-check: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
    --radio-circle: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e);
    --checkbox-shadow: var(--input-shadow);
    --checkbox-label-text-color: var(--body-text-color);
    --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
    --error-background-fill: #fef2f2;
    --error-border-color: #b91c1c;
    --error-border-width: 1px;
    --error-text-color: #b91c1c;
    --error-icon-color: #b91c1c;
    --input-background-fill: white;
    --input-background-fill-focus: var(--input-background-fill);
    --input-background-fill-hover: var(--input-background-fill);
    --input-border-color: var(--border-color-primary);
    --input-border-color-focus: var(--secondary-300);
    --input-border-color-hover: var(--input-border-color);
    --input-border-width: 1px;
    --input-padding: var(--spacing-xl);
    --input-placeholder-color: var(--neutral-400);
    --input-radius: var(--radius-sm);
    --input-shadow: none;
    --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
    --input-text-size: var(--text-md);
    --input-text-weight: 400;
    --loader-color: var(--color-accent);
    --prose-text-size: var(--text-md);
    --prose-text-weight: 400;
    --prose-header-text-weight: 600;
    --slider-color: var(--color-accent);
    --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-200));
    --table-border-color: var(--neutral-300);
    --table-even-background-fill: white;
    --table-odd-background-fill: var(--neutral-50);
    --table-radius: var(--radius-sm);
    --table-row-focus: var(--color-accent-soft);
    --button-border-width: 0px;
    --button-cancel-background-fill: #ef4444;
    --button-cancel-background-fill-hover: #dc2626;
    --button-cancel-border-color: var(--button-secondary-border-color);
    --button-cancel-border-color-hover: var(--button-secondary-border-color-hover);
    --button-cancel-text-color: white;
    --button-cancel-text-color-hover: white;
    --button-transform-hover: none;
    --button-transform-active: none;
    --button-transition: all 0.2s ease;
    --button-large-padding: var(--spacing-lg) calc(2* var(--spacing-lg));
    --button-large-radius: var(--radius-md);
    --button-large-text-size: var(--text-lg);
    --button-large-text-weight: 600;
    --button-primary-background-fill: var(--primary-500);
    --button-primary-background-fill-hover: var(--primary-600);
    --button-primary-border-color: var(--primary-500);
    --button-primary-border-color-hover: var(--primary-500);
    --button-primary-text-color: white;
    --button-primary-text-color-hover: var(--button-primary-text-color);
    --button-primary-shadow: none;
    --button-primary-shadow-hover: var(--button-primary-shadow);
    --button-primary-shadow-active: var(--button-primary-shadow);
    --button-secondary-background-fill: var(--neutral-200);
    --button-secondary-background-fill-hover: var(--neutral-300);
    --button-secondary-border-color: var(--neutral-200);
    --button-secondary-border-color-hover: var(--neutral-200);
    --button-secondary-text-color: black;
    --button-secondary-text-color-hover: var(--button-secondary-text-color);
    --button-secondary-shadow: var(--button-primary-shadow);
    --button-secondary-shadow-hover: var(--button-secondary-shadow);
    --button-secondary-shadow-active: var(--button-secondary-shadow);
    --button-small-padding: var(--spacing-sm) calc(1.5* var(--spacing-sm));
    --button-small-radius: var(--radius-md);
    --button-small-text-size: var(--text-sm);
    --button-small-text-weight: 400;
}
:root {
    --scale-0: 1rem;
    --scale-1: 1.125rem;
    --scale-2: 1.25rem;
    --scale-3: 1.5rem;
    --scale-4: 1.875rem;
    --scale-5: 2.25rem;
    --scale-6: 3rem;
    --scale-7: 3.75rem;
    --scale-8: 4.5rem;
    --scale-9: 6rem;
    --scale-10: 8rem;
    --scale-000: 0.75rem;
    --scale-00: 0.875rem;
    --scale-fluid-0: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    --scale-fluid-1: clamp(1rem, 0.925rem + 0.25vw, 1.125rem);
    --scale-fluid-2: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
    --scale-fluid-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --scale-fluid-4: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
    --scale-fluid-5: clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem);
    --scale-fluid-6: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
    --scale-fluid-7: clamp(3rem, 2.55rem + 1.5vw, 3.75rem);
    --scale-fluid-8: clamp(3.75rem, 3.3rem + 1.5vw, 4.5rem);
    --scale-fluid-9: clamp(4.5rem, 3.6rem + 3vw, 6rem);
    --scale-fluid-10: clamp(6rem, 4.8rem + 4vw, 8rem);
    --scale-fluid-000: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
    --scale-fluid-00: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);
    --font-sans: IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;
    --line-none: 1;
    --line-xs: 1.125;
    --line-sm: 1.4;
    --line-md: 1.5;
    --line-lg: 1.625;
    --line-xl: 2;
    --letter-xs: -0.05em;
    --letter-sm: -0.025em;
    --letter-none: 0em;
    --letter-lg: 0.025em;
    --letter-xl: 0.05em;
    --prose-xs: 45ch;
    --prose-sm: 55ch;
    --prose-md: 65ch;
    --prose-lg: 75ch;
    --prose-xl: 85ch;
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-7: 28px;
    --size-8: 32px;
    --size-9: 36px;
    --size-10: 40px;
    --size-11: 44px;
    --size-12: 48px;
    --size-14: 56px;
    --size-16: 64px;
    --size-20: 80px;
    --size-24: 96px;
    --size-28: 112px;
    --size-32: 128px;
    --size-36: 144px;
    --size-40: 160px;
    --size-44: 176px;
    --size-48: 192px;
    --size-52: 208px;
    --size-56: 224px;
    --size-60: 240px;
    --size-64: 256px;
    --size-72: 288px;
    --size-80: 320px;
    --size-96: 384px;
    --size-px: 1px;
    --size-full: 100%;
    --size-screen: 100vw;
    --size-min: min-content;
    --size-max: max-content;
    --size-0-5: 2px;
    --size-1-5: 6px;
    --size-2-5: 10px;
    --size-screen-h: 100vh;
    --width-xs: 480px;
    --width-sm: 640px;
    --width-md: 768px;
    --width-lg: 1024px;
    --width-xl: 1280px;
    --ratio-square: 1 / 1;
    --ratio-portrait: 3 / 4;
    --ratio-landscape: 4 / 3;
    --ratio-tall: 2 / 3;
    --ratio-wide: 3 / 2;
    --ratio-widescreen: 16 / 9;
    --ratio-golden: 1.618 / 1;
    --radius-100: 100%;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    --radius-2xl: 16px;
    --radius-3xl: 22px;
    --blur-xs: blur(4px);
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(40px);
    --layer-1: 10;
    --layer-2: 20;
    --layer-3: 30;
    --layer-4: 40;
    --layer-5: 50;
    --layer-below: -1;
    --layer-top: 2147483647;
    --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --elevation-3: 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --elevation-4: 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --elevation-5: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
    --elevation-6: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
    --elevation-7: 0 32px 64px -12px rgba(0, 0, 0, 0.2);
    --color-grey-50: #f9fafb;
    --color-grey-100: #f3f4f6;
    --color-grey-200: #e5e7eb;
    --color-grey-300: #d1d5db;
    --color-grey-400: #9ca3af;
    --color-grey-500: #6b7280;
    --color-grey-600: #4b5563;
    --color-grey-700: #374151;
    --color-grey-800: #1f2937;
    --color-grey-900: #111827;
    --color-black: #14141b;
    --color-grey: #6b7280;
    --color-red-300: #fca5a5;
    --color-red-500: #ef4444;
    --color-red-700: #b91c1c;
    --color-red: #ef4444;
    --color-green-300: #86efac;
    --color-green-500: #22c55e;
    --color-green-700: #15803d;
    --color-green: #22c55e;
    --color-blue-300: #93c5fd;
    --color-blue-500: #0ea5e9;
    --color-blue-700: #1d4ed8;
    --color-blue: #0ea5e9;
    --color-pink-300: #fbb6ce;
    --color-pink-500: #ed64a6;
    --color-pink-700: #d53f8c;
    --color-pink: var(--color-pink-500);
    --color-purple-300: #b794f4;
    --color-purple-500: #805ad5;
    --color-purple-700: #6b46c1;
    --color-purple: var(--color-purple-500);
    --color-teal-300: #81e6d9;
    --color-teal-500: #38b2ac;
    --color-teal-700: #2c7a7b;
    --color-teal: var(--color-teal-500);
    --color-yellow-300: #fde047;
    --color-yellow-500: #eab308;
    --color-yellow-700: #a16207;
    --color-yellow: #eab308;
    --color-orange-300: #ffb066;
    --color-orange-500: #ff7c00;
    --color-orange-700: #ce6400;
    --color-orange: #f97316;
    --color-brown-300: #a1887f;
    --color-brown-500: #795548;
    --color-brown-700: #5d4037;
    --color-brown: var(--color-brown-500);
    --color-blue-10: #fafcff;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-400: #60a5fa;
    --color-blue-600: #2563eb;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #1c366b;
    --color-grey-10: #fdfdfe;
    --color-grey-950: #0b0f19;
    --color-red-10: #fffbfb;
    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-400: #f87171;
    --color-red-600: #dc2626;
    --color-red-800: #991b1b;
    --color-red-900: #7f1d1d;
    --color-red-950: #63171a;
    --color-green-10: #f9fefc;
    --color-green-50: #ecfdf5;
    --color-green-100: #d1fae5;
    --color-green-200: #bbf7d0;
    --color-green-400: #4ade80;
    --color-green-600: #16a34a;
    --color-green-800: #166534;
    --color-green-900: #14532d;
    --color-green-950: #134227;
    --color-orange-10: #fffbf6;
    --color-orange-50: #fff2e5;
    --color-orange-100: #ffe5cc;
    --color-orange-200: #ffd8b4;
    --color-orange-400: #ff9633;
    --color-orange-600: #ee7400;
    --color-orange-800: #a45000;
    --color-orange-900: #5c2d00;
    --color-orange-950: #3c1f00;
    --color-yellow-10: #fffef8;
    --color-yellow-50: #fffbeb;
    --color-yellow-100: #fff9c2;
    --color-yellow-200: #fef08a;
    --color-yellow-400: #facc15;
    --color-yellow-600: #ca8a04;
    --color-yellow-800: #854d0e;
    --color-yellow-900: #713f12;
    --color-yellow-950: #633112;
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));
    --grid-page-width: var(--width-xl);
    --grid-page-gutter: 5vw;
    --grid-page-main: 2 / 3;
    --grid-page: minmax(var(--grid-page-gutter), 1fr) minmax(0, var(--grid-page-width)) minmax(var(--grid-page-gutter), 1fr);
claim_order
: 
2
hydrate_init
: 
true
accessKey
: 
""
attributeStyleMap
: 
StylePropertyMap {size: 0}
attributes
: 
NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}
autocapitalize
: 
""
autofocus
: 
false
baseURI
: 
"https://mishalzubair-wellbeingapp.hf.space/?__theme=light"
childElementCount
: 
1
childNodes
: 
NodeList(3) [img.button-icon.svelte-1137axg.right-padded, text, text]
children
: 
HTMLCollection [img.button-icon.svelte-1137axg.right-padded]
classList
: 
DOMTokenList(3) ['lg', 'primary', 'svelte-1137axg', value: 'lg primary  svelte-1137axg']
className
: 
"lg primary  svelte-1137axg"
clientHeight
: 
40
clientLeft
: 
0
clientTop
: 
0
clientWidth
: 
936
contentEditable
: 
"inherit"
currentCSSZoom
: 
1
dataset
: 
DOMStringMap {}
dir
: 
""
disabled
: 
false
draggable
: 
false
elementTiming
: 
""
enterKeyHint
: 
""
firstChild
: 
img.button-icon.svelte-1137axg.right-padded
firstElementChild
: 
img.button-icon.svelte-1137axg.right-padded
formAction
: 
"https://mishalzubair-wellbeingapp.hf.space/?__theme=light"
formEnctype
: 
""
formMethod
: 
""
formNoValidate
: 
false
formTarget
: 
""
hidden
: 
false
id
: 
"component-8"
inert
: 
false
innerHTML
: 
"<img class=\"button-icon svelte-1137axg right-padded\" src=\"https://mishalzubair-wellbeingapp.hf.space/gradio_api/file=/home/user/app/fa-paper-plane\" alt=\"Submit Your Message icon\"> Submit Your Message"
innerText
: 
"Submit Your Message"
inputMode
: 
""
isConnected
: 
true
isContentEditable
: 
false
labels
: 
NodeList []
lang
: 
""
lastChild
: 
text
lastElementChild
: 
img.button-icon.svelte-1137axg.right-padded
localName
: 
"button"
name
: 
""
namespaceURI
: 
"http://www.w3.org/1999/xhtml"
nextElementSibling
: 
div#component-9.block.svelte-hjh1qu.flex.auto-margin
nextSibling
: 
text
nodeName
: 
"BUTTON"
nodeType
: 
1
nonce
: 
""
offsetHeight
: 
40
offsetLeft
: 
0
offsetParent
: 
div.column.svelte-vt1mxs.gap
offsetTop
: 
111
offsetWidth
: 
936
outerHTML
: 
"<button class=\"lg primary  svelte-1137axg\" id=\"component-8\"><img class=\"button-icon svelte-1137axg right-padded\" src=\"https://mishalzubair-wellbeingapp.hf.space/gradio_api/file=/home/user/app/fa-paper-plane\" alt=\"Submit Your Message icon\"> Submit Your Message</button>"
outerText
: 
"Submit Your Message"
ownerDocument
: 
document
parentElement
: 
div.column.svelte-vt1mxs.gap
parentNode
: 
div.column.svelte-vt1mxs.gap
part
: 
DOMTokenList [value: '']
popoverTargetAction
: 
"toggle"
previousElementSibling
: 
div#component-3.row.svelte-hrj4a0.unequal-height
previousSibling
: 
text
scrollHeight
: 
40
scrollLeft
: 
0
scrollTop
: 
0
scrollWidth
: 
936
slot
: 
""
spellcheck
: 
true
style
: 
CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex
: 
0
tagName
: 
"BUTTON"
textContent
: 
" Submit Your Message"
title
: 
""
translate
: 
true
type
: 
"submit"
validationMessage
: 
""
validity
: 
ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
value
: 
""
virtualKeyboardPolicy
: 
""
willValidate
: 
true
writingSuggestions
: 
"true"
import os
import gradio as gr
import nltk
import numpy as np
import tflearn
import random
import json
import pickle
from nltk.tokenize import word_tokenize
from nltk.stem.lancaster import LancasterStemmer
from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
import googlemaps
import folium
import torch
import pandas as pd
from sklearn.preprocessing import LabelEncoder
from sklearn.model_selection import train_test_split
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier
from sklearn.naive_bayes import GaussianNB
from sklearn.metrics import accuracy_score

# Suppress TensorFlow warnings
os.environ["CUDA_VISIBLE_DEVICES"] = "-1"
os.environ["TF_CPP_MIN_LOG_LEVEL"] = "3"

# Download necessary NLTK resources
nltk.download("punkt")
stemmer = LancasterStemmer()

# Load intents and chatbot training data
with open("intents.json") as file:
    intents_data = json.load(file)

with open("data.pickle", "rb") as f:
    words, labels, training, output = pickle.load(f)

# Build the chatbot model
net = tflearn.input_data(shape=[None, len(training[0])])
net = tflearn.fully_connected(net, 8)
net = tflearn.fully_connected(net, 8)
net = tflearn.fully_connected(net, len(output[0]), activation="softmax")
net = tflearn.regression(net)
chatbot_model = tflearn.DNN(net)
chatbot_model.load("MentalHealthChatBotmodel.tflearn")

# Hugging Face sentiment and emotion models
tokenizer_sentiment = AutoTokenizer.from_pretrained("cardiffnlp/twitter-roberta-base-sentiment")
model_sentiment = AutoModelForSequenceClassification.from_pretrained("cardiffnlp/twitter-roberta-base-sentiment")
tokenizer_emotion = AutoTokenizer.from_pretrained("j-hartmann/emotion-english-distilroberta-base")
model_emotion = AutoModelForSequenceClassification.from_pretrained("j-hartmann/emotion-english-distilroberta-base")

# Google Maps API Client
gmaps = googlemaps.Client(key=os.getenv("GOOGLE_API_KEY"))

# Load the disease dataset
df_train = pd.read_csv("Training.csv")  # Change the file path as necessary
df_test = pd.read_csv("Testing.csv")  # Change the file path as necessary

# Encode diseases
disease_dict = {
    'Fungal infection': 0, 'Allergy': 1, 'GERD': 2, 'Chronic cholestasis': 3, 'Drug Reaction': 4,
    'Peptic ulcer disease': 5, 'AIDS': 6, 'Diabetes ': 7, 'Gastroenteritis': 8, 'Bronchial Asthma': 9,
    'Hypertension ': 10, 'Migraine': 11, 'Cervical spondylosis': 12, 'Paralysis (brain hemorrhage)': 13,
    'Jaundice': 14, 'Malaria': 15, 'Chicken pox': 16, 'Dengue': 17, 'Typhoid': 18, 'hepatitis A': 19,
    'Hepatitis B': 20, 'Hepatitis C': 21, 'Hepatitis D': 22, 'Hepatitis E': 23, 'Alcoholic hepatitis': 24,
    'Tuberculosis': 25, 'Common Cold': 26, 'Pneumonia': 27, 'Dimorphic hemorrhoids(piles)': 28,
    'Heart attack': 29, 'Varicose veins': 30, 'Hypothyroidism': 31, 'Hyperthyroidism': 32,
    'Hypoglycemia': 33, 'Osteoarthritis': 34, 'Arthritis': 35,
    '(vertigo) Paroxysmal Positional Vertigo': 36, 'Acne': 37, 'Urinary tract infection': 38,
    'Psoriasis': 39, 'Impetigo': 40
}

# Function to prepare data
def prepare_data(df):
    """Prepares data for training/testing."""
    X = df.iloc[:, :-1]  # Features
    y = df.iloc[:, -1]   # Target
    label_encoder = LabelEncoder()
    y_encoded = label_encoder.fit_transform(y)
    return X, y_encoded, label_encoder

# Preparing training and testing data
X_train, y_train, label_encoder_train = prepare_data(df_train)
X_test, y_test, label_encoder_test = prepare_data(df_test)

# Define the models
models = {
    "Decision Tree": DecisionTreeClassifier(),
    "Random Forest": RandomForestClassifier(),
    "Naive Bayes": GaussianNB()
}

# Train and evaluate models
trained_models = {}
for model_name, model_obj in models.items():
    model_obj.fit(X_train, y_train)  # Fit the model
    y_pred = model_obj.predict(X_test)  # Make predictions
    acc = accuracy_score(y_test, y_pred)  # Calculate accuracy
    trained_models[model_name] = {'model': model_obj, 'accuracy': acc}

# Helper Functions for Chatbot
def bag_of_words(s, words):
    """Convert user input to bag-of-words vector."""
    bag = [0] * len(words)
    s_words = word_tokenize(s)
    s_words = [stemmer.stem(word.lower()) for word in s_words if word.isalnum()]
    for se in s_words:
        for i, w in enumerate(words):
            if w == se:
                bag[i] = 1
    return np.array(bag)

def generate_chatbot_response(message, history):
    """Generate chatbot response and maintain conversation history."""
    history = history or []
    try:
        result = chatbot_model.predict([bag_of_words(message, words)])
        tag = labels[np.argmax(result)]
        response = "I'm sorry, I didn't understand that. 🤔"
        for intent in intents_data["intents"]:
            if intent["tag"] == tag:
                response = random.choice(intent["responses"])
                break
    except Exception as e:
        response = f"Error: {e}"
    history.append((message, response))
    return history, response

def analyze_sentiment(user_input):
    """Analyze sentiment and map to emojis."""
    inputs = tokenizer_sentiment(user_input, return_tensors="pt")
    with torch.no_grad():
        outputs = model_sentiment(**inputs)
    sentiment_class = torch.argmax(outputs.logits, dim=1).item()
    sentiment_map = ["Negative 😔", "Neutral 😐", "Positive 😊"]
    return f"Sentiment: {sentiment_map[sentiment_class]}"

def detect_emotion(user_input):
    """Detect emotions based on input."""
    pipe = pipeline("text-classification", model=model_emotion, tokenizer=tokenizer_emotion)
    result = pipe(user_input)
    emotion = result[0]["label"].lower().strip()
    emotion_map = {
        "joy": "Joy 😊",
        "anger": "Anger 😠",
        "sadness": "Sadness 😢",
        "fear": "Fear 😨",
        "surprise": "Surprise 😲",
        "neutral": "Neutral 😐",
    }
    return emotion_map.get(emotion, "Unknown 🤔"), emotion

def generate_suggestions(emotion):
    """Return relevant suggestions based on detected emotions."""
    emotion_key = emotion.lower()
    suggestions = {
        "joy": [
            ("Mindfulness Practices", "https://www.helpguide.org/mental-health/meditation/mindful-breathing-meditation"),
            ("Coping with Anxiety", "https://www.helpguide.org/mental-health/anxiety/tips-for-dealing-with-anxiety"),
            ("Emotional Wellness Toolkit", "https://www.nih.gov/health-information/emotional-wellness-toolkit"),
            ("Relaxation Video", "https://youtu.be/yGKKz185M5o"),
        ],
        "anger": [
            ("Emotional Wellness Toolkit", "https://www.nih.gov/health-information/emotional-wellness-toolkit"),
            ("Stress Management Tips", "https://www.health.harvard.edu/health-a-to-z"),
            ("Dealing with Anger", "https://www.helpguide.org/mental-health/anxiety/tips-for-dealing-with-anxiety"),
            ("Relaxation Video", "https://youtu.be/MIc299Flibs"),
        ],
        "fear": [
            ("Mindfulness Practices", "https://www.helpguide.org/mental-health/meditation/mindful-breathing-meditation"),
            ("Coping with Anxiety", "https://www.helpguide.org/mental-health/anxiety/tips-for-dealing-with-anxiety"),
            ("Emotional Wellness Toolkit", "https://www.nih.gov/health-information/emotional-wellness-toolkit"),
            ("Relaxation Video", "https://youtu.be/yGKKz185M5o"),
        ],
        "sadness": [
            ("Emotional Wellness Toolkit", "https://www.nih.gov/health-information/emotional-wellness-toolkit"),
            ("Dealing with Anxiety", "https://www.helpguide.org/mental-health/anxiety/tips-for-dealing-with-anxiety"),
            ("Relaxation Video", "https://youtu.be/-e-4Kx5px_I"),
        ],
        "surprise": [
            ("Managing Stress", "https://www.health.harvard.edu/health-a-to-z"),
            ("Coping Strategies", "https://www.helpguide.org/mental-health/anxiety/tips-for-dealing-with-anxiety"),
            ("Relaxation Video", "https://youtu.be/m1vaUGtyo-A"),
        ],
    }
    
    # Create a markdown string for clickable suggestions in a table format
    formatted_suggestions = ["### Suggestions"]
    formatted_suggestions.append(f"Since you’re feeling {emotion}, you might find these links particularly helpful. Don’t hesitate to explore:")
    formatted_suggestions.append("| Title | Link |")
    formatted_suggestions.append("|-------|------|")  # Table headers
    formatted_suggestions += [
        f"| {title} | [{link}]({link}) |" for title, link in suggestions.get(emotion_key, [("No specific suggestions available.", "#")])
    ]

    return "\n".join(formatted_suggestions)

def get_health_professionals_and_map(location, query):
    """Search nearby healthcare professionals using Google Maps API."""
    try:
        if not location or not query:
            return [], ""  # Return empty list if inputs are missing

        geo_location = gmaps.geocode(location)
        if geo_location:
            lat, lng = geo_location[0]["geometry"]["location"].values()
            places_result = gmaps.places_nearby(location=(lat, lng), radius=10000, keyword=query)["results"]
            professionals = []
            map_ = folium.Map(location=(lat, lng), zoom_start=13)
            for place in places_result:
                professionals.append([place['name'], place.get('vicinity', 'No address provided')])
                folium.Marker(
                    location=[place["geometry"]["location"]["lat"], place["geometry"]["location"]["lng"]],
                    popup=f"{place['name']}"
                ).add_to(map_)
            return professionals, map_._repr_html_()

        return [], ""  # Return empty list if no professionals found
    except Exception as e:
        return [], ""  # Return empty list on exception

# Main Application Logic for Chatbot
def app_function_chatbot(user_input, location, query, history):
    chatbot_history, _ = generate_chatbot_response(user_input, history)
    sentiment_result = analyze_sentiment(user_input)
    emotion_result, cleaned_emotion = detect_emotion(user_input)
    suggestions = generate_suggestions(cleaned_emotion)
    professionals, map_html = get_health_professionals_and_map(location, query)
    return chatbot_history, sentiment_result, emotion_result, suggestions, professionals, map_html

# Disease Prediction Logic
# def predict_disease(symptoms):
#     """Predict disease based on input symptoms."""
#     valid_symptoms = [s for s in symptoms if s is not None]
#     if len(valid_symptoms) < 3:
#         return "Please select at least 3 symptoms for a better prediction."
#     input_test = np.zeros(len(X_train.columns))  # Create an array for feature input
#     for symptom in symptoms:
#         if symptom in X_train.columns:
#             input_test[X_train.columns.get_loc(symptom)] = 1
#     predictions = {}
#     for model_name, info in trained_models.items():
#         prediction = info['model'].predict([input_test])[0]
#         predicted_disease = label_encoder_train.inverse_transform([prediction])[0]
#         predictions[model_name] = predicted_disease

#     # Create a Markdown table for displaying predictions
#     markdown_output = ["### Predicted Diseases"]
#     markdown_output.append("| Model | Predicted Disease |")
#     markdown_output.append("|-------|------------------|")  # Table headers
#     for model_name, disease in predictions.items():
#         markdown_output.append(f"| {model_name} | {disease} |")
    
#     return "\n".join(markdown_output)
def predict_disease(symptoms):
    """Predict disease based on input symptoms."""
    # Filter out None values
    valid_symptoms = [s for s in symptoms if s is not None]
    
    # Ensure at least 3 symptoms are selected
    if len(valid_symptoms) < 3:
        return "Please select at least 3 symptoms for a better prediction."
    
    input_test = np.zeros(len(X_train.columns))  # Create an array for feature input
    for symptom in valid_symptoms:
        if symptom in X_train.columns:
            input_test[X_train.columns.get_loc(symptom)] = 1
    
    predictions = {}
    for model_name, info in trained_models.items():
        prediction = info['model'].predict([input_test])[0]
        predicted_disease = label_encoder_train.inverse_transform([prediction])[0]
        predictions[model_name] = predicted_disease

    # Create a Markdown table for displaying predictions
    markdown_output = ["### Predicted Diseases"]
    markdown_output.append("| Model | Predicted Disease |")
    markdown_output.append("|-------|------------------|")  # Table headers
    for model_name, disease in predictions.items():
        markdown_output.append(f"| {model_name} | {disease} |")
    
    return "\n".join(markdown_output)


from gradio.components import HTML

# Custom CSS for styling
custom_css = """
/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* General Body Styling */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f4f7; /* Light background for better contrast */
}
/* Header Styling */
h1, h2, h3, h4 {
    font-weight: bold; /* Make all headings bold */
    color: #3c6487; /* Theme color for headings */
}
h1 {
    font-size: 2.5rem; /* Bigger header size */
    background: linear-gradient(135deg, #3c6487, #355f7a); /* Gradient using your color */
    color: #ffffff;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    margin-bottom: 20px; /* Spacing below the header */
}
/* Tab Button Styling */
button[role="tab"] {
    background-color: transparent; /* Make background transparent */
    color: #3c6487; /* Text color matching the theme */
    border: none; /* Remove default button border */
    padding: 10px 15px; /* Padding for buttons */
    font-size: 1.2rem; /* Font size for tab buttons */
    cursor: pointer; /* Pointer on hover */
    text-decoration: underline;
}
button[role="tab"]:hover {
    color: #ae1c93; /* Change color on hover */
}
/* Add a custom underline effect */
button[role="tab"].selected::after {
    content: ""; /* Empty content for underline */
    display: block;
    width: 100%; /* Full width */
    height: 3px; /* Height of the underline */
    background: #3c6487; /* Underline color */
    position: absolute;
    bottom: -5px; /* Position it below the text */
    left: 0;
}
/* Input and Textarea Styling */
textarea, input {
    background: white; /* Input background */
    color: black; /* Text color */
    border: 2px solid #3c6487; /* Matching border color */
    padding: 10px;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for inputs */
}
textarea:focus, input:focus {
    border-color: #ae1c93; /* Highlight border color on focus */
    box-shadow: 0 0 5px rgba(174, 28, 147, 0.5); /* Shadow on focus */
}
/* Button Styling */
.gr-button {
    background-color: #3c6487; /* Button background */
    color: white;
    border-radius: 8px;
    padding: 10px 20px; /* Adjusted padding */
    font-size: 16px; /* Larger font size for buttons */
    border: none; /* No border */
    cursor: pointer; /* Pointer on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
}
.gr-button:hover {
    background-color: #ae1c93; /* Change button color on hover */
}
.gr-button:active {
    background-color: #8f167b; /* Even darker shade on active */
}
/* DataFrame Container Styling */
.df-container {
    background: white; /* Background for data frames */
    color: black; /* Text color */
    border: 2px solid #3c6487; /* Matching border color for data frames */
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    max-height: 400px; /* Maximum height for scrolling */
    overflow-y: auto; /* Enable scrolling */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for data frame */
}
/* Suggestions Markdown Formatting */
.markdown {
    padding: 15px; /* Padding for Markdown sections */
    border-radius: 10px; /* Round corners for better appearance */
    background-color: #eaeff1; /* Light background for suggestions */
    border: 1px solid #3c6487; /* Border to distinguish */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
}
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* Smaller font size for smaller screens */
        padding: 10px;
    }
    .gr-button {
        font-size: 0.9rem; /* Adjusted size for mobile */
        padding: 8px 16px; /* Adjust padding for mobile */
        width: auto; /* Maintain auto width */
    }
    textarea, input {
        width: 100%; /* Full width for inputs */
        margin-bottom: 10px; /* Spacing between inputs */
    }
}
"""

# Gradio Application Interface
with gr.Blocks(css=custom_css) as app:
    gr.HTML("<h1>🌟 Well-Being Companion</h1>")
    
    with gr.Tab("Well-Being Chatbot"):
        with gr.Row():
            user_input = gr.Textbox(label="Please Enter Your Message Here", placeholder="Type your message here...", max_lines=3)
            location = gr.Textbox(label="Please Enter Your Current Location Here", placeholder="E.g., Honolulu", max_lines=1)
            query = gr.Textbox(label="Search Health Professionals Nearby", placeholder="E.g., Health Professionals", max_lines=1)
        
        submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", icon="fa-paper-plane")
        
        chatbot = gr.Chatbot(label="Chat History", show_label=True)
        sentiment = gr.Textbox(label="Detected Sentiment", show_label=True)
        emotion = gr.Textbox(label="Detected Emotion", show_label=True)
        
        suggestions_markdown = gr.Markdown(label="Suggestions")
        professionals = gr.DataFrame(label="Nearby Health Professionals", headers=["Name", "Address"])
        map_html = gr.HTML(label="Interactive Map")

        submit_chatbot.click(
            app_function_chatbot,
            inputs=[user_input, location, query, chatbot],
            outputs=[chatbot, sentiment, emotion, suggestions_markdown, professionals, map_html],
        )

    with gr.Tab("Disease Prediction"):
        symptom1 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 1", value=None)
        symptom2 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 2", value=None)
        symptom3 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 3", value=None)
        symptom4 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 4", value=None)
        symptom5 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 5", value=None)
    
        submit_disease = gr.Button(value="Predict Disease", variant="primary", icon="fa-stethoscope")
    
        disease_prediction_result = gr.Markdown(label="Predicted Diseases")

        submit_disease.click(
            lambda symptom1, symptom2, symptom3, symptom4, symptom5: predict_disease(
                [symptom1, symptom2, symptom3, symptom4, symptom5]),
            inputs=[symptom1, symptom2, symptom3, symptom4, symptom5],
            outputs=disease_prediction_result
        )


# Launch the Gradio application
app.launch()   I want my buttons to be same as in Well Being Companion , make the button size upto the length of the text only. Need Blue underline with offset under these Well-Being Chatbot
Disease Prediction, on hover change their states accordingly. Make the buttons on hover  light blue gradient .