Hugging Face's logo

Spaces:
Abmacode12
/
espace-codage
Configuration error

App Files Community
espace-codage
File size: 1,713 Bytes
dd308b8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
class VoiceControl extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-top: 1rem;
        }
        .voice-controls {
          display: flex;
          gap: 0.5rem;
          align-items: center;
        }
        button {
          background: #6366f1;
          color: white;
          border: none;
          border-radius: 50%;
          width: 2.5rem;
          height: 2.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        button:hover {
          background: #4f46e5;
        }
        .status {
          font-size: 0.8rem;
          color: #64748b;
        }
      </style>
      <div class="voice-controls">
        <button id="micButton" title="Micro">
          <i class="fas fa-microphone"></i>
        </button>
        <div class="status" id="status">Prêt</div>
      </div>
    `;

    this.micButton = this.shadowRoot.getElementById('micButton');
    this.status = this.shadowRoot.getElementById('status');

    this.micButton.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('voice-toggle'));
    });
  }

  setStatus(text) {
    this.status.textContent = text;
  }

  setRecording(isRecording) {
    if (isRecording) {
      this.micButton.innerHTML = '<i class="fas fa-stop"></i>';
      this.micButton.style.background = '#ef4444';
    } else {
      this.micButton.innerHTML = '<i class="fas fa-microphone"></i>';
      this.micButton.style.background = '#6366f1';
    }
  }
}

customElements.define('voice-control', VoiceControl);