app.py

import streamlit as st
import pandas as pd
import subprocess
import time
import random
import streamlit.components.v1 as components

# ---------------------------- Helper Function for NER Data ----------------------------

def generate_ner_data():
    # Sample NER data for different entities
    data_person = [{"text": f"Person example {i}", "entities": [{"entity": "Person", "value": f"Person {i}"}]} for i in range(1, 21)]
    data_organization = [{"text": f"Organization example {i}", "entities": [{"entity": "Organization", "value": f"Organization {i}"}]} for i in range(1, 21)]
    data_location = [{"text": f"Location example {i}", "entities": [{"entity": "Location", "value": f"Location {i}"}]} for i in range(1, 21)]
    data_date = [{"text": f"Date example {i}", "entities": [{"entity": "Date", "value": f"Date {i}"}]} for i in range(1, 21)]
    data_product = [{"text": f"Product example {i}", "entities": [{"entity": "Product", "value": f"Product {i}"}]} for i in range(1, 21)]
    
    # Create a dictionary of all NER examples
    ner_data = {
        "Person": data_person,
        "Organization": data_organization,
        "Location": data_location,
        "Date": data_date,
        "Product": data_product
    }
    
    return ner_data

# ---------------------------- Fun NER Data Function ----------------------------

def ner_demo():
    st.header("🤖 LLM NER Model Demo 🕵️‍♀️")
    
    # Generate NER data
    ner_data = generate_ner_data()

    # Pick a random entity type to display
    entity_type = random.choice(list(ner_data.keys()))
    st.subheader(f"Here comes the {entity_type} entity recognition, ready to show its magic! 🎩✨")

    # Select a random record to display
    example = random.choice(ner_data[entity_type])
    st.write(f"Analyzing: *{example['text']}*")
    
    # Display recognized entity
    for entity in example["entities"]:
        st.success(f"🔍 Found a {entity['entity']}: **{entity['value']}**")
    
    # A bit of rhyme to lighten up the task
    st.write("There once was an AI so bright, 🎇")
    st.write("It could spot any name in sight, 👁️")
    st.write("With a click or a tap, it put on its cap, 🎩")
    st.write("And found entities day or night! 🌙")

# ---------------------------- Header and Introduction ----------------------------

st.set_page_config(page_title="LLMs for Cyber Security", page_icon="🔒", layout="wide", initial_sidebar_state="expanded")
st.title("🔒📊 LLMs for Cyber Security: State-of-the-Art Surveys📊🔒")
st.markdown("This app is based on the paper: [Large Language Models for Cyber Security](https://arxiv.org/pdf/2405.04760v3). It showcases LLMs in the cybersecurity landscape, summarizing key surveys and insights.")
st.markdown('🔒📊 https://arxiv.org/abs/2405.04760v3')
st.markdown("---")

# ---------------------------- Call NER Demo ----------------------------

if st.button('🧪 Run NER Model Demo'):
    ner_demo()
else:
    st.write("Click the button above to start the AI NER magic! 🎩✨")

# ---------------------------- Data Preparation ----------------------------

data = {
    "Reference": ["Motlagh et al.", "Divakaran et al.", "Yao et al.", "Yigit et al.", "Coelho et al.", "Novelli et al.", "LLM4Security"],
    "Year": [2024, 2024, 2023, 2024, 2024, 2024, 2024],
    "Scope": ["Security application", "Security application", "Security application, Security of LLM", "Security application, Security of LLM", "Security application", "Security application", "Security application"],
    "Dimensions": ["Task", "Task", "Model, Task", "Task", "Task, Domain specific technique", "Task, Model, Domain specific technique", "Model, Task, Domain specific technique, Data"],
    "Time frame": ["2022-2023", "2020-2024", "2019-2024", "2020-2024", "2021-2023", "2020-2024", "2020-2024"],
    "Papers": ["Not specified", "Not specified", 281, "Not specified", 19, "Not specified", 127]
}
df = pd.DataFrame(data)

# ---------------------------- Display Data Table ----------------------------

st.subheader("📊 Survey Overview Table")
st.dataframe(df, height=300)
st.markdown("---")

# ---------------------------- Mermaid Diagram Visualization ----------------------------

st.subheader("🛡️ Security Model Visualization with Mermaid")

mermaid_code = '''
graph TD;
    A[LLMs in Security] --> B[Security Application]
    B --> C[Task]
    B --> D[Model]
    D --> E[Domain-Specific Techniques]
    E --> F[Data]
'''

# HTML component for Mermaid diagram
mermaid_html = f"""
<html>
<body>
    <pre class="mermaid">
        {mermaid_code}
    </pre>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({{ startOnLoad: true }});
    </script>
</body>
</html>
"""

components.html(mermaid_html, height=300)

st.markdown("""
Figure: The diagram illustrates how Large Language Models (LLMs) are applied in security, highlighting the flow from general applications to specific tasks, models, domain-specific techniques, and data considerations.
""")
st.markdown("---")

# ---------------------------- Interactive Chart Example ----------------------------

st.subheader("📈 Interactive Chart Example")

# Sample data for the chart
chart_data = [
    {"year": 2020, "papers": 50},
    {"year": 2021, "papers": 80},
    {"year": 2022, "papers": 120},
    {"year": 2023, "papers": 200},
    {"year": 2024, "papers": 250},
]

# HTML component for Chart.js
chart_html = f"""
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {{
            type: 'line',
            data: {{
                labels: {[d['year'] for d in chart_data]},
                datasets: [{{
                    label: 'Number of Papers',
                    data: {[d['papers'] for d in chart_data]},
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }}]
            }},
            options: {{
                responsive: true,
                scales: {{
                    y: {{
                        beginAtZero: true
                    }}
                }}
            }}
        }});
    </script>
</body>
</html>
"""

components.html(chart_html, height=300)
st.markdown("This interactive chart shows the growth in the number of papers on LLMs in cybersecurity over the years.")
st.markdown("---")

# ---------------------------- Footer and Additional Resources ----------------------------

st.subheader("📚 Additional Resources")
st.markdown("""
- [Official Streamlit Documentation](https://docs.streamlit.io/)
- [pip-audit GitHub Repository](https://github.com/pypa/pip-audit)
- [Mermaid Live Editor](https://mermaid.live/) - Design and preview Mermaid diagrams.
- [Azure Container Apps Documentation](https://docs.microsoft.com/en-us/azure/container-apps/)
- [Cybersecurity Best Practices by CISA](https://www.cisa.gov/cybersecurity-best-practices)
""")
st.markdown("---")

# ---------------------------- Sidebar Content ----------------------------

st.sidebar.title("Navigation")
st.sidebar.markdown("""
- [Introduction](#llms-for-cyber-security-state-of-the-art-surveys)
- [Survey Overview Table](#survey-overview-table)
- [Security Model Visualization](#security-model-visualization-with-mermaid)
- [Interactive Chart](#interactive-chart-example)
- [Additional Resources](#additional-resources)
""", unsafe_allow_html=True)

st.sidebar.title("About")
st.sidebar.info("""
This Streamlit app was developed to demonstrate the intersection of Large Language Models and Cybersecurity, highlighting recent surveys and providing tools and recommendations for secure coding practices.
""")

# ---------------------------- End of App ----------------------------

# ---------------------------- Self-Assessment ----------------------------

# Score: 9/10
# Rationale: The app integrates humor, creativity, and interactivity well with solid features. It creates an engaging experience for the user by adding playful commentary and jokes.
# Points for improvement: More advanced