better way to manage JS and CSS

LLaMA_LoRA.ipynb

@@ -324,9 +324,10 @@
       "cell_type": "code",
       "source": [
         "import gradio as gr\n",
-        "from llama_lora.llama_lora.ui.main_page import main_page, get_page_title, main_page_custom_css\n",
+        "from llama_lora.llama_lora.ui.main_page import main_page, get_page_title\n",
+        "from llama_lora.ui.css_styles import get_css_styles\n",
         "\n",
-        "with gr.Blocks(title=get_page_title(), css=main_page_custom_css()) as app:\n",
+        "with gr.Blocks(title=get_page_title(), css=get_css_styles()) as app:\n",
         "    main_page()\n",
         "\n",
         "app.queue(concurrency_count=1).launch(share=True, debug=True, server_name=\"127.0.0.1\")"

app.py

@@ -10,8 +10,9 @@ from llama_lora.globals import initialize_global
 from llama_lora.models import prepare_base_model
 from llama_lora.utils.data import init_data_dir
 from llama_lora.ui.main_page import (
-    main_page, get_page_title, main_page_custom_css
+    main_page, get_page_title
 )
+from llama_lora.ui.css_styles import get_css_styles
 
 
 def main(
@@ -97,7 +98,7 @@ def main(
     if (not skip_loading_base_model) and (not Config.ui_dev_mode):
         prepare_base_model(Config.default_base_model_name)
 
-    with gr.Blocks(title=get_page_title(), css=main_page_custom_css()) as demo:
+    with gr.Blocks(title=get_page_title(), css=get_css_styles()) as demo:
         main_page()
 
     demo.queue(concurrency_count=1).launch(

llama_lora/ui/css_styles.py

@@ -0,0 +1,11 @@
+css_styles = []
+
+
+def get_css_styles():
+    global css_styles
+    return "\n".join(css_styles)
+
+
+def register_css_style(name, style):
+    global css_styles
+    css_styles.append(style)

llama_lora/ui/{finetune_ui.py → finetune/finetune_ui.py}

@@ -11,18 +11,22 @@ from random_word import RandomWords
 from transformers import TrainerCallback
 from huggingface_hub import try_to_load_from_cache, snapshot_download
 
-from ..config import Config
-from ..globals import Global
-from ..models import (
+from ...config import Config
+from ...globals import Global
+from ...models import (
     get_new_base_model, get_tokenizer,
     clear_cache, unload_models)
-from ..utils.data import (
+from ...utils.data import (
     get_available_template_names,
     get_available_dataset_names,
     get_dataset_content,
     get_available_lora_model_names
 )
-from ..utils.prompter import Prompter
+from ...utils.prompter import Prompter
+from ...utils.relative_read_file import relative_read_file
+from ..css_styles import register_css_style
+
+register_css_style('finetune', relative_read_file(__file__, "style.css"))
 
 
 def random_hyphenated_word():
@@ -1284,193 +1288,7 @@ def finetune_ui():
         stop_timeoutable_btn.click(
             fn=None, inputs=None, outputs=None, cancels=things_that_might_timeout)
 
-    finetune_ui_blocks.load(_js="""
-    function finetune_ui_blocks_js() {
-      // Auto load options
-      setTimeout(function () {
-        document.getElementById('finetune_reload_selections_button').click();
-      }, 100);
-
-      // Add tooltips
-      setTimeout(function () {
-        tippy('#finetune_reload_selections_button', {
-          placement: 'bottom-end',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content: 'Press to reload options.',
-        });
-
-        tippy('#finetune_template', {
-          placement: 'bottom-start',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Select a template for your prompt. <br />To see how the selected template work, select the "Preview" tab and then check "Show actual prompt". <br />Templates are loaded from the "templates" folder of your data directory.',
-          allowHTML: true,
-        });
-
-        tippy('#finetune_load_dataset_from', {
-          placement: 'bottom-start',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            '<strong>Text Input</strong>: Paste the dataset directly in the UI.<br/><strong>Data Dir</strong>: Select a dataset in the data directory.',
-          allowHTML: true,
-        });
-
-        tippy('#finetune_dataset_preview_show_actual_prompt', {
-          placement: 'bottom-start',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Check to show the prompt that will be feed to the language model.',
-        });
-
-        tippy('#dataset_plain_text_input_variables_separator', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Define a separator to separate input variables. Use "\\\\n" for new lines.',
-        });
-
-        tippy('#dataset_plain_text_input_and_output_separator', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Define a separator to separate the input (prompt) and the output (completion). Use "\\\\n" for new lines.',
-        });
-
-        tippy('#dataset_plain_text_data_separator', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Define a separator to separate different rows of the train data. Use "\\\\n" for new lines.',
-        });
-
-        tippy('#finetune_dataset_text_load_sample_button', {
-          placement: 'bottom-start',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Press to load a sample dataset of the current selected format into the textbox.',
-        });
-
-        tippy('#finetune_evaluate_data_count', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'While setting a value larger than 0, the checkpoint with the lowest loss on the evaluation data will be saved as the final trained model, thereby helping to prevent overfitting.',
-        });
-
-        tippy('#finetune_save_total_limit', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Total amount of checkpoints to preserve. Older checkpoints will be deleted.',
-        });
-        tippy('#finetune_save_steps', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Number of updates steps before two checkpoint saves.',
-        });
-        tippy('#finetune_logging_steps', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Number of update steps between two logs.',
-        });
-
-        tippy('#finetune_model_name', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'The name of the new LoRA model. Must be unique.',
-        });
-
-        tippy('#finetune_continue_from_model', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'Select a LoRA model to train a new model on top of that model. You can also type in a model name on Hugging Face Hub, such as <code>tloen/alpaca-lora-7b</code>.<br /><br />💡 To reload the training parameters of one of your previously trained models, select it here and click the <code>Load training parameters from selected model</code> button, then un-select it.',
-          allowHTML: true,
-        });
-
-        tippy('#finetune_continue_from_checkpoint', {
-          placement: 'bottom',
-          delay: [500, 0],
-          animation: 'scale-subtle',
-          content:
-            'If a checkpoint is selected, training will resume from that specific checkpoint, bypassing any previously completed steps up to the checkpoint\\'s moment. <br /><br />💡 Use this option to resume an unfinished training session. Remember to click the <code>Load training parameters from selected model</code> button and select the same dataset for training.',
-          allowHTML: true,
-        });
-      }, 100);
-
-      // Show/hide start and stop button base on the state.
-      setTimeout(function () {
-        // Make the '#finetune_training_status > .wrap' element appear
-        if (!document.querySelector('#finetune_training_status > .wrap')) {
-          document.getElementById('finetune_confirm_stop_btn').click();
-        }
-
-        setTimeout(function () {
-          let resetStopButtonTimer;
-          document
-            .getElementById('finetune_stop_btn')
-            .addEventListener('click', function () {
-              if (resetStopButtonTimer) clearTimeout(resetStopButtonTimer);
-              resetStopButtonTimer = setTimeout(function () {
-                document.getElementById('finetune_stop_btn').style.display = 'block';
-                document.getElementById('finetune_confirm_stop_btn').style.display =
-                  'none';
-              }, 5000);
-              document.getElementById('finetune_confirm_stop_btn').style['pointer-events'] =
-                'none';
-              setTimeout(function () {
-                document.getElementById('finetune_confirm_stop_btn').style['pointer-events'] =
-                  'inherit';
-              }, 300);
-              document.getElementById('finetune_stop_btn').style.display = 'none';
-              document.getElementById('finetune_confirm_stop_btn').style.display =
-                'block';
-            });
-          const output_wrap_element = document.querySelector(
-            '#finetune_training_status > .wrap'
-          );
-          function handle_output_wrap_element_class_change() {
-            if (Array.from(output_wrap_element.classList).includes('hide')) {
-              if (resetStopButtonTimer) clearTimeout(resetStopButtonTimer);
-              document.getElementById('finetune_start_btn').style.display = 'block';
-              document.getElementById('finetune_stop_btn').style.display = 'none';
-              document.getElementById('finetune_confirm_stop_btn').style.display =
-                'none';
-            } else {
-              document.getElementById('finetune_start_btn').style.display = 'none';
-              document.getElementById('finetune_stop_btn').style.display = 'block';
-              document.getElementById('finetune_confirm_stop_btn').style.display =
-                'none';
-            }
-          }
-          new MutationObserver(function (mutationsList, observer) {
-            handle_output_wrap_element_class_change();
-          }).observe(output_wrap_element, {
-            attributes: true,
-            attributeFilter: ['class'],
-          });
-          handle_output_wrap_element_class_change();
-        }, 500);
-      }, 0);
-    }
-    """)
+    finetune_ui_blocks.load(_js=relative_read_file(__file__, "script.js"))
 
 
 def get_val_from_arr(arr, index, default=None):

llama_lora/ui/finetune/script.js

@@ -0,0 +1,185 @@
+function finetune_ui_blocks_js() {
+  // Auto load options
+  setTimeout(function () {
+    document.getElementById('finetune_reload_selections_button').click();
+  }, 100);
+
+  // Add tooltips
+  setTimeout(function () {
+    tippy('#finetune_reload_selections_button', {
+      placement: 'bottom-end',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content: 'Press to reload options.',
+    });
+
+    tippy('#finetune_template', {
+      placement: 'bottom-start',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Select a template for your prompt. <br />To see how the selected template work, select the "Preview" tab and then check "Show actual prompt". <br />Templates are loaded from the "templates" folder of your data directory.',
+      allowHTML: true,
+    });
+
+    tippy('#finetune_load_dataset_from', {
+      placement: 'bottom-start',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        '<strong>Text Input</strong>: Paste the dataset directly in the UI.<br/><strong>Data Dir</strong>: Select a dataset in the data directory.',
+      allowHTML: true,
+    });
+
+    tippy('#finetune_dataset_preview_show_actual_prompt', {
+      placement: 'bottom-start',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Check to show the prompt that will be feed to the language model.',
+    });
+
+    tippy('#dataset_plain_text_input_variables_separator', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Define a separator to separate input variables. Use "\\n" for new lines.',
+    });
+
+    tippy('#dataset_plain_text_input_and_output_separator', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Define a separator to separate the input (prompt) and the output (completion). Use "\\n" for new lines.',
+    });
+
+    tippy('#dataset_plain_text_data_separator', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Define a separator to separate different rows of the train data. Use "\\n" for new lines.',
+    });
+
+    tippy('#finetune_dataset_text_load_sample_button', {
+      placement: 'bottom-start',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Press to load a sample dataset of the current selected format into the textbox.',
+    });
+
+    tippy('#finetune_evaluate_data_count', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'While setting a value larger than 0, the checkpoint with the lowest loss on the evaluation data will be saved as the final trained model, thereby helping to prevent overfitting.',
+    });
+
+    tippy('#finetune_save_total_limit', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Total amount of checkpoints to preserve. Older checkpoints will be deleted.',
+    });
+    tippy('#finetune_save_steps', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Number of updates steps before two checkpoint saves.',
+    });
+    tippy('#finetune_logging_steps', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Number of update steps between two logs.',
+    });
+
+    tippy('#finetune_model_name', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'The name of the new LoRA model. Must be unique.',
+    });
+
+    tippy('#finetune_continue_from_model', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'Select a LoRA model to train a new model on top of that model. You can also type in a model name on Hugging Face Hub, such as <code>tloen/alpaca-lora-7b</code>.<br /><br />💡 To reload the training parameters of one of your previously trained models, select it here and click the <code>Load training parameters from selected model</code> button, then un-select it.',
+      allowHTML: true,
+    });
+
+    tippy('#finetune_continue_from_checkpoint', {
+      placement: 'bottom',
+      delay: [500, 0],
+      animation: 'scale-subtle',
+      content:
+        'If a checkpoint is selected, training will resume from that specific checkpoint, bypassing any previously completed steps up to the checkpoint\'s moment. <br /><br />💡 Use this option to resume an unfinished training session. Remember to click the <code>Load training parameters from selected model</code> button and select the same dataset for training.',
+      allowHTML: true,
+    });
+  }, 100);
+
+  // Show/hide start and stop button base on the state.
+  setTimeout(function () {
+    // Make the '#finetune_training_status > .wrap' element appear
+    if (!document.querySelector('#finetune_training_status > .wrap')) {
+      document.getElementById('finetune_confirm_stop_btn').click();
+    }
+
+    setTimeout(function () {
+      let resetStopButtonTimer;
+      document
+        .getElementById('finetune_stop_btn')
+        .addEventListener('click', function () {
+          if (resetStopButtonTimer) clearTimeout(resetStopButtonTimer);
+          resetStopButtonTimer = setTimeout(function () {
+            document.getElementById('finetune_stop_btn').style.display = 'block';
+            document.getElementById('finetune_confirm_stop_btn').style.display =
+              'none';
+          }, 5000);
+          document.getElementById('finetune_confirm_stop_btn').style['pointer-events'] =
+            'none';
+          setTimeout(function () {
+            document.getElementById('finetune_confirm_stop_btn').style['pointer-events'] =
+              'inherit';
+          }, 300);
+          document.getElementById('finetune_stop_btn').style.display = 'none';
+          document.getElementById('finetune_confirm_stop_btn').style.display =
+            'block';
+        });
+      const output_wrap_element = document.querySelector(
+        '#finetune_training_status > .wrap'
+      );
+      function handle_output_wrap_element_class_change() {
+        if (Array.from(output_wrap_element.classList).includes('hide')) {
+          if (resetStopButtonTimer) clearTimeout(resetStopButtonTimer);
+          document.getElementById('finetune_start_btn').style.display = 'block';
+          document.getElementById('finetune_stop_btn').style.display = 'none';
+          document.getElementById('finetune_confirm_stop_btn').style.display =
+            'none';
+        } else {
+          document.getElementById('finetune_start_btn').style.display = 'none';
+          document.getElementById('finetune_stop_btn').style.display = 'block';
+          document.getElementById('finetune_confirm_stop_btn').style.display =
+            'none';
+        }
+      }
+      new MutationObserver(function (mutationsList, observer) {
+        handle_output_wrap_element_class_change();
+      }).observe(output_wrap_element, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+      handle_output_wrap_element_class_change();
+    }, 500);
+  }, 0);
+}

