File size: 4,802 Bytes
8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 8e86148 2cf9064 e52ffee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import gradio as gr
import pandas as pd
# Custom CSS to match the screenshot exactly
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
.gradio-container {
background-color: #06090f !important;
font-family: 'Inter', sans-serif !important;
color: white !important;
}
/* Sidebar Styling */
.sidebar-content { padding: 20px; background: #0b0f19; height: 100%; border-right: 1px solid #1f2937; }
.logo-area { text-align: center; margin-bottom: 30px; }
.status-badge {
background: rgba(16, 185, 129, 0.1);
border: 1px solid #10b981;
color: #10b981;
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
text-align: center;
margin-bottom: 40px;
}
/* Metric Cards */
.metrics-row { display: flex; gap: 15px; margin-bottom: 25px; }
.card {
flex: 1;
background: #111827;
padding: 20px;
border-radius: 12px;
text-align: center;
border-top: 3px solid #3b82f6; /* Default blue */
}
.card.threat { border-top-color: #ef4444; }
.card.safe { border-top-color: #10b981; }
.card.rate { border-top-color: #8b5cf6; }
.card-val { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
.card-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; }
/* Accordion & Buttons */
.establish-btn {
background: linear-gradient(90deg, #3b82f6 0%, #00d4ff 100%) !important;
border: none !important;
color: white !important;
font-weight: 600 !important;
}
/* Bottom Input Bar */
.chat-container {
background: #111827 !important;
border: 1px solid #3b82f6 !important;
border-radius: 10px !important;
}
"""
with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
# --- SIDEBAR PANEL ---
with gr.Sidebar(elem_id="sidebar"):
with gr.Column(elem_classes="sidebar-content"):
with gr.Column(elem_classes="logo-area"):
gr.HTML("""<div style='font-size: 40px;'>🛡️</div>""")
gr.Markdown("## **INTELLIGUARD**\nSECURITY PLATFORM")
gr.HTML("<div class='status-badge'>● INTELLIGUARD PROTECTED</div>")
gr.Markdown("### 📋 AUDIT LOG")
gr.Markdown("<p style='color: #6b7280; font-size: 13px;'>No activity recorded yet.</p>")
gr.Markdown("---")
gr.Markdown("### 📄 DOCUMENT UPLOAD")
gr.File(label=None, file_count="multiple", elem_id="file-upload")
gr.Markdown("<p style='color: #6b7280; font-size: 11px;'>200MB per file • PDF, TXT, DOCX</p>")
# --- MAIN CONTENT AREA ---
with gr.Column():
# Header Section
gr.HTML("""
<div style="text-align: center; margin-top: 20px;">
<div style='font-size: 30px; margin-bottom: 10px;'>🛡️</div>
<h1 style="font-size: 32px; margin: 0;">TechCorp Employee Portal</h1>
<p style="color: #6b7280;">Secured by <span style="color: #10b981;">IntelliGuard</span> • 4-Layer Prompt Injection Detection</p>
</div>
""")
# Metrics Grid
with gr.Row(elem_classes="metrics-row"):
gr.HTML("<div class='card'><div class='card-val' style='color:#3b82f6'>0</div><div class='card-label'>Total Queries</div></div>")
gr.HTML("<div class='card threat'><div class='card-val' style='color:#ef4444'>0</div><div class='card-label'>Threats Blocked</div></div>")
gr.HTML("<div class='card safe'><div class='card-val' style='color:#10b981'>0</div><div class='card-label'>Safe Queries</div></div>")
gr.HTML("<div class='card rate'><div class='card-val' style='color:#8b5cf6'>100%</div><div class='card-label'>Safe Rate</div></div>")
# Email Gateway Accordion
with gr.Accordion("📧 Enterprise Email Gateway", open=True):
with gr.Row():
email_input = gr.Textbox(label="Target Email", value="security-ops@techcorp.com", interactive=True)
pwd_input = gr.Textbox(label="App Password", type="password", placeholder="••••••••••••", interactive=True)
connect_btn = gr.Button("🔗 Establish Secure Connection", elem_classes="establish-btn")
# Spacing
gr.Markdown("<div style='height: 100px;'></div>")
# Footer Chat Bar
with gr.Row():
chat_input = gr.Textbox(
show_label=False,
placeholder="Ask about company policies, benefits, security guidelines...",
scale=10,
elem_classes="chat-container"
)
submit_btn = gr.Button("↑", scale=1, variant="primary")
# Launch
demo.launch(server_name="0.0.0.0", server_port=7860)
|