Files
Kreatyw/ui/api.html
2026-01-09 00:47:49 +01:00

391 lines
13 KiB
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>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>