diff --git a/index.js b/index.js index 39db4af..b471d48 100644 --- a/index.js +++ b/index.js @@ -51,7 +51,7 @@ import { generateSeparateUpdatePrompt } from './src/systems/generation/promptBuilder.js'; import { parseResponse, parseUserStats } from './src/systems/generation/parser.js'; -import { updateRPGData } from './src/systems/generation/apiClient.js'; +import { updateRPGData, testExternalAPIConnection } from './src/systems/generation/apiClient.js'; import { onGenerationStarted } from './src/systems/generation/injector.js'; // Rendering modules @@ -624,6 +624,99 @@ async function initUI() { } }); + // External API settings event handlers + $('#rpg-external-base-url').on('change', function() { + if (!extensionSettings.externalApiSettings) { + extensionSettings.externalApiSettings = { + baseUrl: '', apiKey: '', model: '', maxTokens: 8192, temperature: 0.7 + }; + } + extensionSettings.externalApiSettings.baseUrl = String($(this).val()).trim(); + saveSettings(); + }); + + $('#rpg-external-api-key').on('change', function() { + // Securely store API key in localStorage instead of shared extension settings + const apiKey = String($(this).val()).trim(); + localStorage.setItem('rpg_companion_external_api_key', apiKey); + + // Ensure the externalApiSettings object exists, but don't store the key in it + if (!extensionSettings.externalApiSettings) { + extensionSettings.externalApiSettings = { + baseUrl: '', model: '', maxTokens: 8192, temperature: 0.7 + }; + saveSettings(); + } + }); + + $('#rpg-external-model').on('change', function() { + if (!extensionSettings.externalApiSettings) { + extensionSettings.externalApiSettings = { + baseUrl: '', apiKey: '', model: '', maxTokens: 8192, temperature: 0.7 + }; + } + extensionSettings.externalApiSettings.model = String($(this).val()).trim(); + saveSettings(); + }); + + $('#rpg-external-max-tokens').on('change', function() { + if (!extensionSettings.externalApiSettings) { + extensionSettings.externalApiSettings = { + baseUrl: '', apiKey: '', model: '', maxTokens: 8192, temperature: 0.7 + }; + } + extensionSettings.externalApiSettings.maxTokens = parseInt(String($(this).val())); + saveSettings(); + }); + + $('#rpg-external-temperature').on('change', function() { + if (!extensionSettings.externalApiSettings) { + extensionSettings.externalApiSettings = { + baseUrl: '', apiKey: '', model: '', maxTokens: 8192, temperature: 0.7 + }; + } + extensionSettings.externalApiSettings.temperature = parseFloat(String($(this).val())); + saveSettings(); + }); + + $('#rpg-toggle-api-key-visibility').on('click', function() { + const $input = $('#rpg-external-api-key'); + const type = $input.attr('type') === 'password' ? 'text' : 'password'; + $input.attr('type', type); + $(this).find('i').toggleClass('fa-eye fa-eye-slash'); + }); + + $('#rpg-test-external-api').on('click', async function() { + const $result = $('#rpg-external-api-test-result'); + const $btn = $(this); + const originalText = $btn.html(); + + $btn.html(' Testing...').prop('disabled', true); + $result.hide().removeClass('rpg-success-message rpg-error-message'); + + try { + const result = await testExternalAPIConnection(); + + if (result.success) { + $result.addClass('rpg-success-message') + .html(` ${result.message}`) + .slideDown(); + toastr.success(result.message); + } else { + $result.addClass('rpg-error-message') + .html(` ${result.message}`) + .slideDown(); + toastr.error(result.message); + } + } catch (error) { + $result.addClass('rpg-error-message') + .html(` Error: ${error.message}`) + .slideDown(); + } finally { + $btn.html(originalText).prop('disabled', false); + } + }); + // Initialize UI state (enable/disable is in Extensions tab) $('#rpg-toggle-auto-update').prop('checked', extensionSettings.autoUpdate); $('#rpg-position-select').val(extensionSettings.panelPosition); @@ -681,6 +774,20 @@ async function initUI() { $('#rpg-custom-accent').val(extensionSettings.customColors.accent); $('#rpg-custom-text').val(extensionSettings.customColors.text); $('#rpg-custom-highlight').val(extensionSettings.customColors.highlight); + + // Initialize External API settings values + if (extensionSettings.externalApiSettings) { + $('#rpg-external-base-url').val(extensionSettings.externalApiSettings.baseUrl || ''); + + // Load API Key from secure localStorage + const storedApiKey = localStorage.getItem('rpg_companion_external_api_key') || ''; + $('#rpg-external-api-key').val(storedApiKey); + + $('#rpg-external-model').val(extensionSettings.externalApiSettings.model || ''); + $('#rpg-external-max-tokens').val(extensionSettings.externalApiSettings.maxTokens || 8192); + $('#rpg-external-temperature').val(extensionSettings.externalApiSettings.temperature ?? 0.7); + } + $('#rpg-generation-mode').val(extensionSettings.generationMode); $('#rpg-skip-guided-mode').val(extensionSettings.skipInjectionsForGuided); $('#rpg-save-tracker-history').prop('checked', extensionSettings.saveTrackerHistory); diff --git a/src/core/state.js b/src/core/state.js index 03fabf9..0941ea7 100644 --- a/src/core/state.js +++ b/src/core/state.js @@ -172,6 +172,14 @@ export let extensionSettings = { // Auto avatar generation settings autoGenerateAvatars: false, // Master toggle for auto-generating avatars avatarLLMCustomInstruction: '', // Custom instruction for LLM prompt generation + // External API settings for 'external' generation mode + externalApiSettings: { + baseUrl: '', // OpenAI-compatible API base URL (e.g., "https://api.openai.com/v1") + // apiKey is NOT stored here for security. It is stored in localStorage('rpg_companion_api_key') + model: '', // Model identifier (e.g., "gpt-4o-mini") + maxTokens: 8192, // Maximum tokens for generation + temperature: 0.7 // Temperature setting for generation + } }; /** diff --git a/src/i18n/en.json b/src/i18n/en.json index f657e0e..433b154 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -53,7 +53,18 @@ "template.settingsModal.advanced.generationMode": "Generation Mode:", "template.settingsModal.advanced.generationModeOptions.together": "Together with Main Generation", "template.settingsModal.advanced.generationModeOptions.separate": "Separate Generation", - "template.settingsModal.advanced.generationModeNote": "Together: Adds RPG tracking to main roleplay. Separate: Generates RPG data separately (manual or auto).", + "template.settingsModal.advanced.generationModeNote": "Together: Adds RPG tracking to main roleplay. Separate: Generates RPG data separately (manual or auto). External: Connects to an OpenAI-compatible endpoint directly.", + "template.settingsModal.advanced.generationModeOptions.external": "External API", + "template.settingsModal.advanced.externalApi.title": "External API Settings", + "template.settingsModal.advanced.externalApi.baseUrl": "API Base URL", + "template.settingsModal.advanced.externalApi.baseUrlNote": "OpenAI-compatible endpoint (e.g., OpenAI, OpenRouter, local LLM server)", + "template.settingsModal.advanced.externalApi.apiKey": "API Key", + "template.settingsModal.advanced.externalApi.apiKeyNote": "Your API key for the external service", + "template.settingsModal.advanced.externalApi.model": "Model", + "template.settingsModal.advanced.externalApi.modelNote": "Model identifier (e.g., gpt-4o-mini, claude-3-haiku, mistral-7b)", + "template.settingsModal.advanced.externalApi.maxTokens": "Max Tokens", + "template.settingsModal.advanced.externalApi.temperature": "Temperature", + "template.settingsModal.advanced.externalApi.testConnection": "Test Connection", "template.settingsModal.advanced.contextMessages": "Context Messages:", "template.settingsModal.advanced.contextMessagesNote": "Number of recent messages to include (Separate mode only)", "template.settingsModal.advanced.memoryBatchSize": "Memory Batch Size:", diff --git a/src/i18n/zh-tw.json b/src/i18n/zh-tw.json index d197716..f95025f 100644 --- a/src/i18n/zh-tw.json +++ b/src/i18n/zh-tw.json @@ -44,8 +44,19 @@ "template.settingsModal.advanced.generationMode": "生成模式：", "template.settingsModal.advanced.generationModeOptions.together": "同時生成", "template.settingsModal.advanced.generationModeOptions.separate": "單獨生成", - "template.settingsModal.advanced.generationModeNote": "同時生成：將 RPG 追蹤添加到主要提示詞中一同生成。單獨生成：分開生成 RPG 數據。（就是手動或自動的差別）。", - "template.settingsModal.advanced.contextMessages": "上下文訊息：", + "template.settingsModal.advanced.generationModeNote": "同時生成：將 RPG 追蹤添加到主要提示詞中一同生成。單獨生成：分開生成 RPG 數據。（就是手動或自動的差別）。外部 API：直接連接 OpenAI 兼容端點生成數據。", + "template.settingsModal.advanced.generationModeOptions.external": "外部 API", + "template.settingsModal.advanced.externalApi.title": "外部 API 設定", + "template.settingsModal.advanced.externalApi.baseUrl": "API 基礎 URL", + "template.settingsModal.advanced.externalApi.baseUrlNote": "OpenAI 兼容端點（例如 OpenAI、OpenRouter、本地 LLM 伺服器）", + "template.settingsModal.advanced.externalApi.apiKey": "API 金鑰", + "template.settingsModal.advanced.externalApi.apiKeyNote": "外部服務的 API 金鑰", + "template.settingsModal.advanced.externalApi.model": "模型", + "template.settingsModal.advanced.externalApi.modelNote": "模型識別碼（例如 gpt-4o-mini、claude-3-haiku、mistral-7b）", + "template.settingsModal.advanced.externalApi.maxTokens": "最大 Token", + "template.settingsModal.advanced.externalApi.temperature": "溫度 (Temperature)", + "template.settingsModal.advanced.externalApi.testConnection": "測試連接", + "template.settingsModal.advanced.contextMessages": "上下文訊息：", "template.settingsModal.advanced.contextMessagesNote": "包含的最近訊息數量（僅限單獨生成模式）", "template.settingsModal.advanced.memoryBatchSize": "記憶批次大小：", "template.settingsModal.advanced.memoryBatchSizeNote": "在記憶回憶中每批處理的訊息數量", diff --git a/src/systems/features/avatarGenerator.js b/src/systems/features/avatarGenerator.js index 3d31851..ecc9ee9 100644 --- a/src/systems/features/avatarGenerator.js +++ b/src/systems/features/avatarGenerator.js @@ -15,7 +15,7 @@ import { selected_group, getGroupMembers } from '../../../../../../group-chats.j import { extensionSettings, sessionAvatarPrompts, setSessionAvatarPrompt } from '../../core/state.js'; import { saveSettings } from '../../core/persistence.js'; import { generateAvatarPromptGenerationPrompt, parseAvatarPromptsResponse } from '../generation/promptBuilder.js'; -import { getCurrentPresetName, switchToPreset } from '../generation/apiClient.js'; +import { getCurrentPresetName, switchToPreset, generateWithExternalAPI } from '../generation/apiClient.js'; // Generation state - tracks characters currently being generated const pendingGenerations = new Set(); @@ -260,10 +260,17 @@ async function generateLLMPrompts(characterNames) { console.log('[RPG Avatar] Generating LLM prompts for:', characterNames); const promptMessages = await generateAvatarPromptGenerationPrompt(characterNames); - const response = await generateRaw({ - prompt: promptMessages, - quietToLoud: false - }); + let response; + + if (extensionSettings.generationMode === 'external') { + console.log('[RPG Avatar] Using external API for avatar prompt generation'); + response = await generateWithExternalAPI(promptMessages); + } else { + response = await generateRaw({ + prompt: promptMessages, + quietToLoud: false + }); + } if (response) { const prompts = parseAvatarPromptsResponse(response); diff --git a/src/systems/generation/apiClient.js b/src/systems/generation/apiClient.js index 2c74834..34254ac 100644 --- a/src/systems/generation/apiClient.js +++ b/src/systems/generation/apiClient.js @@ -30,6 +30,123 @@ import { generateAvatarsForCharacters } from '../features/avatarGenerator.js'; // Store the original preset name to restore after tracker generation let originalPresetName = null; +/** + * Generates tracker data using an external OpenAI-compatible API. + * Used when generationMode is 'external'. + * + * @param {Array<{role: string, content: string}>} messages - Array of message objects for the API + * @returns {Promise} The generated response content + * @throws {Error} If the API call fails or configuration is invalid + */ +export async function generateWithExternalAPI(messages) { + const { baseUrl, model, maxTokens, temperature } = extensionSettings.externalApiSettings || {}; + // Retrieve API key from secure storage (not shared extension settings) + const apiKey = localStorage.getItem('rpg_companion_external_api_key'); + + // Validate required settings + if (!baseUrl || !baseUrl.trim()) { + throw new Error('External API base URL is not configured'); + } + if (!apiKey || !apiKey.trim()) { + throw new Error('External API key is not found. If you switched browsers or cleared your cache, please re-enter your API key in the extension settings.'); + } + if (!model || !model.trim()) { + throw new Error('External API model is not configured'); + } + + // Normalize base URL (remove trailing slash if present) + const normalizedBaseUrl = baseUrl.trim().replace(/\/+$/, ''); + const endpoint = `${normalizedBaseUrl}/chat/completions`; + + console.log(`[RPG Companion] Calling external API: ${normalizedBaseUrl} with model: ${model}`); + + try { + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${apiKey.trim()}` + }, + body: JSON.stringify({ + model: model.trim(), + messages: messages, + max_tokens: maxTokens || 2048, + temperature: temperature ?? 0.7 + }) + }); + + if (!response.ok) { + const errorText = await response.text(); + let errorMessage = `External API error: ${response.status} ${response.statusText}`; + try { + const errorJson = JSON.parse(errorText); + if (errorJson.error?.message) { + errorMessage = `External API error: ${errorJson.error.message}`; + } + } catch (e) { + // If parsing fails, use the raw text if it's short enough + if (errorText.length < 200) { + errorMessage = `External API error: ${errorText}`; + } + } + throw new Error(errorMessage); + } + + const data = await response.json(); + + if (!data.choices || !data.choices[0] || !data.choices[0].message) { + throw new Error('Invalid response format from external API'); + } + + const content = data.choices[0].message.content; + console.log('[RPG Companion] External API response received successfully'); + + return content; + } catch (error) { + if (error.name === 'TypeError' && (error.message.includes('fetch') || error.message.includes('Failed to fetch') || error.message.includes('NetworkError'))) { + throw new Error(`CORS Access Blocked: This API endpoint (${normalizedBaseUrl}) does not allow direct access from a browser. This is a browser security restriction (CORS), not a bug in the extension. Please use an endpoint that supports CORS (like OpenRouter or a local proxy) or use SillyTavern's internal API system (Separate Mode).`); + } + throw error; + } +} + +/** + * Tests the external API connection with a simple request. + * @returns {Promise<{success: boolean, message: string, model?: string}>} + */ +export async function testExternalAPIConnection() { + const { baseUrl, model } = extensionSettings.externalApiSettings || {}; + const apiKey = localStorage.getItem('rpg_companion_external_api_key'); + + if (!baseUrl || !apiKey || !model) { + return { + success: false, + message: !apiKey + ? 'API Key not found. Please re-enter it in settings (keys are stored locally per-browser).' + : 'Please fill in all required fields (Base URL, API Key, and Model)' + }; + } + + try { + const testMessages = [ + { role: 'user', content: 'Respond with exactly: "Connection successful"' } + ]; + + const response = await generateWithExternalAPI(testMessages); + + return { + success: true, + message: `Connection successful! Model: ${model}`, + model: model + }; + } catch (error) { + return { + success: false, + message: error.message || 'Connection failed' + }; + } +} + /** * Gets the current preset name using the /preset command * @returns {Promise} Current preset name or null if unavailable @@ -100,11 +217,13 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough return; } - if (extensionSettings.generationMode !== 'separate') { - // console.log('[RPG Companion] Not in separate mode, skipping manual update'); + if (extensionSettings.generationMode !== 'separate' && extensionSettings.generationMode !== 'external') { + // console.log('[RPG Companion] Not in separate or external mode, skipping manual update'); return; } + const isExternalMode = extensionSettings.generationMode === 'external'; + try { setIsGenerating(true); @@ -114,13 +233,14 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough $updateBtn.html(` ${updatingText}`).prop('disabled', true); // Save current preset name before switching (if we're going to switch) - if (extensionSettings.useSeparatePreset) { + // Note: Preset switching is only used in separate mode, not external mode + if (!isExternalMode && extensionSettings.useSeparatePreset) { originalPresetName = await getCurrentPresetName(); console.log(`[RPG Companion] Saved original preset: "${originalPresetName}"`); } - // Switch to separate preset if enabled - if (extensionSettings.useSeparatePreset) { + // Switch to separate preset if enabled (separate mode only) + if (!isExternalMode && extensionSettings.useSeparatePreset) { const switched = await switchToPreset('RPG Companion Trackers'); if (!switched) { console.warn('[RPG Companion] Failed to switch to RPG Companion Trackers preset. Using current preset.'); @@ -130,11 +250,19 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough const prompt = await generateSeparateUpdatePrompt(); - // Generate using raw prompt (uses current preset, no chat history) - const response = await generateRaw({ - prompt: prompt, - quietToLoud: false - }); + // Generate response based on mode + let response; + if (isExternalMode) { + // External mode: Use external OpenAI-compatible API directly + console.log('[RPG Companion] Using external API for tracker generation'); + response = await generateWithExternalAPI(prompt); + } else { + // Separate mode: Use SillyTavern's generateRaw + response = await generateRaw({ + prompt: prompt, + quietToLoud: false + }); + } if (response) { // console.log('[RPG Companion] Raw AI response:', response); @@ -245,6 +373,9 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough } catch (error) { console.error('[RPG Companion] Error updating RPG data:', error); + if (isExternalMode) { + toastr.error(error.message, 'RPG Companion External API Error'); + } } finally { // Restore original preset if we switched to a separate one if (originalPresetName && extensionSettings.useSeparatePreset) { diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js index 3ee1ddb..91b1624 100644 --- a/src/systems/ui/layout.js +++ b/src/systems/ui/layout.js @@ -293,8 +293,17 @@ export function updateGenerationModeUI() { if (extensionSettings.generationMode === 'together') { // In "together" mode, manual update button is hidden $('#rpg-manual-update').hide(); - } else { + $('#rpg-external-api-settings').slideUp(200); + $('#rpg-separate-mode-settings').slideUp(200); + } else if (extensionSettings.generationMode === 'separate') { // In "separate" mode, manual update button is visible $('#rpg-manual-update').show(); + $('#rpg-external-api-settings').slideUp(200); + $('#rpg-separate-mode-settings').slideDown(200); + } else if (extensionSettings.generationMode === 'external') { + // In "external" mode, manual update button is visible AND external settings are shown + $('#rpg-manual-update').show(); + $('#rpg-external-api-settings').slideDown(200); + $('#rpg-separate-mode-settings').slideUp(200); } } diff --git a/template.html b/template.html index bfe41b6..2918a87 100644 --- a/template.html +++ b/template.html @@ -73,16 +73,19 @@
@@ -90,79 +93,103 @@ -