Hugging Face's logo

Spaces:
Ivan000
/
AI-screensaver
Running

App Files Community
Ivan000 commited on
Commit
2976989
·
verified ·
1 Parent(s): e6fd525

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +5 -70
index.html CHANGED
@@ -53,7 +53,6 @@
53
 
54
  #token-input,
55
  #prompt-input,
56
- #frequency-input,
57
  #clock-color-input,
58
  #clock-size-input {
59
  width: 100%;
@@ -121,33 +120,20 @@
121
  margin-top: 10px;
122
  margin-bottom: 5px;
123
  }
124
-
125
- .checkbox-container {
126
- display: flex;
127
- align-items: center;
128
- margin-top: 10px;
129
- }
130
-
131
- .checkbox-container input {
132
- margin-right: 10px;
133
- }
134
  </style>
135
  </head>
136
 
137
  <body>
138
  <img id="background-image" alt="AI generated abstract landscape based on current time" src="">
139
  <div id="clock"></div>
140
- <button id="settings-btn">settings</button>
141
  <div id="settings-panel">
142
  <label for="token-input">Hugging Face Token:</label>
143
- <input type="text" id="token-input" placeholder="Enter Hugging Face token">
144
 
145
  <label for="prompt-input">Custom Prompt:</label>
146
  <textarea id="prompt-input" rows="4" placeholder="Enter custom prompt (use {time} for current time)"></textarea>
147
 
148
- <label for="frequency-input">Image Generation Frequency (minutes):</label>
149
- <input type="number" id="frequency-input" placeholder="Image generation frequency (minutes)" min="1" max="60">
150
-
151
  <label for="clock-color-input">Clock Color:</label>
152
  <input type="color" id="clock-color-input">
153
 
@@ -155,11 +141,6 @@
155
  <input type="range" id="clock-size-input" min="1" max="20" step="0.1">
156
  <span id="clock-size-value"></span>
157
 
158
- <div class="checkbox-container">
159
- <input type="checkbox" id="keep-awake-checkbox">
160
- <label for="keep-awake-checkbox">Prevent screen lock (Android)</label>
161
- </div>
162
-
163
  <button id="fullscreen-btn" class="btn">Toggle Fullscreen</button>
164
  <button id="save-settings" class="btn">Save</button>
165
  <button id="test-image" class="btn">Test Image Generation</button>
@@ -169,12 +150,10 @@
169
  <script>
170
  let hfToken = localStorage.getItem('hfToken') || '';
171
  let customPrompt = localStorage.getItem('customPrompt') || 'beautiful abstract landscape that suits the time {time}';
172
- let generationFrequency = parseInt(localStorage.getItem('generationFrequency')) || 3;
173
  let clockColor = localStorage.getItem('clockColor') || '#00ff00';
174
  let clockSize = parseFloat(localStorage.getItem('clockSize')) || 8;
175
- let keepAwake = localStorage.getItem('keepAwake') === 'true';
176
  let imageGenerationInterval;
177
- let wakeLock = null;
178
 
179
  const DEFAULT_PROMPT = 'beautiful abstract landscape that suits the time {time}';
180
 
@@ -249,16 +228,12 @@
249
  .value = hfToken;
250
  document.getElementById('prompt-input')
251
  .value = customPrompt;
252
- document.getElementById('frequency-input')
253
- .value = generationFrequency;
254
  document.getElementById('clock-color-input')
255
  .value = clockColor;
256
  document.getElementById('clock-size-input')
257
  .value = clockSize;
258
  document.getElementById('clock-size-value')
259
  .textContent = clockSize + ' vw';
260
- document.getElementById('keep-awake-checkbox')
261
- .checked = keepAwake;
262
  }
263
 
264
  function toggleFullscreen() {
@@ -274,28 +249,7 @@
274
 
275
  function setupImageGenerationInterval() {
276
  clearInterval(imageGenerationInterval);
277
- imageGenerationInterval = setInterval(updateBackgroundImage, generationFrequency * 60 * 1000);
278
- }
279
-
280
- async function requestWakeLock() {
281
- if ('wakeLock' in navigator && keepAwake) {
282
- try {
283
- wakeLock = await navigator.wakeLock.request('screen');
284
- wakeLock.addEventListener('release', () => {
285
- console.log('Wake Lock was released');
286
- });
287
- console.log('Wake Lock is active');
288
- } catch (err) {
289
- console.error(`${err.name}, ${err.message}`);
290
- }
291
- }
292
- }
293
-
294
- async function releaseWakeLock() {
295
- if (wakeLock !== null) {
296
- await wakeLock.release();
297
- wakeLock = null;
298
- }
299
  }
300
 
301
  setInterval(updateClock, 1000);
@@ -304,7 +258,6 @@
304
  updateClock();
305
  updateBackgroundImage();
306
  initializeSettings();
307
- if (keepAwake) requestWakeLock();
308
 
309
  document.getElementById('settings-btn')
310
  .addEventListener('click', () => {
@@ -316,38 +269,26 @@
316
  .addEventListener('click', toggleFullscreen);
317
 
318
  document.getElementById('save-settings')
319
- .addEventListener('click', async () => {
320
  hfToken = document.getElementById('token-input')
321
  .value;
322
  customPrompt = document.getElementById('prompt-input')
323
  .value;
324
- generationFrequency = parseInt(document.getElementById('frequency-input')
325
- .value);
326
  clockColor = document.getElementById('clock-color-input')
327
  .value;
328
  clockSize = parseFloat(document.getElementById('clock-size-input')
329
  .value);
330
- keepAwake = document.getElementById('keep-awake-checkbox')
331
- .checked;
332
 
333
  localStorage.setItem('hfToken', hfToken);
334
  localStorage.setItem('customPrompt', customPrompt);
335
- localStorage.setItem('generationFrequency', generationFrequency);
336
  localStorage.setItem('clockColor', clockColor);
337
  localStorage.setItem('clockSize', clockSize);
338
- localStorage.setItem('keepAwake', keepAwake);
339
 
340
  document.getElementById('settings-panel')
341
  .style.display = 'none';
342
  updateBackgroundImage();
343
  setupImageGenerationInterval();
344
  updateClock();
345
-
346
- if (keepAwake) {
347
- await requestWakeLock();
348
- } else {
349
- await releaseWakeLock();
350
- }
351
  });
352
 
353
  document.getElementById('test-image')
@@ -386,12 +327,6 @@
386
  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
387
  });
388
  });
