Spaces:

thejagstudio
/

LyricGen

Sleeping

App Files Files Community

thejagstudio commited on Sep 19, 2025

Commit

0373222

verified ·

1 Parent(s): 2c43524

Upload 6 files

Browse files

Files changed (6) hide show

main copy 2.py +188 -0
main copy.py +171 -0
main.py +254 -219
static/simple.css +84 -86
templates/index copy.html +420 -0
templates/index.html +487 -419

main copy 2.py ADDED Viewed

	@@ -0,0 +1,188 @@

+import os
+import io
+import base64
+from flask import Flask, request, render_template, jsonify
+from google import genai
+from google.genai import types
+from werkzeug.utils import secure_filename
+import requests
+import time
+import tempfile
+# Initialize Flask app
+app = Flask(__name__)
+# Initialize Gemini client
+client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY", "AIzaSyCg9NGsLygb0sVKpviMkgV4eMPLd9nXW7w"))
+# Set up generation config
+generate_content_config = types.GenerateContentConfig(
+    temperature=1.0,
+    top_p=0.95,
+    top_k=40,
+    max_output_tokens=8192,
+)
+# Initialize the model
+model_name = "gemini-2.5-flash"
+@app.route("/")
+def index():
+    return render_template("index.html")
+@app.route("/convert", methods=["POST"])
+def convert_audio():
+    if "file" not in request.files:
+        return jsonify({"error": "No file part"}), 400
+    file = request.files["file"]
+    if file.filename == "":
+        return jsonify({"error": "No selected file"}), 400
+    if file:
+        try:
+            # Determine mime type based on file extension
+            mime_type = None
+            if file.filename.lower().endswith('.mp3'):
+                mime_type = 'audio/mpeg'
+            elif file.filename.lower().endswith('.wav'):
+                mime_type = 'audio/wav'
+            elif file.filename.lower().endswith('.m4a'):
+                mime_type = 'audio/x-m4a'
+            elif file.filename.lower().endswith('.ogg'):
+                mime_type = 'audio/ogg'
+            else:
+                return jsonify({"error": "Unsupported file type"}), 400
+            # Save the file temporarily
+            temp_dir = tempfile.mkdtemp()
+            temp_path = os.path.join(temp_dir, secure_filename(file.filename))
+            file.save(temp_path)
+            # Upload file to Gemini with mime type
+            with open(temp_path, 'rb') as f:
+                uploaded_file = client.files.upload(file=f,config={'mime_type': mime_type})
+            # Clean up temporary file
+            os.remove(temp_path)
+            os.rmdir(temp_dir)
+            # Create content for Gemini using uploaded file
+            prompt = """Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+    <head>
+        <title>Bhaktisudha</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the file}
+            </div>
+            <div class="gpara">
+                Line1 <br/>
+                Line2 <br/>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+            # Generate response
+            response = ""
+            for chunk in client.models.generate_content_stream(
+                model=model_name,
+                contents=[uploaded_file, prompt],
+                config=generate_content_config,
+            ):
+                response += chunk.text
+            # Clean up the response
+            lyrics = response.replace("```html", "").replace("```", "")
+            return jsonify({"lyrics": lyrics})
+        except Exception as e:
+            return jsonify({"error": str(e)}), 500
+@app.route("/convert-youtube", methods=["POST"])
+def convert_youtube():
+    try:
+        data = request.get_json()
+        url = data.get("url")
+        if not url:
+            return jsonify({"error": "No URL provided"}), 400
+        # Create content for Gemini
+        contents = [
+            types.Content(
+                role="user",
+                parts=[
+                    types.Part(
+                        file_data=types.FileData(
+                            file_uri=url,
+                            mime_type="video/*",
+                        )
+                    ),
+                    types.Part.from_text(
+                        text="""Extract the Gujarati lyrics from the provided video and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+    <head>
+        <title>Bhaktisudha</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the file}
+            </div>
+            <div class="gpara">
+                Line1 <br/>
+                Line2 <br/>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+                    ),
+                ],
+            ),
+        ]
+        # Generate response
+        response = ""
+        for chunk in client.models.generate_content_stream(
+            model=model_name,
+            contents=contents,
+            config=generate_content_config,
+        ):
+            response += chunk.text
+        # Clean up the response
+        lyrics = response.replace("```html", "").replace("```", "")
+        return jsonify({"lyrics": lyrics})
+    except Exception as e:
+        return jsonify({"error": str(e)})
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860)

main copy.py ADDED Viewed

	@@ -0,0 +1,171 @@

+import os
+import io
+from flask import Flask, request, render_template, jsonify
+import google.generativeai as genai
+from werkzeug.utils import secure_filename
+import requests
+import time
+from google.generativeai import types
+# Initialize Flask app
+app = Flask(__name__)
+# Configure Gemini API
+genai.configure(api_key="AIzaSyCg9NGsLygb0sVKpviMkgV4eMPLd9nXW7w")
+# Set up generation config
+generation_config = {
+    "temperature": 1,
+    "top_p": 0.95,
+    "top_k": 40,
+    "max_output_tokens": 8192,
+    "response_mime_type": "text/plain",
+}
+# Initialize the model
+model = genai.GenerativeModel(
+    model_name="gemini-2.0-flash",
+    generation_config=generation_config,
+)
+def upload_to_gemini(file_bytes, mime_type=None):
+    """Uploads the given file bytes to Gemini."""
+    file = genai.upload_file(file_bytes, mime_type=mime_type)
+    print(f"Uploaded file as: {file.uri}")
+    return file
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/convert', methods=['POST'])
+def convert_audio():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    if file:
+        try:
+            # Read file bytes directly from the request
+            file_bytes = io.BytesIO(file.read())
+            # Determine mime type based on file extension
+            mime_type = 'audio/mpeg' if file.filename.endswith('.mp3') else \
+                        'audio/wav' if file.filename.endswith('.wav') else \
+                        'audio/x-m4a' if file.filename.endswith('.m4a') else \
+                        'audio/ogg' if file.filename.endswith('.ogg') else None
+            # Upload to Gemini
+            gemini_file = upload_to_gemini(file_bytes, mime_type=mime_type)
+            # Start chat session with the uploaded file
+            chat_session = model.start_chat(
+                history=[
+                    {
+                        "role": "user",
+                        "parts": [gemini_file],
+                    },
+                ]
+            )
+            # Generate lyrics
+            response = chat_session.send_message('''Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+	<head>
+		<title>Bhaktisudha</title>
+		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+		<link href="/static/simple.css" rel="stylesheet" type="text/css" />
+		<style>
+		</style>
+	</head>
+	<body>
+		<div class="main">
+			<div class="gtitlev3">
+				{Title of the file}
+			</div>
+			<div class="gpara">
+				Line1 <br/>
+				Line2 <br/>
+			</div>
+			<div class="chend">
+				*****
+			</div>
+		</div>
+	</body>
+</html>
+```''')
+            lyrics = response.text.replace("```html","").replace("```","")
+            return jsonify({'lyrics': lyrics})
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+@app.route('/convert-youtube', methods=['POST'])
+def convert_youtube():
+    try:
+        data = request.get_json()
+        url = data.get('url')
+        if not url:
+            return jsonify({'error': 'No URL provided'}), 400
+        # Download audio from YouTube
+        audio_data = download_from_youtube(url)
+        # Create a file-like object from the audio data
+        file_bytes = io.BytesIO(audio_data)
+        # Upload to Gemini
+        gemini_file = upload_to_gemini(file_bytes, mime_type='audio/mpeg')
+        # Start chat session with the uploaded file
+        chat_session = model.start_chat(
+            history=[
+                {
+                    "role": "user",
+                    "parts": [gemini_file],
+                },
+            ]
+        )
+        # Generate lyrics
+        response = chat_session.send_message('''Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+    <head>
+        <title>Bhaktisudha</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the file}
+            </div>
+            <div class="gpara">
+                Line1 <br/>
+                Line2 <br/>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```''')
+        lyrics = response.text.replace("```html","").replace("```","")
+        return jsonify({'lyrics': lyrics})
+    except Exception as e:
+        return jsonify({'error': str(e)})
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=7860)

main.py CHANGED Viewed

