refactor: updated application

app.py

@@ -1,240 +1,27 @@
-import json
-from typing import List, Optional
+import sys
 
-import gradio as gr
-from gradio.components import Markdown
-
-from src.dto.dto import ExplanationGranularity, ExplanationDto
-from src.utils.registry import EXPLAINERS, MODELS, PERTURBERS, COMPARATORS
-from src.utils.segregate import PercentileBasedSegregator
+from src.ui.explainer_ui import MockExplainerUI
 from src.utils.visualizer import Visualizer
 
 
-class MockExplainerUI:
-    def __init__(
-        self,
-        logo_path: str,
-        css_path: str,
-        visualizer: Visualizer,
-        window_title: str,
-        title: str,
-        examples: Optional[List[str]] = None,
-    ):
-        self.__logo_path = logo_path
-        self.__css_path = css_path
-        self.__examples = examples
-        self.__window_title = window_title
-        self.__title = title
-        self.__visualizer = visualizer
-
-        self.app: gr.Blocks = self.build_app()
-
-    def build_app(self):
-        with gr.Blocks(
-            theme=gr.themes.Monochrome().set(
-                button_primary_background_fill="#009374",
-                button_primary_background_fill_hover="#009374C4",
-                checkbox_label_background_fill_selected="#028A6EFF",
-            ),
-            css=self.__css_path,
-            title=self.__window_title,
-        ) as demo:
-            self.__build_app_title()
-            (
-                user_input,
-                system_response,
-                granularity,
-                upper_percentile,
-                middle_percentile,
-                lower_percentile,
-                explainer_name,
-                model_name,
-                perturber_name,
-                comparator_name,
-                generator_vis,
-                submit_btn,
-            ) = self.__build_chat_and_explain()
-
-            submit_btn.click(
-                fn=self.run,
-                inputs=[
-                    user_input,
-                    granularity,
-                    upper_percentile,
-                    middle_percentile,
-                    lower_percentile,
-                    explainer_name,
-                    model_name,
-                    perturber_name,
-                    comparator_name,
-                ],
-                outputs=[system_response, generator_vis],
-            )
-
-        return demo
-
-    def run(
-        self,
-        user_input: str,
-        granularity: ExplanationGranularity,
-        upper_percentile: str,
-        middle_percentile: str,
-        lower_percentile: str,
-        explainer_name: str,
-        model_name: str,
-        perturber_name: str,
-        comparator_name: str,
-    ):
-        print(user_input)
-        with open(
-            "data/en_q_001.json",
-            "r",
-        ) as f:
-            data = json.load(f)
-        data = data[0]
-        explanation_dto = ExplanationDto.parse_obj(data)
-        user_input = explanation_dto.input_text
-
-        system_response = explanation_dto.output_text
-        generator_vis = self.__visualize_explanations(
-            user_input=user_input,
-            system_response=system_response,
-            generator_explanations=explanation_dto,
-            upper_percentile=int(upper_percentile),
-            middle_percentile=int(middle_percentile),
-            lower_percentile=int(lower_percentile),
-        )
-        return system_response, generator_vis
-
-    def __build_app_title(self):
-        with gr.Row():
-            with gr.Column(min_width=50, scale=1):
-                gr.Image(
-                    value=self.__logo_path,
-                    width=50,
-                    height=50,
-                    show_download_button=False,
-                    container=False,
-                )
-            with gr.Column(scale=2):
-                Markdown(
-                    f'<p style="text-align: left; font-size:200%; font-weight: bold"'
-                    f">{self.__title}"
-                    f"</p>"
-                )
-
-    def __build_chat_and_explain(self):
-        with gr.Row():
-            with gr.Column(scale=2):
-                gr.Textbox(
-                    label="Attention!",
-                    value="This is a demo version of the tool! For running the full version, please follow the instructions in ...",
-                    container=False,
-                    interactive=False,
-                )
-
-        with gr.Row():
-            with gr.Column(scale=2):
-                user_input = gr.Radio(
-                    # placeholder="Type your question here and press Enter.",
-                    label="Question",
-                    container=True,
-                    choices=["Question 1 EN", "Question 1 DE"],
-                )
-            with gr.Column(scale=1):
-                granularity = gr.Radio(
-                    choices=[e for e in ExplanationGranularity],
-                    value=ExplanationGranularity.SENTENCE_LEVEL,
-                    label="Explanation Granularity",
-                )
-
-        with gr.Accordion(label="Settings", open=False, elem_id="accordion"):
-            with gr.Row(variant="compact"):
-                explainer_name = gr.Radio(
-                    label="Explainer",
-                    choices=list(EXPLAINERS.keys()),
-                    value=list(EXPLAINERS.keys())[0],
-                    container=True,
-                )
-            with gr.Row(variant="compact"):
-                upper_percentile = gr.Textbox(label="Upper", value="85", container=True)
-                middle_percentile = gr.Textbox(
-                    label="Middle", value="75", container=True
-                )
-                lower_percentile = gr.Textbox(label="Lower", value="10", container=True)
-
-            with gr.Row(variant="compact"):
-                model_name = gr.Radio(
-                    label="Model",
-                    choices=list(MODELS.keys()),
-                    value=list(MODELS.keys())[0],
-                    container=True,
-                )
-            with gr.Row(variant="compact"):
-                perturber_name = gr.Radio(
-                    label="Perturber",
-                    choices=list(PERTURBERS.keys()),
-                    value=list(PERTURBERS.keys())[0],
-                    container=True,
-                )
-            with gr.Row(variant="compact"):
-                comparator_name = gr.Radio(
-                    label="Comparator",
-                    choices=list(COMPARATORS.keys()),
-                    value=list(COMPARATORS.keys())[0],
-                    container=True,
-                )
-        with gr.Row(variant="compact"):
-            # passing "elem_id" to use a custom style for the component
-            # in the CSS passed.
-            submit_btn = gr.Button(
-                value="🛠 Submit",
-                variant="secondary",
-                elem_id="button",
-                interactive=True,
-            )
-
-        with gr.Row():
-            generator_vis = gr.HTML(label="Explanations")
+def load_visualizer() -> Visualizer:
+    visualizer = Visualizer(show_mid_features=True, show_low_features=True)
+    return visualizer
 
