Skip to content

Commit bc9c717

Browse files
unclecodeunclecode
committed
chore: Add API key input section to options page
1 parent 5e0251f commit bc9c717

File tree

4 files changed

+56
-27
lines changed

4 files changed

+56
-27
lines changed

‎src/background.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -189,13 +189,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
189189
if (message.action === "transcribe") {
190190
(async function () {
191191
try {
192-
if (currentModel === "groq" && !apiKey) {
193-
sendResponse({ success: false, error: "Groq API key not set. Please set it in the extension options." });
192+
if ((currentModel === "groq" && !groqApiKey) || (currentModel === "openai" && !openaiApiKey)) {
193+
sendResponse({ success: false, error: "API key not set. Please set it in the extension options." , micId: message.micId || "mic-button"});
194194
return;
195195
}
196-
197-
let result;
198-
199196
// refresh currentModel
200197
chrome.storage.sync.get(["model"], async function (result) {
201198
if (result.model) {
@@ -228,7 +225,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
228225
});
229226

230227
} catch (error) {
231-
sendResponse({ success: false, error: error.message || "Unknown error" });
228+
sendResponse({ success: false, error: error.message || "Unknown error", micId: message.micId || "mic-button" });
232229
}
233230
})();
234231
return true; // Indicates we will send a response asynchronously

‎src/content.js

+46-20
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ let isTranscribing = false;
33
let audioContext;
44
let mediaRecorder;
55
let audioChunks = [];
6+
let clickedMicId = "";
7+
68
const MAX_RETRIES = 3;
79
const RETRY_DELAY = 100; // 1 second
810
const WHISPER_SAMPLING_RATE = 16000;
@@ -79,10 +81,11 @@ function insertMicrophoneButton(targetDiv, inline) {
7981
}
8082
}
8183

82-
function checkSettingsAndToggleRecording() {
83-
chrome.storage.sync.get(['model', 'apiKey'], function(result) {
84-
if (result.model === 'groq' && !result.apiKey) {
85-
showError("Groq API key not set. Please set it in the extension options.");
84+
function checkSettingsAndToggleRecording(evt) {
85+
const button = evt.currentTarget;
86+
chrome.storage.sync.get(['model', 'groqApiKey', 'openaiApiKey'], function(result) {
87+
if ((result.model === 'groq' && !result.groqApiKey) || (result.model === 'openai' && !result.openaiApiKey)) {
88+
showError("API key not set. Please set it in the extension options from the Chrome extension menu.");
8689
return;
8790
}
8891

@@ -91,13 +94,17 @@ function checkSettingsAndToggleRecording() {
9194
if (localResult.modelLoadError) {
9295
showError("WebGPU model failed to load. Please try again or switch to Groq in the extension options.");
9396
} else {
94-
toggleRecording();
97+
toggleRecording(evt, button);
9598
}
9699
});
97100
} else {
98-
toggleRecording();
101+
toggleRecording(evt, button);
99102
}
100103
});
104+
105+
evt.preventDefault();
106+
evt.stopPropagation();
107+
return false;
101108
}
102109

103110
function showError(message) {
@@ -115,7 +122,7 @@ function showError(message) {
115122
closeButton.onclick = closeError;
116123

117124
// Disable the mic button
118-
const micButton = document.getElementById("mic-button");
125+
const micButton = document.getElementById(clickedMicId);
119126
if (micButton) {
120127
micButton.disabled = true;
121128
micButton.style.opacity = "0.5";
@@ -136,15 +143,15 @@ function closeError() {
136143
infoSpeechDiv.textContent = "";
137144
}
138145
// Re-enable the mic button
139-
const micButton = document.getElementById("mic-button");
146+
const micButton = document.getElementById(clickedMicId);
140147
if (micButton) {
141148
micButton.disabled = false;
142149
micButton.style.opacity = "1";
143150
}
144151
}
145152

146-
function toggleRecording(obj) {
147-
clickedMicId = obj.currentTarget //.id;
153+
function toggleRecording(evt, button) {
154+
clickedMicId = button; // obj.currentTarget //.id;
148155
closeError(); // Close any existing error message
149156
const micButton = clickedMicId // document.getElementById(clickedMicId);
150157
if (!isRecording && !isTranscribing) {
@@ -160,9 +167,9 @@ function toggleRecording(obj) {
160167
}
161168

162169
// cancel the event
163-
obj.preventDefault();
170+
evt.preventDefault();
164171
// avoid the event to propagate
165-
obj.stopPropagation();
172+
evt.stopPropagation();
166173

167174
return false;
168175
}
@@ -212,6 +219,24 @@ function stopRecording() {
212219
}
213220

214221

222+
// audioBlob
223+
// .arrayBuffer()
224+
// .then((buffer) => {
225+
// // Send the audio buffer to the background script for transcription
226+
// chrome.runtime.sendMessage(
227+
// {
228+
// action: "transcribe",
229+
// audioBuffer: Array.from(new Uint8Array(buffer)), // Convert ArrayBuffer to array
230+
// micId: clickedMicId.id,
231+
// },
232+
// handleTranscription
233+
// );
234+
// })
235+
// .catch((error) => {
236+
// console.error("Error converting blob to array buffer:", error);
237+
// showError("Error processing audio. Please try again.");
238+
// resetRecordingState();
239+
// });
215240

216241
async function transcribeAudio(retryCount = 0) {
217242
if (retryCount >= MAX_RETRIES) {
@@ -250,6 +275,7 @@ async function transcribeAudio(retryCount = 0) {
250275
{
251276
action: "transcribe",
252277
audioBuffer: Array.from(uint8Array),
278+
micId: clickedMicId.id,
253279
},
254280
(response) => {
255281
if (chrome.runtime.lastError) {
@@ -276,16 +302,16 @@ function showRetryMessage(retryCount) {
276302
}
277303

278304
function handleTranscription(response) {
279-
const micId = response.micId;
305+
clickedMicId = response.micId;
280306

281-
const micButton = document.getElementById(micId);
307+
const micButton = document.getElementById(clickedMicId);
282308
isTranscribing = false;
283309
micButton.disabled = false;
284310
micButton.style.animation = "";
285311
micButton.innerHTML = recordIcon;
286312

287313
if (response.success && response.text) {
288-
insertTranscribedText(response.text, micId);
314+
insertTranscribedText(response.text, clickedMicId);
289315
initializeExtension();
290316
} else {
291317
showError(response.error || "Transcription failed. Please try again.");
@@ -393,11 +419,11 @@ document.head.appendChild(style);
393419
// initializeExtension();
394420
// }
395421

396-
// function initializeExtension() {
397-
// insertMicrophoneButton();
398-
// console.log("Microphone button inserted");
399-
// // Add any other initialization code here
400-
// }
422+
function initializeExtension() {
423+
// insertMicrophoneButton();
424+
// console.log("Microphone button inserted");
425+
// // Add any other initialization code here
426+
}
401427

402428
// Every 100 ms check if mic button is present if not insert it
403429
setInterval(() => {

‎src/options.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h2>Model Selection</h2>
1717
<option value="openai">OpenAI</option>
1818
</select>
1919
</div>
20-
<div class="section">
20+
<div id="api_section" class="section">
2121
<h2>API Keys</h2>
2222
<div id="groqApiKeyContainer">
2323
<h3>Groq API Key</h3>

‎src/options.js

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
document.addEventListener('DOMContentLoaded', function() {
22
const modelSelect = document.getElementById('modelSelect');
3+
const apiKeyContainer = document.getElementById('api_section');
34
const groqApiKeyInput = document.getElementById('groqApiKey');
45
const openaiApiKeyInput = document.getElementById('openaiApiKey');
56
const saveSettingsButton = document.getElementById('saveSettings');
@@ -24,6 +25,11 @@ document.addEventListener('DOMContentLoaded', function() {
2425
// Toggle API key input visibility based on selected model
2526
function toggleApiKeyVisibility() {
2627
const selectedModel = modelSelect.value;
28+
if (selectedModel !== 'groq' && selectedModel !== 'openai') {
29+
apiKeyContainer.style.display = 'none';
30+
return;
31+
}
32+
apiKeyContainer.style.display = 'block';
2733
groqApiKeyContainer.style.display = selectedModel === 'groq' ? 'block' : 'none';
2834
openaiApiKeyContainer.style.display = selectedModel === 'openai' ? 'block' : 'none';
2935
}

0 commit comments

Comments
 (0)