Spaces:

Ivan000
/

AI-screensaver

Running

App Files Files Community

Ivan000 commited on Sep 30, 2024

Commit

c907826

verified ·

1 Parent(s): 674b5d5

Update index.html

Browse files

Files changed (1) hide show

index.html +355 -18

index.html CHANGED Viewed

@@ -1,19 +1,356 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <html>
+<head>
+  <base href="https://websim.ai/clock-with-ai/">
+  </base>
+  <title>AI-Powered Clock with Dynamic Backgrounds</title>
+  <style>
+    body {
+      background-color: #1a1a1a;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      font-family: Arial, sans-serif;
+      color: #00ff00;
+      transition: background-image 1s ease-in-out;
+    }
+    #clock {
+      font-weight: bold;
+      text-shadow: 0 0 10px currentColor;
+      z-index: 10;
+    }
+    #settings-btn {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      background: none;
+      border: none;
+      color: #00ff00;
+      font-size: 24px;
+      cursor: pointer;
+      z-index: 20;
+    }
+    #settings-panel {
+      position: fixed;
+      top: 50px;
+      right: 10px;
+      background: rgba(255, 255, 255, 0.9);
+      color: #000;
+      padding: 20px;
+      border-radius: 10px;
+      display: none;
+      z-index: 20;
+      max-width: 300px;
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+    #token-input,
+    #prompt-input,
+    #frequency-input,
+    #clock-color-input,
+    #clock-size-input {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+    .btn {
+      background-color: #4CAF50;
+      border: none;
+      color: white;
+      padding: 10px 20px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    #background-image {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: 1;
+    }
+    label {
+      display: block;
+      margin-top: 10px;
+      margin-bottom: 5px;
+    }
+    .checkbox-container {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+    }
+    .checkbox-container input {
+      margin-right: 10px;
+    }
+  </style>
+</head>
+<body>
+  <img id="background-image" alt="AI generated abstract landscape based on current time" src="">
+  <div id="clock"></div>
+  <button id="settings-btn">⚙️</button>
+  <div id="settings-panel">
+    <label for="token-input">Hugging Face Token:</label>
+    <input type="text" id="token-input" placeholder="Enter Hugging Face token">
+    <label for="prompt-input">Custom Prompt:</label>
+    <textarea id="prompt-input" rows="4" placeholder="Enter custom prompt (use {time} for current time)"></textarea>
+    <label for="frequency-input">Image Generation Frequency (minutes):</label>
+    <input type="number" id="frequency-input" placeholder="Image generation frequency (minutes)" min="1" max="60">
+    <label for="clock-color-input">Clock Color:</label>
+    <input type="color" id="clock-color-input">
+    <label for="clock-size-input">Clock Size (vw):</label>
+    <input type="range" id="clock-size-input" min="1" max="20" step="0.1">
+    <span id="clock-size-value"></span>
+    <div class="checkbox-container">
+      <input type="checkbox" id="keep-awake-checkbox">
+      <label for="keep-awake-checkbox">Prevent screen lock (Android)</label>
+    </div>
+    <button id="fullscreen-btn" class="btn">Toggle Fullscreen</button>
+    <button id="save-settings" class="btn">Save</button>
+    <button id="test-image" class="btn">Test Image Generation</button>
+  </div>
+  <script>
+    let hfToken = localStorage.getItem('hfToken') || '';
+    let customPrompt = localStorage.getItem('customPrompt') || 'beautiful abstract landscape that suits the time {time}';
+    let generationFrequency = parseInt(localStorage.getItem('generationFrequency')) || 3;
+    let clockColor = localStorage.getItem('clockColor') || '#00ff00';
+    let clockSize = parseFloat(localStorage.getItem('clockSize')) || 8;
+    let keepAwake = localStorage.getItem('keepAwake') === 'true';
+    let imageGenerationInterval;
+    let wakeLock = null;
+    function updateClock() {
+      const now = new Date();
+      let hours = now.getHours();
+      const minutes = now.getMinutes()
+        .toString()
+        .padStart(2, '0');
+      const seconds = now.getSeconds()
+        .toString()
+        .padStart(2, '0');
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      hours = hours % 12;
+      hours = hours ? hours : 12;
+      hours = hours.toString()
+        .padStart(2, '0');
+      const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
+      const clockElement = document.getElementById('clock');
+      clockElement.textContent = timeString;
+      clockElement.style.color = clockColor;
+      clockElement.style.fontSize = `${clockSize}vw`;
+      return `${hours}:${minutes} ${ampm}`;
+    }
+    async function generateImage(prompt) {
+      if (!hfToken) return;
+      try {
+        const response = await fetch('https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${hfToken}`
+          },
+          body: JSON.stringify({
+            inputs: prompt
+          })
+        });
+        if (!response.ok) {
+          throw new Error('Failed to generate image');
+        }
+        const blob = await response.blob();
+        const imageUrl = URL.createObjectURL(blob);
+        const backgroundImage = document.getElementById('background-image');
+        const newImage = new Image();
+        newImage.onload = function() {
+          URL.revokeObjectURL(backgroundImage.src);
+          backgroundImage.src = this.src;
+        };
+        newImage.src = imageUrl;
+      } catch (error) {
+        console.error('Error generating image:', error);
+      }
+    }
+    function updateBackgroundImage() {
+      const currentTime = updateClock()
+        .slice(0, -3);
+      const prompt = customPrompt.replace('{time}', currentTime);
+      generateImage(prompt);
+    }
+    function initializeSettings() {
+      document.getElementById('token-input')
+        .value = hfToken;
+      document.getElementById('prompt-input')
+        .value = customPrompt;
+      document.getElementById('frequency-input')
+        .value = generationFrequency;
+      document.getElementById('clock-color-input')
+        .value = clockColor;
+      document.getElementById('clock-size-input')
+        .value = clockSize;
+      document.getElementById('clock-size-value')
+        .textContent = clockSize + ' vw';
+      document.getElementById('keep-awake-checkbox')
+        .checked = keepAwake;
+    }
+    function toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen()
+          .catch(err => console.error(err));
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      }
+    }
+    function setupImageGenerationInterval() {
+      clearInterval(imageGenerationInterval);
+      imageGenerationInterval = setInterval(updateBackgroundImage, generationFrequency * 60 * 1000);
+    }
+    async function requestWakeLock() {
+      if ('wakeLock' in navigator && keepAwake) {
+        try {
+          wakeLock = await navigator.wakeLock.request('screen');
+          wakeLock.addEventListener('release', () => {
+            console.log('Wake Lock was released');
+          });
+          console.log('Wake Lock is active');
+        } catch (err) {
+          console.error(`${err.name}, ${err.message}`);
+        }
+      }
+    }
+    async function releaseWakeLock() {
+      if (wakeLock !== null) {
+        await wakeLock.release();
+        wakeLock = null;
+      }
+    }
+    setInterval(updateClock, 1000);
+    setupImageGenerationInterval();
+    updateClock();
+    updateBackgroundImage();
+    initializeSettings();
+    if (keepAwake) requestWakeLock();
+    document.getElementById('settings-btn')
+      .addEventListener('click', () => {
+        const panel = document.getElementById('settings-panel');
+        panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+      });
+    document.getElementById('fullscreen-btn')
+      .addEventListener('click', toggleFullscreen);
+    document.getElementById('save-settings')
+      .addEventListener('click', async () => {
+        hfToken = document.getElementById('token-input')
+          .value;
+        customPrompt = document.getElementById('prompt-input')
+          .value;
+        generationFrequency = parseInt(document.getElementById('frequency-input')
+          .value);
+        clockColor = document.getElementById('clock-color-input')
+          .value;
+        clockSize = parseFloat(document.getElementById('clock-size-input')
+          .value);
+        keepAwake = document.getElementById('keep-awake-checkbox')
+          .checked;
+        localStorage.setItem('hfToken', hfToken);
+        localStorage.setItem('customPrompt', customPrompt);
+        localStorage.setItem('generationFrequency', generationFrequency);
+        localStorage.setItem('clockColor', clockColor);
+        localStorage.setItem('clockSize', clockSize);
+        localStorage.setItem('keepAwake', keepAwake);
+        document.getElementById('settings-panel')
+          .style.display = 'none';
+        updateBackgroundImage();
+        setupImageGenerationInterval();
+        updateClock();
+        if (keepAwake) {
+          await requestWakeLock();
+        } else {
+          await releaseWakeLock();
+        }
+      });
+    document.getElementById('test-image')
+      .addEventListener('click', () => {
+        updateBackgroundImage();
+      });
+    document.getElementById('clock-size-input')
+      .addEventListener('input', (e) => {
+        const value = e.target.value;
+        document.getElementById('clock-size-value')
+          .textContent = value + ' vw';
+        clockSize = parseFloat(value);
+        updateClock();
+      });
+    document.getElementById('clock-color-input')
+      .addEventListener('input', (e) => {
+        clockColor = e.target.value;
+        updateClock();
+      });
+    document.addEventListener('DOMContentLoaded', () => {
+      const settingsBtn = document.getElementById('settings-btn');
+      const newSettingsBtn = settingsBtn.cloneNode(true);
+      settingsBtn.parentNode.replaceChild(newSettingsBtn, settingsBtn);
+      newSettingsBtn.addEventListener('click', () => {
+        const panel = document.getElementById('settings-panel');
+        panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+      });
+    });
+    document.addEventListener('visibilitychange', async () => {
+      if (keepAwake && !document.hidden) {
+        await requestWakeLock();
+      }
+    });
+  </script>
+</body>
+</html>