Hugging Face's logo

Spaces:
Ramesh-vani
/
dot
Paused

App Files Community
Ramesh-vani commited on
Commit
2b003de
·
verified ·
1 Parent(s): ee2b289

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +90 -137
app.py CHANGED
@@ -32,38 +32,11 @@ def home():
32
  overflow: hidden;
33
  }
34
 
35
- /* Container for all content */
36
  .container {
37
- position: relative;
38
- width: 100%;
39
- height: 100%;
40
  display: flex;
41
- justify-content: center;
42
  align-items: center;
43
- }
44
-
45
- /* Instructions container with full transparency */
46
- .content {
47
- position: absolute;
48
- bottom:0;
49
  text-align: center;
50
- transition: opacity 0.5s ease-in-out;
51
- opacity: 1;
52
- }
53
-
54
- .content.hidden {
55
- opacity: 0;
56
- pointer-events: none;
57
- }
58
-
59
- /* Bindu container that remains visible */
60
- .dot-container {
61
- position: absolute;
62
- width: 100%;
63
- height: 100%;
64
- display: flex;
65
- justify-content: center;
66
- align-items: center;
67
  }
68
 
69
  .dot {
@@ -71,9 +44,24 @@ def home():
71
  height: 20px;
72
  background-color: #ff0000;
73
  border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  }
75
 
76
- /* Controls Panel */
77
  .controls-panel {
78
  position: absolute;
79
  right: 20px;
@@ -85,8 +73,8 @@ def home():
85
  backdrop-filter: blur(10px);
86
  display: none;
87
  flex-direction: column;
88
- max-height: 80vh; /* Max height of the controls panel */
89
- overflow-y: auto; /* Make it scrollable */
90
  }
91
 
92
  .controls-panel.visible {
@@ -104,10 +92,6 @@ def home():
104
  margin-top: 10px;
105
  }
106
 
107
- .frequency-display {
108
- margin: 10px 0;
109
- }
110
-
111
  .toggle-controls {
112
  position: absolute;
113
  top: 20px;
@@ -119,108 +103,88 @@ def home():
119
  border-radius: 5px;
120
  cursor: pointer;
121
  }
122
-
123
- .hidden {
124
- display: none;
125
- }
126
-
127
- .effect-control {
128
- margin-top: 10px;
129
- }
130
  </style>
131
  </head>
132
  <body>
133
  <div class="container">
134
- <!-- Instructions container -->
135
- <div class="content" id="content">
136
- <h1>Binaural Beats and Bindu Tratak</h1>
137
- <p>Focus on the bindu (dot) for meditation and relaxation. Instructions will disappear if inactive.</p>
138
  </div>
139
 
140
- <!-- Bindu container -->
141
- <div class="dot-container">
142
- <div class="dot" id="bindu-dot"></div>
143
- </div>
144
 
145
- <!-- Controls panel -->
146
- <div class="controls-panel" id="controls-panel">
147
- <label for="left-frequency">Left Ear Frequency:</label>
148
- <input type="range" id="left-frequency" min="20" max="2000" value="440">
149
-
150
- <label for="right-frequency">Right Ear Frequency:</label>
151
- <input type="range" id="right-frequency" min="20" max="2000" value="446">
152
-
153
- <label for="presets">Quick Presets:</label>
154
- <select id="presets">
155
- <option value="440-446">Focus (440Hz - 446Hz)</option>
156
- <option value="100-106">Relaxation (100Hz - 106Hz)</option>
157
- <option value="20-26">Deep Sleep (20Hz - 26Hz)</option>
158
- <option value="528-534">Healing (528Hz - 534Hz)</option>
159
- </select>
160
-
161
- <button id="apply-preset">Apply Preset</button>
162
- <button id="play-music">Play Music</button>
163
-
164
- <!-- New Controls for Bindu -->
165
- <div class="effect-control">
166
- <label for="bindu-color">Change Dot Color:</label>
167
- <input type="color" id="bindu-color" value="#ff0000">
168
- </div>
169
-
170
- <!-- New Control for Dot Size -->
171
- <div class="effect-control">
172
- <label for="bindu-size">Change Dot Size:</label>
173
- <input type="range" id="bindu-size" min="10" max="100" value="20">
174
- </div>
175
- </div>
176
 
