87 lines
3.5 KiB
HTML
87 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Thisper - Translator App</title>
|
|
<link rel="stylesheet" href="/src/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header class="header">
|
|
<h1>Thisper</h1>
|
|
<div class="controls">
|
|
<select id="model-select">
|
|
<option value="models/gemini-2.0-flash-lite">Gemini 2.0 Flash Lite</option>
|
|
<option value="models/gemini-3.1-flash-lite-preview">Gemini 3.1 Flash Lite (Preview)</option>
|
|
<option value="models/gemini-flash-lite-latest">Gemini Flash Lite (Latest)</option>
|
|
<option value="models/gemini-2.5-flash">Gemini 2.5 Flash</option>
|
|
</select>
|
|
<select id="mode-select">
|
|
<option value="Preserve Voice">Preserve Voice</option>
|
|
<option value="Clean">Clean</option>
|
|
<option value="Readable">Readable</option>
|
|
<option value="Formal">Formal</option>
|
|
<option value="Concise">Concise</option>
|
|
</select>
|
|
<button id="rewrite-btn" class="primary-btn">Rewrite</button>
|
|
<button id="settings-btn" class="icon-btn" title="Settings">⚙️</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="helper-banner" class="helper-banner hidden">
|
|
<p id="helper-banner-text"></p>
|
|
<div class="helper-actions">
|
|
<button id="hide-to-tray-btn">Hide to Tray</button>
|
|
<button id="dismiss-banner-btn">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="runtime-status" class="runtime-status"></div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settings-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<header class="modal-header">
|
|
<h2>Settings</h2>
|
|
<button id="close-settings-btn" class="close-btn">×</button>
|
|
</header>
|
|
<div class="field">
|
|
<label for="api-key-input">Gemini API Key</label>
|
|
<input type="password" id="api-key-input" placeholder="Paste your API key here...">
|
|
<p class="hint">Stored in your system credential store. Thisper never writes the key to a plaintext file.</p>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="save-settings-btn" class="primary-btn">Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="panes">
|
|
<div class="pane">
|
|
<label for="input-text">Original Input</label>
|
|
<textarea id="input-text" placeholder="Type or paste raw text here..."></textarea>
|
|
</div>
|
|
<div class="pane">
|
|
<label for="output-text">Optimized Output</label>
|
|
<div id="loading" class="hidden">Parsing and translating...</div>
|
|
<div id="diff-view" class="hidden diff-container"></div>
|
|
<textarea id="output-text" placeholder="Output will appear here..." readonly></textarea>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p class="footer-note">
|
|
Cross-app rewrite uses <strong>Ctrl + Alt + R</strong>. Thisper copies the current selection,
|
|
rewrites it, and pastes the full replacement only after a complete rewrite succeeds.
|
|
</p>
|
|
<div class="footer-actions">
|
|
<button id="toggle-diff-btn">Show Diff</button>
|
|
<button id="copy-btn">Copy Output</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|