search

Gerschel / sd-web-ui-quickcss

I just setup a quick css apply using the style here https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/5813 This is a tool for designers to worry more about designing their css, rather than worry about how to manage them for sd-web-ui
71 stars 8 forks source link

retrowave.css and matrix.css make OpenOutpaint Extension canvas area black #6

Open AxelFar94 opened 1 year ago

AxelFar94 commented 1 year ago

image Can't use the Extension with this themes, probably some part of the code is blocking the openOutpaint view with a black color.

Gerschel commented 1 year ago

I tried poking around their code to see where the collision is. I'm not certain where the source of the window in the middle is from. See if you can open devtools and check the styles that are applied to it.

AxelFar94 commented 1 year ago

@Gerschel I Don't know how to do what you mentioned, but i find out that the problem is the radius slider, once i set it to 0 it goes back to normal, it may be affecting the middle windows in some form, as it is this middle window that make it all goes black.

Gerschel commented 1 year ago

I haven't forgotten about this. I'm currently working through some issues on several extensions created by major changes in the sd webui.

Gerschel commented 1 year ago

There have been some ui changes, and @Nacurutu has done some updates. I don't believe this would be solved, as I think it's an iframe with some of it's own css. I'd imagine that project was forced to make some changes as well, to continue working with the main app.
I'm not likely to install this extension to test just yet, I'm low on some hard drive space while I'm working on projects with a lot of checkpoints.
I'm reluctant to add specific support for it at this time, we keep having a moving target just on the main app, which I know will make their project do changes, and to have an extra moving target per update will increase the maintenance efforts.

Once some of the ui elements seem to stick with some naming conventions, it'll become easier to target and maintain, then we'll be able to reduce to a base template that we can build off of for the edge cases.

Nacurutu commented 1 year ago

@Gerschel @AxelFar94

I created a new webUI instance just to test this, however, the extension is broken at the moment. After they fix the bug it has, I will try again and see what's going on with the themes and that extension and try to fix it.

https://github.com/zero01101/openOutpaint/issues/183

zero01101 commented 1 year ago

hey there,

so as of yesterday afternoon the openOutpaint extension should have at least worked as in not causing webUI to error out - the issue about the upscalers conking out webUI was given a temporary workaround to make it operational again, but for what it's worth, now works as originally expected against the API endpoint.

and correct, the openOutpaint interface is indeed simply an iframe hosting a "local" webpage that exists in a submodule in the extension's install directory which of course has plenty of its own CSS... i admit i haven't used this extension, much less even tried messing with other sites' CSS in any real extent however lol so i'm not entirely sure how to assist here :/

https://github.com/zero01101/openOutpaint/tree/main/css is everything that either openOutpaint or its sister extension would be relying upon but that was probably somewhat obvious already ;)

Nacurutu commented 1 year ago

I updated and tested the openOutpaint extension with the retrowave.css file, and as you said, the background is black.

However, tried with Matrix, Alani, and Neon and everything is working properly.

image

zero01101 commented 1 year ago

so for what it's worth, i installed the extension directly from the webUI gallery, received console errors because new extensions sometimes do that, restarted webUI, got more errors seemingly related to missing images: 

Error loading script: updater.py
Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\modules\scripts.py", line 229, in load_scripts
    script_module = script_loading.load_module(scriptfile.path)
  File "E:\storage\stable-diffusion-webui\modules\script_loading.py", line 13, in load_module
    exec(compiled, module.__dict__)
  File "E:\storage\stable-diffusion-webui\extensions\sd-web-ui-quickcss\scripts\updater.py", line 67, in <module>
    BasicUpdater()
  File "E:\storage\stable-diffusion-webui\extensions\sd-web-ui-quickcss\scripts\updater.py", line 52, in __init__
    self.clone_file(fd)
  File "E:\storage\stable-diffusion-webui\extensions\sd-web-ui-quickcss\scripts\updater.py", line 65, in clone_file
    shutil.copy(from_file, to_file)
  File "D:\programs\x64\python\3.10.6\lib\shutil.py", line 417, in copy
    copyfile(src, dst, follow_symlinks=follow_symlinks)
  File "D:\programs\x64\python\3.10.6\lib\shutil.py", line 254, in copyfile
    with open(src, 'rb') as fsrc:
