Add app.py

app.py

@@ -0,0 +1,189 @@
+import torch
+
+from datasets import load_dataset
+import transformers
+from diffusers import StableDiffusionPipeline
+
+import gradio as gr
+
+from random import randrange
+import os
+
+MY_SECRET_TOKEN = os.environ.get('stable-diffusion')
+
+data = load_dataset("mfumanelli/movies-small")
+data = data['train'].to_pandas()
+
+model_id = 'CompVis/stable-diffusion-v1-4'
+device = torch.device('cpu' if not torch.cuda.is_available() else 'cuda')
+
+pipe = StableDiffusionPipeline.from_pretrained(model_id, use_auth_token=MY_SECRET_TOKEN, revision='fp16')
+pipe = pipe.to(device)
+
+
+def infer(prompt, samples, steps, scale):
+    generator = torch.Generator(device=device)
+
+    if device.type == 'cuda':
+        with torch.autocast(device.type):
+            images_list = pipe(
+                [prompt] * samples,
+                num_inference_steps=steps,
+                guidance_scale=scale,
+                generator=generator,
+            )
+    else:
+        images_list = pipe(
+            [prompt] * samples,
+            num_inference_steps=steps,
+            guidance_scale=scale,
+            generator=generator,
+        )
+
+    return images_list
+
+
+def generate_movie(state):
+    state["title"] = None
+    random_number = randrange(data.shape[0])
+    plot = data.iloc[random_number]["plot_synopsis_sum"]
+    image = infer(plot, 1, 50, 7.5)
+    state["number"] = random_number
+    state["title"] = data.iloc[int(random_number)]["title"]
+
+    return image["sample"][0], state
+
+
+def movie_title(state):
+    return state["title"]
+
+
+css = """
+        .gradio-container {
+            font-family: 'IBM Plex Sans', sans-serif;
+        }
+        .gr-button {
+            color: white;
+            border-color: black;
+            background: black;
+        }
+        input[type='range'] {
+            accent-color: black;
+        }
+        .dark input[type='range'] {
+            accent-color: #dfdfdf;
+        }
+        .container {
+            max-width: 730px;
+            margin: auto;
+            padding-top: 1.5rem;
+        }
+        #iamge {
+            min-height: 22rem;
+            margin-bottom: 15px;
+            margin-left: auto;
+            margin-right: auto;
+            border-bottom-right-radius: .5rem !important;
+            border-bottom-left-radius: .5rem !important;
+        }
+        #iamge>div>.h-full {
+            min-height: 20rem;
+        }
+        .details:hover {
+            text-decoration: underline;
+        }
+        .gr-button {
+            white-space: nowrap;
+        }
+        .gr-button:focus {
+            border-color: rgb(147 197 253 / var(--tw-border-opacity));
+            outline: none;
+            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+            --tw-border-opacity: 1;
+            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+            --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+            --tw-ring-opacity: .5;
+        }
+        .footer {
+            margin-bottom: 45px;
+            margin-top: 35px;
+            text-align: center;
+            border-bottom: 1px solid #e5e5e5;
+        }
+        .footer>p {
+            font-size: .8rem;
+            display: inline-block;
+            padding: 0 10px;
+            transform: translateY(10px);
+            background: white;
+        }
+        .dark .footer {
+            border-color: #303030;
+        }
+        .dark .footer>p {
+            background: #0b0f19;
+        }
+        .acknowledgments h4{
+            margin: 1.25em 0 .25em 0;
+            font-weight: bold;
+            font-size: 115%;
+        }
+"""
+
+with gr.Blocks(css=css) as demo:
+    gr.HTML(
+        """
+            <div style="text-align: center; max-width: 650px; margin: 0 auto;">
+              <div
+                style="
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 0.8rem;
+                  font-size: 1.75rem;
+                "
+              >
+
+                <svg style="color: red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256", height="0.85em" width="0.85em">
+                <rect width="18em" height="18em" fill="none"></rect>
+                <path d="M128,216S28,160,28,92A52,52,0,0,1,128,72h0A52,52,0,0,1,228,92C228,160,128,216,128,216Z" fill="#d63e25" stroke="#d63e25" stroke-linecap="round"
+                stroke-linejoin="round" stroke-width="12"></path></svg>
+                <h1 style="font-weight: 900; margin-bottom: 7px;">
+                  Stable Diffusion Loves Cinema
+                </h1>
+              </div>
+              <p style="margin-bottom: 20px; font-size: 94%">
+                Stable Diffusion is a state-of-the-art text-to-image model that generates images from text, 
+                in this demo it is used to generate movie scenes from their storyline. <br></p>
+                <hr style="height:2px;border-width:0;color:gray;background-color:gray">
+                <br>
+              <p align="left" style="margin-bottom: 10px; font-size: 94%">
+                <b>Instructions</b>: press the "Generate a movie scene!" button to generate an image and try to see if you can guess the movie.
+                You can see if you guessed right by pressing the "Tell me the title" button.
+
+              </p>
+            </div>
+        """
+    )
+    with gr.Group():
+        with gr.Box():
+            with gr.Row().style(mobile_collapse=False, equal_height=True):
+                b1 = gr.Button("Generate a movie scene!").style(
+                    margin=False,
+                    rounded=(False, True, True, False),
+                )
+                b2 = gr.Button("Tell me the title").style(
+                    margin=False,
+                    rounded=(False, True, True, False),
+                )
+            text = gr.Textbox(label="Title:")
+            image = gr.Image(
+                label="Generated images", show_label=False, elem_id="image"
+            ).style(height="auto")
+
+            state = gr.State({"number": None, "title": None})
+
+            b1.click(generate_movie, inputs=state, outputs=[image, state])
+            b2.click(movie_title, inputs=state, outputs=text)
+
+demo.launch()