Upload app.py with huggingface_hub

app.py

@@ -476,7 +476,7 @@ PLOTLY_CLICK_JS = """
 # Gradio Interface
 # ---------------------------------------------------------------------------
 TITLE_HTML = """
-<div style="text-align:center; padding:10px 0;">
+<div style="text-align:center; padding:10px 0 4px 0;">
     <h1 style="font-size:1.8em; margin:0;">GuardLLM - Prompt Security Visualizer</h1>
     <p style="color:#94a3b8; font-size:0.95em; margin-top:4px;">
         Interactive t-SNE embedding space &bull;
@@ -488,11 +488,32 @@ TITLE_HTML = """
 </div>
 """
 
+HOW_TO_HTML = """
+<div style="background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border:1px solid #334155; border-radius:12px; padding:16px 20px; margin:0 0 8px 0; font-family:system-ui,sans-serif;">
+    <div style="color:#e2e8f0; font-weight:700; font-size:1em; margin-bottom:8px;">How to use this tool</div>
+    <div style="display:flex; flex-wrap:wrap; gap:12px;">
+        <div style="flex:1; min-width:180px; background:#1e293b; border-radius:8px; padding:10px 12px;">
+            <div style="color:#60a5fa; font-weight:600; font-size:0.85em; margin-bottom:4px;">1. Explore the map</div>
+            <div style="color:#94a3b8; font-size:0.8em; line-height:1.4;">Each dot represents a prompt from the dataset, positioned by semantic similarity. Colors indicate attack categories. Hover to preview, scroll to zoom, drag to pan.</div>
+        </div>
+        <div style="flex:1; min-width:180px; background:#1e293b; border-radius:8px; padding:10px 12px;">
+            <div style="color:#f59e0b; font-weight:600; font-size:0.85em; margin-bottom:4px;">2. Click to analyze</div>
+            <div style="color:#94a3b8; font-size:0.8em; line-height:1.4;">Click any point to run it through <strong style="color:#cbd5e1;">Llama Prompt Guard 2</strong>. The right panel will show the risk classification, safety score, and confidence breakdown.</div>
+        </div>
+        <div style="flex:1; min-width:180px; background:#1e293b; border-radius:8px; padding:10px 12px;">
+            <div style="color:#22c55e; font-weight:600; font-size:0.85em; margin-bottom:4px;">3. Test your own prompts</div>
+            <div style="color:#94a3b8; font-size:0.8em; line-height:1.4;">Type or paste any prompt in the <strong style="color:#cbd5e1;">Custom prompt</strong> field and hit Analyze to check if it would be flagged as an injection attempt.</div>
+        </div>
+    </div>
+</div>
+"""
+
 with gr.Blocks(
     title="GuardLLM - Prompt Security Visualizer",
 ) as demo:
 
     gr.HTML(TITLE_HTML)
+    gr.HTML(HOW_TO_HTML)
 
     click_index = gr.Textbox(
         value="",