app.py

import gradio as gr
from typing import List
from datasets import load_dataset



class Space:
    def __init__(self, title, id):
        self.title = title
        self.id = id


class News:
    def __init__(self, title, link):
        self.title = title
        self.link = link


class Category:
    def __init__(self, category_id, title, description, news: List[News] = None, spaces=None):
        if news is None:
            news = []

        if spaces is None:
            spaces = []

        self.category_id = category_id
        self.title = title
        self.description = description
        self.news = news
        self.spaces = spaces


client_side = Category(
    category_id="client_side",
    title="Client Side Libraries 🤝",
    description="""
    ## These are client side libraries to easily interact or run training with models, datasets and Spaces on Hugging Face Hub 🤝 
    <br>      
    """,
    news=[
        News(
            title="We have launched huggingface.js to let developers interact with models on Hub in an API-like manner🚀",
            link="https://github.com/huggingface/huggingface.js"
        ),
        News(
            title="Xenova released transformers.js, to let you run powerful transformers easily inside browsers 🦾",
            link="https://github.com/xenova/transformers.js"
        ),
        News(
            title="Elixir 🤝 Hugging Face with Bumblebee",
            link="https://news.livebook.dev/announcing-bumblebee-gpt2-stable-diffusion-and-more-in-elixir-3Op73O"
        )
    ],
)
documentation = Category(
    category_id="documentation",
    title="Documentation 📚",
    description="""
    ## These are our documentation efforts and blogs specifically targeted for software developers to get them started with building machine learning 🦾
    <br>
    """,
    news=[
        News(
          title="Tasks: Wikipedia of machine learning to easily find the model you need for your use case and get started with building! 📚 ",
          link="https://www.technologyreview.com/2023/03/22/1070167/these-news-tool-let-you-see-for-yourself-how-biased-ai-image-models-are/"
        ),
        News(
            title="huggingface.js Documentation",
            link="https://www.wired.com/story/welfare-state-algorithms/"
        ),
        News(
            title="Docker and Hugging Face Partner to Democratize AI",
            link="https://www.docker.com/blog/docker-and-hugging-face-partner-to-democratize-ai/"
        ),
        News(
            title="From GPT2 to Stable Diffusion: Hugging Face arrives to the Elixir community",
            link="https://huggingface.co/blog/elixir-bumblebee"
        ),
        News(
            title="Swift 🧨Diffusers: Fast Stable Diffusion for Mac",
            link="https://huggingface.co/blog/fast-mac-diffusers"
        ),
        News(
            title="Using Stable Diffusion with Core ML on Apple Silicon",
            link="https://huggingface.co/blog/diffusers-coreml"
        ),
        News(
            title="Tutorial: How Hugging Face achieved a 2x performance boost for Question Answering with DistilBERT in Node.js",
            link="https://blog.tensorflow.org/2020/05/how-hugging-face-achieved-2x-performance-boost-question-answering.html"
        )
    ],
)
use_cases = Category(
    category_id="use_cases",
    title="Use Cases 📖",
    description="""
    ## These are resources compiled to demonstrate various use cases across different niches in software development. 👨‍💻 
    <br>
    """,
    news=[
        News(
            title="AI for Game Development: Creating a Farming Game in 5 Days. Part 1",
            link="https://huggingface.co/blog/ml-for-games-1"
        ),
        News(
            title="AI for Game Development: Creating a Farming Game in 5 Days. Part 2",
            link="https://huggingface.co/blog/ml-for-games-2"
        ),
        News(
            title="3D Asset Generation: AI for Game Development #3",
            link="https://huggingface.co/blog/ml-for-games-3"
        ),
        News(
            title="Supercharged Customer Service with Machine Learning",
            link="https://huggingface.co/blog/supercharge-customer-service-with-machine-learning"
        )
    ],
)
cloud = Category(
    category_id="cloud",
    title="☁️ Cloud Deployment",
    description="""
    ## This category includes resources on how to deploy machine learning models to cloud using various providers ☁️
    <br>
    """,
    news=[
        News(
            title="Deploying 🤗 ViT on Kubernetes with TF Serving",
            link="https://huggingface.co/blog/deploy-tfserving-kubernetes"
        ),
        News(
            title="An Overview of Inference Solutions on Hugging Face",
            link="https://huggingface.co/blog/inference-update"
        ),
        News(
            title="Hugging Face Collaborates with Microsoft to Launch Hugging Face Endpoints on Azure",
            link="https://huggingface.co/blog/hugging-face-endpoints-on-azure"
        ),
        News(
            title="Workshop: Getting started with Amazon Sagemaker Train a Hugging Face Transformers and deploy it",
            link="https://www.youtube.com/watch?v=80ix-IyNnQI&ab_channel=AmazonWebServices"
        ),
        News(
            title="Getting Started with Hugging Face on AWS: Series of video tutorials",
            link="https://www.youtube.com/watch?v=80ix-IyNnQI&ab_channel=AmazonWebServices"
        ),
    ],
)


