pages/Workflow & Model Overview.py

import streamlit as st

# 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)

# Main Title
st.markdown('<div class="main-title">ConvNeXT Image Classification</div>', unsafe_allow_html=True)

# Description
st.markdown("""
<div class="section">
    <p><strong>ConvNeXT</strong> is a state-of-the-art image classification model developed by Facebook. The model <strong>ConvNextForImageClassification</strong> can load ConvNeXT models that compete favorably with Transformers in terms of accuracy and scalability, achieving 87.8% ImageNet top-1 accuracy and outperforming Swin Transformers on COCO detection and ADE20K segmentation, while maintaining the simplicity and efficiency of standard ConvNets.</p>
    <p>This annotator is compatible with all the models trained/fine-tuned by using ConvNextForImageClassification for PyTorch or TFConvNextForImageClassification for TensorFlow models in Hugging Face.</p>
    <p>The model used in this demo is <code>image_classifier_convnext_tiny_224_local</code>, adapted from Hugging Face and curated for scalability and production-readiness using Spark NLP.</p>
</div>
""", unsafe_allow_html=True)

# Image Classification Overview
st.markdown('<div class="sub-title">What is Image Classification?</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <p><strong>Image Classification</strong> is a computer vision task where an algorithm is trained to recognize and classify objects within images. This process involves assigning a label or category to an image based on its visual content.</p>
    <h2>How It Works</h2>
    <p>Image classification typically involves the following steps:</p>
    <ul>
        <li><strong>Data Collection</strong>: Gather a dataset of labeled images.</li>
        <li><strong>Preprocessing</strong>: Normalize and resize images to prepare them for the model.</li>
        <li><strong>Model Training</strong>: Use a machine learning model, such as ConvNeXT, to learn patterns and features from the images.</li>
        <li><strong>Inference</strong>: Apply the trained model to new images to predict their labels.</li>
    </ul>
    <h2>Why Use Image Classification?</h2>
    <p>Image classification can automate and streamline many tasks, such as:</p>
    <ul>
        <li>Identifying objects in photos for content tagging.</li>
        <li>Enhancing search functionality by categorizing images.</li>
        <li>Supporting autonomous systems like self-driving cars.</li>
    </ul>
    <h2>Applications</h2>
    <p>Applications of image classification span across various industries:</p>
    <ul>
        <li><strong>Healthcare</strong>: Diagnosing diseases from medical images.</li>
        <li><strong>Retail</strong>: Sorting and tagging product images.</li>
        <li><strong>Security</strong>: Facial recognition for authentication.</li>
    </ul>
    <h2>Importance</h2>
    <p>Image classification is crucial because it enables machines to interpret visual data, which is essential for creating intelligent systems capable of understanding and interacting with the world in a more human-like manner.</p>
    <p>The <strong>ConvNeXT</strong> model used in this example is a state-of-the-art approach for image classification, offering advanced performance and scalability. It utilizes convolutional architecture to capture intricate patterns and relationships within images, enhancing classification accuracy and efficiency.</p>
</div>
""", unsafe_allow_html=True)

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

# Load image data
imageDF = spark.read \\
    .format("image") \\
    .option("dropInvalid", value = True) \\
    .load("src/test/resources/image/")

# Define Image Assembler
imageAssembler = ImageAssembler() \\
    .setInputCol("image") \\
    .setOutputCol("image_assembler")

# Define ConvNeXT classifier
imageClassifier = ConvNextForImageClassification \\
    .pretrained("image_classifier_convnext_tiny_224_local", "en") \\
    .setInputCols(["image_assembler"]) \\
    .setOutputCol("class")

# Create pipeline
pipeline = Pipeline().setStages([imageAssembler, imageClassifier])

# Apply pipeline to image data
pipelineDF = pipeline.fit(imageDF).transform(imageDF)

# Show results
pipelineDF \\
  .selectExpr("reverse(split(image.origin, '/'))[0] as image_name", "class.result") \\
  .show(truncate=False)
''', language='python')

# Results
st.markdown('<div class="sub-title">Results</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <table class="benchmark-table">
        <tr>
            <th>Image Name</th>
            <th>Result</th>
        </tr>
        <tr>
            <td>dog.JPEG</td>
            <td>[whippet]</td>
        </tr>
        <tr>
            <td>cat.JPEG</td>
            <td>[Siamese]</td>
        </tr>
        <tr>
            <td>bird.JPEG</td>
            <td>[peacock]</td>
        </tr>
    </table>
</div>
""", unsafe_allow_html=True)

