<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Black Tune AI</title>

    <style>
        /* Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
            text-align: center;
        }


        /* Body Styling */
        body {
            background: #000000;
            margin: 0;  /* Remove default margin */
            color: #ffffff;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
            overflow: hidden;
            padding: 0 15px;
            position: relative;  /* This is important to position the video behind */
            overflow-y: auto;
        }

        #video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
         }


        /* Video Styling */
        #background-video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Centers the video */
            width: 100%;
            height: 100%;
            object-fit: cover;  /* Ensures the video covers the entire screen */
            z-index: -1;  /* Makes sure the video stays in the background */
            display: none; 
        }

        /* Content Styling */
        .content {
            position: relative;
            z-index: 1;  /* Content will appear above the video */
            /* Other content styles here */
            text-align: center;
            overflow-y: auto; 
        }
    

    
        /* App Title */
        h1 {
            font-size: 30px;
            text-align: center;
            padding-top: 8px;
            width: 100%;
            height: 50px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #d30000;
            box-shadow: 0px 0px 30px rgb(255, 27, 27);
            margin-bottom: 20px;
            }
    
        /* Subtitle Styling */
        h2 {
            font-size: 15px;
            color: #ffffff;
            margin-bottom: 5px;
            margin-top: 10px;
            text-align: center;
        }
    
        p {
            text-align: center;
            
        }
    
        #fileInput {
            display: none;
        
        }
    
        .custom-file-input {
            position: relative;
            display: inline-block;
            padding: 15px 30px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.2em;
            transition: all 0.3s;
            background: #0094dd;
            color: #ffffff;
            box-shadow: 0px 0px 20px rgb(42, 160, 207);
        }
    
        .custom-file-input:hover {
            background-color: #9b0029;
        }
    
        .custom-file-input:active {
            background-color: #00ae4e;
        }
    
        .button {
            background-color: rgb(0, 163, 79);
            border: none;
            color: white;
            padding: 15px 30px;
            font-size: 1.2em;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s;
            margin-top: 20px;
            box-shadow: 0px 0px 20px rgb(62, 255, 113);
        }
    
        .copybutton {
            background-color: rgb(0, 187, 106);
            color: white;
            padding: 15px 30px;
            font-size: 15px;
            border-radius: 5px;
            transition: all 0.3s;
            margin-top: 20px;
            margin-bottom: 5px;
            box-shadow: 0px 0px 20px rgb(62, 255, 113);
        }
    
        .transcribemorebutton {
            background-color: rgb(200, 0, 93);
            color: white;
            padding: 15px 30px;
            font-size: 15px;
            border-radius: 5px;
            transition: all 0.3s;
            margin-bottom: 50px;
            box-shadow: 0px 0px 20px rgb(255, 46, 130);
        }

        .uploadwarning {
            background-color: rgb(161, 0, 40);
            color: white;
            padding: 15px 30px;
            font-size: 15px;
            text-align: center;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 5px;
            transition: all 0.3s;
            box-shadow: 0px 0px 20px rgb(202, 0, 74);
        }
    
        .button:hover {
            background-color: #f5a623;
            color: black;
        }
    
        .button:active {
            background-color: #f523a1;
            color: black;
            transform: scale(0.98);
        }
    
        #audioPreview {
            margin-top: 20px;
            font-size: 1em;
            color: #ccc;
        }

        #progressContainer {
            width: 100%;
            background-color: #444;
            border-radius: 5px;
            height: 20px;
            margin-top: 20px;
            display: none;
        }

        #progressBar {
            width: 0%;
            height: 100%;
            background-color: #f5a623;
            border-radius: 5px;
        }
    
        #resultText {
            margin-top: 30px;
            padding: 20px;
            background-color: #000000;
            border-radius: 10px;
            min-height: 100px;
            width: 100%;
            max-width: 600px;
            display: none;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 1.1em;
            color: #ccc;
            overflow-y: auto; /* Enables scrolling when content overflows */
            max-height: 300px; /* Limits the height to ensure a scrollbar appears if needed */
            box-shadow: 0px 0px 20px rgb(255, 46, 130);
        }
    
        .error {
            color: red;
        }
    
        .success {
            color: green;
        }
    
        .wave-animation {
            display: none;
            margin: 20px 0;
            margin-bottom: 10px;
        }
    
        .wave-animation span {
            display: inline-block;
            width: 10px;
            height: 20px;
            background-color: #ffffff;
            margin: 0 2px;
            animation: wave 1.2s infinite ease-in-out;
        }
    
        .wave-animation span:nth-child(2) {
            animation-delay: -1.1s;
        }
    
        .wave-animation span:nth-child(3) {
            animation-delay: -1.0s;
        }
    
        .wave-animation span:nth-child(4) {
            animation-delay: -0.9s;
        }
    
        .wave-animation span:nth-child(5) {
            animation-delay: -0.8s;
        }
    
        @keyframes wave {
            0%, 100% {
                transform: scaleY(0.4);
            }
            50% {
                transform: scaleY(1.0);
            }
        }
    
        .errormessage {
            font-size: 15px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    
        .paragraphs {
            font-size: 18px;
            margin-top: 40px;
            margin-bottom: 40px;
        }
    
        /* For screens smaller than 768px (tablets and phones) */
        @media (max-width: 768px) {
    
            h1 {
                font-size: 30px;
                padding-top: 8px;
                width: 100%;
                text-align: center;
                color: #ffffff;
              
            }
    
            .button, .custom-file-input {
                font-size: 1em;
                padding: 12px 24px;
            }
    
            #resultText {
                font-size: 1em;
                padding: 15px;
                align-items: center;
            }
    
            .container {
                padding: 10px;
            }

      
        }
    
        /* For screens smaller than 480px (phones) */
        @media (max-width: 480px) {
   
    
            h1 {
                font-size: 30px;
                padding-top: 8px;
                width: 100%;
                text-align: center;
                color: #ffffff;

            }
    
            .button, .custom-file-input {
                font-size: 0.9em;
                padding: 10px 20px;
            }
    
            #resultText {
                font-size: 0.95em;
                padding: 10px;
            }
    
            .wave-animation span {
                width: 8px;
                height: 15px;
            }

        }
    </style>
    
    