FileNotFoundError: [Errno 2] No such file or directory: 'E:\\storage\\stable-diffusion-webui\\extensions\\sd-web-ui-quickcss\\logos\\208246354-e80714ab-71e9-48dd-a233-7012bf87335f.png'
ERROR←[0m:    Exception in ASGI application
Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 94, in receive
    return self.receive_nowait()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 89, in receive_nowait
    raise WouldBlock
anyio.WouldBlock

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 77, in call_next
    message = await recv_stream.receive()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 114, in receive
    raise EndOfStream
anyio.EndOfStream

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\protocols\http\h11_impl.py", line 407, in run_asgi
    result = await app(  # type: ignore[func-returns-value]
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\middleware\proxy_headers.py", line 78, in __call__
    return await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\applications.py", line 270, in __call__
    await super().__call__(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\applications.py", line 124, in __call__
    await self.middleware_stack(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 184, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 162, in __call__
    await self.app(scope, receive, _send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 106, in __call__
    response = await self.dispatch_func(request, call_next)
  File "E:\storage\stable-diffusion-webui\modules\api\api.py", line 96, in log_and_time
    res: Response = await call_next(req)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 80, in call_next
    raise app_exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 69, in coro
    await self.app(scope, receive_or_disconnect, send_no_error)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 24, in __call__
    await responder(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 43, in __call__
    await self.app(scope, receive, self.send_with_gzip)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\cors.py", line 84, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 79, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 68, in __call__
    await self.app(scope, receive, sender)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 21, in __call__
    raise e
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 18, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 706, in __call__
    await route.handle(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 276, in handle
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 69, in app
    await response(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\responses.py", line 334, in __call__
    raise RuntimeError(f"File at path {self.path} does not exist.")
RuntimeError: File at path E:\storage\stable-diffusion-webui\logo.png does not exist.
ERROR←[0m:    Exception in ASGI application
Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 94, in receive
    return self.receive_nowait()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 89, in receive_nowait
    raise WouldBlock
anyio.WouldBlock

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 77, in call_next
    message = await recv_stream.receive()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 114, in receive
    raise EndOfStream
anyio.EndOfStream

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\protocols\http\h11_impl.py", line 407, in run_asgi
    result = await app(  # type: ignore[func-returns-value]
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\middleware\proxy_headers.py", line 78, in __call__
    return await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\applications.py", line 270, in __call__
    await super().__call__(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\applications.py", line 124, in __call__
    await self.middleware_stack(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 184, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 162, in __call__
    await self.app(scope, receive, _send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 106, in __call__
    response = await self.dispatch_func(request, call_next)
  File "E:\storage\stable-diffusion-webui\modules\api\api.py", line 96, in log_and_time
    res: Response = await call_next(req)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 80, in call_next
    raise app_exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 69, in coro
    await self.app(scope, receive_or_disconnect, send_no_error)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 24, in __call__
    await responder(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 43, in __call__
    await self.app(scope, receive, self.send_with_gzip)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\cors.py", line 84, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 79, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 68, in __call__
    await self.app(scope, receive, sender)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 21, in __call__
    raise e
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 18, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 706, in __call__
    await route.handle(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 276, in handle
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 69, in app
    await response(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\responses.py", line 334, in __call__
    raise RuntimeError(f"File at path {self.path} does not exist.")
RuntimeError: File at path E:\storage\stable-diffusion-webui\static\background.png does not exist.
ERROR←[0m:    Exception in ASGI application
Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 94, in receive
    return self.receive_nowait()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 89, in receive_nowait
    raise WouldBlock
anyio.WouldBlock

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 77, in call_next
    message = await recv_stream.receive()
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\anyio\streams\memory.py", line 114, in receive
    raise EndOfStream
anyio.EndOfStream

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\protocols\http\h11_impl.py", line 407, in run_asgi
    result = await app(  # type: ignore[func-returns-value]
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\uvicorn\middleware\proxy_headers.py", line 78, in __call__
    return await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\applications.py", line 270, in __call__
    await super().__call__(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\applications.py", line 124, in __call__
    await self.middleware_stack(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 184, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 162, in __call__
    await self.app(scope, receive, _send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 106, in __call__
    response = await self.dispatch_func(request, call_next)
  File "E:\storage\stable-diffusion-webui\modules\api\api.py", line 96, in log_and_time
    res: Response = await call_next(req)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 80, in call_next
    raise app_exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\base.py", line 69, in coro
    await self.app(scope, receive_or_disconnect, send_no_error)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 24, in __call__
    await responder(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 43, in __call__
    await self.app(scope, receive, self.send_with_gzip)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\cors.py", line 84, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 79, in __call__
    raise exc
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 68, in __call__
    await self.app(scope, receive, sender)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 21, in __call__
    raise e
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 18, in __call__
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 706, in __call__
    await route.handle(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 276, in handle
    await self.app(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 69, in app
    await response(scope, receive, send)
  File "E:\storage\stable-diffusion-webui\venv\lib\site-packages\starlette\responses.py", line 334, in __call__
    raise RuntimeError(f"File at path {self.path} does not exist.")
RuntimeError: File at path E:\storage\stable-diffusion-webui\logo.png does not exist.

aside from that however, it seems "Gerschel - Matrix" displays openOutpaint extension correctly:

image

i manually copied retrowave out of the styles needing updates folder into style_choices but openOutpaint still appears to work as expected?

image

i mean i had kind of figured i'd find some clashing class name and just disable it and say "ok yeah #canvas-class-name-thing is blah blah" but uh, works on my machine dot jpg

win10x64, firefox 109

Nacurutu commented 1 year ago

RuntimeError: File at path E:\storage\stable-diffusion-webui\logo.png does not exist.

If you are using Matrix, Alani or Neon, as the CSS file looks for a logo, if you haven't assigned one from the extension, it is going to show the error.

RuntimeError: File at path E:\storage\stable-diffusion-webui\static\background.png does not exist. In this case, I don't know why sometimes this happens, maybe @Gerschel has a better answer.

What I did to avoid it, I created a folder named Static in the webUI root folder. the error disappeared.

Also, what you can do: Go to the extension folder, delete the quickcss extension folder and install the extension again.

zero01101 commented 1 year ago

If you are using Matrix, Alani or Neon, as the CSS file looks for a logo, if you haven't assigned one from the extension, it is going to show the error.

i wasn't using any themes at all the first time i saw those; i got file not found errors on a fresh install immediately after it finished cloning, as well as initial boot after closing/restarting webUI

it doesn't seem to conk out any other functionality or anything, moreso just a console-spam "hey you might want to look into this sometime" kinda thing :)

Nacurutu commented 1 year ago

yes, it is just the extension printing what Is not found, if you haven't selected any style, just select one, apply the style, then reload the UI... also select a logo and apply it...

also, manually create the static folder.

At least the 2 errors I mentioned in the previous post should disappear.

Let me know :)

Gerschel commented 1 year ago

Default files need updating to images that were just changed.
image

Gerschel commented 1 year ago

Just pushed an update. Overall, it's supposed to check and create the static folder, use the defaults and place them in the folder. But since the filenames were changed, it errored out and didn't build this builder.

I used a raw text string for favicon original, because it has a space in it's name, it appeared to work on my end.

You don't need to reinstall. For this you can do a pull.

I have a file in the repository called update, it's just a blank file. If the file exists, the updater.py file continues with writing changes. Then it deletes this file so it does not try to do it every run. If for some reason you need it to run, you can touch update in linux, or type nul > update in windows, in this extensions directory.

I use this method of updating, because the install.py only runs during a full reboot, this way I can update when the user uses the Apply and retart ui button in the extensions tab.

The install.py is the bane of a lot of problems with updates, because only half the stuff update without it, causing others to have to reboot and refresh cache.

Gerschel commented 1 year ago

This patch solves the static directory problem.

\static\background.png does not exist.

But now the css needs an update to use the static folder. For this issue.

stable-diffusion-webui\logo.png does not exist

And quickcss.py needs to do the swap in static instead of root.
image

Working on quickcss.py right now.

Gerschel commented 1 year ago

Just pushed update where quickcss.py saves to static instead of root. Matrix, alani, neon reference static folder.
If you have a reference to favicon in webui.py, it will need to be changed to static/favicon

Gerschel commented 1 year ago

Update pushed. Now uses static folder for each file. I created a favicon workaround, so the webui.py file does not need modification. This fix also allows it to be extended to make favicons hot swappable.

So now you wont see errors about a missing logo or favicon. It will retrieve defaults if you have not set any.

zero01101 commented 1 year ago

yep, can confirm no more console spam, nice 👍

however that still doesn't change the fact that i was unable to confirm conflicting styles with the openOutpaint canvas in the first place lmao ;)

Nacurutu commented 1 year ago

yep, can confirm no more console spam, nice 👍

however that still doesn't change the fact that i was unable to confirm conflicting styles with the openOutpaint canvas in the first place lmao ;)

using retrowave will brake the layout, the retrowave author hasn't updated the file, broken CSS files were moved to a new folder, the ones with updates at the moment are matrix, alani and neon. Give them a try.

AxelFar94 commented 1 year ago

When moving the UI Radius slider OpenOutpaint becomes black in any theme, even if i move it back to original (19 in case of the matrix theme), it's still black, then it only goes back to normal when i set it to zero, so probably part of the code of that option is causing the conflict.

Gerschel commented 1 year ago

@AxelFar94 That's interesting, that's a good lead, that's weird.

Gerschel commented 1 year ago

Okay, this is a known issue with iframes, as they are treated as separate web sites. The best that can be done is wrapping an iframe with a container, and altering the container. Or drilling in to the iframe as a separate entity and adjusting it on that end, if we have access to the iframe as if it was our own.

Personally, iframes were considered a bad hack umpteen years ago, where in the situation an app would need to use the iframe, it's better to transfer the necessary data and render it using your components, allowing you to fit it as you need. This is better for protecting users from content that other sites can host (ads, viruses, etc.). There is no good reason to build support for it, as it is a dieing piece of tech.

Gerschel commented 1 year ago

@zero01101 With the iframe, I'm curious if there is some techinical reason for it. I totally understand, "just keeping it running keeps me from properly implementing what it needs", and the "too much going on at once", and the "I hit the ground running getting my idea out with the easiest I can do so I can actually get it out (not get stuck over-optimizing it)".

I might be able to help you improve that bit. What does the iframe host? Is it a necessary evil? Like, can I help you swap it out for a canvas and pipe data through JSON?

zero01101 commented 1 year ago

With the iframe, I'm curious if there is some techinical reason for it

lol well openOutpaint is a completely vanilla javascript and HTML canvas application that exists outside of A1111 webUI aside from relying on the API; the extension is merely a convenience to expose that app directly in webUI

[edit]

i did just reinstall the extension again and tried both retrowave (copied from the "styles needing updates" folder) and matrix with various radius values between 0-100 and openOutpaint extension still worked as expected with each change, no black overlay :/ has anyone experiencing that maybe just clicked where the canvas should be with the element selector in their browser's dev tools and see what element id it is potentially overlaying it, and if it is indeed an overlay, maybe just tried deleting it out of the DOM? if not an overlay, i'd really guess it's an undesired class being applied to the canvas somehow, but yeah, i really can't reproduce it