Spaces:

awacke1
/

CodeMode

Sleeping

App Files Files Community

awacke1 commited on Sep 27, 2024

Commit

9ec8a42

verified ·

1 Parent(s): 346ca65

Update app.py

Browse files

Files changed (1) hide show

app.py +157 -88

app.py CHANGED Viewed

@@ -2,69 +2,36 @@ import streamlit as st
 import pandas as pd
 import subprocess
 import time
 # ---------------------------- Header and Introduction ----------------------------
-# Set the page configuration
-st.set_page_config(
-    page_title="LLMs for Cyber Security",
-    page_icon="🔒",
-    layout="wide",
-    initial_sidebar_state="expanded",
-)
-# Title of the application
 st.title("🔒 LLMs for Cyber Security: State-of-the-Art Surveys")
-# Introduction text with link to the paper
-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.
-""")
 # ---------------------------- Data Preparation ----------------------------
-# Create the data dictionary
 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]
 }
-# Convert the data dictionary into a pandas DataFrame
 df = pd.DataFrame(data)
 # ---------------------------- Display Data Table ----------------------------
 st.subheader("📊 Survey Overview Table")
-# Display the DataFrame as an interactive table
 st.dataframe(df, height=300)
-# Add some spacing
 st.markdown("---")
 # ---------------------------- Mermaid Diagram Visualization ----------------------------
 st.subheader("🛡️ Security Model Visualization with Mermaid")
-# Define the Mermaid code
 mermaid_code = '''
 graph TD;
     A[LLMs in Security] --> B[Security Application]
@@ -74,25 +41,155 @@ graph TD;
     E --> F[Data]
 '''
-# Display the Mermaid diagram using markdown
-st.markdown(f"""
-```mermaid
-{mermaid_code}
-```
-""")
-# Explanation of the diagram
 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.
 """)
-# Add some spacing
 st.markdown("---")
 # ---------------------------- Scrollable Content for Additional Insights ----------------------------
-st.subheader("📝 Additional Insights")
-# Custom CSS for scrollable content
 st.markdown("""
 <style>
     .scrollable-content {
@@ -102,10 +199,6 @@ st.markdown("""
         border: 1px solid #ccc;
     }
 </style>
-""", unsafe_allow_html=True)
-# Scrollable content with insights
-st.markdown("""
 <div class="scrollable-content">
     <h4>Survey Highlights:</h4>
     <ul>
@@ -125,40 +218,26 @@ st.markdown("""
     </ol>
 </div>
 """, unsafe_allow_html=True)
-# Add some spacing
 st.markdown("---")
 # ---------------------------- Security Audit Section ----------------------------
-st.subheader("🔍 Run Python Dependency Security Audit")
-# Explanation of the security audit
-st.markdown("""
-Keeping your project's dependencies secure is crucial. Use the button below to run a security audit on the Python packages used in this environment.
-""")
-# Button to trigger the security audit
 if st.button('Run pip-audit for Security Check'):
     with st.spinner('Running security audit...'):
-        # Simulate a delay for the audit process
         time.sleep(2)
-        # Run the pip-audit command
         result = subprocess.run(['pip-audit'], capture_output=True, text=True)
-        # Display the audit results
         st.code(result.stdout)
     st.success('Security audit completed!')
-# Note about pip-audit
-st.markdown("""
-Note: The pip-audit tool checks your Python environment for packages with known vulnerabilities, referencing public CVE databases.
-""")
-# Add some spacing
 st.markdown("---")
 # ---------------------------- AI Pair Programming Recommendations ----------------------------
-st.subheader("🤖 AI Pair Programming: Security Recommendations")
 st.markdown("""
 Leveraging AI in pair programming can enhance code security and quality. Here are some recommendations:
@@ -168,13 +247,11 @@ Leveraging AI in pair programming can enhance code security and quality. Here ar
 4. **Code Review Assistance**: AI can assist in code reviews by highlighting potential security issues and non-compliance with best practices.
 5. **Secure Coding Practices**: AI can provide real-time suggestions for secure coding patterns and discourage the use of insecure functions.
 """)
-# Add some spacing
 st.markdown("---")
 # ---------------------------- Azure Deployment Information ----------------------------
-st.subheader("☁️ Azure Deployment Information")
 st.markdown("""
 While this demo does not include operational deployment, here's how you can deploy this application using Azure services:
@@ -196,14 +273,11 @@ While this demo does not include operational deployment, here's how you can depl
   - Multi-model database service
   - Low latency and high availability
 """)
-# Add some spacing
 st.markdown("---")
 # ---------------------------- Footer and Additional Resources ----------------------------
