N0VA/Kreatyw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SLM

Browse Source
This commit is contained in:
N0VA
2026-01-06 21:02:40 +01:00
commit 85d19cbaad
20 changed files with 101786 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ui/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>
<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>
</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">
</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>
</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>
</html>

118
ui/script.js Normal file
View File

@@ -0,0 +1,118 @@
document.addEventListener('DOMContentLoaded', () => {
const editor = document.getElementById('editor');
const suggestionOverlay = document.getElementById('suggestion-overlay');
const status = document.getElementById('status');
// Controls
const nGramSelect = document.getElementById('n-gram');
const tempInput = document.getElementById('temperature');
const tempValDisplay = document.getElementById('temp-val');
const lengthInput = document.getElementById('length');
const lengthValDisplay = document.getElementById('length-val');
const generateBtn = document.getElementById('generate-more-btn');
let currentSuggestion = '';
let isFetching = false;
let debounceTimer;
const autoResize = () => {
editor.style.height = 'auto';
suggestionOverlay.style.height = 'auto';
const newHeight = Math.max(360, editor.scrollHeight);
editor.style.height = newHeight + 'px';
suggestionOverlay.style.height = newHeight + 'px';
};
tempInput.addEventListener('input', () => { tempValDisplay.textContent = tempInput.value; });
lengthInput.addEventListener('input', () => { lengthValDisplay.textContent = lengthInput.value; });
const triggerUpdate = () => {
currentSuggestion = '';
updateSuggestion();
const prompt = editor.value;
if (prompt.trim().length > 0) fetchPrediction(prompt);
};
nGramSelect.addEventListener('change', triggerUpdate);
tempInput.addEventListener('change', triggerUpdate);
lengthInput.addEventListener('change', triggerUpdate);
const fetchPrediction = async (prompt, customLength = null) => {
if (isFetching) return;
isFetching = true;
status.textContent = 'Thinking...';
status.classList.add('fetching');
const n = parseInt(nGramSelect.value);
const temperature = parseFloat(tempInput.value);
const length = customLength || parseInt(lengthInput.value);
try {
const response = await fetch('/api/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt, n, temperature, length }),
});
if (!response.ok) throw new Error('Network response failed');
const data = await response.json();
if (customLength) {
insertText(data.prediction || '');
} else {
currentSuggestion = data.prediction || '';
updateSuggestion();
}
} catch (error) {
console.error('Prediction failed:', error);
status.textContent = 'Error';
} finally {
isFetching = false;
status.textContent = 'Idle';
status.classList.remove('fetching');
}
};
const updateSuggestion = () => {
const editorText = editor.value;
const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
suggestionOverlay.textContent = editorText + space + currentSuggestion;
};
const insertText = (text) => {
if (!text) return;
const space = (editor.value.length > 0 && !/\s$/.test(editor.value)) ? ' ' : '';
editor.value += space + text;
currentSuggestion = '';
updateSuggestion();
autoResize();
window.scrollTo(0, document.body.scrollHeight);
};
editor.addEventListener('input', () => {
autoResize();
clearTimeout(debounceTimer);
currentSuggestion = '';
updateSuggestion();
const prompt = editor.value;
if (prompt.trim().length === 0) return;
debounceTimer = setTimeout(() => fetchPrediction(prompt), 300);
});
editor.addEventListener('keydown', (e) => {
if (e.key === 'Tab' && currentSuggestion) {
e.preventDefault();
insertText(currentSuggestion);
fetchPrediction(editor.value);
}
});
generateBtn.addEventListener('click', () => {
fetchPrediction(editor.value, 50);
});
autoResize();
});

168
ui/style.css Normal file
View File

@@ -0,0 +1,168 @@
:root {
--background: hsl(0 0% 3.9%);
--foreground: hsl(0 0% 98%);
--card: hsl(0 0% 12%);
--card-foreground: hsl(0 0% 98%);
--popover: hsl(0 0% 3.9%);
--popover-foreground: hsl(0 0% 98%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 9%);
--secondary: hsl(0 0% 14.9%);
--secondary-foreground: hsl(0 0% 98%);
--muted: hsl(0 0% 14.9%);
--muted-foreground: hsl(0 0% 63.9%);
--accent: hsl(0 0% 14.9%);
--accent-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 14.9%);
--input: hsl(0 0% 14.9%);
--ring: hsl(0 0% 83.1%);
--radius: 0.5rem;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.header {
text-align: center;
}
.header-title {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
.header-subtitle {
color: var(--muted-foreground);
font-size: 1rem;
margin-top: 0.25rem;
}
.card {
background-color: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
}
.controls {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.control-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.control-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
label {
font-size: 0.875rem;
font-weight: 500;
}
.input-base {
background-color: var(--background);
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
color: var(--foreground);
padding: 0.5rem 0.75rem;
height: 2.5rem;
}
select.input-base {
-webkit-appearance: none;
appearance: none;
padding-right: 2rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='hsl(0 0% 63.9%)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1em 1em;
}
.generate-action {
border-top: 1px solid var(--border);
padding-top: 1.5rem;
text-align: right;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius) - 2px);
font-size: 0.875rem;
font-weight: 600;
padding: 0.5rem 1rem;
transition: all 0.2s;
cursor: pointer;
border: none;
}
.btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background-color: hsl(0 0% 98% / 0.9);
}
.editor-wrapper {
position: relative;
padding: 0;
}
#editor, #suggestion-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
font-size: 1rem;
line-height: 1.7;
background-color: transparent;
border: none;
overflow: hidden;
resize: none;
padding: 1.5rem;
min-height: 300px;
}
#editor {
z-index: 2;
color: var(--foreground);
}
#editor:focus { outline: none; }
#editor::placeholder { color: var(--muted-foreground); }
#suggestion-overlay {
z-index: 1;
color: var(--muted-foreground);
pointer-events: none;
}
.status-bar {
text-align: center;
font-size: 0.8rem;
color: var(--muted-foreground);
display: flex;
gap: 0.5rem;
justify-content: center;
}
#status.fetching {
color: var(--foreground);
}