llm-leaderboard icon indicating copy to clipboard operation
llm-leaderboard copied to clipboard

Make the table reader friendly and exportable to a new page

Open dlippold opened this issue 2 years ago • 4 comments

Please make the table reader friendly by fixing the header row and fixing the first column (with the benchmark name) so that these stay in place when the table is scrolled. I think the CSS attribute position with value fixed or sticky can be used.

Furthermore please make it possible that the table can be opened alone on a new web page so that it can be printed (and exported to pdf) in a reader friendly way.

dlippold avatar Sep 02 '23 18:09 dlippold

Hi, I don't think I fully understand you two points.

To 1)

  • currently when scrolling up and down, the first row of the table is fixed
  • currently when scrolling left and right, the first column of the table is fixed

To 2)

  • Have you tried out the "Download current selection as .html" button? This downloads the current table selection as .html file which one natively can convert into a .pdf file

LudwigStumpp avatar Sep 02 '23 21:09 LudwigStumpp

browser-screenshot To 1), fixed first row and column

Do we talk about the same table on the same page? I mean the table with the title "Leaderboard" on the page https://github.com/LudwigStumpp/llm-leaderboard

With "first row" I mean the row with the content "Model Name, Publisher, Open?, ..." and with "first column" I mean the column with the content "Model Name, alpaca-7b, alpaca-13b, ...".

When I load that page in a browser (tested with Firefox on Debian Linux, Chrome on ChromeOS and Edge on Windows 10) and scroll down to the bottom of the table and then scroll a little bit to the right I see the table shown in the attached screenshot of the browser window. As you can see the first row is not shown and form the first column only the last characters are shown.

An example of a table with a fixed first row is shown and described on https://www.w3docs.com/snippets/html/how-to-create-a-table-with-a-fixed-header-and-scrollable-body.html and an example of a table with a fixed first column is shown and described on https://www.w3docs.com/snippets/html/how-to-create-an-html-table-with-a-fixed-left-column-and-scrollable-body.html

But of course there are more tutorials how to do that, e.g. for a fixed first column https://dev.to/nicolaserny/table-with-a-fixed-first-column-2c5b and https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b

To 2), table on a new page

I don't find a button or a function "Download current selection as .html" in my Firefox browser. But if you would display the table in an iframe (see e.g. https://www.w3schools.com/html/html_iframe.asp) Firefox has the function to open the frame in a new tab and in new window.

dlippold avatar Sep 09 '23 12:09 dlippold

As mentioned in the repo, please take a look at the interactive dashboard: https://llm-leaderboard.streamlit.app/.

The repo itself is just meant for collaboration purposes and people are expected to view the dashboard for comparing and analyzing results.

LudwigStumpp avatar Sep 12 '23 07:09 LudwigStumpp

Ok, now I understand. Maybe you can make that clearer by writing that the interactive dashboard has to be used (not only can be used) and the the table in the following section is only for reference.

dlippold avatar Sep 15 '23 18:09 dlippold