add privacy blur for tokens in ui

Signed-off-by: Vladimir Mandic <mandic00@live.com>

CHANGELOG.md

@@ -1,8 +1,8 @@
 # Change Log for SD.Next
 
-## Update for 2025-08-08
+## Update for 2025-08-09
 
-### Highlights for 2025-08-08
+### Highlights for 2025-08-09
 
 Several new models: [Qwen-Image](https://qwenlm.github.io/blog/qwen-image/), [FLUX.1-Krea-Dev](https://www.krea.ai/blog/flux-krea-open-source-release)  
 And several updated models: [Chroma](https://huggingface.co/lodestones/Chroma), [SkyReels-V2](https://huggingface.co/Skywork/SkyReels-V2-DF-14B-720P-Diffusers), [Wan-VACE](https://huggingface.co/Wan-AI/Wan2.1-VACE-14B-diffusers)  
@@ -12,7 +12,7 @@ And (*as always*) many bugfixes and improvements to existing features!
 
 [ReadMe](https://github.com/vladmandic/automatic/blob/master/README.md) | [ChangeLog](https://github.com/vladmandic/automatic/blob/master/CHANGELOG.md) | [Docs](https://vladmandic.github.io/sdnext-docs/) | [WiKi](https://github.com/vladmandic/automatic/wiki) | [Discord](https://discord.com/invite/sd-next-federal-batch-inspectors-1101998836328697867)
 
-### Details for 2025-08-07
+### Details for 2025-08-09
 
 - **Models**  
   - [Qwen-Image](https://qwenlm.github.io/blog/qwen-image/)  
@@ -66,7 +66,8 @@ And (*as always*) many bugfixes and improvements to existing features!
   - gallery bypass browser cache for thumbnails  
   - gallery safer delete operation  
   - networks display indicator for currently active items  
-    styles, loras  
+    applies to: *styles, loras*  
+  - apply privacy blur to hf and civitai tokens  
   - *hint*: card layout  
     card layout is used by networks, gallery, civitai search, etc.  
     you can change card size in *settings -> user interface*  

javascript/sdnext.css

@@ -2067,6 +2067,18 @@ div:has(>#tab-gallery-folders) {
   font-weight: normal;
 }
 
+.token {
+  filter: blur(4px);
+}
+
+.token:hover {
+  filter: blur(0px);
+}
+
+.token:focus {
+  filter: blur(0px);
+}
+
 @keyframes move {
   from {
     background-position-x: 0, -40px;

modules/ui_models.py

@@ -498,7 +498,7 @@ def create_ui():
                 with gr.Accordion(label='Advanced', open=False, elem_id="civitai_search_options"):
                     civit_download_btn = gr.Button(value="Download model", variant='primary', elem_id="civitai_download_btn", visible=False)
                     with gr.Row():
-                        civit_token = gr.Textbox(opts.civitai_token, label='CivitAI token', placeholder='optional access token for private or gated models')
+                        civit_token = gr.Textbox(opts.civitai_token, label='CivitAI token', placeholder='optional access token for private or gated models', elem_id="civitai_token")
                     with gr.Row():
                         civit_nsfw = gr.Checkbox(label='NSFW allowed', value=True)
                     with gr.Row():
@@ -534,17 +534,16 @@ def create_ui():
                         hf_search_text = gr.Textbox('', label='Search models', placeholder='search huggingface models')
                         hf_search_btn = ToolButton(value=ui_symbols.search)
                     with gr.Row():
-                        with gr.Column(scale=2):
-                            with gr.Row():
-                                hf_selected = gr.Textbox('', label='Select model', placeholder='select model from search results or enter model name manually')
-                        with gr.Column(scale=1):
-                            with gr.Row():
-                                hf_variant = gr.Textbox('', label='Specify model variant', placeholder='')
-                                hf_revision = gr.Textbox('', label='Specify model revision', placeholder='')
-                    with gr.Row():
-                        hf_token = gr.Textbox(opts.huggingface_token, label='Huggingface token', placeholder='optional access token for private or gated models')
-                        hf_mirror = gr.Textbox('', label='Huggingface mirror', placeholder='optional mirror site for downloads')
-                        hf_custom_pipeline = gr.Textbox('', label='Custom pipeline', placeholder='optional pipeline for downloads')
+                        hf_selected = gr.Textbox('', label='Select model', placeholder='select model from search results or enter model name manually')
+                    with gr.Accordion(label='Advanced', open=False, elem_id="hf_search_options"):
+                        with gr.Row():
+                            hf_token = gr.Textbox(opts.huggingface_token, label='Huggingface token', placeholder='optional access token for private or gated models', elem_id="hf_token")
+                        with gr.Row():
+                            hf_variant = gr.Textbox('', label='Specify model variant', placeholder='')
+                            hf_revision = gr.Textbox('', label='Specify model revision', placeholder='')
+                        with gr.Row():
+                            hf_mirror = gr.Textbox('', label='Huggingface mirror', placeholder='optional mirror site for downloads')
+                            hf_custom_pipeline = gr.Textbox('', label='Custom pipeline', placeholder='optional pipeline for downloads')
                 with gr.Column(scale=1):
                     gr.HTML('<br>')
                     hf_download_model_btn = gr.Button(value="Download model", variant='primary')