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

Compare commits

base: N0VA:e625447222d5cf07ed3b144b1b922d40ec57a147
Branches Tags
N0VA:main
...
compare: N0VA:main
Branches Tags
N0VA:main

11 Commits
e625447222 ... main

Author SHA1 Message Date
N0\A
42864c5491 Should fully work now 2026-01-09 00:47:49 +01:00
N0\A
3131fd3531 Hopefully? 2026-01-09 00:45:01 +01:00
N0\A
d936ac872a Maybe now? 2026-01-09 00:40:25 +01:00
N0\A
019f85a29a HTTPS fix 2026-01-09 00:35:21 +01:00
N0\A
87c56ba2f8 Better suggestion accept on mobile and word wrap offset fix 2026-01-09 00:24:38 +01:00
N0VA
5bd7ccf76a Update index.html 2026-01-07 11:17:49 +01:00
N0VA
630d8ebdc0 Update api.html 2026-01-07 11:02:22 +01:00
N0VA
6f0977be50 Mobile UI fix 2026-01-07 10:57:57 +01:00
N0VA
86c20628c8 API page scrolling fix 2026-01-07 10:42:17 +01:00
N0VA
56b4e056c3 API page 2026-01-07 10:40:22 +01:00
N0VA
b5d5195f8f Layout fix 2026-01-07 10:39:32 +01:00
7 changed files with 662 additions and 246 deletions
Expand all files Collapse all files

2
Dockerfile
View File

@@ -5,4 +5,4 @@ COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt RUN pip install --no-cache-dir -r requirements.txt
COPY . . COPY . .
EXPOSE 8000 EXPOSE 8000
CMD ["uvicorn", "api:app", "--host", "0.0.0.0", "--port", "8000"] CMD ["uvicorn", "api:app", "--host", "0.0.0.0", "--port", "8000", "--proxy-headers", "--forwarded-allow-ips", "*"]

3
README.md
View File

@@ -1,3 +0,0 @@
TODO:
- Fix the suggestion text not scrolling
- Add a /api page

48
api.py
View File

@@ -1,13 +1,15 @@
import os import os
import uvicorn
from fastapi import FastAPI, Body
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse
from pydantic import BaseModel
import sys import sys
import uvicorn
from fastapi import Body, FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
# Import core LLM logic # Import core LLM logic
from llm import load_or_train_model, generate_text, SOURCES_DIR from llm import SOURCES_DIR, generate_text, load_or_train_model
# --- Configuration --- # --- Configuration ---
# Models to pre-load on startup # Models to pre-load on startup
@@ -18,19 +20,31 @@ UI_DIR = "ui"
# Cache for loaded models: {n: model} # Cache for loaded models: {n: model}
MODEL_CACHE = {} MODEL_CACHE = {}
# --- Pydantic Models --- # --- Pydantic Models ---
class PredictRequest(BaseModel): class PredictRequest(BaseModel):
prompt: str prompt: str
temperature: float = 0.7 temperature: float = 1.6
n: int = 3 n: int = 4
length: int = 5 length: int = 5
class PredictResponse(BaseModel): class PredictResponse(BaseModel):
prediction: str prediction: str
# --- FastAPI App --- # --- FastAPI App ---
app = FastAPI() app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
def get_model_for_n(n: int): def get_model_for_n(n: int):
""" """
Retrieves the model for a specific N from cache, or loads/trains it. Retrieves the model for a specific N from cache, or loads/trains it.
@@ -44,6 +58,7 @@ def get_model_for_n(n: int):
MODEL_CACHE[n] = model MODEL_CACHE[n] = model
return model return model
@app.on_event("startup") @app.on_event("startup")
def startup_event(): def startup_event():
""" """
@@ -54,6 +69,7 @@ def startup_event():
get_model_for_n(n) get_model_for_n(n)
print(f"Models for N={PRELOAD_N_GRAMS} loaded. Server is ready.") print(f"Models for N={PRELOAD_N_GRAMS} loaded. Server is ready.")
@app.post("/api/predict", response_model=PredictResponse) @app.post("/api/predict", response_model=PredictResponse)
async def predict(request: PredictRequest): async def predict(request: PredictRequest):
""" """
@@ -71,22 +87,34 @@ async def predict(request: PredictRequest):
model, model,
start_prompt=request.prompt, start_prompt=request.prompt,
length=length, length=length,
temperature=request.temperature temperature=request.temperature,
) )
return PredictResponse(prediction=prediction) return PredictResponse(prediction=prediction)
@app.get("/api")
async def api_docs():
"""
API documentation page.
"""
return FileResponse(os.path.join(UI_DIR, "api.html"))
# --- Static Files and Root --- # --- Static Files and Root ---
app.mount("/ui", StaticFiles(directory=UI_DIR), name="ui") app.mount("/ui", StaticFiles(directory=UI_DIR), name="ui")
@app.get("/") @app.get("/")
async def read_root(): async def read_root():
return FileResponse(os.path.join(UI_DIR, "index.html")) return FileResponse(os.path.join(UI_DIR, "index.html"))
def run(): def run():
# Read port from environment variable, default to 8000 # Read port from environment variable, default to 8000
port = int(os.environ.get("PORT", 8000)) port = int(os.environ.get("PORT", 8000))
uvicorn.run(app, host="0.0.0.0", port=port) uvicorn.run(app, host="0.0.0.0", port=port, proxy_headers=True, forwarded_allow_ips="*")
if __name__ == "__main__": if __name__ == "__main__":
run() run()

