Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Book Recommender</title> | |
| <!-- The loading of KaTeX is deferred to speed up page rendering --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>User books breakdown</h1> | |
| <h2>What is on this page?</h2> | |
| <p> | |
| The books below are books that have been recommended by at least one sub-model in our ensemble model for | |
| the current user. | |
| They are sorted by our ensemble model's confidence score. If our model is confident that the user will | |
| enjoy the book, then the book is sorted towards the top. | |
| <br/><br/> | |
| These books have also already been read by this user. We can compare the user's actual rating to the | |
| confidence score of our ensemble model to see how accurate our ensemble model's predictions are. | |
| <br/><br/> | |
| Click on the Explain button in blue to look at a breakdown of each sub-model's scores and how they | |
| contributed to the ensemble model's final confidence score, and for a brief explanation of why this book | |
| was recommended to the user. | |
| <br/><br/> | |
| <a href="/test_users">Click here to return to the list of users.</a> | |
| </p> | |
| <h2>Current user ID: {{ chosen_user }}</h2> | |
| <table class="table table-striped" style="margin-top: 3em"> | |
| <thead class="thead-dark"> | |
| <tr> | |
| <th>Title</th> | |
| <th>User's actual rating</th> | |
| <th>Prediction confidence score</th> | |
| <th>Recommended?</th> | |
| <th>Show explanation</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for book_id, book_data in recommended_books.iterrows() %} | |
| <tr> | |
| <td>{{ book_data['title_without_series'] }}</td> | |
| <td>{{ book_data['target'] }}</td> | |
| <td>{{ book_data['final_score'] }}</td> | |
| <td>{{ book_data['is_recommended'] }}</td> | |
| <td><a href="/test_users/{{ chosen_user }}/{{ book_id }}" class="btn btn-primary">Explain</a></td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| {{ fig|safe }} | |
| <div style="display: flex; flex-direction: column; justify-content: space-around; align-items: center"> | |
| <div id="ScoreSum" style="font-size: 1.5em"></div> | |
| <div id="Formula" style="font-size: 1.5em"></div> | |
| <p style="text-align: center; width: 50%; margin-top: 1em"> | |
| {{ explanation_str }} | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| scoreSumDiv = document.getElementById("ScoreSum"); | |
| formulaDiv = document.getElementById("Formula"); | |
| // disgusting string-concatenating-Jinja-templating monster | |
| if ({{ render_explanation }}) { | |
| const score_sum = {{ score_sum }}; | |
| katex.render("\\text{Sum of sub-model scores}=" + score_sum, scoreSumDiv); | |
| const start = "\\text{Confidence Score} = \\frac{1}{1+e^{-("; | |
| const end = ")}} = "; | |
| const threshold = "0.45"; | |
| const final_score = {{ final_score }}; | |
| let conclusion; | |
| if (parseFloat(final_score) >= parseFloat(threshold)) { | |
| conclusion = "\\ge " + threshold + " \\text{ (Recommended)}"; | |
| } else { | |
| conclusion = "\\lt " + threshold + " \\text{ (Not recommended)}"; | |
| } | |
| const render_str = start + score_sum + end + final_score + conclusion; | |
| katex.render(render_str, formulaDiv); | |
| } | |
| </script> | |
| <!-- Bootstrap JS (Optional) --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | |
| </body> | |
| </html> | |