import streamlit as st

# Page configuration
st.set_page_config(
    layout="wide", 
    initial_sidebar_state="auto"
)

# Custom CSS for better styling
st.markdown("""
    <style>
        .main-title {
            font-size: 36px;
            color: #4A90E2;
            font-weight: bold;
            text-align: center;
        }
        .sub-title {
            font-size: 24px;
            color: #4A90E2;
            margin-top: 20px;
        }
        .section {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
        }
        .section h2 {
            font-size: 22px;
            color: #4A90E2;
        }
        .section p, .section ul {
            color: #666666;
        }
        .link {
            color: #4A90E2;
            text-decoration: none;
        }
        .benchmark-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .benchmark-table th, .benchmark-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .benchmark-table th {
            background-color: #4A90E2;
            color: white;
        }
        .benchmark-table td {
            background-color: #f2f2f2;
        }
    </style>
""", unsafe_allow_html=True)

# Title
st.markdown('<div class="main-title">Introduction to DistilBERT Annotators in Spark NLP</div>', unsafe_allow_html=True)

# Subtitle
st.markdown("""
<div class="section">
    <p>Spark NLP provides a range of DistilBERT-based annotators designed for various natural language processing tasks. DistilBERT offers a more efficient and lightweight alternative to the original BERT model while maintaining competitive performance. Below, we provide an overview of the four key DistilBERT annotators:</p>
</div>
""", unsafe_allow_html=True)

tab1, tab2, tab3, tab4 = st.tabs(["DistilBERT for Token Classification", "DistilBERT for Zero-Shot Classification", "DistilBERT for Sequence Classification", "DistilBERT for Question Answering"])