categories = [client_side, documentation, cloud, use_cases]


def news_card(news):
    with gr.Box():
        with gr.Row(elem_id="news-row"):
            gr.Markdown(f"{news.title}")
            button = gr.Button(elem_id="article-button", value="Read more 🔗")
            button.click(fn=None, _js=f"() => window.open('{news.link}')")


def space_card(space):
    with gr.Box(elem_id="space-card"):
        with gr.Row(elem_id="news-row"):
            gr.Markdown(f"{space.title}")
            button = gr.Button(elem_id="article-button", value="View 🔭")
            button.click(fn=None, _js=f"() => window.open('https://hf.space/{space.id}')")


def category_tab(category):
    with gr.Tab(label=category.title, elem_id="news-tab"):
        with gr.Column():
            gr.Markdown(category.description, elem_id="margin-top")
        with gr.Column():
            [news_card(x) for x in category.news]
        # with gr.Tab(label="Hugging Face Projects"):
        #     gr.Markdown("....")
        #with gr.Tab(label="Spaces"):
        #    with gr.Row(elem_id="spaces-flex"):
       #         [space_card(x) for x in category.spaces]
       # with gr.Tab(label="Models - Coming Soon!"):
       #     gr.Markdown(elem_id="margin-top", value="#### Check back soon for featured models 🤗")
       # with gr.Tab(label="Datasets - Coming Soon!"):
       #     gr.Markdown(elem_id="margin-top", value="#### Check back soon for featured datasets 🤗")


with gr.Blocks(css="#margin-top {margin-top: 15px} #center {text-align: center;} #news-tab {padding: 15px;} #news-tab h3 {margin: 0px; text-align: center;} #news-tab p {margin: 0px;} #article-button {flex-grow: initial;} #news-row {align-items: center;} #spaces-flex {flex-wrap: wrap; justify-content: space-around;} #space-card { display: flex; min-width: calc(90% / 3); max-width:calc(100% / 3); box-sizing: border-box;} #event-tabs {margin-top: 0px;} #spaces-flex > #paper-tile {min-width: 30%; max-width: 30%;}") as demo:
    with gr.Row(elem_id="center"):
        gr.Markdown("# Hugging Face for Software Developers 🤗 💗 🧑‍💻")

    gr.Markdown("""
    At Hugging Face, we are committed to democratize cutting-edge of machine learning for everyone. This page is dedicated to highlighting tools, documentation and projects – inside and outside Hugging Face – tailored to get software developers build with machine learning. 
    """)

    with gr.Accordion(label="Events", open=False):
        with gr.Tab(label="Upcoming Events"):
            with gr.Row(elem_id="margin-top"):
                gr.Markdown("We'll be announcing more events soon!")

        with gr.Tab(label="Past Events"):
            with gr.Row(elem_id="margin-top"):
                with gr.Column(scale=1):
                    with gr.Tabs(elem_id="event-tabs"):
                        with gr.Tab("About the Event"):
                            gr.Markdown("""
    We have done a series of workshops for building, deploying and scaling models using AWS SageMaker.
    You can rewatch them [here](https://www.youtube.com/watch?v=pYqjCzoyWyo&ab_channel=HuggingFace).
    **Date:** October 26 2021  **Location:** YouTube
    """)

    with gr.Accordion(label="Visit us over on the Hugging Face Discord!", open=False):
        gr.Markdown("""
        Follow these steps to join the discussion:

        1. Go to [hf.co/join/discord](https://hf.co/join/discord) to join the Discord server.
        2. Once you've registered, go to the `#role-assignment` channel.
        3. Select the categories of your interest. Open Source ML is one that has different areas of machine learning. 
        """, elem_id="margin-top")

    gr.Markdown("""
    ### What can you achieve as a developer using Machine Learning? 

    Following are different categories of interests that include tools and documentation for software developers. 
    """)

    with gr.Column():
        [category_tab(x) for x in categories]

demo.launch()