search

demibit / stable-toolkit

fully local image viewer alternative for stable diffusion
GNU General Public License v3.0
55 stars 4 forks source link

Application error: a client-side exception has occurred (see the browser console for more information). #17

Closed ResleyZ closed 1 year ago

ResleyZ commented 1 year ago

Describe the bug Opening 127.0.0.1:8801 only gives a black screen with the text: "Application error: a client-side exception has occurred (see the browser console for more information)."

Toolkit version Which version of the toolkit were you using? 2.7.4

To Reproduce Steps to reproduce the behavior:

  1. Download and run requirements & "download-toolkit.bat"
  2. Run "update-toolkit.bat".
  3. Run "run-toolkit.bat".
  4. Open 127.0.0.1:8801 in Chrome, Edge, Firefox
  5. Receive Application error: a client-side exception has occurred (see the browser console for more information).

Expected behavior After deleting and reinstalling the toolkit, being able to view the site again.

Screenshots Console error 127.0.0.1-1667140281237.log

Desktop (please complete the following information):

Additional notes After being able to access the site once after installation, I could access the settings and image viewer, however, all images were blank/black. I was able to click on them and "open" them, being able to view their information, but the images themselves stayed black.

After deleting everything, including cache and site data, I've received this error. Re-installing the programs specified in Requirements and redownloading stable-toolkit itself has not solved this error.

127.0.0.1-1667140281237.log

demibit commented 1 year ago

2.7.4 is the Spring version number. I'd need the version of the service. It should end with "-luna". You should have a log file called "log.log" in \stable-toolkit\stable-toolkit-back\, could you provide that as well?

ResleyZ commented 1 year ago

Heya, sorry for giving the wrong version number! It's at v2.0.3-luna. I've added the log.log as well!

I'm also not sure if it's just a me problem, if it's one of the required programs being weird, or if it's something completely different, but I'm really interested in this, so hopefully it's something that's not too bad to fix!

log.log

demibit commented 1 year ago

Hmmm, back end seems to have no problems. You say you were able to access the site once. Can you recall the exact steps you took, and when the error occurred?

ResleyZ commented 1 year ago

Hey, yeah, At first I had trouble reaching the page, which was caused because of my VPN running, then I only got a folder view when going to the page, not exactly sure what fixed it then though.

But once I had it running fine, I was trying some stuff with moving the folders, re-indexing them, and all that stuff, and after a reboot of my PC, and restarting the server, that error showed up.

I'll try to completey remove everything related to tthe browser, reinstall everything, and then run it again, basically starting from zero. If that doesn't work, I'll also try to install it on my laptop, just to see if it runs fine.

EDIT: After going through the installs again, I've remembered where I initially had problems. When I installed nodejs, I didn't enable the "Install Additional tools" option, which seems to be required as well. After installing the requirements, and adding everything to PATH, I was unable to correctly run the update-toolkit.bat, because of the VPN, giving npm install timeout errors.

Right now I'm reinstalling everything, and will keep this post updated

EDIT2: After reinstalling everything, adding the directories to the PATH, I get this error when running run-toolkit.bat:

Exception in thread "main" java.lang.UnsupportedClassVersionError: it/demib/stabletoolkitback/StableToolkitBackApplication has been compiled by a more recent version of the Java Runtime (class file version 63.0), this version of the Java Runtime only recognizes class file versions up to 52.0
        at java.lang.ClassLoader.defineClass1(Native Method)
        at java.lang.ClassLoader.defineClass(Unknown Source)
        at java.security.SecureClassLoader.defineClass(Unknown Source)
        at java.net.URLClassLoader.defineClass(Unknown Source)
        at java.net.URLClassLoader.access$100(Unknown Source)
        at java.net.URLClassLoader$1.run(Unknown Source)
        at java.net.URLClassLoader$1.run(Unknown Source)
        at java.security.AccessController.doPrivileged(Native Method)
        at java.net.URLClassLoader.findClass(Unknown Source)
        at java.lang.ClassLoader.loadClass(Unknown Source)
        at org.springframework.boot.loader.LaunchedURLClassLoader.loadClass(LaunchedURLClassLoader.java:151)
        at java.lang.ClassLoader.loadClass(Unknown Source)
        at java.lang.Class.forName0(Native Method)
        at java.lang.Class.forName(Unknown Source)
        at org.springframework.boot.loader.MainMethodRunner.run(MainMethodRunner.java:46)
        at org.springframework.boot.loader.Launcher.launch(Launcher.java:108)
        at org.springframework.boot.loader.Launcher.launch(Launcher.java:58)
        at org.springframework.boot.loader.JarLauncher.main(JarLauncher.java:65)

This was fixed by either removing a previous Java reference in my System PATH, which in this case was C:\Program Files (x86)\Common Files\Oracle\Java\javapath OR by placing the OpenJDK bin higher in the list than the previous java.

I'm sure not everyone will encounter this message, but it's still something that other people might come across.