@@ -1,219 +1,254 @@
-import os
-import io
-import base64
-from flask import Flask, request, render_template, jsonify
-from google import genai
-from google.genai import types
-from werkzeug.utils import secure_filename
-import requests
-import time
-# Initialize Flask app
-app = Flask(__name__)
-# Initialize Gemini client
-client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY", "AIzaSyCg9NGsLygb0sVKpviMkgV4eMPLd9nXW7w"))
-# Set up generation config
-generate_content_config = types.GenerateContentConfig(
-    temperature=1.0,
-    top_p=0.95,
-    top_k=40,
-    max_output_tokens=8192,
-    thinking_config=types.ThinkingConfig(
-        thinking_budget=-1,
-    ),
-)
-# Initialize the model
-model_name = "gemini-2.5-flash"
-@app.route('/')
-def index():
-    return render_template('index.html')
-@app.route('/convert', methods=['POST'])
-def convert_audio():
-    if 'file' not in request.files:
-        return jsonify({'error': 'No file part'}), 400
-    file = request.files['file']
-    if file.filename == '':
-        return jsonify({'error': 'No selected file'}), 400
-    if file:
-        try:
-            # Read file bytes directly from the request
-            file_bytes = file.read()
-            # Determine mime type based on file extension
-            mime_type = 'audio/mpeg' if file.filename.endswith('.mp3') else \
-                        'audio/wav' if file.filename.endswith('.wav') else \
-                        'audio/x-m4a' if file.filename.endswith('.m4a') else \
-                        'audio/ogg' if file.filename.endswith('.ogg') else None
-            # Encode file bytes to base64
-            encoded_bytes = base64.b64encode(file_bytes).decode('utf-8')
-            file_data_uri = f"data:{mime_type};base64,{encoded_bytes}"
-            # Create content for Gemini
-            contents = [
-                types.Content(
-                    role="user",
-                    parts=[
-                        types.Part(
-                            file_data=types.FileData(
-                                file_uri=file_data_uri,
-                                mime_type=mime_type,
-                            )
-                        ),
-                        types.Part.from_text(
-                            text='''Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
-```
-<html>
-    <head>
-        <title>Bhaktisudha</title>
-        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
-        <style>
-        </style>
-    </head>
-    <body>
-        <div class="main">
-            <div class="gtitlev3">
-                {Title of the file}
-            </div>
-            <div class="gpara">
-                Line1 <br/>
-                Line2 <br/>
-            </div>
-            <div class="chend">
-                *****
-            </div>
-        </div>
-    </body>
-</html>
-```'''
-                        ),
-                    ],
-                ),
-            ]
-            # Generate response
-            response = ""
-            for chunk in client.models.generate_content_stream(
-                model=model_name,
-                contents=contents,
-                config=generate_content_config,
-            ):
-                response += chunk.text
-            # Clean up the response
-            lyrics = response.replace("```html", "").replace("```", "")
-            return jsonify({'lyrics': lyrics})
-            # Generate lyrics
-            response = chat_session.send_message('''Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
-```
-<html>
-	<head>
-		<title>Bhaktisudha</title>
-		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-		<link href="/static/simple.css" rel="stylesheet" type="text/css" />
-		<style>
-		</style>
-	</head>
-	<body>
-		<div class="main">
-			<div class="gtitlev3">
-				{Title of the file}
-			</div>
-			<div class="gpara">
-				Line1 <br/>
-				Line2 <br/>
-			</div>
-			<div class="chend">
-				*****
-			</div>
-		</div>
-	</body>
-</html>
-```''')
-            lyrics = response.text.replace("```html","").replace("```","")
-            return jsonify({'lyrics': lyrics})
-        except Exception as e:
-            return jsonify({'error': str(e)}), 500
-@app.route('/convert-youtube', methods=['POST'])
-def convert_youtube():
-    try:
-        data = request.get_json()
-        url = data.get('url')
-        if not url:
-            return jsonify({'error': 'No URL provided'}), 400
-        # Create content for Gemini
-        contents = [
-            types.Content(
-                role="user",
-                parts=[
-                    types.Part(
-                        file_data=types.FileData(
-                            file_uri=url,
-                            mime_type="video/*",
-                        )
-                    ),
-                    types.Part.from_text(
-                        text='''Extract the Gujarati lyrics from the provided video and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
-```
-<html>
-    <head>
-        <title>Bhaktisudha</title>
-        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
-        <style>
-        </style>
-    </head>
-    <body>
-        <div class="main">
-            <div class="gtitlev3">
-                {Title of the file}
-            </div>
-            <div class="gpara">
-                Line1 <br/>
-                Line2 <br/>
-            </div>
-            <div class="chend">
-                *****
-            </div>
-        </div>
-    </body>
-</html>
-```'''
-                    ),
-                ],
-            ),
-        ]
-        # Generate response
-        response = ""
-        for chunk in client.models.generate_content_stream(
-            model=model_name,
-            contents=contents,
-            config=generate_content_config,
-        ):
-            response += chunk.text
-        # Clean up the response
-        lyrics = response.replace("```html", "").replace("```", "")
-        return jsonify({'lyrics': lyrics})
-    except Exception as e:
-        return jsonify({'error': str(e)})
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)

