[Bug]: Token Counter covers entire prompt text box during calculation

Nyksia commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues and checked the recent builds/commits

What happened?

When generating an image, if you edit the prompt and it attempts to recalculate the tokens, the token counter div element overlaps the entire text area, making it impossible to click into it. With some DevTools exploration, I've been able to find that it was specifically the token count div element that was doing it, as hiding it allows to click into the text box.

EDIT: Also the settings option to disable the token counters doesn't actually work.

Steps to reproduce the problem

Generate an image
While image is generating, edit the prompt
Attempt to click into the prompt text box and fail to do so

What should have happened?

You should be able to click into the prompt text box and edit it even during the generation

Version or Commit where the problem happens

https://github.com/anapnoe/stable-diffusion-webui-ux/commit/3843d60ae7a692932db9be5ca33625382be32ee9

What Python version are you running on ?

Python 3.10.x

What platforms do you use to access the UI ?

Windows

What device are you running WebUI on?

Nvidia GPUs (RTX 20 above)

Cross attention optimization

xformers

What browsers do you use to access the UI ?

Microsoft Edge

Command Line Arguments

--api --xformers --upcast-sampling --listen --enable-insecure-extension-access

List of extensions

Console logs

venv "C:\Stable Diffusion\venv\Scripts\Python.exe"
fatal: No names found, cannot describe anything.
Python 3.10.6 (tags/v3.10.6:9c7b4bd, Aug  1 2022, 21:53:49) [MSC v.1932 64 bit (AMD64)]
Version: ## 1.4.0
Commit hash: 3843d60ae7a692932db9be5ca33625382be32ee9
Installing requirements

Launching Web UI with arguments: --api --xformers --upcast-sampling --listen --enable-insecure-extension-access
[-] ADetailer initialized. version: 23.6.4, num models: 8
2023-07-02 08:29:12,808 - ControlNet - INFO - ControlNet v1.1.227
ControlNet preprocessor location: C:\Stable Diffusion\extensions\sd-webui-controlnet\annotator\downloads
2023-07-02 08:29:13,132 - ControlNet - INFO - ControlNet v1.1.227
Loading weights [6a7951c22d] from C:\Stable Diffusion\models\Stable-diffusion\Volatile Breaking Point v2.1.safetensors
Creating model from config: C:\Stable Diffusion\configs\v1-inference.yaml
LatentDiffusion: Running in eps-prediction mode
DiffusionWrapper has 859.52 M params.
Loading VAE weights specified in settings: C:\Stable Diffusion\models\VAE\kl-f8-anime2.ckpt
Applying attention optimization: xformers... done.
Textual inversion embeddings loaded(15): aid28, aid291, bad-artist, bad-artist-anime, bad-hands-5, bad_prompt_version2, badv3, badv5, boring_e621, charturnerv2, deepnegative, deformityv6, easynegative, negative-hand, neutral_shylily
Model loaded in 11.7s (load weights from disk: 0.7s, create model: 1.1s, apply weights to model: 6.5s, apply half(): 1.0s, load VAE: 1.1s, move model to device: 0.9s, load textual inversion embeddings: 0.2s, calculate empty prompt: 0.1s).
preload_extensions_git_metadata for 26 extensions took 2.90s
Running on local URL:  http://0.0.0.0:7860

To create a public link, set `share=True` in `launch()`.
Startup time: 42.2s (import torch: 10.1s, import gradio: 1.7s, import ldm: 1.0s, other imports: 2.9s, setup codeformer: 0.1s, list SD models: 0.2s, load scripts: 8.6s, scripts before_ui_callback: 0.1s, create ui: 12.6s, gradio launch: 4.7s).
100%|██████████████████████████████████████████████████████████████████████████████████| 50/50 [00:14<00:00,  3.48it/s]
        Tile 1/20
        Tile 2/20
        Tile 3/20
        Tile 4/20
        Tile 5/20
        Tile 6/20
        Tile 7/20
        Tile 8/20
        Tile 9/20
        Tile 10/20
        Tile 11/20
        Tile 12/20
        Tile 13/20
        Tile 14/20
        Tile 15/20
        Tile 16/20
        Tile 17/20
        Tile 18/20
        Tile 19/20
        Tile 20/20
100%|██████████████████████████████████████████████████████████████████████████████████| 50/50 [00:54<00:00,  1.09s/it]

Additional information

No response

Nyksia commented 1 year ago

With a bit more exploration, tracked it down specifically to .min.svelte style being applied to it, that sets its minimum height to var(--size-24)

NamelessButler commented 12 months ago

What seems to happen is that the Token Counter gets queued. That happens with negative prompt box as well. If you do anything that takes some times to load, like merging models, and change anything in the prompt box, it will get queued for after the current ongoing task ends.

Nyksia commented 11 months ago

What seems to happen is that the Token Counter gets queued. That happens with negative prompt box as well. If you do anything that takes some times to load, like merging models, and change anything in the prompt box, it will get queued for after the current ongoing task ends.

Oh no that alone wouldn't be the problem. It is the fact that a style gets applied to the token counter CSS element, causing its minimum size to be too large and overlap with the prompt box that is the issue. Because using DevTools and disabling that size override allows to edit the prompts just fine. If anything, it seems like an oversight with how token counter has that size override during recalculation specifically.

SirVeggie commented 11 months ago

A temporary workaround is to add the following rule to the user.css file:

.token-counter {
    pointer-events: none;
}

Edited based on the comments below

Nyksia commented 11 months ago

A temporary workaround is to add the following rule to the user.css file:

Nice, I knew there was a way to do that, but I just didn't know which file I should be modifying to jury rig a fix.

Nyksia commented 11 months ago

So few things to note:

You may need to create the user.css file.
The provided example of how to fix that would only apply to positive prompt's token counter, and only in txt2img. Better way to go about would be:
```
.token-counter {
pointer-events: none;
}
```
Using .token-counter class selector instead will make it apply to all token counters instead.

anapnoe / stable-diffusion-webui-ux