Hugging Face's logo

Spaces:
victor
/
omni-docker
Sleeping

App Files Community
victor HF Staff commited on
Commit
bd6c0c0
·
1 Parent(s): 28ed763

add index

Browse files
Files changed (2) hide show
  1. .gitignore +1 -0
  2. webui/index.html +157 -0
.gitignore CHANGED
@@ -167,3 +167,4 @@ cython_debug/
167
  # and can be added to the global gitignore or merged into this file. For a more nuclear
168
  # option (not recommended) you can uncomment the following to ignore the entire idea folder.
169
  #.idea/
 
 
167
  # and can be added to the global gitignore or merged into this file. For a more nuclear
168
  # option (not recommended) you can uncomment the following to ignore the entire idea folder.
169
  #.idea/
170
+ .aider*
webui/index.html ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>My Web Page</title>
7
+ </head>
8
+ <body style="background-color: black; color: white;">
9
+ <div id="svg-container"></div>
10
+ <button id="play-button">play</button>
11
+ <main>
12
+ <p>Current status: listening</p>
13
+ </main>
14
+ </body>
15
+ <script>
16
+ // Load the SVG
17
+ const svgContainer = document.getElementById('svg-container');
18
+ const svgContent = `
19
+ <svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
20
+ <ellipse id="left-eye" cx="340" cy="200" rx="20" ry="20" fill="white"/>
21
+ <circle id="left-pupil" cx="340" cy="200" r="8" fill="black"/>
22
+ <ellipse id="right-eye" cx="460" cy="200" rx="20" ry="20" fill="white"/>
23
+ <circle id="right-pupil" cx="460" cy="200" r="8" fill="black"/>
24
+ <path id="upper-lip" d="M 300 300 C 350 284, 450 284, 500 300" stroke="white" stroke-width="10" fill="none"/>
25
+ <path id="lower-lip" d="M 300 300 C 350 316, 450 316, 500 300" stroke="white" stroke-width="10" fill="none"/>
26
+ </svg>`;
27
+ svgContainer.innerHTML = svgContent;
28
+
29
+ // Set up audio context
30
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
31
+ const analyser = audioContext.createAnalyser();
32
+ analyser.fftSize = 256;
33
+
34
+ // Load audio file
35
+ const audio = new Audio('/heath_ledger.mp3');
36
+ const source = audioContext.createMediaElementSource(audio);
37
+ source.connect(analyser);
38
+ analyser.connect(audioContext.destination);
39
+
40
+ // Animation variables
41
+ let isAudioPlaying = false;
42
+ let lastBlinkTime = 0;
43
+ let eyeMovementOffset = { x: 0, y: 0 };
44
+
45
+ // Idle eye animation function
46
+ function animateIdleEyes(timestamp) {
47
+ const leftEye = document.getElementById('left-eye');
48
+ const rightEye = document.getElementById('right-eye');
49
+ const leftPupil = document.getElementById('left-pupil');
50
+ const rightPupil = document.getElementById('right-pupil');
51
+ const baseEyeX = { left: 340, right: 460 };
52
+ const baseEyeY = 200;
53
+
54
+ // Blink effect
55
+ const blinkInterval = 4000 + Math.random() * 2000; // Random blink interval between 4-6 seconds
56
+ if (timestamp - lastBlinkTime > blinkInterval) {
57
+ leftEye.setAttribute('ry', '2');
58
+ rightEye.setAttribute('ry', '2');
59
+ leftPupil.setAttribute('ry', '0.8');
60
+ rightPupil.setAttribute('ry', '0.8');
61
+ setTimeout(() => {
62
+ leftEye.setAttribute('ry', '20');
63
+ rightEye.setAttribute('ry', '20');
64
+ leftPupil.setAttribute('ry', '8');
65
+ rightPupil.setAttribute('ry', '8');
66
+ }, 150);
67
+ lastBlinkTime = timestamp;
68
+ }
69
+
70
+ // Subtle eye movement
71
+ const movementSpeed = 0.001;
72
+ eyeMovementOffset.x = Math.sin(timestamp * movementSpeed) * 6;
73
+ eyeMovementOffset.y = Math.cos(timestamp * movementSpeed * 1.3) * 1; // Reduced vertical movement
74
+
75
+ leftEye.setAttribute('cx', baseEyeX.left + eyeMovementOffset.x);
76
+ leftEye.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
77
+ rightEye.setAttribute('cx', baseEyeX.right + eyeMovementOffset.x);
78
+ rightEye.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
79
+ leftPupil.setAttribute('cx', baseEyeX.left + eyeMovementOffset.x);
80
+ leftPupil.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
81
+ rightPupil.setAttribute('cx', baseEyeX.right + eyeMovementOffset.x);
82
+ rightPupil.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
83
+ }
84
+
85
+ // Main animation function
86
+ function animate(timestamp) {
87
+ if (isAudioPlaying) {
88
+ const dataArray = new Uint8Array(analyser.frequencyBinCount);
89
+ analyser.getByteFrequencyData(dataArray);
90
+
91
+ // Calculate the average amplitude in the speech frequency range
92
+ const speechRange = dataArray.slice(5, 80); // Adjust based on your needs
93
+ const averageAmplitude = speechRange.reduce((a, b) => a + b) / speechRange.length;
94
+
95
+ // Normalize the amplitude (0-1 range)
96
+ const normalizedAmplitude = averageAmplitude / 255;
97
+
98
+ // Animate mouth
99
+ const upperLip = document.getElementById('upper-lip');
100
+ const lowerLip = document.getElementById('lower-lip');
101
+ const baseY = 300;
102
+ const maxMovement = 60;
103
+ const newUpperY = baseY - normalizedAmplitude * maxMovement;
104
+ const newLowerY = baseY + normalizedAmplitude * maxMovement;
105
+
106
+ // Adjust control points for more natural movement
107
+ const upperControlY1 = newUpperY - 8;
108
+ const upperControlY2 = newUpperY - 8;
109
+ const lowerControlY1 = newLowerY + 8;
110
+ const lowerControlY2 = newLowerY + 8;
111
+
112
+ upperLip.setAttribute('d', `M 300 ${baseY} C 350 ${upperControlY1}, 450 ${upperControlY2}, 500 ${baseY}`);
113
+ lowerLip.setAttribute('d', `M 300 ${baseY} C 350 ${lowerControlY1}, 450 ${lowerControlY2}, 500 ${baseY}`);
114
+
115
+ // Animate eyes
116
+ const leftEye = document.getElementById('left-eye');
117
+ const rightEye = document.getElementById('right-eye');
118
+ const leftPupil = document.getElementById('left-pupil');
119
+ const rightPupil = document.getElementById('right-pupil');
120
+ const baseEyeY = 200;
121
+ const maxEyeMovement = 10;
122
+ const newEyeY = baseEyeY - normalizedAmplitude * maxEyeMovement;
123
+
124
+ leftEye.setAttribute('cy', newEyeY);
125
+ rightEye.setAttribute('cy', newEyeY);
126
+ leftPupil.setAttribute('cy', newEyeY);
127
+ rightPupil.setAttribute('cy', newEyeY);
128
+ } else {
129
+ animateIdleEyes(timestamp);
130
+ }
131
+
132
+ requestAnimationFrame(animate);
133
+ }
134
+
135
+ // Start animation
136
+ animate();
137
+
138
+ // Handle audio play/pause
139
+ audio.addEventListener('play', () => {
140
+ isAudioPlaying = true;
141
+ audioContext.resume();
142
+ });
143
+
144
+ audio.addEventListener('pause', () => {
145
+ isAudioPlaying = false;
146
+ });
147
+
148
+ audio.addEventListener('ended', () => {
149
+ isAudioPlaying = false;
150
+ });
151
+
152
+ // Play audio (you might want to trigger this with a user interaction)
153
+ document.getElementById('play-button').addEventListener('click', () => {
154
+ audio.play();
155
+ });
156
+ </script>
157
+ </html>