import requests
import streamlit as st
from streamlit_lottie import st_lottie
from bokeh.embed import components
from bokeh_plot import create_plot

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

st.set_page_config(
    page_title="AToMiC2024 Images (Sampled 50k)", 
    page_icon="⚛️", 
    layout="wide", 
    initial_sidebar_state="auto", 
    menu_items={'About': '## UMAP Embeddings  of AToMiC2024 images'}
)

if __name__ == "__main__":
    col1, col2 = st.columns([0.15, 0.85])
    with col1:
        lottie = load_lottieurl("https://lottie.host/de47fd4c-99cb-48a7-ae10-59d4eb8e4dbe/bXMpZN95tA.json")
        st_lottie(lottie)

    with col2:
        st.write(
            """
            ## AToMiC Image Explorer
            ### Subsampled AToMiC Images using [CLIP-ViT-BigG](https://huggingface.co./laion/CLIP-ViT-bigG-14-laion2B-39B-b160k)
            - **Subsampling Procedure:** Hierarchical K-Means [10, 10, 10, 10], randomly sampled 50 from the leaf clusters -> random sample 25k for visualization.
            - Original [Image Collection](https://huggingface.co./datasets/TREC-AToMiC/AToMiC-Images-v0.2)
            - Prebuilt [Embeddings/Index](https://huggingface.co./datasets/TREC-AToMiC/AToMiC-Baselines/tree/main/indexes)
            - Questions? Leave an issue at our [repo](https://github.com/TREC-AToMiC/AToMiC).
            - It takes a few minutes to render the plot.
            """
        )
    # Generate the Bokeh plot
    bokeh_plot = create_plot()
    st.bokeh_chart(bokeh_plot, use_container_width=False)