fix and improve UI

[tomasoignons]

For the moment,

Added buttons next and previous to the bottom of the page, and added the possibility to scroll up to the page.

Improved the navbar, to be smoother, and added the dark blue when you advance (I think it was made doing a pull request).

Explicit what train alone and train collaboratively mean (Added a small description to the buttons, optional)

Reworked the model library, added error messages when downloading, and added a "confirm" notification when you want to delete a model

Reworked the about page

the about page

Reworked a bit the form, by center the toogle of the Secure aggregation

The detail is in the issue #628, and in particular

• I think the Previous and Next buttons should be at the bottom of pages rather than top, to follow the user flow who fills information or reads info from top to bottom. Right now users need to scroll up after every page to get to the next step.

• After clicking on Getting Started, one can hover on the word DISCOllaborative which displays an explanation. This is useful, but it is not clear this is possible to do. Either write the text directly on the website this is essential or at least underline the word to make it clear and make the info appear faster.

• Clicking on Join button (e.g. for titanic task) should get you to the top of the next page, right now it's already scrolled down

• Nothing prevents users from uploading a whole folder rather the individual images, there should be additional checks on what is uploaded.

• NEXT and PREVIOUS buttons should be at the bottom of the page rather than the top

• For the successive steps, color the horizontal bars in dark blue as the user progresses through the tasks and make the current active step different (e.g. bigger circle) than the previous ones

• What does it mean to “Train alone” or “Train collaboratively”? It is not clear for a new user that doesn't know how disco works. Choosing either of them doesn't seem to make a difference from a user point of view

• Model items do not always have the same width:

• When turning off the browser model library, trying to download a trained model doesn't trigger any error/feedback, it should state that a user can't download models if the model library is turned off

• When the model Library is empty, it should state that users can download trained model or need to train models and link where to do so (currently users can download pretrained models in the "evaluate" page)

• When deleting a model, either ask users to confirm or create an undo button. It is dangerous to be able to misclick and delete a model inadvertently.

• Order models by tasks and within tasks from most recent to oldest.

• Graphic design is not coherent with rest of the website, the blue color is a darker shade and the line thickness is thinner.

• The Evaluate landing page should explain the difference between Test (Data with labels) and Predict (data without labels)

• Add a loading indicator when downloading a model and a toaster message for successful download (or error)

• The Evaluation page at the "Connect your data" and "Evaluate your model" should specify if we are currently Testing or Predicting

• The toggle button doesn't have the usual graphic design, it is in black with double lined border when clicked on

• About Us menu should have another icon (currently it looks like a profile icon) and the MLO can have a higher quality logo (or smaller size)

• Improve the text design.

• "About Us" title should have a title font and size

• Make icons clickable to point to the respective links

• "Byzantine-Robust Aggregation" for Federated learning and "Secure Aggregation" for Decentralized learning tick boxes shouldn't be centered

• “Request help on slack” button doesn't do anything

[JulienVig]

Great work!! Could you copy-paste the items from #628 that you addressed in the PR description?

[JulienVig]

Don't hesitate to request a review once you're done with the changes!

[JulienVig]

Great work!! Just a small design comment but you can merge the PR whenever!

[martinjaggi]

super cool, thanks!!