Connect to local or any stable diffusion instance with prompts and create a background #2355

trajano · 2024-08-10T15:32:23Z

trajano
Aug 10, 2024

Just started this idea with ChatGPT ~~though I am still getting CORS errors when connecting to the SD endpoint.~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Background</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <script>
        const stableDiffusionEndpoint = 'http://127.0.0.1:7860/sdapi/v1/txt2img';
        const pollingInterval = 60000; // Poll every 60 seconds

        async function fetchImage() {
            const width = window.innerWidth;
            const height = window.innerHeight;

            let adjustedWidth, adjustedHeight;

            if (width >= height) {
                adjustedHeight = 512;
                adjustedWidth = Math.floor(512 * (width / height));
            } else {
                adjustedWidth = 512;
                adjustedHeight = Math.floor(512 * (height / width));
            }

            const positivePrompt = "epic landscape, high detail, photorealistic, beautiful person";
            const negativePrompt = "ugly, deformed, extra limbs, extra fingers, missing fingers, blurry, low quality, grainy, distorted face, bad anatomy, mutated hands, mutated fingers, bad proportions, poorly drawn face, poorly drawn hands, uncanny valley, unrealistic eyes, cross-eyed, asymmetrical face, extra arms, multiple faces, multiple heads, low resolution, bad lighting, pixelated, wrong perspective, weird eyes, fused fingers, awkward pose, artifacts, cropped, text, watermark";

            const response = await fetch(stableDiffusionEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    prompt: positivePrompt,
                    negative_prompt: negativePrompt,
                    width: adjustedWidth,
                    height: adjustedHeight,
                    steps: 20,
                    cfg_scale: 7.5,
                    sampler_index: "Euler a"
                })
            });

            if (response.ok) {
                const data = await response.json();
                const imageUrl = `data:image/png;base64,${data.images[0]}`;
                document.body.style.backgroundImage = `url(${imageUrl})`;
            } else {
                console.error('Failed to fetch image:', response.statusText);
            }
        }

        function startPolling() {
            fetchImage(); // Fetch the image immediately
            setInterval(fetchImage, pollingInterval); // Continue polling every interval
        }

        window.onload = startPolling;
    </script>
</body>
</html>

Stable Diffusion should be started with

python launch.py --api --cors-allow-origins="*"

Then just use npx http-server to host the web page.

The curl is

curl -X POST http://127.0.0.1:7860/sdapi/v1/txt2img \
-H "Content-Type: application/json" \
-d '{
  "prompt": "epic landscape, high detail, photorealistic, beautiful person",
  "negative_prompt": "ugly, deformed, extra limbs, extra fingers, missing fingers, blurry, low quality, grainy, distorted face, bad anatomy, mutated hands, mutated fingers, bad proportions, poorly drawn face, poorly drawn hands, uncanny valley, unrealistic eyes, cross-eyed, asymmetrical face, extra arms, multiple faces, multiple heads, low resolution, bad lighting, pixelated, wrong perspective, weird eyes, fused fingers, awkward pose, artifacts, cropped, text, watermark",
  "width": 896,
  "height": 512,
  "steps": 20,
  "cfg_scale": 7.5,
  "sampler_index": "Euler a"
}'

Some things todo/idea that I don't know how to do yet.

provide a "UI" that the user can place their own prompts, scaling factor, resolution, interval etc
somehow make it a "depth" wallpaper
allow it to pause when needed
let it remember the last generated one
put a "splash screen so it's not jarring when it's first loaded

trajano · 2024-08-10T15:56:27Z

trajano
Aug 10, 2024
Author

Yeah 50 steps is probably ridiculous takes about 30 minutes to render one image :D

0 replies

trajano · 2024-08-10T16:15:29Z

trajano
Aug 10, 2024
Author

I updated the OP it should have more details now.

0 replies

rocksdanister · 2024-08-13T07:54:55Z

rocksdanister
Aug 13, 2024
Maintainer

Lively is a native application built using C# and not JS.

Whether its api key/local instance- needs to be easy to use (no api key creation/plug n play) otherwise it would create too many support questions and become troublesome.

The current depth creation is run in-app using onnx, similar approach is possible for stable-diffusion.

1 reply

trajano Aug 13, 2024
Author

Yeah the only hook I can find right now for expanding is to run an HTTP server with JavaScript unless I sort of recompile the code.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Connect to local or any stable diffusion instance with prompts and create a background #2355

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Connect to local or any stable diffusion instance with prompts and create a background #2355

trajano Aug 10, 2024

Replies: 3 comments · 1 reply

trajano Aug 10, 2024 Author

trajano Aug 10, 2024 Author

rocksdanister Aug 13, 2024 Maintainer

trajano Aug 13, 2024 Author

trajano
Aug 10, 2024

Replies: 3 comments 1 reply

trajano
Aug 10, 2024
Author

trajano
Aug 10, 2024
Author

rocksdanister
Aug 13, 2024
Maintainer

trajano Aug 13, 2024
Author