Add prediction history page (only for authenticated users)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -1,14 +1,37 @@
-from flask import Flask, render_template, request
+from flask import (
+    Flask,
+    render_template,
+    request,
+    url_for,
+    redirect,
+    flash,
+    get_flashed_messages,
+)
+from flask_login import (
+    LoginManager,
+    login_user,
+    logout_user,
+    login_required,
+    current_user,
+)
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
 from faster_whisper import WhisperModel
 import tempfile
 import os
+import datetime
 import time
 import torch
 import numpy as np
 import requests
 from tqdm import tqdm
 from transformers import BertTokenizer
-from model.multi_class_model import MultiClassModel  # Adjust if needed
+from model.multi_class_model import MultiClassModel
+
+# from model.database import db, User
+from sqlalchemy.exc import OperationalError
+from sqlalchemy import inspect
 
 app = Flask(__name__)
 
@@ -16,7 +39,75 @@ app = Flask(__name__)
 # CHECKPOINT_URL = "https://github.com/michael2002porto/bert_classification_indonesian_song_lyrics/releases/download/finetuned_checkpoints/original_split_synthesized.ckpt"
 CHECKPOINT_URL = "https://huggingface.co/nenafem/original_split_synthesized/resolve/main/original_split_synthesized.ckpt?download=true"
 CHECKPOINT_PATH = "final_checkpoint/original_split_synthesized.ckpt"
-AGE_LABELS = ["semua usia", "anak", "remaja", "dewasa"]
+AGE_LABELS = ["anak", "remaja", "dewasa", "semua usia"]
+DATABASE_URI = "postgresql://postgres.tcqmmongiztvqkxxebnc:[email protected]:6543/postgres"
+
+# === CONNECT DATABASE ===
+app.config["SQLALCHEMY_DATABASE_URI"] = DATABASE_URI
+app.config["SECRET_KEY"] = "I1Nnj0H72Z3mXWcp"
+
+# init extensions
+db = SQLAlchemy(app)
+login_manager = LoginManager(app)
+login_manager.login_view = "login"
+
+try:
+    db.session.execute("SELECT 1")
+    print("✅ Database connected successfully.")
+except OperationalError as e:
+    print(f"❌ Database connection failed: {e}")
+
+
+def show_schema_info():
+    inspector = inspect(db.engine)
+
+    # Get current schema (by default it's 'public' unless set explicitly)
+    current_schema = db.engine.url.database
+    all_schemas = inspector.get_schema_names()
+    public_tables = inspector.get_table_names(schema="public")
+
+    return {
+        "current_schema": current_schema,
+        "available_schemas": all_schemas,
+        "public_tables": public_tables,
+    }
+
+
+class User(db.Model, UserMixin):
+    __tablename__ = "user"
+
+    id = db.Column(db.Integer, primary_key=True)
+    email = db.Column(db.String(255), nullable=False)
+    password = db.Column(db.String(255))
+    created_date = db.Column(db.DateTime, default=datetime.datetime.now())
+
+    history = db.relationship("History", backref="user", lazy=True)
+
+
+class History(db.Model):
+    __tablename__ = "history"
+
+    id = db.Column(db.Integer, primary_key=True)
+    lyric = db.Column(db.Text, nullable=False)
+    predicted_label = db.Column(db.String(255), nullable=False)
+
+    children_prob = db.Column(db.Float)
+    adolescents_prob = db.Column(db.Float)
+    adults_prob = db.Column(db.Float)
+    all_ages_prob = db.Column(db.Float)
+
+    processing_time = db.Column(db.Float)  # store duration in seconds
+    created_date = db.Column(db.DateTime, default=datetime.datetime.now)
+    speech_to_text = db.Column(db.Boolean)
+
+    user_id = db.Column(db.Integer, db.ForeignKey("user.id"))
+
+
+# Load user for Flask-Login
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
 
 # === FUNCTION TO DOWNLOAD CKPT IF NEEDED ===
 def download_checkpoint_if_needed(url, save_path):
@@ -26,7 +117,9 @@ def download_checkpoint_if_needed(url, save_path):
         response = requests.get(url, stream=True, timeout=10)
         if response.status_code == 200:
             total = int(response.headers.get("content-length", 0))
-            with open(save_path, 'wb') as f, tqdm(total=total, unit='B', unit_scale=True, desc="Downloading") as pbar:
+            with open(save_path, "wb") as f, tqdm(
+                total=total, unit="B", unit_scale=True, desc="Downloading"
+            ) as pbar:
                 for chunk in response.iter_content(1024):
                     f.write(chunk)
                     pbar.update(len(chunk))
@@ -34,18 +127,17 @@ def download_checkpoint_if_needed(url, save_path):
         else:
             raise Exception(f"❌ Failed to download: {response.status_code}")
 
+
 # === INITIAL SETUP: Download & Load Model ===
+print(show_schema_info())
 download_checkpoint_if_needed(CHECKPOINT_URL, CHECKPOINT_PATH)
 
 # Load tokenizer
-tokenizer = BertTokenizer.from_pretrained('indolem/indobert-base-uncased')
+tokenizer = BertTokenizer.from_pretrained("indolem/indobert-base-uncased")
 
 # Load model from checkpoint
 model = MultiClassModel.load_from_checkpoint(
-    CHECKPOINT_PATH,
-    n_out=4,
-    dropout=0.3,
-    lr=1e-5
+    CHECKPOINT_PATH, n_out=4, dropout=0.3, lr=1e-5
 )
 model.eval()
 
@@ -60,9 +152,7 @@ faster_whisper_model_size = "turbo"
 # model = WhisperModel(model_size, device="cuda", compute_type="int8_float16")
 # or run on CPU with INT8
 faster_whisper_model = WhisperModel(
-    faster_whisper_model_size,
-    device="cpu",
-    compute_type="int8"
+    faster_whisper_model_size, device="cpu", compute_type="int8"
 )
 
 