</head>
<body>

    <video autoplay muted loop id="background-video" preload="auto">
        <source src="https://od.lk/s/NzdfNTkxMzE1MjZf/Red%20Smoke.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <div class="container">

        <h1>Blacktune AI</h1>
        <h2>Unlimited Audio Transcribe</h2>
        <h2>Unlimited AI Speech-To-Text</h2>

        <div class="paragraphs">
            <p> Usage : Free Unlimited </p>
            <p> Speed : Lightning fast</p>
            <p> Accuracy : 99% + </p>
            <p> Audio File : Mp3 </p>
            <p> Audio Length : upto 5 minutes </p>
            <p> Languages : 50 + </p>
            <p> -----------------------------------</p>
            <p> Please upload Clear Audio only</p>
   
        </div>
        

        <!-- Custom File Input -->
        <label class="custom-file-input" for="fileInput" id = "custom-file-input">
            Upload Audio File
        </label>

 

        <input type="file" id="fileInput" accept="audio/*">

        <!-- Progress Bar -->
        <div id="progressContainer">
            <div id="progressBar"></div>
        </div>

        <!-- Audio Preview -->
        <div id="audioPreview"></div>

        <!-- Upload Warning -->
        <p class="uploadwarning" id = "uploadwarning">
        Please Wait 10-20 seconds to let audio file upload succesfully .
        Play your uploaded Audio to Verify it before clicking Transcribe button
        </p>

        <div class="wave-animation" id="waveAnimation">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span>
            <p> Transcribing Your Audio file ...</p>
        </div>

        
        <div id="errormessage"  style="display: none;">
            <span>Please Upload Audio file first ...</span> 
        </div>

        <button class="button" id="analyzeButton">Transcribe Audio</button>


        <!-- Result Area -->
        <div id="resultText"></div>

        <!-- Copy and Transcribe More Buttons -->
        <div id="resultButtons" style="display: none;">
            <button class="copybutton" id="copyResultButton">Copy Result</button>
            <button class="transcribemorebutton" id="transcribeMoreButton">Transcribe More</button>
        </div>

      



    <script>

        // Get the video element and the video container
        const video = document.getElementById('background-video');
        const videoContainer = document.getElementById('video-container');

        // Add an event listener to handle when the video is ready to play
        video.addEventListener('canplaythrough', function() {
            // When the video is ready, hide the black background and show the video
            video.style.display = 'block'; // Show the video
        });

        // Optionally, handle the case where the video fails to load
        video.addEventListener('error', function() {
            video.style.display = 'none';
        });


        // App Sounds

        let audio;  // Declare audio globally to be accessible across multiple functions

        function buttonclick() {
        const audio = new Audio('https://od.lk/s/NzdfNTkwNDMyNDlf/Button%20Click.mp3');
        audio.play();
        }   

        function errorsound() {
        const audio = new Audio('https://od.lk/s/NzdfNTkwNDQzMDhf/Error%20Sound.mp3');
        audio.play();
        }  

        function processingvoice() {
        const audio = new Audio('https://od.lk/s/NzdfNTkxMTA3NTlf/Transcribing%20Audio.mp3');
        audio.play();
        }    


        function finish() {
        const audio = new Audio('https://od.lk/s/NzdfNTkwNDMxNDRf/finish.mp3');
        audio.play();
        } 

        function taskcompletedvoice() {
        const audio = new Audio('https://od.lk/s/NzdfNTkxMTA3NThf/Audio%20Transcribed.mp3');
        audio.play();
        }  

        function processingmusic() {
        // If the audio object is not initialized, create a new one
        if (!audio) {
            audio = new Audio('https://od.lk/s/NzdfNTkxMDk0Mzlf/Music%202.mp3');
        }

        // Play the audio if it is not playing
        if (audio.paused) {
            audio.play();
        }
        }

        // Function to stop the processing music (pause and reset)
        function stopProcessingMusic() {
        if (audio && !audio.paused) {
            audio.pause();  // Pause the music
            audio.currentTime = 0;  // Optionally reset to the start
        }
        }



        // Setup variables
        const fileInput = document.getElementById('fileInput');
        const customfileInput = document.getElementById('custom-file-input');
        const uploadwarning = document.getElementById('uploadwarning');
        const analyzeButton = document.getElementById('analyzeButton');
        const resultText = document.getElementById('resultText');

        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
    
        const audioPreview = document.getElementById('audioPreview');
        const resultButtons = document.getElementById('resultButtons');
        const copyResultButton = document.getElementById('copyResultButton');
        const transcribeMoreButton = document.getElementById('transcribeMoreButton');

        
        let selectedFile = null;

        document.getElementById('uploadwarning').style.display = 'none';
        

        // Handle file selection
        fileInput.addEventListener('change', (event) => {
            selectedFile = event.target.files[0];
            document.getElementById('uploadwarning').style.display = 'block';
            if (selectedFile) {
                // Show audio preview
                const audioUrl = URL.createObjectURL(selectedFile);
                audioPreview.innerHTML = `
                    <audio controls>
                        <source src="${audioUrl}" type="audio/mp3">
                        Your browser does not support the audio element.
                    </audio>
                `;
            }
        });

        // Handle Analyze Button click
        analyzeButton.addEventListener('click', async () => {
            if (!selectedFile) {
                resultText.textContent = 'Please upload an audio file first!';
                resultText.classList.add('error');
                document.getElementById('errormessage').style.display = 'block';
                errorsound()
                return;
            }

            resultText.textContent = '';
            resultText.classList.remove('error');
            resultText.classList.add('success');
           

            buttonclick()
            processingvoice()
            processingmusic()

            // Show Wave Animation

           
            document.getElementById('uploadwarning').style.display = 'none';
            document.getElementById('waveAnimation').style.display = 'block';
            document.getElementById('errormessage').style.display = 'none';
            document.getElementById('custom-file-input').style.display = 'block';

            try {
                const transcript = await query(selectedFile);
                if (transcript && transcript.text) {
                    // If the transcript has text, display it
                    resultText.textContent = formatJSONResponse(transcript);
                } else {
                    errorsound()
                    resultText.textContent = 'No speech and Sound detected in the audio by the AI Model . Models is too Busy ! Let the file Upload correctly and Try Again . If the issue persists try again with a diffrent Audio.';
                }

                
                resultButtons.style.display = 'block'; // Show result buttons
                resultText.style.display = 'block';
                stopProcessingMusic()
                finish()
                
                
            } catch (error) {
                errorsound()
                resultText.textContent = 'Model too Busy ! Try Again Later ';
                resultText.classList.add('error');
                
            }

    
            document.getElementById('waveAnimation').style.display = 'none';
            document.getElementById('analyzeButton').style.display = 'none';
            document.getElementById('custom-file-input').style.display = 'none';

            

           
          
        });

        // Handle the "Copy Result" Button click
        document.getElementById('copyResultButton').addEventListener('click', () => {
            const text = document.getElementById('resultText').textContent;
            if (text) {
                // Call the Android method to copy text to clipboard
                Android.copyToClipboard(text);  // This calls the JavaScript interface method
            } else {
                console.error('No text to copy');
            }
        });

    
        // Handle the "Transcribe More" Button click (reload page)
        transcribeMoreButton.addEventListener('click', () => {
            window.location.reload();
        });

        // The function to query the API
        async function query(file) {
            const data = await readFile(file);
            const response = await fetch("https://api-inference.huggingface.co/models/openai/whisper-large-v3", {
                headers: {
                    "Authorization": "Bearer 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",
                    "Content-Type": "application/json",
                },
                method: "POST",
                body: data,
            });

            const result = await response.json();
            return result;
           
        }

        // Read file as binary data
        function readFile(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onloadend = () => {
                    const buffer = reader.result;
                    resolve(buffer);
                };
                reader.onerror = reject;
                reader.readAsArrayBuffer(file);
            });
        }

        // Format the JSON response to make it more readable
        function formatJSONResponse(response) {
            // If the response has the 'text' field, return it
            if (response.text) {
                return `\n${response.text}`;
            }

            // If the response has other fields, format them into a JSON string
            return JSON.stringify(response, null, 2);
        }
    </script>

</body>
</html>
