update

2026-05-17 15:30:11 +05:30
commit cae37e5af7
23 changed files with 3607 additions and 0 deletions
--- a/public/OLD/index3.html
+++ b/public/OLD/index3.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Realistic Avatar with TTS Sync</title>
+  <style>
+    .avatar-container {
+      position: relative;
+      width: 300px;
+      margin: 50px auto;
+    }
+    /* The base avatar image */
+    #avatar {
+      width: 100%;
+      display: block;
+      border-radius: 10px;
+      border: 5px solid #ccc;
+    }
+    /* Overlay for mouth animation (position and size must be adjusted for your image) */
+    .mouth-overlay {
+      position: absolute;
+      bottom: 30px; /* Adjust to position over the mouth */
+      left: 50%;
+      width: 60px;
+      height: 20px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 0 0 30px 30px;
+      transform: translateX(-50%);
+      opacity: 0;
+      pointer-events: none;
+    }
+    /* Keyframe animation for a more natural mouth movement */
+    @keyframes speakAnimation {
+      0% {
+        opacity: 0;
+        transform: translateX(-50%) scaleY(0.5);
+      }
+      25% {
+        opacity: 1;
+        transform: translateX(-50%) scaleY(1.2);
+      }
+      50% {
+        opacity: 0.5;
+        transform: translateX(-50%) scaleY(0.8);
+      }
+      75% {
+        opacity: 1;
+        transform: translateX(-50%) scaleY(1.1);
+      }
+      100% {
+        opacity: 0;
+        transform: translateX(-50%) scaleY(0.5);
+      }
+    }
+    /* Class added to trigger the animation */
+    .mouth-speaking {
+      animation: speakAnimation 0.5s infinite;
+    }
+    button {
+      display: block;
+      margin: 20px auto;
+      padding: 10px 20px;
+      font-size: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="avatar-container">
+    <!-- Replace "avatar.jpg" with the path to your photo -->
+    <img id="avatar" src="ben_10.jpg" alt="Avatar">
+    <div class="mouth-overlay" id="mouthOverlay"></div>
+  </div>
+  <button id="speakBtn">Speak</button>
+
+  <script>
+    // The sentence to be spoken
+    const text = "hellow how are you";
+    const speakBtn = document.getElementById('speakBtn');
+    const mouthOverlay = document.getElementById('mouthOverlay');
+
+    function speakText() {
+      const utterance = new SpeechSynthesisUtterance(text);
+
+      // When speech starts, add the animation class
+      utterance.onstart = () => {
+        mouthOverlay.classList.add('mouth-speaking');
+      };
+
+      // When speech ends, remove the animation class
+      utterance.onend = () => {
+        mouthOverlay.classList.remove('mouth-speaking');
+      };
+
+      window.speechSynthesis.speak(utterance);
+    }
+
+    speakBtn.addEventListener('click', speakText);
+  </script>
+</body>
+</html>