After fixing this, and running run-toolkit.bat again, I can successfully reach the page again. At this point I select Source, and enter the folder (C:\Users\quila\AI\Automatic1111\stable-diffusion-webui\outputs\images) with my txt2img-images, img2img-images and extras-images, and press Re-index. at this exact moment the error 'Application error: a client-side exception has occurred (see the browser console for more information).' returns again.

Interestingly enough, the log.log file doesn't seem to get updated anymore, since the last rule that was visible in the CMD window, which was me adding the folder, and it recognizing there being 19 images, doesn't show up. It's also several minutes behind from the moment of the error appearing.

log.log

The current text in the run-back.bat window, when restarting run-toolkit again, is this;

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.7.4)

2022-11-02 13:17:41.422  INFO 15236 --- [           main] i.d.s.StableToolkitBackApplication       : Starting StableToolkitBackApplication v2.0.3-luna using Java 19 on Resley-Laptop with PID 15236 (C:\Users\quila\AI\stable-toolkit\stable-toolkit-back\target\stable-toolkit-back-2.0.3-luna.jar started by quila in C:\Users\quila\AI\stable-toolkit\stable-toolkit-back\target)
2022-11-02 13:17:41.424  INFO 15236 --- [           main] i.d.s.StableToolkitBackApplication       : No active profile set, falling back to 1 default profile: "default"
2022-11-02 13:17:41.922  INFO 15236 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data MongoDB repositories in DEFAULT mode.
2022-11-02 13:17:41.977  INFO 15236 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 50 ms. Found 4 MongoDB repository interfaces.
2022-11-02 13:17:42.495  INFO 15236 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8800 (http)
2022-11-02 13:17:42.506  INFO 15236 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2022-11-02 13:17:42.506  INFO 15236 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.65]
2022-11-02 13:17:42.571  INFO 15236 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2022-11-02 13:17:42.572  INFO 15236 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1103 ms
2022-11-02 13:17:42.712  INFO 15236 --- [           main] org.mongodb.driver.client                : MongoClient with metadata {"driver": {"name": "mongo-java-driver|sync|spring-boot", "version": "4.6.1"}, "os": {"type": "Windows", "name": "Windows 11", "architecture": "amd64", "version": "10.0"}, "platform": "Java/Oracle Corporation/19+36-2238"} created with settings MongoClientSettings{readPreference=primary, writeConcern=WriteConcern{w=null, wTimeout=null ms, journal=null}, retryWrites=true, retryReads=true, readConcern=ReadConcern{level=null}, credential=null, streamFactoryFactory=null, commandListeners=[], codecRegistry=ProvidersCodecRegistry{codecProviders=[ValueCodecProvider{}, BsonValueCodecProvider{}, DBRefCodecProvider{}, DBObjectCodecProvider{}, DocumentCodecProvider{}, IterableCodecProvider{}, MapCodecProvider{}, GeoJsonCodecProvider{}, GridFSFileCodecProvider{}, Jsr310CodecProvider{}, JsonObjectCodecProvider{}, BsonCodecProvider{}, EnumCodecProvider{}, com.mongodb.Jep395RecordCodecProvider@2f05be7f]}, clusterSettings={hosts=[localhost:27017], srvServiceName=mongodb, mode=SINGLE, requiredClusterType=UNKNOWN, requiredReplicaSetName='null', serverSelector='null', clusterListeners='[]', serverSelectionTimeout='30000 ms', localThreshold='30000 ms'}, socketSettings=SocketSettings{connectTimeoutMS=10000, readTimeoutMS=0, receiveBufferSize=0, sendBufferSize=0}, heartbeatSocketSettings=SocketSettings{connectTimeoutMS=10000, readTimeoutMS=10000, receiveBufferSize=0, sendBufferSize=0}, connectionPoolSettings=ConnectionPoolSettings{maxSize=100, minSize=0, maxWaitTimeMS=120000, maxConnectionLifeTimeMS=0, maxConnectionIdleTimeMS=0, maintenanceInitialDelayMS=0, maintenanceFrequencyMS=60000, connectionPoolListeners=[], maxConnecting=2}, serverSettings=ServerSettings{heartbeatFrequencyMS=10000, minHeartbeatFrequencyMS=500, serverListeners='[]', serverMonitorListeners='[]'}, sslSettings=SslSettings{enabled=false, invalidHostNameAllowed=false, context=null}, applicationName='null', compressorList=[], uuidRepresentation=JAVA_LEGACY, serverApi=null, autoEncryptionSettings=null, contextProvider=null}
2022-11-02 13:17:42.738  INFO 15236 --- [localhost:27017] org.mongodb.driver.connection            : Opened connection [connectionId{localValue:2, serverValue:34}] to localhost:27017
2022-11-02 13:17:42.738  INFO 15236 --- [localhost:27017] org.mongodb.driver.connection            : Opened connection [connectionId{localValue:1, serverValue:33}] to localhost:27017
2022-11-02 13:17:42.738  INFO 15236 --- [localhost:27017] org.mongodb.driver.cluster               : Monitor thread successfully connected to server with description ServerDescription{address=localhost:27017, type=STANDALONE, state=CONNECTED, ok=true, minWireVersion=0, maxWireVersion=17, maxDocumentSize=16777216, logicalSessionTimeoutMinutes=30, roundTripTimeNanos=27103800}
2022-11-02 13:17:43.404  INFO 15236 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8800 (http) with context path ''
2022-11-02 13:17:43.418  INFO 15236 --- [           main] i.d.s.StableToolkitBackApplication       : Started StableToolkitBackApplication in 2.531 seconds (JVM running for 2.922)
2022-11-02 13:17:43.479  INFO 15236 --- [   scheduling-1] org.mongodb.driver.connection            : Opened connection [connectionId{localValue:3, serverValue:35}] to localhost:27017

