From 87cb4e27540ab27b0f6342c7dc98d77b68028e59 Mon Sep 17 00:00:00 2001 From: erew123 <35898566+erew123@users.noreply.github.com> Date: Fri, 22 Nov 2024 19:41:35 +0000 Subject: [PATCH] Correct Finetune CSS --- finetune.py | 60 +++++----- trainer_alltalk/finetune_content.py | 175 ++++++++++++++++++++-------- 2 files changed, 159 insertions(+), 76 deletions(-) diff --git a/finetune.py b/finetune.py index d2240f1..3eb3217 100644 --- a/finetune.py +++ b/finetune.py @@ -889,20 +889,20 @@ def create_pfc_interface(): with gr.Row(): with gr.Column(): with gr.Accordion("💻 Hardware Requirements", open=False): - gr.Markdown(HELP_CONTENT["gpu_requirements"]) + gr.Markdown(HELP_CONTENT["gpu_requirements"], elem_classes="custom-markdown") with gr.Column(): with gr.Accordion("🖥️ Storage Requirements", open=False): - gr.Markdown(HELP_CONTENT["disk_space_details"]) + gr.Markdown(HELP_CONTENT["disk_space_details"], elem_classes="custom-markdown") with gr.Row(): with gr.Column(): with gr.Accordion("🤖 PyTorch & CUDA", open=False): - gr.Markdown(HELP_CONTENT["pytorch_cuda"]) + gr.Markdown(HELP_CONTENT["pytorch_cuda"], elem_classes="custom-markdown") with gr.Column(): with gr.Accordion("📦 Model Setup", open=False): - gr.Markdown(HELP_CONTENT["model_setup"]) + gr.Markdown(HELP_CONTENT["model_setup"], elem_classes="custom-markdown") def run_checks(): system_checks.run_all_checks() @@ -3925,25 +3925,25 @@ if __name__ == "__main__": ) with gr.Accordion("🎯 Quick Start Guide", open=False): gr.Markdown( - FinetuneContent.STEP1_QUICKSTART) # pylint: disable=no-member + FinetuneContent.STEP1_QUICKSTART, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📋 Detailed Instructions", open=False): gr.Markdown( - FinetuneContent.STEP1_DETAILED_INSTRUCTIONS) # pylint: disable=no-member + FinetuneContent.STEP1_DETAILED_INSTRUCTIONS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔧 Process Overview", open=False): gr.Markdown( - FinetuneContent.STEP1_PROCESS_OVERVIEW) # pylint: disable=no-member + FinetuneContent.STEP1_PROCESS_OVERVIEW, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔍 Whisper Model Selection", open=False): gr.Markdown( - FinetuneContent.STEP1_WHISPER_MODEL_SELECTION) # pylint: disable=no-member + FinetuneContent.STEP1_WHISPER_MODEL_SELECTION, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("⚙️ Advanced Settings", open=False): gr.Markdown( - FinetuneContent.STEP1_ADVANCED_SETTINGS) # pylint: disable=no-member + FinetuneContent.STEP1_ADVANCED_SETTINGS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔍 Dataset Creation Debug Settings", open=False): gr.Markdown( - FinetuneContent.STEP1_DEBUG_SETTINGS) # pylint: disable=no-member + FinetuneContent.STEP1_DEBUG_SETTINGS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("❗ Troubleshooting", open=False): gr.Markdown( - FinetuneContent.STEP1_TROUBLESHOOTING) # pylint: disable=no-member + FinetuneContent.STEP1_TROUBLESHOOTING, elem_classes="custom-markdown") # pylint: disable=no-member with gr.TabItem("📊 Dataset Validation"): with gr.Row(): @@ -3953,10 +3953,10 @@ if __name__ == "__main__": with gr.Row(): with gr.Column(): gr.Markdown( - FinetuneContent.DATASET_VALIDATION_1) # pylint: disable=no-member + FinetuneContent.DATASET_VALIDATION_1, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Column(): gr.Markdown( - FinetuneContent.DATASET_VALIDATION_2) # pylint: disable=no-member + FinetuneContent.DATASET_VALIDATION_2, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Row(): progress_box = gr.Textbox(label="Progress", interactive=False) @@ -4456,31 +4456,31 @@ if __name__ == "__main__": ) with gr.Accordion("🎯 Quick Start Training Guide", open=False): gr.Markdown( - FinetuneContent.STEP2_QUICKSTART) # pylint: disable=no-member + FinetuneContent.STEP2_QUICKSTART, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📁 Using Your Own Training Dataset", open=False): gr.Markdown( - FinetuneContent.STEP2_YOUR_OWN_DATASET) # pylint: disable=no-member + FinetuneContent.STEP2_YOUR_OWN_DATASET, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📊 Training Metrics and Logs", open=False): gr.Markdown( - FinetuneContent.STEP2_TRAINING_METRICS) # pylint: disable=no-member + FinetuneContent.STEP2_TRAINING_METRICS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("💾 Memory Management", open=False): gr.Markdown( - FinetuneContent.STEP2_MEMORY_MANAGEMENT) # pylint: disable=no-member + FinetuneContent.STEP2_MEMORY_MANAGEMENT, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("⚙️ Batch Size & Gradient Accumulation", open=False): gr.Markdown( - FinetuneContent.STEP2_BATCH_SIZE) # pylint: disable=no-member + FinetuneContent.STEP2_BATCH_SIZE, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📊 Learning Rate & Schedulers", open=False): gr.Markdown( - FinetuneContent.STEP2_LEARNING_RATE) # pylint: disable=no-member + FinetuneContent.STEP2_LEARNING_RATE, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔧 Optimizers", open=False): gr.Markdown( - FinetuneContent.STEP2_OPTIMIZERS) # pylint: disable=no-member + FinetuneContent.STEP2_OPTIMIZERS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔄 Training Epochs", open=False): gr.Markdown( - FinetuneContent.STEP2_EPOCHS) # pylint: disable=no-member + FinetuneContent.STEP2_EPOCHS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📈 Max Audio Length", open=False): gr.Markdown( - FinetuneContent.STEP2_AUDIO_LENGTH) # pylint: disable=no-member + FinetuneContent.STEP2_AUDIO_LENGTH, elem_classes="custom-markdown") # pylint: disable=no-member ####################### #### GRADIO STEP 3 #### @@ -4625,30 +4625,30 @@ if __name__ == "__main__": ) with gr.Accordion("🎯 Testing Overview", open=False): gr.Markdown( - FinetuneContent.STEP3_TESTING_OVERVIEW) # pylint: disable=no-member + FinetuneContent.STEP3_TESTING_OVERVIEW, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("⚠️ Important Notes", open=False): gr.Markdown( - FinetuneContent.STEP3_IMPORTANT) # pylint: disable=no-member + FinetuneContent.STEP3_IMPORTANT, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📝 Testing Instructions", open=False): gr.Markdown( - FinetuneContent.STEP3_INSTRUCTIONS) # pylint: disable=no-member + FinetuneContent.STEP3_INSTRUCTIONS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔍 What the Testing Step Does", open=False): gr.Markdown( - FinetuneContent.STEP3_WHAT_IT_DOES) # pylint: disable=no-member + FinetuneContent.STEP3_WHAT_IT_DOES, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Tab("📦 Model Export"): with gr.Accordion("🎯 Export Overview", open=False): gr.Markdown( - FinetuneContent.EXPORT_OVERVIEW) # pylint: disable=no-member + FinetuneContent.EXPORT_OVERVIEW, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("📊 Voice Sample Organization", open=False): gr.Markdown( - FinetuneContent.EXPORT_VOICE_SAMPLES) # pylint: disable=no-member + FinetuneContent.EXPORT_VOICE_SAMPLES, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("🔄 Export Options", open=False): gr.Markdown( - FinetuneContent.EXPORT_OPTIONS) # pylint: disable=no-member + FinetuneContent.EXPORT_OPTIONS, elem_classes="custom-markdown") # pylint: disable=no-member with gr.Accordion("💾 Storage Management", open=False): gr.Markdown( - FinetuneContent.EXPORT_STORAGE) # pylint: disable=no-member + FinetuneContent.EXPORT_STORAGE, elem_classes="custom-markdown") # pylint: disable=no-member final_progress_data = gr.Label(label="Progress:") with gr.Row(): diff --git a/trainer_alltalk/finetune_content.py b/trainer_alltalk/finetune_content.py index 1631ce4..8c9e4b7 100644 --- a/trainer_alltalk/finetune_content.py +++ b/trainer_alltalk/finetune_content.py @@ -4,67 +4,150 @@ class FinetuneContent: """CSS and help content for finetune.py""" custom_css = """ - /* Status indicators and labels */ - .status-label { - font-size: 1.2em; - font-weight: bold; - padding: 10px; - border-radius: 5px; - margin: 10px 0; + /* Add this to your existing CSS */ + .gradio-container .prose { + max-width: none !important; + padding: 0.5rem !important; /* Reduced padding */ + margin: 0 !important; } - .status-indicator { - padding: 5px 10px; - border-radius: 3px; - font-weight: bold; + .custom-markdown div { + border: none !important; /* Remove the inner border */ + margin-top: 0 !important; /* Remove top margin */ + margin-bottom: 0 !important; /* Remove bottom margin */ + padding-top: 0 !important; /* Remove top padding */ + padding-bottom: 0 !important; /* Remove bottom padding */ } - /* Layout components */ - .status-box { - display: flex; - align-items: center; - padding: 0.5rem; - margin-bottom: 0.5rem; - border-radius: 4px; - background: var(--background-fill-secondary); + /* Update the existing custom-markdown class */ + .custom-markdown { + font-size: 15px !important; + line-height: 1.6 !important; + color: var(--body-text-color) !important; + background-color: var(--background-fill-primary) !important; + border: 1px solid var(--border-color-primary) !important; + border-radius: 8px !important; + padding: 0.5rem !important; + margin: 0 !important; /* Changed from 1rem 0 to 0 */ + max-width: 100% !important; + box-sizing: border-box !important; + /* Default text color for all content (grey) */ + color: rgba(156, 163, 175, 1) !important; /* Adjust this grey value to match your interface */ } - .status-group { - margin-bottom: 1rem; - padding: 1rem; - border-radius: 8px; - background: var(--background-fill-primary); + /* Make headings white */ + .custom-markdown h1, + .custom-markdown h2, + .custom-markdown h3, + .custom-markdown h4, + .custom-markdown h5, + .custom-markdown h6 { + color: var(--heading-text-color, var(--body-text-color)) !important; + font-weight: 600 !important; } - /* Help section styling */ - .help-section { - margin-top: 2rem; - border-top: 1px solid var(--border-color-primary); - padding-top: 1rem; + /* Keep all other elements in the grey color */ + .custom-markdown p, + .custom-markdown li, + .custom-markdown ul, + .custom-markdown ol { + color: rgba(156, 163, 175, 1) !important; /* Same grey as the base text */ + } + + /* Additional targeting for any wrapping elements */ + .gradio-container .prose > * { + margin: 0 !important; + padding: 0 !important; } - .help-accordion { - margin-bottom: 0.5rem; + /* Update the list item spacing in your existing CSS */ + .custom-markdown li { + font-size: 0.95rem !important; + margin-bottom: 0.2rem !important; /* Reduced from 0.5rem to 0.3rem */ } - /* Ensure consistent font size in accordions */ - .gradio-container .prose, - .gradio-container .prose p, - .gradio-container .prose ul, - .gradio-container .prose ol, - .gradio-container .prose ul li, - .gradio-container .prose ol li { - font-size: 1.02em !important; /* Adjust to the preferred size, e.g., 1em or 14px */ - line-height: 1.3; /* Improves readability */ + /* Add specific styling for definition-style lists (like your Default, Recommendation, Tip items) */ + .custom-markdown li p { + margin: 0 !important; /* Remove paragraph margins within list items */ } - /* Grid layout */ - .check-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; - margin-bottom: 1rem; + /* If you need even tighter spacing for specific types of lists */ + .custom-markdown li + li { + margin-top: 0.2rem !important; /* Space between consecutive list items */ } + + /* Ensure nested lists maintain proper spacing */ + .custom-markdown li > ul, + .custom-markdown li > ol { + margin: 0.2rem 0 0.2rem 1rem !important; /* Reduced from 0.5rem */ + } + + /* Consistent heading styles */ + .custom-markdown h2 { + font-size: 1.2rem !important; /* Fixed size relative to root */ + font-weight: 600 !important; + margin: 1.5rem 0 1rem !important; + color: var(--heading-text-color, var(--body-text-color)) !important; + border-bottom: 1px solid var(--border-color-primary) !important; + padding-bottom: 0.5rem !important; + } + + /* First paragraph styling */ + .custom-markdown p:first-of-type { + font-size: 0.95rem !important; /* Match base size */ + font-weight: 400 !important; + margin-bottom: 1rem !important; + } + + /* Regular paragraphs */ + .custom-markdown p { + font-size: 0.95rem !important; + margin: 0.8rem 0 !important; + } + + /* List styling */ + .custom-markdown ul, + .custom-markdown ol { + margin: 0.8rem 0 !important; + padding-left: 1.5rem !important; + } + + /* Code styling */ + .custom-markdown code { + font-family: ui-monospace, monospace !important; + background-color: var(--background-fill-secondary) !important; + padding: 0.2rem 0.4rem !important; + border-radius: 4px !important; + font-size: 0.8rem !important; /* Slightly smaller than regular text */ + color: var(--body-text-color) !important; + } + + /* Add styles for bold and emphasis */ + .custom-markdown strong { + font-weight: 600 !important; + color: var(--body-text-color) !important; + } + + .custom-markdown em { + font-style: italic !important; + } + + /* Ensure both columns take equal width */ + .gradio-row > div { + flex: 1 1 50% !important; + min-width: 0 !important; /* Prevents flex items from overflowing */ + } + + .small-file-upload { + min-height: 200px; + max-height: 200px; + } + + .small-file-upload2 { + min-height: 90px; + max-height: 90px; + } + """ STEP1_QUICKSTART = """