File size: 2,822 Bytes
3936a00
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text-to-Image Gradio Template</title>
    <script src="https://cdn.jsdelivr.net/npm/@gradio/core@2.1.5/dist/gradio.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/core@2.1.5/dist/gradio.min.css">
    <style>
        #col-container {
            margin: 0 auto;
            max-width: 520px;
        }
    </style>
</head>
<body>
    <div id="gradio-app"></div>
    <script>
        const { gr, gradio } = window;

        const MAX_SEED = 2147483647; // Max seed for np.int32
        const MAX_IMAGE_SIZE = 1024;

        // Your Python function for inference
        const infer = gr.pythonFunction({
            functionAddress: 'somewhere',
            returnType: 'numpy',
            functionArgs: ['prompt', 'negative_prompt', 'seed', 'randomize_seed', 'width', 'height', 'guidance_scale', 'num_inference_steps']
        });

        const examples = [
            "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
            "An astronaut riding a green horse",
            "A delicious ceviche cheesecake slice",
        ];

        const demo = gr.Interface(
            infer,
            gr.Blocks,
            () => ({
                elem_id: "col-container",
                examples: examples,
                inputs: [
                    gr.Text({label: "Prompt", show_label: false, maxLines: 1, placeholder: "Enter your prompt", container: false}),
                    gr.Button("Run", {scale: 0})
                ],
                outputs: gr.Image({label: "Result", show_label: false}),
                advanced: [
                    gr.Accordion("Advanced Settings", false, [
                        gr.Text({label: "Negative prompt", maxLines: 1, placeholder: "Enter a negative prompt", visible: false}),
                        gr.Slider({label: "Seed", min: 0, max: MAX_SEED, step: 1, value: 0}),
                        gr.Checkbox("Randomize seed", true),
                        gr.Row([
                            gr.Slider({label: "Width", min: 256, max: MAX_IMAGE_SIZE, step: 32, value: 512}),
                            gr.Slider({label: "Height", min: 256, max: MAX_IMAGE_SIZE, step: 32, value: 512})
                        ]),
                        gr.Row([
                            gr.Slider({label: "Guidance scale", min: 0.0, max: 10.0, step: 0.1, value: 0.0}),
                            gr.Slider({label: "Number of inference steps", min: 1, max: 12, step: 1, value: 2})
                        ])
                    ])
                ]
            })
        );

        demo.render(document.getElementById("gradio-app"));
    </script>
</body>
</html>