안녕하세요 karlo API에 대한 질문입니다

Karlo
#1

안녕하세요 karlo API를 사용해서 이미지를 만들고있는 웹페이지를 만들고있는데 karlo API를 사용하는중에 이미지 생성에서 width나 height같은 요소들을 사용할려고할때 에러가 생깁니다 개발환경은 VSCODE를 사용하고 node.js를 사용하고 있습니다.

async function t2i(prompt, negativePrompt, imageformat, returntype, imageQuality, samples) {
    try {
        const response = await axios.post(
            'https://api.kakaobrain.com/v2/inference/karlo/t2i',
            {
                prompt,
                negative_prompt: negativePrompt,
                image_format: imageformat,
                return_type : returntype,
                image_quality: imageQuality,
                samples
            },
            {
                headers: {
                    'Authorization': `KakaoAK ${REST_API_KEY}`,
                    'Content-Type': 'application/json'
                }
            }
        );

        // Convert the response to JSON format
        const responseData = response.data;

        // Extract the image URL from the response
        const imageUrl = responseData.images[0].image;
        console.log('Image URL:', imageUrl);
        console.log(responseData.images[0]);
        

        // Send the image URL to the client
        return imageUrl;
    } catch (error) {
        console.error('Error:', error.message);
        return null;
    }
}

// Handle form submission
app.post('/generateImage', async (req, res) => {
    const prompt = req.body.prompt;
    const negativePrompt = 
    "paper, cake, low quality, low contrast, draft, amateur, cut off, cropped, frame, object out of frame, out of frame, body out of frame, text, letter, signature, watermark";
    const imageformat = "png";
    const returntype = "url";
    const imageQuality = 80;
    const samples = 2;

    console.log("Input:", req.body.width);
    const width = 384;
    console.log("Parsed Width:", width);

    console.log(imageQuality);



    const imageUrl = await t2i(prompt, negativePrompt, imageformat, returntype, imageQuality, samples);

    if (imageUrl) {
        res.json({ imageUrl }); // Sending JSON response
    } else {
        // If image generation fails, send an error response
        res.status(500).send('Error generating image');
    }
});

 <h1>Image Generator</h1>
    <div class="container">
    <form action="/generateImage" method="post">
        <label for="prompt">Prompt:</label>
        <!-- <input type="text" id="prompt" name="prompt" placeholder="Enter your prompt" required> -->
        <textarea name="prompt" id="prompt" cols="30" rows="10" placeholder="Enter your prompt" required></textarea><br>

        <label for="width">Width</label>
        <input type="text" name="width" id="width">

        <button type="submit">Generate Image</button>
    </form>
</div>

이러한 코드를 구성하였지만 wiidth같은 요소들을 유저가 작성한것을 가져와서 사용하고싶습니다 어떤식으로 코드를 고치면 될까요?

#2

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456

#3

응답받은 에러 전문 기재 부탁드려요.

#4

앱 ID는 ID 1025196 입니다

#5

유저의 Input를 가져오는거까지는 성공했습니다 그런데 제가 samples를 잘못 이해하고있는지 궁금해지네요 samples에 2나 3를 넣으면 이미지를 2개 또는 3개를 자동으로 생성하는거죠? 그런다음에 이미지를 2개 또는 3개를 보여주고싶은데 그건 어떤식으로 해야할까요?

 // JavaScript 부분을 업데이트합니다
    document.querySelector('form').addEventListener('submit', async function (event) {
        event.preventDefault();
        const prompt = document.getElementById('prompt').value;
        const width = document.getElementById('width').value;
        const height = document.getElementById('height').value;
        
        // Using Fetch API to make a POST request
        const response = await fetch('/generateImage', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ prompt, width, height }),
        });

        // Parsing response JSON
        const data = await response.json();

        // Displaying the image
        const imageContainer = document.getElementById('imageContainer');
        imageContainer.innerHTML = `<img src="${data.imageUrl}" alt="Generated Image">`;

        // Show download button
        const downloadButton = document.getElementById('downloadButton');
        downloadButton.style.display = 'block';
        // Set download link
        downloadButton.onclick = function () {
            const link = document.createElement('a');
            link.href = data.imageUrl;
            link.download = 'generated_image.jpg'; // 파일 이름 지정
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        };
    });
</script>

이런 스크립트를 이용해서 업데이트를 하고있습니다

#6

개발을 어떻게 해야하는지 질문하신거군요.

(1) 가이드의 Curl 예제로 파라메터와 응답 간단히 테스트 해보실 수 있습니다.

(2) 응답 Json으로 여러건 이미지 전달되니 파싱하셔서 Loop 처리 하시면됩니다.