streamlit_app.py

#streamlit run your_script.py
import streamlit as st
import os
import sys

from pathlib import Path

st.set_page_config(
        page_title="F1 Steering Angle Model",
        page_icon="https://img.icons8.com/external-soft-fill-juicy-fish/60/external-formula-vehicle-mechanics-soft-fill-soft-fill-juicy-fish.png",
        initial_sidebar_state="expanded",
        layout="wide"
    )
from utils.helper import BASE_DIR,metrics_page
if "visited" not in st.session_state:
    st.session_state["visited"] = True
    try:
        metrics_page.update_one({"page": "inicio"}, {"$inc": {"visits": 1}})
    except:
        st.warning("MongoDB client not connected.")


hide_decoration_bar_style = '''
    <style>
        header {visibility: hidden;}
    </style>
'''
logo_style = '''
    <style>
        /* Estilo para iconos de contacto - versión compacta */
        .contact-icons {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        
        .contact-icon {
            display: flex;
            align-items: center;
            padding: 6px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            text-decoration: none;
            color: #ffffff;
        }
        
        .contact-icon:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        .contact-icon img {
            width: 16px;
            height: 16px;
        }
        
        /* Email button style */
        .email-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 15px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            text-decoration: none;
            color: #ffffff;
            font-size: 13px;
            margin-top: 12px;
            width: 100%;
        }
        
        .email-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .email-button img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }
        
        /* Estilo para el separador */
        .sidebar-separator {
            margin: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
'''
#sst.markdown(hide_decoration_bar_style, unsafe_allow_html=True)logo_style
st.markdown(logo_style, unsafe_allow_html=True)

#st.markdown("<br>",unsafe_allow_html=True)

with st.sidebar:
    st.markdown("<h3 style='text-align: center; color: #fff;'>Considerations</h3>", unsafe_allow_html=True)
    st.caption("""**Ouput Data**:""")
    st.markdown("<p style='text-align: left; color: gray; font-size: 12px;'>The model is trained with images from -180° to 180°, for the moment may not accurately predict angles beyond 180°. Poor or high-intensity lighting may affect data accuracy.</p>", unsafe_allow_html=True)
    st.caption("""**Usage**:""") 
    st.markdown("<p style='text-align: left; color: gray; font-size: 12px;'>Free-tier server resources are limited, so the page may be slow or crash with large files. To run it locally, feel free to fork/clone the project or download the desktop app.</p>", unsafe_allow_html=True)

    st.markdown("<p style='text-align: left; color: gray; font-size: 12px;'>Any feedback is welcome.</p>", unsafe_allow_html=True)
    st.markdown("", unsafe_allow_html=True)

    st.markdown("<h3 style='text-align: center; color: #fff;'>Available links</h3>", unsafe_allow_html=True)
    # Nueva versión más compacta de los iconos
    a_html = """
    <div class="contact-icons">
        <a href='https://daniel-saed-f1-steering-angle-model.hf.space' target="_blank" class="contact-icon" title="hugginface">
            <img src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/huggingface-color.png" alt="hugginface">
        </a>
        <a href="https://f1-steering-angle-model.streamlit.app/" target="_blank" class="contact-icon" title="Streamlit">
            <img src="https://seeklogo.com/images/S/streamlit-logo-1A3B208AE4-seeklogo.com.png" alt="Streamlit">
        </a>
    </div>
    
    """
    st.markdown(a_html, unsafe_allow_html=True)
    
    st.write("")
    st.write("")

    st.markdown("<h3 style='text-align: center; color: #fff;'>Get Desktop App</h3>", unsafe_allow_html=True)
    col1,col2, col3 = st.columns([1,6,1])
    with col2:

        st.markdown("<p style='text-align: center; color: gray; font-size: 10px;'>Click Assets then download .exe</p>", unsafe_allow_html=True)
        st.link_button("Download", "https://github.com/danielsaed/F1-steering-angle-model/releases",type="secondary",use_container_width=True)

    st.markdown("", unsafe_allow_html=True)

    st.markdown("<h3 style='text-align: center; color: #fff;'>Contact</h3>", unsafe_allow_html=True)
    # Nueva versión más compacta de los iconos
    contact_html = """
    <div class="contact-icons">
        <a href='https://x.com/justsaed' target="_blank" class="contact-icon" title="X">
            <img src="https://static.vecteezy.com/system/resources/previews/053/986/348/non_2x/x-twitter-icon-logo-symbol-free-png.png" alt="X">
        </a>
        <a href="https://github.com/danielsaed/F1-steering-angle-model" target="_blank" class="contact-icon" title="GitHub">
            <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub">
        </a>
    </div>
    
    """
    
    st.markdown(contact_html, unsafe_allow_html=True)
    st.write("")
    st.write("")
    st.markdown("<p style='text-align: center; color: gray; font-size: 10px;'>For research/educational purposes only</p>", unsafe_allow_html=True)


pages = st.navigation({ 
    "Steering Angle Model": [
        st.Page(Path(BASE_DIR) / "navigation" / "steering-angle.py", title="Use Model"),
        st.Page(Path(BASE_DIR) / "navigation" / "soon.py", title="Historical Steering Data Base"),
        ],})

pages.run()