Hugging Face's logo

Spaces:
Artificial-superintelligence
/
AItestt
Running

App Files Community
Artificial-superintelligence commited on
Commit
e9488eb
·
verified ·
1 Parent(s): 74a1521

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +156 -0
index.html ADDED
@@ -0,0 +1,156 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced Terminal & Image Download</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ font-family: monospace;
11
+ background: black;
12
+ color: #00ff00;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ }
18
+
19
+ .container {
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ justify-content: center;
24
+ }
25
+
26
+ .button-container {
27
+ margin-bottom: 20px;
28
+ }
29
+
30
+ button {
31
+ background-color: #00ff00;
32
+ border: 1px solid #00ff00;
33
+ padding: 10px 20px;
34
+ margin: 10px;
35
+ color: black;
36
+ font-size: 16px;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .image-container {
41
+ display: none;
42
+ justify-content: center;
43
+ align-items: center;
44
+ }
45
+
46
+ .terminal {
47
+ display: none;
48
+ width: 80%;
49
+ height: 80%;
50
+ background: black;
51
+ border: 2px solid #00ff00;
52
+ padding: 10px;
53
+ overflow-y: auto;
54
+ }
55
+
56
+ .input-line {
57
+ display: flex;
58
+ align-items: center;
59
+ }
60
+
61
+ .prompt {
62
+ margin-right: 5px;
63
+ }
64
+
65
+ .input {
66
+ border: none;
67
+ background: transparent;
68
+ color: #00ff00;
69
+ outline: none;
70
+ flex: 1;
71
+ }
72
+
73
+ .output {
74
+ white-space: pre-wrap;
75
+ margin: 5px 0;
76
+ }
77
+
78
+ </style>
79
+ </head>
80
+ <body>
81
+ <div class="container">
82
+ <div class="button-container">
83
+ <button onclick="showImages()">Show Images</button>
84
+ <button onclick="showTerminal()">Show Terminal</button>
85
+ </div>
86
+
87
+ <!-- Image Container -->
88
+ <div class="image-container" id="image-container">
89
+ <h3>Downloaded Image:</h3>
90
+ <img id="downloaded-image" src="" alt="Image will appear here" style="width: 100%; max-width: 600px;">
91
+ <p id="image-size"></p>
92
+ <input type="text" id="image-url" placeholder="Enter image URL">
93
+ <button onclick="downloadImage()">Download Image</button>
94
+ </div>
95
+
96
+ <!-- Terminal Container -->
97
+ <div class="terminal" id="terminal">
98
+ <div class="output">Welcome to the Advanced KalY Linux Terminal! Type `help` for a list of commands.</div>
99
+ <div class="input-line">
100
+ <span class="prompt">kaly@linux:~$</span>
101
+ <input type="text" class="input" id="input" autofocus>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <script>
107
+ function showImages() {
108
+ document.getElementById('image-container').style.display = 'flex';
109
+ document.getElementById('terminal').style.display = 'none';
110
+ }
111
+
112
+ function showTerminal() {
113
+ document.getElementById('terminal').style.display = 'block';
114
+ document.getElementById('image-container').style.display = 'none';
115
+ }
116
+
117
+ function downloadImage() {
118
+ const imageUrl = document.getElementById('image-url').value;
119
+ if (imageUrl) {
120
+ fetch(`/download_image?url=${encodeURIComponent(imageUrl)}`)
121
+ .then(response => response.json())
122
+ .then(data => {
123
+ if (data.success) {
124
+ document.getElementById('downloaded-image').src = data.image_url;
125
+ document.getElementById('image-size').innerText = `File size: ${data.file_size}`;
126
+ } else {
127
+ alert('Failed to download image.');
128
+ }
129
+ });
130
+ } else {
131
+ alert('Please enter a valid image URL.');
132
+ }
133
+ }
134
+
135
+ document.getElementById("input").addEventListener("keydown", function (event) {
136
+ if (event.key === "Enter") {
137
+ let command = event.target.value;
138
+ fetch('/terminal', {
139
+ method: 'POST',
140
+ headers: {
141
+ 'Content-Type': 'application/json'
142
+ },
143
+ body: JSON.stringify({ command: command })
144
+ })
145
+ .then(response => response.json())
146
+ .then(data => {
147
+ let output = document.querySelector(".output");
148
+ output.textContent += '\n' + data.output;
149
+ event.target.value = '';
150
+ window.scrollTo(0, document.body.scrollHeight);
151
+ });
152
+ }
153
+ });
154
+ </script>
155
+ </body>
156
+ </html>