@@ -70,10 +160,13 @@ def faster_whisper(temp_audio_path):
     segments, info = faster_whisper_model.transcribe(
         temp_audio_path,
         language="id",
-        beam_size=1    # Lower beam_size, faster but may miss words
+        beam_size=1,  # Lower beam_size, faster but may miss words
     )
 
-    print("Detected language '%s' with probability %f" % (info.language, info.language_probability))
+    print(
+        "Detected language '%s' with probability %f"
+        % (info.language, info.language_probability)
+    )
 
     # for segment in segments:
     #     print("[%.2fs -> %.2fs] %s" % (segment.start, segment.end, segment.text))
@@ -86,18 +179,18 @@ def bert_predict(input_lyric):
         input_lyric,
         add_special_tokens=True,
         max_length=512,
-        truncation=True,    # Ensures input ≤512 tokens
+        truncation=True,  # Ensures input ≤512 tokens
         return_token_type_ids=True,
         padding="max_length",
         return_attention_mask=True,
-        return_tensors='pt',
+        return_tensors="pt",
     )
 
     with torch.no_grad():
         prediction = model(
             encoding["input_ids"],
             encoding["attention_mask"],
-            encoding["token_type_ids"]
+            encoding["token_type_ids"],
         )
 
     logits = prediction
@@ -105,18 +198,21 @@ def bert_predict(input_lyric):
     predicted_class = np.argmax(probabilities)
     predicted_label = AGE_LABELS[predicted_class]
 
-    prob_results = [(label, f"{prob:.4f}") for label, prob in zip(AGE_LABELS, probabilities)]
+    prob_results = [
+        (label, f"{prob:.4f}") for label, prob in zip(AGE_LABELS, probabilities)
+    ]
     return predicted_label, prob_results
 
 
 # === ROUTES ===
 
-@app.route('/', methods=['GET'])
+
+@app.route("/", methods=["GET"])
 def index():
-    return render_template('index.html')
+    return render_template("index.html")
 
 
-@app.route('/transcribe', methods=['POST'])
+@app.route("/transcribe", methods=["POST"])
 def transcribe():
     try:
         # Load Whisper with Indonesian language support (large / turbo)
@@ -126,7 +222,7 @@ def transcribe():
         # Start measuring time
         start_time = time.time()
 
-        audio_file = request.files['file']
+        audio_file = request.files["file"]
         if audio_file:
             # Save uploaded audio to temp file
             with tempfile.NamedTemporaryFile(delete=False, suffix=".wav") as temp_audio:
@@ -134,7 +230,7 @@ def transcribe():
                 temp_audio_path = temp_audio.name
 
             # Step 1: Transcribe
-            transcribed_text = faster_whisper(temp_audio_path)
+            transcribed_text = faster_whisper(temp_audio_path).strip()
             os.remove(temp_audio_path)
 
             # Step 2: BERT Prediction
@@ -145,12 +241,27 @@ def transcribe():
             total_time = end_time - start_time
             formatted_time = f"{total_time:.2f} seconds"
 
+            # Insert log prediction
+            new_prediction_history = History(
+                lyric=transcribed_text,
+                predicted_label=predicted_label,
+                children_prob=prob_results[AGE_LABELS.index("anak")][1],
+                adolescents_prob=prob_results[AGE_LABELS.index("remaja")][1],
+                adults_prob=prob_results[AGE_LABELS.index("dewasa")][1],
+                all_ages_prob=prob_results[AGE_LABELS.index("semua usia")][1],
+                processing_time=round(total_time, 2),
+                speech_to_text=True,
+                user_id=current_user.id if current_user.is_authenticated else None,
+            )
+            db.session.add(new_prediction_history)
+            db.session.commit()
+
             return render_template(
-                'transcribe.html',
+                "transcribe.html",
                 task=transcribed_text,
                 prediction=predicted_label,
                 probabilities=prob_results,
-                total_time=formatted_time
+                total_time=formatted_time,
             )
 
     except Exception as e:
@@ -158,10 +269,10 @@ def transcribe():
         return str(e)
 
 
-@app.route('/predict-text', methods=['POST'])
+@app.route("/predict-text", methods=["POST"])
 def predict_text():
     try:
-        user_lyrics = request.form.get('lyrics', '').strip()
+        user_lyrics = request.form.get("lyrics", "").strip()
 
         if not user_lyrics:
             return "No lyrics provided.", 400
@@ -174,14 +285,29 @@ def predict_text():
 
         # End timer
         end_time = time.time()
-        total_time = f"{end_time - start_time:.2f} seconds"
+        total_time = end_time - start_time
+        formatted_time = f"{total_time:.2f} seconds"
+
+        # Insert log prediction
+        new_prediction_history = History(
+            lyric=user_lyrics,
+            predicted_label=predicted_label,
+            children_prob=prob_results[AGE_LABELS.index("anak")][1],
+            adolescents_prob=prob_results[AGE_LABELS.index("remaja")][1],
+            adults_prob=prob_results[AGE_LABELS.index("dewasa")][1],
+            all_ages_prob=prob_results[AGE_LABELS.index("semua usia")][1],
+            processing_time=round(total_time, 2),
+            user_id=current_user.id if current_user.is_authenticated else None,
+        )
+        db.session.add(new_prediction_history)
+        db.session.commit()
 
         return render_template(
-            'transcribe.html',
+            "transcribe.html",
             task=user_lyrics,
             prediction=predicted_label,
             probabilities=prob_results,
-            total_time=total_time
+            total_time=formatted_time,
         )
 
     except Exception as e:
@@ -189,5 +315,94 @@ def predict_text():
         return str(e), 500
 
 
