sd_worker.py

main.py

album.js

// ---------------- 바뀐 내용 ------------------
document.querySelector("#img_create_btn").addEventListener("click", async (e) => {
    e.preventDefault()
    // 버튼 동작 체크
    console.log("Button Clicked!");
    const startTimestamp = new Date();

    const required_ids = ["song_name", "artist_name", "album_name"];
    for (let i of required_ids) {
        if (document.getElementById(i).value == "") {
            alert("모든 필수 입력란을 입력해주세요.");
            document.getElementById(i).focus();
            return;
        }
    }
    select_song = document.getElementById("song_name").value
    select_artist = document.getElementById("artist_name").value
    select_album = document.getElementById("album_name").value
    select_lyrics = document.getElementById("lyrics").value
    genre = document.getElementsByClassName("genre")
    for (let i = 0; i < genre.length; i++) {
        cur_genre = genre[i].id;
        if (document.getElementById(cur_genre).className == badge_checked) {
            select_genre = document.getElementById(cur_genre).textContent
        }
    }
    const albumInput = {
        song_names: select_song,
        artist_name: select_artist,
        genre: select_genre,
        album_name: select_album,
        lyric: select_lyrics,
    };

    if (document.getElementById("listGroupRadioGrid1").checked == true) {
        select_model = document.getElementById("listGroupRadioGrid1").value
    }
    else {
        select_model = document.getElementById("listGroupRadioGrid2").value
    }
    if (select_model == "Stable Diffusion") {
        // 이미지 생성시간 안내 모달창 띄우기
        $('#create_modal1').modal('show');

        // 스피너 보이기
        document.getElementById("create_spinner").style.display = "block"
        // 1초마다 경과 시간을 갱신
        timerId = setInterval(() => {
            updateElapsedTime(startTimestamp);
        }, 1000);
        
        try {
            await generateCover(albumInput);
        } catch (error) {
            console.error('Error:', error);
        }
        
        async function generateCover(albumInput) {
            const response = await fetch('<http://34.22.72.143:80/api/generate_cover>', {
                method: 'POST',
                mode: "cors",
                credentials: 'include',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(albumInput),
            });
        
            if (response.ok) {
                const data = await response.json();
                checkTaskStatus(data.task_id);
            } else {
                console.error(`HTTP error! status: ${response.status}`);
            }
        }
        
        async function checkTaskStatus(taskId) {
            const response = await fetch(`http://34.22.72.143:80/api/get_task_result/${taskId}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
        
            if (response.ok) {
                const data = await response.json();
                if (data.status === 'SUCCESS') {
                    getTaskResult(taskId);

                    clearInterval(timerId);
                    document.getElementById("create_spinner").style.display = "none";
                    document.getElementById("info_alert").style.display = "block";
                    watermark = document.getElementsByClassName("watermark");
                    for (let i = 0; i < watermark.length; i++) {
                        watermark[i].style.display = "block";
                    }
                    download_btn = document.getElementsByClassName("download_btn");
                    for (let i = 0; i < download_btn.length; i++) {
                        download_btn[i].style.pointerEvents = "auto";
                    }

                } else {
                    setTimeout(() => checkTaskStatus(taskId), 1000);
                }
            } else {
                console.error(`HTTP error! status: ${response.status}`);
            }
        }
        
        async function getTaskResult(taskId) {
            const response = await fetch(`http://34.22.72.143:80/api/get_task_result/${taskId}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
        
            if (response.ok) {
                const data = await response.json();
        
                for (let i = 1; i <= 4; i++) {
                    let imgElement = document.getElementById(`image${i}`);
                    imgElement.src = data.result.image_urls[i - 1];
                }
            } else {
                console.error(`HTTP error! status: ${response.status}`);
            }
        }          

    }

 // ---------------- 바뀐 내용 ------------------
// 위 부분만 변경 사항 - 아래 부분은 위치 기준을 참고 하기 위해 넣었습니다
    else {  // DreamBooth
        const imagePreview = document.querySelector('#imagePreview');
        const images = imagePreview.querySelectorAll('img');
        const imageUrls = Array.from(images).map(img => img.src);
        console.log(imageUrls.length)
        console.log('업로드한 이미지 목록들:', imageUrls);
        if (imageUrls.length == 0) {
            alert('이미지를 업로드해주세요.')
            document.getElementById("imageUpload").click();
            return;
        }

// 아래의 이 부분을 주석 처리 해주세여 

// clearInterval(timerId)
        // document.getElementById("create_spinner").style.display = "none";
        // document.getElementById("info_alert").style.display = "block";
        // watermark = document.getElementsByClassName("watermark");
        // for (let i = 0; i < watermark.length; i++) {
        //     watermark[i].style.display = "block";
        // }
        // download_btn = document.getElementsByClassName("download_btn");
        // for (let i = 0; i < download_btn.length; i++) {
        //     download_btn[i].style.pointerEvents = "auto";
        // }