app.py

from datetime import datetime

import gradio as gr

# Organization details
ORG_NAME = "Narrative I/O"
DESCRIPTION = """
Narrative I/O builds tools and infrastructure for data processing and ML model development:

* Data normalization and schema standardization
* LLM fine-tuning and deployment infrastructure
* Function calling and tool integration frameworks
* Open-source ML model and dataset publishing

Our platform focuses on solving practical data integration challenges through
standardized APIs, normalized schemas, and deployable ML models.
"""

# News/Announcements
ANNOUNCEMENTS = [
    {
        "date": "2025-01-07",
        "title": "🚀Narrative Model Studio Released",
        "content": (
            "Today we're making Narrative Model Studio available to the public. "
            "[Model Studio](https://www.narrative.io/products/model-studio) is a platform to make it "
            "easy for *anyone* to train a LLM. Model Studio builds on top of our best in class Data "
            "Collaboration Platform and Data Marketplace to allow users to source, normalize, and "
            "package data for training, with no technical expertise required. That data can then be "
            "used to fine-tune an LLM for enterprise specific use cases and further deployed to "
            "inference endpoints."
        ),
    },
    {
        "date": "2025-01-07",
        "title": "🔄 Rosetta Stone 2.0 Private Model Release",
        "content": (
            "Today we are releasing our [Rosetta Stone 2.0]("
            "https://www.narrative.io/products/rosetta-stone) Private Model. When we started "
            "Narrative we set out to make it easier for everyone to work with data. One of the "
            "biggest challenges we found users faced was the lack of a normalization layer across "
            "different data sources, both internally and externally. We built Rosetta Stone to "
            "tackle this problem by using AI to normalize data to a common ontology and syntax, "
            "and making that normalized data directly queryable. Rosetta Stone 2.0 builds on the "
            "first version by leveraging the latest LLM Models and fine tuning them to perform "
            "even better than the first version. This release also marks the first time that the "
            "model is available for users to host on their own infrastructure, further reducing "
            "governance and compliance burdens."
        ),
    },
    {
        "date": "2025-01-07",
        "title": "🎯 Public Function Calling Models + Dataset Released",
        "content": (
            "Today we're excited to announce the release of our specialized function calling models "
            "and accompanying dataset. We've launched both 3B and 8B parameter models (with a 70B "
            "version coming soon) that have been meticulously fine-tuned for function calling "
            "applications. These models are built on our newly created normalized function calling "
            "dataset, which standardizes the approach to tool use in LLMs. Our implementation adopts "
            "a more standardized JSON schema for function calls, coupled with token enforcement "
            "through our [LLM Tools](https://github.com/narrative-io/narrative-llm-tools) to ensure "
            "models consistently respond using available functions. This makes these models "
            "particularly well-suited for enterprise applications where LLMs operate as backend "
            "processors, making tool calls on users' behalf rather than generating direct responses "
            "(though user interaction is still possible through a dedicated respond_to_user tool)."
        ),
    },
    {
        "date": "2025-01-07",
        "title": "🛠️ Narrative LLM Tools Released",
        "content": (
            "Today, we're excited to announce the release of our [LLM Tools Github repository]("
            "https://github.com/narrative-io/narrative-llm-tools). Narrative LLM Tools are a "
            "collection of tools that make it easier to use LLMs trained in Narrative's Model "
            "Studio alongside HuggingFace's Inference Endpoints."
        ),
    },
]

# Public Models
# PUBLIC_MODELS = [
#     {
#         "name": "entity-matcher-v1",
#         "description": "High-performance entity matching model",
#         "link": "https://huggingface.co/Narrative-IO/entity-matcher-v1"
#     },
#     {
#         "name": "data-enrichment-v2",
#         "description": "Advanced data enrichment pipeline",
#         "link": "https://huggingface.co/Narrative-IO/data-enrichment-v2"
#     }
# ]

# Public Datasets
PUBLIC_DATASETS = [
    {
        "name": "narrative-function-calling-v1",
        "description": "Function calling dataset for LLM training and evaluation",
        "link": "https://huggingface.co/datasets/narrative-io/narrative-function-calling-v1",
    }
]

# Demo configurations
DEMOS = [
    {
        "title": "Coming Soon",
    },
]

