How to solve a error generated in a gif in streamlit?

I added import streamlit.components.v1 as components at the beginning of my code and replaced st.pyplot(ani) with components.html(ani.to_jshtml()) . However, apparently the animation image was cut in half (pictured below). I’ve looked at the documentation and still haven’t been able to fix this error. Do you know what it could be?

Apart from that, adding a new question, my code is indeed a bit heavy and takes a few seconds to run. Is there any way to decrease plot time? Maybe if I previously make a text file with all the calculated data, or some configuration?

fig = plt.figure()

        plt.xlabel("x (km)")
        plt.ylabel("y (km)")
        plt.gca().set_aspect('equal')
        ax = plt.axes()
        ax.set_facecolor("black")
        circle = Circle((0, 0), rs_sun, color='dimgrey',linewidth=0)
        plt.gca().add_patch(circle)
        plt.axis([- (rs_sun / 2.0) / u1 , (rs_sun / 2.0) / u1 , - (rs_sun / 2.0) / u1 , (rs_sun / 2.0) / u1 ])

        # Montagem do gif

        graph, = plt.plot([], [], color="gold", markersize=3, label='Tempo: 0 s')
        L = plt.legend(loc=1)

        plt.close()  # Não mostra a imagem de fundo

        def animate(i):
            lab = 'Tempo: ' + str(round(dt*i * (rs_sun / 2.0) * 3e-5 , -int(math.floor(math.log10(abs(dt*(rs_sun / 2.0)*3e-5)))))) + ' s'
            graph.set_data(x[:i], y[:i])
            L.get_texts()[0].set_text(lab)  # Atualiza a legenda a cada frame
            return graph,

        skipframes = int(len(x)/200)
        if skipframes == 0:
            skipframes = 1

        ani = animation.FuncAnimation(fig, animate, frames=range(0,len(x),skipframes), interval=30, blit = True, repeat = False)
        HTML(ani.to_jshtml())

        components.html(ani.to_jshtml())
  1. Streamlit
  2. how it look in Google colab


colab

components.html takes an optional argument height, so you can set whatever the appropriate height is for your chart.

Best,
Randy

1 Like

Thank you!!