Skip to content

Commit e49d8a1

Browse files
ciro-macielciro-maciel
committed
feat: Implement transcription model selection, download, and management.
1 parent 8203b71 commit e49d8a1

File tree

7 files changed

+782
-46
lines changed

7 files changed

+782
-46
lines changed

‎application/package.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,11 @@
3333
"src/**/*",
3434
"assets/**/*",
3535
"whisper.cpp/build/bin/whisper-cli*",
36-
"whisper.cpp/models/ggml-base.bin",
3736
"!whisper.cpp/.git",
3837
"!whisper.cpp/build/**/*.o",
3938
"!whisper.cpp/build/**/*.a"
4039
],
4140
"extraResources": [
42-
{
43-
"from": "whisper.cpp/models/ggml-base.bin",
44-
"to": "models/ggml-base.bin"
45-
},
4641
{
4742
"from": "config.json",
4843
"to": "config.json"

‎application/src/index.html‎

Lines changed: 166 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
content="default-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
99
/>
1010
<title>Push to Talk</title>
11-
<link rel="preconnect" href="https://fonts.googleapis.com">
12-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13-
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
11+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap"
15+
rel="stylesheet"
16+
/>
1417
<link rel="stylesheet" href="styles.css" />
1518
</head>
1619
<body>
@@ -81,29 +84,119 @@ <h2 class="modal-title">⚠️ Permissões Necessárias</h2>
8184
<div class="controls-suite">
8285
<div class="control-group">
8386
<label class="control-label">Atalho</label>
84-
<button id="shortcut-trigger" class="shortcut-input-button" title="Clique para alterar">
87+
<button
88+
id="shortcut-trigger"
89+
class="shortcut-input-button"
90+
title="Clique para alterar"
91+
>
8592
<div class="shortcut-content">
8693
<span id="current-keys" class="keys">⌘⇧Space</span>
87-
<span id="recording-text" class="recording-text hidden">Gravando...</span>
94+
<span id="recording-text" class="recording-text hidden"
95+
>Gravando...</span
96+
>
8897
</div>
89-
<div id="confirm-shortcut-btn" class="confirm-shortcut-btn hidden" title="Salvar atalho">
90-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
98+
<div
99+
id="confirm-shortcut-btn"
100+
class="confirm-shortcut-btn hidden"
101+
title="Salvar atalho"
102+
>
103+
<svg
104+
xmlns="http://www.w3.org/2000/svg"
105+
width="14"
106+
height="14"
107+
viewBox="0 0 24 24"
108+
fill="none"
109+
stroke="currentColor"
110+
stroke-width="2"
111+
stroke-linecap="round"
112+
stroke-linejoin="round"
113+
>
114+
<polyline points="20 6 9 17 4 12" />
115+
</svg>
91116
</div>
92-
<div id="clear-shortcut-btn" class="clear-shortcut-btn hidden" title="Limpar atalho">
93-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
117+
<div
118+
id="clear-shortcut-btn"
119+
class="clear-shortcut-btn hidden"
120+
title="Limpar atalho"
121+
>
122+
<svg
123+
xmlns="http://www.w3.org/2000/svg"
124+
width="14"
125+
height="14"
126+
viewBox="0 0 24 24"
127+
fill="none"
128+
stroke="currentColor"
129+
stroke-width="2"
130+
stroke-linecap="round"
131+
stroke-linejoin="round"
132+
>
133+
<line x1="18" y1="6" x2="6" y2="18"></line>
134+
<line x1="6" y1="6" x2="18" y2="18"></line>
135+
</svg>
94136
</div>
95137
</button>
96138
</div>
97-
139+
98140
<div class="divider-vertical"></div>
99141

100142
<div class="control-group">
101-
<label class="control-label">Modo</label>
102-
<div class="segmented-control">
103-
<button class="segment-btn" data-mode="hybrid" title="Toque para alternar, segure para falar">Híbrido</button>
104-
<button class="segment-btn" data-mode="toggle" title="Sempre alternar">Alternar</button>
105-
<button class="segment-btn" data-mode="hold" title="Sempre segurar para falar">Segurar</button>
106-
</div>
143+
<label class="control-label">Modo</label>
144+
<div class="segmented-control">
145+
<button
146+
class="segment-btn"
147+
data-mode="hybrid"
148+
title="Toque para alternar, segure para falar"
149+
>
150+
Híbrido
151+
</button>
152+
<button
153+
class="segment-btn"
154+
data-mode="toggle"
155+
title="Sempre alternar"
156+
>
157+
Alternar
158+
</button>
159+
<button
160+
class="segment-btn"
161+
data-mode="hold"
162+
title="Sempre segurar para falar"
163+
>
164+
Segurar
165+
</button>
166+
</div>
167+
</div>
168+
</div>
169+
170+
<!-- New Model Selection Section -->
171+
<div class="controls-suite" style="margin-top: 12px;">
172+
<div class="control-group full-width">
173+
<label class="control-label">Modelo de Transcrição</label>
174+
175+
<div class="model-selector-container">
176+
<select id="model-select" class="model-select">
177+
<option value="" disabled selected>Carregando modelos...</option>
178+
</select>
179+
</div>
180+
181+
<!-- Model Info & Action -->
182+
<div id="model-info-panel" class="model-info-panel hidden">
183+
<p id="model-description" class="model-description">Descrição do modelo...</p>
184+
185+
<div class="model-actions">
186+
<button id="model-action-btn" class="model-action-btn">
187+
<span id="model-action-text">Selecionar</span>
188+
<div id="model-btn-spinner" class="spinner-mini hidden"></div>
189+
</button>
190+
</div>
191+
</div>
192+
193+
<!-- Download Progress -->
194+
<div id="download-progress-container" class="download-progress-container hidden">
195+
<div class="progress-bar-bg">
196+
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
197+
</div>
198+
<p id="download-status-text" class="download-status-text">Baixando modelo...</p>
199+
</div>
107200
</div>
108201
</div>
109202

@@ -115,47 +208,91 @@ <h2 class="modal-title">⚠️ Permissões Necessárias</h2>
115208
<p class="transcription-label">Última transcrição:</p>
116209
<p id="transcription-text" class="transcription-text"></p>
117210
<button id="play-audio-btn" class="play-btn" title="Ouvir gravação">
118-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
211+
<svg
212+
xmlns="http://www.w3.org/2000/svg"
213+
width="14"
214+
height="14"
215+
viewBox="0 0 24 24"
216+
fill="none"
217+
stroke="currentColor"
218+
stroke-width="2"
219+
stroke-linecap="round"
220+
stroke-linejoin="round"
221+
>
222+
<polygon points="5 3 19 12 5 21 5 3"></polygon>
223+
</svg>
119224
<span>Ouvir áudio</span>
120225
</button>
121226
</div>
122227

123-
124-
125-
126228
<div class="logs-wrapper">
127229
<div class="logs-header" id="logs-header">
128230
<button id="toggle-logs-btn" class="toggle-logs-btn">
129231
<span id="toggle-icon">▶</span>
130232
<span class="label">Logs</span>
131233
</button>
132234
<button id="copy-log-btn" class="copy-btn" title="Copiar logs">
133-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
235+
<svg
236+
xmlns="http://www.w3.org/2000/svg"
237+
width="14"
238+
height="14"
239+
viewBox="0 0 24 24"
240+
fill="none"
241+
stroke="currentColor"
242+
stroke-width="2"
243+
stroke-linecap="round"
244+
stroke-linejoin="round"
245+
>
246+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
247+
<path
248+
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
249+
></path>
250+
</svg>
134251
Copiar
135252
</button>
136253
</div>
137254
<div id="logs-container" class="logs-container">
138255
<div id="debug-log-list" class="debug-log-list"></div>
139256
</div>
140257
</div>
141-
258+
142259
<div class="footer">
143260
<a href="https://www.linkedin.com/in/ciromaciel/" class="footer-link">
144-
<img src="../assets/ciro-maciel.jpeg" alt="Ciro Cesar Maciel" class="avatar" />
261+
<img
262+
src="../assets/ciro-maciel.jpeg"
263+
alt="Ciro Cesar Maciel"
264+
class="avatar"
265+
/>
145266
<span>Powered by <strong>Ciro Cesar Maciel</strong></span>
146267
</a>
147-
268+
148269
<!-- Auto-Launch Toggle (compact with icon) -->
149270
<label class="auto-launch-switch" title="Iniciar com o sistema">
150271
<input type="checkbox" id="auto-launch-toggle" />
151272
<span class="switch-track">
152273
<span class="switch-thumb">
153-
<svg class="icon-off" viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5">
154-
<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/>
155-
<line x1="12" y1="2" x2="12" y2="12"/>
274+
<svg
275+
class="icon-off"
276+
viewBox="0 0 24 24"
277+
width="10"
278+
height="10"
279+
fill="none"
280+
stroke="currentColor"
281+
stroke-width="2.5"
282+
>
283+
<path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
284+
<line x1="12" y1="2" x2="12" y2="12" />
156285
</svg>
157-
<svg class="icon-on" viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5">
158-
<polyline points="20 6 9 17 4 12"/>
286+
<svg
287+
class="icon-on"
288+
viewBox="0 0 24 24"
289+
width="10"
290+
height="10"
291+
fill="none"
292+
stroke="currentColor"
293+
stroke-width="2.5"
294+
>
295+
<polyline points="20 6 9 17 4 12" />
159296
</svg>
160297
</span>
161298
</span>

0 commit comments

Comments
 (0)