github-app-js-sample/Astro -ultra at 103ca563a63b570026888eb0958c45b429c7a34c · github/github-app-js-sample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="style.css" />
  <title>Astro Ultra</title>
</head>
<body>
  <div id="app">
    <div id="astro-face">
      <img src="assets/astro.png" id="astro-img" alt="Astro" />
      <div id="mouth-animation"></div>
    </div>
    <div id="response"></div>
    <button onclick="startListening()">🎤 Parler</button>
    <canvas id="simulation-canvas"></canvas>
  </div>
  <script src="main.js"></script>
  <script src="simulation.js"></script>
</body>
</html>body {
  background: radial-gradient(circle at center, #000 40%, #0a0a2a 100%);
  font-family: sans-serif;
  color: white;
  text-align: center;
}
#astro-face {
  position: relative;
}
#astro-img {
  width: 200px;
}
#mouth-animation {
  position: absolute;
  bottom: 40px;
  left: 90px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  animation: speak 1s infinite alternate;
}
@keyframes speak {
  from { transform: scaleY(1); }
  to { transform: scaleY(2); }
}
#simulation-canvas {
  margin-top: 20px;
  width: 300px;
  height: 200px;
  background: #111;
  border: 1px solid white;
}const synth = window.speechSynthesis;
const recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recog = new recognition();

function speak(text) {
  const utter = new SpeechSynthesisUtterance(text);
  synth.speak(utter);
  document.getElementById("mouth-animation").style.animationPlayState = 'running';
  utter.onend = () => {
    document.getElementById("mouth-animation").style.animationPlayState = 'paused';
  };
}

function startListening() {
  recog.start();
  recog.onresult = function(e) {
    const input = e.results[0][0].transcript;
    document.getElementById("response").textContent = "Vous : " + input;
    let reply = "Je pense à cela...";
    if (input.includes("masse négative")) reply = "Simulation de masse négative en cours...";
    document.getElementById("response").textContent += "\nAstro : " + reply;
    speak(reply);
  };
}const canvas = document.getElementById('simulation-canvas');
const ctx = canvas.getContext('2d');
let x = 150, y = 100, vx = -1;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "cyan";
  ctx.fill();
  ctx.closePath();

  x += vx;
  if (x < 0 || x > canvas.width) vx *= -1;
  requestAnimationFrame(draw);
}
draw();{
  "name": "Astro Ultra",
  "short_name": "Astro",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#0a0a2a",
  "icons": [{
    "src": "assets/icon.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('astro-ultra').then(function(cache) {
      return cache.addAll([
        './',
        './index.html',
        './style.css',
        './main.js',
        './simulation.js'
      ]);
    })
  );
});
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});{
  "memory": []
}