with tab1:
    st.markdown("""
    <div class="section">
        <h2>DistilBERT for Token Classification</h2>
        <p>The <strong>DistilBertForTokenClassification</strong> annotator is designed for Named Entity Recognition (NER) tasks using DistilBERT, a smaller and faster variant of BERT. This model efficiently handles token classification, which involves labeling tokens in a text with tags that correspond to specific entities. The DistilBERT model retains 97% of BERT's language understanding while being lighter and faster, making it suitable for real-time applications.</p>
        <p>Token classification with DistilBERT enables:</p>
        <ul>
            <li><strong>Named Entity Recognition (NER):</strong> Identifying and classifying entities such as names, organizations, locations, and other predefined categories.</li>
            <li><strong>Information Extraction:</strong> Extracting key information from unstructured text for further analysis.</li>
            <li><strong>Text Categorization:</strong> Enhancing document retrieval and categorization based on entity recognition.</li>
        </ul>
        <p>Here is an example of how DistilBERT token classification works:</p>
        <table class="benchmark-table">
            <tr>
                <th>Entity</th>
                <th>Label</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>ORG</td>
            </tr>
            <tr>
                <td>Steve Jobs</td>
                <td>PER</td>
            </tr>
            <tr>
                <td>California</td>
                <td>LOC</td>
            </tr>
        </table>
    </div>
    """, unsafe_allow_html=True)

    # DistilBERT Token Classification - NER CoNLL
    st.markdown('<div class="sub-title">DistilBERT Token Classification - NER CoNLL</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <p>The <strong>distilbert_base_token_classifier_conll03</strong> is a fine-tuned DistilBERT model for token classification tasks, specifically adapted for Named Entity Recognition (NER) on the CoNLL-03 dataset. It is designed to recognize four types of entities: location (LOC), organizations (ORG), person (PER), and Miscellaneous (MISC).</p>
    </div>
    """, unsafe_allow_html=True)

    # How to Use the Model - Token Classification
    st.markdown('<div class="sub-title">How to Use the Model</div>', unsafe_allow_html=True)
    st.code('''
    from sparknlp.base import *
    from sparknlp.annotator import *
    from pyspark.ml import Pipeline
    from pyspark.sql.functions import col, expr

    document_assembler = DocumentAssembler() \\
        .setInputCol('text') \\
        .setOutputCol('document')

    tokenizer = Tokenizer() \\
        .setInputCols(['document']) \\
        .setOutputCol('token')

    tokenClassifier = DistilBertForTokenClassification \\
        .pretrained('distilbert_base_token_classifier_conll03', 'en') \\
        .setInputCols(['token', 'document']) \\
        .setOutputCol('ner') \\
        .setCaseSensitive(True) \\
        .setMaxSentenceLength(512)

    # Convert NER labels to entities
    ner_converter = NerConverter() \\
        .setInputCols(['document', 'token', 'ner']) \\
        .setOutputCol('entities')

    pipeline = Pipeline(stages=[
        document_assembler,
        tokenizer,
        tokenClassifier,
        ner_converter
    ])

    example = spark.createDataFrame([["""Apple Inc. is planning to open a new headquarters in Cupertino, California. The CEO, Tim Cook, announced this during the company's annual event on March 25th, 2023. Barack Obama, the 44th President of the United States, was born on August 4th, 1961, in Honolulu, Hawaii. He attended Harvard Law School and later became a community organizer in Chicago. Amazon reported a net revenue of $125.6 billion in Q4 of 2022, an increase of 9% compared to the previous year. Jeff Bezos, the founder of Amazon, mentioned that the company's growth in cloud computing has significantly contributed to this rise. Paris, the capital city of France, is renowned for its art, fashion, and culture. Key attractions include the Eiffel Tower, the Louvre Museum, and the Notre-Dame Cathedral. Visitors often enjoy a stroll along the Seine River and dining at local bistros. The study, conducted at the Mayo Clinic in Rochester, Minnesota, examined the effects of a new drug on patients with Type 2 diabetes. Results showed a significant reduction in blood sugar levels over a 12-month period. Serena Williams won her 24th Grand Slam title at the Wimbledon Championships in London, England. She defeated Naomi Osaka in a thrilling final match on July 13th, 2023. Google's latest smartphone, the Pixel 6, was unveiled at an event in New York City. Sundar Pichai, the CEO of Google, highlighted the phone's advanced AI capabilities and improved camera features. The Declaration of Independence was signed on July 4th, 1776, in Philadelphia, Pennsylvania. Thomas Jefferson, Benjamin Franklin, and John Adams were among the key figures who drafted this historic document."""]]).toDF("text")
    result = pipeline.fit(example).transform(example)

    result.select(
        expr("explode(entities) as ner_chunk")
    ).select(
        col("ner_chunk.result").alias("chunk"),
        col("ner_chunk.metadata.entity").alias("ner_label")
    ).show(truncate=False)
    ''', language='python')

    # Results
    st.text("""
    +--------------------+---------+
    |chunk               |ner_label|
    +--------------------+---------+
    |Apple Inc.          |ORG      |
    |Cupertino           |LOC      |
    |California          |LOC      |
    |Tim Cook            |PER      |
    |Barack Obama        |PER      |
    |President           |MISC     |
    |United States       |LOC      |
    |Honolulu            |LOC      |
    |Hawaii              |LOC      |
    |Harvard Law School  |ORG      |
    |Chicago             |LOC      |
    |Amazon              |ORG      |
    |Jeff Bezos          |PER      |
    |Amazon              |ORG      |
    |Paris               |LOC      |
    |France              |LOC      |
    |Eiffel Tower        |LOC      |
    |Louvre Museum       |LOC      |
    |Notre-Dame Cathedral|LOC      |
    |Seine River         |LOC      |
    +--------------------+---------+
    only showing top 20 rows
        """)

    # Performance Metrics
    st.markdown('<div class="sub-title">Performance Metrics</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <p>Here are the detailed performance metrics for the DistilBERT token classification model:</p>
        <table class="benchmark-table">
            <tr>
                <th>Entity</th>
                <th>Precision</th>
                <th>Recall</th>
                <th>F1-Score</th>
                <th>Support</th>
            </tr>
            <tr>
                <td>B-LOC</td>
                <td>0.93</td>
                <td>0.85</td>
                <td>0.89</td>
                <td>1668</td>
            </tr>
            <tr>
                <td>B-MISC</td>
                <td>0.77</td>
                <td>0.78</td>
                <td>0.78</td>
                <td>702</td>
            </tr>
            <tr>
                <td>B-ORG</td>
                <td>0.81</td>
                <td>0.89</td>
                <td>0.85</td>
                <td>1661</td>
            </tr>
            <tr>
                <td>B-PER</td>
                <td>0.95</td>
                <td>0.93</td>
                <td>0.94</td>
                <td>1617</td>
            </tr>
            <tr>
                <td>I-LOC</td>
                <td>0.80</td>
                <td>0.76</td>
                <td>0.78</td>
                <td>257</td>
            </tr>
            <tr>
                <td>I-MISC</td>
                <td>0.60</td>
                <td>0.69</td>
                <td>0.64</td>
                <td>216</td>
            </tr>
            <tr>
                <td>I-ORG</td>
                <td>0.80</td>
                <td>0.92</td>
                <td>0.86</td>
                <td>835</td>
            </tr>
            <tr>
                <td>I-PER</td>
                <td>0.98</td>
                <td>0.98</td>
                <td>0.98</td>
                <td>1156</td>
            </tr>
            <tr>
                <td>O</td>
                <td>0.99</td>
                <td>0.99</td>
                <td>0.99</td>
                <td>38323</td>
            </tr>
            <tr>
                <td>Overall</td>
                <td>0.97</td>
                <td>0.97</td>
                <td>0.97</td>
                <td>46435</td>
            </tr>
        </table>
        <p>Additional metrics:</p>
        <ul>
            <li><strong>Accuracy (non-O):</strong> 88.52%</li>
            <li><strong>Accuracy:</strong> 97.24%</li>
            <li><strong>Precision:</strong> 84.77%</li>
            <li><strong>Recall:</strong> 86.12%</li>
            <li><strong>F1-Score:</strong> 85.44</li>
        </ul>
        <p>Detailed breakdown for each category:</p>
        <ul>
            <li><strong>LOC:</strong> Precision: 91.36%, Recall: 84.29%, F1-Score: 87.68</li>
            <li><strong>MISC:</strong> Precision: 70.60%, Recall: 75.93%, F1-Score: 73.16</li>
            <li><strong>ORG:</strong> Precision: 77.29%, Recall: 86.27%, F1-Score: 81.54</li>
            <li><strong>PER:</strong> Precision: 93.84%, Recall: 92.27%, F1-Score: 93.05</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

    # Model Information - Token Classification
    st.markdown('<div class="sub-title">Model Information</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><strong>Model Name:</strong> distilbert_base_token_classifier_conll03</li>
            <li><strong>Compatibility:</strong> Spark NLP 3.2.0+</li>
            <li><strong>License:</strong> Open Source</li>
            <li><strong>Edition:</strong> Official</li>
            <li><strong>Input Labels:</strong> [token, document]</li>
            <li><strong>Output Labels:</strong> [ner]</li>
            <li><strong>Language:</strong> English</li>
            <li><strong>Size:</strong> 252 MB</li>
            <li><strong>Case Sensitive:</strong> Yes</li>
            <li><strong>Max Sentence Length:</strong> 512</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

    # References - Token Classification
    st.markdown('<div class="sub-title">References</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><a class="link" href="https://nlp.johnsnowlabs.com/models/distilbert-base-token-classifier-conll03" target="_blank" rel="noopener">DistilBERT Token Classification on Spark NLP Hub</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1910.01108" target="_blank" rel="noopener">DistilBERT: A Distilled Version of BERT</a></li>
            <li><a class="link" href="https://huggingface.co/bert-base-uncased" target="_blank" rel="noopener">Hugging Face DistilBERT Models</a></li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

with tab2:
    st.markdown("""
    <div class="section">
        <h2>DistilBERT for Zero-Shot Text Classification</h2>
        <p>The <strong>DistilBertForZeroShotClassification</strong> annotator offers cutting-edge capabilities for zero-shot text classification, particularly tailored for English. This model utilizes the principles of natural language inference (NLI) to predict labels for text that it has not been explicitly trained on. This adaptability is invaluable for scenarios where predefined labels are either unavailable or may evolve over time.</p>
        <p><strong>Key Applications:</strong></p>
        <ul>
            <li><strong>Dynamic Content Tagging:</strong> Automatically categorize content without relying on a predefined set of labels, making it ideal for rapidly changing or expanding datasets.</li>
            <li><strong>Sentiment and Topic Analysis:</strong> Evaluate sentiment and categorize topics on emerging trends or new content without needing to retrain the model, ensuring up-to-date analysis.</li>
            <li><strong>Contextual Understanding:</strong> Adapt the model to understand and classify content based on current events, niche topics, or specialized domains.</li>
        </ul>
        <p>This annotator is fine-tuned using the <strong>DistilBERT Base Uncased</strong> model, offering a balance between efficiency and scalability. Its zero-shot classification capability makes it an excellent choice for dynamic environments where data and categories are constantly evolving.</p>
        <table class="benchmark-table">
            <tr>
                <th>Text</th>
                <th>Predicted Category</th>
            </tr>
            <tr>
                <td>"I have a problem with my iPhone that needs to be resolved asap!!"</td>
                <td>Urgent</td>
            </tr>
            <tr>
                <td>"The weather today is perfect for a hike in the mountains."</td>
                <td>Weather</td>
            </tr>
            <tr>
                <td>"I just watched an amazing documentary about space exploration."</td>
                <td>Movie</td>
            </tr>
        </table>
    </div>
    """, unsafe_allow_html=True)

    # DistilBERT Zero-Shot Classification Base - MNLI
    st.markdown('<div class="sub-title">DistilBERT Zero-Shot Classification - MNLI Base</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <p>The <strong>distilbert_base_zero_shot_classifier_uncased_mnli</strong> model is fine-tuned on the MNLI (Multi-Genre Natural Language Inference) dataset, which is well-suited for zero-shot classification tasks. Built on the DistilBERT Base Uncased architecture, this model offers the flexibility to define and apply new labels at runtime, making it adaptable to a wide range of applications without the need for retraining.</p>
        <p><strong>Model Highlights:</strong></p>
        <ul>
            <li><strong>Runtime Label Definition:</strong> Unlike traditional models that require a fixed set of labels, this model allows users to specify candidate labels during inference, enabling real-time adaptation.</li>
            <li><strong>Scalability:</strong> Optimized for performance in production environments, providing fast and scalable text classification.</li>
            <li><strong>Fine-Tuning:</strong> Based on the robust MNLI dataset, ensuring high accuracy across various text genres and contexts.</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

    # How to Use the Model - Zero-Shot Classification
    st.markdown('<div class="sub-title">How to Use the Model</div>', unsafe_allow_html=True)
    st.code('''
    from sparknlp.base import *
    from sparknlp.annotator import *
    from pyspark.ml import Pipeline

    # Document Assembler
    document_assembler = DocumentAssembler() \\
        .setInputCol('text') \\
        .setOutputCol('document')

    # Tokenizer
    tokenizer = Tokenizer() \\
        .setInputCols(['document']) \\
        .setOutputCol('token')

    # Zero-Shot Classifier
    zeroShotClassifier = DistilBertForZeroShotClassification \\
        .pretrained('distilbert_base_zero_shot_classifier_uncased_mnli', 'en') \\
        .setInputCols(['token', 'document']) \\
        .setOutputCol('class') \\
        .setCaseSensitive(True) \\
        .setMaxSentenceLength(512) \\
        .setCandidateLabels(["urgent", "mobile", "travel", "movie", "music", "sport", "weather", "technology"])

    # Pipeline Setup
    pipeline = Pipeline(stages=[document_assembler, tokenizer, zeroShotClassifier])

    # Sample Data for Testing
    example = spark.createDataFrame([['I have a problem with my iPhone that needs to be resolved asap!!']]).toDF("text")

    # Run the Pipeline
    result = pipeline.fit(example).transform(example)

    # Show Results
    result.select('document.result', 'class.result').show(truncate=False)
    ''', language='python')

    st.text("""
    +------------------------------------------------------------------+-------+
    |result                                                            |result |
    +------------------------------------------------------------------+-------+
    |[I have a problem with my iPhone that needs to be resolved asap!!]|[music]|
    +------------------------------------------------------------------+-------+
    """)

    # Model Information - Zero-Shot Classification
    st.markdown('<div class="sub-title">Model Information</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><strong>Model Name:</strong> distilbert_base_zero_shot_classifier_uncased_mnli</li>
            <li><strong>Compatibility:</strong> Spark NLP 4.4.1+</li>
            <li><strong>License:</strong> Open Source</li>
            <li><strong>Edition:</strong> Official</li>
            <li><strong>Input Labels:</strong> [token, document]</li>
            <li><strong>Output Labels:</strong> [multi_class]</li>
            <li><strong>Language:</strong> English (en)</li>
            <li><strong>Model Size:</strong> 249.7 MB</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

    # References and Further Reading - Zero-Shot Classification
    st.markdown('<div class="sub-title">References and Further Reading</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><a class="link" href="https://github.com/google-research/bert" target="_blank" rel="noopener">Google Research BERT</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1810.04805" target="_blank" rel="noopener">BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding</a></li>
            <li><a class="link" href="https://huggingface.co/bert-base-uncased" target="_blank" rel="noopener">Hugging Face BERT Models</a></li>
            <li><a class="link" href="https://arxiv.org/abs/2006.09755" target="_blank" rel="noopener">DistilBERT: A Smaller, Faster, Cheaper, and Lighter BERT</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1704.05426" target="_blank" rel="noopener">Natural Language Inference with Deep Learning</a></li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

with tab3:
    st.markdown("""
    <div class="section">
        <h2>DistilBERT for Emotion Detection and Sequence Classification</h2>
        <p>The <strong>DistilBertForSequenceClassification</strong> annotator leverages a fine-tuned version of the DistilBERT model, specifically trained to classify text sequences into predefined categories. This model, <strong>distilbert_base_uncased_finetuned_emotion_yoahqiu</strong>, is designed for emotion detection in English text, making it a powerful tool for analyzing the emotional tone in various types of content.</p>
        <p>This model was originally developed by <strong>yoahqiu</strong> and adapted from Hugging Face for production environments using Spark NLP. It offers a lightweight yet efficient alternative to BERT, maintaining strong performance while being optimized for faster inference.</p>
        <p><strong>Applications:</strong></p>
        <ul>
            <li><strong>Emotion Detection:</strong> Automatically identifies and categorizes emotions such as joy, sadness, anger, and surprise from textual data.</li>
            <li><strong>Sentiment Analysis:</strong> Determines the overall sentiment (positive, negative, or neutral) expressed in the text, making it useful for customer feedback analysis, social media monitoring, and more.</li>
            <li><strong>Content Personalization:</strong> Enhances user experiences by tailoring content based on detected emotions, improving engagement and satisfaction.</li>
            <li><strong>Market Research:</strong> Analyzes consumer sentiment and emotional responses to products, services, and campaigns.</li>
        </ul>
        <p>By incorporating this model into your text analytics workflow, you can unlock deeper insights into customer emotions and sentiments, enabling more informed decision-making and more effective communication strategies.</p>
    </div>
    """, unsafe_allow_html=True)

    # How to Use the Model - Sequence Classification
    st.markdown('<div class="sub-title">How to Use the Model</div>', unsafe_allow_html=True)
    st.code('''
    from sparknlp.base import *
    from sparknlp.annotator import *
    from pyspark.ml import Pipeline

    # Document Assembler
    document_assembler = DocumentAssembler() \\
        .setInputCol("text") \\
        .setOutputCol("document")

    # Tokenizer
    tokenizer = Tokenizer() \\
        .setInputCols(["document"]) \\
        .setOutputCol("token")

    # Sequence Classifier
    sequenceClassifier = DistilBertForSequenceClassification.pretrained("distilbert_base_uncased_finetuned_emotion_yoahqiu", "en") \\
        .setInputCols(["document", "token"]) \\
        .setOutputCol("class")

    # Pipeline
    pipeline = Pipeline().setStages([document_assembler, tokenizer, sequenceClassifier])

    # Apply the Pipeline
    result = pipeline.fit(data).transform(data)

    # Show the Result
    result.select("document.result", "class.result").show(truncate=False)
    ''', language='python')

    st.text("""
    +------------------------------------------------------------------------------------------------------------------+------+
    |result                                                                                                            |result|
    +------------------------------------------------------------------------------------------------------------------+------+
    |[I had a fantastic day at the park with my friends and family, enjoying the beautiful weather and fun activities.]|[joy] |
    +------------------------------------------------------------------------------------------------------------------+------+
    """)

    # Model Information - Sequence Classification
    st.markdown('<div class="sub-title">Model Information</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><strong>Model Name:</strong> distilbert_base_uncased_finetuned_emotion_yoahqiu</li>
            <li><strong>Compatibility:</strong> Spark NLP 5.2.2+</li>
            <li><strong>License:</strong> Open Source</li>
            <li><strong>Edition:</strong> Official</li>
            <li><strong>Input Labels:</strong> [documents, token]</li>
            <li><strong>Output Labels:</strong> [class]</li>
            <li><strong>Language:</strong> English (en)</li>
            <li><strong>Model Size:</strong> 249.5 MB</li>
            <li><strong>Training Data:</strong> Fine-tuned on a dataset labeled for various emotions, ensuring robust performance across diverse text inputs.</li>
            <li><strong>Use Case Examples:</strong> Sentiment analysis for product reviews, emotional tone detection in social media posts, and more.</li>
            <li><strong>Case Sensitivity:</strong> The model is case insensitive, allowing it to handle various text formats effectively.</li>
            <li><strong>Max Sentence Length:</strong> Capable of processing sequences up to 512 tokens in length, covering most typical use cases.</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

    # References and Further Reading
    st.markdown('<div class="sub-title">References and Further Reading</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><a class="link" href="https://huggingface.co/yoahqiu/distilbert-base-uncased-finetuned-emotion" target="_blank">Hugging Face: distilbert_base_uncased_finetuned_emotion_yoahqiu</a></li>
            <li><a class="link" href="https://sparknlp.org/" target="_blank">Spark NLP Documentation</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1910.01108" target="_blank">DistilBERT: A distilled version of BERT</a></li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

with tab4:
    st.markdown("""
    <div class="section">
        <h2>DistilBERT for Question Answering</h2>
        <p>The <strong>DistilBertForQuestionAnswering</strong> model is a state-of-the-art tool for extracting precise answers from text passages based on a given question. This model, based on the <strong>distilbert-base-cased-distilled-squad</strong> architecture, was originally developed by Hugging Face and is fine-tuned for high performance and scalability using Spark NLP.</p>
        <p>This model is highly effective for:</p>
        <ul>
            <li><strong>Information Extraction:</strong> Identifying exact spans of text that answer specific questions.</li>
            <li><strong>Automated Customer Support:</strong> Enhancing chatbots and support systems by accurately retrieving information from documents.</li>
            <li><strong>Educational Tools:</strong> Assisting in creating intelligent systems that can answer questions based on educational materials.</li>
        </ul>
        <p>Its capabilities make it an essential tool for applications requiring precise information retrieval from large corpora of text.</p>
    </div>
    """, unsafe_allow_html=True)

    # Predicted Entities
    st.markdown('<div class="sub-title">Predicted Entities</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <p>The model provides answers by identifying the relevant span of text in the context that best responds to the provided question.</p>
        <table class="benchmark-table">
            <tr>
                <th>Question</th>
                <th>Context</th>
                <th>Predicted Answer</th>
            </tr>
            <tr>
                <td>What is my name?</td>
                <td>My name is Clara and I live in Berkeley.</td>
                <td>Clara</td>
            </tr>
            <tr>
                <td>Where do I live?</td>
                <td>My name is Clara and I live in Berkeley.</td>
                <td>Berkeley</td>
            </tr>
            <tr>
                <td>What is the capital of France?</td>
                <td>The capital of France is Paris, a beautiful city known for its culture and landmarks.</td>
                <td>Paris</td>
            </tr>
        </table>
    </div>
    """, unsafe_allow_html=True)

    # How to Use the Model - Question Answering
    st.markdown('<div class="sub-title">How to Use the Model</div>', unsafe_allow_html=True)
    st.code('''
    from sparknlp.base import *
    from sparknlp.annotator import *
    from pyspark.ml import Pipeline

    # Document Assembler for Questions and Contexts
    documentAssembler = MultiDocumentAssembler() \\
        .setInputCols(["question", "context"]) \\
        .setOutputCols(["document_question", "document_context"])

    # DistilBERT Question Answering Model
    spanClassifier = DistilBertForQuestionAnswering.pretrained("distilbert_base_cased_qa_squad2", "en") \\
        .setInputCols(["document_question", "document_context"]) \\
        .setOutputCol("answer") \\
        .setCaseSensitive(True)

    # Building the Pipeline
    pipeline = Pipeline(stages=[documentAssembler, spanClassifier])

    # Sample Data
    data = spark.createDataFrame([["What is my name?", "My name is Clara and I live in Berkeley."]]).toDF("question", "context")

    # Applying the Pipeline
    result = pipeline.fit(data).transform(data)

    # Showing Results
    result.select('document_question.result', 'document_context.result', 'answer.result').show(truncate=False)
    ''', language='python')

    st.text("""
    +------------------+------------------------------------------+-------+
    |result            |result                                    |result |
    +------------------+------------------------------------------+-------+
    |[What is my name?]|[My name is Clara and I live in Berkeley.]|[Clara]|
    +------------------+------------------------------------------+-------+
    """)

    # Model Information - Question Answering
    st.markdown('<div class="sub-title">Model Information</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><strong>Model Name:</strong> distilbert_base_cased_qa_squad2</li>
            <li><strong>Compatibility:</strong> Spark NLP 5.2.0+</li>
            <li><strong>License:</strong> Open Source</li>
            <li><strong>Edition:</strong> Official</li>
            <li><strong>Input Labels:</strong> [document_question, document_context]</li>
            <li><strong>Output Labels:</strong> [answer]</li>
            <li><strong>Language:</strong> English (en)</li>
            <li><strong>Model Size:</strong> 243.8 MB</li>
         </ul>
    </div>
    """, unsafe_allow_html=True)

    # References and Further Reading - Question Answering
    st.markdown('<div class="sub-title">References and Further Reading</div>', unsafe_allow_html=True)
    st.markdown("""
    <div class="section">
        <ul>
            <li><a class="link" href="https://huggingface.co/distilbert-base-cased-distilled-squad" target="_blank" rel="noopener">Hugging Face DistilBERT SQuAD Model</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1910.01108" target="_blank" rel="noopener">DistilBERT: A Smaller, Faster, Cheaper, and Lighter BERT</a></li>
            <li><a class="link" href="https://github.com/google-research/bert" target="_blank" rel="noopener">Google Research BERT</a></li>
            <li><a class="link" href="https://arxiv.org/abs/1606.05250" target="_blank" rel="noopener">The Stanford Question Answering Dataset (SQuAD)</a></li>
        </ul>
    </div>
    """, unsafe_allow_html=True)