llama_lora/ui/finetune/style.css

@@ -0,0 +1,244 @@
+#finetune_dataset_text_load_sample_button {
+    margin: -4px 12px 8px;
+}
+
+#finetune_reload_selections_button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 16px;
+    margin-bottom: auto;
+    height: 42px !important;
+    min-width: 42px !important;
+    width: 42px !important;
+    z-index: 1;
+}
+
+#finetune_dataset_from_data_dir {
+    border: 0;
+    box-shadow: none;
+}
+
+#finetune_ui_content > .tabs > .tab-nav::before {
+    content: "Training Dataset:";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-right: 12px;
+    padding-left: 8px;
+}
+
+#finetune_template,
+#finetune_template + * {
+    border: 0;
+    box-shadow: none;
+}
+
+#finetune_dataset_text_input_group .form {
+    border: 0;
+    box-shadow: none;
+    padding: 0;
+}
+
+#finetune_dataset_text_input_textbox > .wrap:last-of-type {
+    margin-top: -20px;
+}
+
+#finetune_dataset_plain_text_separators_group * {
+    font-size: 0.8rem;
+}
+#finetune_dataset_plain_text_separators_group textarea {
+    height: auto !important;
+}
+#finetune_dataset_plain_text_separators_group > .form {
+    gap: 0 !important;
+}
+
+#finetune_dataset_from_text_message p,
+#finetune_dataset_from_text_message + * p {
+    font-size: 80%;
+}
+#finetune_dataset_from_text_message,
+#finetune_dataset_from_text_message *,
+#finetune_dataset_from_text_message + *,
+#finetune_dataset_from_text_message + * * {
+    display: inline;
+}
+
+
+#finetune_dataset_from_data_dir_message,
+#finetune_dataset_from_data_dir_message * {
+    min-height: 0 !important;
+}
+#finetune_dataset_from_data_dir_message {
+    margin: -20px 24px 0;
+    font-size: 0.8rem;
+}
+
+#finetune_dataset_from_text_message > .wrap > *:first-child,
+#finetune_dataset_from_data_dir_message > .wrap > *:first-child {
+    display: none;
+}
+#finetune_dataset_from_data_dir_message > .wrap {
+    top: -18px;
+}
+#finetune_dataset_from_text_message > .wrap svg,
+#finetune_dataset_from_data_dir_message > .wrap svg {
+    margin: -32px -16px;
+}
+
+#finetune_continue_from_model_box {
+    /* padding: 0; */
+}
+#finetune_continue_from_model_box .block {
+    border: 0;
+    box-shadow: none;
+    padding: 0;
+}
+#finetune_continue_from_model_box > * {
+    /* gap: 0; */
+}
+#finetune_continue_from_model_box button {
+    margin-top: 16px;
+}
+#finetune_continue_from_model {
+    flex-grow: 2;
+}
+
+.finetune_dataset_error_message {
+    color: var(--error-text-color) !important;
+}
+
+#finetune_dataset_preview_info_message {
+    align-items: flex-end;
+    flex-direction: row;
+    display: flex;
+    margin-bottom: -4px;
+}
+
+#finetune_dataset_preview td {
+    white-space: pre-wrap;
+}
+
+/*
+#finetune_dataset_preview {
+    max-height: 100vh;
+    overflow: auto;
+    border: var(--block-border-width) solid var(--border-color-primary);
+    border-radius: var(--radius-lg);
+}
+#finetune_dataset_preview .table-wrap {
+    border: 0 !important;
+}
+*/
+
+#finetune_max_seq_length {
+    flex: 2;
+}
+
+#finetune_lora_target_modules_box,
+#finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box {
+    margin-top: calc((var(--layout-gap) + 8px) * -1);
+    flex-grow: 0 !important;
+}
+#finetune_lora_target_modules_box > .form,
+#finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box > .form {
+    padding-top: calc((var(--layout-gap) + 8px) / 3);
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: var(--block-background-fill);
+    position: relative;
+}
+#finetune_lora_target_modules_box > .form::before,
+#finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box > .form::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: calc((var(--layout-gap) + 8px) / 3);
+    left: 0;
+    right: 0;
+    height: 1px;
+    z-index: 1;
+    background: var(--block-border-color);
+}
+#finetune_lora_target_modules_add_box,
+#finetune_lora_modules_to_save_add_box {
+    margin-top: -24px;
+    padding-top: 8px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 0;
+}
+#finetune_lora_target_modules_add_box > * > .form,
+#finetune_lora_modules_to_save_add_box > * > .form {
+    border: 0;
+    box-shadow: none;
+}
+#finetune_lora_target_modules_add,
+#finetune_lora_modules_to_save_add {
+    padding: 0;
+}
+#finetune_lora_target_modules_add input,
+#finetune_lora_modules_to_save_add input {
+    padding: 4px 8px;
+}
+#finetune_lora_target_modules_add_btn,
+#finetune_lora_modules_to_save_add_btn {
+    min-width: 60px;
+}
+
+#finetune_save_total_limit,
+#finetune_save_steps,
+#finetune_logging_steps {
+    min-width: min(120px,100%) !important;
+    padding-top: 4px;
+}
+#finetune_save_total_limit span,
+#finetune_save_steps span,
+#finetune_logging_steps span {
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+#finetune_save_total_limit input,
+#finetune_save_steps input,
+#finetune_logging_steps input {
+    padding: 4px 8px;
+}
+
+#finetune_advanced_options_checkboxes > * > * {
+    min-width: auto;
+}
+
+#finetune_log_and_save_options_group_container {
+    flex-grow: 0 !important;
+}
+#finetune_model_name_group {
+    flex-grow: 0 !important;
+}
+
+#finetune_eval_data_group {
+    flex-grow: 0 !important;
+}
+
+#finetune_additional_training_arguments_box > .form,
+#finetune_additional_lora_config_box > .form {
+    border: 0;
+    background: transparent;
+}
+#finetune_additional_training_arguments_textbox_for_label_display,
+#finetune_additional_lora_config_textbox_for_label_display {
+    padding: 0;
+    margin-bottom: -10px;
+    background: transparent;
+}
+#finetune_additional_training_arguments_textbox_for_label_display textarea,
+#finetune_additional_lora_config_textbox_for_label_display textarea {
+    display: none;
+}
+
+/* in case if there's too many logs on the previous run and made the box too high */
+#finetune_training_status:has(.wrap:not(.hide)) {
+    max-height: 160px;
+    height: 160px;
+}

