Lottie animation in Streamlit

[andfanilo]

There was a case where I wanted to experiment with Jinja to inject Python data in a HTML file before rendering with components.html.

Today, another use case, inject a Lottie JSON file into the Lottie HTML player, this time I tried Jinja.You should be able to play exported After Effects animations with Lottie in Streamlit now ahah. Maybe even do a loading screen while some computation is in effect and there’s even a gallery of Lottie files

If someone wants to do a static component package out of it (like for Folium)…

https://gist.github.com/andfanilo/088016c44e54274a5daca9a563001eb1

TLDR: use Jinja to pass Python data in a HTML template.

[randyzwitch]

Fascinating! The jinja piece is more exciting to me than Lottie itself, glad to see it’s so easy to incorporate jinja

[andfanilo]

So here’s a package: Streamlit-Lottie still alpha, it seems it uses a lot of CPU, but I really want to try using Lottie animations as a loading spinner or computation success animation XD.

Code: https://github.com/andfanilo/streamlit-lottie
App: https://share.streamlit.io/andfanilo/streamlit-lottie-demo/app.py

Sorry @randyzwitch no Jinja in there

Have fun.
Fanilo

[napoles3d]

This is totally awesome @andfanilo

[andfanilo]

Welcome streamlit-lottie 0.0.3!

• Added st_lottie_spinner context manager, so your Lottie animation plays until the end of the code in the with statement

import time
import requests

import streamlit as st
from streamlit_lottie import st_lottie_spinner

def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

lottie_url = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
lottie_json = load_lottieurl(lottie_url)

with st_lottie_spinner(lottie_json):
    time.sleep(5)
    st.balloons()

Have a nice day,
Fanilo

[mirfan899]

Is there a way to use lottie file at the top in sidebar on the multipage app?

[Maxime_tut]

Hi

I don’t understand how the lottie_spinner works… Seems it doesn’t work for me.

My app takes quite a long time to charge the background image, about 10 sec (I don’t know why).
And when I use the lottie_spinner, while charginf the image, nothing appears. But when I put just a time.sleep it works…

Here is the code I use.

To charge the image :

def get_base64(bin_file):
    with open(bin_file, 'rb') as f:
        data = f.read()
    return base64.b64encode(data).decode()


@st.experimental_singleton
def set_background(png_file):
    bin_str = get_base64(png_file)
    page_bg_img = '''
    <style>
    .stApp {
    background-image: url("data:image/png;base64,%s");
    background-size: cover;
    }
    </style>
    ''' % bin_str
    return st.markdown(page_bg_img, unsafe_allow_html=True)

To charge the lottie file :

def load_lottiefile(filepath: str):
    with open(filepath, "r") as f:
        return json.load(f)

lottie = load_lottiefile("lottie.json")

if selected == "Statistics & Predictions":
    
    col1,col2,col3 = st.columns(3)
    with col2:
        with st_lottie_spinner(lottie, loop=True, key="progress",width =300):
            set_background("background2.png") 

            def main():
                pass

I tried to put the set_background("background2.png") a bit everywhere but nothing expected…