Update UI

app.py

@@ -31,11 +31,24 @@ css = """
     align-items: center;
     transition: var(--button-transition);
     box-shadow: var(--button-shadow);
-    text-align: center
+    text-align: center;
+    cursor: pointer;
+}
+
+.a_custom:hover {
+    border-color: var(--button-primary-border-color-hover);
+    background: var(--button-primary-background-fill-hover);
+    color: var(--button-primary-text-color-hover);
 }
+
 .a_custom a {
     text-decoration: none;
     color: white;
+    display: block;
+}
+
+.dashed_row {
+    border: 1px dashed #60a5fa;
 }
 """
 
@@ -44,6 +57,10 @@ def centered_column():
     return gr.Column(elem_classes=["container"])
 
 
+def dashed_row():
+    return gr.Row(elem_classes=["dashed_row"])
+
+
 def should_login_to_hf_model(model_id: str):
     return model_id == gemma.name or model_id == llama.name
 
@@ -213,21 +230,47 @@ def generate_code(components: dict[Component, Any]):
 
 with gr.Blocks(css=css, theme=gr.themes.Soft(text_size='lg', font=["monospace"],
                                              primary_hue=gr.themes.colors.blue)) as demo:
-    gr.Label("UI-Guided LLM FineTuning Jupyter Notebook Generator 🛠️🧠", show_label=False)
-    gr.Markdown(
-        'Generating a **Jupyter Notebook file (.ipynb)** 📔⚙️ for **finetuning** a Large Language Model (**LLM**) '
-        '🎚️🧠 on a chosen dataset (**ChatML Format**) and configured parameters, guided by an intuitive **User Interface (UI)** 👆💻.',
-        elem_classes=["center_text"])
+    gr.Label("UI-Guided LLM Fine-Tuning Jupyter Notebook Generator 🛠️🧠", show_label=False)
+
+    gr.Markdown('''
+            This space generates a **Jupyter Notebook file (.ipynb)** 📔⚙️ that guides you through the 
+            entire process of **supervised fine-tuning** of a raw Large Language Model (**LLM**) 🧠 on a chosen dataset in 
+            the **Conversational format**. The process is facilitated by an intuitive **User Interface (UI)** 👆💻:
+            ''', elem_classes=["center_text"])
+    with dashed_row():
+        with centered_column():
+            with gr.Accordion("1. No Coding Required", open=False):
+                gr.Markdown("The UI guides you through the entire process, eliminating the need for manual coding.")
+            with gr.Accordion("2. Customizable Parameters", open=False):
+                gr.Markdown(
+                    "You can customize the most commonly used parameters for supervised fine-tuning to suit your needs.")
+        with centered_column():
+            with gr.Accordion("3. Comprehensive Notebook", open=False):
+                gr.Markdown("The generated .ipynb contains all steps, from installing libraries and writing a "
+                            "README.md, "
+                            "to pushing the final model to the Hugging Face Hub.")
+            with gr.Accordion("4. Preview Before Download", open=False):
+                gr.Markdown("You can preview the generated .ipynb before downloading it to ensure it "
+                            "meets "
+                            "your requirements.")
+        with centered_column():
+            with gr.Accordion("5. User-Friendly", open=False):
+                gr.Markdown("The UI is designed to be easy to use and understand, making the fine-tuning process "
+                            "accessible "
+                            "to everyone.")
+            with gr.Accordion("6. Open-Source", open=False):
+                gr.Markdown(
+                    "This space is open source, so you can collaborate to improve it and make it more powerful.")
 
     all_components: Set[Component] = set()
 
-    gr.HTML("<h2 style='text-align: center;'>LLM 🧠</h2>")
+    gr.HTML("<h2 style='text-align: center;'>Model 🧠</h2>")
     with gr.Row():
         model_selection = gr.Dropdown(
             [model.name for model in models],
             elem_id=MODEL_SELECTION_ID,
-            label="Select a Large Language Model (LLM)",
-            info="Select a Large Language Model (LLM) to finetune using the SFTTrainer."
+            label="Select a raw LLM",
+            info="Select a raw Large Language Model (LLM) to fine-tune."
         )
         version_selection = gr.Dropdown(
             choices=[], label="Select a Model Version 🔄", info="", visible=False, elem_id=MODEL_VERSION_SELECTION_ID

utils/components_creator.py

@@ -51,12 +51,12 @@ def add_quantization_components1() -> Set[Component]:
 
 
 def add_dataset_components() -> Set[Component]:
-    dataset_selection = gr.Dropdown(
-        [dt.path for dt in ft_datasets],
-        elem_id=DATASET_SELECTION_ID,
-        label="Select a Dataset",
-        info="Select a dataset for finetuning the model."
-    )
+    dataset_selection = gr.Dropdown([dt.path for dt in ft_datasets],
+                                    elem_id=DATASET_SELECTION_ID,
+                                    label="Select a Dataset",
+                                    info="Choose a dataset to finetune the model in the ChatML format."
+                                    )
+
     seed = gr.Slider(0, 256, step=1, value=42, elem_id=DATASET_SHUFFLING_SEED, label="Random Seed",
                      info="Set a random seed for shuffling the dataset.", interactive=True)
 
@@ -170,7 +170,7 @@ def add_training_args_3() -> Set[Component]:
 def add_outputs() -> (Component, Component):
     output_dir = gr.Textbox(interactive=True,
                             label="output_dir",
-                            info='The output directory where the model predictions and checkpoints will be written.',
+                            info='The output directory where the model and checkpoints will be saved.',
                             elem_id=OUTPUT_DIR_ID)
 
     push_to_hub = gr.Checkbox(label="push_to_hub", value=False, interactive=True,