llama_lora/ui/main_page.py

@@ -4,10 +4,11 @@ from ..config import Config
 from ..globals import Global
 
 from .inference_ui import inference_ui
-from .finetune_ui import finetune_ui
+from .finetune.finetune_ui import finetune_ui
 from .tokenizer_ui import tokenizer_ui
 
 from .js_scripts import popperjs_core_code, tippy_js_code
+from .css_styles import get_css_styles, register_css_style
 
 
 def main_page():
@@ -15,7 +16,7 @@ def main_page():
 
     with gr.Blocks(
             title=title,
-            css=main_page_custom_css(),
+            css=get_css_styles(),
     ) as main_page_blocks:
         with gr.Column(elem_id="main_page_content"):
             with gr.Row():
@@ -533,10 +534,6 @@ def main_page_custom_css():
         margin-top: -8px;
     }
 
-    #finetune_dataset_text_load_sample_button {
-        margin: -4px 12px 8px;
-    }
-
     #inference_preview_prompt_container .label-wrap {
         user-select: none;
     }
@@ -565,23 +562,6 @@ def main_page_custom_css():
         opacity: 0.8;
     }
 
-    #finetune_reload_selections_button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: 16px;
-        margin-bottom: auto;
-        height: 42px !important;
-        min-width: 42px !important;
-        width: 42px !important;
-        z-index: 1;
-    }
-
-    #finetune_dataset_from_data_dir {
-        border: 0;
-        box-shadow: none;
-    }
-
     @media screen and (min-width: 640px) {
         #inference_lora_model, #inference_lora_model_group,
         #finetune_template {
@@ -626,224 +606,6 @@ def main_page_custom_css():
         }
     }
 