-        with gr.Row():
-            system_response = gr.Textbox(
-                label="System Response",
-                container=True,
-                interactive=False,
-            )
 
-        return (
-            user_input,
-            system_response,
-            granularity,
-            upper_percentile,
-            middle_percentile,
-            lower_percentile,
-            explainer_name,
-            model_name,
-            perturber_name,
-            comparator_name,
-            generator_vis,
-            submit_btn,
-        )
+if __name__ == "__main__":
+    interface = MockExplainerUI(
+        logo_path="src/ui/images/iais.svg",
+        css_path="src/ui/css/demo.css",
+        visualizer=load_visualizer(),
+        window_title="RAG-Ex",
+        title="✳️ RAG-Ex: Towards Generic Explainability",
+    )
+    app = interface.build_app()
+    app.queue()
 
-    def __visualize_explanations(
-        self,
-        user_input: str,
-        system_response: Optional[str],
-        generator_explanations: ExplanationDto,
-        upper_percentile: Optional[int],
-        middle_percentile: Optional[int],
-        lower_percentile: Optional[int],
-    ) -> str:
-        segregator = PercentileBasedSegregator(
-            upper_bound_percentile=upper_percentile,
-            middle_bound_percentile=middle_percentile,
-            lower_bound_percentile=lower_percentile,
-        )
-        return self.__visualizer.visualize(
-            segregator=segregator,
-            explanations=generator_explanations,
-            output_from_explanations=user_input,
-        )
+    platform = sys.platform
+    print("Platform: ", platform)
+    host = "127.0.0.1" if "win" in platform else "0.0.0.0"
+    port = 8001
+    app.launch(server_name=host, server_port=port)

requirements.txt

@@ -1,3 +1,3 @@
 gradio==4.17.0
-pydantic~=1.8.2
+pydantic~=2.6.1
 numpy~=1.22.4

src/ui/css/demo.css

