modify the hello app of streamlit to enable user to use both animation and slider

streamlit_slider_bar_and_animation.py

import streamlit as st
import numpy as np

# Interactive Streamlit elements, like these sliders, return their value.
# This gives you an extremely simple interaction model.
iterations = st.sidebar.slider("Level of detail", 2, 20, 10, 1)
separation = st.sidebar.slider("Separation", 0.7, 2.0, 0.7885)

m, n, s = 960, 640, 400
x = np.linspace(-m / s, m / s, num=m).reshape((1, m))
y = np.linspace(-n / s, n / s, num=n).reshape((n, 1))


def show(frame):
    a = 4 * np.pi * frame / 100

    c = separation * np.exp(1j * a)
    Z = np.tile(x, (n, 1)) + 1j * np.tile(y, (1, m))
    C = np.full((n, m), c)
    M = np.full((n, m), True, dtype=bool)
    N = np.zeros((n, m))

    for i in range(iterations):
        Z[M] = Z[M] * Z[M] + C[M]
        M[np.abs(Z) > 2] = False
        N[M] = i

    # Update the image placeholder by calling the image() function on it.
    image.image(1.0 - (N / N.max()), use_column_width=True)


def animate():

    progress_bar = st.progress(0)
    frame_text = st.empty()

    for frame in range(100):
        progress_bar.progress(frame)
        frame_text.text("Frame %i/100" % (frame + 1))
        show(frame)

    # We clear elements by calling empty on them.
    progress_bar.empty()
    frame_text.empty()


# Streamlit widgets automatically run the script from top to bottom. Since
# this button is not connected to any other logic, it just causes a plain
# rerun.
animation_run = st.button("animation")
image = st.empty()

if animation_run:
    animate()

frame = st.slider('frame', 0, 100, 0, 1)
show(frame)