Hugging Face's logo

Spaces:
Ivan000
/
AI-screensaver
Running

App Files Community
Ivan000 commited on
Commit
6728031
·
verified ·
1 Parent(s): cd2da61

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +79 -7
index.html CHANGED
@@ -28,12 +28,14 @@
28
  position: fixed;
29
  top: 10px;
30
  right: 10px;
31
- background: none;
32
  border: none;
33
  color: #00ff00;
34
- font-size: 24px;
35
  cursor: pointer;
36
  z-index: 20;
 
 
37
  }
38
 
39
  #settings-panel {
@@ -54,7 +56,9 @@
54
  #token-input,
55
  #prompt-input,
56
  #clock-color-input,
57
- #clock-size-input {
 
 
58
  width: 100%;
59
  margin-bottom: 10px;
60
  }
@@ -120,17 +124,41 @@
120
  margin-top: 10px;
121
  margin-bottom: 5px;
122
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </style>
124
  </head>
125
 
126
  <body>
127
  <img id="background-image" alt="Please specify your HF token in the settings to generate images" src="">
128
  <div id="clock"></div>
129
- <button id="settings-btn">settings</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
 
@@ -141,19 +169,27 @@
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>
147
  <button id="reset-prompt" class="btn">Reset Prompt</button>
148
  </div>
 
 
 
149
 
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
 
@@ -186,7 +222,7 @@
186
  if (!hfToken) return;
187
 
188
  try {
189
- const response = await fetch('https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell', {
190
  method: 'POST',
191
  headers: {
192
  'Content-Type': 'application/json',
@@ -198,7 +234,8 @@
198
  });
199
 
200
  if (!response.ok) {
201
- throw new Error('Failed to generate image');
 
202
  }
203
 
204
  const blob = await response.blob();
@@ -213,6 +250,14 @@
213
  newImage.src = imageUrl;
214
  } catch (error) {
215
  console.error('Error generating image:', error);
 
 
 
 
 
 
 
 
216
  }
217
  }
218
 
@@ -221,6 +266,23 @@
221
  .slice(0, -3);
222
  const prompt = customPrompt.replace('{time}', currentTime);
223
  generateImage(prompt);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  }
225
 
226
  function initializeSettings() {
@@ -234,6 +296,10 @@
234
  .value = clockSize;
235
  document.getElementById('clock-size-value')
236
  .textContent = clockSize + ' vw';
 
 
 
 
237
  }
238
 
239
  function toggleFullscreen() {
@@ -278,11 +344,17 @@
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';
 
28
  position: fixed;
29
  top: 10px;
30
  right: 10px;
31
+ background: rgba(0, 255, 0, 0.2);
32
  border: none;
33
  color: #00ff00;
34
+ font-size: 16px;
35
  cursor: pointer;
36
  z-index: 20;
37
+ padding: 5px 10px;
38
+ border-radius: 5px;
39
  }
40
 
41
  #settings-panel {
 
56
  #token-input,
57
  #prompt-input,
58
  #clock-color-input,
59
+ #clock-size-input,
60
+ #model-select,
61
+ #generation-interval-input {
62
  width: 100%;
63
  margin-bottom: 10px;
64
  }
 
124
  margin-top: 10px;
125
  margin-bottom: 5px;
126
  }
127
+
128
+ #countdown-bar {
129
+ position: fixed;
130
+ bottom: 0;
131
+ left: 0;
132
+ height: 5px;
133
+ width: 100%;
134
+ background-color: rgba(0, 255, 0, 0.3);
135
+ z-index: 15;
136
+ }
137
+
138
+ #countdown-progress {
139
+ height: 100%;
140
+ width: 0%;
141
+ background-color: rgba(0, 255, 0, 0.7);
142
+ transition: width 1s linear;
143
+ }
144
  </style>
145
  </head>
146
 
147
  <body>
148
  <img id="background-image" alt="Please specify your HF token in the settings to generate images" src="">
149
  <div id="clock"></div>
150
+ <button id="settings-btn">Settings</button>
151
  <div id="settings-panel">
152
  <label for="token-input">Hugging Face Token:</label>
153
  <input type="password" id="token-input" placeholder="Enter Hugging Face token">
154
 
155
+ <label for="model-select">Select Model:</label>
156
+ <select id="model-select">
157
+ <option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
158
+ <option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
159
+ <option value="XLabs-AI/flux-RealismLora">flux-RealismLora</option>
160
+ </select>
161
+
162
  <label for="prompt-input">Custom Prompt:</label>
