Merge pull request #9 from chinkan/feature/add-generative-config

Feature/add generative config

background.js

@@ -1,6 +1,6 @@
 import LLMProviderFactory from './prompt-providers/llm-provider-factory.js';
 import PromptFactory from './prompt-providers/prompt-factory.js';
-import { getStorageData } from './utils/storage.js';
+import { getStorageData, setStorageData } from './utils/storage.js';
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === 'summarize') {
@@ -41,7 +41,8 @@ async function handleSummarize(request, sendResponse) {
 
         const summary = await provider.summarize(
             prompts.userPrompt,
-            prompts.systemPrompt
+            prompts.systemPrompt,
+            defaultConfig.advancedSettings // 傳遞高級設置
         );
 
         if (summary && typeof summary.summary === 'string') {
@@ -56,7 +57,40 @@ async function handleSummarize(request, sendResponse) {
 }
 
 chrome.runtime.onInstalled.addListener(function (details) {
-    if (details.reason === 'install') {
+    if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
         chrome.runtime.openOptionsPage();
     }
+    if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
+        var manifestData = chrome.runtime.getManifest();
+        getStorageData(['lastVersion']).then((result) => {
+            if (
+                result.lastVersion === undefined ||
+                result.lastVersion < manifestData.version
+            ) {
+                // 更新版本
+
+                if (
+                    result.lastVersion.localeCompare('0.5.0', undefined, {
+                        numeric: true,
+                        sensitivity: 'base',
+                    }) < 0
+                ) {
+                    //load all configs and add advanced settings
+                    getStorageData(['llmConfigs']).then((result) => {
+                        result.llmConfigs.forEach((config) => {
+                            config.advancedSettings = {
+                                maxTokens: 1024,
+                                temperature: 0.7,
+                                topP: 0.9,
+                                topK: 5,
+                            };
+                        });
+                        setStorageData({ llmConfigs: result.llmConfigs });
+                    });
+                }
+
+                setStorageData({ lastVersion: manifestData.version });
+            }
+        });
+    }
 });

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "WizMuse",
-    "version": "0.4",
+    "version": "0.5.0",
     "description": "WizMuse is a powerful web page summarization tool. Quickly extract core content from web pages to improve reading efficiency.",
     "permissions": ["activeTab", "storage"],
     "action": {

options.css

@@ -555,3 +555,42 @@ input:checked + .slider:before {
 #openai-endpoint-container {
     margin-bottom: 15px;
 }
+
+#advanced-settings-container {
+    margin-top: 15px;
+    padding: 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: #f8f9fa;
+}
+
+#toggle-advanced-settings {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-bottom: 10px;
+}
+
+#toggle-advanced-settings:hover {
+    background-color: var(--hover-color);
+}
+
+#advanced-settings-container .form-group input[type='number'] {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    box-sizing: border-box;
+    background-color: #fff;
+    transition: border-color 0.3s ease;
+}
+
+#advanced-settings-container .form-group input[type='number']:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}

options.html

@@ -30,10 +30,7 @@ <h1>About WizMuse</h1>
                         class="profile-image"
                     />
                     <div class="profile-info">
-                        <p
-                            ><i class="material-icons">info</i> Version：0.4
-                            beta</p
-                        >
+                        <p><i class="material-icons">info</i> <span id="version">Version: Loading...</span></p>
                         <p
                             ><i class="material-icons">person</i>
                             Author：chinkan.ai</p
@@ -220,6 +217,28 @@ <h1>Options</h1>
                                 style="display: none"
                             ></input>
                         </div>
+                        <div class="form-group">
+                            <label for="advanced-settings">Advanced Settings:</label>
+                            <button id="toggle-advanced-settings" type="button">Show Advanced Settings</button>
+                            <div id="advanced-settings-container" style="display: none;">
+                                <div class="form-group">
+                                    <label for="temperature">Temperature:</label>
+                                    <input type="number" id="temperature" name="temperature" min="0" max="1" step="0.1" value="0.7">
+                                </div>
+                                <div class="form-group">
+                                    <label for="top-k">Top K:</label>
+                                    <input type="number" id="top-k" name="top-k" min="0" step="1" value="5">
+                                </div>
+                                <div class="form-group">
+                                    <label for="top-p">Top P:</label>
+                                    <input type="number" id="top-p" name="top-p" min="0" max="1" step="0.01" value="0.9">
+                                </div>
+                                <div class="form-group">
+                                    <label for="max-tokens">Max Tokens:</label>
+                                    <input type="number" id="max-tokens" name="max-tokens" min="1" step="1" value="1024">
+                                </div>
+                            </div>
+                        </div>
                         <div class="form-group button-group">
                             <button type="submit" class="primary-button"
                                 >Save</button

options.js