390
ui/api.html Normal file
View File

@@ -0,0 +1,390 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kreatyw - API Documentation</title>
<link rel="stylesheet" href="/ui/style.css?v=2" />
<link rel="icon" type="image/x-icon" href="/ui/favicon.ico" />
<style>
body {
overflow: auto !important;
height: auto !important;
}
.doc-container {
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
}
.doc-header {
margin-bottom: 3rem;
border-bottom: 1px solid var(--border);
padding-bottom: 2rem;
}
.doc-header h1 {
font-size: 2.5rem;
margin: 0 0 0.5rem 0;
font-weight: 700;
}
.doc-header p {
color: var(--muted-foreground);
font-size: 1.125rem;
margin: 0;
}
.section {
margin-bottom: 3rem;
}
.section h2 {
font-size: 1.75rem;
margin: 0 0 1rem 0;
font-weight: 600;
}
.section h3 {
font-size: 1.25rem;
margin: 2rem 0 1rem 0;
font-weight: 600;
color: var(--muted-foreground);
}
.section p {
line-height: 1.7;
color: var(--foreground);
margin: 0 0 1rem 0;
}
.code-block {
background-color: var(--secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
overflow-x: auto;
margin: 1rem 0;
}
.code-block pre {
margin: 0;
font-family: "SF Mono", "Fira Code", monospace;
font-size: 0.875rem;
line-height: 1.6;
color: var(--foreground);
}
.inline-code {
background-color: var(--secondary);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: "SF Mono", "Fira Code", monospace;
font-size: 0.875em;
color: var(--foreground);
}
.param-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.param-table th,
.param-table td {
text-align: left;
padding: 0.75rem;
border-bottom: 1px solid var(--border);
}
.param-table th {
font-weight: 600;
color: var(--muted-foreground);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.param-table td {
color: var(--foreground);
}
.param-table tr:last-child td {
border-bottom: none;
}
.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.badge-post {
background-color: #10b981;
color: white;
}
.badge-required {
background-color: #ef4444;
color: white;
}
.badge-optional {
background-color: var(--secondary);
color: var(--muted-foreground);
}
.back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--foreground);
text-decoration: none;
margin-bottom: 2rem;
font-weight: 500;
transition: opacity 0.2s;
}
.back-link:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="doc-container">
<a href="/" class="back-link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
Back to Editor
</a>
<div class="doc-header">
<h1>Kreatyw API</h1>
<p>Text generation API powered by N-gram language models</p>
</div>
<div class="section">
<h2>Overview</h2>
<p>
The Kreatyw API provides a simple REST endpoint for
generating text continuations using N-gram language models.
The API uses Markov chains trained on source texts to
predict and generate coherent text sequences.
</p>
</div>
<div class="section">
<h2>Base URL</h2>
<div class="code-block">
<pre>https://kreatyw.krzak.org</pre>
</div>
</div>
<div class="section">
<h2>Endpoints</h2>
<h3>POST /api/predict</h3>
<p>Generate text continuation based on a given prompt.</p>
<h3>Request Body</h3>
<table class="param-table">
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="inline-code">prompt</span></td>
<td>string</td>
<td>
<span class="badge badge-required"
>Required</span
>
</td>
<td>The starting text to continue from</td>
</tr>
<tr>
<td><span class="inline-code">n</span></td>
<td>integer</td>
<td>
<span class="badge badge-optional"
>Optional</span
>
</td>
<td>
N-gram size (2-5). Default: 4. Higher values
produce more coherent but less creative text.
</td>
</tr>
<tr>
<td>
<span class="inline-code">temperature</span>
</td>
<td>float</td>
<td>
<span class="badge badge-optional"
>Optional</span
>
</td>
<td>
Sampling temperature (0.1-2.0). Default: 1.6.
Higher values increase randomness.
</td>
</tr>
<tr>
<td><span class="inline-code">length</span></td>
<td>integer</td>
<td>
<span class="badge badge-optional"
>Optional</span
>
</td>
<td>
Number of words to generate (1-500). Default: 5.
</td>
</tr>
</tbody>
</table>
<h3>Response</h3>
<table class="param-table">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="inline-code">prediction</span></td>
<td>string</td>
<td>The generated text continuation</td>
</tr>
</tbody>
</table>
<h3>Example Request</h3>
<div class="code-block">
<pre>
curl -X POST http://localhost:8000/api/predict \
-H "Content-Type: application/json" \
-d '{
"prompt": "Kiedyś tak było",
"n": 4,
"temperature": 1.2,
"length": 20
}'</pre
>
</div>
<h3>Example Response</h3>
<div class="code-block">
<pre>
{
"prediction": "przezroczyste, że prawie ich dostrzec nie mógł. Słysząc bowiem tyle o jej egzystencji. Zaiste z pogardą arcykapłańskich święceń i źle traktujesz sługi boże."
}</pre
>
</div>
<h3>JavaScript Example</h3>
<div class="code-block">
<pre>
const response = await fetch('/api/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
prompt: 'Kiedyś tak było',
n: 3,
temperature: 0.8,
length: 15
})
});
const data = await response.json();
console.log(data.prediction);</pre
>
</div>
<h3>Python Example</h3>
<div class="code-block">
<pre>
import requests
response = requests.post('http://localhost:8000/api/predict',
json={
'prompt': 'Kiedyś tak było',
'n': 4,
'temperature': 1.0,
'length': 25
}
)
result = response.json()
print(result['prediction'])</pre
>
</div>
</div>
<div class="section">
<h2>Model Parameters</h2>
<h3>N-gram Size (n)</h3>
<p>
Controls the context window size. Higher values use more
context words to predict the next word:
</p>
<ul style="line-height: 1.8; color: var(--foreground)">
<li>
<strong>n=2 (Bigram):</strong> Uses 1 previous word for
context. Very creative but less coherent.
</li>
<li>
<strong>n=3 (Trigram):</strong> Uses 2 previous words.
Balanced creativity and coherence.
</li>
<li>
<strong>n=4 (Tetragram):</strong> Uses 3 previous words.
More coherent, less random.
</li>
<li>
<strong>n=5 (Pentagram):</strong> Uses 4 previous words.
Most coherent, closest to training data.
</li>
</ul>
<h3>Temperature</h3>
<p>Controls the randomness of predictions:</p>
<ul style="line-height: 1.8; color: var(--foreground)">
<li>
<strong>Low (0.1-0.5):</strong> More deterministic,
picks most likely words.
</li>
<li>
<strong>Medium (0.6-1.0):</strong> Balanced between
predictability and creativity.
</li>
<li>
<strong>High (1.1-2.0):</strong> More random and
creative, may produce unexpected results.
</li>
</ul>
</div>
<div class="section">
<h2>Error Handling</h2>
<p>The API returns standard HTTP status codes:</p>
<ul style="line-height: 1.8; color: var(--foreground)">
<li><strong>200 OK:</strong> Request successful</li>
<li>
<strong>422 Unprocessable Entity:</strong> Invalid
request parameters
</li>
<li>
<strong>500 Internal Server Error:</strong> Server error
</li>
</ul>
</div>
</div>
</body>
</html>

