Hugging Face's logo

Spaces:
Banafo
/
Kroko-Streaming-ASR-Wasm
Running

App Files
xet
Community
Kroko-Streaming-ASR-Wasm
File size: 8,394 Bytes 
8713346
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12229cf
 
 
 
8713346
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f7269bb
 
 
 
 
 
 
 
 
 
 
8713346
 
 
f7269bb
 
8713346
 
 
 
 
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
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Audio Input with Tabs and Features</title>
  <style>
    .loading {
      display: none !important;
    }
  </style>
</head>
<body style="font-family: 'Source Sans Pro', sans-serif; background-color: #f9fafb; color: #333; display: flex; flex-direction: column; align-items: center; height: 100vh; margin: 0;">

  <div style="width: 100%; max-width: 900px; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex: 1;">

    <!-- Tabs -->
    <div style="display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 1rem;">
      <button id="singleAudioTab" class="tab active" style="flex: 1; text-align: center; padding: 1rem; background: transparent; border: none; border-bottom: 3px solid #007bff; font-weight: bold; cursor: pointer; color: #007bff;">Single Audio Stream</button>
      <button id="multistreamTab" class="tab" style="flex: 1; text-align: center; padding: 1rem; background: transparent; border: none; border-bottom: 3px solid transparent; font-weight: bold; cursor: pointer; color: #6c757d;">Multistream Demo</button>
    </div>

    <!-- Language Selection -->
    <div style="margin-bottom: 1rem; text-align: center; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
      <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;">
        <input type="radio" name="language" value="en" checked style="margin: 0;" />
        <img src="https://flagcdn.com/us.svg" alt="US Flag" style="width: 20px; height: 14px;" /> English
      </label>
      <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;">
        <input type="radio" name="language" value="de" style="margin: 0;" />
        <img src="https://flagcdn.com/de.svg" alt="Germany Flag" style="width: 20px; height: 14px;" /> German
      </label>
      <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;">
        <input type="radio" name="language" value="fr" style="margin: 0;" />
        <img src="https://flagcdn.com/fr.svg" alt="France Flag" style="width: 20px; height: 14px;" /> French
      </label>
    </div>

    <!-- Single Audio Stream Content -->
    <div id="singleAudioContent" class="tab-content loading">
      <div style="display: flex; gap: 1.5rem;">
        <!-- Input Section -->
        <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
          <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; display: flex; align-items: center; gap: 0.5rem; color: #6c757d;">
            <span style="line-height: 1;">🎵</span> Input
          </div>

          <!-- Drag and Drop / File Upload -->
          <div id="dropzone" style="border: 2px dashed #ced4da; border-radius: 8px; padding: 2rem; text-align: center; color: #6c757d; cursor: pointer; background-color: #f8f9fa; transition: background-color 0.3s, border-color 0.3s; position: relative;">
            <input type="file" id="fileInput" accept="audio/*" style="position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;" />
            <p style="margin: 0;">Drop Audio Here<br>- or -<br>Click to Upload</p>
          </div>

          <!-- Record Microphone Button -->
          <button id="recordBtn" style="padding: 0.5rem 1rem; border: 1px solid #e9ecef; border-radius: 4px; background-color: #fff; color: #d9534f; cursor: pointer; font-size: 1rem;">
            <span style="font-size: 0.8rem; border-radius: 50%; background-color: #d9534f; width: 10px; height: 10px; display: inline-block;"></span>
            Use Microphone
          </button>
        </div>

        <!-- Output Section -->
        <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
          <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; color: #6c757d;">Transcript</div>
          <textarea id="results" placeholder="Output will appear here..." readonly style="flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 8px; resize: none; background-color: #f8f9fa;"></textarea>
          <audio id="audioPlayback" controls style="display: none; margin-top: 1rem; width: 100%;"></audio>
        </div>
      </div>
    </div>

    <!-- Multistream Demo Content -->
    <div id="multistreamContent" class="tab-content loading" style="display: none;">
      <div style="text-align: center; padding: 1rem;">
        <button id="playAllBtn" style="padding: 0.75rem 1.5rem; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;">Play All Streams</button>
      </div>
      <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
        <div class="audio-container" style="flex: 1; min-width: 250px;">
          <audio id="audio1" controls style="width: 100%;"></audio>
          <textarea id="transcript1" readonly placeholder="Transcript for Audio 1" 
            style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; 
            border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea>
        </div>
        
        <div class="audio-container" style="flex: 1; min-width: 250px;">
          <audio id="audio2" controls style="width: 100%;"></audio>
          <textarea id="transcript2" readonly placeholder="Transcript for Audio 2" 
            style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; 
            border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea>
        </div>
      
        <div class="audio-container" style="flex: 1; min-width: 250px;">
          <audio id="audio3" controls style="width: 100%;"></audio>
          <textarea id="transcript3" readonly placeholder="Transcript for Audio 3" 
            style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; 
            border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea>
        </div>
      
        <div class="audio-container" style="flex: 1; min-width: 250px;">
          <audio id="audio4" controls style="width: 100%;"></audio>
          <textarea id="transcript4" readonly placeholder="Transcript for Audio 4" 
            style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; 
            border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea>
        </div>
      
        <div class="audio-container" style="flex: 1; min-width: 250px;">
          <audio id="audio5" controls style="width: 100%;"></audio>
          <textarea id="transcript5" readonly placeholder="Transcript for Audio 5" 
            style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; 
            border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea>
        </div>
      </div>
    </div>

    <div id="status">Loading...</div>

  </div>

  <!-- Footer Section -->
  <div style="width: 100%; max-width: 900px; margin-top: 1.5rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-align: left; font-size: 0.9rem; color: #6c757d;">
    <h3>Welcome to Kroko</h3>

    <strong>
    This demo uses older versions of our models. We're working on a new one—stay tuned!
  </strong>
  <div style="margin-top: 8px; font-weight: normal;">
    In the meantime, you can:
    <ul style="margin: 6px 0 0 16px; padding: 0;">
      <li><a href="https://kroko.ai/" target="_blank">Visit our website</a></li>
      <li><a href="https://github.com/kroko-ai/kroko-onnx" target="_blank">Explore our GitHub repo</a></li>
      <li><a href="https://discord.gg/JT7wdtnK79" target="_blank">Join our community</a> to get the latest updates first</li>
    </ul>
  </div>

  </div>

  <script src="./sherpa-onnx-asr.js"></script>
  <script src="./app-asr.js"></script>
</body>
</html>