|
|
{% extends "base.html" %} |
|
|
|
|
|
{% block title %}Privacy Attacks - DP-SGD Explorer{% endblock %} |
|
|
|
|
|
{% block extra_head %} |
|
|
<style> |
|
|
.attacks-container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.attack-tabs { |
|
|
display: flex; |
|
|
background-color: var(--background-off); |
|
|
border-radius: 8px; |
|
|
padding: 4px; |
|
|
margin-bottom: 2rem; |
|
|
overflow-x: auto; |
|
|
gap: 4px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.attack-tab { |
|
|
flex: 1 1 auto; |
|
|
min-width: 160px; |
|
|
padding: 0.75rem 1rem; |
|
|
text-align: center; |
|
|
background: transparent; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s ease; |
|
|
white-space: nowrap; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.attack-tab:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.attack-tab.active { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.attack-content { |
|
|
display: none; |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
|
|
|
.attack-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.attack-header { |
|
|
text-align: center; |
|
|
margin-bottom: 2rem; |
|
|
padding: 2rem; |
|
|
background: linear-gradient(135deg, #ff6b6b, #ee5a24); |
|
|
color: white; |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.attack-header h1 { |
|
|
margin: 0 0 0.5rem 0; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.attack-header p { |
|
|
margin: 0; |
|
|
font-size: 1.1rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.attack-section { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
padding: 2rem; |
|
|
margin-bottom: 2rem; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.attack-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.attack-icon { |
|
|
font-size: 2rem; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
|
} |
|
|
|
|
|
.attack-demo { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 2rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.demo-panel { |
|
|
background: var(--background-off); |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.demo-controls { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.demo-slider { |
|
|
width: 100%; |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
.demo-result { |
|
|
background: white; |
|
|
padding: 1rem; |
|
|
border-radius: 4px; |
|
|
margin-top: 1rem; |
|
|
border-left: 4px solid var(--primary-color); |
|
|
} |
|
|
|
|
|
.success-rate { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.privacy-level { |
|
|
display: inline-block; |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 4px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 500; |
|
|
margin-left: 0.5rem; |
|
|
} |
|
|
|
|
|
.privacy-high { background: #e8f5e8; color: #2e7d32; } |
|
|
.privacy-medium { background: #fff3e0; color: #f57c00; } |
|
|
.privacy-low { background: #ffebee; color: #d32f2f; } |
|
|
|
|
|
.comparison-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.comparison-card { |
|
|
background: var(--background-off); |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.comparison-value { |
|
|
font-size: 2rem; |
|
|
font-weight: bold; |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
.defense-section { |
|
|
background: linear-gradient(135deg, #4caf50, #2e7d32); |
|
|
color: white; |
|
|
padding: 2rem; |
|
|
border-radius: 12px; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.defense-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.defense-item { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
.visual-demo { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.visual-item { |
|
|
text-align: center; |
|
|
padding: 1rem; |
|
|
background: var(--background-off); |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.visual-item img { |
|
|
max-width: 100%; |
|
|
height: 120px; |
|
|
object-fit: cover; |
|
|
border-radius: 4px; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.reconstruction-quality { |
|
|
font-weight: bold; |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 4px; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.quality-high { background: #ffebee; color: #d32f2f; } |
|
|
.quality-medium { background: #fff3e0; color: #f57c00; } |
|
|
.quality-low { background: #e8f5e8; color: #2e7d32; } |
|
|
|
|
|
.linkage-demo { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr auto 1fr auto 1fr; |
|
|
gap: 1rem; |
|
|
align-items: center; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.linkage-source { |
|
|
background: var(--background-off); |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.linkage-arrow { |
|
|
font-size: 1.5rem; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.warning-box { |
|
|
background: #fff3cd; |
|
|
border: 1px solid #ffeaa7; |
|
|
color: #856404; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
background: #d1ecf1; |
|
|
border: 1px solid #bee5eb; |
|
|
color: #0c5460; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
|
|
|
.attack-story { |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.story-flow { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
margin: 2rem 0; |
|
|
overflow-x: auto; |
|
|
padding: 1rem 0; |
|
|
} |
|
|
|
|
|
.story-card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
padding: 1.5rem; |
|
|
min-width: 200px; |
|
|
flex-shrink: 0; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
border: 2px solid #e9ecef; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.story-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.story-card.danger { |
|
|
border-color: #dc3545; |
|
|
background: linear-gradient(135deg, #fff5f5, #ffe6e6); |
|
|
} |
|
|
|
|
|
.story-icon { |
|
|
font-size: 2.5rem; |
|
|
text-align: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.story-content h4 { |
|
|
margin: 0 0 0.75rem 0; |
|
|
color: #333; |
|
|
font-size: 1.1rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.story-content p { |
|
|
margin: 0; |
|
|
line-height: 1.5; |
|
|
color: #666; |
|
|
text-align: center; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.story-arrow { |
|
|
font-size: 1.5rem; |
|
|
color: var(--primary-color); |
|
|
font-weight: bold; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.attack-tab { |
|
|
flex: 1 1 calc(33.333% - 4px); |
|
|
min-width: 150px; |
|
|
font-size: 0.88rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.attack-tabs { |
|
|
gap: 4px; |
|
|
padding: 4px; |
|
|
} |
|
|
|
|
|
.attack-tab { |
|
|
flex: 1 1 calc(50% - 4px); |
|
|
min-width: 140px; |
|
|
font-size: 0.85rem; |
|
|
padding: 0.6rem 0.75rem; |
|
|
} |
|
|
|
|
|
.story-flow { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.story-arrow { |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
|
|
|
.story-card { |
|
|
min-width: auto; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.attack-tab { |
|
|
flex: 1 1 100%; |
|
|
min-width: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
.interactive-demo { |
|
|
background: #f8f9fa; |
|
|
padding: 2rem; |
|
|
border-radius: 12px; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.demo-scenario { |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.scenario-setup { |
|
|
text-align: center; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.confidence-comparison { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr auto 1fr; |
|
|
gap: 2rem; |
|
|
align-items: center; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.data-sample { |
|
|
background: white; |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.sample-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.sample-label { |
|
|
font-weight: 600; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.sample-status { |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.sample-status.training { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
} |
|
|
|
|
|
.sample-status.test { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
} |
|
|
|
|
|
.sample-image { |
|
|
text-align: center; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
.digit-display { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background: #e9ecef; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2.5rem; |
|
|
font-weight: bold; |
|
|
color: #495057; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.confidence-bar { |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.confidence-label { |
|
|
font-size: 0.9rem; |
|
|
color: #666; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.confidence-meter { |
|
|
background: #e9ecef; |
|
|
height: 30px; |
|
|
border-radius: 15px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.confidence-fill { |
|
|
height: 100%; |
|
|
border-radius: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.training-confidence { |
|
|
background: linear-gradient(90deg, #dc3545, #fd7e14); |
|
|
} |
|
|
|
|
|
.test-confidence { |
|
|
background: linear-gradient(90deg, #28a745, #20c997); |
|
|
} |
|
|
|
|
|
.vs-divider { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
color: var(--primary-color); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.attack-insight { |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.insight-box { |
|
|
background: linear-gradient(135deg, #fff3cd, #ffeaa7); |
|
|
border: 1px solid #ffeaa7; |
|
|
color: #856404; |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.privacy-demo { |
|
|
background: white; |
|
|
padding: 2rem; |
|
|
border-radius: 12px; |
|
|
margin: 2rem 0; |
|
|
border: 2px solid var(--primary-color); |
|
|
} |
|
|
|
|
|
.privacy-controls { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 2rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.control-panel { |
|
|
background: var(--background-off); |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.privacy-scale { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
font-size: 0.8rem; |
|
|
color: #666; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.privacy-results { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.success-rate-display { |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.rate-circle { |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #ff6b6b, #ee5a24); |
|
|
color: white; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.rate-number { |
|
|
font-size: 1.8rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.rate-label { |
|
|
font-size: 0.9rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.privacy-explanation { |
|
|
background: var(--background-off); |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin-top: 1rem; |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.real-world-examples { |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.example-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.example-card { |
|
|
background: white; |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
border-left: 4px solid var(--primary-color); |
|
|
} |
|
|
|
|
|
.example-icon { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.example-card h4 { |
|
|
margin: 0 0 1rem 0; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.example-card p { |
|
|
margin: 0; |
|
|
color: #666; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
|
|
|
.reconstruction-visual-demo { |
|
|
background: white; |
|
|
padding: 2rem; |
|
|
border-radius: 12px; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.reconstruction-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 1rem; |
|
|
margin: 0 auto; |
|
|
max-width: 800px; |
|
|
} |
|
|
|
|
|
.grid-header { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 0.75rem 0.5rem; |
|
|
text-align: center; |
|
|
font-weight: bold; |
|
|
font-size: 0.9rem; |
|
|
border-radius: 8px 8px 0 0; |
|
|
line-height: 1.3; |
|
|
} |
|
|
|
|
|
.example-cell { |
|
|
background: #f8f9fa; |
|
|
border: 2px solid #dee2e6; |
|
|
border-radius: 8px; |
|
|
padding: 0.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.example-cell:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.example-cell canvas { |
|
|
display: block; |
|
|
border-radius: 4px; |
|
|
image-rendering: pixelated; |
|
|
image-rendering: -moz-crisp-edges; |
|
|
image-rendering: crisp-edges; |
|
|
} |
|
|
|
|
|
.example-cell.current-setting { |
|
|
border: 3px solid #ffc107; |
|
|
background: #fffbf0; |
|
|
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2); |
|
|
} |
|
|
|
|
|
.reconstruction-legend { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin-top: 2rem; |
|
|
padding: 1.5rem; |
|
|
background: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.legend-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.legend-box { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 4px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.current-highlight { |
|
|
background: #fffbf0; |
|
|
border: 3px solid #ffc107; |
|
|
animation: pulse-border 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse-border { |
|
|
0%, 100% { border-color: #ffc107; } |
|
|
50% { border-color: #ff9800; } |
|
|
} |
|
|
|
|
|
.legend-item span { |
|
|
font-size: 0.85rem; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.reconstruction-grid { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.grid-header { |
|
|
font-size: 0.75rem; |
|
|
padding: 0.5rem 0.25rem; |
|
|
} |
|
|
|
|
|
.example-cell canvas { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
} |
|
|
|
|
|
.reconstruction-legend { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
} |
|
|
|
|
|
.three-panel-container { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr auto 1fr auto 1fr; |
|
|
gap: 1rem; |
|
|
align-items: stretch; |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.privacy-panel { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.privacy-panel:hover { |
|
|
transform: translateY(-4px); |
|
|
} |
|
|
|
|
|
.panel-header { |
|
|
padding: 1.5rem 1rem; |
|
|
text-align: center; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.panel-header h3 { |
|
|
margin: 0; |
|
|
font-size: 1rem; |
|
|
line-height: 1.4; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.private-panel { |
|
|
background: #f5e6d3; |
|
|
border: 4px solid #c89968; |
|
|
} |
|
|
|
|
|
.private-panel .panel-header { |
|
|
background: #f5e6d3; |
|
|
color: #8b4513; |
|
|
} |
|
|
|
|
|
.safe-panel { |
|
|
background: #e8f4f8; |
|
|
border: 4px solid #7fb3d5; |
|
|
} |
|
|
|
|
|
.safe-panel .panel-header { |
|
|
background: #e8f4f8; |
|
|
color: #2c5f2d; |
|
|
} |
|
|
|
|
|
.attack-panel { |
|
|
background: #fce4e4; |
|
|
border: 4px solid #d4a5a8; |
|
|
} |
|
|
|
|
|
.attack-panel .panel-header { |
|
|
background: #fce4e4; |
|
|
color: #c1272d; |
|
|
} |
|
|
|
|
|
.panel-image-wrapper { |
|
|
position: relative; |
|
|
flex: 1; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
overflow: hidden; |
|
|
background: #f8f9fa; |
|
|
} |
|
|
|
|
|
.panel-image { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.privacy-lock-overlay { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 30px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.lock-icon { |
|
|
font-size: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.privacy-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(30px); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
color: #28a745; |
|
|
transition: all 0.5s ease; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.panel-footer { |
|
|
padding: 1rem; |
|
|
text-align: center; |
|
|
font-size: 0.9rem; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
|
|
|
.safe-footer { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.75rem; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
|
|
|
.check-icon { |
|
|
font-size: 1.5rem; |
|
|
color: #28a745; |
|
|
background: white; |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
border: 2px solid #28a745; |
|
|
} |
|
|
|
|
|
.footer-metrics { |
|
|
text-align: left; |
|
|
font-size: 0.85rem; |
|
|
} |
|
|
|
|
|
.small-text { |
|
|
font-size: 0.75rem; |
|
|
color: #666; |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
|
|
|
.danger-footer { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.75rem; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
padding: 1.25rem; |
|
|
} |
|
|
|
|
|
.alert-icon { |
|
|
font-size: 2rem; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; transform: scale(1); } |
|
|
50% { opacity: 0.7; transform: scale(1.1); } |
|
|
} |
|
|
|
|
|
.danger-text { |
|
|
font-weight: bold; |
|
|
color: #c1272d; |
|
|
font-size: 1rem; |
|
|
line-height: 1.3; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.footer-text { |
|
|
color: #666; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.flow-arrow { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.arrow-symbol { |
|
|
font-size: 2.5rem; |
|
|
color: #dc3545; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.attack-arrow .arrow-symbol { |
|
|
color: #c1272d; |
|
|
} |
|
|
|
|
|
.arrow-label { |
|
|
font-size: 0.85rem; |
|
|
color: #666; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.three-panel-container { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.flow-arrow { |
|
|
flex-direction: row; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.arrow-symbol { |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
|
|
|
.panel-header h3 { |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.panel-header h3 { |
|
|
font-size: 0.85rem; |
|
|
} |
|
|
|
|
|
.arrow-symbol { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.reconstruction-visual-demo { |
|
|
padding: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
{% endblock %} |
|
|
|
|
|
{% block content %} |
|
|
<div class="attacks-container"> |
|
|
|
|
|
<div class="attack-header"> |
|
|
<h1>🛡️ Privacy Attacks in Machine Learning</h1> |
|
|
<p>Understand the threats that differential privacy protects against</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="attack-tabs"> |
|
|
<button class="attack-tab active" data-attack="membership">Membership Inference</button> |
|
|
<button class="attack-tab" data-attack="reconstruction">Data Reconstruction</button> |
|
|
<button class="attack-tab" data-attack="inversion">Model Inversion</button> |
|
|
<button class="attack-tab" data-attack="property">Property Inference</button> |
|
|
<button class="attack-tab" data-attack="linkage">Linkage Attack</button> |
|
|
<button class="attack-tab" data-attack="comparison">Attack Comparison</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="membership-content" class="attack-content active"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">🎯</div> |
|
|
<div> |
|
|
<h2>Membership Inference Attack</h2> |
|
|
<p>Can an attacker tell if your data was used to train this model?</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="attack-story"> |
|
|
<h3>🤔 What is this attack?</h3> |
|
|
<div class="story-flow"> |
|
|
<div class="story-card"> |
|
|
<div class="story-icon">🏥</div> |
|
|
<div class="story-content"> |
|
|
<h4>A Hospital's AI Model</h4> |
|
|
<p>A hospital trains an AI to diagnose diseases using patient records. Alice was one of the patients whose data was used.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="story-arrow">→</div> |
|
|
|
|
|
<div class="story-card"> |
|
|
<div class="story-icon">🕵️</div> |
|
|
<div class="story-content"> |
|
|
<h4>An Attacker's Question</h4> |
|
|
<p><strong>"Was Alice's medical record used to train this model?"</strong> The attacker wants to know if Alice was a patient here.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="story-arrow">→</div> |
|
|
|
|
|
<div class="story-card"> |
|
|
<div class="story-icon">🎯</div> |
|
|
<div class="story-content"> |
|
|
<h4>The Attack Trick</h4> |
|
|
<p>The attacker feeds Alice's data to the model and checks: <strong>"How confident is the model?"</strong> Models remember training data!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="story-arrow">→</div> |
|
|
|
|
|
<div class="story-card danger"> |
|
|
<div class="story-icon">⚠️</div> |
|
|
<div class="story-content"> |
|
|
<h4>Privacy Breach!</h4> |
|
|
<p>If the model is very confident, the attacker learns Alice was a patient at this hospital - a serious privacy violation!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="interactive-demo"> |
|
|
<h3>🧪 Try the Attack Yourself</h3> |
|
|
<div class="demo-scenario"> |
|
|
<div class="scenario-setup"> |
|
|
<h4>The Setup</h4> |
|
|
<p>A hospital trained a model to predict heart disease risk. Let's see if an attacker can tell which patient records were in the training set!</p> |
|
|
</div> |
|
|
|
|
|
<div class="confidence-comparison"> |
|
|
<div class="data-sample"> |
|
|
<div class="sample-header"> |
|
|
<span class="sample-label">Training Data Sample</span> |
|
|
<span class="sample-status training">✓ Was in training</span> |
|
|
</div> |
|
|
<div class="sample-image"> |
|
|
<div class="digit-display" style="font-size: 1rem; flex-direction: column; gap: 0.5rem; height: auto; padding: 1rem;"> |
|
|
<div style="font-size: 2.5rem;">🏥</div> |
|
|
<div style="font-size: 0.85rem; color: #666;">Patient #A2847</div> |
|
|
<div style="font-size: 0.8rem; color: #999; line-height: 1.3;">Age: 58 | BP: 145/92<br/>Cholesterol: High</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="confidence-bar"> |
|
|
<div class="confidence-label">Model Confidence:</div> |
|
|
<div class="confidence-meter"> |
|
|
<div class="confidence-fill training-confidence" id="training-confidence" style="width: 96%;">96%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="vs-divider">VS</div> |
|
|
|
|
|
<div class="data-sample"> |
|
|
<div class="sample-header"> |
|
|
<span class="sample-label">Test Data Sample</span> |
|
|
<span class="sample-status test">✗ Not in training</span> |
|
|
</div> |
|
|
<div class="sample-image"> |
|
|
<div class="digit-display" style="font-size: 1rem; flex-direction: column; gap: 0.5rem; height: auto; padding: 1rem;"> |
|
|
<div style="font-size: 2.5rem;">🏥</div> |
|
|
<div style="font-size: 0.85rem; color: #666;">Patient #B3192</div> |
|
|
<div style="font-size: 0.8rem; color: #999; line-height: 1.3;">Age: 56 | BP: 142/90<br/>Cholesterol: High</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="confidence-bar"> |
|
|
<div class="confidence-label">Model Confidence:</div> |
|
|
<div class="confidence-meter"> |
|
|
<div class="confidence-fill test-confidence" id="test-confidence" style="width: 68%;">68%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="attack-insight"> |
|
|
<div class="insight-box"> |
|
|
<strong>🔍 The Attack Insight:</strong> The model is <span id="confidence-diff">28%</span> more confident on training data! |
|
|
An attacker can use this difference to infer that Patient A2847 was treated at this hospital - a serious privacy breach. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="privacy-demo"> |
|
|
<h3>🛡️ How Does Differential Privacy Help?</h3> |
|
|
<div class="privacy-controls"> |
|
|
<div class="control-panel"> |
|
|
<h4>Adjust Privacy Protection</h4> |
|
|
<div class="demo-controls"> |
|
|
<label>Privacy Level: <span id="privacy-level-text">Medium</span></label> |
|
|
<input type="range" class="demo-slider" id="privacy-level-slider" min="1" max="5" step="1" value="3"> |
|
|
<div class="privacy-scale"> |
|
|
<span>High Privacy</span> |
|
|
<span>Low Privacy</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="control-button" onclick="updatePrivacyDemo()">Update Protection</button> |
|
|
</div> |
|
|
|
|
|
<div class="privacy-results"> |
|
|
<h4>Attack Success Rate</h4> |
|
|
<div class="success-rate-display"> |
|
|
<div class="rate-circle" id="success-rate-circle"> |
|
|
<span class="rate-number" id="membership-success">65%</span> |
|
|
<span class="rate-label">Success</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="privacy-explanation" id="privacy-explanation"> |
|
|
With medium privacy protection, the attacker can still succeed 65% of the time. Try increasing privacy! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="real-world-examples"> |
|
|
<h3>🌍 Real-World Impact</h3> |
|
|
<div class="example-grid"> |
|
|
<div class="example-card"> |
|
|
<div class="example-icon">🏥</div> |
|
|
<h4>Healthcare</h4> |
|
|
<p>Revealing if someone's medical data was used in training could expose their health conditions</p> |
|
|
</div> |
|
|
<div class="example-card"> |
|
|
<div class="example-icon">💳</div> |
|
|
<h4>Finance</h4> |
|
|
<p>Knowing if someone's financial data was in training could reveal their banking relationships</p> |
|
|
</div> |
|
|
<div class="example-card"> |
|
|
<div class="example-icon">📱</div> |
|
|
<h4>Social Media</h4> |
|
|
<p>Determining if someone's posts were used could reveal their participation in studies</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<canvas id="membership-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;"> |
|
|
<h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> |
|
|
<span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack |
|
|
</h3> |
|
|
<p style="font-size: 1rem; line-height: 1.6; margin: 0;"> |
|
|
<strong>Random noise addition:</strong> DP-SGD adds carefully calibrated noise to model outputs, making Alice's record indistinguishable from any other patient. The model gives similar confidence scores whether or not someone was in the training data - attackers can't tell the difference between training and test examples. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="reconstruction-content" class="attack-content"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">🔍</div> |
|
|
<div> |
|
|
<h2>Data Reconstruction Attack</h2> |
|
|
<p>Recover training data from model gradients</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="warning-box"> |
|
|
<strong>Threat:</strong> Attackers with access to gradients can potentially reconstruct original training images, especially in federated learning scenarios. |
|
|
</div> |
|
|
|
|
|
<div class="attack-scenario-intro" style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem;"> |
|
|
<h3>📋 Scenario: Federated Learning Attack</h3> |
|
|
<p style="margin: 0.5rem 0 0 0; color: #666;"> |
|
|
In federated learning, a company trains a model using images from users' devices. An attacker with access to |
|
|
gradient updates attempts to reconstruct the original training images. Let's see how differential privacy protects against this! |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="reconstruction-visual-demo"> |
|
|
<h3 style="text-align: center; margin-bottom: 1.5rem;">🔍 Reconstruction Quality at Different Privacy Levels</h3> |
|
|
|
|
|
|
|
|
<div class="reconstruction-grid"> |
|
|
|
|
|
<div class="grid-header">Ground Truth</div> |
|
|
<div class="grid-header">No Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;">(ε = ∞)</span></div> |
|
|
<div class="grid-header">Low Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;" id="current-epsilon">(ε = 8.0)</span></div> |
|
|
<div class="grid-header">High Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;">(ε = 0.1)</span></div> |
|
|
|
|
|
|
|
|
<div class="example-cell"> |
|
|
<canvas id="original-1" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="no-privacy-1" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell current-setting"> |
|
|
<canvas id="current-1" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="high-privacy-1" width="120" height="120"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="example-cell"> |
|
|
<canvas id="original-2" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="no-privacy-2" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell current-setting"> |
|
|
<canvas id="current-2" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="high-privacy-2" width="120" height="120"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="example-cell"> |
|
|
<canvas id="original-3" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="no-privacy-3" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell current-setting"> |
|
|
<canvas id="current-3" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="high-privacy-3" width="120" height="120"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="example-cell"> |
|
|
<canvas id="original-4" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="no-privacy-4" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell current-setting"> |
|
|
<canvas id="current-4" width="120" height="120"></canvas> |
|
|
</div> |
|
|
<div class="example-cell"> |
|
|
<canvas id="high-privacy-4" width="120" height="120"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="reconstruction-legend"> |
|
|
<div class="legend-item"> |
|
|
<div class="legend-box" style="background: #e8f5e9; border: 2px solid #4caf50;"></div> |
|
|
<span><strong>Ground Truth:</strong> Original private training images</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<div class="legend-box" style="background: #ffebee; border: 2px solid #f44336;"></div> |
|
|
<span><strong>No Privacy:</strong> Perfect reconstruction - privacy breach!</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<div class="legend-box current-highlight"></div> |
|
|
<span><strong>Your Settings:</strong> Adjust sliders below to see changes</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<div class="legend-box" style="background: #e3f2fd; border: 2px solid #2196f3;"></div> |
|
|
<span><strong>High Privacy:</strong> Reconstruction fails - data protected!</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="text-align: center; margin-top: 1.5rem;"> |
|
|
<div class="reconstruction-quality quality-high" id="recon-quality" style="display: inline-block; padding: 0.75rem 1.5rem; font-size: 1.1rem;"> |
|
|
⚠️ Medium Quality |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="attack-demo" style="margin-top: 2rem;"> |
|
|
<div class="demo-panel"> |
|
|
<h3>🛡️ Differential Privacy Settings</h3> |
|
|
<div class="demo-controls"> |
|
|
<label>Gradient Clipping Norm: <span id="recon-clipping">1.0</span></label> |
|
|
<input type="range" class="demo-slider" id="recon-clipping-slider" min="0.1" max="5" step="0.1" value="1.0"> |
|
|
<div class="privacy-scale"> |
|
|
<span style="font-size: 0.75rem;">🔒 Tight Clipping (More Private)</span> |
|
|
<span style="font-size: 0.75rem;">🔓 Loose Clipping (Less Private)</span> |
|
|
</div> |
|
|
|
|
|
<label style="margin-top: 1rem;">Noise Multiplier (σ): <span id="recon-noise-level">1.0</span></label> |
|
|
<input type="range" class="demo-slider" id="recon-noise-slider" min="0" max="3" step="0.1" value="1.0"> |
|
|
<div class="privacy-scale"> |
|
|
<span style="font-size: 0.75rem;">🔇 No Noise (Vulnerable)</span> |
|
|
<span style="font-size: 0.75rem;">🔊 High Noise (Protected)</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="control-button" onclick="runReconstructionAttack()">🔄 Update Reconstruction</button> |
|
|
</div> |
|
|
|
|
|
<div class="demo-panel"> |
|
|
<h3>📊 Attack Analysis</h3> |
|
|
<div class="demo-result"> |
|
|
<div style="margin-bottom: 1rem;"> |
|
|
<strong>Reconstruction SSIM Score:</strong> |
|
|
<div style="font-size: 1.8rem; color: #dc3545; font-weight: bold; margin: 0.5rem 0;" id="ssim-score">0.85</div> |
|
|
<div style="font-size: 0.85rem; color: #666;"> |
|
|
(1.0 = perfect reconstruction, 0.0 = completely failed) |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ddd;"> |
|
|
<div style="display: flex; justify-content: space-between; margin: 0.5rem 0;"> |
|
|
<span>Privacy Level:</span> |
|
|
<span id="privacy-status" style="font-weight: bold; color: #dc3545;">❌ Low (ε ≈ 8.0)</span> |
|
|
</div> |
|
|
<div style="display: flex; justify-content: space-between; margin: 0.5rem 0;"> |
|
|
<span>Attack Success:</span> |
|
|
<span id="attack-success" style="font-weight: bold; color: #dc3545;">92%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="privacy-explanation" id="recon-explanation" style="margin-top: 1rem;"> |
|
|
⚠️ Without sufficient privacy protection, attackers can reconstruct training images with high fidelity from gradient information alone! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<canvas id="reconstruction-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;"> |
|
|
<h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> |
|
|
<span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack |
|
|
</h3> |
|
|
<p style="font-size: 1rem; line-height: 1.6; margin: 0;"> |
|
|
<strong>Gradient clipping + noise:</strong> DP-SGD clips each person's influence on the model, then drowns it in noise - like taking a photo and adding so much blur that faces become unrecognizable blobs. Attackers cannot reverse-engineer the original training images from the model's outputs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="inversion-content" class="attack-content"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">🔄</div> |
|
|
<div> |
|
|
<h2>Model Inversion Attack</h2> |
|
|
<p>Extract representative features for each class</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<strong>Attack Goal:</strong> Generate synthetic data that represents what the model learned about each class, potentially revealing sensitive attributes. |
|
|
</div> |
|
|
|
|
|
<div class="attack-demo"> |
|
|
<div class="demo-panel" style="padding: 1.5rem;"> |
|
|
<h3 style="margin-bottom: 1.5rem;">Inversion Parameters</h3> |
|
|
<div class="demo-controls" style="gap: 1.5rem;"> |
|
|
<div style="margin-bottom: 1.5rem;"> |
|
|
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;"> |
|
|
Target Class: <span id="inversion-class" style="color: #1976d2; font-weight: 600;">Digit 7</span> |
|
|
</label> |
|
|
<select id="inversion-class-select" class="parameter-select" style="width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 4px; border: 2px solid #e0e0e0;"> |
|
|
<option value="0">Digit 0</option> |
|
|
<option value="1">Digit 1</option> |
|
|
<option value="7" selected>Digit 7</option> |
|
|
<option value="9">Digit 9</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div style="margin-bottom: 1.5rem;"> |
|
|
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;"> |
|
|
Privacy Level: <span id="inversion-privacy" style="color: #1976d2; font-weight: 600;">Medium</span> |
|
|
</label> |
|
|
<input type="range" class="demo-slider" id="inversion-privacy-slider" min="1" max="10" step="1" value="5" style="width: 100%; margin-top: 0.5rem;"> |
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;"> |
|
|
<span style="text-align: left;">🔒 High Privacy<br/>(ε = 1.0)</span> |
|
|
<span style="text-align: right;">🔓 Low Privacy<br/>(ε = 10.0)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="control-button" onclick="runInversionAttack()" style="width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 1rem;">Generate Class Representative</button> |
|
|
</div> |
|
|
|
|
|
<div class="demo-panel" style="padding: 1.5rem;"> |
|
|
<h3 style="margin-bottom: 1.5rem;">Generated Features</h3> |
|
|
<div class="visual-demo"> |
|
|
<div class="visual-item"> |
|
|
<canvas id="inversion-canvas" width="160" height="160" style="border-radius: 8px; margin: 0 auto 1rem; display: block; border: 3px solid #2196f3; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></canvas> |
|
|
<div style="font-size: 1rem; font-weight: 500; margin-bottom: 0.75rem;">Inverted Features</div> |
|
|
<div style="font-size: 0.9rem; color: #666; margin-bottom: 0.5rem;"> |
|
|
Confidence: <span id="inversion-confidence" style="font-weight: 600; color: #1976d2;">87%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="privacy-explanation" style="margin-top: 1.5rem; padding: 1.25rem; background: #fff3e0; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 4px solid #ff9800;"> |
|
|
<div id="inversion-explanation"> |
|
|
⚠️ Medium privacy. Some class features are visible but degraded. Move the slider left for higher privacy! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;"> |
|
|
<h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> |
|
|
<span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack |
|
|
</h3> |
|
|
<p style="font-size: 1rem; line-height: 1.6; margin: 0;"> |
|
|
<strong>Feature scrambling:</strong> DP-SGD scrambles what the model "remembers" about each class. Instead of learning "digit 7 looks like this sharp image," it learns "7 is somewhere in this fuzzy cloud." Attackers cannot extract clear class representatives or features. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="property-content" class="attack-content"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">📊</div> |
|
|
<div> |
|
|
<h2>Property Inference Attack</h2> |
|
|
<p>Infer statistical properties of the training dataset</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="warning-box"> |
|
|
<strong>Privacy Risk:</strong> Attackers can infer sensitive dataset properties like demographic distributions, even without seeing individual records. |
|
|
</div> |
|
|
|
|
|
<div class="attack-demo"> |
|
|
<div class="demo-panel" style="padding: 1.5rem;"> |
|
|
<h3 style="margin-bottom: 1.5rem;">Target Properties</h3> |
|
|
<div class="demo-controls" style="gap: 1.5rem;"> |
|
|
<div style="margin-bottom: 1.5rem;"> |
|
|
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">Property Type:</label> |
|
|
<select id="property-type" class="parameter-select" style="width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 4px; border: 2px solid #e0e0e0;"> |
|
|
<option value="gender">Gender Distribution</option> |
|
|
<option value="age">Age Distribution</option> |
|
|
<option value="location">Geographic Distribution</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div style="margin-bottom: 1.5rem;"> |
|
|
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;"> |
|
|
Privacy Level: <span id="property-privacy" style="color: #1976d2; font-weight: 600;">Medium</span> |
|
|
</label> |
|
|
<input type="range" class="demo-slider" id="property-privacy-slider" min="1" max="10" step="1" value="5" style="width: 100%; margin-top: 0.5rem;"> |
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;"> |
|
|
<span style="text-align: left;">🔒 High Privacy<br/>(ε = 1.0)</span> |
|
|
<span style="text-align: right;">🔓 Low Privacy<br/>(ε = 10.0)</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="margin-bottom: 1.5rem;"> |
|
|
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;"> |
|
|
Model Access: <span id="property-access" style="color: #1976d2; font-weight: 600;">Black-box</span> |
|
|
</label> |
|
|
<input type="range" class="demo-slider" id="property-access-slider" min="1" max="3" step="1" value="1" style="width: 100%; margin-top: 0.5rem;"> |
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;"> |
|
|
<span>Black-box</span> |
|
|
<span>Gray-box</span> |
|
|
<span>White-box</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="control-button" onclick="runPropertyAttack()" style="width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 1rem;">Infer Properties</button> |
|
|
</div> |
|
|
|
|
|
<div class="demo-panel" style="padding: 1.5rem;"> |
|
|
<h3 style="margin-bottom: 1.5rem;">Inferred Properties</h3> |
|
|
<div class="demo-result"> |
|
|
<div style="font-size: 1rem; font-weight: 500; margin-bottom: 1rem;">Inferred Distribution:</div> |
|
|
<div style="margin: 1.5rem 0;"> |
|
|
<div style="display: flex; justify-content: space-between; margin: 0.75rem 0; padding: 0.5rem; background: #f5f5f5; border-radius: 4px;"> |
|
|
<span style="font-weight: 500;">Male:</span> <span id="property-male" style="font-weight: 600; color: #1976d2;">52% ± 8%</span> |
|
|
</div> |
|
|
<div style="display: flex; justify-content: space-between; margin: 0.75rem 0; padding: 0.5rem; background: #f5f5f5; border-radius: 4px;"> |
|
|
<span style="font-weight: 500;">Female:</span> <span id="property-female" style="font-weight: 600; color: #1976d2;">48% ± 8%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div style="font-size: 0.85rem; color: #666; font-style: italic;"> |
|
|
Confidence intervals show attack uncertainty |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="privacy-explanation" style="margin-top: 1.5rem; padding: 1.25rem; background: #fff3e0; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 4px solid #ff9800;"> |
|
|
<div id="property-explanation"> |
|
|
⚠️ Medium privacy. The attacker can infer dataset properties with moderate accuracy. Move the slider left for higher privacy! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<canvas id="property-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;"> |
|
|
<h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> |
|
|
<span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack |
|
|
</h3> |
|
|
<p style="font-size: 1rem; line-height: 1.6; margin: 0;"> |
|
|
<strong>Privacy budget tracking:</strong> DP-SGD keeps a "privacy budget" (ε) - like a bank account that tracks how much information leaked. When the budget runs low, training stops to prevent dataset statistics (like gender distribution or age ranges) from being exposed. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="linkage-content" class="attack-content"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">🔗</div> |
|
|
<div> |
|
|
<h2>Linkage Attack</h2> |
|
|
<p>Combine model outputs with auxiliary data sources</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="warning-box"> |
|
|
<strong>Advanced Threat:</strong> Attackers combine model predictions with external datasets (social media, public records) to identify individuals and infer sensitive attributes. |
|
|
</div> |
|
|
|
|
|
<div class="linkage-demo"> |
|
|
<div class="linkage-source"> |
|
|
<h4>Model Outputs</h4> |
|
|
<div>• Prediction scores</div> |
|
|
<div>• Confidence levels</div> |
|
|
<div>• Feature importance</div> |
|
|
</div> |
|
|
|
|
|
<div class="linkage-arrow">+</div> |
|
|
|
|
|
<div class="linkage-source"> |
|
|
<h4>Auxiliary Data</h4> |
|
|
<div>• Public records</div> |
|
|
<div>• Social media</div> |
|
|
<div>• Purchase history</div> |
|
|
</div> |
|
|
|
|
|
<div class="linkage-arrow">→</div> |
|
|
|
|
|
<div class="linkage-source"> |
|
|
<h4>Linked Profile</h4> |
|
|
<div>• Identity revealed</div> |
|
|
<div>• Sensitive attributes</div> |
|
|
<div>• Behavioral patterns</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="attack-demo"> |
|
|
<div class="demo-panel"> |
|
|
<h3>Linkage Scenario</h3> |
|
|
<div class="demo-controls"> |
|
|
<label>Auxiliary Data Quality: <span id="linkage-quality">High</span></label> |
|
|
<input type="range" class="demo-slider" id="linkage-quality-slider" min="1" max="5" step="1" value="4"> |
|
|
|
|
|
<label>Model Privacy: <span id="linkage-model-privacy">Low (ε=8.0)</span></label> |
|
|
<input type="range" class="demo-slider" id="linkage-privacy-slider" min="1" max="10" step="1" value="8"> |
|
|
</div> |
|
|
<button class="control-button" onclick="runLinkageAttack()">Simulate Linkage</button> |
|
|
</div> |
|
|
|
|
|
<div class="demo-panel"> |
|
|
<h3>Linkage Success</h3> |
|
|
<div class="demo-result"> |
|
|
<div>Successful Links: <span class="success-rate" id="linkage-success">68%</span></div> |
|
|
<div>Confidence: <span id="linkage-confidence">High</span></div> |
|
|
<div style="margin-top: 1rem; font-size: 0.9rem;"> |
|
|
<div>• 340 individuals identified</div> |
|
|
<div>• 89% attribute accuracy</div> |
|
|
<div>• 12% false positives</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<canvas id="linkage-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;"> |
|
|
<h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> |
|
|
<span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack |
|
|
</h3> |
|
|
<p style="font-size: 1rem; line-height: 1.6; margin: 0;"> |
|
|
<strong>Output noise + bounded leakage:</strong> DP-SGD adds noise to model predictions AND tracks total privacy loss (ε). Even when attackers combine model outputs with external datasets (social media, public records), the mathematical privacy guarantee ensures they cannot reliably link individuals or infer sensitive attributes. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="comparison-content" class="attack-content"> |
|
|
<div class="attack-section"> |
|
|
<div class="attack-title"> |
|
|
<div class="attack-icon">⚖️</div> |
|
|
<div> |
|
|
<h2>Attack Effectiveness Comparison</h2> |
|
|
<p>How different privacy levels affect attack success rates</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="comparison-grid"> |
|
|
<div class="comparison-card"> |
|
|
<h3>No Privacy (ε = ∞)</h3> |
|
|
<div class="comparison-value" style="color: #d32f2f;">85%</div> |
|
|
<div>Average Attack Success</div> |
|
|
</div> |
|
|
<div class="comparison-card"> |
|
|
<h3>Low Privacy (ε = 8.0)</h3> |
|
|
<div class="comparison-value" style="color: #f57c00;">72%</div> |
|
|
<div>Average Attack Success</div> |
|
|
</div> |
|
|
<div class="comparison-card"> |
|
|
<h3>Medium Privacy (ε = 3.0)</h3> |
|
|
<div class="comparison-value" style="color: #fbc02d;">58%</div> |
|
|
<div>Average Attack Success</div> |
|
|
</div> |
|
|
<div class="comparison-card"> |
|
|
<h3>High Privacy (ε = 1.0)</h3> |
|
|
<div class="comparison-value" style="color: #2e7d32;">42%</div> |
|
|
<div>Average Attack Success</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<canvas id="comparison-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<strong>Key Insight:</strong> As privacy budget (ε) decreases, attack success rates drop significantly. DP-SGD provides measurable protection against all attack types. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
{% endblock %} |
|
|
|
|
|
{% block extra_scripts %} |
|
|
<script src="{{ url_for('static', filename='js/attacks.js') }}"></script> |
|
|
{% endblock %} |
|
|
|
