Hugging Face's logo

Spaces:
djuna
/
gradient-array-slider
Running

App Files Community
djuna commited on
Commit
e44f5f1
·
verified ·
1 Parent(s): 99a6e86

Auto suggest upscale number

Browse files
Files changed (1) hide show
  1. index.html +54 -51
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -5,6 +6,23 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Dynamic Sliders with Editable Values and Array Upscaler</title>
7
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
  background-color: #f4f4f4;
@@ -30,13 +48,11 @@
30
  gap: 10px;
31
  justify-content: center;
32
  }
33
-
34
  .input-section label {
35
  font-weight: bold;
36
  margin-bottom: 5px;
37
  display: block;
38
  }
39
-
40
  .input-section input[type="number"] {
41
  padding: 8px;
42
  border: 1px solid #ccc;
@@ -44,14 +60,12 @@
44
  width: 100%;
45
  box-sizing: border-box;
46
  }
47
-
48
  /* Add media query to adjust grid template columns on smaller screens */
49
  @media (max-width: 768px) {
50
  .input-section {
51
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
52
  }
53
  }
54
-
55
  @media (max-width: 480px) {
56
  .input-section {
57
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
@@ -184,6 +198,7 @@
184
  <!-- Array Upscaler Section -->
185
  <div class="array-upscaler">
186
  <h2>Array Upscaler</h2>
 
187
  <p>
188
  Upscaled Length:
189
  <input type="number" id="newLength" min="1" value="5">
@@ -199,18 +214,14 @@
199
  const sliderWidth = document.getElementById('sliderWidth').value;
200
  const sliderMargin = document.getElementById('sliderMargin').value;
201
  const sliders = document.querySelectorAll('.slider-wrapper input[type="range"]');
202
-
203
  sliders.forEach(slider => {
204
  slider.style.width = `${sliderWidth}%`;
205
  });
206
-
207
  const sliderContainers = document.querySelectorAll('.slider-container');
208
-
209
  sliderContainers.forEach(sliderContainer => {
210
  sliderContainer.style.margin = `${sliderMargin}px 0`;
211
  });
212
  }
213
-
214
  function updateSliderStep() {
215
  const step = document.getElementById('sliderStep').value;
216
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
@@ -219,7 +230,6 @@
219
  slider.step = step;
220
  });
221
  }