Restarting the program, and restarting my laptop does not fix this error again. As such it seems for me that the error starts appearing after I added the output folder as a source, and trying to index it. I could try to get it back running again, this time by either only uninstalling MongoDB+Compass, or only NodeJS.

demibit commented 1 year ago

What a weird bug... I suppose if you ran the front end via "npm run dev" you could get more information, maybe even the exact line causing the issue, but I am not sure how versed you are with React. You could also try using the 2.1.0 branch as it removes the need for Source/Index folders. I'm also thinking it could potentially be something to with the names of your files as well, since the images are request via an API endpoint from the back-end, there are certain rules for request parameters, I can't recall which, but some special characters are not allowed.

ResleyZ commented 1 year ago

I have basically 0 experience with React, but I'm well versed in general PC and IT stuff, so I'll have a look with that.

I will also try the 2.1.0 branch, however, apart from my testing location, which is the regular output folder within the WebUI folder, I do save my images on my other drive, hopefully that won't be a problem with the 2.1.0 version.

Here are some example of my image names, and the folder they are saved in; C:\Users\quila\AI\Automatic1111\stable-diffusion-webui\outputs\images\txt2img-images 00000-1781807638-Masterpiece, best quality, smooth soft skin, big dreamy eyes, beautiful intricate colored hair, symmetrical, anime wide eyes, so.png 00005-3088987420-(((misaka mikoto))), ((tokiwadai school uniform)), (electrokinesis), hair clip, hair ornament, medium hair, messy hair, (electr.png 00007-3357074197-(((misaka mikoto))), ((tokiwadai school uniform)), (electrokinesis), (((full body))), hair clip, hair ornament, medium hair, mes.png 00013-4237575599-(((misaka mikoto))), ((tokiwadai school uniform)), (electrokinesis), (((full body))),((adult)), hair clip, hair ornament, medium.png

demibit commented 1 year ago

Yeah none of my images have the prompt in them, so maybe some special characters can mess things up. I think different drives shouldn't be problem.

If you cmd into the front end folder, you can do "npm run dev" which runs it in dev mode, generally gives much more descriptive error messages and such. Sorry you have to go through all of this by the way, really not sure why this is happening

ResleyZ commented 1 year ago

Yeah none of my images have the prompt in them, so maybe some special characters can mess things up. I think different drives shouldn't be problem.

If you cmd into the front end folder, you can do "npm run dev" which runs it in dev mode, generally gives much more descriptive error messages and such. Sorry you have to go through all of this by the way, really not sure why this is happening

Oh no need to apologize! This is all still a very experimental thing, the main Stable Diffusion stuff, and everything around it, so I would imagine there might be some weird stuff here and there, and I definitely don't mind testing stuff out.

I'll change the names of the images to just stuff like 001, 002, and then boot it again, see what happens. If that doesn't work, I'll try the dev mode stuff, and after that, the 2.1.0 branch.

Also wanted to try some symbolic links / symlink stuff to point resources to another drive, so if everything works and I get around to testing it with symlinks, that might also be interesting :p

EDIT: Changing the image names doesn't work. Reinstalling NodeJS and MongoDB doesn't work either. There are still files left over in AppData / Program Files and stuff, so I'll delete those and install NodeJS and MongoDB again. This might mean that some of the folders might include the "problem" data.

Folders deleted: C:\Program Files\MongoDB C:\Users\quila\AppData\Roaming\MongoDB Compass (has several Cache folders) C:\Users\quila\AppData\Roaming\nextjs-nodejs

So after reinstalling NodeJS and MongoDB again, this time AFTER removing the above three folders, it works again, so I can only assume that the problem stays in one of those folders, presumably the MongoDB Compass folder in AppData, with some of the cache files.

So changed the filenames so they're just 000, 001, 002 and 003 .png and then re-indexing it, and refreshing the page, the same error shows up again. So it doesn't seem to be filename related. I also have the option enabled that saves information in chunks in the PNG file, so I'll turn that off as well, and then try again.

demibit commented 1 year ago

Stale, closing