sd_dreambooth_extension/index.html

419 lines
30 KiB
HTML

<div class="module" id="moduleDreambooth">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-body text-center justify-between">
<div class="btn-group dbButtons">
<button class="btn btn-top btn-secondary dbSettingBtn" type="button" id="db_load_params">
Load Settings
</button>
<button class="btn btn-top btn-secondary dbSettingBtn" type="button" id="db_save_config">
Save Settings
</button>
<button class="btn btn-top btn-primary dbSettingBtn" type="button" id="db_train">Train
</button>
<button class="btn btn-top btn-secondary dbSettingBtn" type="button" id="db_gen_ckpt">
Generate Ckpt
</button>
<button class="btn btn-top btn-secondary hide dbTrainBtn" type="button"
id="db_gen_ckpt_during"> Save Weights
</button>
<button class="btn btn-top btn-secondary hide dbTrainBtn" type="button"
id="db_train_sample">Generate Samples
</button>
<button class="btn btn-top btn-secondary hide cancelButton dbTrainBtn" type="button"
id="db_cancel">Cancel
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4" id="dbModelCol">
<div class="card shadow" id="dreamModel">
<div class="card-header">Model</div>
<div class="card-body">
<ul class="nav nav-tabs" id="dbModelTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="db-model-select-tab" data-bs-toggle="tab"
data-bs-target="#db-model-select" type="button" role="tab"
aria-controls="db-model-select"
aria-selected="true">Select
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="db-model-create-tab" data-bs-toggle="tab"
data-bs-target="#db-model-create"
type="button" role="tab" aria-controls="profile" aria-selected="false">Create
</button>
</li>
</ul>
<div class="borderSection" id="myTabContent">
<div class="tab-pane fade show active" id="db-model-select" role="tabpanel"
aria-labelledby="db-model-select">
<div class="container">
<div class="row">
<div class="col-12">
<div id="dreamModelSelect" class="modelSelect" data-model_type="dreambooth"
data-label="Select Model"></div>
</div>
<div class="col-12">
<div id="snapshotSelect" class="modelSelect db-advanced"
data-model_type="dreamboothSnapshot"
data-label="Snapshot to Resume"></div>
</div>
</div>
<div class="row" style="display: none;" id="loraSelect">
<div class="col-12">
<div id="loraModelSelect" class="modelSelect" data-model_type="lora"
data-label="Lora Model"></div>
</div>
</div>
<div class="dbModelInfo">
</div>
</div>
</div>
<div class="tab-pane fade" id="db-model-create" role="tabpanel"
aria-labelledby="db-model-create">
<form>
<div class="form-group">
<label class="form-label" for="db_new_model_name">Name</label>
<input type="text" class="form-control newModelParam"
id="db_new_model_name" data-key="new_model_name">
</div>
<div class="form-group db-advanced">
<div class="form-check form-switch">
<input class="newModelParam form-check-input" type="checkbox" id="is_512"
name="is_512" data-key="is_512" checked>
<label class="form-check-label" for="is_512">512x Base Model</label>
</div>
</div>
<div class="form-group db-advanced">
<div class="form-check form-switch">
<input class="newModelParam form-check-input" type="checkbox"
id="create_from_hub" name="create_from_hub">
<label class="form-check-label" for="create_from_hub">Create from
Hub</label>
</div>
</div>
<div class="form-group db-advanced" style="display: none;" id="hub_row">
<label class="form-label" for="db_new_model_url">Model Path</label>
<input type="text" class="form-control newModelParam"
id="db_new_model_url"
placeholder="runwayml/stable-diffusion-v1-5"
data-key="new_model_url">
<label class="form-label" for="db_new_model_token">HuggingFace Token</label>
<input type="text" class="form-control newModelParam"
id="db_new_model_token" data-key="new_model_token"
value="">
</div>
<div class="form-group" id="local_row">
<div class="modelSelect newModelParam" id="db_new_model"
data-model_type="diffusers"
data-label="Source Checkpoint"
data-key="new_model_src"></div>
</div>
<div class="form-group db-advanced">
<div class="form-check form-switch">
<input class="newModelParam form-check-input" type="checkbox"
id="db_use_shared_src" name="use_shared_src"
data-key="use_shared_src">
<label class="form-check-label" for="db_use_shared_src">Use Shared Base
Model (Lora)</label>
</div>
</div>
<div class="form-group" id="shared_row" style="display: none">
<div class="sharedModelSelect modelSelect"
id="new_model_shared_src"
data-add_class="newModelParam"
data-model_type="diffusers"
data-label="LoRA Shared Diffusers Source"
data-key="new_model_shared_src"></div>
</div>
<div class="form-group db-advanced">
<div class="form-check form-switch">
<input class="newModelParam form-check-input" type="checkbox"
id="db_train_unfrozen" data-key="train_unfrozen"
name="train_unfrozen" checked>
<label class="form-check-label" for="db_train_unfrozen">Unfreeze</label>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-primary" type="button" id="db_create_model">Create
Model
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow" id="dreamSettings">
<div class="card-header">
Input
</div>
<div class="card-body">
<div class="borderSection">
<div class="row justify-content-between">
<div class="col-auto sectionLabel">Concepts</div>
<div class="col-auto db-advanced" id="conceptControls">
<button type="button" class="btn btn-primary btn-sm" id="db_concept_add">+</button>
<button type="button" class="btn btn-danger btn-sm hide" id="db_concept_remove">-
</button>
</div>
</div>
<div id="advancedConcepts" class="form-control"></div>
</div>
<div class="borderSection">
<div class="sectionLabel">Settings</div>
<div class="db-slider dbInput" id="num_train_epochs" data-max="1000" data-min="1"
data-value="150" data-label="Number of Epochs"></div>
<div class="db-slider dbInput db-advanced" id="save_embedding_every"
data-max="100"
data-min="0" data-step="1"
data-value="0" data-label="Save Weight Frequency"></div>
<div class="db-slider dbInput db-advanced" id="save_preview_every" data-max="100"
data-min="0" data-step="1"
data-value="0" data-label="Save Preview Frequency"></div>
<div class="db-slider dbInput" id="resolution" data-max="1024" data-min="512"
data-step="64"
data-value="768" data-label="Maximum Resolution"></div>
<div class="db-slider dbInput db-advanced" id="train_batch_size" data-max="100" data-min="1"
data-step="1"
data-value="5" data-label="Batch Size"></div>
<div class="db-slider dbInput db-advanced" id="gradient_accumulation_steps" data-max="100"
data-min="1" data-step="1"
data-value="1" data-label="Gradient Accumulation Steps"></div>
</div>
<div class="borderSection accordion db-advanced" id="dbAdvancedAccordion">
<div class="accordion-item">
<div id="dbAdvancedLabel" class="sectionLabel accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#dbAdvancedSettings"
aria-expanded="false" aria-controls="dbAdvancedSettings">Advanced
</div>
<div id="dbAdvancedSettings" class="accordion-collapse collapse"
aria-labelledby="dbAdvancedLabel" data-bs-parent="#dbAdvancedAccordion">
<div class="accordion-body">
<form>
<div class="form-group">
<label class="form-label" for="scheduler">Image Scheduler</label>
<select class="dbInput form-control" id="scheduler" name="scheduler">
</select>
</div>
<div class="form-group">
<label class="form-label" for="mixed_precision">Mixed Precision</label>
<select class="dbInput form-control" id="mixed_precision"
name="mixed_precision">
</select>
</div>
<div class="form-group">
<label class="form-label" for="attention">Attention</label>
<select class="dbInput form-control" id="attention" name="attention">
</select>
</div>
<div class="form-group">
<label class="form-label" for="optimizer">Optimizer</label>
<select class="dbInput form-control" id="optimizer" name="optimizer">
</select>
</div>
<div class="form-group">
<label class="form-label" for="lr_scheduler">Scheduler</label>
<select class="dbInput form-control" id="lr_scheduler"
name="lr_scheduler">
</select>
</div>
<div class="form-group" style="position: relative">
<label class="form-label" for="learning_rate">Learning Rate</label>
<div class="input-group">
<input class="dbInput form-control" type="number" id="learning_rate"
name="learning_rate" value="0.000002">
</div>
<span class="input-group-btn linkBtn db-advanced">
<button class="btn btn-link btn-sm" type="button">
<i class="bx bx-link"></i>
</button>
</span>
<label class="form-label mt-3 db-advanced" for="txt_learning_rate">Learning
Rate
(Tenc)</label>
<div class="input-group">
<input class="dbInput form-control db-advanced" type="number"
id="txt_learning_rate" name="txt_learning_rate"
value="0.000002">
</div>
</div>
<div class="form-group">
<label class="form-label" for="min_learning_rate">Minimum Learning
Rate</label>
<input class="dbInput form-control" type="number" id="min_learning_rate"
name="min_learning_rate" value="0.000001">
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="10000"
data-step="1" id="lr_warmup_steps" data-value="500"
data-label="LR Warmup Steps"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="1"
data-step="0.001" id="weight_decay" data-value="0.01"
data-label="Weight Decay"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="1"
data-step="0.001" id="tenc_weight_decay"
data-value="0.01"
data-label="TENC Weight Decay"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="-1" data-max="1"
data-step="0.01" id="offset_noise" data-value="0"
data-label="Offset Noise"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="1" data-max="12"
data-step="1" id="clip_skip" data-value="1"
data-label="Clip Skip"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="128"
data-step="0.25" id="tenc_grad_clip_norm" data-value="0"
data-label="TENC Gradient Clip Norm"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="10.0"
data-step="0.1" id="min_snr_gamma" data-value="0.0"
data-label="Min SNR Gamma"></div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="use_dream" name="use_dream">
<label class="form-check-label" for="use_dream">Use DREAM</label>
</div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="1.0"
data-step="0.01" id="dream_detail_preservation" data-value="0.5"
data-label="DREAM detail preservation"></div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="freeze_spectral_norm" name="freeze_spectral_norm">
<label class="form-check-label" for="freeze_spectral_norm">Freeze Spectral Norm</label>
</div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="75" data-max="300"
data-step="75" id="max_token_length" data-value="75"
data-label="Max Token length"></div>
</div>
<div class="form-group">
<div class="dbInput db-slider" data-min="0" data-max="1.0"
data-step="0.01" id="stop_text_encoder"
data-value="0.75"
data-label="Text Encoder Percentage"></div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="shuffle_tags" name="shuffle_tags" checked>
<label class="form-check-label" for="shuffle_tags">Shuffle
Tags</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="strict_tokens"
name="strict_tokens" checked>
<label class="form-check-label" for="strict_tokens">Strict
Tokens</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="gradient_checkpointing"
name="gradient_checkpointing">
<label class="form-check-label" for="gradient_checkpointing">Gradient
Checkpointing</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="gradient_set_to_none"
name="gradient_set_to_none" checked>
<label class="form-check-label" for="gradient_set_to_none">Set
Gradients to None</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="freeze_clip_normalization"
name="gradient_checkpointing">
<label class="form-check-label" for="freeze_clip_normalization">Freeze
CLIP Normalization</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="use_ema" name="use_ema"
data-key="use_ema">
<label class="form-check-label" for="use_ema">Use EMA</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="train_unet" name="train_unet"
data-key="train_unet" checked>
<label class="form-check-label" for="train_unet">Train UNET</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<input class="dbInput form-check-input" type="checkbox"
id="disable_logging" name="disable_logging"
data-key="disable_logging" checked>
<label class="form-check-label" for="disable_logging">Disable
Logging</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4" id="dbStatusCol">
<div class="card shadow" id="dreamStatus">
<div class="card-header">
Output
</div>
<div class="card-body" id="dreamStatusContainer">
<div class="progressGroup" id="dreamProgress"></div>
<div class="image-container inline-gallery-container" id="dreamGallery"></div>
</div>
</div>
</div>
</div>
</div>
</div>