diff --git a/extension/popup/index.html b/extension/popup/index.html index 34b4612..36da2a1 100644 --- a/extension/popup/index.html +++ b/extension/popup/index.html @@ -47,13 +47,7 @@
- - +
diff --git a/extension/popup/js/gptVersion.js b/extension/popup/js/gptVersion.js index 917c55e..4f566d6 100644 --- a/extension/popup/js/gptVersion.js +++ b/extension/popup/js/gptVersion.js @@ -18,36 +18,22 @@ function checkCanIncludeImages() { modelInput.addEventListener('input', checkCanIncludeImages); /** - * Get the last ChatGPT version + * Get the list of chatgpt versions */ function getLastChatGPTVersion() { const apiKeySelector = document.querySelector('#apiKey'); - const reloadModel = document.querySelector('#reloadModel'); + const selectModel = document.querySelector('#model'); let apiKey = apiKeySelector.value?.trim(); // If the api key is set we enable the button to get the last chatgpt version - function checkFiledApiKey() { - if (apiKey) { - reloadModel.removeAttribute('disabled'); - reloadModel.setAttribute('title', 'Get last ChatGPT version'); + async function getGptVersions() { + if (!apiKey) { + selectModel.setAttribute('disabled', true); return; } - reloadModel.setAttribute('disabled', true); - reloadModel.setAttribute('title', 'Provide an api key first'); - } - checkFiledApiKey(); - - // Check if the api key is set - apiKeySelector.addEventListener('input', function () { - apiKey = apiKeySelector.value.trim(); - checkFiledApiKey(); - }); - - // Event listener to handle a click on the relaod icon button - reloadModel.addEventListener('click', async function () { - if (!apiKey) return; + selectModel.innerHTML = ''; try { const req = await fetch('https://api.openai.com/v1/models', { @@ -57,13 +43,29 @@ function getLastChatGPTVersion() { }); const rep = await req.json(); rep.data.sort((a, b) => b.id.localeCompare(a.id)); // we sort the model to get the best chatgpt version - const model = rep.data.find(model => model.id.startsWith('gpt')); - modelInput.value = model.id; + const models = rep.data.filter(model => model.id.startsWith('gpt')); + + for (const model of models) { + const opt = document.createElement('option'); + opt.value = model.id; + opt.textContent = model.id; + selectModel.appendChild(opt); + } checkCanIncludeImages(); } catch (err) { console.error(err); showMessage({ msg: 'Failed to fetch last ChatGPT version', error: true }); } + + selectModel.removeAttribute('disabled'); + } + + // Check if the api key is set + apiKeySelector.addEventListener('blur', function () { + apiKey = apiKeySelector.value.trim(); + getGptVersions(); }); + + getGptVersions(); } diff --git a/extension/popup/style.css b/extension/popup/style.css index 85b8c39..d44b084 100644 --- a/extension/popup/style.css +++ b/extension/popup/style.css @@ -68,7 +68,8 @@ a { } .line input[type='text'], -.line input[type='password'] { +.line input[type='password'], +.line select { flex: 1 1; border: thin solid var(--color); padding: 0.3rem 0.5rem; @@ -77,6 +78,10 @@ a { background-color: transparent; } +.line option { + color: #000; +} + .line input[type='checkbox'] { accent-color: var(--btn-color); }