+@app.route("/register", methods=["GET", "POST"])
+def register():
+    if request.method == "POST":
+        email = request.form.get("email")
+        password = request.form.get("password")
+        confirm_password = request.form.get("confirm-password")
+
+        if User.query.filter_by(email=email).first():
+            return render_template(
+                "register.html",
+                error="Email already taken!",
+                email=email,
+                password=password,
+                confirm_password=confirm_password,
+            )
+
+        if password != confirm_password:
+            return render_template(
+                "register.html",
+                error="Password does not match!",
+                email=email,
+                password=password,
+                confirm_password=confirm_password,
+            )
+
+        hashed_password = generate_password_hash(password, method="pbkdf2:sha256")
+
+        new_user = User(email=email, password=hashed_password)
+        db.session.add(new_user)
+        db.session.commit()
+
+        flash(
+            "Sign up successful! Please log in.", "success"
+        )  # Flash the success message
+        return redirect(url_for("login"))
+
+    return render_template("register.html")
+
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    if request.method == "POST":
+        email = request.form.get("email")
+        password = request.form.get("password")
+
+        user = User.query.filter_by(email=email).first()
+
+        if user and check_password_hash(user.password, password):
+            login_user(user)
+            return dashboard(login_alert=True)
+        else:
+            return render_template("login.html", error="Invalid email or password")
+
+    return render_template("login.html")
+
+
+def dashboard(login_alert=False):
+    if login_alert:
+        return render_template("index.html", email=current_user.email)
+    return redirect(url_for("index"))
+
+
+@app.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for("login"))
+
+
+@app.route("/history")
+@login_required
+def history():
+    data_history = (
+        History.query.filter_by(user_id=current_user.id)
+        .order_by(History.created_date.desc())
+        .all()
+    )
+
+    for item in data_history:
+        item.probabilities = [
+            ("anak", f"{item.children_prob:.4f}"),
+            ("remaja", f"{item.adolescents_prob:.4f}"),
+            ("dewasa", f"{item.adults_prob:.4f}"),
+            ("semua usia", f"{item.all_ages_prob:.4f}"),
+        ]
+
+    return render_template("history.html", data_history=data_history)
+
+
 if __name__ == "__main__":
     app.run(debug=True)

requirements.txt

@@ -1,6 +1,8 @@
 Click==7.0
 Flask==1.1.2
 Flask-SQLAlchemy==2.4.4
+flask_login
+werkzeug
 gunicorn==19.9.0
 itsdangerous==1.1.0
 Jinja2==2.11.3

static/css/main.css

