New UI
This commit is contained in:
151
ui/index.html
151
ui/index.html
@@ -1,54 +1,109 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Stupid LLM Editor</title>
|
||||
<link rel="stylesheet" href="/ui/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="header-title">Stupid LLM Editor</h1>
|
||||
<p class="header-subtitle">AI Pair-Programmer for Polish Literature</p>
|
||||
</header>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kreatyw</title>
|
||||
<link rel="stylesheet" href="/ui/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="brand-wrapper">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="white"
|
||||
class="sparkle-icon"
|
||||
>
|
||||
<path
|
||||
d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="brand">Kreatyw</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card controls">
|
||||
<div class="control-grid">
|
||||
<div class="control-group">
|
||||
<label for="n-gram">Complexity (N)</label>
|
||||
<select id="n-gram" class="input-base">
|
||||
<option value="2">2 (Bigram)</option>
|
||||
<option value="3" selected>3 (Trigram)</option>
|
||||
<option value="4">4 (Tetragram)</option>
|
||||
<option value="5">5 (Pentagram)</option>
|
||||
</select>
|
||||
<nav class="settings">
|
||||
<div class="setting-item">
|
||||
<div class="setting-label">
|
||||
<label for="n-gram">Complexity (N)</label>
|
||||
<span class="value-badge"
|
||||
>N=<span id="n-val">4</span></span
|
||||
>
|
||||
</div>
|
||||
<select id="n-gram" class="select-input">
|
||||
<option value="2">2 (Bigram)</option>
|
||||
<option value="3">3 (Trigram)</option>
|
||||
<option value="4" selected>4 (Tetragram)</option>
|
||||
<option value="5">5 (Pentagram)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-label">
|
||||
<label for="temperature">Creativity (Temp)</label>
|
||||
<span class="value-badge" id="temp-val">1.6</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
id="temperature"
|
||||
min="0.1"
|
||||
max="2.0"
|
||||
step="0.1"
|
||||
value="1.6"
|
||||
class="slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-label">
|
||||
<label for="length">Token Length</label>
|
||||
<span class="value-badge" id="length-val">5</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
id="length"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
value="5"
|
||||
class="slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="action-area">
|
||||
<button id="generate-more-btn" class="btn btn-primary">
|
||||
Generate Paragraph
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot"></span>
|
||||
<span id="status">Idle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="temperature">Creativity (Temp): <span id="temp-val">0.7</span></label>
|
||||
<input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="0.7">
|
||||
</aside>
|
||||
|
||||
<main class="editor-main">
|
||||
<div class="editor-container">
|
||||
<div class="editor-viewport card">
|
||||
<div id="suggestion-overlay"></div>
|
||||
<textarea
|
||||
id="editor"
|
||||
spellcheck="false"
|
||||
autofocus
|
||||
placeholder="Start writing something poetic..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="length">Length (Words): <span id="length-val">5</span></label>
|
||||
<input type="range" id="length" min="1" max="20" step="1" value="5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate-action">
|
||||
<button id="generate-more-btn" class="btn btn-primary">Generate Paragraph</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card editor-wrapper">
|
||||
<div id="suggestion-overlay"></div>
|
||||
<textarea id="editor" rows="1" spellcheck="false" autofocus placeholder="Start typing... Press Tab to autocomplete."></textarea>
|
||||
</div>
|
||||
|
||||
<footer class="status-bar">
|
||||
<span>Status:</span>
|
||||
<span id="status">Idle</span>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="/ui/script.js"></script>
|
||||
</body>
|
||||
<script src="/ui/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user