147 lines
6.8 KiB
HTML
147 lines
6.8 KiB
HTML
<div id="options-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Options</h2>
|
|
<span class="close">×</span>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- TTS Section -->
|
|
<div class="options-section">
|
|
<h3>Text-to-Speech</h3>
|
|
|
|
<div class="option-item">
|
|
<label>Enable TTS:</label>
|
|
<input type="checkbox" id="tts-enabled" data-pref-bind="tts.enabled">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>TTS System:</label>
|
|
<select id="tts-system" data-pref-bind="tts.preferred_handler"></select>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Voice:</label>
|
|
<select id="tts-voice" data-pref-bind="tts.voice"></select>
|
|
<input type="text" id="local-openai-voice" data-pref-bind="tts.local-openai-tts_voice" placeholder="alloy" style="display: none;">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Speech:</label>
|
|
<span class="slider-value">100%</span>
|
|
<input type="range" id="tts-speed" min="50" max="200" value="100"
|
|
data-pref-bind="tts.speed" data-pref-transform="multiplier-percent">
|
|
</div>
|
|
|
|
<!-- API Settings -->
|
|
<div id="api-settings" class="options-section" style="display: none;">
|
|
<!-- ElevenLabs Settings -->
|
|
<div class="api-settings eleven-labs-settings" style="display: none;">
|
|
<h3>ElevenLabs API Settings</h3>
|
|
|
|
<div class="option-item">
|
|
<label>API Key:</label>
|
|
<input type="password" id="elevenlabs-api-key" data-pref-bind="tts.elevenlabs-tts_api_key">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>API URL:</label>
|
|
<input type="text" id="elevenlabs-api-url" data-pref-bind="tts.elevenlabs-tts_api_url">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OpenAI Settings -->
|
|
<div class="api-settings openai-tts-settings" style="display: none;">
|
|
<h3>OpenAI API Settings</h3>
|
|
|
|
<div class="option-item">
|
|
<label>API Key:</label>
|
|
<input type="password" id="openai-api-key" data-pref-bind="tts.openai-tts_api_key">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>API URL:</label>
|
|
<input type="text" id="openai-api-url" data-pref-bind="tts.openai-tts_api_url">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Model:</label>
|
|
<select id="openai-model" data-pref-bind="tts.openai-tts_model">
|
|
<option value="tts-1">TTS-1</option>
|
|
<option value="tts-1-hd">TTS-1 HD</option>
|
|
<option value="gpt-4o-mini-tts">GPT-4o mini TTS</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Local OpenAI-compatible Settings -->
|
|
<div class="api-settings local-openai-tts-settings" style="display: none;">
|
|
<h3>Local OpenAI API Settings</h3>
|
|
|
|
<div class="option-item">
|
|
<label>API Key (optional):</label>
|
|
<input type="password" id="local-openai-api-key" data-pref-bind="tts.local-openai-tts_api_key">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>API URL:</label>
|
|
<input type="text" id="local-openai-api-url" data-pref-bind="tts.local-openai-tts_api_url">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Model:</label>
|
|
<input type="text" id="local-openai-model" data-pref-bind="tts.local-openai-tts_model" placeholder="tts-1">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Request timeout (ms):</label>
|
|
<input type="number" id="local-openai-timeout-ms" min="1000" max="600000" step="1000"
|
|
data-pref-bind="tts.local-openai-tts_timeout_ms" data-pref-transform="integer:1000,600000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Section -->
|
|
<div class="options-section">
|
|
<h3>Audio</h3>
|
|
|
|
<div class="option-item">
|
|
<label>Master Volume:</label>
|
|
<span class="slider-value">100%</span>
|
|
<input type="range" id="master-volume" min="0" max="100" value="100"
|
|
data-pref-bind="audio.masterVolume" data-pref-transform="range:0,1">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Music Volume:</label>
|
|
<span class="slider-value">70%</span>
|
|
<input type="range" id="music-volume" min="0" max="100" value="70"
|
|
data-pref-bind="audio.musicVolume" data-pref-transform="range:0,1">
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Sound Effects Volume:</label>
|
|
<span class="slider-value">100%</span>
|
|
<input type="range" id="sfx-volume" min="0" max="100" value="100"
|
|
data-pref-bind="audio.sfxVolume" data-pref-transform="range:0,1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Language Section -->
|
|
<div class="options-section">
|
|
<h3>Language</h3>
|
|
|
|
<div class="option-item">
|
|
<label>Language:</label>
|
|
<select id="language" data-pref-bind="app.locale"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="close-options">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|