Skip to content

Commit a218a92

Browse files
sysreadsysread
committed
auto-populate models; default model is now gpt-4o-mini
1 parent baa2294 commit a218a92

File tree

7 files changed

+159
-32
lines changed

7 files changed

+159
-32
lines changed

‎CHANGES.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 2.0.3
2+
- Auto-populate model options from OpenAI API
3+
- Default model is updated to `gpt-4o-mini`
4+
15
# 2.0.2
26
- Adds gpt-4o-mini model
37

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifest_version": 3,
33
"name": "Page Summarizer",
4-
"version": "2.0.2",
4+
"version": "2.0.3",
55
"description": "Summarize web pages using OpenAI API",
66
"permissions": [
77
"activeTab",

‎src/compat.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ async function updateConfig(keys, callback) {
44
return chrome.storage.sync.set(config);
55
}
66

7+
const defaultModel = 'gpt-4o-mini';
8+
79
const defaultProfile = {
8-
model: 'gpt-3.5-turbo-16k',
10+
model: defaultModel,
911
customPrompts: ['Please summarize the contents of this web page for brevity.'],
1012
};
1113

@@ -64,7 +66,7 @@ export async function updateConfigToUseProfiles_20231117() {
6466
if (oldConfig.model && !oldConfig.profiles) {
6567
// Found old configuration, migrate to new profile-based format
6668
const defaultProfileConfig = {
67-
model: oldConfig.model || 'gpt-3.5-turbo-16k',
69+
model: oldConfig.model || defaultModel,
6870
customPrompts: oldConfig.customPrompts || [],
6971
};
7072

‎src/pages/config.html

+4-8
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,10 @@ <h1>Page summarizer</h1>
6262

6363
<div class="mb-3">
6464
<label for="model" class="form-label">Default model</label>
65-
<select id="model" name="model" class="form-select">
66-
<option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
67-
<option value="gpt-3.5-turbo-16k" selected>GPT 3.5 Turbo 16K</option>
68-
<option value="gpt-4">GPT 4</option>
69-
<option value="gpt-4-turbo">GPT 4 Turbo</option>
70-
<option value="gpt-4o">GPT 4o</option>
71-
<option value="gpt-4o-mini">GPT 4o Mini</option>
72-
</select>
65+
<div class="input-group">
66+
<select id="model" name="model" class="form-select"></select>
67+
<button id="refresh-models-btn" class="btn btn-secondary">Refresh available models</button>
68+
</div>
7369
</div>
7470

7571
<div class="mb-3">

‎src/pages/config.js

+125-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
document.addEventListener('DOMContentLoaded', async () => {
2+
const defaultModel = 'gpt-4o-mini';
3+
24
const maxPromptBytes = 8192;
35
const customPromptsCounter = document.getElementById('customPromptsCounter');
46

@@ -12,10 +14,14 @@ document.addEventListener('DOMContentLoaded', async () => {
1214

1315
// Profile options
1416
const name = document.getElementById('name');
15-
const model = document.getElementById('model');
1617
const customPrompts = document.getElementById('customPrompts');
1718
const isDefault = document.getElementById('default');
1819

20+
// Model-related widgets
21+
const refreshModelsBtn = document.getElementById('refresh-models-btn');
22+
const saveProfileBtn = document.getElementById('save-profile-btn');
23+
const modelSelect = document.getElementById('model');
24+
1925
let config;
2026
let currentProfile;
2127

@@ -57,7 +63,7 @@ document.addEventListener('DOMContentLoaded', async () => {
5763

5864
function buildDefaultProfile() {
5965
return {
60-
model: 'gpt-3.5-turbo-16k',
66+
model: defaultModel,
6167
customPrompts: [],
6268
};
6369
}
@@ -79,7 +85,7 @@ document.addEventListener('DOMContentLoaded', async () => {
7985

8086
// Profile options
8187
const name = document.getElementById('name').value.trim();
82-
const model = document.getElementById('model').value.trim();
88+
const model = modelSelect.value.trim();
8389
const customPrompts = document.getElementById('customPrompts').value.split('\n');
8490
const isDefault = document.getElementById('default').checked;
8591

@@ -127,7 +133,7 @@ document.addEventListener('DOMContentLoaded', async () => {
127133

128134
await chrome.storage.sync.set(config);
129135
await reloadConfig();
130-
await selectProfile(name);
136+
selectProfile(name);
131137

132138
window.scrollTo(0, 0);
133139
showSuccess('Settings saved.');
@@ -153,7 +159,7 @@ document.addEventListener('DOMContentLoaded', async () => {
153159
await chrome.storage.sync.set(config);
154160

155161
showSuccess(`Profile "${currentProfile}" deleted.`);
156-
await selectProfile(config.defaultProfile);
162+
selectProfile(config.defaultProfile);
157163
}
158164
}
159165

@@ -184,7 +190,7 @@ document.addEventListener('DOMContentLoaded', async () => {
184190

185191
async function reloadConfig() {
186192
const profileKeys = (await chrome.storage.sync.get('profiles')).profiles.map((name) => `profile__${name}`);
187-
config = await chrome.storage.sync.get(['apiKey', 'defaultProfile', 'debug', 'profiles', ...profileKeys]);
193+
config = await chrome.storage.sync.get(['apiKey', 'defaultProfile', 'debug', 'models', 'profiles', ...profileKeys]);
188194
console.log('Config', config);
189195

190196
if (config.profiles === undefined) {
@@ -214,7 +220,113 @@ document.addEventListener('DOMContentLoaded', async () => {
214220
// Populate the profile selector dropdown
215221
sortedProfileNames.forEach(addOption);
216222

217-
await selectProfile(currentProfile);
223+
// Populate the model selector dropdown if possible
224+
if (config.models && config.models.length > 0) {
225+
populateModelOptions(config.models);
226+
modelSelect.disabled = false;
227+
saveProfileBtn.disabled = false;
228+
} else {
229+
modelSelect.disabled = true;
230+
saveProfileBtn.disabled = true;
231+
}
232+
233+
selectProfile(currentProfile);
234+
}
235+
236+
function populateModelOptions(models) {
237+
// Clear existing options
238+
modelSelect.innerHTML = '';
239+
240+
// Populate the models dropdown
241+
models.forEach((modelName) => {
242+
const option = new Option(modelName, modelName);
243+
modelSelect.add(option);
244+
});
245+
}
246+
247+
async function fetchAvailableModels(apiKey) {
248+
const headers = {
249+
Authorization: `Bearer ${apiKey}`,
250+
};
251+
252+
try {
253+
const response = await fetch('https://api.openai.com/v1/models', {
254+
method: 'GET',
255+
headers: headers,
256+
});
257+
258+
if (!response.ok) {
259+
console.error('Error fetching models:', response);
260+
throw new Error(`Error fetching models: ${response.statusText}`);
261+
}
262+
263+
const data = await response.json();
264+
265+
models = data.data
266+
// We only want the model IDs
267+
.map((model) => model.id)
268+
// Filter out models that are not GPT-3 or GPT-4
269+
.filter((model) => model.startsWith('gpt-'))
270+
// Filter out models matching `-\d\d\d\d`
271+
.filter((model) => !model.match(/-\d\d\d\d/));
272+
273+
models.sort();
274+
275+
return models;
276+
} catch (error) {
277+
console.error(error);
278+
return [];
279+
}
280+
}
281+
282+
async function refreshAvailableModels() {
283+
// Disable the button to prevent multiple clicks
284+
refreshModelsBtn.disabled = true;
285+
refreshModelsBtn.textContent = 'Refreshing...';
286+
287+
// Store the currently selected model
288+
const currentModel = modelSelect.value;
289+
290+
try {
291+
const apiKeyValue = apiKey.value.trim();
292+
293+
if (!apiKeyValue) {
294+
showError('Please enter your OpenAI API key before refreshing models.');
295+
return;
296+
}
297+
298+
const models = await fetchAvailableModels(apiKeyValue);
299+
300+
if (models.length === 0) {
301+
showError('No models retrieved. Please check your API key and try again.');
302+
return;
303+
}
304+
305+
// Store models in config
306+
config.models = models;
307+
await chrome.storage.sync.set(config);
308+
309+
// Populate the models dropdown
310+
populateModelOptions(models);
311+
312+
// Enable the models select and save button
313+
modelSelect.disabled = false;
314+
saveProfileBtn.disabled = false;
315+
316+
showSuccess('Available models have been refreshed.');
317+
318+
// Restore the previously selected model... if it still exists.
319+
if (models.includes(currentModel)) {
320+
modelSelect.value = currentModel;
321+
} else {
322+
modelSelect.value = defaultModel;
323+
}
324+
} catch (error) {
325+
showError(`Failed to refresh models: ${error.message}`);
326+
} finally {
327+
refreshModelsBtn.disabled = false;
328+
refreshModelsBtn.textContent = 'Refresh available models';
329+
}
218330
}
219331

220332
function addOption(name) {
@@ -233,7 +345,7 @@ document.addEventListener('DOMContentLoaded', async () => {
233345
profileSelector.value = profile;
234346

235347
name.value = profile;
236-
model.value = data.model || 'gpt-3.5-turbo-16k';
348+
modelSelect.value = data.model || defaultModel;
237349
customPrompts.value = data.customPrompts.join('\n') || '';
238350
isDefault.checked = profile === config.defaultProfile;
239351

@@ -357,6 +469,11 @@ document.addEventListener('DOMContentLoaded', async () => {
357469
}
358470
});
359471

472+
// Event listener for the refresh models button
473+
refreshModelsBtn.addEventListener('click', async () => {
474+
await refreshAvailableModels();
475+
});
476+
360477
// Powers the display of the custom prompts byte counter
361478
customPrompts.addEventListener('input', updateCustomPromptsCounter);
362479

‎src/pages/popup.html

+1-8
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,7 @@ <h2 class="position-relative">
3232

3333
<div class="input-group input-group-sm mb-2">
3434
<span class="input-group-text">Model</span>
35-
<select id="model" name="model" class="form-select">
36-
<option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
37-
<option value="gpt-3.5-turbo-16k" selected>GPT 3.5 Turbo 16K</option>
38-
<option value="gpt-4">GPT 4</option>
39-
<option value="gpt-4-turbo">GPT 4 Turbo</option>
40-
<option value="gpt-4o">GPT 4o</option>
41-
<option value="gpt-4o-mini">GPT 4o Mini</option>
42-
</select>
35+
<select id="model" name="model" class="form-select"></select>
4336
</div>
4437

4538
<div class="input-group input-group-sm mb-3">

‎src/pages/popup.js

+20-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
document.addEventListener('DOMContentLoaded', async function () {
2+
const defaultModel = 'gpt-4o-mini';
3+
24
const query = new URLSearchParams(window.location.search);
35

46
const target = document.getElementById('summary');
@@ -298,9 +300,25 @@ document.addEventListener('DOMContentLoaded', async function () {
298300

299301
async function getModel() {
300302
const selectedModel = modelDropdown ? modelDropdown.value : undefined;
301-
return selectedModel || 'gpt-3.5-turbo-16k'; // Fallback to a default model
303+
return selectedModel || defaultModel; // Fallback to a default model
304+
}
305+
306+
async function populateModelOptions() {
307+
const config = await chrome.storage.sync.get('models');
308+
const models = config.models || [];
309+
310+
// Clear existing options
311+
modelDropdown.innerHTML = '';
312+
313+
// Populate the models dropdown
314+
models.forEach((modelName) => {
315+
const option = new Option(modelName, modelName);
316+
modelDropdown.add(option);
317+
});
302318
}
303319

320+
await populateModelOptions();
321+
304322
//----------------------------------------------------------------------------
305323
// powers the profile dropdown
306324
//----------------------------------------------------------------------------
@@ -411,9 +429,6 @@ document.addEventListener('DOMContentLoaded', async function () {
411429
// Initial call to load profiles
412430
await loadProfiles();
413431

414-
// Update profile when the selector changes
415-
//profileSelector.addEventListener('change', selectProfile);
416-
417432
//----------------------------------------------------------------------------
418433
// Autoscroll to the bottom of the page when new content is added. If the
419434
// user scrolls up, disable autoscroll until they scroll back to the bottom.
@@ -437,7 +452,7 @@ document.addEventListener('DOMContentLoaded', async function () {
437452
const url = await getOriginalTabUrl();
438453
const config = await chrome.storage.local.get('results');
439454

440-
if (config.results && config.results[url]) {
455+
if (config.results && config.results[url] && config.results[url].summary) {
441456
const result = config.results[url];
442457

443458
// Check if the result is a string (old format) or an object (new format)

0 commit comments

Comments
 (0)