-    #finetune_ui_content > .tabs > .tab-nav::before {
-        content: "Training Dataset:";
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-right: 12px;
-        padding-left: 8px;
-    }
-
-    #finetune_template,
-    #finetune_template + * {
-        border: 0;
-        box-shadow: none;
-    }
-
-    #finetune_dataset_text_input_group .form {
-        border: 0;
-        box-shadow: none;
-        padding: 0;
-    }
-
-    #finetune_dataset_text_input_textbox > .wrap:last-of-type {
-        margin-top: -20px;
-    }
-
-    #finetune_dataset_plain_text_separators_group * {
-        font-size: 0.8rem;
-    }
-    #finetune_dataset_plain_text_separators_group textarea {
-        height: auto !important;
-    }
-    #finetune_dataset_plain_text_separators_group > .form {
-        gap: 0 !important;
-    }
-
-    #finetune_dataset_from_text_message p,
-    #finetune_dataset_from_text_message + * p {
-        font-size: 80%;
-    }
-    #finetune_dataset_from_text_message,
-    #finetune_dataset_from_text_message *,
-    #finetune_dataset_from_text_message + *,
-    #finetune_dataset_from_text_message + * * {
-        display: inline;
-    }
-
-
-    #finetune_dataset_from_data_dir_message,
-    #finetune_dataset_from_data_dir_message * {
-        min-height: 0 !important;
-    }
-    #finetune_dataset_from_data_dir_message {
-        margin: -20px 24px 0;
-        font-size: 0.8rem;
-    }
-
-    #finetune_dataset_from_text_message > .wrap > *:first-child,
-    #finetune_dataset_from_data_dir_message > .wrap > *:first-child {
-        display: none;
-    }
-    #finetune_dataset_from_data_dir_message > .wrap {
-        top: -18px;
-    }
-    #finetune_dataset_from_text_message > .wrap svg,
-    #finetune_dataset_from_data_dir_message > .wrap svg {
-        margin: -32px -16px;
-    }
-
-    #finetune_continue_from_model_box {
-        /* padding: 0; */
-    }
-    #finetune_continue_from_model_box .block {
-        border: 0;
-        box-shadow: none;
-        padding: 0;
-    }
-    #finetune_continue_from_model_box > * {
-        /* gap: 0; */
-    }
-    #finetune_continue_from_model_box button {
-        margin-top: 16px;
-    }
-    #finetune_continue_from_model {
-        flex-grow: 2;
-    }
-
-    .finetune_dataset_error_message {
-        color: var(--error-text-color) !important;
-    }
-
-    #finetune_dataset_preview_info_message {
-        align-items: flex-end;
-        flex-direction: row;
-        display: flex;
-        margin-bottom: -4px;
-    }
-
-    #finetune_dataset_preview td {
-        white-space: pre-wrap;
-    }
-
-    /*
-    #finetune_dataset_preview {
-        max-height: 100vh;
-        overflow: auto;
-        border: var(--block-border-width) solid var(--border-color-primary);
-        border-radius: var(--radius-lg);
-    }
-    #finetune_dataset_preview .table-wrap {
-        border: 0 !important;
-    }
-    */
-
-    #finetune_max_seq_length {
-        flex: 2;
-    }
-
-    #finetune_lora_target_modules_box,
-    #finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box {
-        margin-top: calc((var(--layout-gap) + 8px) * -1);
-        flex-grow: 0 !important;
-    }
-    #finetune_lora_target_modules_box > .form,
-    #finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box > .form {
-        padding-top: calc((var(--layout-gap) + 8px) / 3);
-        border-top: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        background: var(--block-background-fill);
-        position: relative;
-    }
-    #finetune_lora_target_modules_box > .form::before,
-    #finetune_lora_target_modules_box + #finetune_lora_modules_to_save_box > .form::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: calc((var(--layout-gap) + 8px) / 3);
-        left: 0;
-        right: 0;
-        height: 1px;
-        z-index: 1;
-        background: var(--block-border-color);
-    }
-    #finetune_lora_target_modules_add_box,
-    #finetune_lora_modules_to_save_add_box {
-        margin-top: -24px;
-        padding-top: 8px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-top: 0;
-    }
-    #finetune_lora_target_modules_add_box > * > .form,
-    #finetune_lora_modules_to_save_add_box > * > .form {
-        border: 0;
-        box-shadow: none;
-    }
-    #finetune_lora_target_modules_add,
-    #finetune_lora_modules_to_save_add {
-        padding: 0;
-    }
-    #finetune_lora_target_modules_add input,
-    #finetune_lora_modules_to_save_add input {
-        padding: 4px 8px;
-    }
-    #finetune_lora_target_modules_add_btn,
-    #finetune_lora_modules_to_save_add_btn {
-        min-width: 60px;
-    }
-
-    #finetune_save_total_limit,
-    #finetune_save_steps,
-    #finetune_logging_steps {
-        min-width: min(120px,100%) !important;
-        padding-top: 4px;
-    }
-    #finetune_save_total_limit span,
-    #finetune_save_steps span,
-    #finetune_logging_steps span {
-        font-size: 12px;
-        margin-bottom: 5px;
-    }
-    #finetune_save_total_limit input,
-    #finetune_save_steps input,
-    #finetune_logging_steps input {
-        padding: 4px 8px;
-    }
-
-    #finetune_advanced_options_checkboxes > * > * {
-        min-width: auto;
-    }
-
-    #finetune_log_and_save_options_group_container {
-        flex-grow: 0 !important;
-    }
-    #finetune_model_name_group {
-        flex-grow: 0 !important;
-    }
-
-    #finetune_eval_data_group {
-        flex-grow: 0 !important;
-    }
-
-    #finetune_additional_training_arguments_box > .form,
-    #finetune_additional_lora_config_box > .form {
-        border: 0;
-        background: transparent;
-    }
-    #finetune_additional_training_arguments_textbox_for_label_display,
-    #finetune_additional_lora_config_textbox_for_label_display {
-        padding: 0;
-        margin-bottom: -10px;
-        background: transparent;
-    }
-    #finetune_additional_training_arguments_textbox_for_label_display textarea,
-    #finetune_additional_lora_config_textbox_for_label_display textarea {
-        display: none;
-    }
-
     @media screen and (max-width: 392px) {
         #inference_lora_model, #inference_lora_model_group, #finetune_template {
             border-bottom-left-radius: 0;
@@ -869,12 +631,6 @@ def main_page_custom_css():
         overflow: hidden !important;
     }
 
-    /* in case if there's too many logs on the previous run and made the box too high */
-    #finetune_training_status:has(.wrap:not(.hide)) {
-        max-height: 160px;
-        height: 160px;
-    }
-
     .foot_stop_timeoutable_btn {
         align-self: flex-end;
         border: 0 !important;
@@ -899,6 +655,9 @@ def main_page_custom_css():
     return css
 
 
+register_css_style('main', main_page_custom_css())
+
+
 def pre_handle_change_base_model(selected_base_model_name):
     if Global.base_model_name != selected_base_model_name:
         return gr.Column.update(visible=False)

llama_lora/utils/relative_read_file.py

@@ -0,0 +1,9 @@
+import os
+
+
+def relative_read_file(base_file, relative_path):
+    src_dir = os.path.dirname(os.path.abspath(base_file))
+    file_path = os.path.join(src_dir, relative_path)
+    with open(file_path, 'r') as f:
+        file_contents = f.read()
+        return file_contents