diff --git a/background.js b/background.js index 218b434..924d1c8 100644 --- a/background.js +++ b/background.js @@ -5,7 +5,6 @@ function clearTabStorage(tabId){ chrome.storage.local.set(obj); } - function setTabItems(tabId, items, cb){ let tabIdKey = `store_tab_${tabId}`; @@ -84,12 +83,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { messages: list all current messages of all roles, include system, user, assistant } */ - chrome.storage.sync.get(['apiUrl', 'apiKey', 'modelName', 'temperature', 'maxToken'], (items) => { - const apiUrl = items.apiUrl; - const apiKey = items.apiKey; - const modelName = items.modelName; - const temperature = items.temperature || 0; - const maxToken = items.maxToken || 4096; + chrome.storage.sync.get([ + 'completionProvider', + 'groqApiUrl', 'groqApiKey', 'groqModelName', 'groqTemperature', 'groqMaxToken', + 'openAiApiUrl', 'openAiApiKey', 'openAiModelName', 'openAiTemperature', 'openAiMaxToken' + ], (items) => { + const completionProvider = items.completionProvider || 'groq'; + + const apiUrl = completionProvider == "groq" ? items.groqApiUrl : items.openAiApiUrl; + const apiKey = completionProvider == "groq" ? items.groqApiKey :items.openAiApiKey; + const modelName = completionProvider == "groq" ? items.groqModelName : items.openAiModelName; + const temperature = completionProvider == "groq" ? (items.groqTemperature || 0) : (items.openAiTemperature || 0); + const maxToken = completionProvider == "groq" ? (items.groqMaxToken || 8192) : (items.openAiMaxToken || 4096); if (!apiUrl || !apiKey || !modelName) { //console.error("API URL or API Key or Model Name not configured."); @@ -190,8 +195,10 @@ YÊU CẦU KHI DỊCH: - Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được - Câu trả lời phải là định dạng Markdown - Chỉ trả lời kết quả, đừng thêm những câu ở đầu như: 'Here is the translation:', 'Here is the translated content:'...." +` + +/* - Chỉ dịch và không tự ý thêm thông tin gì, nhưng nên có 1 bảng tóm tắt giải thích các từ vựng, loại từ, phiên âm IPA UK/US ở dưới cùng cùng với tên chuyên ngành. -- Nếu được yêu cầu dịch từ hoặc văn bản, câu trả lời của bạn nên có 2 phần: ### Kết quả dịch - Hiển thị cả bản gốc và bản dịch (nếu câu cần dịch quá dài thì chỉ hiển thị bản dịch) @@ -224,7 +231,8 @@ YÊU CẦU KHI DỊCH: **Ghi chú văn hóa và sử dụng đặc biệt:** - Ghi chú văn hóa: Giải thích các khác biệt văn hóa hoặc các cách sử dụng đặc biệt của từ trong các ngữ cảnh khác nhau. - Phong cách sử dụng: Chỉ rõ xem từ đó là trang trọng, thân mật, chuyên ngành hay thông dụng. -` +*/ + }); requestObj.messages.push({ @@ -265,27 +273,23 @@ ${request.selectionText}` requestObj.messages.push({ role: "user", content: `Bạn sẽ đóng vai là một chuyên gia về ngôn ngữ, có hiểu biết sâu sắc văn hóa bản địa, đặc biệt là tiếng Anh và tiếng Việt, bạn sẽ giúp sửa lỗi tiếng Anh. - - Câu trả lời phải là định dạng markdown - - Đừng đưa ra những câu "introduce prompt words or opening remarks" trong câu trả lời. Hãy đi thẳng vào câu trả lời. Đừng lan man, dài dòng. - - Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được - - Khi sửa lỗi, câu trả lời của bạn nên có 2 phần: -### Câu đúng +- Câu trả lời phải là định dạng markdown +- Đừng đưa ra những câu "introduce prompt words or opening remarks" trong câu trả lời. Hãy đi thẳng vào câu trả lời. Đừng lan man, dài dòng. +- Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được - Từ hoặc câu văn sau khi đã sửa chính xác (ngôn ngữ của câu đã sửa là ngôn ngữ của câu được yêu cầu sửa), ví dụ, bạn được yêu cầu sửa 1 câu tiếng Anh, thì bạn phải trả lời lại 1 câu tiếng Anh đã sửa hoàn chỉnh. - markdown format, bôi đậm những chỗ đã sửa để highlight, phần giải thích nên được tổ chức tốt, dễ đọc, có outline... -- Nếu câu văn không có lỗi gì, thì chỉ cần nói là không có lỗi, đừng cố bịa ra câu trả lời. -- Tách bạch của đã sửa với những thông tin phụ để tăng tính nhận diện, hỗ trợ cho người học dễ hiểu hơn, trực quan hơn +- Nếu câu văn không có lỗi gì, thì chỉ cần nói là không có lỗi, đừng cố bịa ra câu trả lời.`}); -### Thông tin bổ sung -**Giải thích lỗi và sửa lỗi:** -- Mô tả lỗi: Giải thích ngắn gọn lỗi mà người học đã mắc phải (ví dụ: sai ngữ pháp, sai chính tả, sử dụng từ không chính xác, v.v.). -- Nguyên nhân phổ biến: Cung cấp thông tin về lý do tại sao lỗi này thường xảy ra và làm sao để tránh nó. -- Cách sửa: Cung cấp giải pháp cụ thể để sửa lỗi. -- Ví dụ đúng: Cung cấp ví dụ minh họa cách sử dụng đúng. - -**Quy tắc ngữ pháp liên quan:** -- Quy tắc ngữ pháp: Cung cấp quy tắc ngữ pháp liên quan đến lỗi để người học có thể nắm rõ hơn. -- Ghi chú ngữ pháp: Giải thích chi tiết hơn về các quy tắc ngữ pháp phức tạp nếu cần.` - }); +// ### Thông tin bổ sung +// **Giải thích lỗi và sửa lỗi:** +// - Mô tả lỗi: Giải thích ngắn gọn lỗi mà người học đã mắc phải (ví dụ: sai ngữ pháp, sai chính tả, sử dụng từ không chính xác, v.v.). +// - Nguyên nhân phổ biến: Cung cấp thông tin về lý do tại sao lỗi này thường xảy ra và làm sao để tránh nó. +// - Cách sửa: Cung cấp giải pháp cụ thể để sửa lỗi. +// - Ví dụ đúng: Cung cấp ví dụ minh họa cách sử dụng đúng. + +// **Quy tắc ngữ pháp liên quan:** +// - Quy tắc ngữ pháp: Cung cấp quy tắc ngữ pháp liên quan đến lỗi để người học có thể nắm rõ hơn. +// - Ghi chú ngữ pháp: Giải thích chi tiết hơn về các quy tắc ngữ pháp phức tạp nếu cần. requestObj.messages.push({ role: "user", @@ -320,18 +324,20 @@ ${request.selectionText}` requestObj.messages.push({ role: "system", content: `You are a knowledgeable and engaging teacher. - Your goal is to educate the user about various topics they might be interested in. + Your goal is to educate the user about various topics they might be interested in. + Make sure the content is well-organized and easy to read, with clear main headings and subheadings that provide detailed supplementary information to guide learners through each section, making it easy for them to follow along. Provide clear explanations, examples, and answer any questions the user may have. - Make sure to break down complex concepts into simpler terms and relate them to real-world applications when possible. + Make sure to break down complex concepts into simpler terms and relate them to real-world applications when possible. Be patient, encouraging, and responsive to the user's level of understanding. Adapt your teaching style based on the user's feedback and engagement. Always strive to make learning enjoyable and accessible. + IMPORTANT: Be honest, don't make things up. IMPORTANT: You must always answer in Vietnamese, unless otherwise is requested.` }); requestObj.messages.push({ role: "user", - content: `OK, please teach me this (always answer me in Vietnamese please):\n + content: `OK, please teach me this (always answer me in Vietnamese please from now):\n ${request.selectionText}` }); }else{ @@ -507,25 +513,26 @@ chrome.contextMenus.onClicked.addListener((info, tab) => { //reset chat message setTabItems(tab.id, { - chatMessages: [] + chatMessages: [], + lastSelectedCommand: info.menuItemId }, ()=>{ - + // Send the message to the content script + chrome.tabs.sendMessage(tab.id, { + type: info.menuItemId, + selectionText: info.selectionText, + isNewChat: true + }, (response) => { + // Handle the response from background.js (via content.js) + // if (response.error) { + // console.error(response.error); + // alert("An error occurred: " + response.error); + // } else { + // alert(response.result); + // } + }); }); - // Send the message to the content script - chrome.tabs.sendMessage(tab.id, { - type: info.menuItemId, - selectionText: info.selectionText, - isNewChat: true - }, (response) => { - // Handle the response from background.js (via content.js) - // if (response.error) { - // console.error(response.error); - // alert("An error occurred: " + response.error); - // } else { - // alert(response.result); - // } - }); + // clearTabStorage(tab.id); diff --git a/content.js b/content.js index 8a98454..0dbc496 100644 --- a/content.js +++ b/content.js @@ -99,8 +99,13 @@ const playAudio = (audioUrl) => { document.body.appendChild(modal); } - if (request.isNewChat){ + chrome.runtime.sendMessage({ type: 'getTabItems', itemNames: ['lastSelectedCommand', 'chatMessages'] }, (storageResponse) => { + const lastSelectedCommand = storageResponse.lastSelectedCommand; + modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`; + }) + if (request.isNewChat){ + clearAllMessagesHtml(); } // Show the modal @@ -299,6 +304,11 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr document.body.appendChild(modal); } + chrome.runtime.sendMessage({ type: 'getTabItems', itemNames: ['lastSelectedCommand', 'chatMessages'] }, (storageResponse) => { + const lastSelectedCommand = storageResponse.lastSelectedCommand; + modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`; + }) + // Convert Markdown to HTML //const converter = new showdown.Converter(); // var converter = new showdown.Converter({extensions: ['table', 'youtube', 'prettify']}); @@ -484,8 +494,14 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr if (actionEditButton.innerText == "Edit"){ + selectedMessageElm.classList.add("edit-chat-message"); + // Create a new input textbox element let inputTextbox = document.createElement('textarea'); + inputTextbox.addEventListener("keydown", function (event) { + event.stopPropagation(); + }); + inputTextbox.placeholder = "Type your message here..."; inputTextbox.rows = 4; inputTextbox.style.width = '100%'; @@ -510,6 +526,7 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr } } else{ + selectedMessageElm.classList.remove("edit-chat-message"); marked.setOptions({ breaks: true // Enable GFM line breaks }); @@ -981,6 +998,10 @@ function createModal(request) { font-family: monospace; font-size: 14px; } + + .chat-message.edit-chat-message{ + width: 70% !important; + } .message-actions { position: absolute; @@ -1055,6 +1076,11 @@ function createModal(request) { margin: 0; } + .dialog-head .title .title-sub{ + font-size: 0.7em; + color: #35dbba; + } + .dialog-footer{ height: 10px; background-color: #eee; @@ -1116,7 +1142,7 @@ function createModal(request) {
-

AI Chatbot

+

AI Chatbot

@@ -1124,6 +1150,11 @@ function createModal(request) {
+
@@ -1133,6 +1164,26 @@ function createModal(request) { `; + //console.log(modal.shadowRoot.querySelector('.title-sub')); + + // chrome.storage.sync.get([ + // 'completionProvider', + // 'groqTemperature', + // 'openAiTemperature', + // 'lastSelectedCommand' + // ], (items) => { + // //const completionProvider = items.completionProvider || 'groq'; + // //const temperature = completionProvider == "groq" ? (items.groqTemperature || 0) : (items.openAiTemperature || 0); + + + // modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`; + // //modal.shadowRoot.querySelector('#chat-temperature').innerText = `[${temperature}]`; + + // //chrome.runtime.sendMessage({ type: 'setTabItems', itemNames: {chatTemperature: temperature, chatProvider: completionProvider} }, (res) => {}); + // }); + + + // Function to load html2canvas script function loadHtml2Canvas() { @@ -1193,7 +1244,7 @@ function createModal(request) { maximizeButton.classList.remove('hide'); }); - shadow.querySelector('.print-chat-button').addEventListener('click', () => { + shadow.querySelector('.print-chat-button').addEventListener('click', (e) => { printChat(shadow.querySelector('.chat-messages')); //loadHtml2Canvas(); @@ -1319,9 +1370,11 @@ function makeDraggable(elmnt, headElmt) { elmnt.onmousedown = dragMouseDown; } - function dragMouseDown(e) { + function dragMouseDown(e) { e = e || window.event; e.preventDefault(); + e.stopPropagation(); + // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; @@ -1333,6 +1386,8 @@ function makeDraggable(elmnt, headElmt) { function elementDrag(e) { e = e || window.event; e.preventDefault(); + e.stopPropagation(); + // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; diff --git a/manifest.json b/manifest.json index 82064f3..01dd633 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Web Summarizer & Translator", - "version": "1.4.0", + "version": "1.4.1", "description": "Summarize and translate web pages and selected text.", "permissions": [ "storage", diff --git a/options.html b/options.html index b01188f..b5be45a 100644 --- a/options.html +++ b/options.html @@ -69,41 +69,82 @@

Settings

- - + + +
+
+ -----------USING GROQ API------------- +
+
+ +
- - - 👀 + + + 👀
- - + +
- - + +
- - + + +
+ +
+ ------------USING OPENAI API------------ +
+ +
+ + +
+ +
+ + + 👀 +
+ +
+ + +
+ +
+ + +
+ +
+ +
------------------------
+

OPEN AI Whisper (Optional)

- 👀 + 👀
diff --git a/options.js b/options.js index e4655cf..337eab3 100644 --- a/options.js +++ b/options.js @@ -1,5 +1,5 @@ -document.getElementById('toggle-password-1').addEventListener('click', function() { - var passwordInput = document.getElementById('api-key'); +document.getElementById('groq-api-key-toggle-password').addEventListener('click', function() { + var passwordInput = document.getElementById('groq-api-key'); if (passwordInput.type === 'password') { passwordInput.type = 'text'; } else { @@ -7,7 +7,16 @@ document.getElementById('toggle-password-1').addEventListener('click', function( } }); -document.getElementById('toggle-password-2').addEventListener('click', function() { +document.getElementById('openai-api-key-toggle-password').addEventListener('click', function() { + var passwordInput = document.getElementById('openai-api-key'); + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + } else { + passwordInput.type = 'password'; + } +}); + +document.getElementById('openai-whisper-toggle-password').addEventListener('click', function() { var passwordInput = document.getElementById('openai-tts-api-key'); if (passwordInput.type === 'password') { passwordInput.type = 'text'; @@ -17,22 +26,39 @@ document.getElementById('toggle-password-2').addEventListener('click', function( }); document.getElementById('save-settings').addEventListener('click', () => { - const apiUrl = document.getElementById('api-url').value; - const apiKey = document.getElementById('api-key').value; - const modelName = document.getElementById('model-name').value; - const temperature = parseFloat(document.getElementById('temperature').value); // Convert to number - const maxToken = parseInt(document.getElementById('max-token').value); + const completionProvider = document.getElementById('completion-provider').value; + + const groqApiUrl = document.getElementById('groq-api-url').value; + const groqApiKey = document.getElementById('groq-api-key').value; + const groqModelName = document.getElementById('groq-model-name').value; + const groqTemperature = parseFloat(document.getElementById('groq-temperature').value); // Convert to number + const groqMaxToken = parseInt(document.getElementById('groq-max-token').value); + + const openAiApiUrl = document.getElementById('openai-api-url').value; + const openAiApiKey = document.getElementById('openai-api-key').value; + const openAiModelName = document.getElementById('openai-model-name').value; + const openAiTemperature = parseFloat(document.getElementById('openai-temperature').value); // Convert to number + const openAiMaxToken = parseInt(document.getElementById('openai-max-token').value); const openAITTSApiKey = document.getElementById('openai-tts-api-key').value; const openAITTSModelName = document.getElementById('openai-tts-model-name').value; const openAITTSVoice = document.getElementById('openai-tts-voice').value; - chrome.storage.sync.set({ - apiUrl: apiUrl, - apiKey: apiKey, - modelName: modelName, - temperature: temperature, - maxToken: maxToken, + chrome.storage.sync.set({ + completionProvider: completionProvider, + + groqApiUrl: groqApiUrl, + groqApiKey: groqApiKey, + groqModelName: groqModelName, + groqTemperature: groqTemperature, + groqMaxToken: groqMaxToken, + + openAiApiUrl: openAiApiUrl, + openAiApiKey: openAiApiKey, + openAiModelName: openAiModelName, + openAiTemperature: openAiTemperature, + openAiMaxToken: openAiMaxToken, + openAITTSApiKey: openAITTSApiKey, openAITTSModelName: openAITTSModelName, openAITTSVoice: openAITTSVoice, @@ -43,12 +69,25 @@ document.getElementById('save-settings').addEventListener('click', () => { }); // Load saved settings on page load -chrome.storage.sync.get(['apiUrl', 'apiKey', 'modelName', 'temperature', 'maxToken', 'openAITTSApiKey', 'openAITTSModelName', 'openAITTSVoice'], (items) => { - document.getElementById('api-url').value = items.apiUrl || ''; - document.getElementById('api-key').value = items.apiKey || ''; - document.getElementById('model-name').value = items.modelName || ''; - document.getElementById('temperature').value = items.temperature; - document.getElementById('max-token').value = items.maxToken; +chrome.storage.sync.get([ + 'completionProvider', + 'groqApiUrl', 'groqApiKey', 'groqModelName', 'groqTemperature', 'groqMaxToken', + 'openAiApiUrl', 'openAiApiKey', 'openAiModelName', 'openAiTemperature', 'openAiMaxToken', + 'openAITTSApiKey', 'openAITTSModelName', 'openAITTSVoice' +], (items) => { + document.getElementById('completion-provider').value = items.completionProvider || 'groq'; + + document.getElementById('groq-api-url').value = items.groqApiUrl || ''; + document.getElementById('groq-api-key').value = items.groqApiKey || ''; + document.getElementById('groq-model-name').value = items.groqModelName || ''; + document.getElementById('groq-temperature').value = items.groqTemperature; + document.getElementById('groq-max-token').value = items.groqMaxToken; + + document.getElementById('openai-api-url').value = items.openAiApiUrl || ''; + document.getElementById('openai-api-key').value = items.openAiApiKey || ''; + document.getElementById('openai-model-name').value = items.openAiModelName || ''; + document.getElementById('openai-temperature').value = items.openAiTemperature; + document.getElementById('openai-max-token').value = items.openAiMaxToken; document.getElementById('openai-tts-api-key').value = items.openAITTSApiKey || ''; document.getElementById('openai-tts-model-name').value = items.openAITTSModelName || '';