Disappearing image when start typing in a text box below

[tgberkeley]

After each image is uploaded we render it using this line: pc.foreach(State.img, lambda img: pc.image(src=img)) However when we go to type in the text box below afterwards (in this line: pc.input(placeholder="Enter a prompt..", on_change=State.set_prompt)) the image that we have previously rendered disappears. It then reappears if we refresh the page.

def index():
    """The main view."""
    return pc.center(
        pc.vstack(
            pc.heading("Stable Diffusion", font_size="1.5em"),
            pc.upload(
                pc.vstack(
                    pc.button(
                        "Select File",
                        color="blue",
                        bg="white",
                        border=f"1px solid blue",
                    ),
                    pc.text("Drag and drop files here or click to select files"),
                ),
                border=f"1px dotted blue",
                padding="5em",
            ),
            pc.button(
                "Upload",
                on_click=lambda: State.handle_upload(pc.upload_files()),
            ),
            pc.foreach(State.img, lambda img: pc.image(src=img)),
            pc.vstack(
                pc.input(placeholder="Enter a prompt..", on_change=State.set_prompt),
                pc.text("Number of inference steps: " + State.inference_steps),
                pc.slider(
                    on_change_end=State.set_inference_steps,
                    color_scheme="green",
                    default_value=100,
                    min_=3,
                    max_=200,
                ),
                pc.button(
                    "Generate New Image",
                    on_click=[State.process_image, State.stable_diffusion],
                    width="100%",
                ),
                pc.divider(),
                pc.cond(
                    State.image_processing,
                    pc.circular_progress(is_indeterminate=True),
                    pc.cond(
                        State.image_made,
                        pc.image(src=State.image_url),
                    ),
                ),
            ),
            bg="white",
            padding="2em",
            shadow="lg",
            border_radius="lg",
        ),
        width="100%",
        height="100vh",
        background="radial-gradient(circle at 22% 11%,rgba(62, 180, 137,.20),hsla(0,0%,100%,0) 19%),radial-gradient(circle at 82% 25%,rgba(33,150,243,.18),hsla(0,0%,100%,0) 35%),radial-gradient(circle at 25% 61%,rgba(250, 128, 114, .28),hsla(0,0%,100%,0) 55%)",
    )