Stable Diffusion Generator - Web

<html>
    <body>
        <h1>AI Image Generator!</h1>

        <form name="aigenerator" id="aigenerator">
            <label for="prompt">Prompt:</label>
            <textarea cols="50" rows="7" id="prompt" name="prompt" required></textarea>
            <br>
            <label for="negative_prompt">Negative Prompt:</label>
            <textarea cols="50" rows="7" id="negative_prompt" name="negative_prompt"></textarea>
            <br>
            <label for="width">Width:</label>
            <input type="number" id="width" name="width" required>
            <br>
            <label for="height">Height:</label>
            <input type="number" id="height" name="height" required>
            <br>
            <label for="model">Model:</label>
            <select id="model" name="model">
                <option value="realisticvision">Realistic Vision (SD 1.5)</option>
            </select>
            <button type="submit">Generate</button>

            <script>
                // /generate endpoint with the form data in a json:
                document.getElementById('aigenerator').addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const data = new FormData(e.target);
                    const json = Object.fromEntries(data.entries());
                    const response = await fetch('http://127.0.0.1:5678/generate', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(json)
                    });
                    response_json = await response.json();
                    console.log(response_json);

                    // now check /queue_position/<request_id> for the status of the request:
                    const request_id = response_json.request_id;

                    check_status = setInterval(async () => {
                        const response = await fetch(`http://127.0.0.1:5678/queue_position/${request_id}`);
                        response_json = await response.json();
                        console.log(response_json);

                        if (response_json.status === 'completed') {
                            clearInterval(check_status);
                            // get the image base64 from the /result/<request_id> endpoint:
                            const response = await fetch(`http://127.0.0.1:5678/result/${request_id}`);
                            response_json = await response.json();
                            console.log(response_json);

                            // display the image:
                            for (const image of document.getElementsByTagName('img')) {
                                image.remove();
                            }

                            base64Array = response_json.images;
                        
                            for (const base64 of base64Array) {
                                const img = document.createElement('img');
                                img.src = `data:image/png;base64,${base64}`;
                                document.body.appendChild(img);
                            }
                        } 
                    }, 1000);
                });
            </script>
    </body>
</html>
Editor is loading...