From 9073b834e775a619be8908536939c0627635cd3e Mon Sep 17 00:00:00 2001 From: GOvEy1nw <45126527+GOvEy1nw@users.noreply.github.com> Date: Wed, 26 Jun 2024 17:40:06 +0100 Subject: [PATCH] 0.0.6 --- index.html | 54 ++- js/plugin.js | 1017 ++++++++++++++++++++++++++++--------------------- manifest.json | 2 +- 3 files changed, 617 insertions(+), 456 deletions(-) diff --git a/index.html b/index.html index bc32057..ab6bca4 100644 --- a/index.html +++ b/index.html @@ -100,14 +100,14 @@ margin: 0; } - #processLog { + #pLogContainer { display: none; flex-direction: column; align-items: center; height: calc(100vh - 200px); } - #processLogBox { + #pLogText { font-size: 10px; color: #ffffff; width: 90%; @@ -356,7 +356,7 @@ color: #ff7875; } - #importanceList { + #tagCat { margin: 0 auto; display: flex; flex-direction: column; @@ -372,15 +372,25 @@
AI Auto Tag
-
Ollama -

-
-
- -
- - - -
-
-
-
+
@@ -444,10 +440,10 @@

-
+
- -
-
- +
+
+
diff --git a/js/plugin.js b/js/plugin.js index 12d8c7e..453768b 100644 --- a/js/plugin.js +++ b/js/plugin.js @@ -1,54 +1,120 @@ +//#region Variables const fs = require("fs"); const base64 = require("base64-js"); const { default: ollama } = require('ollama'); // CJS - -const saveApiKeyButton = document.getElementById('saveApiKey'); -const apiKeyInput = document.getElementById('apiKey'); +const saveApiKey = document.getElementById('saveApiKey'); const apiKeyStatus = document.getElementById('apiKeyStatus'); +const apiProvider = document.getElementById('apiProvider'); +const apiKey = document.getElementById(`apiKey`); +const apiKeyMenu = document.getElementById('apiKeyMenu'); +const apiSettings = document.getElementById('apiSettings'); const statusElement = document.getElementById('status'); const customModelName = document.getElementById('customModelName'); const newItem = document.getElementById('newItem'); +const addItemBtn = document.getElementById('addItem'); +const tagCatContainer = document.getElementById('tagCatContainer'); +const tagCat = document.getElementById('tagCat'); +const tagCatChk = document.getElementById('tagCatChk'); +const localOptions = document.getElementById('localOptions'); +const clearApiKeyButton = document.getElementById('clearApiKey'); +const textFromClipboard = eagle.clipboard.readText(); +const sortableList = document.getElementById('sortableList'); +const savedSettings = localStorage.getItem('pluginSettings'); +const ollamaModel = document.getElementById('ollamaModel'); +const settingsBtn = document.getElementById('settingsButton'); +const closeBtn = document.getElementById('closeButton'); +const cancelBtn = document.getElementById('cancelButton'); +const cancelProcess = document.getElementById('cancelProcess'); +const searchBtn = document.getElementById('searchButton'); +const pLogClear = document.getElementById('pLogClear'); +const pLogContainer = document.getElementById('pLogContainer'); +const pLogText = document.getElementById('pLogText'); +const pLogShow = document.getElementById('pLogShow'); +const enableTagLimit = document.getElementById('enableTagLimit'); +const tagLimitOutput = document.getElementById('tagLimitOutput'); +const tagLimit = document.getElementById('tagLimit'); +const useThumbnail = document.getElementById('useThumbnail'); +const replaceTags = document.getElementById('replaceTags'); +const preLoadModel = document.getElementById('preLoadModel'); +const progressBar = document.getElementById('progressBar'); +const progressBarContainer = document.getElementById('progressBarContainer'); +const settingsWindow = document.getElementById('settingsWindow'); +const downloadBtn = document.getElementById('downloadModel'); +const deleteModelBtn = document.getElementById('deleteModelButton'); +const runButton = document.getElementById('run'); +const settings = JSON.parse(savedSettings); +//#endregion -apiKeyInput.addEventListener('paste', (event) => { +//#region Event Listeners +// Add event listeners to save settings when changed +apiKey.addEventListener('paste', (event) => { event.preventDefault(); // Prevent the default paste behavior - const textFromClipboard = eagle.clipboard.readText(); - apiKeyInput.value = textFromClipboard; // Replace the current value with the pasted text + apiKey.value = textFromClipboard; // Replace the current value with the pasted text }); customModelName.addEventListener('paste', (event) => { event.preventDefault(); // Prevent the default paste behavior - const textFromClipboard = eagle.clipboard.readText(); customModelName.value = textFromClipboard; // Replace the current value with the pasted text }); newItem.addEventListener('paste', (event) => { event.preventDefault(); // Prevent the default paste behavior - const textFromClipboard = eagle.clipboard.readText(); newItem.value = textFromClipboard; // Replace the current value with the pasted text }); +apiProvider.addEventListener('change', () => { + saveSettings(); + checkStatus(0); +}); +settingsBtn.addEventListener('click', () => { + settingsWindow.classList.toggle('visible'); +}); -document.getElementById('apiProvider').addEventListener('change', () => { - const apiProvider = document.getElementById('apiProvider').value; - checkStatus(0); - if (localStorage.getItem(`${apiProvider}apiKey`)) { - document.getElementById('apiKey').placeholder = `API Key Stored`; - } else { - document.getElementById('apiKey').placeholder = `Enter API Key`; +document.addEventListener('click', (event) => { + const withinBoundaries = apiKeyMenu.contains(event.target) || settingsBtn.contains(event.target); + + if (!withinBoundaries) { + apiKeyMenu.classList.remove('visible'); } }); +downloadBtn.addEventListener('click', async () => { + await downloadModel(); +}); + +// Add functionality to the close button to close the window +closeBtn.addEventListener('click', () => { + window.close(); // This assumes you have the ability to close the window directly +}); + +searchBtn.addEventListener('click', () => { + eagle.shell.openExternal('https://ollama.com/library'); +}); + +pLogClear.addEventListener('click', () => { + pLogText.innerHTML = ''; +}); + + +function toggleTagCat() { + tagCat.style.display = tagCatChk.checked ? 'block' : 'none'; + + if (tagCatChk.checked) { + tagCat.style.display = 'block'; + } else { + tagCat.style.display = 'none'; + } +} + // Function to save API Key -saveApiKeyButton.addEventListener('click', async () => { - const apiProvider = document.getElementById('apiProvider').value; - const apiKey = document.getElementById(`apiKey`); - console.log(`${apiProvider}apiKey`); +saveApiKey.addEventListener('click', async () => { + console.log(`${apiProvider.value}apiKey`); if (apiKey) { - localStorage.setItem(`${apiProvider}apiKey`, apiKey.value); + localStorage.setItem(`${apiProvider.value}apiKey`, apiKey.value); console.log(`Saving API Key for ${apiProvider}:`, apiKey.value); - document.getElementById('apiKey').value = ``; - document.getElementById('apiKey').placeholder = `API Key Stored`; + apiKey.value = ``; + apiKey.placeholder = `API Key Stored`; checkStatus(0); // Clear after 5 seconds } else { checkStatus(0); // Clear after 5 seconds @@ -56,39 +122,187 @@ saveApiKeyButton.addEventListener('click', async () => { }); // Clear API Key -const clearApiKeyButton = document.getElementById('clearApiKey'); clearApiKeyButton.addEventListener('click', () => { - const apiProvider = document.getElementById('apiProvider').value; - localStorage.removeItem(`${apiProvider}apiKey`); - console.log(`Clearing API Key for ${apiProvider}`); - document.getElementById('apiKey').placeholder = `Enter API Key`; + localStorage.removeItem(`${apiProvider.value}apiKey`); + console.log(`Clearing API Key for ${apiProvider.value}`); + apiKey.placeholder = `Enter API Key`; checkStatus(0); // Clear after 5 seconds }); -// Function to toggle API key elements visibility -function toggleOllama() { - const useOllamaToggle = document.getElementById('useOllama').checked; - document.getElementById('apiKeyMenu').style.display = useOllamaToggle ? 'none' : ''; +enableTagLimit.addEventListener('change', saveSettings); +tagLimit.addEventListener('input', saveSettings); +useThumbnail.addEventListener('change', saveSettings); +replaceTags.addEventListener('change', saveSettings); +ollamaModel.addEventListener('change', () => { + saveSettings(); + checkStatus(0); +}); +pLogShow.addEventListener('change', () => { + saveSettings(); + if (pLogShow.checked) { + pLogContainer.style.display = 'flex'; + } else { + pLogContainer.style.display = ''; + } +}); +preLoadModel.addEventListener('change', () => { + saveSettings(); + checkStatus(0); +}); + +tagCatChk.addEventListener('change', () => { + saveSettings(); + toggleTagCat(); +}); - if (useOllamaToggle) { - document.getElementById('localOptions').style.display = 'block'; - document.getElementById('importanceListCheck').style.display = 'flex'; +cancelBtn.addEventListener('click', processabort); - } else { - document.getElementById('localOptions').style.display = 'none'; - document.getElementById('enableImportanceList').checked = false; - document.getElementById('importanceList').style.display = 'none'; - document.getElementById('importanceListCheck').style.display = 'none'; + +// Load settings from localStorage when the plugin is opened +document.addEventListener('DOMContentLoaded', async () => { + + if (savedSettings) { + enableTagLimit.checked = settings.enableTagLimit; + tagLimit.value = settings.tagLimit; + useThumbnail.checked = settings.useThumbnail; + replaceTags.checked = settings.replaceTags; + + if (ollamaModel.options.length > 0) { + if (settings.ollamaModel && Array.from(models).some(option => option.value === settings.ollamaModel)) { + ollamaModel.value = settings.ollamaModel; + } else { + ollamaModel.selectedIndex = 0; + } + } else { + statusElement.textContent = 'No models installed'; + } + + pLogShow.checked = settings.pLogShow; + apiProvider.value = settings.apiProvider; + toggleTagLimitVisibility(); + pLogContainer.style.display = settings.pLogShow ? 'flex' : ''; + preLoadModel.checked = settings.preLoadModel; + checkStatus(0); + tagCatChk.checked = settings.tagCatChk; + toggleTagCat(); } -} +}); +document.addEventListener('DOMContentLoaded', function () { + // Function to add a new item + function addItem() { + const itemText = newItem.value.trim(); + if (itemText) { + const li = createListItem(itemText); + sortableList.appendChild(li); + newItem.value = ''; + saveList(); + } + } -// Add event listener to the useOllama checkbox -document.getElementById('useOllama').addEventListener('change', () => { - toggleOllama(); - checkStatus(0); + // Function to create a list item + function createListItem(text) { + const li = document.createElement('li'); + li.draggable = true; + li.innerHTML = ` + ${text} + + `; + li.querySelector('.deleteItem').addEventListener('click', function () { + li.remove(); + saveList(); + }); + return li; + } + + // Add item when button is clicked + addItemBtn.addEventListener('click', addItem); + + // Add item when Enter key is pressed + newItem.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + addItem(); + } + }); + + // Drag and drop functionality + let draggedItem = null; + + sortableList.addEventListener('dragstart', function (e) { + draggedItem = e.target; + setTimeout(() => e.target.style.display = 'none', 0); + }); + + sortableList.addEventListener('dragend', function (e) { + setTimeout(() => { + e.target.style.display = ''; + draggedItem = null; + saveList(); // Save the list after drag and drop + }, 0); + }); + + sortableList.addEventListener('dragover', function (e) { + e.preventDefault(); + const afterElement = getDragAfterElement(sortableList, e.clientY); + const currentItem = draggedItem; + if (afterElement == null) { + sortableList.appendChild(currentItem); + } else { + sortableList.insertBefore(currentItem, afterElement); + } + }); + + function getDragAfterElement(container, y) { + const draggableElements = [...container.querySelectorAll('li:not(.dragging)')]; + return draggableElements.reduce((closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + if (offset < 0 && offset > closest.offset) { + return { offset: offset, element: child }; + } else { + return closest; + } + }, { offset: Number.NEGATIVE_INFINITY }).element; + } + + // Save list to localStorage + function saveList() { + const items = Array.from(sortableList.children).map(li => li.querySelector('span').textContent); + localStorage.setItem('tagCat', JSON.stringify(items)); + } + + // Load list from localStorage + function loadList() { + const items = JSON.parse(localStorage.getItem('tagCat') || '[]'); + sortableList.innerHTML = ''; // Clear existing items + items.forEach(item => { + const li = createListItem(item); + sortableList.appendChild(li); + }); + } + + // Load the list when the page loads + loadList(); }); +//#endregion + +//#region Functions +// Save settings to localStorage when changed +function saveSettings() { + const settings = { + enableTagLimit: enableTagLimit.checked, + tagLimit: tagLimit.value, + useThumbnail: useThumbnail.checked, + replaceTags: replaceTags.checked, + ollamaModel: ollamaModel.value, + pLogShow: pLogShow.checked, + apiProvider: apiProvider.value, + preLoadModel: preLoadModel.checked, + tagCatChk: tagCatChk.checked, + }; + localStorage.setItem('pluginSettings', JSON.stringify(settings)); +} async function preloadModel(modelName) { if (!modelName) { @@ -97,10 +311,8 @@ async function preloadModel(modelName) { return; } try { - document.getElementById('progressBar').style.width = '0%'; statusElement.textContent = `Loading ${modelName}...`; - document.getElementById('progressBarContainer').classList.add('sheen'); - document.getElementById('cancelProcess').style.display = 'inherit'; + progressLoading(); let progress = 0; let isLoaded = false; @@ -109,14 +321,13 @@ async function preloadModel(modelName) { if (progress < 99 && !isLoaded) { const increment = Math.max(1, 5 - Math.floor(progress / 5)); progress += increment; - document.getElementById('progressBar').style.width = `${progress}%`; + progressBar.style.width = `${progress}%`; statusElement.textContent = `Loading ${modelName}`; } else if (isLoaded) { clearInterval(interval); progress = 100; - document.getElementById('progressBar').style.width = '100%'; + progressDone() statusElement.textContent = `${modelName} loaded.`; - document.getElementById('progressBarContainer').classList.remove('sheen'); console.log(`${modelName} loaded.`); } }, 120); @@ -131,7 +342,7 @@ async function preloadModel(modelName) { await loadModel(); isLoaded = true; - document.getElementById('cancelProcess').style.display = 'none'; + cancelProcess.style.display = 'none'; } catch (error) { console.error(`Error loading ${modelName}:`, error); @@ -139,15 +350,23 @@ async function preloadModel(modelName) { } } -const customModelNameInput = document.getElementById('customModelName'); -const downloadModelButton = document.getElementById('downloadModel'); +function progressLoading() { + cancelProcess.style.display = 'inherit'; + progressBar.style.width = '0%'; + progressBar.style.backgroundColor = '#007BFF'; + progressBarContainer.classList.add('sheen'); +} + +function progressDone() { + progressBar.style.width = '100%'; + progressBar.style.backgroundColor = '#00c040'; + progressBarContainer.classList.remove('sheen'); + cancelProcess.style.display = 'none'; +} -downloadModelButton.addEventListener('click', async () => { - document.getElementById('cancelProcess').style.display = 'inherit'; - document.getElementById('progressBar').style.width = '0%'; - document.getElementById('progressBar').style.backgroundColor = '#007BFF'; - document.getElementById('progressBarContainer').classList.add('sheen'); - const modelName = customModelNameInput.value; +async function downloadModel() { + progressLoading(); + const modelName = customModelName.value; if (modelName) { try { statusElement.textContent = `Downloading Model...`; @@ -160,7 +379,7 @@ downloadModelButton.addEventListener('click', async () => { percent = Math.round((part.completed / part.total) * 100); } statusElement.textContent = `Downloading ${modelName} ${percent}%...`; - document.getElementById('progressBar').style.width = `${percent}%`; + progressBar.style.width = `${percent}%`; if (percent === 100 && !currentDigestDone) { statusElement.textContent = `Download complete.`; currentDigestDone = true; @@ -172,10 +391,10 @@ downloadModelButton.addEventListener('click', async () => { } } populateOllamaModels(); // Refresh the model list - customModelNameInput.value = ''; // Clear the input + customModelName.value = ''; // Clear the input checkStatus(1500); // Clear after 5 seconds - document.getElementById('cancelProcess').style.display = 'none'; - document.getElementById('progressBarContainer').classList.remove('sheen'); + cancelProcess.style.display = 'none'; + progressBarContainer.classList.remove('sheen'); } catch (error) { if (isCancelled) { statusElement.textContent = 'Download cancelled.'; @@ -185,25 +404,27 @@ downloadModelButton.addEventListener('click', async () => { } } finally { isCancelled = false; // Reset the flag - document.getElementById('progressBarContainer').classList.remove('sheen'); + progressBarContainer.classList.remove('sheen'); } } -}); + +} let isCancelled = false; async function checkStatus(delay) { await new Promise(resolve => setTimeout(resolve, delay)); - - if (document.getElementById('useOllama').checked) { + + if (apiProvider.value === 'ollama') { apiKeyStatus.innerHTML = ''; - document.getElementById('localOptions').style.display = 'block'; + localOptions.style.display = 'block'; + apiSettings.style.display = 'none'; try { const modelsAvailable = await populateOllamaModels(); if (!modelsAvailable) { return; // Exit early if no models are available } - const modelName = document.getElementById('ollamaModel').value; + const modelName = ollamaModel.value; if (!modelName) { throw new Error('No model selected'); } @@ -212,25 +433,23 @@ async function checkStatus(delay) { if (response.models[0].name === modelName) { statusElement.textContent = `${modelName} loaded.`; console.log(`${modelName} already loaded.`); - document.getElementById('progressBar').style.width = '100%'; - document.getElementById('progressBar').style.backgroundColor = '#007BFF'; - document.getElementById('progressBarContainer').classList.remove('sheen'); + progressDone() } else { - if (document.getElementById('preLoadModel').checked) { + if (preLoadModel.checked) { await preloadModel(modelName); } else { statusElement.textContent = 'Model will load on next run.'; - document.getElementById('progressBar').style.width = '0%'; + progressBar.style.width = '0%'; } } } else { - if (document.getElementById('preLoadModel').checked) { + if (preLoadModel.checked) { await preloadModel(modelName); } else { statusElement.textContent = 'Model will load on next run.'; - document.getElementById('progressBar').style.width = '0%'; + progressBar.style.width = '0%'; } } } catch (error) { @@ -239,17 +458,18 @@ async function checkStatus(delay) { } } else { - const apiProvider = document.getElementById('apiProvider').value; - const storedApiKey = localStorage.getItem(`${apiProvider}apiKey`); - if (storedApiKey) { - apiKeyStatus.innerHTML = ''; - statusElement.innerHTML = 'Ready when you are...'; - document.getElementById('progressBar').style.backgroundColor = '#007BFF'; - document.getElementById('apiKey').placeholder = `API Key Stored`; - } else { - apiKeyStatus.innerHTML = ''; - statusElement.innerHTML = 'Please add API Key.'; - document.getElementById('apiKey').placeholder = `Enter API Key`; + localOptions.style.display = 'none'; + apiSettings.style.display = 'block'; + const storedApiKey = localStorage.getItem(`${apiProvider.value}apiKey`); + if (storedApiKey) { + apiKeyStatus.innerHTML = ''; + statusElement.innerHTML = 'Ready when you are...'; + progressBar.style.backgroundColor = '#007BFF'; + apiKey.placeholder = `API Key Stored`; + } else { + apiKeyStatus.innerHTML = ''; + statusElement.innerHTML = 'Please add API Key.'; + apiKey.placeholder = `Enter API Key`; } } } @@ -257,26 +477,24 @@ async function checkStatus(delay) { function processabort() { statusElement.textContent = 'Process cancelled.'; // Disable the sheen after all files have been processed - document.getElementById('progressBarContainer').classList.add('no-sheen'); - document.getElementById('progressBar').style.width = '0%'; - document.getElementById('cancelProcess').style.display = 'none'; + progressBarContainer.classList.add('no-sheen'); + progressBar.style.width = '0%'; + cancelProcess.style.display = 'none'; isCancelled = true; ollama.abort(); checkStatus(1500); } async function populateOllamaModels() { - const ollamaModelSelect = document.getElementById('ollamaModel'); - const deleteModelButton = document.getElementById('deleteModelButton'); - ollamaModelSelect.innerHTML = ''; // Clear existing options + ollamaModel.innerHTML = ''; // Clear existing options try { const response = await ollama.list(); const availableModels = response.models.map(model => model.name); if (availableModels.length === 0) { statusElement.textContent = 'No models installed'; - deleteModelButton.disabled = true; - deleteModelButton.style.backgroundColor = 'rgb(128, 128, 128)'; + deleteModelBtn.disabled = true; + deleteModelBtn.style.backgroundColor = 'rgb(128, 128, 128)'; return false; } @@ -284,37 +502,36 @@ async function populateOllamaModels() { const option = document.createElement('option'); option.value = modelName; option.text = modelName; - ollamaModelSelect.add(option); + ollamaModel.add(option); }); const savedSettings = localStorage.getItem('pluginSettings'); if (savedSettings) { const settings = JSON.parse(savedSettings); - document.getElementById('ollamaModel').value = settings.ollamaModel; + ollamaModel.value = settings.ollamaModel; } - deleteModelButton.disabled = false; - deleteModelButton.style.backgroundColor = ''; + deleteModelBtn.disabled = false; + deleteModelBtn.style.backgroundColor = ''; // Add event listener for delete button - deleteModelButton.addEventListener('click', async () => { - const ollamaModelSelect = document.getElementById('ollamaModel'); - const selectedModel = ollamaModelSelect.value; + deleteModelBtn.addEventListener('click', async () => { + const selectedModel = ollamaModel.value; if (selectedModel) { try { await ollama.delete({ model: selectedModel }); console.log(`Deleted model: ${selectedModel}`); statusElement.textContent = `Deleted model: ${selectedModel}`; - + // Remove the deleted model from the select element - const optionToRemove = ollamaModelSelect.querySelector(`option[value="${selectedModel}"]`); + const optionToRemove = ollamaModel.querySelector(`option[value="${selectedModel}"]`); if (optionToRemove) { - ollamaModelSelect.removeChild(optionToRemove); + ollamaModel.removeChild(optionToRemove); } - + // Select the first available option - if (ollamaModelSelect.options.length > 0) { - ollamaModelSelect.selectedIndex = 0; + if (ollamaModel.options.length > 0) { + ollamaModel.selectedIndex = 0; } - + // Refresh the model list await populateOllamaModels(); } catch (error) { @@ -347,25 +564,24 @@ function getMimeType(extension) { return mimeTypes[extension.toLowerCase()] || 'application/octet-stream'; } -document.getElementById('cancelButton').addEventListener('click', processabort); +function toggleTagLimitVisibility() { + + tagLimit.disabled = !enableTagLimit.checked; + tagLimitOutput.style.opacity = enableTagLimit.checked ? '1' : '0.5'; + tagLimitOutput.style.color = enableTagLimit.checked ? '#007BFF' : '#555555'; +} +//#endregion eagle.onPluginCreate(async (plugin) => { - const runButton = document.getElementById('run'); - const apiKeyStatus = document.getElementById('apiKeyStatus'); - const tagsElement = document.getElementById('processLogBox'); // Initialize an empty array to store the log of processed items let processedItemsLog = []; runButton.addEventListener('click', async () => { - document.getElementById('cancelProcess').style.display = 'inherit'; - document.getElementById('progressBar').style.width = '0%'; - document.getElementById('progressBarContainer').classList.add('sheen'); - document.getElementById('progressBar').style.backgroundColor = '#007BFF'; - - const apiProvider = document.getElementById('apiProvider').value; - const myAPI = localStorage.getItem(`${apiProvider}apiKey`); - if (!myAPI && !document.getElementById('useOllama').checked) { + progressLoading(); + + const myAPI = localStorage.getItem(`${apiProvider.value}apiKey`); + if (!myAPI && apiProvider.value !== 'ollama') { apiKeyStatus.innerHTML = ''; statusElement.innerHTML = 'Please add API Key.'; checkStatus(5000); // Clear after 5 seconds @@ -378,18 +594,13 @@ eagle.onPluginCreate(async (plugin) => { checkStatus(5000); // Clear after 5 seconds return; } - const useOllamaToggle = document.getElementById('useOllama'); - useOllamaToggle.addEventListener('change', () => { - console.log('Use Ollama:', useOllamaToggle.checked); - }); - const useThumbnail = document.getElementById('useThumbnail').checked; - const filePaths = useThumbnail + const filePaths = useThumbnail.checked ? selectedItems.map(item => item.thumbnailPath) : selectedItems.map(item => item.filePath); let img_urls = filePaths; let imagesBase64 = filePaths.map(path => base64.fromByteArray(fs.readFileSync(path))); - let mimeTypes = useThumbnail + let mimeTypes = useThumbnail.checked ? filePaths.map(() => 'image/webp') : filePaths.map(path => getMimeType(path.split('.').pop())); let urls = imagesBase64.map(imageBase64 => `data:${mimeTypes};base64,${imageBase64}`); @@ -404,21 +615,22 @@ eagle.onPluginCreate(async (plugin) => { const img_url = img_urls[i]; const item = selectedItems[i]; const mimeType = mimeTypes[i]; - const ollamaModel = document.getElementById('ollamaModel').value; statusElement.textContent = `Processing ${item.name}.${item.ext} (${i + 1}/${urls.length})`; - const prompt = "Create a comma separated list of" + (document.getElementById('enableTagLimit').checked ? ` ${document.getElementById('tagLimit').value}` : "") + " keywords for the image, in order of confidence. Don't use any other text. Keep keywords singular, not plural."; console.log(img_url); try { + let prompt = "Create a comma separated list of" + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + " keywords for the image, in order of confidence. Don't use any other text. Keep keywords singular, not plural."; let responseText = ''; - if (useOllamaToggle.checked) { - const importanceList = JSON.parse(localStorage.getItem('importanceList') || '[]'); + const currentTagCat = JSON.parse(localStorage.getItem('tagCat') || '[]'); + let systemMsg = 'You are an expert at generating tags for images. The user will provide you with an image. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords to describe the provided image in order of confidence. Don\'t use any other text. Keep keywords singular, not plural.'; + if (apiProvider.value === 'ollama' && tagCatChk.checked) { + let allTags = new Set(); // Use a Set to automatically remove duplicates - for (let i = 0; i < importanceList.length; i++) { - const item = importanceList[i]; + for (let i = 0; i < currentTagCat.length; i++) { + const item = currentTagCat[i]; const response = await ollama.chat({ - model: ollamaModel, + model: ollamaModel.value, options: { temperature: 1, max_tokens: 500, @@ -432,7 +644,7 @@ eagle.onPluginCreate(async (plugin) => { ...Array.from(allTags).map(tag => ({ role: 'assistant', content: tag })), { role: 'user', - content: `Create a comma-separated list of ${(document.getElementById('enableTagLimit').checked ? ` ${document.getElementById('tagLimit').value}` : "")} keywords about the ${item} of this image, in order of confidence. Don't use any other text. Keep keywords singular, not plural. Do not repeat any previously mentioned tags.`, + content: `Create a comma-separated list of ${(enableTagLimit.checked ? ` ${tagLimit.value}` : "")} keywords about the ${item} of this image, in order of confidence. Don't use any other text. Keep keywords singular, not plural. Do not repeat any previously mentioned tags.`, ...(i === 0 ? { images: [img_url] } : {}) // Only include the image for the first item } ] @@ -442,27 +654,58 @@ eagle.onPluginCreate(async (plugin) => { console.log(`Response for ${item}:`, response.message.content); } responseText = Array.from(allTags).join(', '); // Convert Set back to string - - } else if (document.getElementById('apiProvider').value === 'openai') { + console.log(responseText); + + } else if (apiProvider.value === 'ollama' && !tagCatChk.checked) { + const response = await ollama.chat({ + model: ollamaModel.value, + messages: [{ + role: 'user', + content: "Create " + (enableTagLimit.checked ? "a" : "an extensive,") + " comma separated list of " + (enableTagLimit.checked ? tagLimit.value : "") + " keywords for the subject(s), mood, tone and style, of this image. Keep keywords singular, not plural.", + images: [img_url] + }] + }); + responseText = response.message.content; + console.log(response, responseText); + + } else if (apiProvider.value === 'openai') { + + // Update prompt to include categories as a comma-separated list + if (tagCatChk.checked && currentTagCat.length > 0) { + const categories = currentTagCat.join(', '); + + systemMsg = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image and some categories. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords for each category to describe the provided image in order of confidence. Don\'t use any other text. Keep keywords singular, not plural.'; + prompt = `${categories}`; + } else { + systemMsg = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords to describe the provided image in order of confidence. Don\'t use any other text. Keep keywords singular, not plural.'; + prompt = ''; + } + + let msgcontent = [ + { type: "image_url", image_url: { url: url, detail: "low" } }, + { type: "text", text: prompt }, + ]; + const requestBody = { model: "gpt-4o", temperature: 0.2, max_tokens: 500, - messages: [{ - role: "user", - content: [ - { type: "text", text: prompt }, - { - type: "image_url", - image_url: { - "url": url, - "detail": "low", - }, - }, - ], - }], - } - console.log('OpenAI API Request text:', requestBody.messages[0].content[0].text); + messages: [ + { + role: "system", + content: systemMsg, + }, + { + role: "user", + content: msgcontent, + } + ], + response_format: { type: "json_object" }, + }; + + // Log the request body + console.log('OpenAI API Request:', JSON.stringify(requestBody, null, 2)); + const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { @@ -472,42 +715,171 @@ eagle.onPluginCreate(async (plugin) => { body: JSON.stringify(requestBody) }); const data = await response.json(); - responseText = data.choices[0].message.content; - } else if (document.getElementById('apiProvider').value === 'gemini') { + console.log('OpenAI API Response:', data); + + if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) { + const jsonContent = JSON.parse(data.choices[0].message.content); + console.log('Parsed JSON content:', jsonContent); + + const allTags = new Set(); + if (tagCatChk.checked) { + // Handle categorized tags + for (const category in jsonContent) { + if (jsonContent.hasOwnProperty(category)) { + const tags = jsonContent[category].split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } + } + } else { + // Handle uncategorized tags + if (typeof jsonContent === 'string') { + // If the content is a simple string of comma-separated tags + const tags = jsonContent.split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } else if (Array.isArray(jsonContent)) { + // If the content is an array of tags + jsonContent.forEach(tag => allTags.add(tag.trim())); + } else if (typeof jsonContent === 'object') { + // If the content is an object + for (const key in jsonContent) { + if (Array.isArray(jsonContent[key])) { + // If the value is an array (like in the example) + jsonContent[key].forEach(tag => allTags.add(tag.trim())); + } else if (typeof jsonContent[key] === 'string') { + // If the value is a string, split it by commas + const tags = jsonContent[key].split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } + } + } else { + console.error('Unexpected JSON format:', jsonContent); + throw new Error('Unexpected JSON format in API response'); + } + } + + responseText = Array.from(allTags).join(', '); + console.log('Tags returned:', responseText); + } else { + console.error('Unexpected API response format:', data); + throw new Error('Unexpected API response format'); + } + + } else if (apiProvider.value === 'gemini') { + // Update prompt to include categories as a comma-separated list + if (tagCatChk.checked && currentTagCat.length > 0) { + const categories = currentTagCat.join(', '); + + msg01 = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image and some categories. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords for each category to describe the provided image in order of confidence. Using this JSON schema: {"category": "keyword1, keyword2, keyword3", "category2": "keyword1, keyword2, keyword3"}. Don\'t use any other text. Keep keywords singular, not plural.'; + msg02 = `${categories}`; + } else { + msg01 = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords to describe the provided image in order of confidence. Using this JSON schema: {"keywords": "keyword1, keyword2, keyword3"}. Don\'t use any other text. Keep keywords singular, not plural.'; + msg02 = ''; + } const requestBody = { contents: [{ parts: [ - { text: prompt }, - { inline_data: { mime_type: mimeType, data: imagesBase64[i] } } - ] - }] + { text: msg01 }, + { inline_data: { mime_type: mimeType, data: imagesBase64[i] } }, + { text: msg02 }, + ], + }], + generationConfig: { + temperature: 1, + response_mime_type: "application/json", + } }; - - console.log('Gemini API Request text:', requestBody.contents[0].parts[0].text); - const response = await fetch(`https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key=${myAPI}`, { + + console.log('Gemini API Request:', JSON.stringify(requestBody, null, 2)); + + const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${myAPI}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestBody) }); + const data = await response.json(); - responseText = data.candidates[0].content.parts[0].text; - } else if (document.getElementById('apiProvider').value === 'claude') { + console.log('Gemini API Response:', JSON.stringify(data, null, 2)); + + if (data.candidates && data.candidates.length > 0 && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts.length > 0) { + const jsonContent = JSON.parse(data.candidates[0].content.parts[0].text); + console.log('Parsed JSON content:', jsonContent); + + const allTags = new Set(); + if (tagCatChk.checked) { + // Handle categorized tags + for (const category in jsonContent) { + if (jsonContent.hasOwnProperty(category)) { + const tags = jsonContent[category].split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } + } + } else { + // Handle uncategorized tags + if (typeof jsonContent === 'string') { + // If the content is a simple string of comma-separated tags + const tags = jsonContent.split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } else if (Array.isArray(jsonContent)) { + // If the content is an array of tags + jsonContent.forEach(tag => allTags.add(tag.trim())); + } else if (typeof jsonContent === 'object') { + // If the content is an object + for (const key in jsonContent) { + if (Array.isArray(jsonContent[key])) { + // If the value is an array (like in the example) + jsonContent[key].forEach(tag => allTags.add(tag.trim())); + } else if (typeof jsonContent[key] === 'string') { + // If the value is a string, split it by commas + const tags = jsonContent[key].split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } + } + } else { + console.error('Unexpected JSON format:', jsonContent); + throw new Error('Unexpected JSON format in API response'); + } + } + + responseText = Array.from(allTags).join(', '); + console.log('Tags returned:', responseText); + } else { + console.error('Unexpected API response format:', data); + throw new Error('Unexpected API response format'); + } + } else if (apiProvider.value === 'claude') { + // Update prompt to include categories as a comma-separated list + let msg01, msg02; + if (tagCatChk.checked && currentTagCat.length > 0) { + const categories = currentTagCat.join(', '); + msg01 = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image and some categories. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords for each category to describe the provided image in order of confidence. You must respond with this JSON schema: {"category": "keyword1, keyword2, keyword3", "category2": "keyword1, keyword2, keyword3"}. Don\'t use any other text. Keep keywords singular, not plural.'; + msg02 = `${categories}`; + } else { + msg01 = 'You are an expert at generating tags for images designed to output JSON. The user will provide you with an image. You will generate a comma-separated list of' + (enableTagLimit.checked ? ` ${tagLimit.value}` : "") + ' keywords to describe the provided image in order of confidence. You must respond with this JSON schema: {"keywords": "keyword1, keyword2, keyword3"}. Don\'t use any other text. Keep keywords singular, not plural.'; + msg02 = ''; + } + + const content = [ + { type: "text", text: msg01 }, + { type: "image", source: { type: "base64", media_type: mimeType, data: imagesBase64[i] } } + ]; + + if (msg02) { + content.push({ type: "text", text: msg02 }); + } + const requestBody = { model: "claude-3-haiku-20240307", max_tokens: 4000, messages: [{ role: "user", - content: [ - { type: "text", text: prompt }, - { type: "image", source: { type: "base64", media_type: mimeType, data: imagesBase64[i] } } - ] + content: content }] }; - console.log('Claude API Request text:', requestBody.messages[0].content[0].text); + console.log('Claude API Request:', JSON.stringify(requestBody, null, 2)); const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', @@ -518,28 +890,59 @@ eagle.onPluginCreate(async (plugin) => { }, body: JSON.stringify(requestBody) }); - const data = await response.json(); - if (!response.ok) { - throw new Error(`API request failed: ${data.error?.message || response.statusText}`); - } - responseText = data.content[0]?.text || ''; - if (!responseText) { - console.error('Unexpected API response:', data); + console.log('Claude API Response:', JSON.stringify(data, null, 2)); + + if (data.content && data.content.length > 0 && typeof data.content[0].text === 'string') { + // Remove leading/trailing whitespace and newlines + let cleanedJsonString = data.content[0].text.trim(); + + // Add missing commas between properties if necessary + cleanedJsonString = cleanedJsonString.replace(/}(\s*){/g, '},\n{'); + cleanedJsonString = cleanedJsonString.replace(/"\s*{/g, '",\n{'); + cleanedJsonString = cleanedJsonString.replace(/}\s*"/g, '},\n"'); + + try { + const jsonContent = JSON.parse(cleanedJsonString); + console.log('Parsed JSON content:', jsonContent); + + const allTags = new Set(); + if (tagCatChk.checked) { + // Handle categorized tags + for (const category in jsonContent) { + if (jsonContent.hasOwnProperty(category)) { + const tags = jsonContent[category].split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } + } + } else { + // Handle uncategorized tags + if (jsonContent.keywords) { + const tags = jsonContent.keywords.split(',').map(tag => tag.trim()); + tags.forEach(tag => allTags.add(tag)); + } else { + console.error('Unexpected JSON format:', jsonContent); + throw new Error('Unexpected JSON format in API response'); + } + } + + responseText = Array.from(allTags).join(', '); + console.log('Tags returned:', responseText); + } catch (error) { + console.error('Error parsing JSON:', error); + throw new Error('Failed to parse JSON from API response'); + } + } else { + console.error('Unexpected API response format:', data); throw new Error('Unexpected API response format'); } } - const tagsReturned = responseText.split(',').map(tag => tag.trim()); - console.log(responseText); // Log the response text - // Extract keywords and add as tags - const enableTagLimit = document.getElementById('enableTagLimit').checked; - const tagLimit = enableTagLimit ? document.getElementById('tagLimit').value || Infinity : Infinity; - const tagsToAdd = responseText.split(',').map(tag => tag.trim()).slice(0, tagLimit); + const tagLimited = enableTagLimit ? tagLimit.value || Infinity : Infinity; + const tagsToAdd = responseText.split(',').map(tag => tag.trim()).slice(0, tagLimited); // Filter out any tags that already exist in the item's tags or replace all tags if the checkbox is checked - const replaceTags = document.getElementById('replaceTags').checked; const newTags = replaceTags ? tagsToAdd : tagsToAdd.filter(tag => !item.tags.includes(tag)); if (newTags.length > 0) { @@ -556,262 +959,24 @@ eagle.onPluginCreate(async (plugin) => { // Update progress bar width after processing is complete const progressPercentage = ((i + 1) / urls.length) * 100; - document.getElementById('progressBar').style.width = `${progressPercentage}%`; + progressBar.style.width = `${progressPercentage}%`; // Append the processed item to the log - processedItemsLog.push(`Last tagged '${item.name}.${item.ext}':
${tagsReturned.join(', ')}`); - tagsElement.innerHTML = processedItemsLog.join('

'); + processedItemsLog.push(`Last tagged '${item.name}.${item.ext}':
${newTags.join(', ')}`); + pLogText.innerHTML = processedItemsLog.join('

'); } catch (error) { - document.getElementById('log').innerHTML = error; + console.error('Error:', error); statusElement.textContent = 'An error occurred.'; } } // Reset the isCancelled flag after the loop isCancelled = false; // Disable the sheen after all files have been processed - document.getElementById('progressBarContainer').classList.add('no-sheen'); - document.getElementById('cancelProcess').style.display = 'none'; - document.getElementById('progressBar').style.backgroundColor = '#00c040'; + progressDone(); } catch (error) { console.error('Error:', error); checkStatus(5000); // Clear after 5 seconds } }); -}); - -function toggleTagLimitVisibility() { - const tagLimitSlider = document.getElementById('tagLimit'); - const tagLimitOutput = document.getElementById('tagLimitOutput'); - const isChecked = document.getElementById('enableTagLimit').checked; - - tagLimitSlider.disabled = !isChecked; - tagLimitOutput.style.opacity = isChecked ? '1' : '0.5'; - tagLimitOutput.style.color = isChecked ? '#007BFF' : '#555555'; -} - -// Initial call to set the correct display on page load -toggleTagLimitVisibility(); - -const settingsButton = document.getElementById('settingsButton'); -const settingsWindow = document.getElementById('settingsWindow'); - -settingsButton.addEventListener('click', () => { - settingsWindow.classList.toggle('visible'); -}); - -document.addEventListener('click', (event) => { - const withinBoundaries = apiKeyMenu.contains(event.target) || settingsButton.contains(event.target); - - if (!withinBoundaries) { - apiKeyMenu.classList.remove('visible'); - } -}); - -// Add functionality to the close button to close the window -document.getElementById('closeButton').addEventListener('click', () => { - window.close(); // This assumes you have the ability to close the window directly -}); - -document.getElementById('searchButton').addEventListener('click', () => { - eagle.shell.openExternal('https://ollama.com/library'); -}); - -document.getElementById('ollamaModel').addEventListener('change', () => { - checkStatus(0); -}); - -document.getElementById('showProcessLog').addEventListener('change', () => { - if (document.getElementById('showProcessLog').checked) { - document.getElementById('processLog').style.display = 'flex'; - } else { - document.getElementById('processLog').style.display = ''; - } -}); - -document.getElementById('clearProcessLog').addEventListener('click', () => { - document.getElementById('processLogBox').innerHTML = ''; -}); - - -function toggleImportanceList() { - const enableImportanceListCheckbox = document.getElementById('enableImportanceList').checked; - document.getElementById('importanceList').style.display = enableImportanceListCheckbox ? 'block' : 'none'; - - if (enableImportanceListCheckbox) { - document.getElementById('importanceList').style.display = 'block'; - } else { - document.getElementById('importanceList').style.display = 'none'; - } -} - -document.getElementById('enableImportanceList').addEventListener('change', () => { - toggleImportanceList(); -}); - -// Save settings to localStorage when changed -function saveSettings() { - const settings = { - enableTagLimit: document.getElementById('enableTagLimit').checked, - tagLimit: document.getElementById('tagLimit').value, - useThumbnail: document.getElementById('useThumbnail').checked, - replaceTags: document.getElementById('replaceTags').checked, - useOllama: document.getElementById('useOllama').checked, - ollamaModel: document.getElementById('ollamaModel').value, - showProcessLog: document.getElementById('showProcessLog').checked, - apiProvider: document.getElementById('apiProvider').value, - preLoadModel: document.getElementById('preLoadModel').checked, - enableImportanceList: document.getElementById('enableImportanceList').checked, - }; - localStorage.setItem('pluginSettings', JSON.stringify(settings)); -} - -// Add event listeners to save settings when changed -document.getElementById('enableTagLimit').addEventListener('change', saveSettings); -document.getElementById('tagLimit').addEventListener('input', saveSettings); -document.getElementById('useThumbnail').addEventListener('change', saveSettings); -document.getElementById('replaceTags').addEventListener('change', saveSettings); -document.getElementById('useOllama').addEventListener('change', saveSettings); -document.getElementById('ollamaModel').addEventListener('change', saveSettings); -document.getElementById('showProcessLog').addEventListener('change', saveSettings); -document.getElementById('apiProvider').addEventListener('change', saveSettings); -document.getElementById('preLoadModel').addEventListener('change', saveSettings); -document.getElementById('enableImportanceList').addEventListener('change', saveSettings); - -// Load settings from localStorage when the plugin is opened -document.addEventListener('DOMContentLoaded', async () => { - const savedSettings = localStorage.getItem('pluginSettings'); - - if (savedSettings) { - const settings = JSON.parse(savedSettings); - document.getElementById('enableTagLimit').checked = settings.enableTagLimit; - document.getElementById('tagLimit').value = settings.tagLimit; - document.getElementById('useThumbnail').checked = settings.useThumbnail; - document.getElementById('replaceTags').checked = settings.replaceTags; - document.getElementById('useOllama').checked = settings.useOllama; - - const ollamaModelSelect = document.getElementById('ollamaModel'); - const models = ollamaModelSelect.options; - - if (models.length > 0) { - if (settings.ollamaModel && Array.from(models).some(option => option.value === settings.ollamaModel)) { - ollamaModelSelect.value = settings.ollamaModel; - } else { - ollamaModelSelect.selectedIndex = 0; - } - } else { - statusElement.textContent = 'No models installed'; - } - - document.getElementById('showProcessLog').checked = settings.showProcessLog; - document.getElementById('apiProvider').value = settings.apiProvider; - toggleTagLimitVisibility(); - toggleOllama(); - document.getElementById('processLog').style.display = settings.showProcessLog ? 'flex' : ''; - document.getElementById('preLoadModel').checked = settings.preLoadModel; - checkStatus(0); - document.getElementById('enableImportanceList').checked = settings.enableImportanceList; - toggleImportanceList(); - } -}); - -document.addEventListener('DOMContentLoaded', function () { - const sortableList = document.getElementById('sortableList'); - const newItemInput = document.getElementById('newItem'); - const addItemButton = document.getElementById('addItem'); - - // Function to add a new item - function addItem() { - const itemText = newItemInput.value.trim(); - if (itemText) { - const li = createListItem(itemText); - sortableList.appendChild(li); - newItemInput.value = ''; - saveList(); - } - } - - // Function to create a list item - function createListItem(text) { - const li = document.createElement('li'); - li.draggable = true; - li.innerHTML = ` - ${text} - - `; - li.querySelector('.deleteItem').addEventListener('click', function() { - li.remove(); - saveList(); - }); - return li; - } - - // Add item when button is clicked - addItemButton.addEventListener('click', addItem); - - // Add item when Enter key is pressed - newItemInput.addEventListener('keypress', function (e) { - if (e.key === 'Enter') { - addItem(); - } - }); - - // Drag and drop functionality - let draggedItem = null; - - sortableList.addEventListener('dragstart', function (e) { - draggedItem = e.target; - setTimeout(() => e.target.style.display = 'none', 0); - }); - - sortableList.addEventListener('dragend', function (e) { - setTimeout(() => { - e.target.style.display = ''; - draggedItem = null; - saveList(); // Save the list after drag and drop - }, 0); - }); - - sortableList.addEventListener('dragover', function (e) { - e.preventDefault(); - const afterElement = getDragAfterElement(sortableList, e.clientY); - const currentItem = draggedItem; - if (afterElement == null) { - sortableList.appendChild(currentItem); - } else { - sortableList.insertBefore(currentItem, afterElement); - } - }); - - function getDragAfterElement(container, y) { - const draggableElements = [...container.querySelectorAll('li:not(.dragging)')]; - return draggableElements.reduce((closest, child) => { - const box = child.getBoundingClientRect(); - const offset = y - box.top - box.height / 2; - if (offset < 0 && offset > closest.offset) { - return { offset: offset, element: child }; - } else { - return closest; - } - }, { offset: Number.NEGATIVE_INFINITY }).element; - } - - // Save list to localStorage - function saveList() { - const items = Array.from(sortableList.children).map(li => li.querySelector('span').textContent); - localStorage.setItem('importanceList', JSON.stringify(items)); - } - - // Load list from localStorage - function loadList() { - const items = JSON.parse(localStorage.getItem('importanceList') || '[]'); - sortableList.innerHTML = ''; // Clear existing items - items.forEach(item => { - const li = createListItem(item); - sortableList.appendChild(li); - }); - } - - // Load the list when the page loads - loadList(); }); \ No newline at end of file diff --git a/manifest.json b/manifest.json index f910532..3e3c063 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "id": "0e2ca0ab-8fa3-485a-ae1a-f1f88c738fe6", - "version": "0.0.5", + "version": "0.0.6", "platform": "all", "arch": "all", "name": "AI Auto Tag",