222
-
223
  function createSliders() {
224
  const numSliders = parseInt(document.getElementById('numSliders').value);
225
  const minValue = parseFloat(document.getElementById('minValue').value);
@@ -227,18 +237,14 @@
227
  const sliderStep = parseFloat(document.getElementById('sliderStep').value);
228
  const slidersContainer = document.getElementById('sliders');
229
  slidersContainer.innerHTML = ''; // Clear previous sliders
230
-
231
  for (let i = 0; i < numSliders; i++) {
232
  const sliderContainer = document.createElement('div');
233
  sliderContainer.className = 'slider-container';
234
-
235
  const sliderIndex = document.createElement('span');
236
  sliderIndex.className = 'slider-index';
237
  sliderIndex.textContent = i + 1;
238
-
239
  const sliderWrapper = document.createElement('div');
240
  sliderWrapper.className = 'slider-wrapper';
241
-
242
  const slider = document.createElement('input');
243
  slider.type = 'range';
244
  slider.min = minValue;
@@ -246,21 +252,17 @@
246
  slider.value = minValue;
247
  slider.step = sliderStep;
248
  slider.oninput = updateValues;
249
-
250
  const sliderNumber = document.createElement('span');
251
  sliderNumber.className = 'slider-number';
252
  sliderNumber.textContent = minValue.toFixed(2);
253
  sliderNumber.onclick = function() {
254
  makeEditable(sliderNumber, slider);
255
  };
256
-
257
  sliderWrapper.appendChild(slider);
258
  sliderWrapper.appendChild(sliderNumber);
259
-
260
  sliderContainer.appendChild(sliderIndex);
261
  sliderContainer.appendChild(sliderWrapper);
262
  slidersContainer.appendChild(sliderContainer);
263
-
264
  // Highlight the middle slider if the total number of sliders is odd
265
  if (numSliders % 2 !== 0 && i === Math.floor(numSliders / 2)) {
266
  sliderContainer.classList.add('middle-slider');
@@ -269,7 +271,6 @@
269
  updateValues(); // Initial update
270
  updateSliderStyles(); // Apply initial styles
271
  }
272
-
273
  function updateSliders() {
274
  const numSlidersInput = document.getElementById('numSliders').value;
275
  const minValue = parseFloat(document.getElementById('minValue').value);
@@ -277,7 +278,6 @@
277
  const sliderStep = parseFloat(document.getElementById('sliderStep').value);
278
  const slidersContainer = document.getElementById('sliders');
279
  const errorMessage = document.getElementById('errorMessage');
280
-
281
  // Validate the number of sliders input
282
  if (!numSlidersInput || isNaN(numSlidersInput) || parseInt(numSlidersInput) < 1) {
283
  errorMessage.textContent = 'Please enter a valid number of sliders (greater than 0).';
@@ -286,39 +286,30 @@
286
  } else {
287
  errorMessage.textContent = ''; // Clear error message if input is valid
288
  }
289
-
290
  const numSliders = parseInt(numSlidersInput);
291
  const currentSliders = document.querySelectorAll('#sliders input[type="range"]');
292
-
293
  // Preserve existing slider values when reducing number of sliders
294
  const existingValues = Array.from(currentSliders).map(slider => parseFloat(slider.value));
295
-
296
  slidersContainer.innerHTML = ''; // Clear existing sliders
297
-
298
  for (let i = 0; i < numSliders; i++) {
299
  const sliderContainer = document.createElement('div');
300
  sliderContainer.className = 'slider-container';
301
-
302
  const sliderIndex = document.createElement('span');
303
  sliderIndex.className = 'slider-index';
304
  sliderIndex.textContent = i + 1;
305
-
306
  const sliderWrapper = document.createElement('div');
307
  sliderWrapper.className = 'slider-wrapper';
308
-
309
  const slider = document.createElement('input');
310
  slider.type = 'range';
311
  slider.min = minValue;
312
  slider.max = maxValue;
313
  slider.step = sliderStep;
314
  slider.oninput = updateValues;
315
-
316
  const sliderNumber = document.createElement('span');
317
  sliderNumber.className = 'slider-number';
318
  sliderNumber.onclick = function() {
319
  makeEditable(sliderNumber, slider);
320
  };
321
-
322
  // Use preserved value or default to minValue
323
  const preservedValue = existingValues[i] !== undefined
324
  ? Math.max(minValue, Math.min(maxValue, existingValues[i]))
@@ -326,24 +317,20 @@
326
 
327
  slider.value = preservedValue;
328
  sliderNumber.textContent = preservedValue.toFixed(2);
329
-
330
  sliderWrapper.appendChild(slider);
331
  sliderWrapper.appendChild(sliderNumber);
332
-
333
  sliderContainer.appendChild(sliderIndex);
334
  sliderContainer.appendChild(sliderWrapper);
335
  slidersContainer.appendChild(sliderContainer);
336
-
337
  // Highlight the middle slider if the total number of sliders is odd
338
  if (numSliders % 2 !== 0 && i === Math.floor(numSliders / 2)) {
339
  sliderContainer.classList.add('middle-slider');
340
  }
341
  }
342
-
343
  updateValues(); // Update the displayed values
344
  updateSliderStyles(); // Apply styles
 
345
  }
346
-
347
  function updateValues() {
348
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
349
  const values = Array.from(sliders).map(slider => {
@@ -353,7 +340,6 @@
353
  });
354
  document.getElementById('sliderValues').textContent = JSON.stringify(values);
355
  }
356
-
357
  function makeEditable(sliderNumber, slider) {
358
  const currentValue = sliderNumber.textContent;
359
  const container = document.createElement('div'); // Create a container to hold input and button
@@ -365,22 +351,17 @@
365
  input.step = slider.step;
366
  input.style.width = '100%';
367
  input.style.boxSizing = 'border-box';
368
-
369
  const closeButton = document.createElement('span');
370
  closeButton.className = 'close-button';
371
  closeButton.textContent = 'X';
372
  closeButton.onclick = function() {
373
  input.blur(); // Trigger blur event to revert to text
374
  };
375
-
376
  container.appendChild(input); // Append input and button to container
377
  container.appendChild(closeButton);
378
-
379
  const originalSliderNumber = sliderNumber.cloneNode(true); // Clone original sliderNumber for later use
380
  originalSliderNumber.onclick = function() { makeEditable(originalSliderNumber, slider); }; // Reattach onclick event
381
-
382
  sliderNumber.replaceWith(container); // Replace sliderNumber with the container
383
-
384
  input.onblur = function() {
385
  const newValue = parseFloat(input.value);
386
  if (!isNaN(newValue) && newValue >= parseFloat(slider.min) && newValue <= parseFloat(slider.max)) {
@@ -392,42 +373,62 @@
392
  container.replaceWith(originalSliderNumber); // Replace container with original sliderNumber
393
  updateValues(); // Update displayed values
394
  };
395
-
396
  input.onkeydown = function(event) {
397
  if (event.key === 'Enter') {
398
  input.blur(); // Trigger blur event on Enter key press
399
  }
400
  };
401
-
402
  input.focus(); // Focus on the input field
403
  }
404
 
405
- // Initial call to create sliders
406
- createSliders();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
407
 
408
- // Function to upscale the array
409
  function upscaleArray() {
410
  // Get slider values
411
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
412
  const originalArray = Array.from(sliders).map(slider => parseFloat(slider.value));
413
  const newLengthInput = document.getElementById('newLength').value;
414
  const newLength = parseInt(newLengthInput, 10);
415
-
416
  // Validate inputs
417
  if (originalArray.length === 0 || isNaN(newLength) || newLength < 1) {
418
  document.getElementById('result').innerHTML = 'Invalid input.';
419
  return;
420
  }
421
-
422
  // If new length is less than or equal to original, return original array
423
  if (newLength <= originalArray.length) {
424
  document.getElementById('result').innerHTML = originalArray.join(', ');
425
  return;
426
  }
427
-
428
  // Calculate the step size
429
  const step = (originalArray.length - 1) / (newLength - 1);
430
-
431
  // Create the upscaled array
432
  const upscaledArray = [];
433
  for (let j = 0; j < newLength; j++) {
@@ -435,21 +436,23 @@
435
  const lower = Math.floor(i);
436
  const upper = Math.ceil(i);
437
  const fraction = i - lower;
438
-
439
  // Handle edge cases where upper is out of bounds
440
  if (upper >= originalArray.length) {
441
  upper = originalArray.length - 1;
442
  fraction = 0;
443
  }
444
-
445
  // Linear interpolation
446
  const value = originalArray[lower] + fraction * (originalArray[upper] - originalArray[lower]);
447
  upscaledArray.push(value.toFixed(3)); // Display one decimal place
448
  }
449
-
450
  // Display the result
451
  document.getElementById('result').innerHTML = upscaledArray.join(', ');
452
  }
 
 
 
 
 
453
  </script>
454
  </body>
455
  </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Dynamic Sliders with Editable Values and Array Upscaler</title>
8
  <style>
9
+ /* Add styling for the suggestions */
10
+ .suggestions {
11
+ margin-bottom: 10px;
12
+ }
13
+ .suggestion {
14
+ display: inline-block;
15
+ margin-right: 10px;
16
+ padding: 5px 10px;
17
+ background-color: #e0e0e0;
18
+ border-radius: 4px;
19
+ cursor: pointer;
20
+ transition: background-color 0.3s;
21
+ }
22
+ .suggestion:hover {
23
+ background-color: #d0d0d0;
24
+ }
25
+ /* Add the rest of your existing styles */
26
  body {
27
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
  background-color: #f4f4f4;
 
48
  gap: 10px;
49
  justify-content: center;
50
  }
 
51
  .input-section label {
52
  font-weight: bold;
53
  margin-bottom: 5px;
54
  display: block;
55
  }
 
56
  .input-section input[type="number"] {
57
  padding: 8px;
58
  border: 1px solid #ccc;
 
60
  width: 100%;
61
  box-sizing: border-box;
62
  }
 
63
  /* Add media query to adjust grid template columns on smaller screens */
64
  @media (max-width: 768px) {
65
  .input-section {
66
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
67
  }
68
  }
 
69
  @media (max-width: 480px) {
70
  .input-section {
71
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
198
  <!-- Array Upscaler Section -->
199
  <div class="array-upscaler">
200
  <h2>Array Upscaler</h2>
201
+ <div class="suggestions" id="suggestions"></div>
202
  <p>
203
  Upscaled Length:
204
  <input type="number" id="newLength" min="1" value="5">
 
214
  const sliderWidth = document.getElementById('sliderWidth').value;
215
  const sliderMargin = document.getElementById('sliderMargin').value;
216
  const sliders = document.querySelectorAll('.slider-wrapper input[type="range"]');
 
217
  sliders.forEach(slider => {
218
  slider.style.width = `${sliderWidth}%`;
219
  });
 
220
  const sliderContainers = document.querySelectorAll('.slider-container');
 
221
  sliderContainers.forEach(sliderContainer => {
222
  sliderContainer.style.margin = `${sliderMargin}px 0`;
223
  });
224
  }
 
225
  function updateSliderStep() {
226
  const step = document.getElementById('sliderStep').value;
227
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
 
230
  slider.step = step;
231
  });
232
  }
 
233
  function createSliders() {
234
  const numSliders = parseInt(document.getElementById('numSliders').value);
235
  const minValue = parseFloat(document.getElementById('minValue').value);
 
237
  const sliderStep = parseFloat(document.getElementById('sliderStep').value);
238
  const slidersContainer = document.getElementById('sliders');
239
  slidersContainer.innerHTML = ''; // Clear previous sliders
 
240
  for (let i = 0; i < numSliders; i++) {
241
  const sliderContainer = document.createElement('div');
242
  sliderContainer.className = 'slider-container';
 
243
  const sliderIndex = document.createElement('span');
244
  sliderIndex.className = 'slider-index';
245
  sliderIndex.textContent = i + 1;
 
246
  const sliderWrapper = document.createElement('div');
247
  sliderWrapper.className = 'slider-wrapper';
 
248
  const slider = document.createElement('input');
249
  slider.type = 'range';
250
  slider.min = minValue;
 
252
  slider.value = minValue;
253
  slider.step = sliderStep;
254
  slider.oninput = updateValues;
 
255
  const sliderNumber = document.createElement('span');
256
  sliderNumber.className = 'slider-number';
257
  sliderNumber.textContent = minValue.toFixed(2);
258
  sliderNumber.onclick = function() {
259
  makeEditable(sliderNumber, slider);
260
  };
 
261
  sliderWrapper.appendChild(slider);
262
  sliderWrapper.appendChild(sliderNumber);
 
263
  sliderContainer.appendChild(sliderIndex);
264
  sliderContainer.appendChild(sliderWrapper);
265
  slidersContainer.appendChild(sliderContainer);
 
266
  // Highlight the middle slider if the total number of sliders is odd
267
  if (numSliders % 2 !== 0 && i === Math.floor(numSliders / 2)) {
268
  sliderContainer.classList.add('middle-slider');
 
271
  updateValues(); // Initial update
272
  updateSliderStyles(); // Apply initial styles
273
  }
 
274
  function updateSliders() {
275
  const numSlidersInput = document.getElementById('numSliders').value;
276
  const minValue = parseFloat(document.getElementById('minValue').value);
 
278
  const sliderStep = parseFloat(document.getElementById('sliderStep').value);
279
  const slidersContainer = document.getElementById('sliders');
280
  const errorMessage = document.getElementById('errorMessage');
 
281
  // Validate the number of sliders input
282
  if (!numSlidersInput || isNaN(numSlidersInput) || parseInt(numSlidersInput) < 1) {
283
  errorMessage.textContent = 'Please enter a valid number of sliders (greater than 0).';
 
286
  } else {
287
  errorMessage.textContent = ''; // Clear error message if input is valid
288
  }
 
289
  const numSliders = parseInt(numSlidersInput);
290
  const currentSliders = document.querySelectorAll('#sliders input[type="range"]');
 
291
  // Preserve existing slider values when reducing number of sliders
292
  const existingValues = Array.from(currentSliders).map(slider => parseFloat(slider.value));
 
293
  slidersContainer.innerHTML = ''; // Clear existing sliders
 
294
  for (let i = 0; i < numSliders; i++) {
295
  const sliderContainer = document.createElement('div');
296
  sliderContainer.className = 'slider-container';
 
297
  const sliderIndex = document.createElement('span');
298
  sliderIndex.className = 'slider-index';
299
  sliderIndex.textContent = i + 1;
 
300
  const sliderWrapper = document.createElement('div');
301
  sliderWrapper.className = 'slider-wrapper';
 
302
  const slider = document.createElement('input');
303
  slider.type = 'range';
304
  slider.min = minValue;
305
  slider.max = maxValue;
306
  slider.step = sliderStep;
307
  slider.oninput = updateValues;
 
308
  const sliderNumber = document.createElement('span');
309
  sliderNumber.className = 'slider-number';
310
  sliderNumber.onclick = function() {
311
  makeEditable(sliderNumber, slider);
312
  };
 
313
  // Use preserved value or default to minValue
314
  const preservedValue = existingValues[i] !== undefined
315
  ? Math.max(minValue, Math.min(maxValue, existingValues[i]))
 
317
 
318
  slider.value = preservedValue;
319
  sliderNumber.textContent = preservedValue.toFixed(2);
 
320
  sliderWrapper.appendChild(slider);
321
  sliderWrapper.appendChild(sliderNumber);
 
322
  sliderContainer.appendChild(sliderIndex);
323
  sliderContainer.appendChild(sliderWrapper);
324
  slidersContainer.appendChild(sliderContainer);
 
325
  // Highlight the middle slider if the total number of sliders is odd
326
  if (numSliders % 2 !== 0 && i === Math.floor(numSliders / 2)) {
327
  sliderContainer.classList.add('middle-slider');
328
  }
329
  }
 
330
  updateValues(); // Update the displayed values
331
  updateSliderStyles(); // Apply styles
332
+ updateSuggestions(); // Update upscaling suggestions
333
  }
 
334
  function updateValues() {
335
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
336
  const values = Array.from(sliders).map(slider => {
 
340
  });
341
  document.getElementById('sliderValues').textContent = JSON.stringify(values);
342
  }
 
343
  function makeEditable(sliderNumber, slider) {
344
  const currentValue = sliderNumber.textContent;
345
  const container = document.createElement('div'); // Create a container to hold input and button
 
351
  input.step = slider.step;
352
  input.style.width = '100%';
353
  input.style.boxSizing = 'border-box';
 
354
  const closeButton = document.createElement('span');
355
  closeButton.className = 'close-button';
356
  closeButton.textContent = 'X';
357
  closeButton.onclick = function() {
358
  input.blur(); // Trigger blur event to revert to text
359
  };
 
360
  container.appendChild(input); // Append input and button to container
361
  container.appendChild(closeButton);
 
362
  const originalSliderNumber = sliderNumber.cloneNode(true); // Clone original sliderNumber for later use
363
  originalSliderNumber.onclick = function() { makeEditable(originalSliderNumber, slider); }; // Reattach onclick event
 
364
  sliderNumber.replaceWith(container); // Replace sliderNumber with the container
 
365
  input.onblur = function() {
366
  const newValue = parseFloat(input.value);
367
  if (!isNaN(newValue) && newValue >= parseFloat(slider.min) && newValue <= parseFloat(slider.max)) {
 
373
  container.replaceWith(originalSliderNumber); // Replace container with original sliderNumber
374
  updateValues(); // Update displayed values
375
  };
 
376
  input.onkeydown = function(event) {
377
  if (event.key === 'Enter') {
378
  input.blur(); // Trigger blur event on Enter key press
379
  }
380
  };
 
381
  input.focus(); // Focus on the input field
382
  }
383
 
384
+ function updateSuggestions() {
385
+ const numSliders = parseInt(document.getElementById('numSliders').value);
386
+ const suggestionsDiv = document.getElementById('suggestions');
387
+ suggestionsDiv.innerHTML = ''; // Clear previous suggestions
388
+
389
+ if (numSliders % 2 !== 0) {
390
+ const n = numSliders;
391
+ const firstSuggestion = 2 * n - 1;
392
+ const secondSuggestion = 2 * firstSuggestion - 1;
393
+
394
+ const createSuggestionElement = (value) => {
395
+ const suggestion = document.createElement('span');
396
+ suggestion.className = 'suggestion';
397
+ suggestion.textContent = value;
398
+ suggestion.onclick = function() {
399
+ document.getElementById('newLength').value = value;
400
+ upscaleArray();
401
+ };
402
+ return suggestion;
403
+ };
404
+
405
+ if (firstSuggestion > numSliders) {
406
+ suggestionsDiv.appendChild(createSuggestionElement(firstSuggestion));
407
+ }
408
+ if (secondSuggestion > firstSuggestion) {
409
+ suggestionsDiv.appendChild(createSuggestionElement(secondSuggestion));
410
+ }
411
+ }
412
+ }
413
 
 
414
  function upscaleArray() {
415
  // Get slider values
416
  const sliders = document.querySelectorAll('#sliders input[type="range"]');
417
  const originalArray = Array.from(sliders).map(slider => parseFloat(slider.value));
418
  const newLengthInput = document.getElementById('newLength').value;
419
  const newLength = parseInt(newLengthInput, 10);
 
420
  // Validate inputs
421
  if (originalArray.length === 0 || isNaN(newLength) || newLength < 1) {
422
  document.getElementById('result').innerHTML = 'Invalid input.';
423
  return;
424
  }
 
425
  // If new length is less than or equal to original, return original array
426
  if (newLength <= originalArray.length) {
427
  document.getElementById('result').innerHTML = originalArray.join(', ');
428
  return;
429
  }
 
430
  // Calculate the step size
431
  const step = (originalArray.length - 1) / (newLength - 1);
 
432
  // Create the upscaled array
433
  const upscaledArray = [];
434
  for (let j = 0; j < newLength; j++) {
 
436
  const lower = Math.floor(i);
437
  const upper = Math.ceil(i);
438
  const fraction = i - lower;
 
439
  // Handle edge cases where upper is out of bounds
440
  if (upper >= originalArray.length) {
441
  upper = originalArray.length - 1;
442
  fraction = 0;
443
  }
 
444
  // Linear interpolation
445
  const value = originalArray[lower] + fraction * (originalArray[upper] - originalArray[lower]);
446
  upscaledArray.push(value.toFixed(3)); // Display one decimal place
447
  }
 
448
  // Display the result
449
  document.getElementById('result').innerHTML = upscaledArray.join(', ');
450
  }
451
+
452
+ // Initial call to create sliders
453
+ createSliders();
454
+ // Initial call to update suggestions
455
+ updateSuggestions();
456
  </script>
457
  </body>
458
  </html>