163
  <textarea id="prompt-input" rows="4" placeholder="Enter custom prompt (use {time} for current time)"></textarea>
164
 
 
169
  <input type="range" id="clock-size-input" min="1" max="20" step="0.1">
170
  <span id="clock-size-value"></span>
171
 
172
+ <label for="generation-interval-input">Image Generation Interval (seconds):</label>
173
+ <input type="number" id="generation-interval-input" min="10" step="1">
174
+
175
  <button id="fullscreen-btn" class="btn">Toggle Fullscreen</button>
176
  <button id="save-settings" class="btn">Save</button>
177
  <button id="test-image" class="btn">Test Image Generation</button>
178
  <button id="reset-prompt" class="btn">Reset Prompt</button>
179
  </div>
180
+ <div id="countdown-bar">
181
+ <div id="countdown-progress"></div>
182
+ </div>
183
 
184
  <script>
185
  let hfToken = localStorage.getItem('hfToken') || '';
186
  let customPrompt = localStorage.getItem('customPrompt') || 'beautiful abstract landscape that suits the time {time}';
187
+ let generationFrequency = parseInt(localStorage.getItem('generationFrequency')) || 150;
188
  let clockColor = localStorage.getItem('clockColor') || '#00ff00';
189
  let clockSize = parseFloat(localStorage.getItem('clockSize')) || 8;
190
+ let selectedModel = localStorage.getItem('selectedModel') || 'black-forest-labs/FLUX.1-schnell';
191
  let imageGenerationInterval;
192
+ let countdownInterval;
193
 
194
  const DEFAULT_PROMPT = 'beautiful abstract landscape that suits the time {time}';
195
 
 
222
  if (!hfToken) return;
223
 
224
  try {
225
+ const response = await fetch(`https://api-inference.huggingface.co/models/${selectedModel}`, {
226
  method: 'POST',
227
  headers: {
228
  'Content-Type': 'application/json',
 
234
  });
235
 
236
  if (!response.ok) {
237
+ const errorData = await response.json();
238
+ throw new Error(`${response.status}: ${errorData.error || 'Unknown error'}`);
239
  }
240
 
241
  const blob = await response.blob();
 
250
  newImage.src = imageUrl;
251
  } catch (error) {
252
  console.error('Error generating image:', error);
253
+ speakError(`Error generating image. ${error.message}`);
254
+ }
255
+ }
256
+
257
+ function speakError(message) {
258
+ if ('speechSynthesis' in window) {
259
+ const utterance = new SpeechSynthesisUtterance(message);
260
+ speechSynthesis.speak(utterance);
261
  }
262
  }
263
 
 
266
  .slice(0, -3);
267
  const prompt = customPrompt.replace('{time}', currentTime);
268
  generateImage(prompt);
269
+ startCountdown();
270
+ }
271
+
272
+ function startCountdown() {
273
+ const progressBar = document.getElementById('countdown-progress');
274
+ let timeLeft = generationFrequency;
275
+
276
+ clearInterval(countdownInterval);
277
+ countdownInterval = setInterval(() => {
278
+ timeLeft--;
279
+ const progress = ((generationFrequency - timeLeft) / generationFrequency) * 100;
280
+ progressBar.style.width = `${progress}%`;
281
+
282
+ if (timeLeft <= 0) {
283
+ clearInterval(countdownInterval);
284
+ }
285
+ }, 1000);
286
  }
287
 
288
  function initializeSettings() {
 
296
  .value = clockSize;
297
  document.getElementById('clock-size-value')
298
  .textContent = clockSize + ' vw';
299
+ document.getElementById('model-select')
300
+ .value = selectedModel;
301
+ document.getElementById('generation-interval-input')
302
+ .value = generationFrequency;
303
  }
304
 
305
  function toggleFullscreen() {
 
344
  .value;
345
  clockSize = parseFloat(document.getElementById('clock-size-input')
346
  .value);
347
+ selectedModel = document.getElementById('model-select')
348
+ .value;
349
+ generationFrequency = parseInt(document.getElementById('generation-interval-input')
350
+ .value);
351
 
352
  localStorage.setItem('hfToken', hfToken);
353
  localStorage.setItem('customPrompt', customPrompt);
354
  localStorage.setItem('clockColor', clockColor);
355
  localStorage.setItem('clockSize', clockSize);
356
+ localStorage.setItem('selectedModel', selectedModel);
357
+ localStorage.setItem('generationFrequency', generationFrequency);
358
 
359
  document.getElementById('settings-panel')
360
  .style.display = 'none';