Skip to content

DEMO_GUIDE.md

Latest commit

 

History

History
123 lines (88 loc) · 3.28 KB

DEMO_GUIDE.md

File metadata and controls

123 lines (88 loc) · 3.28 KB

🎯 SIMPLE 3-STEP DEMO GUIDE

🔴 STEP 1: Load Extension in Chrome (2 minutes)

1.1 Open Chrome Extensions Page

  • Open Google Chrome
  • Copy this and paste in address bar: chrome://extensions/
  • Press Enter

1.2 Enable Developer Mode

  • Look at TOP-RIGHT corner
  • Find toggle switch that says "Developer mode"
  • Click it to turn it ON (it should turn blue)

1.3 Load the Extension

  • Click the button "Load unpacked" (appears after you enable developer mode)
  • A folder picker window will open
  • Navigate to: C:\Users\setty\HiddenLayer\extension
  • Click "Select Folder"

1.4 Check It Loaded

  • You should see a new card appear with:
    • Name: "Dark Pattern Detector"
    • Version: 1.0.0
  • ✅ If you see this = SUCCESS!
  • ❌ If you see red errors = tell me and I'll fix

🟢 STEP 2: Open Test Page (30 seconds)

2.1 Open the Test File

  • In Chrome, press Ctrl + O on keyboard
  • OR click menu (3 dots) → "Open File..."
  • Navigate to: C:\Users\setty\HiddenLayer\test_pages\dark_pattern_test.html
  • Click "Open"

2.2 Open Developer Tools

  • Press F12 on keyboard
  • OR right-click page → "Inspect"
  • Click the "Console" tab at the top

🎉 STEP 3: See the Magic! (instant)

What You Should See:

  1. In the Console (Developer Tools):

    • Lines starting with [Dark Pattern Detector]
    • Shows "Analyzing dialog..."

  2. On the Page Itself:

    • A RED GRADIENT BANNER appears over the popup!
    • Says: "⚠️ Potential Dark Pattern Detected"
    • Shows the reason and pattern types

3.1 Test the "Good" Page Too

  • Press Ctrl + O again
  • Open: C:\Users\setty\HiddenLayer\test_pages\ethical_ui_test.html
  • Expected: NO warning appears (proves no false positives!)

🎬 What to Show Judges

  1. Run the test script to prove AI works:

    cd C:\Users\setty\HiddenLayer
.\venv\Scripts\python test_final.py

    Shows: All 5 tests PASS ✅

  2. Show dark pattern page - Warning appears

  3. Show ethical UI page - No warning (no false positives)

  4. Explain: "It uses RAG (vector database + LLM) to detect manipulation"

⚠️ If Something Goes Wrong:

Extension won't load:

  • Check you selected the extension FOLDER, not a file inside it
  • The folder should contain manifest.json

No warning appears:

  • Make sure backend is still running (check terminal with python backend\main.py)
  • Refresh the test page
  • Check Console for errors (red text)

Backend stopped:

cd C:\Users\setty\HiddenLayer
.\venv\Scripts\python backend\main.py

📸 Quick Demo Flow (30 seconds):

  1. "Here's my automated test - all 5 pass" (show terminal)
  2. "I load the extension in Chrome" (show extensions page)
  3. "Open this dark pattern page" (show warning appearing)
  4. "Open this ethical page" (show NO warning)
  5. "It uses AI with RAG pipeline to detect manipulation"

DONE! 🎉

🔑 Key Points for Defense:

  • Not rules-based: Uses semantic embeddings (show vector_db.py)
  • RAG pipeline: Retrieves examples, LLM compares (show test output)
  • No false positives: Ethical UI test proves it
  • Explainable: Shows which pattern type and reasoning
  • Fail-safe: Errors show "Analysis unavailable" not crash

You're ready! Just follow Steps 1-2-3 above. 🚀