# Model Information
st.markdown('<div class="sub-title">Model Information</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <table class="benchmark-table">
        <tr>
            <th>Attribute</th>
            <th>Description</th>
        </tr>
        <tr>
            <td><strong>Model Name</strong></td>
            <td>image_classifier_convnext_tiny_224_local</td>
        </tr>
        <tr>
            <td><strong>Compatibility</strong></td>
            <td>Spark NLP 5.0.0+</td>
        </tr>
        <tr>
            <td><strong>License</strong></td>
            <td>Open Source</td>
        </tr>
        <tr>
            <td><strong>Edition</strong></td>
            <td>Official</td>
        </tr>
        <tr>
            <td><strong>Input Labels</strong></td>
            <td>[image_assembler]</td>
        </tr>
        <tr>
            <td><strong>Output Labels</strong></td>
            <td>[class]</td>
        </tr>
        <tr>
            <td><strong>Language</strong></td>
            <td>en</td>
        </tr>
        <tr>
            <td><strong>Size</strong></td>
            <td>107.6 MB</td>
        </tr>
    </table>
</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">
    <ul>
        <li>turnstile</li>
        <li>damselfly</li>
        <li>mixing bowl</li>
        <li>sea snake</li>
        <li>cockroach</li>
        <li>...and many more</li>
    </ul>
</div>
""", unsafe_allow_html=True)

# Data Source Section
st.markdown('<div class="sub-title">Data Source</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <p>The ConvNeXT model is available on <a class="link" href="https://huggingface.co/models" target="_blank">Hugging Face</a>. This model was trained on a large dataset of images and can be used for accurate image classification.</p>
</div>
""", unsafe_allow_html=True)

# References
st.markdown('<div class="sub-title">References</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <ul>
        <li><a class="link" href="https://sparknlp.org/2023/07/05/image_classifier_convnext_tiny_224_local_en.html" target="_blank" rel="noopener">ConvNeXT Model on Spark NLP</a></li>
        <li><a class="link" href="https://huggingface.co/facebook/convnext-tiny-224" target="_blank" rel="noopener">ConvNeXT Model on Hugging Face</a></li>
        <li><a class="link" href="https://github.com/facebookresearch/ConvNeXT" target="_blank" rel="noopener">ConvNeXT GitHub Repository</a></li>
        <li><a class="link" href="https://arxiv.org/abs/2201.03545" target="_blank" rel="noopener">ConvNeXT Paper</a></li>
    </ul>
</div>
""", unsafe_allow_html=True)

# Community & Support
st.markdown('<div class="sub-title">Community & Support</div>', unsafe_allow_html=True)
st.markdown("""
<div class="section">
    <ul>
        <li><a class="link" href="https://sparknlp.org/" target="_blank">Official Website</a>: Documentation and examples</li>
        <li><a class="link" href="https://join.slack.com/t/spark-nlp/shared_invite/zt-198dipu77-L3UWNe_AJ8xqDk0ivmih5Q" target="_blank">Slack</a>: Live discussion with the community and team</li>
        <li><a class="link" href="https://github.com/JohnSnowLabs/spark-nlp" target="_blank">GitHub</a>: Bug reports, feature requests, and contributions</li>
        <li><a class="link" href="https://medium.com/spark-nlp" target="_blank">Medium</a>: Spark NLP articles</li>
        <li><a class="link" href="https://www.youtube.com/channel/UCmFOjlpYEhxf_wJUDuz6xxQ/videos" target="_blank">YouTube</a>: Video tutorials</li>
    </ul>
</div>
""", unsafe_allow_html=True)