script.js

// Google Colab မှ ရရှိလာသော share URL ကို ဒီနေရာတွင် ထည့်ပါ
const COLAB_API_URL = "https://11dd2bd29abecbf287.gradio.live"; // <--- မိမိ Link ပြောင်းထည့်ပါ

document.getElementById('audioFile').addEventListener('change', function(e) {
    const fileName = e.target.files[0] ? e.target.files[0].name : '';
    document.getElementById('fileName').innerText = fileName ? `ရွေးချယ်ထားသော ဖိုင် - ${fileName}` : '';
});

document.getElementById('convertBtn').addEventListener('click', async function() {
    const fileInput = document.getElementById('audioFile');
    const statusDiv = document.getElementById('status');
    const audioPlayer = document.getElementById('audioPlayer');

    if (!fileInput.files || fileInput.files.length === 0) {
        statusDiv.innerText = 'ကျေးဇူးပြု၍ Audio ဖိုင်တစ်ခု အရင်ရွေးပေးပါ!';
        statusDiv.style.color = '#f87171';
        return;
    }

    const file = fileInput.files[0];
    statusDiv.style.color = '#38bdf8';
    statusDiv.innerText = 'AI မော်ဒယ်သို့ ပို့ဆောင်၍ အသံပြောင်းနေပါသည်။ ခဏစောင့်ပါ...';

    try {
        // Audio ဖိုင်ကို Base64/Form Data သို့ ပြောင်းလဲခြင်း
        const reader = new FileReader();
        reader.readAsDataURL(file);
        
        reader.onload = async function () {
            const base64Audio = reader.result;

            // Gradio API ထံ သို့ Request ပို့ခြင်း
            const response = await fetch(`${COLAB_API_URL}/api/predict/`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    data: [base64Audio]
                })
            });

            const result = await response.json();

            if (result && result.data) {
                // ပြောင်းလဲပြီးသော Audio ရလဒ် ရယူခြင်း
                const outputAudioUrl = result.data[0];
                audioPlayer.src = outputAudioUrl;
                audioPlayer.style.display = 'block';
                statusDiv.innerText = 'ပြောင်းလဲမှု အောင်မြင်ပါသည်။ အောက်တွင် နားဆင်ပါ!';
                statusDiv.style.color = '#4ade80';
            } else {
                throw new Error("AI Server ၏ တုံ့ပြန်မှု မှားယွင်းနေပါသည်။");
            }
        };

    } catch (error) {
        console.error(error);
        statusDiv.innerText = 'အမှားတစ်ခု ဖြစ်ပေါ်ခဲ့ပါသည်။ Colab Server တက်နေမနေ စစ်ဆေးပေးပါ။';
        statusDiv.style.color = '#f87171';
    }
});