Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Book Recommender</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Select a User</h1> | |
| <p> | |
| We generated recommendations for each of the 20 test users below. In each card, you can see that user's | |
| favourite titles (top 5, sorted by user's rating) to give an idea of the user's taste profile. Click | |
| on the button to see what we have recommended for this user. | |
| </p> | |
| <div class="row"> | |
| {% for user_id, top_books in user_details.items() %} | |
| <div class="col-md-4 mb-4"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">User</h5> | |
| {% for title in top_books %} | |
| <h6 class="card-text">{{ title }}</h6> | |
| {% endfor %} | |
| <a href="/test_users/{{ user_id }}" class="btn btn-primary">Select</a> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS (Optional) --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | |
| </body> | |
| </html> | |