@@ -0,0 +1,211 @@
+#button {background-color: #009374}
+#accordion {color: #0066b1}
+#examples {color: #000000}
+footer{display:none !important}
+
+
+.dark {
+  --fhg-green: #009374;
+  --fhg-green-light: rgba(0, 147, 116, 0.77);
+  --primary-50: #fafafa;
+  --primary-100: #f5f5f5;
+  --primary-200: #e5e5e5;
+  --primary-300: #d4d4d4;
+  --primary-400: #a3a3a3;
+  --primary-500: #737373;
+  --primary-600: #525252;
+  --primary-700: #404040;
+  --primary-800: #262626;
+  --primary-900: #171717;
+  --primary-950: #0f0f0f;
+  --secondary-50: #fafafa;
+  --secondary-100: #f5f5f5;
+  --secondary-200: #e5e5e5;
+  --secondary-300: #d4d4d4;
+  --secondary-400: #a3a3a3;
+  --secondary-500: #737373;
+  --secondary-600: #525252;
+  --secondary-700: #404040;
+  --secondary-800: #262626;
+  --secondary-900: #171717;
+  --secondary-950: #0f0f0f;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-300: #d4d4d4;
+  --neutral-400: #a3a3a3;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0f0f0f;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 6px;
+  --spacing-md: 8px;
+  --spacing-lg: 10px;
+  --spacing-xl: 14px;
+  --spacing-xxl: 28px;
+  --radius-xxs: 0px;
+  --radius-xs: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-xxl: 0px;
+  --text-xxs: 9px;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 22px;
+  --text-xxl: 26px;
+  --font: 'Quicksand', '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-900);
+  --body-text-size: var(--text-md);
+  --body-text-weight: 400;
+  --embed-radius: var(--radius-lg);
+  --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-700);
+  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
+  --shadow-drop-lg: 0 1px 4px 0 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: 0px;
+  --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(--body-text-color);
+  --block-label-margin: 0;
+  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+  --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
+  --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
+  --block-label-text-size: var(--text-md);
+  --block-label-text-weight: 600;
+  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+  --block-radius: var(--radius-lg);
+  --block-shadow: var(--shadow-drop-lg);
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-text-color: var(--body-text-color);
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 600;
+  --container-radius: var(--radius-lg);
+  --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(--border-color-accent);
+  --chatbot-code-background-color: var(--neutral-100);
+  --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(--neutral-600);
+  --checkbox-border-color: var(--neutral-300);
+  --checkbox-border-color-focus: var(--secondary-500);
+  --checkbox-border-color-hover: var(--neutral-300);
+  --checkbox-border-color-selected: var(--secondary-600);
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-border-width: var(--input-border-width);
+  --checkbox-label-background-fill: var(--button-primary-background-fill);
+  --checkbox-label-background-fill-hover: var(--button-primary-background-fill-hover);
+  --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-width: var(--input-border-width);
+  --checkbox-label-gap: var(--spacing-lg);
+  --checkbox-label-padding: 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(--button-primary-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: var(--neutral-100);
+  --input-background-fill-focus: var(--secondary-500);
+  --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: 0px;
+  --input-padding: var(--spacing-xl);
+  --input-placeholder-color: var(--neutral-400);
+  --input-radius: var(--radius-lg);
+  --input-shadow: none;
+  --input-shadow-focus: var(--input-shadow);
+  --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(--neutral-900);
+  --stat-background-fill: var(--primary-300);
+  --table-border-color: var(--neutral-300);
+  --table-even-background-fill: white;
+  --table-odd-background-fill: var(--neutral-50);
+  --table-radius: var(--radius-lg);
+  --table-row-focus: var(--color-accent-soft);
+  --button-border-width: var(--input-border-width);
+  --button-cancel-background-fill: var(--button-primary-background-fill);
+  --button-cancel-background-fill-hover: var(--button-primary-background-fill-hover);
+  --button-cancel-border-color: var(--button-secondary-border-color);
+  --button-cancel-border-color-hover: var(--button-cancel-border-color);
+  --button-cancel-text-color: var(--button-primary-text-color);
+  --button-cancel-text-color-hover: var(--button-cancel-text-color);
+  --button-large-padding: var(--spacing-lg);
+  --button-large-radius: var(--radius-lg);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 600;
+  --button-primary-background-fill: #028a6e;
+  --button-primary-background-fill-hover: rgba(0, 147, 116, 0.77);
+  --button-primary-border-color: var(--primary-200);
+  --button-primary-border-color-hover: var(--button-primary-border-color);
+  --button-primary-text-color: white;
+  --button-primary-text-color-hover: var(--button-primary-text-color);
+  --button-secondary-background-fill: var(--button-primary-background-fill);
+  --button-secondary-background-fill-hover: var(--button-primary-background-fill-hover);
+  --button-secondary-border-color: var(--neutral-200);
+  --button-secondary-border-color-hover: var(--button-secondary-border-color);
+  --button-secondary-text-color: var(--button-primary-text-color);
+  --button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --button-shadow: none;
+  --button-shadow-active: none;
+  --button-shadow-hover: none;
+  --button-small-padding: var(--spacing-sm);
+  --button-small-radius: var(--radius-lg);
+  --button-small-text-size: var(--text-md);
+  --button-small-text-weight: 400;
+  --button-transition: background-color 0.2s ease;
+}

