Merge pull request #8 from chinkan/feature/integrate-openai-capatible…

…-api Feature/integrate openai capatible api
chinkan · Sep 22, 2024 · fc32880 · fc32880
2 parents 5badf92 + 61c1945
commit fc32880
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 7 deletions.
diff --git a/options.css b/options.css
@@ -478,3 +478,80 @@ select {
 .button-group button {
     margin-left: 10px;
 }
+
+/* 切換開關容器 */
+.toggle-switch-container {
+    display: flex;
+    align-items: center;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+
+/* 隱藏默認的複選框 */
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* 滑塊樣式 */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked + .slider {
+    background-color: var(--primary-color);
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px var(--primary-color);
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+/* 圓形滑塊 */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+/* 標籤樣式 */
+.toggle-label {
+    margin-left: 10px;
+    white-space: nowrap;
+}
+
+/* 調整容器樣式 */
+#openai-endpoint-container {
+    margin-bottom: 15px;
+}
diff --git a/options.html b/options.html
@@ -198,6 +198,15 @@ <h1>Options</h1>
                             <label for="model">Model：</label>
                             <select id="model" name="model" required></select>
                         </div>
+                        <div class="form-group" id="openai-endpoint-container">
+                            <div class="toggle-switch-container">
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="openai-endpoint-toggle" />
+                                    <span class="slider round"></span>
+                                </label>
+                                <span class="toggle-label">Use Custom Endpoint (for OpenRouter or other providers)</span>
+                            </div>
+                        </div>
                         <div class="form-group">
                             <label for="endpoint-display">API Endpoint：</label>
                             <div

diff --git a/options.js b/options.js
@@ -28,6 +28,13 @@ document.addEventListener('DOMContentLoaded', function () {
     const languageSelect = document.getElementById('language');
     const apiKeyContainer = document.getElementById('api-key-container');
 
+    const openaiEndpointContainer = document.getElementById(
+        'openai-endpoint-container'
+    );
+    const openaiEndpointToggle = document.getElementById(
+        'openai-endpoint-toggle'
+    );
+
     let isEditing = false;
     let editingIndex = -1;
 
@@ -125,8 +132,6 @@ document.addEventListener('DOMContentLoaded', function () {
                     if (result.language !== undefined) {
                         languageSelect.value = result.language;
                     }
-
-                    // loadModels();
                 }
                 if (result.selectedLLMIndex) {
                     defaultSelect.value = result.selectedLLMIndex;
@@ -142,6 +147,10 @@ document.addEventListener('DOMContentLoaded', function () {
     llmProviderGrid.addEventListener('change', function (e) {
         if (e.target.type === 'radio') {
             loadModels();
+            endpointInput.value = LLMProviderFactory.getDefaultEndpoint(
+                e.target.value
+            );
+            endpointDisplay.textContent = endpointInput.value;
         }
     });
     apiKey.addEventListener('input', function (e) {
@@ -231,9 +240,7 @@ document.addEventListener('DOMContentLoaded', function () {
             'input[name="llm-provider"]:checked'
         ).value;
         const apiKeyInput = document.getElementById('api-key');
-        const endpointUrl = LLMProviderFactory.getDefaultEndpoint(provider);
-        endpointDisplay.textContent = endpointUrl;
-        endpointInput.value = endpointUrl;
+        const endpointUrl = endpointInput.value;
 
         const providerInstance = LLMProviderFactory.getProvider(provider, {
             apiKey: apiKeyInput.value,
@@ -250,13 +257,27 @@ document.addEventListener('DOMContentLoaded', function () {
             apiKeyInput.removeAttribute('required');
             apiKeyContainer.style.display = 'none';
             ollamaWarning.style.display = 'block'; // 顯示 Ollama 警告
+            openaiEndpointContainer.style.display = 'none';
+        } else if (provider.toLowerCase() === 'openai') {
+            apiKeyInput.style.display = 'block';
+            endpointInput.style.display = openaiEndpointToggle.checked
+                ? 'block'
+                : 'none';
+            endpointDisplay.style.display = openaiEndpointToggle.checked
+                ? 'none'
+                : 'block';
+            apiKeyInput.setAttribute('required', '');
+            apiKeyContainer.style.display = 'block';
+            ollamaWarning.style.display = 'none';
+            openaiEndpointContainer.style.display = 'block';
         } else {
             endpointInput.style.display = 'none';
             apiKeyInput.style.display = 'block';
             endpointDisplay.style.display = 'block';
             apiKeyInput.setAttribute('required', '');
             apiKeyContainer.style.display = 'block';
-            ollamaWarning.style.display = 'none'; // 隱藏 Ollama 警告
+            ollamaWarning.style.display = 'none';
+            openaiEndpointContainer.style.display = 'none';
         }
 
         try {
@@ -632,4 +653,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 alert('Prompt Saved');
             });
         });
+
+    // 添加以下事件監聽器
+    openaiEndpointToggle.addEventListener('change', function (e) {
+        endpointInput.style.display = e.target.checked ? 'block' : 'none';
+        endpointDisplay.style.display = e.target.checked ? 'none' : 'block';
+    });
 });
diff --git a/prompt-providers/open-ai-provider.js b/prompt-providers/open-ai-provider.js
@@ -19,7 +19,7 @@ class OpenAIProvider extends LLMProvider {
                     { role: 'system', content: systemPrompt },
                     { role: 'user', content: text },
                 ],
-                max_tokens: 150,
+                max_tokens: 1024,
             }),
         });
         const data = await response.json();