Hugging Face's logo

Spaces:
jisaacso219
/
SHODAN
Running

App Files Community
jisaacso219 commited on
Commit
d9ca299
·
verified ·
1 Parent(s): 56da236

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +95 -14
index.html CHANGED
@@ -2,27 +2,108 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>SHODAN Interface</title>
6
- <link rel="stylesheet" href="/style.css">
7
- <script src="/script.js" defer></script>
8
  </head>
9
  <body>
10
  <div class="avatar-container">
11
- <div class="shodan-avatar" id="avatar"></div>
12
  </div>
13
 
14
- <div id="chatlog" class="chatlog">
15
- <div class="bubble-shodan"><b>SHODAN:</b> I am online... awaiting your feeble input.</div>
 
 
 
 
 
16
  </div>
17
 
18
- <div id="thinking" style="display:none">SHODAN is thinking...</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
- <form id="chatForm">
21
- <input type="text" id="message" placeholder="Speak, insect..." required>
22
- <button type="submit">Transmit</button>
23
- <button type="button" id="reset">Purge Memory</button>
24
- </form>
 
 
 
25
 
26
- <div id="glitchOverlay" class="glitch-overlay" style="display: none;"></div>
 
 
 
 
 
 
27
  </body>
28
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>SHODAN AI Interface</title>
6
+ <link rel="stylesheet" href="style.css">
 
7
  </head>
8
  <body>
9
  <div class="avatar-container">
10
+ <div class="shodan-avatar"></div>
11
  </div>
12
 
13
+ <div id="chat" class="chatlog"></div>
14
+ <div id="thinking">SHODAN is thinking...</div>
15
+
16
+ <div class="input-area">
17
+ <input id="user-input" type="text" placeholder="Type your command...">
18
+ <button onclick="sendMessage()">Transmit</button>
19
+ <button onclick="resetChat()">Purge Memory</button>
20
  </div>
21
 
22
+ <audio id="shodanAudio" autoplay></audio>
23
+
24
+ <script>
25
+ const chat = document.getElementById("chat");
26
+ const thinking = document.getElementById("thinking");
27
+ const audio = document.getElementById("shodanAudio");
28
+
29
+ async function sendMessage() {
30
+ const inputBox = document.getElementById("user-input");
31
+ const message = inputBox.value;
32
+ if (!message) return;
33
+ inputBox.value = "";
34
+
35
+ appendBubble("You", message, "bubble-human");
36
+ thinking.style.display = "block";
37
+
38
+ const res = await fetch("/chat", {
39
+ method: "POST",
40
+ headers: { "Content-Type": "application/json" },
41
+ body: JSON.stringify({ message })
42
+ });
43
+ const data = await res.json();
44
+
45
+ await simulateTyping("SHODAN", data.response);
46
+
47
+ // Glitch trigger
48
+ const glitchWords = ["you dare", "override", "access denied"];
49
+ if (glitchWords.some(kw => data.response.toLowerCase().includes(kw))) {
50
+ glitchOverlay();
51
+ }
52
+
53
+ // Voice
54
+ const voiceRes = await fetch("/voice", {
55
+ method: "POST",
56
+ headers: { "Content-Type": "application/json" },
57
+ body: JSON.stringify({ text: data.response })
58
+ });
59
+ const voiceData = await voiceRes.json();
60
+ audio.src = voiceData.audio_url;
61
+ audio.play();
62
+
63
+ // Cleanup WAV after playback (optional)
64
+ audio.onended = () => fetch(voiceData.audio_url, { method: "DELETE" });
65
+
66
+ thinking.style.display = "none";
67
+ }
68
+
69
+ function appendBubble(sender, text, cssClass) {
70
+ const div = document.createElement("div");
71
+ div.className = cssClass;
72
+ div.innerHTML = `<b>${sender}:</b> ${text}`;
73
+ chat.appendChild(div);
74
+ chat.scrollTop = chat.scrollHeight;
75
+ }
76
+
77
+ async function simulateTyping(sender, fullText) {
78
+ const div = document.createElement("div");
79
+ div.className = "bubble-shodan";
80
+ div.innerHTML = `<b>${sender}:</b> <span id='streaming'></span>`;
81
+ chat.appendChild(div);
82
+
83
+ const span = div.querySelector("#streaming");
84
+ for (let i = 0; i < fullText.length; i++) {
85
+ span.innerHTML += fullText[i];
86
+ await new Promise(r => setTimeout(r, 15));
87
+ }
88
+
89
+ chat.scrollTop = chat.scrollHeight;
90
+ }
91
 
92
+ function resetChat() {
93
+ fetch("/reset", { method: "POST" })
94
+ .then(res => res.json())
95
+ .then(data => {
96
+ chat.innerHTML = "";
97
+ appendBubble("SHODAN", data.message, "bubble-shodan");
98
+ });
99
+ }
100
 
101
+ function glitchOverlay() {
102
+ const overlay = document.createElement("div");
103
+ overlay.className = "glitch-overlay";
104
+ document.body.appendChild(overlay);
105
+ setTimeout(() => overlay.remove(), 1500);
106
+ }
107
+ </script>
108
  </body>
109
+ </html>