177
- <button class="toggle-controls" id="toggle-controls">Show Controls</button>
 
178
  </div>
179
 
 
 
180
  <script>
181
  const playMusicButton = document.getElementById('play-music');
182
  const leftFrequencyInput = document.getElementById('left-frequency');
183
  const rightFrequencyInput = document.getElementById('right-frequency');
184
- const leftFreqDisplay = document.getElementById('left-freq-display');
185
- const rightFreqDisplay = document.getElementById('right-freq-display');
186
  const presets = document.getElementById('presets');
187
  const applyPresetButton = document.getElementById('apply-preset');
188
  const controlsPanel = document.getElementById('controls-panel');
189
  const toggleControlsButton = document.getElementById('toggle-controls');
190
- const content = document.getElementById('content');
191
- const binduDot = document.getElementById('bindu-dot');
192
- const binduColorInput = document.getElementById('bindu-color');
193
- const binduSizeInput = document.getElementById('bindu-size'); // Dot size control
194
 
195
- let audioContext;
 
 
196
  let isPlaying = false;
197
- let instructionTimeout;
198
 
199
- // Function to show instructions and bindu
200
- function showInstructionsAndBindu() {
201
- content.classList.remove('hidden'); // Show instructions
202
- clearTimeout(instructionTimeout); // Reset timeout
203
- hideInstructionsAfterDelay(); // Start delay again
204
  }
205
 
206
- // Function to hide instructions after a delay
207
- function hideInstructionsAfterDelay() {
208
- instructionTimeout = setTimeout(() => {
209
- content.classList.add('hidden'); // Hide instructions but bindu remains
210
- }, 3000); // Instructions disappear after 3 seconds of inactivity
211
  }
212
 
213
- // Listen for mousemove events to show instructions and bindu
214
- document.addEventListener('mousemove', showInstructionsAndBindu);
215
-
216
- // Initially show both instructions and bindu
217
- showInstructionsAndBindu();
 
 
 
 
 
218
 
219
  function setupBinauralBeats(leftFreq, rightFreq) {
220
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
221
 
222
- const leftOscillator = audioContext.createOscillator();
223
- const rightOscillator = audioContext.createOscillator();
224
  const leftGain = audioContext.createGain();
225
  const rightGain = audioContext.createGain();
226
 
@@ -233,59 +197,48 @@ def home():
233
  leftOscillator.connect(leftGain).connect(audioContext.destination);
234
  rightOscillator.connect(rightGain).connect(audioContext.destination);
235
 
236
- const panNodeLeft = audioContext.createStereoPanner();
237
- const panNodeRight = audioContext.createStereoPanner();
238
- panNodeLeft.pan.value = -1;
239
- panNodeRight.pan.value = 1;
240
-
241
- leftGain.connect(panNodeLeft).connect(audioContext.destination);
242
- rightGain.connect(panNodeRight).connect(audioContext.destination);
243
-
244
  leftOscillator.start();
245
  rightOscillator.start();
246
  }
247
 
248
- // Play/Pause music
249
  playMusicButton.addEventListener('click', () => {
250
- if (!isPlaying) {
 
 
251
  setupBinauralBeats(leftFrequencyInput.value, rightFrequencyInput.value);
252
  playMusicButton.textContent = 'Stop Music';
253
  isPlaying = true;
254
- } else {
255
- audioContext.close();
256
- playMusicButton.textContent = 'Play Music';
257
- isPlaying = false;
258
  }
259
  });
260
 
