change faster_whisper to whisper-large-v3 groqcloud

app.py

@@ -18,6 +18,7 @@ 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
+from groq import Groq
 import tempfile
 import os
 import datetime
@@ -132,6 +133,9 @@ def download_checkpoint_if_needed(url, save_path):
 print(show_schema_info())
 download_checkpoint_if_needed(CHECKPOINT_URL, CHECKPOINT_PATH)
 
+# Load groq
+client = Groq(api_key="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")
+
 # Load tokenizer
 tokenizer = BertTokenizer.from_pretrained("indolem/indobert-base-uncased")
 
@@ -230,7 +234,17 @@ def transcribe():
                 temp_audio_path = temp_audio.name
 
             # Step 1: Transcribe
-            transcribed_text = faster_whisper(temp_audio_path).strip()
+            # transcribed_text = faster_whisper(temp_audio_path).strip()
+            with open(temp_audio_path, "rb") as file:
+                transcription = client.audio.transcriptions.create(
+                    file=(temp_audio_path, file.read()),
+                    model="whisper-large-v3",
+                    prompt="Transkripsikan hanya bagian lirik lagu saja",
+                    language="id",
+                    response_format="verbose_json",
+                    temperature=0,
+                )
+            transcribed_text = transcription.text.strip()
             os.remove(temp_audio_path)
 
             # Step 2: BERT Prediction

templates/base.html

@@ -8,6 +8,8 @@
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <link rel="icon" href="{{ url_for('static', filename='img/black-song.svg') }}" media="(prefers-color-scheme: light)">
+    <link rel="icon" href="{{ url_for('static', filename='img/white-song.svg') }}" media="(prefers-color-scheme: dark)">
     {% block head %}{% endblock %}
 </head>
 

templates/login.html

@@ -35,7 +35,7 @@
     {% 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">
+        <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">
@@ -94,8 +94,8 @@
                                 <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>
+                        <!-- <a href="#" class="text-sm font-medium text-primary-600 hover:underline">Forgot
+                            password?</a> -->
                     </div>
                     <div class="flex gap-3">
                         <button type="submit"

templates/navbar.html

@@ -55,7 +55,34 @@
                     </a>
                 </li>
                 {% else %}
-                <li>
+                <li class="flex items-center">
+                    <button class="me-2" data-popover-target="popover-description" data-popover-placement="bottom-end"
+                        type="button"><svg class="w-7 h-7 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true"
+                            fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                                clip-rule="evenodd"></path>
+                        </svg><span class="sr-only">Show information</span></button>
+                    <div data-popover id="popover-description" role="tooltip"
+                        class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-90">
+                        <div class="p-3 space-y-2">
+                            <h3 class="font-semibold text-gray-900">Main Features:</h3>
+                            <ul class="max-w-md space-y-1 list-disc list-inside">
+                                <li>Automatic Speech-to-Text Conversion</li>
+                                <li>Manual Lyrics Input (in text format)</li>
+                                <li>Lyrics Classification Based on Listener's Age</li>
+                                <li>Probability Prediction for Each Age Category</li>
+                                <li>Prediction History (available for logged-in users)</li>
+                            </ul>
+                            <a href="/login"
+                                class="flex items-center font-medium text-blue-600 hover:text-blue-700 hover:underline">Login to save your prediction history <svg class="w-2 h-2 ms-1.5 rtl:rotate-180" aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                        stroke-width="2" d="m1 9 4-4-4-4" />
+                                </svg></a>
+                        </div>
+                        <div data-popper-arrow></div>
+                    </div>
                     <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"

templates/register.html

@@ -7,7 +7,7 @@
 {% 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">
+        <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">