Dead "NEW React UI" link

[darkvertex]

The line:

tts-generation-webui/server.py

Line 62 in c1013de

"# TTS Generation WebUI (Bark, MusicGen + AudioGen, Tortoise, RVC) [NEW React UI](http://localhost:3000)"

...adds a "NEW React UI" markdown link in the header that goes to localhost:3000 but there seems to be nothing set up to actually run anything on this port.

Is the docker-compose.yml missing something?

[rsxdalv]

The server.py should launch the Node.js process on 3000. I think it's the port that's not exposed. Maybe there's something more missing.

…

On Sun, Mar 17, 2024, 11:49 PM Alan Fregtman ***@***.***> wrote: The line: https://github.com/rsxdalv/tts-generation-webui/blob/c1013de6a03cdf0898c577ce0b579be5ad18bf40/server.py#L62 ...adds a "NEW React UI" markdown link in the header that goes to localhost:3000 but there seems to be nothing set up to actually run anything on this port. Is the docker-compose.yml missing something? — Reply to this email directly, view it on GitHub <#290>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTRXIYKKKHC7YSY666RWVDYYYFUXAVCNFSM6AAAAABE2RBHB6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4TAOBYGEZTQOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[darkvertex]

Hmm, when launching the Docker image (ghcr.io/rsxdalv/tts-generation-webui:main) at the time of writing, I see:
/bin/sh: 1: npm: not found

I guess that's it; npm is missing.

Also missing is a line to expose port 3000 in the docker-compose.yml:

tts-generation-webui/docker-compose.yml

Line 6 in c1013de

ports:

[rsxdalv]

Thanks, I will fix it.

[rsxdalv]

I pushed the update. Please test the new image and let me know how it goes. https://github.com/rsxdalv/tts-generation-webui/actions/runs/8393137834/job/22987441352

[darkvertex]

Seems to work now as far as serving a UI on port 3000 is concerned, but FYI the link assumes it is running as localhost, which may not always be so.

In my case I run this container on a beefy remote machine and so clicking the "NEW React UI" takes me to... nothing... but swapping the port number does work.

Linking to a different port number relatively is not allowed in HTML, but with a bit of JS you can take your link:

<a href="http://localhost:3000" target="_blank" rel="noopener noreferrer">NEW React UI</a>

and use JS to swap the port number on hover:

<a href="/" target="_blank" rel="noopener noreferrer" onmouseover="javascript:event.target.port=3000">NEW React UI</a>

Works like a charm and displays the actual real link on hover, like a natural link.

[rsxdalv]

That's amazing, thank you, I have included it in the latest commit. Thankfully gradio's markdown accepts HTML.