Ivan Anikin
112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Identity Prompt Lab</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="sidebar" aria-label="Identity presets and settings">
|
|
<header class="brand-row">
|
|
<div>
|
|
<p class="eyebrow">FunnyGirl</p>
|
|
<h1>Identity Prompt Lab</h1>
|
|
</div>
|
|
<button id="themeToggle" class="icon-button" type="button" title="Theme">◐</button>
|
|
</header>
|
|
|
|
<div class="preset-bar">
|
|
<label for="presetSelect">Preset</label>
|
|
<div class="preset-actions">
|
|
<select id="presetSelect"></select>
|
|
<button id="savePresetButton" type="button" title="Save preset">Save</button>
|
|
<button id="newPresetButton" type="button" title="New preset">New</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="tabs" aria-label="Prompt sections">
|
|
<button class="tab is-active" data-tab="fields" type="button">Fields</button>
|
|
<button class="tab" data-tab="runtime" type="button">Runtime</button>
|
|
</nav>
|
|
|
|
<form id="settingsForm" class="settings-form">
|
|
<section class="tab-panel is-active" data-panel="fields">
|
|
<div class="field-list-toolbar">
|
|
<button id="addFieldButton" type="button">Add field</button>
|
|
<button id="clearFieldsButton" type="button">Clear fields</button>
|
|
</div>
|
|
<div id="promptFields" class="prompt-fields"></div>
|
|
</section>
|
|
|
|
<section class="tab-panel" data-panel="runtime">
|
|
<div class="field-grid two">
|
|
<label>
|
|
Model
|
|
<input id="modelInput" name="model" autocomplete="off" />
|
|
</label>
|
|
<label>
|
|
Max tokens
|
|
<input id="maxTokensInput" name="maxTokens" type="number" min="1" max="8192" />
|
|
</label>
|
|
</div>
|
|
<label>
|
|
Temperature
|
|
<input id="temperatureInput" name="temperature" type="range" min="0" max="2" step="0.05" />
|
|
<span id="temperatureValue" class="range-value"></span>
|
|
</label>
|
|
<label>
|
|
API base URL
|
|
<input id="apiBaseInput" name="apiBase" autocomplete="off" placeholder="https://api.deepseek.com" />
|
|
</label>
|
|
<label>
|
|
API key
|
|
<input id="apiKeyInput" name="apiKey" type="password" autocomplete="off" placeholder="Stored only in this browser" />
|
|
</label>
|
|
<div class="toggle-row">
|
|
<label class="checkbox-label">
|
|
<input id="mockModeInput" name="mockMode" type="checkbox" />
|
|
Mock mode
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="workspace">
|
|
<section class="chat-panel" aria-label="Chat">
|
|
<header class="panel-header">
|
|
<div>
|
|
<p class="eyebrow">Live test</p>
|
|
<h2 id="chatTitle">Prompt test</h2>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button id="clearChatButton" type="button" title="Clear chat">Clear</button>
|
|
<button id="copyPromptButton" type="button" title="Copy prompt">Copy prompt</button>
|
|
</div>
|
|
</header>
|
|
<div id="messages" class="messages" aria-live="polite"></div>
|
|
<form id="chatForm" class="composer">
|
|
<textarea id="messageInput" rows="2" placeholder="Напиши тестовую реплику..." required></textarea>
|
|
<button id="sendButton" type="submit">Send</button>
|
|
</form>
|
|
</section>
|
|
|
|
<aside class="prompt-panel" aria-label="Prompt preview">
|
|
<header class="panel-header">
|
|
<div>
|
|
<p class="eyebrow">Generated</p>
|
|
<h2>System prompt</h2>
|
|
</div>
|
|
<span id="promptStats" class="stats"></span>
|
|
</header>
|
|
<pre id="promptPreview"></pre>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|