Hugging Face's logo

Spaces:
kowalsky
/
fake-detection
Sleeping

App Files Community
kowalsky commited on
Commit
c63990a
·
1 Parent(s): 6266afe

updated the design

Browse files
Files changed (2) hide show
  1. templates/i.jpg +0 -0
  2. templates/index.html +48 -9
templates/i.jpg ADDED
templates/index.html CHANGED
@@ -6,18 +6,56 @@
6
  <title>Fake Audio Detection</title>
7
  <style>
8
  body {
9
- font-family: Arial, sans-serif;
10
- margin: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
12
  #console {
13
- border: 1px solid #ddd;
 
 
 
14
  padding: 10px;
 
15
  height: 200px;
16
  overflow-y: scroll;
17
  }
18
  .log {
19
  margin: 0;
20
  padding: 5px;
 
21
  }
22
  .log.real {
23
  color: green;
@@ -29,8 +67,10 @@
29
  </head>
30
  <body>
31
  <h1>Fake Audio Detection</h1>
32
- <button id="startButton">Start Detection</button>
33
- <button id="stopButton" disabled>Stop Detection</button>
 
 
34
  <div id="console"></div>
35
 
36
  <script>
@@ -70,7 +110,7 @@
70
  }
71
  };
72
 
73
- const response = await fetch(`${window.location.origin}/start_detection`, {
74
  method: 'POST',
75
  });
76
 
@@ -81,7 +121,7 @@
81
  const result = await response.json();
82
  logMessage(`Detection started: ${result.status}`, 'info');
83
 
84
- websocket = new WebSocket(`wss://${window.location.host}/ws`);
85
  websocket.onmessage = function(event) {
86
  const data = event.data;
87
  logMessage(`Detected ${data} audio`, data);
@@ -90,7 +130,7 @@
90
  logMessage('WebSocket connection closed', 'info');
91
  };
92
 
93
- mediaRecorder.start(5000); // Start recording with 3-second intervals
94
  } catch (error) {
95
  logMessage(`Error: ${error.message}`, 'error');
96
  }
@@ -136,4 +176,3 @@
136
  </script>
137
  </body>
138
  </html>
139
-
 
6
  <title>Fake Audio Detection</title>
7
  <style>
8
  body {
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: url('i.jpg') no-repeat center center fixed;
11
+ background-size: cover;
12
+ color: #f0f0f0;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ height: 100vh;
18
+ margin: 0;
19
+ }
20
+ h1 {
21
+ margin-bottom: 20px;
22
+ }
23
+ #buttons {
24
+ display: flex;
25
+ gap: 10px;
26
+ margin-bottom: 20px;
27
+ }
28
+ button {
29
+ padding: 10px 20px;
30
+ font-size: 16px;
31
+ cursor: pointer;
32
+ border: none;
33
+ border-radius: 5px;
34
+ background-color: #007BFF;
35
+ color: #fff;
36
+ transition: background-color 0.3s;
37
+ }
38
+ button:hover {
39
+ background-color: #0056b3;
40
+ }
41
+ button:disabled {
42
+ background-color: #555;
43
+ cursor: not-allowed;
44
  }
45
  #console {
46
+ width: 80%;
47
+ max-width: 600px;
48
+ border: 1px solid #444;
49
+ border-radius: 5px;
50
  padding: 10px;
51
+ background-color: rgba(30, 30, 30, 0.9);
52
  height: 200px;
53
  overflow-y: scroll;
54
  }
55
  .log {
56
  margin: 0;
57
  padding: 5px;
58
+ border-bottom: 1px solid #333;
59
  }
60
  .log.real {
61
  color: green;
 
67
  </head>
68
  <body>
69
  <h1>Fake Audio Detection</h1>
70
+ <div id="buttons">
71
+ <button id="startButton">Start Detection</button>
72
+ <button id="stopButton" disabled>Stop Detection</button>
73
+ </div>
74
  <div id="console"></div>
75
 
76
  <script>
 
110
  }
111
  };
112
 
113
+ const response = await fetch(`http://localhost:7860/start_detection`, {
114
  method: 'POST',
115
  });
116
 
 
121
  const result = await response.json();
122
  logMessage(`Detection started: ${result.status}`, 'info');
123
 
124
+ websocket = new WebSocket(`ws://localhost:7860/ws`);
125
  websocket.onmessage = function(event) {
126
  const data = event.data;
127
  logMessage(`Detected ${data} audio`, data);
 
130
  logMessage('WebSocket connection closed', 'info');
131
  };
132
 
133
+ mediaRecorder.start(3000); // Start recording with 3-second intervals
134
  } catch (error) {
135
  logMessage(`Error: ${error.message}`, 'error');
136
  }
 
176
  </script>
177
  </body>
178
  </html>