|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Membership Inference</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="app"> |
|
|
<header class="app-header"> |
|
|
<h1>Image Membership Inference</h1> |
|
|
<p>Check if an image is likely within the model's training data</p> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<form id="upload-form"> |
|
|
<div class="upload-container"> |
|
|
<label for="image-upload" class="upload-label"> |
|
|
<div id="preview-container" class="hidden"> |
|
|
<img id="image-preview" src="" alt="Preview"> |
|
|
</div> |
|
|
<div id="upload-placeholder" class="upload-placeholder"> |
|
|
<span>Click to upload an image</span> |
|
|
</div> |
|
|
</label> |
|
|
<input |
|
|
id="image-upload" |
|
|
type="file" |
|
|
accept="image/*" |
|
|
class="file-input" |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
type="submit" |
|
|
id="submit-button" |
|
|
class="submit-button" |
|
|
disabled |
|
|
> |
|
|
Check Membership |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div id="error-message" class="error-message hidden"></div> |
|
|
|
|
|
<div id="result-container" class="result-container hidden"> |
|
|
<h2>Result</h2> |
|
|
<p id="result-message" class="result-message"></p> |
|
|
<p id="membership-status" class="membership-status"></p> |
|
|
<div class="probability-bar"> |
|
|
<div id="probability-fill" class="probability-fill"></div> |
|
|
<span id="probability-text" class="probability-text"></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="loading" class="loading hidden"> |
|
|
<div class="spinner"></div> |
|
|
<p>Processing image...</p> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script> |
|
|
</body> |
|
|
</html> |
