Skip to content

Commit

Permalink
update the CSS code (#33)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MauroLuzzatto
MauroLuzzatto authored Feb 11, 2024
1 parent 2512243 commit 4a46024
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 77 deletions.
22 changes: 17 additions & 5 deletions app/core/highscore.py
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
from typing import List, Tuple

secret_key = "highscore"


Expand All @@ -9,18 +11,28 @@ def __init__(self, request):
if not scores:
# save an empty scores dict in the session
scores = self.session[secret_key] = {}

self.scores = scores

def add_score(self, id, song, artist, prediction):
def add_score(self, id: str, prediction: str, header: str) -> None:
"""_summary_
Args:
id (_type_): _description_
prediction (_type_): _description_
header (_type_): _description_
"""
if id not in self.scores:
self.scores[id] = {
"song": song,
"artist": artist,
"prediction": prediction,
"header": header,
}

def get_highscore(self):
def get_highscore(self) -> List[Tuple[float, str]]:
"""_summary_
Returns:
List[Tuple[float, str]]: _description_
"""
highscore = sorted(
self.scores.values(), key=lambda x: x["prediction"], reverse=True
)[:5]
Expand Down
24 changes: 17 additions & 7 deletions app/routers/root.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,33 @@

@router.get("/", response_class=HTMLResponse)
async def get_form(request: Request):
highscore = Highscore(request)
"""_summary_
Args:
request (Request): _description_
Returns:
_type_: _description_
"""
highscore = Highscore(request)
payload = {
"request": request,
"scores": highscore.get_highscore(),
}

template = "prediction.html"
return templates.TemplateResponse(template, payload)


@router.get("/about/", response_class=HTMLResponse)
async def get_about(request: Request):
"""_summary_
Args:
request (Request): _description_
Returns:
_type_: _description_
"""
return templates.TemplateResponse("about.html", {"request": request})


Expand All @@ -54,9 +68,7 @@ async def get_success_endpoint(request: Request):
Returns:
_type_: _description_
"""

template = "partials/songform.html"

form = SongRequestForm(request)
await form.load_data()

Expand All @@ -81,11 +93,9 @@ async def get_success_endpoint(request: Request):
response = output.dict()

highscore = Highscore(request)
song = form.song
artist = form.artist
id = header
_prediction = response["prediction"]
highscore.add_score(id, song, artist, _prediction)
highscore.add_score(id, _prediction, header)

payload = {
"request": request,
Expand Down
55 changes: 21 additions & 34 deletions app/templates/partials/songform.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,28 @@
<div class="container-fluid my-5 mx-5" style="height: 18em;" id="songForm">
<h3 class="text-left display-5">Let's predict the number of streams for a song</h3>

<h3 class="text-left display-5">Let's predict the number of streams for a song</h3>

<div class="text-danger font-weight-bold">
{% for error in errors %}
<li>{{error}}</li>
{% endfor %}
</div>


<h4 class="text-left display-7">Choose a song!</h4>



<form id="myForm" action="/search_song" method="POST" hx-boost="true" hx-trigger="submit" hx-swap="outerHTML"
hx-target="#songForm">

<div class="mb-3">
<input type="text" required placeholder="Choose an artist e.g Queen" name="artist" value="{{artist}}"
class="form-control">
</div>

<div class="mb-3">
<input type="text" required placeholder="Choose a song e.g Don't stop me now" name="song" value="{{song}}"
class="form-control">
</div>
<div class="text-danger font-weight-bold">
{% for error in errors %}
<li>{{error}}</li>
{% endfor %}
</div>

<div class="class text-center">
<button type="submit" hx-trigger="submit">Search</button>
<!-- <button type="submit" hx-trigger="click" hx-get="/success_endpoint" hx-target="#songForm"
hx-swap="innerHTML">Search</button> -->
</div>
<h4 class="text-left display-7">Choose a song!</h4>
<form id="myForm" action="/search_song" method="POST" hx-boost="true" hx-trigger="submit" hx-swap="innerHTML"
hx-target="#songForm">

<div class="mb-3">
<input type="text" required placeholder="Choose an artist e.g Queen" name="artist" value="{{artist}}"
class="form-control">
</div>

</form>
<div class="mb-3">
<input type="text" required placeholder="Choose a song e.g Don't stop me now" name="song" value="{{song}}"
class="form-control">
</div>

<!-- <div hx-target="#songForm" hx-trigger="submit" hx-swap="innerHTML"></div> -->
<div class="class text-center">
<button type="submit" hx-trigger="submit">Search</button>
</div>


</div>
</form>
44 changes: 21 additions & 23 deletions app/templates/partials/success.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,36 @@
<div class="container-fluid my-5 mx-5" style="height: 18em;" id="songOutput">
<!-- <h2 class="text-center display-7">{{header}}</h2> -->


<!-- <h2 class="text-center display-7">{{header}}</h2> -->
<h3 class="text-left display-5">{{header}}</h3>

<hr style="border-bottom: 1px solid #888">

Number of streams: {{prediction["prediction"]}}
Message: {{prediction["message"]["text"]}} {{prediction["message"]["emoji"]}}

<!-- <h4 class="text-left display-10">{{prediction["features"]}}</h4> -->

<h3 class="text-left display-5">{{header}}</h3>
<hr style="border-bottom: 1px solid #888">

<p class="fw-bold display-6">{{prediction["message"]["text"]}} {{prediction["message"]["emoji"]}}</p>


<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Number of streams: {{prediction["prediction"]}}
</li>

{% for key, value in prediction["song_metadata"].items() %}
{{key}}: {{ value }}
<li class="list-group-item d-flex justify-content-between align-items-center">
{{key}}: {{ value }}
</li>
{% endfor %}
</ul>


{% if prediction["preview_url"] is not none %}
<div class="container-audio">
<audio controls>
<source src={{prediction["preview_url"]}} />
</audio>
</div>
{% endif %}

<div class="class text-center">
<a href="/"><button type="submit">Try it again!</button></a>

</div>

{% if prediction["preview_url"] is not none %}
<div class="container-audio">
<audio controls>
<source src={{prediction["preview_url"]}} />
</audio>
</div>
{% endif %}

<div class="class text-center">
<a href="/"><button type="submit">Try it again!</button></a>

</div>
13 changes: 6 additions & 7 deletions app/templates/prediction.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,21 @@
{% endblock %}


<div class="container my-5 mx-5" style="height: 20em" id="songForm">
<!-- include songform -->
{% include 'partials/songform.html' %}
</div>


<!-- include songform -->
{% include 'partials/songform.html' %}



<div class="container-fluid my-5 mx-5" id="highscore">
<div class="container my-5 mx-5" id="highscore">
<hr style="border-bottom: 1px solid #888">

<h4 class="text-left display-10">Highscore</h4>
<p class="text-left">The training dataset uses streams between 0 and 30.</p>

<ul class="list-group">
{% for score in scores %}
<li class="list-group-item">{{ score["prediction"] }}, {{ score["song"]}} by {{ score["artist"]}}
<li class="list-group-item">{{ score["prediction"] }}: {{ score["header"] }}
</li>
{% endfor %}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion app/templates/shared/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

</head>

<body>
<body style="background-color:#FCEDDA;">
<!-- menu -->
{% include "components/navbar.html" %} {% block content %} {% endblock %}
<!-- content from other html files -->
Expand Down

0 comments on commit 4a46024

Please sign in to comment.