389
-
390
- document.addEventListener('visibilitychange', async () => {
391
- if (keepAwake && !document.hidden) {
392
- await requestWakeLock();
393
- }
394
- });
395
  </script>
396
  </body>
397
 
 
53
 
54
  #token-input,
55
  #prompt-input,
 
56
  #clock-color-input,
57
  #clock-size-input {
58
  width: 100%;
 
120
  margin-top: 10px;
121
  margin-bottom: 5px;
122
  }
 
 
 
 
 
 
 
 
 
 
123
  </style>
124
  </head>
125
 
126
  <body>
127
  <img id="background-image" alt="AI generated abstract landscape based on current time" src="">
128
  <div id="clock"></div>
129
+ <button id="settings-btn">⚙️</button>
130
  <div id="settings-panel">
131
  <label for="token-input">Hugging Face Token:</label>
132
+ <input type="password" id="token-input" placeholder="Enter Hugging Face token">
133
 
134
  <label for="prompt-input">Custom Prompt:</label>
135
  <textarea id="prompt-input" rows="4" placeholder="Enter custom prompt (use {time} for current time)"></textarea>
136
 
 
 
 
137
  <label for="clock-color-input">Clock Color:</label>
138
  <input type="color" id="clock-color-input">
139
 
 
141
  <input type="range" id="clock-size-input" min="1" max="20" step="0.1">
142
  <span id="clock-size-value"></span>
143
 
 
 
 
 
 
144
  <button id="fullscreen-btn" class="btn">Toggle Fullscreen</button>
145
  <button id="save-settings" class="btn">Save</button>
146
  <button id="test-image" class="btn">Test Image Generation</button>
 
150
  <script>
151
  let hfToken = localStorage.getItem('hfToken') || '';
152
  let customPrompt = localStorage.getItem('customPrompt') || 'beautiful abstract landscape that suits the time {time}';
153
+ const generationFrequency = 150; // 150 seconds
154
  let clockColor = localStorage.getItem('clockColor') || '#00ff00';
155
  let clockSize = parseFloat(localStorage.getItem('clockSize')) || 8;
 
156
  let imageGenerationInterval;
 
157
 
158
  const DEFAULT_PROMPT = 'beautiful abstract landscape that suits the time {time}';
159
 
 
228
  .value = hfToken;
229
  document.getElementById('prompt-input')
230
  .value = customPrompt;
 
 
231
  document.getElementById('clock-color-input')
232
  .value = clockColor;
233
  document.getElementById('clock-size-input')
234
  .value = clockSize;
235
  document.getElementById('clock-size-value')
236
  .textContent = clockSize + ' vw';
 
 
237
  }
238
 
239
  function toggleFullscreen() {
 
249
 
250
  function setupImageGenerationInterval() {
251
  clearInterval(imageGenerationInterval);
252
+ imageGenerationInterval = setInterval(updateBackgroundImage, generationFrequency * 1000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
253
  }
254
 
255
  setInterval(updateClock, 1000);
 
258
  updateClock();
259
  updateBackgroundImage();
260
  initializeSettings();
 
261
 
262
  document.getElementById('settings-btn')
263
  .addEventListener('click', () => {
 
269
  .addEventListener('click', toggleFullscreen);
270
 
271
  document.getElementById('save-settings')
272
+ .addEventListener('click', () => {
273
  hfToken = document.getElementById('token-input')
274
  .value;
275
  customPrompt = document.getElementById('prompt-input')
276
  .value;
 
 
277
  clockColor = document.getElementById('clock-color-input')
278
  .value;
279
  clockSize = parseFloat(document.getElementById('clock-size-input')
280
  .value);
 
 
281
 
282
  localStorage.setItem('hfToken', hfToken);
283
  localStorage.setItem('customPrompt', customPrompt);
 
284
  localStorage.setItem('clockColor', clockColor);
285
  localStorage.setItem('clockSize', clockSize);
 
286
 
287
  document.getElementById('settings-panel')
288
  .style.display = 'none';
289
  updateBackgroundImage();
290
  setupImageGenerationInterval();
291
  updateClock();
 
 
 
 
 
 
292
  });
293
 
294
  document.getElementById('test-image')
 
327
  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
328
  });
329
  });
 
 
 
 
 
 
330
  </script>
331
  </body>
332