import gradio as gr

COMMUNITY_NAME = "TinyModels 🤏⚡"
LOGO_PATH = "Com logo.png"
DESCRIPTION = """
### Big intelligence. Tiny Parameters.
**TinyModels** is a collaborative space dedicated to building small, fast, production-ready models 
that punch way above their weight. No bloat. No nonsense. 
*Just models that work — on your laptop, your phone, or your API.*
"""

BUTTON_STYLE = """
<style>
.custom-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.primary-btn {
    background-color: #8A2BE2;
    color: white;
}
.primary-btn:hover {
    background-color: #7B1FA2;
}
.secondary-btn {
    background-color: #E0E0E0;
    color: #333;
}
.secondary-btn:hover {
    background-color: #BDBDBD;
}
</style>
"""

def create_buttons():
    return gr.HTML(
        f"""
        {BUTTON_STYLE}
        <a href="https://huggingface.co/TinyModels" target="_blank" class="custom-button primary-btn">
            Explore Models
        </a>
        <a href="https://huggingface.co/join/TinyModels" target="_blank" class="custom-button secondary-btn">
            Join Community
        </a>
        """
    )

with gr.Blocks(css="style.css", theme=gr.themes.Soft()) as app:
    with gr.Column(elem_id="card"):
        gr.Image(
            value=LOGO_PATH,
            elem_id="logo-img",
            show_label=False,
            container=False,
            interactive=False
        )
        gr.Markdown(f"## {COMMUNITY_NAME}")
        gr.Markdown(DESCRIPTION, elem_classes="desc-text")
        create_buttons()

app.launch(server_name="0.0.0.0", server_port=7860)