widgets_en.py

#!/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='2WRNUNr4mA4xBM7dlZuscgyXSR7_4tisCAo2kfWagu1z4fgCL', 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, 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)