add warning component

text_classification_ui_helpers.py

@@ -12,7 +12,7 @@ from io_utils import (get_yaml_path, read_column_mapping, save_job_to_pipe,
                       write_column_mapping, write_log_to_user_file)
 from text_classification import (check_model, get_example_prediction,
                                  get_labels_and_features_from_dataset)
-from wordings import CONFIRM_MAPPING_DETAILS_FAIL_RAW
+from wordings import CONFIRM_MAPPING_DETAILS_FAIL_RAW, MAPPING_STYLED_ERROR_WARNING
 
 MAX_LABELS = 20
 MAX_FEATURES = 20
@@ -133,7 +133,7 @@ def check_model_and_show_prediction(
     if not isinstance(ds_labels, list) or not isinstance(ds_features, list):
         # gr.Warning(CONFIRM_MAPPING_DETAILS_FAIL_RAW)
         return (
-            gr.update(visible=False),
+            gr.update(value=MAPPING_STYLED_ERROR_WARNING, visible=True),
             gr.update(visible=False),
             gr.update(visible=False, open=False),
             *dropdown_placement,
@@ -151,9 +151,8 @@ def check_model_and_show_prediction(
         collections.Counter(model_id2label.values()) != collections.Counter(ds_labels)
         or ds_features[0] != "text"
     ):
-        gr.Warning(CONFIRM_MAPPING_DETAILS_FAIL_RAW)
         return (
-            gr.update(visible=False),
+            gr.update(value=MAPPING_STYLED_ERROR_WARNING, visible=True),
             gr.update(visible=False),
             gr.update(visible=True, open=True),
             *column_mappings,

wordings.py

@@ -27,3 +27,9 @@ PREDICTION_SAMPLE_MD = """
                         </h1>
                         Here is a sample prediction from your model based on your dataset.
                         """
+
+MAPPING_STYLED_ERROR_WARNING = """
+                        <h3 style="text-align: center;color: coral; background-color: #fff0f3; border-radius: 8px; padding: 10px; ">
+                        Sorry, we cannot auto-align the labels/features of your dataset and model. Please double check.
+                        </h3>
+                        """