First deployment

.gitignore

@@ -0,0 +1,2 @@
+__pycache__/
+final_checkpoint/

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,177 @@
+from flask import Flask, render_template, request
+import whisper
+import tempfile
+import os
+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
+import lightning as L
+
+app = Flask(__name__)
+
+# === CONFIG ===
+CHECKPOINT_URL = "https://github.com/michael2002porto/bert_classification_indonesian_song_lyrics/releases/download/finetuned_checkpoints/original_split_synthesized.ckpt"
+CHECKPOINT_PATH = "final_checkpoint/original_split_synthesized.ckpt"
+AGE_LABELS = ["semua usia", "anak", "remaja", "dewasa"]
+
+# === FUNCTION TO DOWNLOAD CKPT IF NEEDED ===
+def download_checkpoint_if_needed(url, save_path):
+    if not os.path.exists(save_path):
+        os.makedirs(os.path.dirname(save_path), exist_ok=True)
+        print(f"📥 Downloading model checkpoint from {url}...")
+        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:
+                for chunk in response.iter_content(1024):
+                    f.write(chunk)
+                    pbar.update(len(chunk))
+            print("✅ Checkpoint downloaded!")
+        else:
+            raise Exception(f"❌ Failed to download: {response.status_code}")
+
+# === INITIAL SETUP: Download & Load Model ===
+download_checkpoint_if_needed(CHECKPOINT_URL, CHECKPOINT_PATH)
+
+# Load tokenizer
+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
+)
+model.eval()
+
+
+# === ROUTES ===
+
+@app.route('/', methods=['GET'])
+def index():
+    return render_template('index.html')
+
+
+@app.route('/transcribe', methods=['POST'])
+def transcribe():
+    try:
+        # Load Whisper with Indonesian language support (large / turbo)
+        # https://github.com/openai/whisper
+        whisper_model = whisper.load_model("large")
+
+        # Start measuring time
+        start_time = time.time()
+
+        audio_file = request.files['file']
+        if audio_file:
+            # Save uploaded audio to temp file
+            with tempfile.NamedTemporaryFile(delete=False, suffix=".wav") as temp_audio:
+                temp_audio.write(audio_file.read())
+                temp_audio_path = temp_audio.name
+
+            # Step 1: Transcribe
+            transcription = whisper_model.transcribe(temp_audio_path, language="id")
+            os.remove(temp_audio_path)
+            transcribed_text = transcription["text"]
+
+            # Step 2: BERT Prediction
+            encoding = tokenizer.encode_plus(
+                transcribed_text,
+                add_special_tokens=True,
+                max_length=512,
+                return_token_type_ids=True,
+                padding="max_length",
+                return_attention_mask=True,
+                return_tensors='pt',
+            )
+
+            with torch.no_grad():
+                prediction = model(
+                    encoding["input_ids"],
+                    encoding["attention_mask"],
+                    encoding["token_type_ids"]
+                )
+
+            logits = prediction
+            probabilities = torch.nn.functional.softmax(logits, dim=1).cpu().numpy().flatten()
+            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)]
+
+            # Stop timer
+            end_time = time.time()
+            total_time = end_time - start_time
+            formatted_time = f"{total_time:.2f} seconds"
+
+            return render_template(
+                'transcribe.html',
+                task=transcribed_text,
+                prediction=predicted_label,
+                probabilities=prob_results,
+                total_time=formatted_time
+            )
+
+    except Exception as e:
+        print("Error:", e)
+        return str(e)
+
+
+@app.route('/predict-text', methods=['POST'])
+def predict_text():
+    try:
+        user_lyrics = request.form.get('lyrics', '').strip()
+
+        if not user_lyrics:
+            return "No lyrics provided.", 400
+
+        # Start timer
+        start_time = time.time()
+
+        encoding = tokenizer.encode_plus(
+            user_lyrics,
+            add_special_tokens=True,
+            max_length=512,
+            return_token_type_ids=True,
+            padding="max_length",
+            return_attention_mask=True,
+            return_tensors='pt',
+        )
+
+        with torch.no_grad():
+            prediction = model(
+                encoding["input_ids"],
+                encoding["attention_mask"],
+                encoding["token_type_ids"]
+            )
+
+        logits = prediction
+        probabilities = torch.nn.functional.softmax(logits, dim=1).cpu().numpy().flatten()
+        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)]
+
+        # End timer
+        end_time = time.time()
+        total_time = f"{end_time - start_time:.2f} seconds"
+
+        return render_template(
+            'transcribe.html',
+            task=user_lyrics,
+            prediction=predicted_label,
+            probabilities=prob_results,
+            total_time=total_time
+        )
+
+    except Exception as e:
+        print("❌ Error in predict-text:", e)
+        return str(e), 500
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

