Add foundation for web interface, new setup wizard#116
Add foundation for web interface, new setup wizard#116dammitjeff wants to merge 18 commits intoLumePart:devfrom
Conversation
…s page of wizard setup
…olders options in wizard
|
This would be sick |
|
Hell yeah this looks awesome |
|
This seems like a huge quality of life addition |
|
Hell yeah!! |
|
add this! |
|
cool |
|
This UI will definitely get a bigger fanbase to use Explo! |
|
Yes! Something like this would be awesome! |
|
Please do this! Would be amazing for the project. Especially integrating it with the docker file. :) |
|
Can't wait to try it! |
|
Will be quite useful and definitely more user friendly. |
… in wizard, improve download directory guidance for slskd, auto correct config path if user mounts path as a directory
|
Awesome idea to add a gui. |
|
This is what we need |
|
Yeah I mosef need this |
|
A good improvement to this project |
|
Let's go! |
|
Sick! Hope this goes forward! |
|
Great stuff Jeff, personally I'd also add a super small padding here as well as there is a padding on the horizontally grouped items too 👌 |
|
This should be added for real. Not having a graphic interface for this part of the app is a huge malus |
|
This would be sick for sure dudeee |
|
👍 |
1 similar comment
|
👍 |
|
add this pls |
|
please add this |
1 similar comment
|
please add this |
|
This would be a great addition to the project! |
|
This would help greatly! |
|
Hell yeah 🤟 |
|
this would be so cool and help me loads |
|
This would be amazing to have!! |
|
Love it DammitJeff 🥹🙏✌🏾 |
… schedule ui in home tab, cleaned up style.css and added new color scheme
|
Awesome work! |
|
Hey, a quick update. Added a few more things, alongside a nicer color scheme. Look familiar? You can now configure schedules through the browser. Clicking on the scheduled time allows you to change the exact date and time for your scheduled runs. Though In the future I'm hoping we can actually show what songs were successfully downloaded, with correct cover art, artist info, etc. And maybe down the line, add/ import our own playlists from listenbrainz ? 
I've also cleaned up the
At this point I'm ready for review, really excited to see what you think! :) Btw!! If anyone reading would like to try it while the dev gets back to me, here are some instructions to try the branch. Would REALLY love some help getting feedback on what works/breaks at the moment! Especially with new/existing explo setups. Keep in mind this is still WIP! Steps if you want to try it out:
with
And fix up any other parts of the docker-compose you might need.
Feedback would be really appreciated! :) |
|
PLEASE DO THIS |
|
Man this would be sick. Please do it |
dammitjeff
force-pushed
the
web-interface
branch
from
55ade59 to
34fc767
Compare
|
Thanks so much for the PR - Would love to work with you! By the way, the PR looked a bit sketchy at first due to the amount of reacts/comments on a fairly new request. Had to do some detective work before realizing they came from your YouTube video haha 😅 Big thanks for the shout out!! |
| WEB_CFG_PATH="$WEB_CFG_PATH/.env" | ||
| echo "[setup] Config path is a directory, using $WEB_CFG_PATH" | ||
| fi | ||
| WEB_UI=true WEB_CFG_PATH="$WEB_CFG_PATH" WEB_ADDR="${WEB_ADDR:-:7288}" /opt/explo/explo & |
There was a problem hiding this comment.
I love the web interface, but it might be nice to have an option to disable it if someone doesn't want / need it?
| // configFields is the single source of truth for the settings this web UI | ||
| // currently owns. VisibleWhen / RequiredWhen drive the settings UI; the wizard | ||
| // uses bespoke HTML but references the same logical rules. | ||
| var configFields = []FieldDef{ |
There was a problem hiding this comment.
Just a word of warning. It seems like there is no authentication on this API (unless I am missing it in which case ignore me), and it exposes several API keys, if someone makes this publicly accessible it could be leaking some sensitive data. I'd recommend three possible suggestions:
- Allow for disabling the web interface and API (possibly disabled by default with an opt in?)
- Add authentication for API access so only the owner can read/write.
- Obfuscate sensitive fields (e.g. have the API return
*****instead of the actual value, so it shows there is a value but not what it is). But that doesn't solve a bad actor being able to POST to modify a users configuration.
There was a problem hiding this comment.
Very good notes here yeah, as the program stands right now, there is no auth built into the app. Might be a good idea to start adding that in before a proper release!
I can do simple tweaks like obfuscating input fields, however auth is a bit out of my area of expertise. Hoping maybe LumePart or another contributor would be able to help out on that. I can handle the frontend stuff if we can get it implemented!
And yes I def agree, a toggle for a web interface would be good! Could possibly have it toggled with a docker env. I'll try and fix up a bit more when im done with work for the day. :)
There was a problem hiding this comment.
I can check out how auth could be implemented for sure
LETS go! |
|
Adding this info here as well, due to the project getting a lot of new users (and perhaps collaborators). I decided to create a discord for discussing Explo: https://discord.gg/uFWWPaN2zk |
…election Co-authored-by: nironics <nixoxin@proton.me>
19 participants
Hey! Been super impressed with Explo, and noticed you really wanted to get some sort of frontend GUI for the users to interact with the app. My college background is in UX/UI Design, so I figured I could help by putting together a first pass at a lightweight web interface that sits on top of the existing config. Consider this version 1.0, but im more than happy to work with this with you! and help turn this into something that shows off your vision of explo :)
Wizard.mp4
This branch ships with a basic wizard, letting users setup their playlist/recommendation preferences, set it up with their music clients, and their download clients.
Further customization can be done in the settings, where users can access the .env file to edit, without having to manually go into a file browser and a text editor, etc.
As of now, the web interface only allows you to commit a manual run to ensure everything is working properly, with options like skip, force, etc. I've also adjusted a bit the way that the logs are shown to make it easier for users to understand what the app is doing.
Manual.Run.mp4
The backend is still running on go, with the server being run from
src/web/server.go.Also added a
sample.envwith all possible combinations, as we can use it as a template for users to build their wizard off of, and can edit it in the settings at any time.As of now, I built it with just simple css + js, , but with your permission, I'd love to help move it toward React or a more full frontend stack if possible, as go isn't my main field of expertise and is built more for efficiency and not UI 😅
Full disclosure by the way, AI was used to help code up this pr, however it was only for the Go-specific parts, as I'm not too familiar with the language. But everything else was wireframed and designed 100% by a human (ME!), and looked over the code myself. Nothing here was committed blindly.
Still got some more work to do on it, cleaning up the paths, adding a few more api endpoints, making it easier to maintain for future devs, but I'd love to hear about any notes or comments you may have. I want to make this alongside you to make sure the vision you have for expo is being carried forward here. I love what you've built here, and would love to help with the UI area where possible :)