25
ui/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kreatyw</title> <title>Kreatyw</title>
<link rel="stylesheet" href="/ui/style.css" /> <link rel="stylesheet" href="/ui/style.css?v=2" />
<link rel="icon" type="image/x-icon" href="/ui/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/ui/favicon.ico" />
@@ -144,31 +144,12 @@
id="editor" id="editor"
spellcheck="false" spellcheck="false"
autofocus autofocus
placeholder="Start writing something poetic..." placeholder="Start typing here..."
></textarea> ></textarea>
<button
id="accept-suggestion-btn"
class="btn-floating"
title="Accept Suggestion"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
</div> </div>
</div> </div>
</main> </main>
</div> </div>
<script src="/ui/script.js"></script> <script src="/ui/script.js?v=2"></script>
</body> </body>
</html> </html>

129
ui/script.js
View File

@@ -1,23 +1,21 @@
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener('DOMContentLoaded', () => { const editor = document.getElementById("editor");
const editor = document.getElementById('editor'); const suggestionOverlay = document.getElementById("suggestion-overlay");
const suggestionOverlay = document.getElementById('suggestion-overlay'); const status = document.getElementById("status");
const status = document.getElementById('status'); const statusIndicator = document.querySelector(".status-indicator");
const statusIndicator = document.querySelector('.status-indicator');
// Controls // Controls
const nGramSelect = document.getElementById('n-gram'); const nGramSelect = document.getElementById("n-gram");
const nValDisplay = document.getElementById('n-val'); const nValDisplay = document.getElementById("n-val");
const tempInput = document.getElementById('temperature'); const tempInput = document.getElementById("temperature");
const tempValDisplay = document.getElementById('temp-val'); const tempValDisplay = document.getElementById("temp-val");
const lengthInput = document.getElementById('length'); const lengthInput = document.getElementById("length");
const lengthValDisplay = document.getElementById('length-val'); const lengthValDisplay = document.getElementById("length-val");
const generateBtn = document.getElementById('generate-more-btn'); const generateBtn = document.getElementById("generate-more-btn");
const sidebarToggle = document.getElementById('sidebar-toggle'); const sidebarToggle = document.getElementById("sidebar-toggle");
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById("sidebar");
const acceptSuggestionBtn = document.getElementById('accept-suggestion-btn');
let currentSuggestion = ''; let currentSuggestion = "";
let isFetching = false; let isFetching = false;
let debounceTimer; let debounceTimer;
@@ -29,37 +27,35 @@ document.addEventListener('DOMContentLoaded', () => {
lengthValDisplay.textContent = lengthInput.value; lengthValDisplay.textContent = lengthInput.value;
}; };
sidebarToggle.addEventListener('click', () => { sidebarToggle.addEventListener("click", () => {
sidebar.classList.toggle('open'); sidebar.classList.toggle("open");
}); });
const closeSidebarOnMobile = () => { const closeSidebarOnMobile = () => {
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
sidebar.classList.remove('open'); sidebar.classList.remove("open");
} }
}; };
tempInput.addEventListener('input', updateUI); tempInput.addEventListener("input", updateUI);
lengthInput.addEventListener('input', updateUI); lengthInput.addEventListener("input", updateUI);
nGramSelect.addEventListener('change', () => { nGramSelect.addEventListener("change", () => {
updateUI(); updateUI();
triggerUpdate(); triggerUpdate();
}); });
const triggerUpdate = () => { const triggerUpdate = () => {
currentSuggestion = ''; currentSuggestion = "";
updateSuggestion(); updateSuggestion();
const prompt = editor.value; const prompt = editor.value;
if (prompt.trim().length > 0) fetchPrediction(prompt); if (prompt.trim().length > 0) fetchPrediction(prompt);
}; };
tempInput.addEventListener('change', () => { tempInput.addEventListener("change", () => {
triggerUpdate(); triggerUpdate();
// Optional: close sidebar on change if on mobile
// closeSidebarOnMobile();
}); });
lengthInput.addEventListener('change', () => { lengthInput.addEventListener("change", () => {
triggerUpdate(); triggerUpdate();
}); });
@@ -69,59 +65,73 @@ document.addEventListener('DOMContentLoaded', () => {
if (isFetching) return; if (isFetching) return;
isFetching = true; isFetching = true;
status.textContent = 'Thinking...'; status.textContent = "Thinking...";
statusIndicator.classList.add('fetching'); if (statusIndicator) statusIndicator.classList.add("fetching");
const n = parseInt(nGramSelect.value); const n = parseInt(nGramSelect.value);
const temperature = parseFloat(tempInput.value); const temperature = parseFloat(tempInput.value);
const length = customLength || parseInt(lengthInput.value); const length = customLength || parseInt(lengthInput.value);
try { try {
const response = await fetch('/api/predict', { const response = await fetch("/api/predict", {
method: 'POST', method: "POST",
headers: { 'Content-Type': 'application/json' }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, n, temperature, length }), body: JSON.stringify({ prompt, n, temperature, length }),
}); });
if (!response.ok) throw new Error('Network response failed'); if (!response.ok) throw new Error("Network response failed");
const data = await response.json(); const data = await response.json();
if (customLength) { if (customLength) {
insertText(data.prediction || ''); insertText(data.prediction || "");
} else { } else {
currentSuggestion = data.prediction || ''; currentSuggestion = data.prediction || "";
updateSuggestion(); updateSuggestion();
} }
} catch (error) { } catch (error) {
console.error('Prediction failed:', error); console.error("Prediction failed:", error);
status.textContent = 'Error'; status.textContent = "Error: " + error.message;
} finally { } finally {
isFetching = false; isFetching = false;
status.textContent = 'Idle'; status.textContent = "Idle";
statusIndicator.classList.remove('fetching'); if (statusIndicator) statusIndicator.classList.remove("fetching");
} }
}; };
const updateSuggestion = () => { const updateSuggestion = () => {
const editorText = editor.value; suggestionOverlay.innerHTML = "";
const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
suggestionOverlay.textContent = editorText + space + currentSuggestion; const editorText = editor.value;
const space = editorText.length > 0 && !/\s$/.test(editorText) ? " " : "";
// Create invisible text span to match editor content exactly
const textSpan = document.createElement("span");
textSpan.textContent = editorText + space;
textSpan.style.color = "transparent";
suggestionOverlay.appendChild(textSpan);
// Show/hide accept button
if (currentSuggestion) { if (currentSuggestion) {
acceptSuggestionBtn.classList.add('visible'); const suggestionSpan = document.createElement("span");
} else { suggestionSpan.textContent = currentSuggestion;
acceptSuggestionBtn.classList.remove('visible'); suggestionSpan.className = "suggestion-highlight";
// Add Tab Icon (Better SVG for Tab Key)
const iconSpan = document.createElement("span");
iconSpan.style.pointerEvents = "none"; // Ensure clicks pass through to suggestionSpan
iconSpan.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><path d="M21 9V15"/><path d="M3 12H17"/><path d="m14 9 3 3-3 3"/></svg>`;
suggestionSpan.appendChild(iconSpan);
suggestionOverlay.appendChild(suggestionSpan);
} }
}; };
const insertText = (text) => { const insertText = (text) => {
if (!text) return; if (!text) return;
const space = (editor.value.length > 0 && !/\s$/.test(editor.value)) ? ' ' : ''; const space =
editor.value.length > 0 && !/\s$/.test(editor.value) ? " " : "";
editor.value += space + text; editor.value += space + text;
currentSuggestion = ''; currentSuggestion = "";
updateSuggestion(); updateSuggestion();
// Ensure the editor scrolls with content // Ensure the editor scrolls with content
@@ -130,9 +140,9 @@ document.addEventListener('DOMContentLoaded', () => {
// --- Event Handlers --- // --- Event Handlers ---
editor.addEventListener('input', () => { editor.addEventListener("input", () => {
clearTimeout(debounceTimer); clearTimeout(debounceTimer);
currentSuggestion = ''; currentSuggestion = "";
updateSuggestion(); updateSuggestion();
const prompt = editor.value; const prompt = editor.value;
@@ -140,29 +150,32 @@ document.addEventListener('DOMContentLoaded', () => {
debounceTimer = setTimeout(() => fetchPrediction(prompt), 300); debounceTimer = setTimeout(() => fetchPrediction(prompt), 300);
}); });
editor.addEventListener('keydown', (e) => { editor.addEventListener("keydown", (e) => {
if (e.key === 'Tab' && currentSuggestion) { if (e.key === "Tab" && currentSuggestion) {
e.preventDefault(); e.preventDefault();
insertText(currentSuggestion); insertText(currentSuggestion);
fetchPrediction(editor.value); fetchPrediction(editor.value);
} }
}); });
acceptSuggestionBtn.addEventListener('click', () => { // Handle click on suggestion
if (currentSuggestion) { suggestionOverlay.addEventListener("click", (e) => {
if (e.target.classList.contains("suggestion-highlight")) {
insertText(currentSuggestion); insertText(currentSuggestion);
fetchPrediction(editor.value); fetchPrediction(editor.value);
editor.focus(); editor.focus();
} }
}); });
generateBtn.addEventListener('click', () => { if (generateBtn) {
generateBtn.addEventListener("click", () => {
fetchPrediction(editor.value, 50); fetchPrediction(editor.value, 50);
closeSidebarOnMobile(); closeSidebarOnMobile();
}); });
}
// Sync scroll // Sync scroll
editor.addEventListener('scroll', () => { editor.addEventListener("scroll", () => {
suggestionOverlay.scrollTop = editor.scrollTop; suggestionOverlay.scrollTop = editor.scrollTop;
}); });

93
ui/style.css
View File

@@ -117,44 +117,6 @@ body {
} }
} }
/* Floating Action Button for Suggestions */
.btn-floating {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
display: none; /* Hidden by default, shown when suggestion exists */
align-items: center;
justify-content: center;
z-index: 10;
transition:
transform 0.2s,
opacity 0.2s;
}
.btn-floating:active {
transform: scale(0.95);
}
@media (max-width: 768px) {
.btn-floating.visible {
display: flex;
}
}
@media (min-width: 769px) {
.btn-floating.visible {
display: none;
}
}
.sidebar-header { .sidebar-header {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@@ -369,14 +331,14 @@ label {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
background-color: var(--card); background-color: var(--card);
overflow-y: auto; overflow: hidden;
} }
#editor, #editor,
#suggestion-overlay { #suggestion-overlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 2rem; padding: 2rem 2rem 10rem 2rem;
font-family: "SF Mono", "Fira Code", monospace; font-family: "SF Mono", "Fira Code", monospace;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
@@ -391,7 +353,7 @@ label {
@media (max-width: 768px) { @media (max-width: 768px) {
#editor, #editor,
#suggestion-overlay { #suggestion-overlay {
padding: 1rem; padding: 1rem 1rem 10rem 1rem;
font-size: 1rem; font-size: 1rem;
} }
} }
@@ -402,14 +364,59 @@ label {
color: var(--foreground); color: var(--foreground);
outline: none; outline: none;
resize: none; resize: none;
overflow-y: scroll;
}
#editor::-webkit-scrollbar {
width: 16px;
}
#editor::-webkit-scrollbar-thumb {
background-color: var(--muted);
border: 4px solid var(--card);
border-radius: 8px;
}
#editor::-webkit-scrollbar-track {
background-color: transparent;
} }
#suggestion-overlay { #suggestion-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 3;
color: var(--muted-foreground); color: transparent;
pointer-events: none; pointer-events: none;
opacity: 0.5; opacity: 0.5;
overflow: hidden;
overflow-y: scroll;
}
#suggestion-overlay::-webkit-scrollbar {
width: 16px; /* Width must match standard scrollbar width to align text */
background: transparent;
}
#suggestion-overlay::-webkit-scrollbar-thumb {
background: transparent;
}
.suggestion-highlight {
color: var(--muted-foreground);
cursor: pointer;
pointer-events: auto;
}
.tab-icon {
display: inline-block;
width: 1.8em;
height: 1.2em;
vertical-align: middle;
margin-left: 0.5em;
opacity: 0.8;
border: 1px solid var(--muted-foreground);
border-radius: 4px;
padding: 2px;
pointer-events: none;
} }