-st.subheader("📚 Additional Resources")
-# List of additional resources and links
 st.markdown("""
 - [Official Streamlit Documentation](https://docs.streamlit.io/)
 - [pip-audit GitHub Repository](https://github.com/pypa/pip-audit)
@@ -212,21 +286,17 @@ st.markdown("""
 - [Cybersecurity Best Practices by CISA](https://www.cisa.gov/cybersecurity-best-practices)
 """)
-# Contact information or call to action
-st.markdown("""
-If you have any questions or would like to contribute to this project, please reach out or submit a pull request on GitHub.
-""")
-# Add some spacing
-st.markdown("---")
 # ---------------------------- Sidebar Content ----------------------------
-# Add content to the sidebar
 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)
 - [Additional Insights](#additional-insights)
 - [Security Audit](#run-python-dependency-security-audit)
 - [AI Recommendations](#ai-pair-programming-security-recommendations)
@@ -234,7 +304,6 @@ st.sidebar.markdown("""
 - [Additional Resources](#additional-resources)
 """, unsafe_allow_html=True)
-# Add an about section
 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.

 import pandas as pd
 import subprocess
 import time
+import streamlit.components.v1 as components
 # ---------------------------- 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.")
 # ---------------------------- 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]
     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("---")
+# ---------------------------- Interactive D3.js Visualization ----------------------------
+st.subheader("🌐 Interactive D3.js Visualization")
+# Sample data for the D3 visualization
+d3_data = [
+    {"name": "Task", "value": 30},
+    {"name": "Model", "value": 25},
+    {"name": "Domain-Specific", "value": 20},
+    {"name": "Data", "value": 15},
+    {"name": "Security of LLM", "value": 10},
+]
+# HTML component for D3.js visualization
+d3_html = f"""
+<html>
+<head>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        .bar {{ fill: steelblue; }}
+        .bar:hover {{ fill: brown; }}
+    </style>
+</head>
+<body>
+    <div id="d3-chart"></div>
+    <script>
+        const data = {d3_data};
+        const margin = {{top: 20, right: 20, bottom: 30, left: 40}};
+        const width = 400 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select("#d3-chart")
+            .append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", `translate(${{margin.left}},${{margin.top}})`);
+        const x = d3.scaleBand()
+            .range([0, width])
+            .padding(0.1);
+        const y = d3.scaleLinear()
+            .range([height, 0]);
+        x.domain(data.map(d => d.name));
+        y.domain([0, d3.max(data, d => d.value)]);
+        svg.selectAll(".bar")
+            .data(data)
+            .enter().append("rect")
+            .attr("class", "bar")
+            .attr("x", d => x(d.name))
+            .attr("width", x.bandwidth())
+            .attr("y", d => y(d.value))
+            .attr("height", d => height - y(d.value));
+        svg.append("g")
+            .attr("transform", `translate(0,${{height}})`)
+            .call(d3.axisBottom(x));
+        svg.append("g")
+            .call(d3.axisLeft(y));
+    </script>
+</body>
+</html>
+"""
+components.html(d3_html, height=300)
+st.markdown("This D3.js visualization shows the distribution of different aspects in LLM cybersecurity research.")
 st.markdown("---")
 # ---------------------------- Scrollable Content for Additional Insights ----------------------------
+st.subheader("📝 Additional Insights")
 st.markdown("""
 <style>
     .scrollable-content {
         border: 1px solid #ccc;
     }
 </style>
 <div class="scrollable-content">
     <h4>Survey Highlights:</h4>
     <ul>
     </ol>
 </div>
 """, unsafe_allow_html=True)
 st.markdown("---")
 # ---------------------------- Security Audit Section ----------------------------
+st.subheader("🔍 Run Python Dependency Security Audit")
+st.markdown("Keeping your project's dependencies secure is crucial. Use the button below to run a security audit on the Python packages used in this environment.")
 if st.button('Run pip-audit for Security Check'):
     with st.spinner('Running security audit...'):
         time.sleep(2)
         result = subprocess.run(['pip-audit'], capture_output=True, text=True)
         st.code(result.stdout)
     st.success('Security audit completed!')
+st.markdown("Note: The pip-audit tool checks your Python environment for packages with known vulnerabilities, referencing public CVE databases.")
 st.markdown("---")
 # ---------------------------- AI Pair Programming Recommendations ----------------------------
+st.subheader("🤖 AI Pair Programming: Security Recommendations")
 st.markdown("""
 Leveraging AI in pair programming can enhance code security and quality. Here are some recommendations:
 4. **Code Review Assistance**: AI can assist in code reviews by highlighting potential security issues and non-compliance with best practices.
 5. **Secure Coding Practices**: AI can provide real-time suggestions for secure coding patterns and discourage the use of insecure functions.
 """)
 st.markdown("---")
 # ---------------------------- Azure Deployment Information ----------------------------
+st.subheader("☁️ Azure Deployment Information")
 st.markdown("""
 While this demo does not include operational deployment, here's how you can deploy this application using Azure services:
   - Multi-model database service
   - Low latency and high availability
 """)
 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)
 - [Cybersecurity Best Practices by CISA](https://www.cisa.gov/cybersecurity-best-practices)
 """)
+st.markdown("If you have any questions or would like to contribute to this project, please reach out or submit a pull request on GitHub.")
 # ---------------------------- 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)
+- [D3.js Visualization](#interactive-d3js-visualization)
 - [Additional Insights](#additional-insights)
 - [Security Audit](#run-python-dependency-security-audit)
 - [AI Recommendations](#ai-pair-programming-security-recommendations)
 - [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.