document.addEventListener('DOMContentLoaded', function() {
    const modelViewer1 = document.getElementById('modelViewer1');
    const modelViewer2 = document.getElementById('modelViewer2');
    const option1 = document.getElementById('option1');
    const option2 = document.getElementById('option2');

    function updateModels() {
        if (option1.checked) {
            modelViewer1.setAttribute('src', 'path/to/option1_model1.glb');
            modelViewer2.setAttribute('src', 'path/to/option1_model2.glb');
        } else if (option2.checked) {
            modelViewer1.setAttribute('src', 'kodim08_30_ori.gltf');
            modelViewer2.setAttribute('src', 'kodim08_30_sh.gltf');
        } else {
            // Set to default models or hide them
            modelViewer1.setAttribute('src', 'kodim08_50_ori.gltf');
            modelViewer2.setAttribute('src', 'kdoim08_50_sh.gltf');
        }
    }

    [option1, option2].forEach(option => {
        option.addEventListener('change', function() {
            // Uncheck other options
            option1.checked = option2.checked = false;
            this.checked = true;
            updateModels();
        });
    });

    updateModels();
});