@@ -1,36 +1,46 @@
-body, html {
-    margin: 0;
-    font-family: sans-serif;
-    background-color: lightblue;
+/* Custom Container Styles */
+.container {
+    max-width: 90vw;
+    margin-top: 5rem;
+    margin-bottom: 3rem;
 }
 
-.content {
-    margin: 0 auto;
-    width: 400px;
+@media (min-width: 1280px) {
+  .container {
+    max-width: 80vw;
+  }
 }
 
-table, td, th {
-    border: 1px solid #aaa;
+/* Audio Control Customization */
+audio::-webkit-media-controls-panel {
+    background-color: white;
 }
 
-table {
-    border-collapse: collapse;
-    width: 100%;
+/* Custom Animation */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-th {
-    height: 30px;
+.animate-spin {
+    animation: spin 1s linear infinite;
 }
 
-td {
-    text-align: center;
-    padding: 5px;
+/* Additional Custom Utilities */
+.min-h-screen {
+    min-height: 90vh;
 }
 
-.form {
-    margin-top: 20px;
-}
+/* Responsive Text Sizes */
+@media (min-width: 640px) {
+    .sm\:text-2xl {
+        font-size: 1.5rem;
+        line-height: 2rem;
+    }
 
-#content {
-    width: 70%;
+    .sm\:text-7xl {
+        font-size: 4.5rem;
+        line-height: 1;
+    }
 }

templates/base.html

@@ -1,14 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     {% block head %}{% endblock %}
 </head>
+
 <body>
     {% block body %}{% endblock %}
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 </body>
+
 </html>
 {% block script %}{% endblock %}

templates/dashboard.html

@@ -0,0 +1,14 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Indonesian Lyrics Classification By Age Group - Register</title>
+{% endblock %}
+
+{% block body %}
+<nav>
+    <ul>
+        <li><a href="/logout">Logout</a></li>
+    </ul>
+</nav>
+<h1>You are logged in as {{ email }}!</h1>
+{% endblock %}

templates/history.html

@@ -0,0 +1,313 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Indonesian Lyrics Classification By Age Group - Prediction</title>
+{% endblock %}
+
+{% block body %}
+{% include 'navbar.html' %}
+<main class="flex flex-row justify-center items-center min-h-screen">
+    <div class="container max-w-xl w-full bg-white rounded-2xl text-center space-y-6">
+        <div class="flex items-center justify-between p-4 bg-gray-100">
+            <h5 class="text-md font-bold text-gray-900 md:text-md uppercase">Prediction History</h5>
+        </div>
+        <table id="export-table" class="">
+            <thead>
+                <tr>
+                    <th class="text-gray-900 text-center">Action</th>
+                    <th>
+                        <span class="flex items-center text-gray-900">
+                            Lyric
+                            <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
+                                height="24" fill="none" viewBox="0 0 24 24">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4" />
+                            </svg>
+                        </span>
+                    </th>
+                    <th>
+                        <span class="flex items-center text-gray-900">
+                            Predicted Age Group
+                            <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
+                                height="24" fill="none" viewBox="0 0 24 24">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4" />
+                            </svg>
+                        </span>
+                    </th>
+                    <th>
+                        <span class="flex items-center text-gray-900">
+                            Processing Time (s)
+                            <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
+                                height="24" fill="none" viewBox="0 0 24 24">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4" />
+                            </svg>
+                        </span>
+                    </th>
+                    <th data-type="date" data-format="YYYY-MM-DD HH:mm:ss">
+                        <span class="flex items-center text-gray-900">
+                            Created Date
+                            <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
+                                height="24" fill="none" viewBox="0 0 24 24">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4" />
+                            </svg>
+                        </span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for item in data_history %}
+                <tr class="hover:bg-gray-50 cursor-pointer">
+                    <td class="text-center">
+                        <!-- Modal toggle -->
+                        <button data-modal-target="select-modal-{{ item.id }}" data-modal-toggle="select-modal-{{ item.id }}"
+                            class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-0.5 text-center"
+                            type="button">
+                            Detail
+                        </button>
+                        <!-- Main modal -->
+                        <div id="select-modal-{{ item.id }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true"
+                            class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+                            <div class="relative w-full max-w-7xl max-h-full">
+                                <!-- Modal content -->
+                                <div class="relative bg-white rounded-lg shadow-sm">
+                                    <!-- Modal header -->
+                                    <div
+                                        class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
+                                        <h3 class="text-lg font-semibold text-gray-900">
+                                            {{ item.created_date.strftime('%A, %d %B %Y (%I:%M %p)') }}
+                                        </h3>
+                                        <button type="button"
+                                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center"
+                                            data-modal-toggle="select-modal-{{ item.id }}">
+                                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                                                fill="none" viewBox="0 0 14 14">
+                                                <path stroke="currentColor" stroke-linecap="round"
+                                                    stroke-linejoin="round" stroke-width="2"
+                                                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                                            </svg>
+                                            <span class="sr-only">Close modal</span>
+                                        </button>
+                                    </div>
+                                    <!-- Modal body -->
+                                    <div class="p-4 md:p-5">
+                                        <!-- Lyrics -->
+                                        <div class="mb-3">
+                                            <h1 class="text-lg font-semibold text-gray-800 sm:text-xl">🎵 Lyrics</h1>
+                                            <p class="text-center px-2 py-2 text-1xl sm:text-lg text-gray-800">{{ item.lyric }}</p>
+                                        </div>
+
+                                        <hr class="mb-3 border-t border-gray-200" />
+
+                                        <!-- Predicted Age Group -->
+                                        <div class="mt-2 mb-3">
+                                            <h2 class="text-lg font-semibold text-gray-800">Predicted Age Group</h2>
+                                            <span class="text-center text-lg font-extrabold text-slate-900 sm:text-2xl">
+                                                {{ item.predicted_label.upper() }}
+                                            </span>
+                                        </div>
+
+                                        <hr class="border-t border-gray-200" />
+
+                                        <!-- Class Probabilities -->
+                                        <div class="mt-2 mb-3 flex flex-col text-center items-center">
+                                            <h3 class="text-lg font-semibold text-gray-800 mb-2">📊 Class Probabilities
+                                            </h3>
+                                            <div class="space-y-3">
+                                                <div class="w-full">
+                                                    {% for label, prob in item.probabilities %}
+                                                    <div
+                                                        class="flex gap-20 justify-between items-center px-4 py-0.5 text-gray-800 {{ 'font-medium bg-green-500' if label == item.predicted_label else '' }}">
+                                                        <div
+                                                            class="capitalize text-1xl sm:text-lg {{ 'font-medium' if label == item.predicted_label else '' }}">
+                                                            {{ label.capitalize() }}
+                                                        </div>
+                                                        <div
+                                                            class="text-1xl sm:text-lg {{ 'font-medium' if label == item.predicted_label else '' }}">
+                                                            {{ prob }}
+                                                        </div>
+                                                    </div>
+                                                    {% endfor %}
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <hr class="border-t border-gray-200" />
+
+                                        <!-- Processing Time -->
+                                        {% if item.processing_time %}
+                                        <div class="text-sm mt-2 mb-3 text-gray-500">
+                                            ⏱️ Total Processing Time: <strong>{{ "%.2f"|format(item.processing_time) }}
+                                                seconds</strong>
+                                        </div>
+                                        {% endif %}
+                                    </div>
+                                    <!-- Modal footer -->
+                                    <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b">
+                                        <button data-modal-hide="select-modal-{{ item.id }}" type="button"
+                                            class="inline-flex w-full justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="font-medium text-gray-900 whitespace-nowrap">{{ item.lyric | truncate(60) }}</td>
+                    <td class="text-gray-900">{{ item.predicted_label | capitalize }}</td>
+                    <td class="text-right !pr-[5rem] text-gray-900">{{ "%.2f"|format(item.processing_time) }} seconds
+                    </td>
+                    <td class="text-gray-900">{{ item.created_date.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</main>
+<footer class="flex flex-row justify-center items-center">
+    <div class="mb-3 text-gray-500">By Michael Natanael</div>
+</footer>
+{% endblock %}
+
+{% block script %}
+<script>
+    if (document.getElementById("export-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+
+        const exportCustomCSV = function (dataTable, userOptions = {}) {
+            // A modified CSV export that includes a row of minuses at the start and end.
+            const clonedUserOptions = {
+                ...userOptions
+            }
+            clonedUserOptions.download = false
+            const csv = simpleDatatables.exportCSV(dataTable, clonedUserOptions)
+            // If CSV didn't work, exit.
+            if (!csv) {
+                return false
+            }
+            const defaults = {
+                download: true,
+                lineDelimiter: "\n",
+                columnDelimiter: ";"
+            }
+            const options = {
+                ...defaults,
+                ...clonedUserOptions
+            }
+            const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)
+                .fill("+")
+                .join("+"); // Use "+" as the delimiter
+
+            const str = separatorRow + options.lineDelimiter + csv + options.lineDelimiter + separatorRow;
+
+            if (userOptions.download) {
+                // Create a link to trigger the download
+                const link = document.createElement("a");
+                link.href = encodeURI("data:text/csv;charset=utf-8," + str);
+                link.download = (options.filename || "Prediction History") + ".txt";
+                // Append the link
+                document.body.appendChild(link);
+                // Trigger the download
+                link.click();
+                // Remove the link
+                document.body.removeChild(link);
+            }
+
+            return str
+        }
+        const table = new simpleDatatables.DataTable("#export-table", {
+            template: (options, dom) => "<div class='" + options.classes.top + "'>" +
+                "<div class='flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-3 rtl:space-x-reverse w-full sm:w-auto'>" +
+                (options.paging && options.perPageSelect ?
+                    "<div class='" + options.classes.dropdown + "'>" +
+                    "<label>" +
+                    "<select class='" + options.classes.selector + "'></select> " + options.labels.perPage +
+                    "</label>" +
+                    "</div>" : ""
+                ) + "<button id='exportDropdownButton' type='button' class='flex w-full items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 sm:w-auto'>" +
+                "Export as" +
+                "<svg class='-me-0.5 ms-1.5 h-4 w-4' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>" +
+                "<path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7' />" +
+                "</svg>" +
+                "</button>" +
+                "<div id='exportDropdown' class='z-10 hidden w-52 divide-y divide-gray-100 rounded-lg bg-white shadow-sm data-popper-placement='bottom'>" +
+                "<ul class='p-2 text-left text-sm font-medium text-gray-500 aria-labelledby='exportDropdownButton'>" +
+                "<li>" +
+                "<button id='export-csv' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900'>" +
+                "<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
+                "<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2 2 2 0 0 0 2 2h12a2 2 0 0 0 2-2 2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2V4a2 2 0 0 0-2-2h-7Zm1.018 8.828a2.34 2.34 0 0 0-2.373 2.13v.008a2.32 2.32 0 0 0 2.06 2.497l.535.059a.993.993 0 0 0 .136.006.272.272 0 0 1 .263.367l-.008.02a.377.377 0 0 1-.018.044.49.49 0 0 1-.078.02 1.689 1.689 0 0 1-.297.021h-1.13a1 1 0 1 0 0 2h1.13c.417 0 .892-.05 1.324-.279.47-.248.78-.648.953-1.134a2.272 2.272 0 0 0-2.115-3.06l-.478-.052a.32.32 0 0 1-.285-.341.34.34 0 0 1 .344-.306l.94.02a1 1 0 1 0 .043-2l-.943-.02h-.003Zm7.933 1.482a1 1 0 1 0-1.902-.62l-.57 1.747-.522-1.726a1 1 0 0 0-1.914.578l1.443 4.773a1 1 0 0 0 1.908.021l1.557-4.773Zm-13.762.88a.647.647 0 0 1 .458-.19h1.018a1 1 0 1 0 0-2H6.647A2.647 2.647 0 0 0 4 13.647v1.706A2.647 2.647 0 0 0 6.647 18h1.018a1 1 0 1 0 0-2H6.647A.647.647 0 0 1 6 15.353v-1.706c0-.172.068-.336.19-.457Z' clip-rule='evenodd'/>" +
+                "</svg>" +
+                "<span>Export CSV</span>" +
+                "</button>" +
+                "</li>" +
+                "<li>" +
+                "<button id='export-json' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900'>" +
+                "<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
+                "<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7Zm-.293 9.293a1 1 0 0 1 0 1.414L9.414 14l1.293 1.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 0Zm2.586 1.414a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1 0 1.414l-2 2a1 1 0 0 1-1.414-1.414L14.586 14l-1.293-1.293Z' clip-rule='evenodd'/>" +
+                "</svg>" +
+                "<span>Export JSON</span>" +
+                "</button>" +
+                "</li>" +
+                "<li>" +
+                "<button id='export-txt' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900'>" +
+                "<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
+                "<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7ZM8 16a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1-5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z' clip-rule='evenodd'/>" +
+                "</svg>" +
+                "<span>Export TXT</span>" +
+                "</button>" +
+                "</li>" +
+                "<li>" +
+                "<button id='export-sql' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900'>" +
+                "<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
+                "<path d='M12 7.205c4.418 0 8-1.165 8-2.602C20 3.165 16.418 2 12 2S4 3.165 4 4.603c0 1.437 3.582 2.602 8 2.602ZM12 22c4.963 0 8-1.686 8-2.603v-4.404c-.052.032-.112.06-.165.09a7.75 7.75 0 0 1-.745.387c-.193.088-.394.173-.6.253-.063.024-.124.05-.189.073a18.934 18.934 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.073a10.143 10.143 0 0 1-.852-.373 7.75 7.75 0 0 1-.493-.267c-.053-.03-.113-.058-.165-.09v4.404C4 20.315 7.037 22 12 22Zm7.09-13.928a9.91 9.91 0 0 1-.6.253c-.063.025-.124.05-.189.074a18.935 18.935 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.074a10.163 10.163 0 0 1-.852-.372 7.816 7.816 0 0 1-.493-.268c-.055-.03-.115-.058-.167-.09V12c0 .917 3.037 2.603 8 2.603s8-1.686 8-2.603V7.596c-.052.031-.112.059-.165.09a7.816 7.816 0 0 1-.745.386Z'/>" +
+                "</svg>" +
+                "<span>Export SQL</span>" +
+                "</button>" +
+                "</li>" +
+                "</ul>" +
+                "</div>" + "</div>" +
+                (options.searchable ?
+                    "<div class='" + options.classes.search + "'>" +
+                    "<input class='" + options.classes.input + "' placeholder='" + options.labels.placeholder + "' type='search' title='" + options.labels.searchTitle + "'" + (dom.id ? " aria-controls='" + dom.id + "'" : "") + ">" +
+                    "</div>" : ""
+                ) +
+                "</div>" +
+                "<div class='" + options.classes.container + "'" + (options.scrollY.length ? " style='height: " + options.scrollY + "; overflow-Y: auto;'" : "") + "></div>" +
+                "<div class='" + options.classes.bottom + "'>" +
+                (options.paging ?
+                    "<div class='" + options.classes.info + "'></div>" : ""
+                ) +
+                "<nav class='" + options.classes.pagination + "'></nav>" +
+                "</div>"
+        })
+        const $exportButton = document.getElementById("exportDropdownButton");
+        const $exportDropdownEl = document.getElementById("exportDropdown");
+        const dropdown = new Dropdown($exportDropdownEl, $exportButton);
+        console.log(dropdown)
+
+        document.getElementById("export-csv").addEventListener("click", () => {
+            simpleDatatables.exportCSV(table, {
+                download: true,
+                lineDelimiter: "\n",
+                columnDelimiter: ";"
+            })
+        })
+        document.getElementById("export-sql").addEventListener("click", () => {
+            simpleDatatables.exportSQL(table, {
+                download: true,
+                tableName: "export_table"
+            })
+        })
+        document.getElementById("export-txt").addEventListener("click", () => {
+            simpleDatatables.exportTXT(table, {
+                download: true
+            })
+        })
+        document.getElementById("export-json").addEventListener("click", () => {
+            simpleDatatables.exportJSON(table, {
+                download: true,
+                space: 3
+            })
+        })
+    }
+</script>
+{% endblock %}

templates/index.html

@@ -5,44 +5,68 @@
 {% endblock %}
 
 {% block body %}
+{% include 'navbar.html' %}
+{% if email %}
+<div id="toast-success" class="fixed top-2 left-1/2 transform -translate-x-1/2 z-50 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-sm"
+    role="alert">
+    <div class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+            viewBox="0 0 20 20">
+            <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
+        </svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ms-3 text-sm font-normal">You are logged in as <b>{{ email }}</b>!</div>
+    <button type="button"
+        class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8"
+        data-dismiss-target="#toast-success" aria-label="Close">
+        <span class="sr-only">Close</span>
+        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+        </svg>
+    </button>
+</div>
+{% endif %}
 <main class="flex flex-row justify-center items-center min-h-screen">
     <div class="container flex flex-col justify-center items-center">
-        <h1 class="mb-5 text-5xl font-extrabold tracking-tight text-slate-900 sm:text-7xl text-center">Indonesian Lyrics
+        <h1 class="mb-4 text-5xl font-extrabold tracking-tight text-slate-900 sm:text-7xl text-center">Indonesian Lyrics
             Classification By Age Group</h1>
         <h2 class="mt-4 mb-2 px-4 text-center text-1xl font-semibold tracking-tight text-slate-900 sm:text-2xl">
             Upload or Record Your Lyrics:</h2>
         <div
-            class="mb-3 flex flex-col justify-center items-center rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
+            class="mb-2 flex flex-col justify-center items-center rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
             <div class="flex flex-row space-x-2 py-2 w-full px-2">
-                <button id="uploadButton"
-                    class="flex items-center justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200">
-                    <div class="w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776">
-                            </path>
-                        </svg></div>
-                    <div class="ml-2 break-text text-center text-md w-30">From File</div>
+                <button id="uploadButton" type="button"
+                    class="inline-flex items-center text-1xl sm:text-lg justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200">
+                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776">
+                        </path>
+                    </svg>
+                    From File
                 </button>
                 <div class="w-[1px] bg-slate-200"></div>
-                <button id="recordButton"
-                    class="flex items-center justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200">
-                    <div class="w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z">
-                            </path>
-                        </svg></div>
-                    <div id="recordText" class="ml-2 break-text text-center text-md w-30">Record</div>
+                <button id="recordButton" type="button"
+                    class="inline-flex items-center text-1xl sm:text-lg justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200">
+                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z">
+                        </path>
+                    </svg>
+                    <span id="recordText">Record</span>
                 </button>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+            <div class="w-full bg-gray-700 rounded-full h-1">
                 <div class="bg-blue-600 h-1 rounded-full transition-all duration-100" style="width: 0%;"></div>
             </div>
         </div>
 
         <!-- Hidden playback and transcribe sections -->
-        <div id="playback" class="mb-3 flex relative z-10 p-4 w-full hidden">
+        <div id="playback" class="mb-2 flex relative z-10 p-4 w-full hidden">
             <audio id="audioPlayer" controls
                 class="w-full h-14 rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
                 <source id="audioSource" type="audio/mpeg" src="">
@@ -52,28 +76,27 @@
             <form action="/transcribe" method="POST" enctype="multipart/form-data">
                 <input type="file" name="file" id="fileInput" accept=".mp3" class="hidden">
                 <button type="button" onclick="showInputText()"
-                    class="text-white bg-red-500 hover:bg-red-600 font-medium rounded-lg text-2xl px-5 py-2.5 text-center">
+                    class="text-white bg-red-500 hover:bg-red-600 font-medium rounded-lg text-1xl sm:text-lg px-5 py-2.5 text-center">
                     Cancel
                 </button>
                 <button type="submit"
-                    class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-2xl px-5 py-2.5 text-center">
+                    class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-1xl sm:text-lg px-5 py-2.5 text-center">
                     Predict Age Group
                 </button>
             </form>
         </div>
 
         <!-- Text Input for Manual Lyrics Prediction -->
-        <div class="mt-4 w-full mt-8" id="input-text">
+        <div class="mt-2 w-full" id="input-text">
             <form action="/predict-text" method="POST" class="flex flex-col space-y-4">
                 <label for="lyricsInput"
                     class="mb-2 text-1xl font-semibold tracking-tight text-slate-900 sm:text-2xl">Or Input Your Lyrics
                     Here:</label>
                 <textarea name="lyrics" id="lyricsInput" rows="6" required
-                    class="w-full rounded-lg border border-gray-300 px-2 py-2 text-2xl focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="w-full rounded-lg border border-gray-300 px-2 py-2 text-1xl sm:text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="Type or paste Indonesian lyrics..."></textarea>
-                <br>
                 <button type="submit"
-                    class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-2xl px-5 py-2.5 text-center">
+                    class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-1xl sm:text-lg px-5 py-2.5 text-center">
                     Predict Age Group
                 </button>
             </form>
@@ -81,7 +104,7 @@
     </div>
 </main>
 <footer class="flex flex-row justify-center items-center">
-    <div class="mb-5 text-gray-500">By Michael Natanael</div>
+    <div class="mb-3 text-gray-500">By Michael Natanael</div>
 </footer>
 {% endblock %}
 
@@ -123,7 +146,7 @@
             }
             submitBtn.disabled = true;
             submitBtn.innerHTML = `
-                <svg aria-hidden="true" role="status" class="inline w-4 h-4 me-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg aria-hidden="true" role="status" class="inline w-5 h-5 me-1 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                         fill="#E5E7EB" />
                     <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"

templates/login.html

@@ -0,0 +1,121 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Indonesian Lyrics Classification By Age Group - Login</title>
+{% endblock %}
+
+{% block body %}
+<section class="bg-white">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+    {% for category, message in messages %}
+    <div id="toast-success"
+        class="fixed top-2 left-1/2 transform -translate-x-1/2 z-50 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-sm"
+        role="alert">
+        <div class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
+            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                viewBox="0 0 20 20">
+                <path
+                    d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
+            </svg>
+            <span class="sr-only">Check icon</span>
+        </div>
+        <div class="ms-3 text-sm font-normal">{{ message }}</div>
+        <button type="button"
+            class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8"
+            data-dismiss-target="#toast-success" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            </svg>
+        </button>
+    </div>
+    {% endfor %}
+    {% endif %}
+    {% endwith %}
+    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+        <a href="/" class="flex flex-col gap-3 items-center mb-6 text-2xl font-semibold text-gray-900">
+            <div class="flex">
+                <img src="/static/img/Logo PNJ.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/BLU SPEED LOGO.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Kemendikbud.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Kampus Merdeka.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Vokasi Menguatkan.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            </div>
+            <h1
+                class="text-center text-2xl font-extrabold text-slate-900 leading-tight tracking-tight text-gray-900 md:text-3xl">
+                Indonesian Lyrics Classification By Age Group
+            </h1>
+        </a>
+        <div class="w-full rounded-lg shadow-sm inset-shadow-sm md:mt-0 sm:max-w-md xl:p-0">
+            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
+                    Sign in to your account
+                </h1>
+                {% if error %}
+                <div id="toast-default" class="flex p-4 mb-4 rounded-lg bg-red-100" role="alert">
+                    <div class="text-sm text-red-800" role="alert">
+                        {{ error }}
+                    </div>
+                    <button type="button"
+                        class="ms-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-red-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:text-red-800 inline-flex items-center justify-center h-8 w-8"
+                        data-dismiss-target="#toast-default" aria-label="Close">
+                        <span class="sr-only">Close</span>
+                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                        </svg>
+                    </button>
+                </div>
+                {% endif %}
+                <form class="space-y-4 md:space-y-6" action="/login" method="post">
+                    <div>
+                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Your
+                            email</label>
+                        <input type="email" name="email" id="email"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                            placeholder="[email protected]" required="">
+                    </div>
+                    <div>
+                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900">Password</label>
+                        <input type="password" name="password" id="password" placeholder="••••••••"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                            required="">
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-start">
+                            <div class="flex items-center h-5">
+                                <input id="remember" aria-describedby="remember" type="checkbox"
+                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300">
+                            </div>
+                            <div class="ml-3 text-sm">
+                                <label for="remember" class="text-gray-500">Remember me</label>
+                            </div>
+                        </div>
+                        <a href="#" class="text-sm font-medium text-primary-600 hover:underline">Forgot
+                            password?</a>
+                    </div>
+                    <div class="flex gap-3">
+                        <button type="submit"
+                            class="flex-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+                            Sign in</button>
+                        <a href="/"
+                            class="flex-2 text-white bg-gray-400 hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+                            Continue without sign in</a>
+                    </div>
+                    <p class="text-sm font-light text-gray-500">
+                        Don’t have an account yet? <a href="/register"
+                            class="font-medium text-primary-600 hover:underline">Sign
+                            up</a>
+                    </p>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<footer class="flex flex-row justify-center items-center">
+    <div class="absolute bottom-4 text-gray-500">By Michael Natanael</div>
+</footer>
+{% endblock %}

templates/navbar.html

@@ -0,0 +1,68 @@
+<nav class="bg-white fixed w-full z-20 top-0 start-0 border-b border-gray-200">
+    <div class="flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+            <img src="/static/img/Logo PNJ.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            <img src="/static/img/BLU SPEED LOGO.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            <img src="/static/img/Logo Kemendikbud.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            <img src="/static/img/Logo Kampus Merdeka.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            <img src="/static/img/Logo Vokasi Menguatkan.png" class="h-8" alt="Politeknik Negeri Jakarta">
+        </a>
+        <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+            <button data-collapse-toggle="navbar-sticky" type="button"
+                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
+                aria-controls="navbar-sticky" aria-expanded="false">
+                <span class="sr-only">Open main menu</span>
+                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                    viewBox="0 0 17 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M1 1h15M1 7h15M1 13h15" />
+                </svg>
+            </button>
+        </div>
+        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1 ml-auto" id="navbar-sticky">
+            <ul
+                class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
+                {% if current_user.is_authenticated %}
+                <li>
+                    {% if request.path == url_for('index') %}
+                    <a href="/"
+                        class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0"
+                        aria-current="page">Home</a>
+                    {% else %}
+                    <a href="/"
+                        class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0">Home</a>
+                    {% endif %}
+                </li>
+                <li>
+                    {% if request.path == url_for('history') %}
+                    <a href="/history"
+                        class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0"
+                        aria-current="page">History</a>
+                    {% else %}
+                    <a href="/history"
+                        class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0">History</a>
+                    {% endif %}
+                </li>
+                <li>
+                    <a href="/logout"
+                        class="flex items-center gap-1 block py-2 px-3 text-red-600 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-red-700 md:p-0">
+                        <svg class="block w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 16 16">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 8h11m0 0-4-4m4 4-4 4m-5 3H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h3" />
+                        </svg>
+                        <span>Logout</span>
+                    </a>
+                </li>
+                {% else %}
+                <li>
+                    <a href="/login"
+                        class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center me-2">Login</a>
+                    <a href="/register"
+                        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center">Register</a>
+                </li>
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>

templates/register.html

@@ -0,0 +1,81 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Indonesian Lyrics Classification By Age Group - Register</title>
+{% endblock %}
+
+{% block body %}
+<section class="bg-white">
+    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+        <a href="/" class="flex flex-col gap-3 items-center mb-6 text-2xl font-semibold text-gray-900">
+            <div class="flex">
+                <img src="/static/img/Logo PNJ.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/BLU SPEED LOGO.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Kemendikbud.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Kampus Merdeka.png" class="h-8" alt="Politeknik Negeri Jakarta">
+                <img src="/static/img/Logo Vokasi Menguatkan.png" class="h-8" alt="Politeknik Negeri Jakarta">
+            </div>
+            <h1
+                class="text-center text-2xl font-extrabold text-slate-900 leading-tight tracking-tight text-gray-900 md:text-3xl">
+                Indonesian Lyrics Classification By Age Group
+            </h1>
+        </a>
+        <div class="w-full rounded-lg shadow-sm inset-shadow-sm md:mt-0 sm:max-w-md xl:p-0">
+            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
+                    Sign up your new account
+                </h1>
+                {% if error %}
+                <div id="toast-default" class="flex p-4 mb-4 rounded-lg bg-red-100" role="alert">
+                    <div class="text-sm text-red-800" role="alert">
+                        {{ error }}
+                    </div>
+                    <button type="button"
+                        class="ms-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-red-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:text-red-800 inline-flex items-center justify-center h-8 w-8"
+                        data-dismiss-target="#toast-default" aria-label="Close">
+                        <span class="sr-only">Close</span>
+                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                        </svg>
+                    </button>
+                </div>
+                {% endif %}
+                <form class="space-y-4 md:space-y-6" action="/register" method="post">
+                    <div>
+                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Email</label>
+                        <input type="email" name="email" id="email"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                            placeholder="[email protected]" required="" value="{{ email }}">
+                    </div>
+                    <div>
+                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900">New Password</label>
+                        <input type="password" name="password" id="password" placeholder="••••••••"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                            required="" value="{{ password }}">
+                    </div>
+                    <div>
+                        <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900">Confirm
+                            Password</label>
+                        <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                            required="" value="{{ confirm_password }}">
+                    </div>
+                    <button type="submit"
+                        class="flex-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+                        Sign up</button>
+                    <p class="text-sm font-light text-gray-500">
+                        Already have an account? <a href="/login"
+                            class="font-medium text-primary-600 hover:underline">Sign
+                            in</a>
+                    </p>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<footer class="flex flex-row justify-center items-center">
+    <div class="absolute bottom-4 text-gray-500">By Michael Natanael</div>
+</footer>
+{% endblock %}

templates/transcribe.html

@@ -5,36 +5,37 @@
 {% endblock %}
 
 {% block body %}
+{% include 'navbar.html' %}
 <main class="flex flex-row justify-center items-center min-h-screen">
-    <div class="container max-w-xl w-full bg-white rounded-2xl shadow-lg p-8 text-center space-y-6">
+    <div class="container max-w-xl w-full bg-white rounded-2xl p-8 text-center space-y-6">
 
         <!-- Lyrics -->
-        <div class="mb-5">
+        <div class="mb-3">
             <h1 class="text-lg font-semibold text-gray-800 sm:text-xl">🎵 Lyrics</h1>
             <p class="text-center px-2 py-2 text-1xl sm:text-lg">{{ task }}</p>
         </div>
 
-        <hr class="my-12 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
+        <hr class="mb-3 border-t border-gray-200" />
 
         <!-- Predicted Age Group -->
-        <div class="mt-4 mb-5">
+        <div class="mt-2 mb-3">
             <h2 class="text-lg font-semibold text-gray-800">Predicted Age Group</h2>
             <span class="text-center text-lg font-extrabold text-slate-900 sm:text-2xl">
                 {{ prediction.upper() }}
             </span>
         </div>
 
-        <hr class="my-12 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
+        <hr class="border-t border-gray-200" />
 
         <!-- Class Probabilities -->
-        <div class="mt-4 mb-5 flex flex-col text-center items-center">
+        <div class="mt-2 mb-3 flex flex-col text-center items-center">
             <h3 class="text-lg font-semibold text-gray-800 mb-2">📊 Class Probabilities</h3>
             <div class="space-y-3">
                 <table>
                     {% for label, prob in probabilities %}
                     <tr class="{{ 'bg-green-500' if label == prediction else '' }}">
                         <td class="px-2 text-left">
-                            <span class="capitalize text-gray-600 text-1xl sm:text-lg {{ 'font-medium' if label == prediction else '' }}">{{ label.capitalize() }}</span>
+                            <span class="capitalize text-gray-800 text-1xl sm:text-lg {{ 'font-medium' if label == prediction else '' }}">{{ label.capitalize() }}</span>
                         </td>
                         <td class="px-5"></td>
                         <td class="px-2 text-right">
@@ -46,25 +47,25 @@
             </div>
         </div>
 
-        <hr class="my-12 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
+        <hr class="border-t border-gray-200" />
 
         <!-- Processing Time -->
         {% if total_time %}
-        <div class="mt-4 mb-5 text-gray-500">
+        <div class="text-sm mt-2 mb-3 text-gray-500">
             ⏱️ Total Processing Time: <strong>{{ total_time }}</strong>
         </div>
         {% endif %}
 
         <!-- Action Button -->
-        <div class="w-full flex flex-col my-2 overflow-y-auto"></div>
-        <div class="mt-4">
-            <a href="/" class="bg-blue-700 hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-lg text-2xl">
+        <div class="w-full flex flex-col mb-5 overflow-y-auto"></div>
+        <div class="mt-2">
+            <a href="/" class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-1xl sm:text-lg px-5 py-2.5 text-center">
                 🔁 Try Another Lyrics
             </a>
         </div>
     </div>
 </main>
 <footer class="flex flex-row justify-center items-center">
-    <div class="mb-5 text-gray-500">By Michael Natanael</div>
+    <div class="mb-3 text-gray-500">By Michael Natanael</div>
 </footer>
 {% endblock %}