@@ -35,6 +35,11 @@ document.addEventListener('DOMContentLoaded', function () {
         'openai-endpoint-toggle'
     );
 
+    // 獲取版本號並顯示在頁面上
+    const versionElement = document.getElementById('version');
+    const manifestData = chrome.runtime.getManifest();
+    versionElement.textContent = `Version: ${manifestData.version} (Beta)`;
+
     let isEditing = false;
     let editingIndex = -1;
 
@@ -170,8 +175,16 @@ document.addEventListener('DOMContentLoaded', function () {
         const apiKey = document.getElementById('api-key').value;
         const model = modelSelect.value;
         const endpoint = endpointInput.value;
+        const advancedSettings = getAdvancedSettings();
 
-        const config = { name, provider, apiKey, model, endpoint };
+        const config = {
+            name,
+            provider,
+            apiKey,
+            model,
+            endpoint,
+            advancedSettings,
+        };
 
         if (isEditing) {
             updateConfigInTable(config, editingIndex);
@@ -228,11 +241,6 @@ document.addEventListener('DOMContentLoaded', function () {
             language: language,
         });
         alert('Config Saved');
-        await getStorageData(['selectedLLMIndex', 'language']).then(function (
-            result
-        ) {
-            console.log('Config Saved', result);
-        });
     });
 
     async function loadModels() {
@@ -333,6 +341,10 @@ document.addEventListener('DOMContentLoaded', function () {
             const row = table.rows[index];
             const config = result.llmConfigs[index];
 
+            if (config.advancedSettings) {
+                setAdvancedSettings(config.advancedSettings);
+            }
+
             document.getElementById('config-name').value = config.name;
             const radioButton = document.querySelector(
                 `input[name="llm-provider"][value="${config.provider}"]`
@@ -659,4 +671,43 @@ document.addEventListener('DOMContentLoaded', function () {
         endpointInput.style.display = e.target.checked ? 'block' : 'none';
         endpointDisplay.style.display = e.target.checked ? 'none' : 'block';
     });
+
+    // 添加這些函數到 options.js
+
+    function toggleAdvancedSettings() {
+        const container = document.getElementById(
+            'advanced-settings-container'
+        );
+        const button = document.getElementById('toggle-advanced-settings');
+        if (container.style.display === 'none') {
+            container.style.display = 'block';
+            button.textContent = 'Hide Advanced Settings';
+        } else {
+            container.style.display = 'none';
+            button.textContent = 'Show Advanced Settings';
+        }
+    }
+
+    function getAdvancedSettings() {
+        return {
+            temperature: parseFloat(
+                document.getElementById('temperature').value
+            ),
+            topK: parseInt(document.getElementById('top-k').value),
+            topP: parseFloat(document.getElementById('top-p').value),
+            maxTokens: parseInt(document.getElementById('max-tokens').value),
+        };
+    }
+
+    function setAdvancedSettings(settings) {
+        document.getElementById('temperature').value = settings.temperature;
+        document.getElementById('top-k').value = settings.topK;
+        document.getElementById('top-p').value = settings.topP;
+        document.getElementById('max-tokens').value = settings.maxTokens;
+    }
+
+    // 添加事件監聽器
+    document
+        .getElementById('toggle-advanced-settings')
+        .addEventListener('click', toggleAdvancedSettings);
 });

prompt-providers/claude-provider.js

@@ -5,7 +5,7 @@ class ClaudeProvider extends LLMProvider {
         super(config);
     }
 
-    async summarize(text, systemPrompt) {
+    async summarize(text, systemPrompt, advancedSettings) {
         const response = await fetch(`${this.endpoint}/v1/messages`, {
             method: 'POST',
             headers: {
@@ -25,7 +25,10 @@ class ClaudeProvider extends LLMProvider {
                         content: text,
                     },
                 ],
-                max_tokens: 1000,
+                max_tokens: advancedSettings.maxTokens,
+                temperature: advancedSettings.temperature,
+                top_p: advancedSettings.topP,
+                top_k: advancedSettings.topK,
             }),
         });
 

prompt-providers/groq-provider.js

@@ -5,7 +5,7 @@ class GroqProvider extends LLMProvider {
         super(config);
     }
 
-    async summarize(text, systemPrompt) {
+    async summarize(text, systemPrompt, advancedSettings) {
         const response = await fetch(
             `${this.endpoint}/chat/completions`, // 使用配置中的端點
             {
@@ -26,6 +26,10 @@ class GroqProvider extends LLMProvider {
                         },
                     ],
                     model: this.model, // 使用配置中的模型
+                    max_tokens: advancedSettings.maxTokens,
+                    temperature: advancedSettings.temperature,
+                    top_p: advancedSettings.topP,
+                    // Groq 可能不支持 top_k，所以我們省略它
                 }),
             }
         );

prompt-providers/ollama-provider.js

@@ -5,8 +5,7 @@ class OllamaProvider extends LLMProvider {
         super(config);
     }
 
-    async summarize(text, systemPrompt) {
-        // 新增 systemPrompt 參數
+    async summarize(text, systemPrompt, advancedSettings) {
         const response = await fetch(`${this.endpoint}/api/generate`, {
             method: 'POST',
             headers: {
@@ -15,13 +14,13 @@ class OllamaProvider extends LLMProvider {
             body: JSON.stringify({
                 model: this.model,
                 prompt: text,
-                system: systemPrompt, // 傳遞 systemPrompt
+                system: systemPrompt,
                 stream: false,
                 options: {
-                    temperature: 0.7,
-                    top_k: 50,
-                    top_p: 0.95,
-                    num_predict: 1000,
+                    temperature: advancedSettings.temperature,
+                    top_k: advancedSettings.topK,
+                    top_p: advancedSettings.topP,
+                    num_predict: advancedSettings.maxTokens,
                 },
             }),
         });

prompt-providers/open-ai-provider.js

@@ -5,7 +5,7 @@ class OpenAIProvider extends LLMProvider {
         super(config);
     }
 
-    async summarize(text, systemPrompt) {
+    async summarize(text, systemPrompt, advancedSettings) {
         const response = await fetch(`${this.endpoint}/chat/completions`, {
             // 使用相同的端點
             method: 'POST',
@@ -19,7 +19,10 @@ class OpenAIProvider extends LLMProvider {
                     { role: 'system', content: systemPrompt },
                     { role: 'user', content: text },
                 ],
-                max_tokens: 1024,
+                max_tokens: advancedSettings.maxTokens,
+                temperature: advancedSettings.temperature,
+                top_p: advancedSettings.topP,
+                // OpenAI 不直接支持 top_k，所以我們省略它
             }),
         });
         const data = await response.json();