261
- // Apply preset frequencies
262
  applyPresetButton.addEventListener('click', () => {
263
- const selectedPreset = presets.value.split('-');
264
- leftFrequencyInput.value = selectedPreset[0];
265
- rightFrequencyInput.value = selectedPreset[1];
266
- setupBinauralBeats(leftFrequencyInput.value, rightFrequencyInput.value);
267
  });
268
 
269
- // Toggle controls panel visibility
270
  toggleControlsButton.addEventListener('click', () => {
271
  controlsPanel.classList.toggle('visible');
 
 
 
272
  });
273
 
274
- // Change Bindu color
275
- binduColorInput.addEventListener('input', (e) => {
276
- binduDot.style.backgroundColor = e.target.value;
 
277
  });
278
 
279
- // Change Bindu size
280
- binduSizeInput.addEventListener('input', (e) => {
281
- const size = e.target.value;
282
- binduDot.style.width = `${size}px`;
283
- binduDot.style.height = `${size}px`;
284
- });
285
  </script>
286
  </body>
287
  </html>
288
 
 
289
  '''
290
  return render_template_string(html_content)
291
 
 
32
  overflow: hidden;
33
  }
34
 
 
35
  .container {
 
 
 
36
  display: flex;
37
+ flex-direction: column;
38
  align-items: center;
 
 
 
 
 
 
39
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
  .dot {
 
44
  height: 20px;
45
  background-color: #ff0000;
46
  border-radius: 50%;
47
+ margin: 20px 0;
48
+ }
49
+
50
+ .instructions {
51
+ position: absolute;
52
+ top: 10%;
53
+ color: white;
54
+ font-size: 1.2rem;
55
+ background: rgba(0, 0, 0, 0.7);
56
+ padding: 10px 15px;
57
+ border-radius: 5px;
58
+ text-align: center;
59
+ }
60
+
61
+ .instructions.hidden {
62
+ display: none;
63
  }
64
 
 
65
  .controls-panel {
66
  position: absolute;
67
  right: 20px;
 
73
  backdrop-filter: blur(10px);
74
  display: none;
75
  flex-direction: column;
76
+ max-height: 80vh;
77
+ overflow-y: auto;
78
  }
79
 
80
  .controls-panel.visible {
 
92
  margin-top: 10px;
93
  }
94
 
 
 
 
 
95
  .toggle-controls {
96
  position: absolute;
97
  top: 20px;
 
103
  border-radius: 5px;
104
  cursor: pointer;
105
  }
 
 
 
 
 
 
 
 
106
  </style>
107
  </head>
108
  <body>
109
  <div class="container">
110
+ <div class="instructions" id="instructions">
111
+ Focus on the bindu (dot) for meditation and relaxation.
112
+ Adjust frequencies and bindu settings using the controls.
 
113
  </div>
114
 
115
+ <div class="dot" id="bindu"></div>
116
+ </div>
 
 
117
 
118
+ <div class="controls-panel" id="controls-panel">
119
+ <label for="left-frequency">Left Ear Frequency:</label>
120
+ <input type="range" id="left-frequency" min="20" max="2000" value="440">
121
+
122
+ <label for="right-frequency">Right Ear Frequency:</label>
123
+ <input type="range" id="right-frequency" min="20" max="2000" value="446">
124
+
125
+ <label for="dot-size">Bindu Size:</label>
126
+ <input type="range" id="dot-size" min="10" max="100" value="20">
127
+
128
+ <label for="presets">Quick Presets:</label>
129
+ <select id="presets">
130
+ <option value="440-446">Focus (440Hz - 446Hz)</option>
131
+ <option value="100-106">Relaxation (100Hz - 106Hz)</option>
132
+ <option value="20-26">Deep Sleep (20Hz - 26Hz)</option>
133
+ <option value="528-534">Healing (528Hz - 534Hz)</option>
134
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
 
136
+ <button id="apply-preset">Apply Preset</button>
137
+ <button id="play-music">Play Music</button>
138
  </div>
139
 
140
+ <button class="toggle-controls" id="toggle-controls">Show Controls</button>
141
+
142
  <script>
143
  const playMusicButton = document.getElementById('play-music');
144
  const leftFrequencyInput = document.getElementById('left-frequency');
145
  const rightFrequencyInput = document.getElementById('right-frequency');
146
+ const dotSizeInput = document.getElementById('dot-size');
 
147
  const presets = document.getElementById('presets');
148
  const applyPresetButton = document.getElementById('apply-preset');
149
  const controlsPanel = document.getElementById('controls-panel');
150
  const toggleControlsButton = document.getElementById('toggle-controls');
151
+ const instructions = document.getElementById('instructions');
152
+ const bindu = document.getElementById('bindu');
 
 
153
 
154
+ let audioContext = null;
155
+ let leftOscillator = null;
156
+ let rightOscillator = null;
157
  let isPlaying = false;
158
+ let instructionsTimeout;
159
 
160
+ function hideInstructions() {
161
+ instructionsTimeout = setTimeout(() => {
162
+ instructions.classList.add('hidden');
163
+ }, 5000);
 
164
  }
165
 
166
+ function showInstructions() {
167
+ clearTimeout(instructionsTimeout);
168
+ instructions.classList.remove('hidden');
169
+ hideInstructions();
 
170
  }
171
 
172
+ function stopMusic() {
173
+ if (audioContext) {
174
+ audioContext.close();
175
+ audioContext = null;
176
+ leftOscillator = null;
177
+ rightOscillator = null;
178
+ isPlaying = false;
179
+ playMusicButton.textContent = 'Play Music';
180
+ }
181
+ }
182
 
183
  function setupBinauralBeats(leftFreq, rightFreq) {
184
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
185
 
186
+ leftOscillator = audioContext.createOscillator();
187
+ rightOscillator = audioContext.createOscillator();
188
  const leftGain = audioContext.createGain();
189
  const rightGain = audioContext.createGain();
190
 
 
197
  leftOscillator.connect(leftGain).connect(audioContext.destination);
198
  rightOscillator.connect(rightGain).connect(audioContext.destination);
199
 
 
 
 
 
 
 
 
 
200
  leftOscillator.start();
201
  rightOscillator.start();
202
  }
203
 
 
204
  playMusicButton.addEventListener('click', () => {
205
+ if (isPlaying) {
206
+ stopMusic();
207
+ } else {
208
  setupBinauralBeats(leftFrequencyInput.value, rightFrequencyInput.value);
209
  playMusicButton.textContent = 'Stop Music';
210
  isPlaying = true;
 
 
 
 
211
  }
212
  });
213
 
 
214
  applyPresetButton.addEventListener('click', () => {
215
+ const [left, right] = presets.value.split('-').map(Number);
216
+ leftFrequencyInput.value = left;
217
+ rightFrequencyInput.value = right;
218
+ stopMusic(); // Stop music when a new preset is applied
219
  });
220
 
 
221
  toggleControlsButton.addEventListener('click', () => {
222
  controlsPanel.classList.toggle('visible');
223
+ toggleControlsButton.textContent = controlsPanel.classList.contains('visible')
224
+ ? 'Hide Controls'
225
+ : 'Show Controls';
226
  });
227
 
228
+ dotSizeInput.addEventListener('input', (e) => {
229
+ const newSize = e.target.value + 'px';
230
+ bindu.style.width = newSize;
231
+ bindu.style.height = newSize;
232
  });
233
 
234
+ document.addEventListener('mousemove', showInstructions);
235
+
236
+ hideInstructions(); // Initial call to hide instructions after delay
 
 
 
237
  </script>
238
  </body>
239
  </html>
240
 
241
+
242
  '''
243
  return render_template_string(html_content)
244