+import os
+import io
+import base64
+from flask import Flask, request, render_template, jsonify
+from google import genai
+from google.genai import types
+from werkzeug.utils import secure_filename
+import requests
+import time
+import tempfile
+# Initialize Flask app
+app = Flask(__name__)
+# Initialize Gemini client
+client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY", "AIzaSyCg9NGsLygb0sVKpviMkgV4eMPLd9nXW7w"))
+# Set up generation config
+generate_content_config = types.GenerateContentConfig(
+    temperature=1.0,
+    top_p=0.95,
+    top_k=40,
+    max_output_tokens=8192,
+)
+# Initialize the model
+model_name = "gemini-2.5-flash"
+@app.route("/")
+def index():
+    return render_template("index.html")
+@app.route("/convert", methods=["POST"])
+def convert_audio():
+    if "file" not in request.files:
+        return jsonify({"error": "No file part"}), 400
+    file = request.files["file"]
+    if file.filename == "":
+        return jsonify({"error": "No selected file"}), 400
+    # Get the mode type from form data
+    mode_type = request.form.get("type", "music")  # Default to music mode
+    if file:
+        try:
+            # Determine mime type based on file extension
+            mime_type = None
+            if file.filename.lower().endswith('.mp3'):
+                mime_type = 'audio/mpeg'
+            elif file.filename.lower().endswith('.wav'):
+                mime_type = 'audio/wav'
+            elif file.filename.lower().endswith('.m4a'):
+                mime_type = 'audio/x-m4a'
+            elif file.filename.lower().endswith('.ogg'):
+                mime_type = 'audio/ogg'
+            else:
+                return jsonify({"error": "Unsupported file type"}), 400
+            # Save the file temporarily
+            temp_dir = tempfile.mkdtemp()
+            temp_path = os.path.join(temp_dir, secure_filename(file.filename))
+            file.save(temp_path)
+            # Upload file to Gemini with mime type
+            with open(temp_path, 'rb') as f:
+                uploaded_file = client.files.upload(file=f,config={'mime_type': mime_type})
+            # Clean up temporary file
+            os.remove(temp_path)
+            os.rmdir(temp_dir)
+            # Choose prompt based on mode
+            if mode_type == "speech":
+                prompt = """Extract the Gujarati speech content from the provided audio file and output it using the following HTML template. Format the content into meaningful paragraphs instead of line breaks. Ensure that each paragraph flows naturally and represents coherent thoughts or topics from the speech.
+```
+<html>
+    <head>
+        <title>Pravachan</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the audio content}
+            </div>
+            <div class="gpara">
+                <p>First paragraph of the speech content...</p>
+                <p>Second paragraph of the speech content...</p>
+                <p>Continue with more paragraphs as needed...</p>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+            else:  # Default to music mode
+                prompt = """Extract the Gujarati lyrics from the provided audio file and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+    <head>
+        <title>Bhaktisudha</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the file}
+            </div>
+            <div class="gpara">
+                Line1 <br/>
+                Line2 <br/>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+            # Generate response
+            response = ""
+            for chunk in client.models.generate_content_stream(
+                model=model_name,
+                contents=[uploaded_file, prompt],
+                config=generate_content_config,
+            ):
+                response += chunk.text
+            # Clean up the response
+            lyrics = response.replace("```html", "").replace("```", "")
+            return jsonify({"lyrics": lyrics})
+        except Exception as e:
+            return jsonify({"error": str(e)}), 500
+@app.route("/convert-youtube", methods=["POST"])
+def convert_youtube():
+    try:
+        data = request.get_json()
+        url = data.get("url")
+        mode_type = data.get("type", "music")  # Get mode type, default to music
+        if not url:
+            return jsonify({"error": "No URL provided"}), 400
+        # Choose prompt based on mode
+        if mode_type == "speech":
+            prompt_text = """Extract the Gujarati speech content from the provided video and output it using the following HTML template. Format the content into meaningful paragraphs instead of line breaks. Ensure that each paragraph flows naturally and represents coherent thoughts or topics from the speech.
+```
+<html>
+    <head>
+        <title>Pravachan</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the video content}
+            </div>
+            <div class="gpara">
+                <p>First paragraph of the speech content...</p>
+                <p>Second paragraph of the speech content...</p>
+                <p>Continue with more paragraphs as needed...</p>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+        else:  # Default to music mode
+            prompt_text = """Extract the Gujarati lyrics from the provided video and output them using the following HTML template. Ensure that each line of the lyrics is correctly inserted into the template and that any placeholders are replaced with the appropriate content from the file.
+```
+<html>
+    <head>
+        <title>Bhaktisudha</title>
+        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+        <link href="/static/simple.css" rel="stylesheet" type="text/css" />
+        <style>
+        </style>
+    </head>
+    <body>
+        <div class="main">
+            <div class="gtitlev3">
+                {Title of the file}
+            </div>
+            <div class="gpara">
+                Line1 <br/>
+                Line2 <br/>
+            </div>
+            <div class="chend">
+                *****
+            </div>
+        </div>
+    </body>
+</html>
+```"""
+        # Create content for Gemini
+        contents = [
+            types.Content(
+                role="user",
+                parts=[
+                    types.Part(
+                        file_data=types.FileData(
+                            file_uri=url,
+                            mime_type="video/*",
+                        )
+                    ),
+                    types.Part.from_text(text=prompt_text),
+                ],
+            ),
+        ]
+        # Generate response
+        response = ""
+        for chunk in client.models.generate_content_stream(
+            model=model_name,
+            contents=contents,
+            config=generate_content_config,
+        ):
+            response += chunk.text
+        # Clean up the response
+        lyrics = response.replace("```html", "").replace("```", "")
+        return jsonify({"lyrics": lyrics})
+    except Exception as e:
+        return jsonify({"error": str(e)})
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860)

static/simple.css CHANGED Viewed

@@ -1,87 +1,85 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-body {
-	font-family: 'Inter', sans-serif;
-}
-.dropzone {
-	border: 2px dashed #e5e7eb;
-	border-radius: 0.5rem;
-	transition: all 0.3s ease;
-}
-.dropzone:hover,
-.dropzone.dragover {
-	border-color: #3b82f6;
-	background-color: rgba(59, 130, 246, 0.05);
-}
-.pulse {
-	animation: pulse 2s infinite;
-}
-@keyframes pulse {
-	0% {
-		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
-	}
-	70% {
-		box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
-	}
-	100% {
-		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
-	}
-}
-.glass-morphism {
-	background: rgba(255, 255, 255, 0.7);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	border: 1px solid rgba(255, 255, 255, 0.18);
-}
-.gtitlev3 {
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
-	margin-bottom: 0.75rem;
-	border-radius: 0.375rem;
-	font-size: 1.5rem;
-	line-height: 2rem;
-	font-weight: 700;
-	text-align: center;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-	background-color: rgb(255 248 220);
-}
-.chend {
-	padding-left: 1.25rem;
-	padding-right: 1.25rem;
-	margin-top: 0.75rem;
-	border-radius: 0.375rem;
-	width: fit-content;
-	height: 1.5rem;
-	font-size: 1.875rem;
-	line-height: 2.25rem;
-	font-weight: 700;
-	text-align: center;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-	color: rgb(49 71 91);
-	background-color: rgb(255 248 220);
-}
-.gpara {
-	font-weight: 600;
-	color: rgb(49 71 91)
-		/* #31475b */
-	;
-}
-.gparabhajan3 {
-	font-weight: 600;
-	color: rgb(49 71 91)
-		/* #31475b */
-	;
 }

+body {
+	font-family: 'Inter', sans-serif;
+}
+.dropzone {
+	border: 2px dashed #e5e7eb;
+	border-radius: 0.5rem;
+	transition: all 0.3s ease;
+}
+.dropzone:hover,
+.dropzone.dragover {
+	border-color: #3b82f6;
+	background-color: rgba(59, 130, 246, 0.05);
+}
+.pulse {
+	animation: pulse 2s infinite;
+}
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+	}
+	70% {
+		box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+	}
+}
+.glass-morphism {
+	background: rgba(255, 255, 255, 0.7);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border: 1px solid rgba(255, 255, 255, 0.18);
+}
+.gtitlev3 {
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	margin-bottom: 0.75rem;
+	border-radius: 0.375rem;
+	font-size: 1.5rem;
+	line-height: 2rem;
+	font-weight: 700;
+	text-align: center;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	background-color: rgb(255 248 220);
+}
+.chend {
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
+	margin-top: 0.75rem;
+	border-radius: 0.375rem;
+	width: fit-content;
+	height: 1.5rem;
+	font-size: 1.875rem;
+	line-height: 2.25rem;
+	font-weight: 700;
+	text-align: center;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	color: rgb(49 71 91);
+	background-color: rgb(255 248 220);
+}
+.gpara {
+	font-weight: 600;
+	color: rgb(49 71 91)
+		/* #31475b */
+	;
+}
+.gparabhajan3 {
+	font-weight: 600;
+	color: rgb(49 71 91)
+		/* #31475b */
+	;
 }

templates/index copy.html ADDED Viewed

	@@ -0,0 +1,420 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Audio to Lyrics Converter</title>
+	<script src="https://cdn.tailwindcss.com"></script>
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+	<script src="https://unpkg.com/feather-icons"></script>
+	<style>
+		* {
+			font-family: 'Inter', sans-serif;
+		}
+		.dropzone {
+			border: 2px dashed #e5e7eb;
+			border-radius: 0.5rem;
+			transition: all 0.3s ease;
+		}
+		.dropzone:hover,
+		.dropzone.dragover {
+			border-color: #3b82f6;
+			background-color: rgba(59, 130, 246, 0.05);
+		}
+		.pulse {
+			animation: pulse 2s infinite;
+		}
+		@keyframes pulse {
+			0% {
+				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+			}
+			70% {
+				box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+			}
+			100% {
+				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+			}
+		}
+		.glass-morphism {
+			background: rgba(255, 255, 255, 0.7);
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+			border: 1px solid rgba(255, 255, 255, 0.18);
+		}
+		.gtitlev3 {
+			padding-top: 0.25rem;
+			padding-bottom: 0.25rem;
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			margin-bottom: 0.75rem;
+			border-radius: 0.375rem;
+			font-size: 1.5rem;
+			line-height: 2rem;
+			font-weight: 700;
+			text-align: center;
+			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 #0000000f;
+			background-color: #fff8dc;
+		}
+		.chend {
+			padding-left: 1.25rem;
+			padding-right: 1.25rem;
+			margin-top: 0.75rem;
+			border-radius: 0.375rem;
+			width: fit-content;
+			height: 1.5rem;
+			font-size: 1.875rem;
+			line-height: 2.25rem;
+			font-weight: 700;
+			text-align: center;
+			box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;
+			color: rgb(49 71 91);
+			background-color: #fff8dc;
+		}
+		.gpara {
+			font-weight: 600;
+			color: rgb(49 71 91)
+				/* #31475b */
+			;
+		}
+		.gparabhajan3 {
+			font-weight: 600;
+			color: rgb(49 71 91)
+				/* #31475b */
+			;
+		}
+	</style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
+	<div class="container mx-auto px-4 py-12 max-w-4xl md:max-w-[90%]">
+		<header class="text-center mb-12">
+			<h1 class="text-4xl font-bold text-gray-800 mb-2">
+				<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">Audio to
+					Lyrics</span>
+				Converter
+			</h1>
+			<p class="text-gray-600 max-w-xl mx-auto">Transform your audio files into beautifully formatted lyrics with
+				AI-powered transcription</p>
+		</header>
+		<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+			<div class="glass-morphism col-span-1 md:col-span-1 rounded-xl shadow-xl p-8 mb-8 h-fit">
+				<!-- Add tab buttons -->
+                <div class="flex mb-6 bg-gray-100 rounded-lg p-1">
+                    <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-white shadow-sm text-blue-600 font-medium">
+                        <i data-feather="file" class="inline mr-2"></i>File
+                    </button>
+                    <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-gray-600 font-medium">
+                        <i data-feather="youtube" class="inline mr-2"></i>YouTube
+                    </button>
+                </div>
+                <!-- File upload section -->
+                <div id="fileUploadSection">
+                    <div class="dropzone p-8 mb-6 flex flex-col items-center justify-center" id="dropzone">
+                        <i data-feather="music" class="text-blue-500 mb-4" style="width: 48px; height: 48px;"></i>
+						<label class="block text-gray-700 font-medium mb-2">Upload Audio File</label>
+						<p class="text-sm text-gray-500 mb-4">Drag & drop your file here or click to browse</p>
+						<input type="file" id="audioFile" accept="audio/*" class="hidden">
+						<button id="browseBtn"
+							class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center">
+							<i data-feather="upload-cloud" class="mr-2"></i>
+							Browse Files
+						</button>
+                    </div>
+                    <div class="mb-6">
+						<div class="bg-gray-50 rounded-lg p-4 flex items-center" id="fileInfoContainer"
+							style="display: none;">
+							<div
+								class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
+								<i data-feather="file" class="text-blue-600"></i>
+							</div>
+							<div class="flex-grow">
+								<p class="font-medium text-gray-800" id="fileName">No file selected</p>
+								<p class="text-sm text-gray-500" id="fileSize"></p>
+							</div>
+							<button id="removeFileBtn"
+								class="text-gray-400 hover:text-red-500 transition-colors duration-300">
+								<i data-feather="x-circle"></i>
+							</button>
+						</div>
+						<audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden>
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+                </div>
+                <!-- YouTube link section -->
+                <div id="youtubeLinkSection" class="hidden">
+                    <div class="mb-6">
+                        <label class="block text-gray-700 font-medium mb-2">YouTube URL</label>
+                        <input type="text" id="youtubeUrl"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            placeholder="https://www.youtube.com/watch?v=...">
+                        <p id="youtubeError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid YouTube URL</p>
+                    </div>
+                </div>
+				<button id="convertBtn"
+					class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition duration-300 flex items-center justify-center pulse"
+					disabled>
+					<i data-feather="zap" class="mr-2"></i>
+					Convert to Lyrics
+				</button>
+				<div id="loadingIndicator" class="hidden mt-6 text-center">
+					<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+					<p class="mt-2 text-blue-600 font-medium">Processing your audio file...</p>
+					<p class="text-sm text-gray-500">This might take a moment depending on file size</p>
+				</div>
+			</div>
+			<div class="glass-morphism col-span-1 md:col-span-3 rounded-xl shadow-xl p-8">
+				<div class="flex items-center justify-between mb-4">
+					<h3 class="font-bold text-gray-800 flex items-center">
+						<i data-feather="file-text" class="mr-2 text-blue-600"></i>
+						Lyrics Output
+					</h3>
+					<button id="downloadBtn"
+						class="hidden bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full transition duration-300 flex items-center text-sm">
+						<i data-feather="download-cloud" class="mr-1"></i>
+						Download
+					</button>
+				</div>
+				<iframe id="lyricsOutputIframe"
+					class="p-6 bg-white rounded-lg min-h-[300px] w-full whitespace-pre-line border border-gray-100 text-gray-700 overflow-auto max-h-[500px] md:max-h-[1000px] h-[500px] md:h-[500px]"
+					srcdoc="No lyrics available yet. Upload an audio file and click convert."
+					></iframe>
+			</div>
+		</div>
+		<footer class="mt-12 text-center text-gray-500 text-sm">
+			<p>Created by Jagrat Patel</p>
+			<p class="mt-1">© 2025 Audio to Lyrics Converter</p>
+		</footer>
+	</div>
+	<script>
+		// Initialize Feather icons
+		feather.replace();
+		const audioFile = document.getElementById('audioFile');
+		const browseBtn = document.getElementById('browseBtn');
+		const audioPlayer = document.getElementById('audioPlayer');
+		const convertBtn = document.getElementById('convertBtn');
+		const lyricsOutput = document.getElementById('lyricsOutputIframe');
+		const loadingIndicator = document.getElementById('loadingIndicator');
+		const downloadBtn = document.getElementById('downloadBtn');
+		const dropzone = document.getElementById('dropzone');
+		const fileInfoContainer = document.getElementById('fileInfoContainer');
+		const fileName = document.getElementById('fileName');
+		const fileSize = document.getElementById('fileSize');
+		const removeFileBtn = document.getElementById('removeFileBtn');
+		// Handle browse button click
+		browseBtn.addEventListener('click', () => {
+			audioFile.click();
+		});
+		// Format file size
+		function formatFileSize(bytes) {
+			if (bytes === 0) return '0 Bytes';
+			const k = 1024;
+			const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+			return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+		}
+		// Display file info
+		function displayFileInfo(file) {
+			fileName.textContent = file.name;
+			fileSize.textContent = formatFileSize(file.size);
+			fileInfoContainer.style.display = 'flex';
+			// Enable convert button and show audio player
+			convertBtn.disabled = false;
+			convertBtn.classList.add('pulse');
+			const audioUrl = URL.createObjectURL(file);
+			audioPlayer.src = audioUrl;
+			audioPlayer.hidden = false;
+			// Reset output area
+			lyricsOutput.srcdoc = "No lyrics available yet. Upload an audio file and click convert.";
+			downloadBtn.classList.add('hidden');
+		}
+		// Handle file selection
+		audioFile.addEventListener('change', (e) => {
+			const file = e.target.files[0];
+			if (file) {
+				displayFileInfo(file);
+			}
+		});
+		// Handle remove file button
+		removeFileBtn.addEventListener('click', () => {
+			audioFile.value = '';
+			fileInfoContainer.style.display = 'none';
+			audioPlayer.hidden = true;
+			audioPlayer.src = '';
+			convertBtn.disabled = true;
+			convertBtn.classList.remove('pulse');
+			lyricsOutput.srcdoc = "No lyrics available yet. Upload an audio file and click convert.";
+			downloadBtn.classList.add('hidden');
+		});
+		// Handle drag and drop
+		['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+			dropzone.addEventListener(eventName, (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}, false);
+		});
+		['dragenter', 'dragover'].forEach(eventName => {
+			dropzone.addEventListener(eventName, () => {
+				dropzone.classList.add('dragover');
+			}, false);
+		});
+		['dragleave', 'drop'].forEach(eventName => {
+			dropzone.addEventListener(eventName, () => {
+				dropzone.classList.remove('dragover');
+			}, false);
+		});
+		dropzone.addEventListener('drop', (e) => {
+			const file = e.dataTransfer.files[0];
+			if (file && file.type.startsWith('audio/')) {
+				audioFile.files = e.dataTransfer.files;
+				displayFileInfo(file);
+			}
+		}, false);
+		// Handle convert button click
+		convertBtn.addEventListener('click', async () => {
+			const isYoutubeMode = !youtubeLinkSection.classList.contains('hidden');
+			if (isYoutubeMode) {
+				const youtubeLink = youtubeUrl.value;
+				if (!isValidYouTubeUrl(youtubeLink)) {
+					alert('Please enter a valid YouTube URL');
+					return;
+				}
+			} else {
+				const file = audioFile.files[0];
+				if (!file) {
+					alert('Please select an audio file first');
+					return;
+				}
+			}
+			// Show loading indicator
+			loadingIndicator.classList.remove('hidden');
+			convertBtn.disabled = true;
+			convertBtn.classList.remove('pulse');
+			try {
+				let response;
+				if (isYoutubeMode) {
+					response = await fetch('/convert-youtube', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: JSON.stringify({ url: youtubeUrl.value })
+					});
+				} else {
+					const formData = new FormData();
+					formData.append('file', audioFile.files[0]);
+					response = await fetch('/convert', {
+						method: 'POST',
+						body: formData
+					});
+				}
+				const result = await response.json();
+				if (response.ok) {
+					lyricsOutput.srcdoc = result.lyrics;
+					downloadBtn.classList.remove('hidden');
+				} else {
+					lyricsOutput.srcdoc = `Error: ${result.error}`;
+				}
+			} catch (error) {
+				lyricsOutput.srcdoc = `Error: ${error.message}`;
+			} finally {
+				loadingIndicator.classList.add('hidden');
+				convertBtn.disabled = false;
+			}
+		});
+		// Handle download button click
+		downloadBtn.addEventListener('click', () => {
+			const lyrics = lyricsOutput.srcdoc;
+			const blob = new Blob([lyrics], { type: 'text/html' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = 'lyrics.html';
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
+		});
+		// Add new JavaScript for YouTube functionality
+		const fileTabBtn = document.getElementById('fileTabBtn');
+		const youtubeTabBtn = document.getElementById('youtubeTabBtn');
+		const fileUploadSection = document.getElementById('fileUploadSection');
+		const youtubeLinkSection = document.getElementById('youtubeLinkSection');
+		const youtubeUrl = document.getElementById('youtubeUrl');
+		const youtubeError = document.getElementById('youtubeError');
+		fileTabBtn.addEventListener('click', () => {
+			fileTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
+			youtubeTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
+			fileUploadSection.classList.remove('hidden');
+			youtubeLinkSection.classList.add('hidden');
+			convertBtn.disabled = !audioFile.files.length;
+		});
+		youtubeTabBtn.addEventListener('click', () => {
+			youtubeTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
+			fileTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
+			youtubeLinkSection.classList.remove('hidden');
+			fileUploadSection.classList.add('hidden');
+			convertBtn.disabled = !isValidYouTubeUrl(youtubeUrl.value);
+		});
+		function isValidYouTubeUrl(url) {
+			const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+			return youtubeRegex.test(url);
+		}
+		youtubeUrl.addEventListener('input', () => {
+			const isValid = isValidYouTubeUrl(youtubeUrl.value);
+			youtubeError.classList.toggle('hidden', isValid);
+			convertBtn.disabled = !isValid;
+			if (isValid) convertBtn.classList.add('pulse');
+			else convertBtn.classList.remove('pulse');
+		});
+	</script>
+</body>
+</html>

templates/index.html CHANGED Viewed

@@ -1,420 +1,488 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Audio to Lyrics Converter</title>
-	<script src="https://cdn.tailwindcss.com"></script>
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-	<script src="https://unpkg.com/feather-icons"></script>
-	<style>
-		* {
-			font-family: 'Inter', sans-serif;
-		}
-		.dropzone {
-			border: 2px dashed #e5e7eb;
-			border-radius: 0.5rem;
-			transition: all 0.3s ease;
-		}
-		.dropzone:hover,
-		.dropzone.dragover {
-			border-color: #3b82f6;
-			background-color: rgba(59, 130, 246, 0.05);
-		}
-		.pulse {
-			animation: pulse 2s infinite;
-		}
-		@keyframes pulse {
-			0% {
-				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
-			}
-			70% {
-				box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
-			}
-			100% {
-				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
-			}
-		}
-		.glass-morphism {
-			background: rgba(255, 255, 255, 0.7);
-			backdrop-filter: blur(10px);
-			-webkit-backdrop-filter: blur(10px);
-			border: 1px solid rgba(255, 255, 255, 0.18);
-		}
-		.gtitlev3 {
-			padding-top: 0.25rem;
-			padding-bottom: 0.25rem;
-			padding-left: 0.5rem;
-			padding-right: 0.5rem;
-			margin-bottom: 0.75rem;
-			border-radius: 0.375rem;
-			font-size: 1.5rem;
-			line-height: 2rem;
-			font-weight: 700;
-			text-align: center;
-			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 #0000000f;
-			background-color: #fff8dc;
-		}
-		.chend {
-			padding-left: 1.25rem;
-			padding-right: 1.25rem;
-			margin-top: 0.75rem;
-			border-radius: 0.375rem;
-			width: fit-content;
-			height: 1.5rem;
-			font-size: 1.875rem;
-			line-height: 2.25rem;
-			font-weight: 700;
-			text-align: center;
-			box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;
-			color: rgb(49 71 91);
-			background-color: #fff8dc;
-		}
-		.gpara {
-			font-weight: 600;
-			color: rgb(49 71 91)
-				/* #31475b */
-			;
-		}
-		.gparabhajan3 {
-			font-weight: 600;
-			color: rgb(49 71 91)
-				/* #31475b */
-			;
-		}
-	</style>
-</head>
-<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
-	<div class="container mx-auto px-4 py-12 max-w-4xl md:max-w-[90%]">
-		<header class="text-center mb-12">
-			<h1 class="text-4xl font-bold text-gray-800 mb-2">
-				<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">Audio to
-					Lyrics</span>
-				Converter
-			</h1>
-			<p class="text-gray-600 max-w-xl mx-auto">Transform your audio files into beautifully formatted lyrics with
-				AI-powered transcription</p>
-		</header>
-		<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-			<div class="glass-morphism col-span-1 md:col-span-1 rounded-xl shadow-xl p-8 mb-8 h-fit">
-				<!-- Add tab buttons -->
-                <div class="flex mb-6 bg-gray-100 rounded-lg p-1">
-                    <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-white shadow-sm text-blue-600 font-medium">
-                        <i data-feather="file" class="inline mr-2"></i>File
-                    </button>
-                    <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-gray-600 font-medium">
-                        <i data-feather="youtube" class="inline mr-2"></i>YouTube
-                    </button>
-                </div>
-                <!-- File upload section -->
-                <div id="fileUploadSection">
-                    <div class="dropzone p-8 mb-6 flex flex-col items-center justify-center" id="dropzone">
-                        <i data-feather="music" class="text-blue-500 mb-4" style="width: 48px; height: 48px;"></i>
-						<label class="block text-gray-700 font-medium mb-2">Upload Audio File</label>
-						<p class="text-sm text-gray-500 mb-4">Drag & drop your file here or click to browse</p>
-						<input type="file" id="audioFile" accept="audio/*" class="hidden">
-						<button id="browseBtn"
-							class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center">
-							<i data-feather="upload-cloud" class="mr-2"></i>
-							Browse Files
-						</button>
-                    </div>
-                    <div class="mb-6">
-						<div class="bg-gray-50 rounded-lg p-4 flex items-center" id="fileInfoContainer"
-							style="display: none;">
-							<div
-								class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
-								<i data-feather="file" class="text-blue-600"></i>
-							</div>
-							<div class="flex-grow">
-								<p class="font-medium text-gray-800" id="fileName">No file selected</p>
-								<p class="text-sm text-gray-500" id="fileSize"></p>
-							</div>
-							<button id="removeFileBtn"
-								class="text-gray-400 hover:text-red-500 transition-colors duration-300">
-								<i data-feather="x-circle"></i>
-							</button>
-						</div>
-						<audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden>
-							Your browser does not support the audio element.
-						</audio>
-					</div>
-                </div>
-                <!-- YouTube link section -->
-                <div id="youtubeLinkSection" class="hidden">
-                    <div class="mb-6">
-                        <label class="block text-gray-700 font-medium mb-2">YouTube URL</label>
-                        <input type="text" id="youtubeUrl"
-                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                            placeholder="https://www.youtube.com/watch?v=...">
-                        <p id="youtubeError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid YouTube URL</p>
-                    </div>
-                </div>
-				<button id="convertBtn"
-					class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition duration-300 flex items-center justify-center pulse"
-					disabled>
-					<i data-feather="zap" class="mr-2"></i>
-					Convert to Lyrics
-				</button>
-				<div id="loadingIndicator" class="hidden mt-6 text-center">
-					<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-					<p class="mt-2 text-blue-600 font-medium">Processing your audio file...</p>
-					<p class="text-sm text-gray-500">This might take a moment depending on file size</p>
-				</div>
-			</div>
-			<div class="glass-morphism col-span-1 md:col-span-3 rounded-xl shadow-xl p-8">
-				<div class="flex items-center justify-between mb-4">
-					<h3 class="font-bold text-gray-800 flex items-center">
-						<i data-feather="file-text" class="mr-2 text-blue-600"></i>
-						Lyrics Output
-					</h3>
-					<button id="downloadBtn"
-						class="hidden bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full transition duration-300 flex items-center text-sm">
-						<i data-feather="download-cloud" class="mr-1"></i>
-						Download
-					</button>
-				</div>
-				<iframe id="lyricsOutputIframe"
-					class="p-6 bg-white rounded-lg min-h-[300px] w-full whitespace-pre-line border border-gray-100 text-gray-700 overflow-auto max-h-[500px] md:max-h-[1000px] h-[500px] md:h-[500px]"
-					srcdoc="No lyrics available yet. Upload an audio file and click convert."
-					></iframe>
-			</div>
-		</div>
-		<footer class="mt-12 text-center text-gray-500 text-sm">
-			<p>Powered by AI transcription technology</p>
-			<p class="mt-1">© 2025 Audio to Lyrics Converter</p>
-		</footer>
-	</div>
-	<script>
-		// Initialize Feather icons
-		feather.replace();
-		const audioFile = document.getElementById('audioFile');
-		const browseBtn = document.getElementById('browseBtn');
-		const audioPlayer = document.getElementById('audioPlayer');
-		const convertBtn = document.getElementById('convertBtn');
-		const lyricsOutput = document.getElementById('lyricsOutputIframe');
-		const loadingIndicator = document.getElementById('loadingIndicator');
-		const downloadBtn = document.getElementById('downloadBtn');
-		const dropzone = document.getElementById('dropzone');
-		const fileInfoContainer = document.getElementById('fileInfoContainer');
-		const fileName = document.getElementById('fileName');
-		const fileSize = document.getElementById('fileSize');
-		const removeFileBtn = document.getElementById('removeFileBtn');
-		// Handle browse button click
-		browseBtn.addEventListener('click', () => {
-			audioFile.click();
-		});
-		// Format file size
-		function formatFileSize(bytes) {
-			if (bytes === 0) return '0 Bytes';
-			const k = 1024;
-			const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-			const i = Math.floor(Math.log(bytes) / Math.log(k));
-			return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-		}
-		// Display file info
-		function displayFileInfo(file) {
-			fileName.textContent = file.name;
-			fileSize.textContent = formatFileSize(file.size);
-			fileInfoContainer.style.display = 'flex';
-			// Enable convert button and show audio player
-			convertBtn.disabled = false;
-			convertBtn.classList.add('pulse');
-			const audioUrl = URL.createObjectURL(file);
-			audioPlayer.src = audioUrl;
-			audioPlayer.hidden = false;
-			// Reset output area
-			lyricsOutput.srcdoc = "No lyrics available yet. Upload an audio file and click convert.";
-			downloadBtn.classList.add('hidden');
-		}
-		// Handle file selection
-		audioFile.addEventListener('change', (e) => {
-			const file = e.target.files[0];
-			if (file) {
-				displayFileInfo(file);
-			}
-		});
-		// Handle remove file button
-		removeFileBtn.addEventListener('click', () => {
-			audioFile.value = '';
-			fileInfoContainer.style.display = 'none';
-			audioPlayer.hidden = true;
-			audioPlayer.src = '';
-			convertBtn.disabled = true;
-			convertBtn.classList.remove('pulse');
-			lyricsOutput.srcdoc = "No lyrics available yet. Upload an audio file and click convert.";
-			downloadBtn.classList.add('hidden');
-		});
-		// Handle drag and drop
-		['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-			dropzone.addEventListener(eventName, (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-			}, false);
-		});
-		['dragenter', 'dragover'].forEach(eventName => {
-			dropzone.addEventListener(eventName, () => {
-				dropzone.classList.add('dragover');
-			}, false);
-		});
-		['dragleave', 'drop'].forEach(eventName => {
-			dropzone.addEventListener(eventName, () => {
-				dropzone.classList.remove('dragover');
-			}, false);
-		});
-		dropzone.addEventListener('drop', (e) => {
-			const file = e.dataTransfer.files[0];
-			if (file && file.type.startsWith('audio/')) {
-				audioFile.files = e.dataTransfer.files;
-				displayFileInfo(file);
-			}
-		}, false);
-		// Handle convert button click
-		convertBtn.addEventListener('click', async () => {
-			const isYoutubeMode = !youtubeLinkSection.classList.contains('hidden');
-			if (isYoutubeMode) {
-				const youtubeLink = youtubeUrl.value;
-				if (!isValidYouTubeUrl(youtubeLink)) {
-					alert('Please enter a valid YouTube URL');
-					return;
-				}
-			} else {
-				const file = audioFile.files[0];
-				if (!file) {
-					alert('Please select an audio file first');
-					return;
-				}
-			}
-			// Show loading indicator
-			loadingIndicator.classList.remove('hidden');
-			convertBtn.disabled = true;
-			convertBtn.classList.remove('pulse');
-			try {
-				let response;
-				if (isYoutubeMode) {
-					response = await fetch('/convert-youtube', {
-						method: 'POST',
-						headers: {
-							'Content-Type': 'application/json',
-						},
-						body: JSON.stringify({ url: youtubeUrl.value })
-					});
-				} else {
-					const formData = new FormData();
-					formData.append('file', audioFile.files[0]);
-					response = await fetch('/convert', {
-						method: 'POST',
-						body: formData
-					});
-				}
-				const result = await response.json();
-				if (response.ok) {
-					lyricsOutput.srcdoc = result.lyrics;
-					downloadBtn.classList.remove('hidden');
-				} else {
-					lyricsOutput.srcdoc = `Error: ${result.error}`;
-				}
-			} catch (error) {
-				lyricsOutput.srcdoc = `Error: ${error.message}`;
-			} finally {
-				loadingIndicator.classList.add('hidden');
-				convertBtn.disabled = false;
-			}
-		});
-		// Handle download button click
-		downloadBtn.addEventListener('click', () => {
-			const lyrics = lyricsOutput.srcdoc;
-			const blob = new Blob([lyrics], { type: 'text/html' });
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = 'lyrics.html';
-			document.body.appendChild(a);
-			a.click();
-			document.body.removeChild(a);
-			URL.revokeObjectURL(url);
-		});
-		// Add new JavaScript for YouTube functionality
-		const fileTabBtn = document.getElementById('fileTabBtn');
-		const youtubeTabBtn = document.getElementById('youtubeTabBtn');
-		const fileUploadSection = document.getElementById('fileUploadSection');
-		const youtubeLinkSection = document.getElementById('youtubeLinkSection');
-		const youtubeUrl = document.getElementById('youtubeUrl');
-		const youtubeError = document.getElementById('youtubeError');
-		fileTabBtn.addEventListener('click', () => {
-			fileTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
-			youtubeTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
-			fileUploadSection.classList.remove('hidden');
-			youtubeLinkSection.classList.add('hidden');
-			convertBtn.disabled = !audioFile.files.length;
-		});
-		youtubeTabBtn.addEventListener('click', () => {
-			youtubeTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
-			fileTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
-			youtubeLinkSection.classList.remove('hidden');
-			fileUploadSection.classList.add('hidden');
-			convertBtn.disabled = !isValidYouTubeUrl(youtubeUrl.value);
-		});
-		function isValidYouTubeUrl(url) {
-			const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
-			return youtubeRegex.test(url);
-		}
-		youtubeUrl.addEventListener('input', () => {
-			const isValid = isValidYouTubeUrl(youtubeUrl.value);
-			youtubeError.classList.toggle('hidden', isValid);
-			convertBtn.disabled = !isValid;
-			if (isValid) convertBtn.classList.add('pulse');
-			else convertBtn.classList.remove('pulse');
-		});
-	</script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Audio to Lyrics Converter</title>
+	<script src="https://cdn.tailwindcss.com"></script>
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+	<script src="https://unpkg.com/feather-icons"></script>
+	<style>
+		* {
+			font-family: 'Inter', sans-serif;
+		}
+		.glass-morphism {
+			background: rgba(255, 255, 255, 0.7);
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+			border: 1px solid rgba(255, 255, 255, 0.18);
+		}
+		.gtitlev3 {
+			padding-top: 0.25rem;
+			padding-bottom: 0.25rem;
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			margin-bottom: 0.75rem;
+			border-radius: 0.375rem;
+			font-size: 1.5rem;
+			line-height: 2rem;
+			font-weight: 700;
+			text-align: center;
+			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 #0000000f;
+			background-color: #fff8dc;
+			color: rgb(49 71 91)
+		}
+		.chend {
+			padding-left: 1.25rem;
+			padding-right: 1.25rem;
+			margin-top: 0.75rem;
+			border-radius: 0.375rem;
+			width: fit-content;
+			height: 1.5rem;
+			font-size: 1.875rem;
+			line-height: 2.25rem;
+			font-weight: 700;
+			text-align: center;
+			box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;
+			color: rgb(49 71 91);
+			background-color: #fff8dc;
+		}
+		.gpara {
+			font-weight: 600;
+			color: rgb(49 71 91)
+				/* #31475b */
+			;
+		}
+		.gparabhajan3 {
+			font-weight: 600;
+			color: rgb(49 71 91)
+				/* #31475b */
+			;
+		}
+		.dropzone {
+			border: 2px dashed #374151;
+			border-radius: 0.5rem;
+			transition: all 0.3s ease;
+		}
+		.dropzone:hover,
+		.dropzone.dragover {
+			border-color: #f63b3b;
+			background-color: rgba(246, 59, 59, 0.1);
+		}
+		.pulse {
+			animation: pulse 2s infinite;
+		}
+		@keyframes pulse {
+			0% {
+				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+			}
+			70% {
+				box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+			}
+			100% {
+				box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+			}
+		}
+		/* Custom scrollbar */
+		::-webkit-scrollbar {
+			width: 8px;
+		}
+		::-webkit-scrollbar-track {
+			background: #1f2937;
+		}
+		::-webkit-scrollbar-thumb {
+			background: #4b5563;
+			border-radius: 4px;
+		}
+		::-webkit-scrollbar-thumb:hover {
+			background: #6b7280;
+		}
+	</style>
+</head>
+<body class="bg-stone-900 text-stone-300">
+	<div class="flex flex-col h-screen">
+		<header class="flex items-center justify-between p-4 h-16 border-b border-stone-800 flex-shrink-0">
+			<div class="flex items-center space-x-4">
+				<svg class="w-8 h-8 text-stone-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 6l12-3"></path></svg>
+				<h1 class="text-xl font-bold text-stone-100">Audio to Lyrics</h1>
+			</div>
+			<div class="text-sm text-stone-500">v1.0.0</div>
+		</header>
+		<div class="flex flex-grow overflow-hidden">
+			<!-- Left Sidebar -->
+			<div class="w-96 bg-stone-900 p-6 overflow-y-auto flex-shrink-0 border-r border-stone-800">
+				<h2 class="text-lg font-semibold text-stone-200 mb-4">Select Source</h2>
+				<!-- Mode Toggle -->
+				<div class="mb-6">
+					<div class="flex items-center justify-between mb-2">
+						<span class="text-sm font-medium text-stone-300">Mode</span>
+					</div>
+					<div class="flex bg-stone-800 rounded-lg p-1">
+						<button id="musicModeBtn" class="flex-1 py-2 px-3 rounded-md bg-stone-700 shadow-sm text-stone-100 font-medium text-sm">
+							<i data-feather="music" class="inline mr-2 w-4 h-4"></i>Music
+						</button>
+						<button id="speechModeBtn" class="flex-1 py-2 px-3 rounded-md text-stone-400 font-medium text-sm">
+							<i data-feather="mic" class="inline mr-2 w-4 h-4"></i>Speech
+						</button>
+					</div>
+				</div>
+				<!-- Tab buttons -->
+                <div class="flex mb-6 bg-stone-800 rounded-lg p-1">
+                    <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-stone-700 shadow-sm text-stone-100 font-medium">
+                        <i data-feather="file" class="inline mr-2 w-4 h-4"></i>File
+                    </button>
+                    <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-stone-400 font-medium">
+                        <i data-feather="youtube" class="inline mr-2 w-4 h-4"></i>YouTube
+                    </button>
+                </div>
+                <!-- File upload section -->
+                <div id="fileUploadSection">
+                    <div class="dropzone p-6 mb-6 flex flex-col items-center justify-center text-center" id="dropzone">
+                        <i data-feather="music" class="text-stone-500 mb-4" style="width: 40px; height: 40px;"></i>
+						<p class="text-sm text-stone-400 mb-4">Drag & drop or</p>
+						<input type="file" id="audioFile" accept="audio/*" class="hidden">
+						<button id="browseBtn"
+							class="bg-stone-600 hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center text-sm">
+							<i data-feather="folder" class="mr-2 w-4 h-4"></i>
+							Browse File
+						</button>
+                    </div>
+                    <div class="mb-6">
+						<div class="bg-stone-800 rounded-lg p-3 flex items-center" id="fileInfoContainer"
+							style="display: none;">
+							<div
+								class="w-10 h-10 bg-stone-700 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
+								<i data-feather="file" class="text-stone-400"></i>
+							</div>
+							<div class="flex-grow overflow-hidden">
+								<p class="font-medium text-stone-200 text-sm truncate" id="fileName">No file selected</p>
+								<p class="text-xs text-stone-400" id="fileSize"></p>
+							</div>
+							<button id="removeFileBtn"
+								class="text-stone-500 hover:text-red-500 transition-colors duration-300 ml-2 flex-shrink-0">
+								<i data-feather="x" class="w-5 h-5"></i>
+							</button>
+						</div>
+						<audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden>
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+                </div>
+                <!-- YouTube link section -->
+                <div id="youtubeLinkSection" class="hidden">
+                    <div class="mb-6">
+                        <label class="block text-stone-400 font-medium mb-2 text-sm">YouTube URL</label>
+                        <input type="text" id="youtubeUrl"
+                            class="w-full px-4 py-2 bg-stone-800 border border-stone-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:border-transparent"
+                            placeholder="https://www.youtube.com/watch?v=...">
+                        <p id="youtubeError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid YouTube URL</p>
+                    </div>
+                </div>
+				<button id="convertBtn"
+					class="w-full bg-gradient-to-br from-stone-500 to-zinc-600 hover:from-red-600 hover:to-red-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition duration-300 flex items-center justify-center"
+					disabled>
+					<i data-feather="zap" class="mr-2"></i>
+					Convert to Lyrics
+				</button>
+				<div id="loadingIndicator" class="hidden mt-6 text-center">
+					<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
+					<p class="mt-2 text-stone-400 font-medium">Processing...</p>
+					<p class="text-sm text-stone-500">This might take a moment.</p>
+				</div>
+			</div>
+			<!-- Main Content -->
+			<div class="flex-grow h-[calc(100vh-4rem)] bg-stone-800/50 p-6 md:p-8 overflow-y-auto">
+				<div class="flex items-center justify-between mb-4">
+					<h3 class="text-lg font-semibold text-stone-200 flex items-center">
+						<i data-feather="file-text" class="mr-2 text-stone-400"></i>
+						Lyrics Output
+					</h3>
+					<button id="downloadBtn"
+						class="hidden bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center text-sm">
+						<i data-feather="download" class="mr-1 w-4 h-4"></i>
+						Download
+					</button>
+				</div>
+				<iframe id="lyricsOutputIframe"
+					class="bg-stone-900 rounded-lg min-h-[300px] max-h-[calc(100vh-14rem)] h-full w-full whitespace-pre-line border border-stone-700 text-stone-300 overflow-auto"
+					srcdoc="<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>No lyrics available yet.</body>"
+					></iframe>
+			</div>
+		</div>
+	</div>
+	<script>
+		// Initialize Feather icons
+		feather.replace();
+		const audioFile = document.getElementById('audioFile');
+		const browseBtn = document.getElementById('browseBtn');
+		const audioPlayer = document.getElementById('audioPlayer');
+		const convertBtn = document.getElementById('convertBtn');
+		const lyricsOutput = document.getElementById('lyricsOutputIframe');
+		const loadingIndicator = document.getElementById('loadingIndicator');
+		const downloadBtn = document.getElementById('downloadBtn');
+		const dropzone = document.getElementById('dropzone');
+		const fileInfoContainer = document.getElementById('fileInfoContainer');
+		const fileName = document.getElementById('fileName');
+		const fileSize = document.getElementById('fileSize');
+		const removeFileBtn = document.getElementById('removeFileBtn');
+		// Handle browse button click
+		browseBtn.addEventListener('click', () => {
+			audioFile.click();
+		});
+		// Format file size
+		function formatFileSize(bytes) {
+			if (bytes === 0) return '0 Bytes';
+			const k = 1024;
+			const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+			return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+		}
+		// Display file info
+		function displayFileInfo(file) {
+			fileName.textContent = file.name;
+			fileSize.textContent = formatFileSize(file.size);
+			fileInfoContainer.style.display = 'flex';
+			// Enable convert button and show audio player
+			convertBtn.disabled = false;
+			convertBtn.classList.add('pulse');
+			const audioUrl = URL.createObjectURL(file);
+			audioPlayer.src = audioUrl;
+			audioPlayer.hidden = false;
+			// Reset output area
+			lyricsOutput.srcdoc = "<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>Ready to convert.</body>";
+			downloadBtn.classList.add('hidden');
+		}
+		// Handle file selection
+		audioFile.addEventListener('change', (e) => {
+			const file = e.target.files[0];
+			if (file) {
+				displayFileInfo(file);
+			}
+		});
+		// Handle remove file button
+		removeFileBtn.addEventListener('click', () => {
+			audioFile.value = '';
+			fileInfoContainer.style.display = 'none';
+			audioPlayer.hidden = true;
+			audioPlayer.src = '';
+			convertBtn.disabled = true;
+			convertBtn.classList.remove('pulse');
+			lyricsOutput.srcdoc = "<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>No lyrics available yet.</body>";
+			downloadBtn.classList.add('hidden');
+		});
+		// Handle drag and drop
+		['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+			dropzone.addEventListener(eventName, (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}, false);
+		});
+		['dragenter', 'dragover'].forEach(eventName => {
+			dropzone.addEventListener(eventName, () => {
+				dropzone.classList.add('dragover');
+			}, false);
+		});
+		['dragleave', 'drop'].forEach(eventName => {
+			dropzone.addEventListener(eventName, () => {
+				dropzone.classList.remove('dragover');
+			}, false);
+		});
+		dropzone.addEventListener('drop', (e) => {
+			const file = e.dataTransfer.files[0];
+			if (file && file.type.startsWith('audio/')) {
+				audioFile.files = e.dataTransfer.files;
+				displayFileInfo(file);
+			}
+		}, false);
+		// Handle convert button click
+		convertBtn.addEventListener('click', async () => {
+			const isYoutubeMode = !youtubeLinkSection.classList.contains('hidden');
+			if (isYoutubeMode) {
+				const youtubeLink = youtubeUrl.value;
+				if (!isValidYouTubeUrl(youtubeLink)) {
+					alert('Please enter a valid YouTube URL');
+					return;
+				}
+			} else {
+				const file = audioFile.files[0];
+				if (!file) {
+					alert('Please select an audio file first');
+					return;
+				}
+			}
+			// Show loading indicator
+			loadingIndicator.classList.remove('hidden');
+			convertBtn.disabled = true;
+			convertBtn.classList.remove('pulse');
+			try {
+				let response;
+				if (isYoutubeMode) {
+					response = await fetch('/convert-youtube', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: JSON.stringify({
+							url: youtubeUrl.value,
+							type: currentMode
+						})
+					});
+				} else {
+					const formData = new FormData();
+					formData.append('file', audioFile.files[0]);
+					formData.append('type', currentMode);
+					response = await fetch('/convert', {
+						method: 'POST',
+						body: formData
+					});
+				}
+				const result = await response.json();
+				if (response.ok) {
+					lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #1e293b; font-family: Inter, sans-serif; padding: 1rem;'>${result.lyrics}</body>`;
+					downloadBtn.classList.remove('hidden');
+				} else {
+					lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #f87171; font-family: Inter, sans-serif; padding: 1rem;'>Error: ${result.error}</body>`;
+				}
+			} catch (error) {
+				lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #f87171; font-family: Inter, sans-serif; padding: 1rem;'>Error: ${error.message}</body>`;
+			} finally {
+				loadingIndicator.classList.add('hidden');
+				convertBtn.disabled = false;
+			}
+		});
+		// Handle download button click
+		downloadBtn.addEventListener('click', () => {
+			const lyrics = lyricsOutput.srcdoc;
+			const blob = new Blob([lyrics], { type: 'text/html' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = 'lyrics.html';
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
+		});
+		// Add new JavaScript for YouTube functionality
+		const fileTabBtn = document.getElementById('fileTabBtn');
+		const youtubeTabBtn = document.getElementById('youtubeTabBtn');
+		const fileUploadSection = document.getElementById('fileUploadSection');
+		const youtubeLinkSection = document.getElementById('youtubeLinkSection');
+		const youtubeUrl = document.getElementById('youtubeUrl');
+		const youtubeError = document.getElementById('youtubeError');
+		// Mode toggle elements
+		const musicModeBtn = document.getElementById('musicModeBtn');
+		const speechModeBtn = document.getElementById('speechModeBtn');
+		let currentMode = 'music'; // Default mode
+		// Mode toggle handlers
+		musicModeBtn.addEventListener('click', () => {
+			currentMode = 'music';
+			musicModeBtn.classList.add('bg-stone-700', 'text-stone-100');
+			musicModeBtn.classList.remove('text-stone-400');
+			speechModeBtn.classList.remove('bg-stone-700', 'text-stone-100');
+			speechModeBtn.classList.add('text-stone-400');
+		});
+		speechModeBtn.addEventListener('click', () => {
+			currentMode = 'speech';
+			speechModeBtn.classList.add('bg-stone-700', 'text-stone-100');
+			speechModeBtn.classList.remove('text-stone-400');
+			musicModeBtn.classList.remove('bg-stone-700', 'text-stone-100');
+			musicModeBtn.classList.add('text-stone-400');
+		});
+		fileTabBtn.addEventListener('click', () => {
+			fileTabBtn.classList.add('bg-stone-700', 'text-stone-100');
+			fileTabBtn.classList.remove('text-stone-400');
+			youtubeTabBtn.classList.remove('bg-stone-700', 'text-stone-100');
+			youtubeTabBtn.classList.add('text-stone-400');
+			fileUploadSection.classList.remove('hidden');
+			youtubeLinkSection.classList.add('hidden');
+			const hasFile = audioFile.files.length > 0;
+			convertBtn.disabled = !hasFile;
+			if (hasFile) convertBtn.classList.add('pulse');
+			else convertBtn.classList.remove('pulse');
+		});
+		youtubeTabBtn.addEventListener('click', () => {
+			youtubeTabBtn.classList.add('bg-stone-700', 'text-stone-100');
+			youtubeTabBtn.classList.remove('text-stone-400');
+			fileTabBtn.classList.remove('bg-stone-700', 'text-stone-100');
+			fileTabBtn.classList.add('text-stone-400');
+			youtubeLinkSection.classList.remove('hidden');
+			fileUploadSection.classList.add('hidden');
+			const isValid = isValidYouTubeUrl(youtubeUrl.value);
+			convertBtn.disabled = !isValid;
+			if (isValid) convertBtn.classList.add('pulse');
+			else convertBtn.classList.remove('pulse');
+		});
+		function isValidYouTubeUrl(url) {
+			const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+			return youtubeRegex.test(url);
+		}
+		youtubeUrl.addEventListener('input', () => {
+			const isValid = isValidYouTubeUrl(youtubeUrl.value);
+			youtubeError.classList.toggle('hidden', isValid);
+			convertBtn.disabled = !isValid;
+			if (isValid) convertBtn.classList.add('pulse');
+			else convertBtn.classList.remove('pulse');
+		});
+	</script>
+</body>
 </html>