Revert "Add highscore to root page using htmx (#24)" (#27)

This reverts commit 3446d76.

app/routers/root.py

@@ -5,7 +5,6 @@
 from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
 
-from app.core.highscore import Highscore
 from app.utils.song_request_form import SongRequestForm
 from music_flow.core.utils import path_app
 
@@ -19,7 +18,7 @@
 erros = {
     "song_not_found": "Song not found.",
     "generic_error": "OPS, Something went wrong. Please try again.",
-    "failed_to_fetch_song": "Failed to fetch song. Please check for typos or try another song.",
+    "failed_to_fetch_song": "Failed to fetch song. Please check for typos or try another one.",
 }
 
 
@@ -28,24 +27,11 @@
 
 @router.get("/", response_class=HTMLResponse)
 async def get_form(request: Request):
-    highscore = Highscore(request)
+    return templates.TemplateResponse("prediction.html", {"request": 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):
-    return templates.TemplateResponse("about.html", {"request": request})
-
-
-@router.post("/search_song")
-async def get_success_endpoint(request: Request):
+@router.post("/", response_class=HTMLResponse)
+async def post_form(request: Request):
     """_summary_
 
     Args:
@@ -55,48 +41,38 @@ async def get_success_endpoint(request: Request):
         _type_: _description_
     """
 
-    template = "partials/songform.html"
-
     form = SongRequestForm(request)
     await form.load_data()
-
-    if not form.is_valid():
-        payload = form.as_dict()
-        return templates.TemplateResponse(template, payload)
-
-    logger.debug(f"form: {form.as_dict()}")
+    logger.debug(f"form: {form.__dict__}")
 
     from main import get_prediction_api
 
     try:
         output = await get_prediction_api(song=form.song, artist=form.artist)  # type: ignore
     except HTTPException:
         form.errors.append(erros["failed_to_fetch_song"])
-        payload = form.as_dict()
-        del payload["song"]
-        del payload["artist"]
-        return templates.TemplateResponse(template, payload)
-
-    header = f'"{form.song.capitalize()}" by "{form.artist.capitalize()}"'  # type: ignore
-    response = output.dict()
-
-    highscore = Highscore(request)
-    song = form.song
-    artist = form.artist
-    id = header
-    _prediction = response["prediction"]
-    highscore.add_score(id, song, artist, _prediction)
-
-    payload = {
-        "request": request,
-        "header": header,
-        "prediction": response,
-        "scores": highscore.get_highscore(),
-    }
-    try:
-        template = "partials/success.html"
-        return templates.TemplateResponse(template, payload)
-    except Exception as e:
-        form.errors.append(erros["generic_error"])
-        logger.error(e)
-        return templates.TemplateResponse(template, payload)
+        return templates.TemplateResponse("prediction.html", form.__dict__)
+
+    if form.is_valid():
+        header = f"{form.song.capitalize()} by {form.artist.capitalize()}"  # type: ignore
+        prediction = output.dict()
+
+        payload = {
+            "request": request,
+            "header": header,
+            "prediction": prediction,
+        }
+
+        try:
+            return templates.TemplateResponse("success.html", payload)
+        except Exception as e:
+            form.errors.append(erros["generic_error"])
+            logger.error(e)
+            return templates.TemplateResponse("prediction.html", form.__dict__)
+
+    return templates.TemplateResponse("prediction.html", form.__dict__)
+
+
+@router.get("/about/", response_class=HTMLResponse)
+async def get_about(request: Request):
+    return templates.TemplateResponse("about.html", {"request": request})

app/templates/prediction.html

@@ -2,28 +2,35 @@
 <title>Get song lyrics</title>
 {% endblock %}
 
-
-
-
-<!--  include songform -->
-{% include 'partials/songform.html' %}
-
-
-
-<div class="container-fluid 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>
-        {% endfor %}
-    </ul>
-
-
+<div class="container">
+    <div class="row">
+        <div class="text-danger font-weight-bold">
+            {% for error in errors %}
+            <li>{{error}}</li>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="row my-5">
+        <h3 class="text-left display-7">Let's predict the number of streams for a song</h3>
+        <h4 class="text-left display-7">Choose a song!</h4>
+
+        <form method="POST">
+
+
+            <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>
+
+            <button type="submit">Search</button>
+        </form>
+    </div>
 </div>
 
 {% endblock %}

app/templates/shared/base.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>MusicFlow API</title>
-    <script src="https://unpkg.com/htmx.org@1.7.0"></script>
 
     <meta name="description" content="MusicFlow API" />
     <meta name="nofoobar.com" content="Nofoobar">

app/templates/success.html

@@ -0,0 +1,41 @@
+{% extends "shared/base.html" %} {% block layout_base %}
+<div class="container">
+    <div class="row">
+        <div class="text-danger font-weight-bold">
+            {% for error in errors %}
+            <li>{{error}}</li>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="row my-5">
+
+        <h2 class="text-left display-7">{{header}}</h2>
+        <h4 class="text-left display-10">Number of streams: {{prediction["prediction"]}}</h4>
+        <h4 class="text-left display-10">{{prediction["message"]["text"]}} {{prediction["message"]["emoji"]}}</h4>
+
+        <!-- <h4 class="text-left display-10">{{prediction["features"]}}</h4> -->
+
+
+        <hr style="border-bottom: 1px solid #888">
+
+        {% for key, value in prediction["song_metadata"].items() %}
+            <h7 class="text-left display-15">{{key}}: {{ value }}</h7>
+        {% endfor %}
+        <hr style="border-bottom: 1px solid #888">
+
+
+        {% if prediction["preview_url"] is not none %}
+        <div class="container-audio">
+            <audio controls>
+                <source src={{prediction["preview_url"]}} />
+            </audio>
+        </div>
+        {% endif %}
+
+        <a href="/">
+            <button type="submit">Try it again!</button>
+        </a>
+
+    </div>
+    {% endblock %}

app/utils/song_request_form.py

@@ -6,7 +6,7 @@
 class SongRequestForm:
     def __init__(self, request: Request):
         self.request: Request = request
-        self.errors: List[str] = []
+        self.errors: List = []
         self.song: Optional[str] = None
         self.artist: Optional[str] = None
 
@@ -16,21 +16,16 @@ async def load_data(self):
         self.artist = form.get("artist")  # type: ignore
 
     def is_valid(self):
-        if not self.song and self.number_of_tokens(self.song) > 10:
-            song_error = "A valid song is required"
-            self.errors.append(song_error)
+        if not self.song or self.number_of_tokens(self.song) > 10:
+            self.errors.append("A valid song is required")
 
-        if not self.artist and self.number_of_tokens(self.artist) > 5:
-            aritst_error = "A valid artist is required"
-            self.errors.append(aritst_error)
+        if not self.artist or self.number_of_tokens(self.artist) > 5:
+            self.errors.append("A valid artist is required")
 
-        if self.errors:
-            return False
-        return True
-
-    def as_dict(self):
-        return self.__dict__
+        if not self.errors:
+            return True
+        return False
 
     @staticmethod
-    def number_of_tokens(string: str) -> int:
+    def number_of_tokens(string):
         return len(string.split())

main.py

@@ -7,7 +7,6 @@
 from fastapi import FastAPI, HTTPException
 from fastapi.staticfiles import StaticFiles
 from mangum import Mangum
-from starlette.middleware.sessions import SessionMiddleware
 
 from app.__init__ import __version__ as api_version
 from app.config import settings
@@ -78,9 +77,6 @@ async def lifespan(app: FastAPI):
 app.add_middleware(
     Analytics, is_lambda_runtime=is_lambda_runtime, is_testing=is_testing
 )
-
-app.add_middleware(SessionMiddleware, secret_key="some-random-string")
-
 app.include_router(api.router)
 app.include_router(root.router)