Hugging Face's logo

Spaces:
Harshasnade
/
Deepfake_Detection_System_V1
Sleeping

App Files Community
Harshasnade commited on
Commit
8ee24ff
·
1 Parent(s): 36161f1

Add simple demo frontend

Browse files
Files changed (2) hide show
  1. backend/app.py +2 -6
  2. backend/static/demo.html +144 -0
backend/app.py CHANGED
@@ -167,12 +167,8 @@ def predict_image(image_path):
167
 
168
  @app.route('/')
169
  def index():
170
- """Backend Root"""
171
- return jsonify({
172
- "status": "online",
173
- "message": "DeepGuard Backend is Running",
174
- "endpoints": ["/api/predict", "/api/history", "/api/health"]
175
- })
176
 
177
  @app.route('/history_uploads/<path:filename>')
178
  def serve_history_image(filename):
 
167
 
168
  @app.route('/')
169
  def index():
170
+ """Serve the simple demo frontend"""
171
+ return send_from_directory('static', 'demo.html')
 
 
 
 
172
 
173
  @app.route('/history_uploads/<path:filename>')
174
  def serve_history_image(filename):
backend/static/demo.html ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>DeepGuard API Demo</title>
8
+ <style>
9
+ body {
10
+ font-family: system-ui, -apple-system, sans-serif;
11
+ max-width: 800px;
12
+ margin: 2rem auto;
13
+ padding: 0 1rem;
14
+ background: #111;
15
+ color: #fff;
16
+ }
17
+
18
+ .container {
19
+ background: #222;
20
+ padding: 2rem;
21
+ border-radius: 12px;
22
+ border: 1px solid #333;
23
+ }
24
+
25
+ h1 {
26
+ margin-top: 0;
27
+ color: #E3F514;
28
+ }
29
+
30
+ .upload-box {
31
+ border: 2px dashed #444;
32
+ padding: 2rem;
33
+ text-align: center;
34
+ margin: 2rem 0;
35
+ border-radius: 8px;
36
+ cursor: pointer;
37
+ transition: 0.2s;
38
+ }
39
+
40
+ .upload-box:hover {
41
+ border-color: #E3F514;
42
+ background: #2a2a2a;
43
+ }
44
+
45
+ #result {
46
+ margin-top: 2rem;
47
+ display: none;
48
+ }
49
+
50
+ .badge {
51
+ display: inline-block;
52
+ padding: 0.5rem 1rem;
53
+ border-radius: 4px;
54
+ font-weight: bold;
55
+ }
56
+
57
+ .badge.REAL {
58
+ background: #10B981;
59
+ color: #fff;
60
+ }
61
+
62
+ .badge.FAKE {
63
+ background: #EF4444;
64
+ color: #fff;
65
+ }
66
+
67
+ pre {
68
+ background: #000;
69
+ padding: 1rem;
70
+ overflow-x: auto;
71
+ border-radius: 4px;
72
+ }
73
+
74
+ img {
75
+ max-width: 100%;
76
+ border-radius: 4px;
77
+ margin-top: 1rem;
78
+ }
79
+ </style>
80
+ </head>
81
+
82
+ <body>
83
+ <div class="container">
84
+ <h1>⚡ DeepGuard API Demo</h1>
85
+ <p>This is a simple demo interface running directly on the inference server.</p>
86
+
87
+ <div class="upload-box" onclick="document.getElementById('fileInput').click()">
88
+ <p>Click to Upload Image for Analysis</p>
89
+ <input type="file" id="fileInput" hidden accept="image/*" onchange="analyze(this.files[0])">
90
+ </div>
91
+
92
+ <div id="loading" style="display: none;">Analyzing...</div>
93
+
94
+ <div id="result">
95
+ <h2 id="predictionStatus"></h2>
96
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
97
+ <div>
98
+ <h3>Heatmap Analysis</h3>
99
+ <img id="heatmapImg" src="">
100
+ </div>
101
+ <div>
102
+ <h3>Raw API Response</h3>
103
+ <pre id="jsonResult"></pre>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <script>
110
+ async function analyze(file) {
111
+ if (!file) return;
112
+
113
+ document.getElementById('loading').style.display = 'block';
114
+ document.getElementById('result').style.display = 'none';
115
+
116
+ const formData = new FormData();
117
+ formData.append('file', file);
118
+
119
+ try {
120
+ const res = await fetch('/api/predict', {
121
+ method: 'POST',
122
+ body: formData
123
+ });
124
+
125
+ const data = await res.json();
126
+
127
+ document.getElementById('loading').style.display = 'none';
128
+ document.getElementById('result').style.display = 'block';
129
+
130
+ const statusEl = document.getElementById('predictionStatus');
131
+ statusEl.innerHTML = `Result: <span class="badge ${data.prediction}">${data.prediction}</span> (${(data.confidence * 100).toFixed(1)}%)`;
132
+
133
+ document.getElementById('heatmapImg').src = 'data:image/jpeg;base64,' + data.heatmap;
134
+ document.getElementById('jsonResult').textContent = JSON.stringify(data, null, 2);
135
+
136
+ } catch (err) {
137
+ alert('Error: ' + err.message);
138
+ document.getElementById('loading').style.display = 'none';
139
+ }
140
+ }
141
+ </script>
142
+ </body>
143
+
144
+ </html>