model/multi_class_model.py

@@ -0,0 +1,302 @@
+import random
+import sys
+
+import torch
+import torch.nn as nn
+
+import lightning as L
+
+from transformers import BertModel
+from torchmetrics.classification import F1Score, Accuracy, Precision, Recall
+
+class MultiClassModel(L.LightningModule):
+    def __init__(self,
+                 dropout,
+                 n_out,
+                 lr,
+                 hidden_size = 768,
+                 model_dim = 768,):
+        super(MultiClassModel, self).__init__()
+
+        # save all the hyperparameters
+        self.save_hyperparameters()
+
+        # seed untuk weight
+        torch.manual_seed(1) # Untuk GPU
+        random.seed(1) # Untuk CPU
+
+        # inisialisasi bert
+        # sudah di training terhadap dataset tertentu oleh orang di wikipedia
+        self.bert = BertModel.from_pretrained('indolem/indobert-base-uncased')
+
+        # hasil dimasukkan ke linear function
+        # pre_classifier = agar weight tidak hilang ketika epoch selanjutnya. Agar weight dapat digunakan kembali
+        # Disimpan di memori spesifik untuk song lyrics classification
+        # di kecilkan dimensinya dari 768 -> 512
+        self.pre_classifier = nn.Linear(hidden_size, model_dim)
+
+        self.dropout = nn.Dropout(dropout)
+
+        # n_out = jumlah label
+        # jumlah label = 4 (semua usia, anak, remaja, dewasa)
+        self.num_classes = n_out
+        # output_layer classifier untuk merubah menjadi label
+        self.output_layer = nn.Linear(model_dim, self.num_classes)
+        #  Activation function / Normalisasi
+        self.softmax = nn.Softmax()
+                
+        # Seberapa dalam rasio si model di optimize
+        self.lr = lr
+        
+        # Persiapan benchmarking
+        self.prepare_metrics()
+
+        # menghitung loss function
+        self.criterion = nn.BCEWithLogitsLoss()
+
+    # mengambil input dari bert, pre_classifier
+    def forward(self, input_ids, attention_mask, token_type_ids):
+        bert_out = self.bert(
+            input_ids = input_ids,
+            attention_mask = attention_mask,
+            token_type_ids = token_type_ids
+        )
+
+        # hidden_state = bert_out[0]
+        # pooler = hidden_state[:, 0]
+        # Output size (batch size = 20 baris, sequence length = 100 kata / token, hidden_size = 768 tensor jumlah vektor representation dari)
+        
+        # Full Output Model
+        # 12 * 768
+        # 12 = layer nya (Filter)
+        # 768 = Probabilitas 
+        # layer 12
+
+        # dimensi pooler output = 1 * 768
+        bert_out = bert_out.pooler_output   #ambil output layer terakhir
+        out = self.dropout(bert_out)  #menghilangkan memory
+
+        # pre classifier untuk mentransfer wight output ke epch selanjuntya
+        out = self.pre_classifier(out)     #pindah ke memori khusus klasifikasi
+        
+        # kontrol hasil pooler min -1 max 1
+        # pooler = torch.nn.Tanh()(pooler)
+        
+        # 0.02312312412413131 -> 0.023412 (normalisasi) -> 0 -> 1
+        # -0.3124211 -> 0.00012
+        out = self.output_layer(out)    # output_layer classifier untuk memprojeksikan hasil pooler (768) ke jumlah label (4)
+        out = self.softmax(out)     #menstabilkan sehingga 0 - 1
+
+        # pooler = self.dropout(pooler)
+
+        return out
+
+    def prepare_metrics(self):
+        task = "multiclass"
+        
+        self.acc_metrics = Accuracy(task = task, num_classes = self.num_classes)
+        
+        self.f1_metrics_micro = F1Score(task = task, num_classes = self.num_classes, average = "micro")
+        self.f1_metrics_macro = F1Score(task = task, num_classes = self.num_classes, average = "macro")
+        self.f1_metrics_weighted = F1Score(task = task, num_classes = self.num_classes, average = "weighted")
+        
+        self.prec_metrics_micro = Precision(task = task, num_classes = self.num_classes, average = "micro")
+        self.prec_metrics_macro = Precision(task = task, num_classes = self.num_classes, average = "macro")
+        self.prec_metrics_weighted = Precision(task = task, num_classes = self.num_classes, average = "weighted")
+        
+        self.recall_metrics_micro = Recall(task = task, num_classes = self.num_classes, average = "micro")
+        self.recall_metrics_macro = Recall(task = task, num_classes = self.num_classes, average = "macro")
+        self.recall_metrics_weighted = Recall(task = task, num_classes = self.num_classes, average = "weighted")
+
+        # to make use of all the outputs
+        self.training_step_output = []
+        self.validation_step_output = []
+        self.test_step_output = []
+        
+    def benchmarking_step(self, pred, target):
+        '''
+        output pred / target = 
+        [
+            [0.001, 0.80],
+            [0.8, 0.0001],
+            [0.8, 0.0001],
+            [0.8, 0.0001],
+            [0.8, 0.0001]
+        ]
+        
+        y_pred -> [1, 0, 0, 0, 0]
+        '''
+        
+        pred = torch.argmax(pred, dim = 1)
+        target = torch.argmax(target, dim = 1)
+        
+        metrics = {}
+        metrics["accuracy"] = self.acc_metrics(pred, target)
+        metrics["f1_micro"] = self.f1_metrics_micro(pred, target)
+        metrics["f1_macro"] = self.f1_metrics_macro(pred, target)
+        metrics["f1_weighted"] = self.f1_metrics_weighted(pred, target)
+        metrics["prec_micro"] = self.prec_metrics_micro(pred, target)
+        metrics["prec_macro"] = self.prec_metrics_macro(pred, target)
+        metrics["prec_weighted"] = self.prec_metrics_weighted(pred, target)
+        metrics["recall_micro"] = self.recall_metrics_micro(pred, target)
+        metrics["recall_macro"] = self.recall_metrics_macro(pred, target)
+        metrics["recall_weighted"] = self.recall_metrics_weighted(pred, target)
+        
+        return metrics
+
+    def configure_optimizers(self):
+        # di dalam parameter adam, parameters untuk mengambil kesuluruhan input yg di atas
+
+        # Fungsi adam 
+        # Tranfer epoch 1 ke epoch 2
+        # Mengontrol (efisiensi) loss
+        # Proses training lebih cepat
+        # Tidak memakan memori berlebih
+        #Learning rate semakin tinggi maka hasil itunya semakin besar
+        optimizer = torch.optim.Adam(self.parameters(), lr = self.lr)   #untuk menjaga training model improve
+        return optimizer
+
+    def training_step(self, batch, batch_idx):
+        x_input_ids, x_token_type_ids, x_attention_mask, y = batch
+
+        # Ke tiga parameter di input dan di olah oleh method / function forward()
+        y_pred = self(
+            input_ids = x_input_ids,
+            attention_mask = x_attention_mask,
+            token_type_ids = x_token_type_ids
+        )
+
+        #y_pred semakin salah, maka semakin tinggi loss
+        loss = self.criterion(y_pred, target = y.float())
+        
+        metrics = self.benchmarking_step(pred = y_pred, target = y)     #tahu skor
+        metrics["loss"] = loss
+        metrics_loss = loss
+        
+        self.training_step_output.append(metrics)
+        self.log_dict({"train_loss": metrics_loss}, prog_bar = True, on_epoch = True)
+        
+        return loss
+
+    def validation_step(self, batch, batch_idx):
+        x_input_ids, x_token_type_ids, x_attention_mask, y = batch
+
+        # Ke tiga parameter di input dan di olah oleh method / function forward()
+        y_pred = self(
+            input_ids = x_input_ids,
+            attention_mask = x_attention_mask,
+            token_type_ids = x_token_type_ids
+        )
+
+        #y_pred semakin salah, maka semakin tinggi loss
+        loss = self.criterion(y_pred, target = y.float())
+        
+        metrics = self.benchmarking_step(pred = y_pred, target = y)     #tahu skor
+        metrics["loss"] = loss
+        metrics_loss = loss
+        
+        self.validation_step_output.append(metrics)
+        self.log_dict({"val_loss": metrics_loss}, prog_bar = True, on_epoch = True)
+        
+        return loss
+
+    def test_step(self, batch, batch_idx):
+        x_input_ids, x_token_type_ids, x_attention_mask, y = batch
+
+        # Ke tiga parameter di input dan di olah oleh method / function forward()
+        y_pred = self(
+            input_ids = x_input_ids,
+            attention_mask = x_attention_mask,
+            token_type_ids = x_token_type_ids
+        )
+
+        #y_pred semakin salah, maka semakin tinggi loss
+        loss = self.criterion(y_pred, target = y.float())
+        
+        metrics = self.benchmarking_step(pred = y_pred, target = y)     #tahu skor
+        metrics["loss"] = loss
+        
+        self.test_step_output.append(metrics)
+        self.log_dict(metrics, prog_bar = True, on_epoch = True)
+        
+        return loss
+
+    # def predict_step(self, batch, batch_idx):
+    #     # Tidak ada transfer weight
+    #     x_input_ids, x_token_type_ids, x_attention_mask, y = batch
+
+    #     out = self(input_ids = x_input_ids,
+    #                attention_mask = x_attention_mask,
+    #                token_type_ids = x_token_type_ids)
+    #     # Ke tiga parameter di input dan di olah oleh method / function forward
+
+    #     pred = out.argmax(1).cpu()
+    #     true = y.argmax(1).cpu()
+
+    #     outputs = {"predictions": out, "labels": y}
+    #     self.predict_step_outputs.append(outputs)
+
+    #     # return [pred, true]
+    #     return outputs
+
+    # def on_train_epoch_end(self):
+    #     labels = []
+    #     predictions = []
+
+    #     for output in self.training_step_outputs:
+    #         for out_lbl in output["labels"].detach().cpu():
+    #             labels.append(out_lbl)
+    #         for out_pred in output["predictions"].detach().cpu():
+    #             predictions.append(out_pred)
+
+    #     # argmax(dim=1) = convert one-hot encoded labels to class indices
+    #     labels = torch.stack(labels).int().argmax(dim=1)
+    #     predictions = torch.stack(predictions).argmax(dim=1)
+
+    #     print("\n")
+    #     print("labels = ", labels)
+    #     print("predictions = ", predictions)
+    #     print("num_classes = ", self.num_classes)
+
+    #     # Hitung akurasi
+    #     accuracy = Accuracy(task = "multiclass", num_classes = self.num_classes)
+    #     acc = accuracy(predictions, labels)
+
+    #     # Print Akurasinya
+    #     print("Overall Training Accuracy : ", acc)
+    #     print("\n")
+    #     # sys.exit()
+
+    #     # free memory
+    #     self.training_step_outputs.clear()
+
+    # def on_predict_epoch_end(self):
+    #     labels = []
+    #     predictions = []
+
+    #     for output in self.predict_step_outputs:
+    #         # print(output[0]["predictions"][0])
+    #         # print(len(output))
+    #         # break
+    #         for out_lbl in output["labels"].detach().cpu():
+    #             labels.append(out_lbl)
+    #         for out_pred in output["predictions"].detach().cpu():
+    #             predictions.append(out_pred)
+
+    #     # argmax(dim=1) = convert one-hot encoded labels to class indices
+    #     labels = torch.stack(labels).int().argmax(dim=1)
+    #     predictions = torch.stack(predictions).argmax(dim=1)
+
+    #     print("\n")
+    #     print("labels = ", labels)
+    #     print("predictions = ", predictions)
+    #     print("num_classes = ", self.num_classes)
+
+    #     accuracy = Accuracy(task = "multiclass", num_classes = self.num_classes)
+    #     acc = accuracy(predictions, labels)
+    #     print("Overall Testing Accuracy : ", acc)
+    #     print("\n")
+    #     # sys.exit()
+
+    #     # free memory
+    #     self.predict_step_outputs.clear()

