kagglee / widgets_en.py
duhking's picture
Update widgets_en.py
c2fde1e verified
#!/usr/bin/env python
# coding: utf-8
# In[ ]:
##~ WIDGET CODE | BY: ANXETY ~##
import os
import json
import ipywidgets as widgets
from ipywidgets import widgets, Layout, Label, Button, VBox, HBox
from IPython.display import display, HTML, Javascript, clear_output
# ================= DETECT ENV =================
def detect_environment():
environments = {
'COLAB_GPU': ('Google Colab', "/content"),
'KAGGLE_URL_BASE': ('Kaggle', "/kaggle/working/content"),
'SAGEMAKER_INTERNAL_IMAGE_URI': ('SageMaker Studio Lab', "/home/studio-lab-user/content")
}
for env_var, (environment, path) in environments.items():
if env_var in os.environ:
return environment, path
env, root_path = detect_environment()
webui_path = f"{root_path}/sdw"
get_ipython().system('mkdir -p {root_path}')
# ----------------------------------------------
# ==================== CSS JS ====================
CSS = '''
<style>
/* General Styles */
.header {
font-family: cursive;
font-size: 20px;
font-weight: bold;
color: #ff8cee;
margin-bottom: 15px;
user-select: none;
cursor: default;
display: inline-block;
}
hr {
border-color: grey;
background-color: grey;
opacity: 0.25;
}
/* Container style */
.container {
position: relative;
background-color: #232323;
width: 1080px;
padding: 10px 15px;
border-radius: 15px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
margin-bottom: 5px;
overflow: visible;
}
.container::after {
position: absolute;
top: 5px;
right: 10px;
content: "ANXETY";
font-weight: bold;
font-size: 24px;
color: rgba(0, 0, 0, 0.15);
}
.container_custom_downlad {
height: 55px;
overflow: hidden;
transition: all 0.5s;
}
.container_custom_downlad.expanded {
height: 270px;
}
/* Element text style */
.widget-html,
.widget-button,
.widget-text label,
.widget-checkbox label,
.widget-dropdown label,
.widget-dropdown select,
.widget-text input[type="text"] {
font-family: cursive;
font-size: 14px;
color: white !important;
user-select: none;
}
.widget-text input[type="text"]::placeholder {
color: grey;
}
/* Input field styles */
.widget-dropdown select,
.widget-text input[type="text"] {
height: 30px;
background-color: #1c1c1c;
border: 1px solid #262626;
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
}
.widget-dropdown select:focus,
.widget-text input[type="text"]:focus {
border-color: #006ee5;
}
.widget-dropdown select:hover,
.widget-text input[type="text"]:hover {
transform: scale(1.003);
background-color: #262626;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Button styles */
.button_save {
font-size: 15px;
font-weight: bold;
width: 120px;
height: 35px;
border-radius: 15px;
background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
background-size: 200% 200%;
background-position: left bottom;
transition: background 0.5s ease-in-out, transform 0.3s ease;
}
.button_save:hover {
cursor: pointer;
background-image: radial-gradient(circle at top left, purple 10%, #93ac47 90%);
background-size: 200% 200%;
background-position: right bottom;
transform: translateY(1px);
}
.button_ngrok {
font-size: 12px;
height: 30px;
border-radius: 10px;
padding: 1px 12px;
background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
background-size: 200% 200%;
background-position: left bottom;
transition: background 0.5s ease-in-out, transform 0.3s ease;
white-space: nowrap;
}
.button_ngrok:hover {
cursor: pointer;
background-image: radial-gradient(circle at top left, purple 10%, #e2a9a8 90%);
background-size: 200% 200%;
background-position: right bottom;
transform: translateY(1px);
}
.button_save:active,
.button_ngrok:active {
filter: brightness(0.75);
}
/* Popup style of `FAQ` window */
.info {
position: absolute;
top: -5px;
right: 95px;
color: grey;
font-family: cursive;
font-size: 14px;
font-weight: normal;
user-select: none;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: inline-block;
}
.popup {
position: absolute;
top: 120px;
z-index: 999;
width: auto;
padding: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 8px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
opacity: 0;
color: #fff;
font-size: 16px;
font-family: cursive;
user-select: none;
cursor: default;
pointer-events: none;
transform: rotate(-5deg);
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.sample {
display: inline-block;
margin-top: 25px;
padding: 10px 100px;
background-color: rgba(255, 255, 255, 0.2);
color: #c6e2ff;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 25px rgba(255, 255, 255, 0.2);
}
.info.showed {
opacity: 1;
pointer-events: auto;
}
.info:hover + .popup {
top: 35px;
opacity: 1;
pointer-events: initial;
transform: rotate(0deg);
}
/* Animation of elements */
.container,
.button_save {
animation-name: showedWidgets;
animation-duration: 1s;
}
@keyframes showedWidgets {
0% {
transform: translate3d(-65%, 15%, 0) scale(0) rotate(15deg);
filter: blur(25px) grayscale(1) brightness(0.3);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
filter: blur(0) grayscale(0) brightness(1);
opacity: 1;
}
}
</style>
<!-- TOGGLE 'CustomDL' SCRIPT -->
<script>
function toggleContainer() {
let downloadContainer = document.querySelector('.container_custom_downlad');
let info = document.querySelector('.info');
downloadContainer.classList.toggle('expanded');
info.classList.toggle('showed');
}
</script>
'''
display(HTML(CSS))
# ==================== CSS JS ====================
# ==================== WIDGETS ====================
# --- global widgets ---
style = {'description_width': 'initial'}
layout = widgets.Layout(min_width='1047px')
HR = widgets.HTML('<hr>')
# --- MODEL ---
model_header = widgets.HTML('<div class="header">Model Selection<div>')
model_options = ['none',
'1.Anime (by Xpuct) + INP',
'2.Cetus-Mix [Anime] [V4] + INP',
'3.Counterfeit [Anime] [V3] + INP',
'4.CuteColor [Anime] [V3]',
'5.Dark-Sushi-Mix [Anime]',
'6.Meina-Mix [Anime] [V11] + INP',
'7.Mix-Pro [Anime] [V4] + INP',
'8.BluMix [Anime] [V7]']
# ---
Model_widget = widgets.Dropdown(options=model_options, value='6.Meina-Mix [Anime] [V11] + INP', description='Model:', style=style, layout=layout)
Model_Num_widget = widgets.Text(description='Model Number:', placeholder='Enter the model numbers to be downloaded using comma/space.', style=style, layout=layout)
Inpainting_Model_widget = widgets.Checkbox(value=False, description='Inpainting Models', style=style)
display(widgets.VBox([model_header, Model_widget, Model_Num_widget, Inpainting_Model_widget]).add_class("container"))
# --- VAE ---
vae_header = widgets.HTML('<div class="header" >VAE Selection</div>')
vae_options = ['none',
'1.Anime.vae',
'2.Anything.vae',
'3.Blessed2.vae',
'4.ClearVae.vae',
'5.WD.vae']
Vae_widget = widgets.Dropdown(options=vae_options, value='3.Blessed2.vae', description='Vae:', style=style, layout=layout)
Vae_Num_widget = widgets.Text(description='Vae number:', placeholder='Enter the vae numbers to be downloaded using comma/space.', style=style, layout=layout)
display(widgets.VBox([vae_header, Vae_widget, Vae_Num_widget]).add_class("container"))
# --- ADDITIONAL ---
additional_header = widgets.HTML('<div class="header">Additional</div>')
latest_webui_widget = widgets.Checkbox(value=True, description='Update WebUI', style=style)
latest_exstensions_widget = widgets.Checkbox(value=True, description='Update Extensions', style=style)
detailed_download_widget = widgets.Dropdown(options=['off', 'on'], value='off', description='Detailed Download:', style=style)
latest_changes_widget = HBox([latest_webui_widget, latest_exstensions_widget, detailed_download_widget], layout=widgets.Layout(justify_content='space-between'))
controlnet_options = ['none', 'ALL', '1.canny',
'2.openpose', '3.depth',
'4.normal_map', '5.mlsd',
'6.lineart', '7.soft_edge',
'8.scribble', '9.segmentation',
'10.shuffle', '11.tile',
'12.inpaint', '13.instruct_p2p']
# ---
controlnet_widget = widgets.Dropdown(options=controlnet_options, value='none', description='ControlNet:', style=style, layout=layout)
controlnet_Num_widget = widgets.Text(description='ControlNet Number:', placeholder='Enter the ControlNet model numbers to be downloaded using comma/space.', style=style, layout=layout)
commit_hash_widget = widgets.Text(description='Commit Hash:', style=style, layout=layout)
optional_huggingface_token_widget = widgets.Text(description='Huggingface token:', style=style, layout=layout)
ngrok_token_widget = widgets.Text(description='Ngrok token:',value='2dgBGDLdlLPU0DqzdbxsuhaPi4I_6FsVii7A6xERFSCdSKgQV', style=style, layout=widgets.Layout(width='1047px'))
ngrock_button = widgets.HTML('<a href="https://dashboard.ngrok.com/get-started/your-authtoken" target="_blank">Get Ngrok Token</a>').add_class("button_ngrok")
ngrok_widget = widgets.HBox([ngrok_token_widget, ngrock_button], style=style, layout=layout)
# ---
commandline_arguments_options = "--listen --enable-insecure-extension-access --theme dark --no-half-vae --disable-console-progressbars --xformers"
commandline_arguments_widget = widgets.Text(description='Arguments:', value=commandline_arguments_options, style=style, layout=layout)
display(widgets.VBox([
additional_header, latest_changes_widget, HR, controlnet_widget, controlnet_Num_widget, commit_hash_widget, optional_huggingface_token_widget, ngrok_widget, HR, commandline_arguments_widget
]).add_class("container"))
# --- CUSTOM DOWNLOAD ---
custom_download_header_popup = widgets.HTML('''
<style>
/* Term Colors */
.sample_label {color: #dbafff;}
.braces {color: #ffff00;}
.extension {color: #eb934b;}
.file_name {color: #ffffd8;}
</style>
<div class="header" style="cursor: pointer;" onclick="toggleContainer()">Custom Download</div>
<!-- PopUp Window -->
<div class="info">FAQ?</div>
<div class="popup">
Separate multiple URLs with a comma/space. For a <span class="file_name">custom name</span> file/extension, specify it with <span class="braces">[]</span>
after the URL without spaces.
<span style="color: #ff9999">For files, be sure to specify</span> - <span class="extension">Filename Extension.</span>
<div class="sample">
<span class="sample_label">Example for File:</span>
https://civitai.com/api/download/models/229782<span class="braces">[</span><span class="file_name">Detailer</span><span class="extension">.safetensors</span><span class="braces">]</span>
<br>
<span class="sample_label">Example for Extension:</span>
https://github.com/hako-mikan/sd-webui-regional-prompter<span class="braces">[</span><span class="file_name">Regional-Prompter</span><span class="braces">]</span>
</div>
</div>
''')
# ---
Model_url_widget = widgets.Text(description='Model:', style=style, layout=layout)
Vae_url_widget = widgets.Text(description='Vae:', style=style, layout=layout)
LoRA_url_widget = widgets.Text(description='LoRa:', style=style,value = 'https://huggingface.co/duhking/kagglee/resolve/main/gate.safetensors?download=true' , layout=layout)
Embedding_url_widget = widgets.Text(description='Embedding:', style=style, layout=layout)
Extensions_url_widget = widgets.Text(description='Extensions:',value = 'https://github.com/BlafKing/sd-civitai-browser-plus.git', style=style, layout=layout)
custom_file_urls_widget = widgets.Text(description='File (txt):', style=style, layout=layout)
display(widgets.VBox([
custom_download_header_popup, Model_url_widget, Vae_url_widget, LoRA_url_widget, Embedding_url_widget, Extensions_url_widget, custom_file_urls_widget
]).add_class("container").add_class("container_custom_downlad"))
# --- Save Button ---
save_button = widgets.Button(description='Save').add_class("button_save")
display(save_button)
# ============ Load / Save - Settings V2 ============
SETTINGS_FILE = f'{root_path}/settings.json'
settings_keys = [
'Model', 'Model_Num', 'Inpainting_Model',
'Vae', 'Vae_Num',
'latest_webui', 'latest_exstensions', 'detailed_download',
'controlnet', 'controlnet_Num', 'commit_hash', 'optional_huggingface_token',
'ngrok_token', 'commandline_arguments',
'Model_url', 'Vae_url', 'LoRA_url', 'Embedding_url', 'Extensions_url', 'custom_file_urls'
]
def save_settings():
settings = {key: globals()[f"{key}_widget"].value for key in settings_keys}
with open(SETTINGS_FILE, 'w') as f:
json.dump(settings, f)
def load_settings():
if os.path.exists(SETTINGS_FILE):
with open(SETTINGS_FILE, 'r') as f:
settings = json.load(f)
for key in settings_keys:
globals()[f"{key}_widget"].value = settings.get(key)
def save_data(button):
save_settings()
widgets.Widget.close_all()
settings = load_settings()
save_button.on_click(save_data)