How can i plot a GIF or video on streamlit?

Using Streamlit
1

I have a code that generates an animation of an orbit. How can I configure to plot the same video in a streamlit webapp? I tried something dot “st.pyplot(ani)” at the end, but the result generated an empty white square. Below is the part referring to the plot of my code.

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 ])

# GIF

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

plt.close() 

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())

st.pyplot(ani)
2

Hi @isa.rsn, welcome to the Streamlit community!

What does HTML() represent? Is that the Jupyter HTML function? Streamlit has it’s own html function that might work:

Roughly

import streamlit.components.v1 as components

# ..all the other code

components.html(ani.to_jshtml())

Best,
Randy

1 Like
4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.