# Custom CSS for styling
custom_css = """
body {
    background: #1438f5;
}

.container {
    gap: 1rem;
}

.card {
    border-radius: 10px;
    padding: 20px;
    background: #ffffff;  /* surface-a */
    box-shadow: 0 4px 6px rgba(3, 21, 83, 0.1);  /* text-color with opacity */
    margin-bottom: 1rem;
}
.main-card {
    background: linear-gradient(135deg, #ecf1f9 0%, #e0e4f5 100%);  /* surface-b to surface-c */
}

h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #031553;  /* text-color */
}

h2, strong, h3 {
    font-size: 16px;
    color: #415290;  /* text-color-secondary */
    margin-bottom: 15px;
}

p, span, li, em {
    font-size: 14px;
    color: #415290;  /* text-color-secondary */
    margin-bottom: 15px;
}

em {
    font-style: italic;
}

.news-item {
    padding: 10px 0;
    border-bottom: 1px solid #ced4da;  /* surface-d */
}
.news-date {
    font-size: 14px;
    color: #415290;  /* text-color-secondary */
}
.model-item, .dataset-item {
    padding: 10px;
    margin: 5px 0;
    background: #ecf1f9;  /* surface-b */
    border-radius: 5px;
}

.gr-button {
    background-color: #081662 !important;
    color: white !important;
}
"""


def format_date(date_str):
    date = datetime.strptime(date_str, "%Y-%m-%d")
    return date.strftime("%B %d, %Y")


def create_organization_page():
    """Creates the organization page with multiple cards and demos"""
    with gr.Blocks(css=custom_css) as interface:
        with gr.Row(elem_classes="container"):
            # Left section (2/3 width)
            with gr.Column(scale=2):
                # Main organization card
                with gr.Column(elem_classes="card main-card"):
                    gr.Markdown(f"# {ORG_NAME}", elem_classes="title")
                    gr.Markdown(DESCRIPTION)
                    with gr.Row():
                        gr.HTML(
                            """
                            <div style="display: flex; gap: 20px;">
                                <a href="https://narrative.io" target="_blank" class="icon-link">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
                                        viewBox="0 0 24 24" fill="#0922A6">
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 
                                        12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 
                                        1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8
                                        v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 
                                        2.08-.8 3.97-2.1 5.39z"/>
                                    </svg>
                                </a>
                                <a href="https://github.com/narrative-io" target="_blank" 
                                    class="icon-link">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
                                        viewBox="0 0 24 24" fill="#0922A6">
                                        <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23
                                        .66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91
                                        -.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09
                                        -.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71
                                        -.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33
                                        .85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 
                                        2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92
                                        .69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/>
                                    </svg>
                                </a>
                            </div>
                        """
                        )

                # News and Announcements
                with gr.Column(elem_classes="card"):
                    gr.Markdown("## Latest News & Announcements")
                    for announcement in ANNOUNCEMENTS:
                        with gr.Row(elem_classes="news-item"):
                            gr.Markdown(
                                f"""
                            **{announcement['title']}**
                            ### {format_date(announcement['date'])}
                            {announcement['content']}
                            """
                            )

                # Interactive Demos
                with gr.Column(elem_classes="card"):
                    gr.Markdown("## Interactive Demos")
                    gr.Markdown("Coming Soon")

            # Right section (1/3 width)
            with gr.Column(scale=1):
                # # Public Models card
                # with gr.Column(elem_classes="card"):
                #     gr.Markdown("## Public Models")
                #     for model in PUBLIC_MODELS:
                #         with gr.Row(elem_classes="model-item"):
                #             gr.Markdown(f"""
                #             **{model['name']}**
                #             {model['description']}
                #             [View Model]({model['link']})
                #             """)
                #     gr.Markdown(
                #         "[View All Models →](https://huggingface.co/collections/narrative-io/"
                #         "public-models-6777e756fe3748f33c403a31)",
                #         elem_classes="view-all-link"
                #     )

                # Public Datasets card
                with gr.Column(elem_classes="card"):
                    gr.Markdown("## Public Datasets")
                    for dataset in PUBLIC_DATASETS:
                        with gr.Row(elem_classes="dataset-item"):
                            gr.Markdown(
                                f"""
                            **{dataset['name']}**
                            {dataset['description']}
                            [View Dataset]({dataset['link']})
                            """
                            )
                    gr.Markdown(
                        "[View All Datasets →](https://huggingface.co/collections/narrative-io/"
                        "public-datasets-6777e72061a6437f5d3ce491)",
                        elem_classes="view-all-link",
                    )

    return interface


# Create and launch the interface
demo = create_organization_page()

# Launch the app
if __name__ == "__main__":
    demo.launch()