src/ui/explainer_ui.py

@@ -0,0 +1,240 @@
+import json
+from typing import List, Optional
+
+import gradio as gr
+from gradio.components import Markdown
+
+from src.dto.dto import ExplanationGranularity, ExplanationDto
+from src.utils.registry import EXPLAINERS, MODELS, PERTURBERS, COMPARATORS
+from src.utils.segregate import PercentileBasedSegregator
+from src.utils.visualizer import Visualizer
+
+
+class MockExplainerUI:
+    def __init__(
+        self,
+        logo_path: str,
+        css_path: str,
+        visualizer: Visualizer,
+        window_title: str,
+        title: str,
+        examples: Optional[List[str]] = None,
+    ):
+        self.__logo_path = logo_path
+        self.__css_path = css_path
+        self.__examples = examples
+        self.__window_title = window_title
+        self.__title = title
+        self.__visualizer = visualizer
+
+        self.app: gr.Blocks = self.build_app()
+
+    def build_app(self):
+        with gr.Blocks(
+            theme=gr.themes.Monochrome().set(
+                button_primary_background_fill="#009374",
+                button_primary_background_fill_hover="#009374C4",
+                checkbox_label_background_fill_selected="#028A6EFF",
+            ),
+            css=self.__css_path,
+            title=self.__window_title,
+        ) as demo:
+            self.__build_app_title()
+            (
+                user_input,
+                system_response,
+                granularity,
+                upper_percentile,
+                middle_percentile,
+                lower_percentile,
+                explainer_name,
+                model_name,
+                perturber_name,
+                comparator_name,
+                generator_vis,
+                submit_btn,
+            ) = self.__build_chat_and_explain()
+
+            submit_btn.click(
+                fn=self.run,
+                inputs=[
+                    user_input,
+                    granularity,
+                    upper_percentile,
+                    middle_percentile,
+                    lower_percentile,
+                    explainer_name,
+                    model_name,
+                    perturber_name,
+                    comparator_name,
+                ],
+                outputs=[system_response, generator_vis],
+            )
+
+        return demo
+
+    def run(
+        self,
+        user_input: str,
+        granularity: ExplanationGranularity,
+        upper_percentile: str,
+        middle_percentile: str,
+        lower_percentile: str,
+        explainer_name: str,
+        model_name: str,
+        perturber_name: str,
+        comparator_name: str,
+    ):
+        print(user_input)
+        with open(
+            "data/en_q_001.json",
+            "r",
+        ) as f:
+            data = json.load(f)
+        data = data[0]
+        explanation_dto = ExplanationDto.parse_obj(data)
+        user_input = explanation_dto.input_text
+
+        system_response = explanation_dto.output_text
+        generator_vis = self.__visualize_explanations(
+            user_input=user_input,
+            system_response=system_response,
+            generator_explanations=explanation_dto,
+            upper_percentile=int(upper_percentile),
+            middle_percentile=int(middle_percentile),
+            lower_percentile=int(lower_percentile),
+        )
+        return system_response, generator_vis
+
+    def __build_app_title(self):
+        with gr.Row():
+            with gr.Column(min_width=50, scale=1):
+                gr.Image(
+                    value=self.__logo_path,
+                    width=50,
+                    height=50,
+                    show_download_button=False,
+                    container=False,
+                )
+            with gr.Column(scale=2):
+                Markdown(
+                    f'<p style="text-align: left; font-size:200%; font-weight: bold"'
+                    f">{self.__title}"
+                    f"</p>"
+                )
+
+    def __build_chat_and_explain(self):
+        with gr.Row():
+            with gr.Column(scale=2):
+                gr.Textbox(
+                    label="Attention!",
+                    value="This is a demo version of the tool! For running the full version, please follow the instructions in ...",
+                    container=False,
+                    interactive=False,
+                )
+
+        with gr.Row():
+            with gr.Column(scale=2):
+                user_input = gr.Radio(
+                    # placeholder="Type your question here and press Enter.",
+                    label="Question",
+                    container=True,
+                    choices=["Question 1 EN", "Question 1 DE"],
+                )
+            with gr.Column(scale=1):
+                granularity = gr.Radio(
+                    choices=[e for e in ExplanationGranularity],
+                    value=ExplanationGranularity.SENTENCE_LEVEL,
+                    label="Explanation Granularity",
+                )
+
+        with gr.Accordion(label="Settings", open=False, elem_id="accordion"):
+            with gr.Row(variant="compact"):
+                explainer_name = gr.Radio(
+                    label="Explainer",
+                    choices=list(EXPLAINERS.keys()),
+                    value=list(EXPLAINERS.keys())[0],
+                    container=True,
+                )
+            with gr.Row(variant="compact"):
+                upper_percentile = gr.Textbox(label="Upper", value="85", container=True)
+                middle_percentile = gr.Textbox(
+                    label="Middle", value="75", container=True
+                )
+                lower_percentile = gr.Textbox(label="Lower", value="10", container=True)
+
+            with gr.Row(variant="compact"):
+                model_name = gr.Radio(
+                    label="Model",
+                    choices=list(MODELS.keys()),
+                    value=list(MODELS.keys())[0],
+                    container=True,
+                )
+            with gr.Row(variant="compact"):
+                perturber_name = gr.Radio(
+                    label="Perturber",
+                    choices=list(PERTURBERS.keys()),
+                    value=list(PERTURBERS.keys())[0],
+                    container=True,
+                )
+            with gr.Row(variant="compact"):
+                comparator_name = gr.Radio(
+                    label="Comparator",
+                    choices=list(COMPARATORS.keys()),
+                    value=list(COMPARATORS.keys())[0],
+                    container=True,
+                )
+        with gr.Row(variant="compact"):
+            # passing "elem_id" to use a custom style for the component
+            # in the CSS passed.
+            submit_btn = gr.Button(
+                value="🛠 Submit",
+                variant="secondary",
+                elem_id="button",
+                interactive=True,
+            )
+
+        with gr.Row():
+            generator_vis = gr.HTML(label="Explanations")
+
+        with gr.Row():
+            system_response = gr.Textbox(
+                label="System Response",
+                container=True,
+                interactive=False,
+            )
+
+        return (
+            user_input,
+            system_response,
+            granularity,
+            upper_percentile,
+            middle_percentile,
+            lower_percentile,
+            explainer_name,
+            model_name,
+            perturber_name,
+            comparator_name,
+            generator_vis,
+            submit_btn,
+        )
+
+    def __visualize_explanations(
+        self,
+        user_input: str,
+        system_response: Optional[str],
+        generator_explanations: ExplanationDto,
+        upper_percentile: Optional[int],
+        middle_percentile: Optional[int],
+        lower_percentile: Optional[int],
+    ) -> str:
+        segregator = PercentileBasedSegregator(
+            upper_bound_percentile=upper_percentile,
+            middle_bound_percentile=middle_percentile,
+            lower_bound_percentile=lower_percentile,
+        )
+        return self.__visualizer.visualize(
+            segregator=segregator,
+            explanations=generator_explanations,
+            output_from_explanations=user_input,
+        )

src/utils/visualizer.py

@@ -1,5 +1,5 @@
-from xlm.demo.utils.segregate import Segregator
-from xlm.dto.dto import ExplanationDto
+from src.utils.segregate import Segregator
+from src.dto.dto import ExplanationDto
 
 
 UPPER_COLOR = "#D4EFDF"  # green