requirements.txt

@@ -0,0 +1,9 @@
+Click==7.0
+Flask==1.1.2
+Flask-SQLAlchemy==2.4.4
+gunicorn==19.9.0
+itsdangerous==1.1.0
+Jinja2==2.11.3
+MarkupSafe==1.1.1
+SQLAlchemy==1.3.22
+Werkzeug==1.0.1

static/css/main.css

@@ -0,0 +1,36 @@
+body, html {
+    margin: 0;
+    font-family: sans-serif;
+    background-color: lightblue;
+}
+
+.content {
+    margin: 0 auto;
+    width: 400px;
+}
+
+table, td, th {
+    border: 1px solid #aaa;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th {
+    height: 30px;
+}
+
+td {
+    text-align: center;
+    padding: 5px;
+}
+
+.form {
+    margin-top: 20px;
+}
+
+#content {
+    width: 70%;
+}

static/css/tailwind.css

@@ -0,0 +1,1281 @@
+/*
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+*/
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+  tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
+
+*,
+::before,
+::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.ms-1 {
+  -webkit-margin-start: 0.25rem;
+  margin-inline-start: 0.25rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.max-h-\[20rem\] {
+  max-height: 20rem;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-\[1px\] {
+  width: 1px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-2> :not([hidden])~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-indigo-100 {
+  --tw-text-opacity: 1;
+  color: rgb(224 231 255 / var(--tw-text-opacity));
+}
+
+.text-indigo-900 {
+  --tw-text-opacity: 1;
+  color: rgb(49 46 129 / var(--tw-text-opacity));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-black\/5 {
+  --tw-shadow-color: rgb(0 0 0 / 0.05);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-slate-700\/10 {
+  --tw-ring-color: rgb(51 65 85 / 0.1);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-100 {
+  transition-duration: 100ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+audio::-webkit-media-controls-panel {
+  background-color: white;
+}
+
+.container {
+  width: 41rem
+    /* 656px */
+  ;
+  max-width: 95vw;
+}
+
+.hover\:bg-blue-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.hover\:text-indigo-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-green-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-indigo-500:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .dark\:border-gray-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(75 85 99 / var(--tw-border-opacity));
+  }
+
+  .dark\:bg-blue-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-green-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:placeholder-gray-400::-moz-placeholder {
+    --tw-placeholder-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+  }
+
+  .dark\:placeholder-gray-400::placeholder {
+    --tw-placeholder-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+  }
+
+  .dark\:hover\:bg-blue-700:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  }
+
+  .dark\:hover\:bg-green-700:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+  }
+
+  .dark\:focus\:border-blue-500:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  }
+
+  .dark\:focus\:ring-blue-500:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+  }
+
+  .dark\:focus\:ring-blue-800:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+  }
+
+  .dark\:focus\:ring-green-800:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
+  }
+}
+
+@media (min-width: 640px) {
+
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .sm\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+}

