Front end

Lab 5 - From Backend to User Interface with Streamlit

💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼

🌈 Back to 1996 🌈

💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼💾☎️📼

The final result, if you’d been born 30 years earlier.

Before you start

This tutorial combines explanations and code phases. The explanations should not take precedence over those of your teacher.

NoteConcepts covered

• Front-end development
• Navigation between pages
• Connection to the Back End
• Read a documentation
• Vibe coding

VSCode service

• Log in to the datalab
• Open your custom VSCode-python service
  • ⚠️ Custom, as you did in the first Lab

Create your branch

Important

For each practical session, the teacher provides a starting branch: tp<N>-start.

You will have to create a personal branch: <username>-tp<N> (e.g. camille-tp2) and work on your own branch.

Perhaps some changes have been made to the teacher’s repository since the last session.

• Check that your local repository is connected to the teacher’s repository
  • git remote -v
  • origin: your team’s remote repository
  • upstream: teacher’s remote repository

NoteIf upstream is not listed

• add it:
  • git remote add upstream https://github.com/ludo2ne/ENSAI-2A-projet-info-template.git
  • git remote set-url --push upstream DISABLED (you don’t need to push on this repo)
  • Check your configuration again with: git remote -v

To start with a clean and up-to-date codebase:

• git fetch upstream to retrieve the latest information from the teacher’s repository
• Create (and switch to) your branch: git switch -c <username>-tp<N> upstream/tp<N>-start
• git push -u origin <username>-tp<N> to publish your branch on the remote

Then use the standard Git cycle: add, commit, push after each part.

1 The goal

From the beginning, we’ve focused solely on back-end development. Today, we’re going to focus on front-end development.

The aim isn’t to turn you into Streamlit experts, but to use fairly simple features to create a user-friendly interface.

Last time, we created an endpoint to retrieve a player’s games.

Let’s use it to create a new page that displays some stats for each player.

Important

Feel free to:

• use streamlit documentation
• see existing pages in the project

You can use LLMs (Codestral, etc.) to assist your development. However, do not simply copy-paste. Your role is to act as an architect: define the requirements, guide the AI through the implementation, and rigorously verify the logic.

2 Play Dice

Let’s start with something easy : a new page for playing dice.

• Open file src/pages/player_game.py

Before, we only had one type of game, but that’s no longer the case.

• To make things clearer, rename this file to play_coinflip.py
• In your opinion, which page did we used to access it from?
  • Also amend the link to this page

The page for playing dice will look very similar.

• Copy file play_coinflip.py and name it play_dice.py
• Modify to adapt the page for a Dice game
  • update game_mode
  • do you still need a choice parameter?
• In the player menu, add a link to this page

Try it:

• Launch Backend and Frontend

Tip

No need to restart the frontend when modifying a Streamlit page:

• To reload a page, either click Rerun or enable runOnSave = true
• ⚠️ Do not refresh the browser page: this will reset the Streamlit session and log you out.

config.toml

[server]
runOnSave = true

3 Player’s page

Currently, your application displays a list of players, but there is no way to “drill down” into a specific player’s profile. We need to implement Contextual Navigation.

We will create a new page Player stats displaying for a specific player, informations and game history.

3.1 Player’s information

Let’s start by retrieving and then displaying the player’s details.

• Create file src/pages/player_stats.py
• Add a title and create a logger

The page url will be something like http://<my-frontend-url>/player_stats?id_player=4.

• Use st.query_params to get the player ID
  • You couldn’t make this up – read the documentation
• Call the API to get the player’s attributes (username, elo, etc.)
  • Check the response
• Display Player information using, for example:
  • username in a st.subheader element
  • use st.columns to create 2 columns
  • col1: elo in a st.metric
  • col2: use st.write to display its email, and st.checkbox if he is a Pokemon’s fan

Try it:

• By calling the URL directly

3.2 Match History Retrieval

Below you will add a table containing the Game history.

• Call the API to retrieve the player’s games
  • Check the response
  • if no game has been played, display it

The next step is to display a table using the JSON data sent by the API.

• Use the swagger to see what you received from the API
• For each item received, extract or generate fields: Game Mode, Opponent, Opponent elo, Result (win, loss, draw)
• Create a DataFrame and display it

Example:

Mode	Opponent	Result
dice	maurice (1000)	Loss
dice	maurice (1000)	Draw
dice	maurice (1000)	Win
coinflip	maurice (1000)	Win

3.3 Contextual Navigation

You could navigate to the previous page using its URL, but it would be better to have a button that takes you there directly.

We will add one to the players’ list.

In file src/pages/list_players.py you have a dataframe:

• Add a url column to your dataframe.
  • For each player, the URL must point to their stats page
  • Example for player 4: /player_stats?id_player=4
• Refresh the page

Now let’s use config st.column_config.LinkColumn to generate a real link:

• Add parameter column_config in the function that displays the dataframe
• Specify that the url field is a LinkColumn
  • For your first attempt, use LinkColumn without any argument
  • st.column_config.LinkColumn()

You can check this by clicking on the link to see if it takes you to the correct page.

• Finally, add these arguments to LinkColumn
  • label="Stats", display_text="📊"

The final result is the addition of a Stats column, with a 📊 icon for each player that links to their personal stats page.

4 To go further

Bonus

4.1 Win/Loss Aggregation

Displaying a list of games is helpful, but a professional dashboard provides high-level KPIs (Key Performance Indicators). We need to calculate the player’s win/loss record.

The Problem: The client (Frontend) should not perform mathematical calculations on a list of games. Doing so increases bandwidth usage and violates the principle of Separation of Concerns.

The Solution: The Service must perform the aggregation and return a simplified summary.

• Backend: Implement a method get_win_loss_stats(id_player) in GameService
  • It must return a dictionary containing the count of wins, losses, and draws
• Backend: Create a new endpoint GET /players/{id_player}/win-loss
• Frontend: In Player stats page, display the number of wins and losses prominently

End of the Lab

Important

When you have finished coding, don’t forget to:

• Push your code to GitHub
  • If your service is terminated, all unpushed code is lost…
• Pause your datalab services
  • to free up reserved resources