---
import Layout from "../../layouts/Layout.astro";
import AudioToText from "../../components/Tools/AudioToText"
---

<Layout title="Whisper CPP Light">
    <AudioToText client:load />
</Layout> 
<!-- <div class="container mx-auto px-4" id="stt-container">
    <h1 class="text-2xl font-bold mb-4">Audio File to STT</h1>
    
    <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2" for="audioFile">
            Upload Audio File (WAV format recommended)
        </label>
        <input 
            type="file" 
            id="audioFile" 
            accept="audio/*,.wav"
            class="block w-full text-sm text-gray-500
                file:mr-4 file:py-2 file:px-4
                file:rounded-md file:border-0
                file:text-sm file:font-semibold
                file:bg-blue-50 file:text-blue-700
                hover:file:bg-blue-100"
        >
        <p class="mt-1 text-sm text-gray-500">Supported formats: WAV, MP3, OGG, etc.</p>
    </div>

    <button 
        id="sendBtn" 
        disabled
        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
    >
        Send to STT API
    </button>

    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">API Response</h2>
        <div id="responseContainer" class="p-4 bg-gray-100 rounded-md min-h-20">
            <p id="statusMessage" class="text-gray-600">No file uploaded yet</p>
            <pre id="apiResponse" class="hidden mt-2 p-2 bg-white rounded overflow-auto"></pre>
        </div>
    </div>
</div> -->
<!-- <script is:inline>
    document.addEventListener('DOMContentLoaded', () => {
        const audioFileInput = document.getElementById('audioFile');
        const sendBtn = document.getElementById('sendBtn');
        const statusMessage = document.getElementById('statusMessage');
        const apiResponse = document.getElementById('apiResponse');
        const responseContainer = document.getElementById('responseContainer');

        // Enable send button when a file is selected
        audioFileInput.addEventListener('change', () => {
            if (audioFileInput.files.length > 0) {
                sendBtn.disabled = false;
                statusMessage.textContent = `File selected: ${audioFileInput.files[0].name}`;
            } else {
                sendBtn.disabled = true;
                statusMessage.textContent = 'No file selected';
            }
            apiResponse.classList.add('hidden');
        });

        // Handle sending to STT API
        sendBtn.addEventListener('click', async () => {
            if (audioFileInput.files.length === 0) return;

            const file = audioFileInput.files[0];
            
            try {
                // Show loading state
                sendBtn.disabled = true;
                sendBtn.textContent = 'Processing...';
                statusMessage.textContent = `Sending ${file.name} to STT API...`;
                apiResponse.classList.add('hidden');
                responseContainer.classList.remove('bg-red-50', 'bg-green-50');
                responseContainer.classList.add('bg-blue-50');

                // Create FormData and append the file
                const formData = new FormData();
                formData.append('audio', file);

                // Send to STT API
                const response = await fetch('https://stt-41.siliconpin.com/stt', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();

                // Display results
                apiResponse.textContent = JSON.stringify(result, null, 2);
                apiResponse.classList.remove('hidden');
                statusMessage.textContent = 'STT API Response:';
                responseContainer.classList.remove('bg-blue-50');
                responseContainer.classList.add('bg-green-50');

            } catch (error) {
                console.error('Error:', error);
                statusMessage.textContent = `Error: ${error.message}`;
                responseContainer.classList.remove('bg-blue-50');
                responseContainer.classList.add('bg-red-50');
            } finally {
                sendBtn.disabled = false;
                sendBtn.textContent = 'Send to STT API';
            }
        });
    });
</script>

<style>
    /* Additional styling if needed */
    #stt-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    #apiResponse {
        max-height: 300px;
    }
</style> -->