templates/base.html

@@ -0,0 +1,14 @@
+<!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') }}">
+    {% block head %}{% endblock %}
+</head>
+<body>
+    {% block body %}{% endblock %}
+</body>
+</html>
+{% block script %}{% endblock %}

templates/index.html

@@ -0,0 +1,169 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Whisper Web - Index</title>
+{% endblock %}
+
+{% block body %}
+<div id="root">
+    <div class="flex justify-center items-center min-h-screen">
+        <div class="container flex flex-col justify-center items-center">
+            <h1 class="text-5xl font-extrabold tracking-tight text-slate-900 sm:text-7xl text-center">Whisper Web</h1>
+            <h2 class="mt-3 mb-5 px-4 text-center text-1xl font-semibold tracking-tight text-slate-900 sm:text-2xl">
+                Speech-to-Text</h2>
+            <div
+                class="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>
+                    <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>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+                    <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="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="">
+                </audio>
+            </div>
+            <div id="transcribe" class="relative w-full flex justify-center items-center hidden">
+                <form action="/transcribe" method="POST" enctype="multipart/form-data">
+                    <input type="file" name="file" id="fileInput" accept=".mp3" class="hidden">
+                    <button type="submit"
+                        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
+                        Transcribe Audio
+                    </button>
+                </form>
+            </div>
+
+            <div class="w-full flex flex-col my-2 p-4 max-h-[20rem] overflow-y-auto"></div>
+
+            <!-- Text Input for Manual Lyrics Prediction -->
+            <div class="w-full mt-8" id="input-text">
+                <form action="/predict-text" method="POST" class="flex flex-col space-y-4">
+                    <label for="lyricsInput" class="text-lg font-semibold text-slate-700">Or paste your lyric
+                        here:</label>
+                    <textarea name="lyrics" id="lyricsInput" rows="5"
+                        class="w-full rounded-lg border border-gray-300 p-3 text-sm 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 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                        Predict Age Group
+                    </button>
+                </form>
+            </div>
+        </div>
+        <div class="absolute bottom-4">By Michael Natanael</div>
+    </div>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+    let mediaRecorder;
+    let audioChunks = [];
+    let recordingInterval;
+    let seconds = 0;
+
+    // Handle file upload
+    document.getElementById("uploadButton").addEventListener("click", function () {
+        document.getElementById("fileInput").click();
+    });
+
+    document.getElementById("fileInput").addEventListener("change", function (event) {
+        if (event.target.files.length > 0) {
+            let file = event.target.files[0];
+            let fileURL = URL.createObjectURL(file);
+            updateAudioPlayer(fileURL);
+        }
+    });
+
+    // Handle audio recording
+    document.getElementById("recordButton").addEventListener("click", async function () {
+        if (!mediaRecorder || mediaRecorder.state === "inactive") {
+            startRecording();
+        } else {
+            stopRecording();
+        }
+    });
+
+    async function startRecording() {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mediaRecorder = new MediaRecorder(stream);
+
+        mediaRecorder.ondataavailable = event => {
+            audioChunks.push(event.data);
+        };
+
+        mediaRecorder.onstop = () => {
+            clearInterval(recordingInterval); // Stop timer
+            seconds = 0; // Reset timer
+
+            const audioBlob = new Blob(audioChunks, { type: 'audio/mpeg' });
+            const audioUrl = URL.createObjectURL(audioBlob);
+
+            // Update the file input with recorded audio
+            const file = new File([audioBlob], "recording.mp3", { type: "audio/mpeg" });
+            const fileInput = document.getElementById("fileInput");
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            fileInput.files = dataTransfer.files;
+
+            updateAudioPlayer(audioUrl);
+            audioChunks = []; // Reset chunks
+        };
+
+        mediaRecorder.start();
+        startTimer();
+        document.getElementById("recordText").innerHTML = "Stop Recording (00:00)";
+    }
+
+    function startTimer() {
+        recordingInterval = setInterval(() => {
+            seconds++;
+            let minutes = Math.floor(seconds / 60);
+            let remainingSeconds = seconds % 60;
+            let timeString = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+
+            document.getElementById("recordText").innerHTML = `Stop Recording (${timeString})`;
+        }, 1000);
+    }
+
+    function stopRecording() {
+        mediaRecorder.stop();
+        document.getElementById("recordText").innerHTML = "Record";
+    }
+
+    // Function to update audio player and show playback & transcribe sections
+    function updateAudioPlayer(audioUrl) {
+        document.getElementById("audioSource").src = audioUrl;
+        document.getElementById("audioPlayer").load(); // Refresh the audio player
+        document.getElementById("playback").classList.remove("hidden");
+        document.getElementById("transcribe").classList.remove("hidden");
+        document.getElementById("input-text").classList.add("hidden");
+    }
+</script>
+{% endblock %}

templates/transcribe.html

@@ -0,0 +1,32 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Whisper Web - Transcription</title>
+{% endblock %}
+
+{% block body %}
+<div class="flex justify-center items-center min-h-screen">
+    <div class="container text-center">
+        <h1 class="text-4xl font-bold mb-6">Transcription Result</h1>
+        <p class="text-xl mb-4">{{ task }}</p>
+
+        <h2 class="text-2xl font-semibold text-blue-600 mt-4">Predicted Age Group:</h2>
+        <p class="text-lg">{{ prediction }}</p>
+
+        <div class="mt-4 text-left inline-block">
+            <h3 class="text-md font-semibold">Class Probabilities:</h3>
+            <ul class="mt-2">
+                {% for label, prob in probabilities %}
+                <li>{{ label }}: {{ prob }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+
+        {% if total_time %}
+        <div class="mt-4 text-center text-sm text-gray-500">
+            ⏱️ Total Processing Time: <strong>{{ total_time }}</strong>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}