API page
This commit is contained in:
12
api.py
12
api.py
@@ -23,8 +23,8 @@ MODEL_CACHE = {}
|
||||
# --- Pydantic Models ---
|
||||
class PredictRequest(BaseModel):
|
||||
prompt: str
|
||||
temperature: float = 0.7
|
||||
n: int = 3
|
||||
temperature: float = 1.6
|
||||
n: int = 4
|
||||
length: int = 5
|
||||
|
||||
|
||||
@@ -84,6 +84,14 @@ async def predict(request: PredictRequest):
|
||||
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 ---
|
||||
app.mount("/ui", StaticFiles(directory=UI_DIR), name="ui")
|
||||
|
||||
|
||||
395
ui/api.html
Normal file
395
ui/api.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!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" />
|
||||
<link rel="icon" type="image/x-icon" href="/ui/favicon.ico" />
|
||||
<style>
|
||||
.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>http://localhost:8000</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": "Once upon a time",
|
||||
"n": 4,
|
||||
"temperature": 1.2,
|
||||
"length": 20
|
||||
}'</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<h3>Example Response</h3>
|
||||
<div class="code-block">
|
||||
<pre>
|
||||
{
|
||||
"prediction": "in a kingdom far away there lived a brave knight who sought adventure..."
|
||||
}</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: 'The old wizard',
|
||||
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': 'In the beginning',
|
||||
'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 class="section">
|
||||
<h2>Rate Limits</h2>
|
||||
<p>
|
||||
Currently, there are no rate limits imposed on the API. For
|
||||
production use, consider implementing appropriate rate
|
||||
limiting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user