Skip to content

V
vidai
Commit c7dd7b3c authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Modernize API documentation pages with colorful, professional styling 

- Added gradient headers with icons for both API docs
- Implemented card-based layout for endpoints
- Added color-coded method badges and parameter styling
- Enhanced code blocks with syntax highlighting colors
- Added responsive design for mobile devices
- Included FontAwesome icons for better visual hierarchy
- Used consistent color schemes (green for user API, red for admin API)
parent d02443dc
Show whitespace changes
Inline Side-by-side
Showing with 654 additions and 107 deletions
templates/admin_api.html
View file @ c7dd7b3c
...@@ -2,83 +2,370 @@ ...@@ -2,83 +2,370 @@
{% block title %}Admin API Documentation{% endblock %} {% block title %}Admin API Documentation{% endblock %}
{% block head %}
<style>
.api-header {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: white;
padding: 3rem 0;
margin-top: -1rem;
margin-bottom: 2rem;
}
.api-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.api-header .lead {
font-size: 1.25rem;
opacity: 0.9;
}
.endpoint-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
border: 1px solid #e5e7eb;
margin-bottom: 2rem;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.endpoint-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.endpoint-header {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.endpoint-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.endpoint-header .method {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
margin-right: 1rem;
}
.endpoint-content {
padding: 1.5rem;
}
.endpoint-description {
color: #6b7280;
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.6;
}
.params-section h4,
.curl-section h4,
.response-section h4 {
color: #374151;
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.params-list {
background: #f8fafc;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.param-item {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.param-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.param-name {
font-weight: 600;
color: #dc2626;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.param-type {
color: #059669;
font-size: 0.875rem;
margin-left: 0.5rem;
}
.param-desc {
color: #6b7280;
margin-top: 0.25rem;
}
.code-block {
background: #1f2937;
color: #f9fafb;
border-radius: 8px;
padding: 1rem;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.code-block .token {
color: #60a5fa;
}
.auth-notice {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border: 1px solid #ef4444;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.auth-notice .alert-icon {
color: #dc2626;
font-size: 1.5rem;
margin-right: 0.75rem;
}
.auth-notice strong {
color: #991b1b;
}
.auth-notice p {
color: #7f1d1d;
margin: 0;
}
@media (max-width: 768px) {
.api-header h1 {
font-size: 2rem;
}
.endpoint-card {
margin-bottom: 1.5rem;
}
.endpoint-header {
padding: 1rem;
}
.endpoint-content {
padding: 1rem;
}
}
</style>
{% endblock %}
{% block content %} {% block content %}
<div class="container mt-4"> <div class="api-header">
<h1>Admin API Documentation</h1> <div class="container">
<p class="lead">Administrative API endpoints for system management.</p> <h1><i class="fas fa-crown"></i> Admin API Documentation</h1>
<p class="lead">Administrative API endpoints for system management</p>
<div class="alert alert-warning"> </div>
<strong>Authentication:</strong> All endpoints require admin authentication via login session or admin API token (Bearer token in Authorization header). </div>
</div>
<div class="container">
<h2>Endpoints</h2> <div class="auth-notice">
<div class="d-flex align-items-start">
<div class="endpoint" id="browse"> <i class="fas fa-exclamation-triangle alert-icon"></i>
<h3>GET /admin/api/browse</h3> <div>
<p>Browse files in the configured server directory.</p> <strong>Admin Authentication Required</strong>
<h4>Parameters:</h4> <p>All endpoints require admin authentication via login session or admin API token (Bearer token in Authorization header).</p>
<ul> </div>
<li><code>path</code> (string, optional): Directory path to browse (default: root)</li> </div>
</ul> </div>
<h4>Curl Example:</h4>
<pre><code>curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" "{{ request.host_url }}admin/api/browse?path=/some/path"</code></pre> <div class="row">
<h4>Response:</h4> <div class="col-12">
<pre><code>{ <div class="endpoint-card" id="browse">
<div class="endpoint-header">
<span class="method">GET</span>
<h3>/admin/api/browse</h3>
</div>
<div class="endpoint-content">
<p class="endpoint-description">
<i class="fas fa-folder-open text-info"></i>
Browse files and directories in the configured server directory for administrative purposes.
</p>
<div class="params-section">
<h4><i class="fas fa-cogs"></i> Parameters</h4>
<div class="params-list">
<div class="param-item">
<span class="param-name">path</span>
<span class="param-type">string (optional)</span>
<div class="param-desc">Directory path to browse (default: root directory)</div>
</div>
</div>
</div>
<div class="curl-section">
<h4><i class="fas fa-terminal"></i> Curl Example</h4>
<div class="code-block">curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" \
"{{ request.host_url }}admin/api/browse?path=/some/path"</div>
</div>
<div class="response-section">
<h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"current_path": "/some/path", "current_path": "/some/path",
"items": [ "items": [
{"name": "file.txt", "path": "/some/path/file.txt", "is_dir": false, "size": 1024} {
"name": "file.txt",
"path": "/some/path/file.txt",
"is_dir": false,
"size": 1024
}
] ]
}</code></pre> }</div>
</div> </div>
</div>
<div class="endpoint" id="train"> </div>
<h3>POST /admin/api/train</h3>
<p>Start model training. Costs 100 tokens (free for admins).</p> <div class="endpoint-card" id="train">
<h4>Parameters:</h4> <div class="endpoint-header">
<ul> <span class="method">POST</span>
<li><code>output_model</code> (string, optional): Output model name (default: "MyCustomModel")</li> <h3>/admin/api/train</h3>
<li><code>description</code> (string, optional): Model description</li> </div>
<li><code>train_path</code> (string, required): Path to training data directory</li> <div class="endpoint-content">
</ul> <p class="endpoint-description">
<h4>Curl Example:</h4> <i class="fas fa-graduation-cap text-success"></i>
<pre><code>curl -X POST -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" -H "Content-Type: application/json" -d '{ Start AI model training process. Costs 100 tokens (free for admins).
</p>
<div class="params-section">
<h4><i class="fas fa-cogs"></i> Parameters</h4>
<div class="params-list">
<div class="param-item">
<span class="param-name">output_model</span>
<span class="param-type">string (optional)</span>
<div class="param-desc">Name for the trained model (default: "MyCustomModel")</div>
</div>
<div class="param-item">
<span class="param-name">description</span>
<span class="param-type">string (optional)</span>
<div class="param-desc">Description of the model</div>
</div>
<div class="param-item">
<span class="param-name">train_path</span>
<span class="param-type">string (required)</span>
<div class="param-desc">Path to the training data directory</div>
</div>
</div>
</div>
<div class="curl-section">
<h4><i class="fas fa-terminal"></i> Curl Example</h4>
<div class="code-block">curl -X POST -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"output_model": "MyModel", "output_model": "MyModel",
"description": "Custom trained model", "description": "Custom trained model",
"train_path": "/path/to/training/data" "train_path": "/path/to/training/data"
}' {{ request.host_url }}admin/api/train</code></pre> }' {{ request.host_url }}admin/api/train</div>
<h4>Response:</h4> </div>
<pre><code>{
<div class="response-section">
<h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"message": "Training completed", "message": "Training completed",
"tokens_used": 100, "tokens_used": 100,
"remaining_tokens": 900 "remaining_tokens": 900
}</code></pre> }</div>
</div>
</div>
</div>
<div class="endpoint-card" id="users">
<div class="endpoint-header">
<span class="method">GET</span>
<h3>/admin/api/users</h3>
</div> </div>
<div class="endpoint-content">
<p class="endpoint-description">
<i class="fas fa-users text-primary"></i>
Retrieve a complete list of all users in the system for administrative management.
</p>
<div class="endpoint" id="users"> <div class="curl-section">
<h3>GET /admin/api/users</h3> <h4><i class="fas fa-terminal"></i> Curl Example</h4>
<p>List all users in the system.</p> <div class="code-block">curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" \
<h4>Curl Example:</h4> {{ request.host_url }}admin/api/users</div>
<pre><code>curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" {{ request.host_url }}admin/api/users</code></pre> </div>
<h4>Response:</h4>
<pre><code>{ <div class="response-section">
<h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"users": [ "users": [
{"id": 1, "username": "user1", "email": "user1@example.com", "role": "user", "tokens": 100, "active": true, "created_at": "2024-01-01T00:00:00Z"} {
"id": 1,
"username": "user1",
"email": "user1@example.com",
"role": "user",
"tokens": 100,
"active": true,
"created_at": "2024-01-01T00:00:00Z"
}
] ]
}</code></pre> }</div>
</div>
</div>
</div> </div>
<div class="endpoint" id="cluster_tokens"> <div class="endpoint-card" id="cluster_tokens">
<h3>GET /admin/api/cluster_tokens</h3> <div class="endpoint-header">
<p>List all cluster tokens.</p> <span class="method">GET</span>
<h4>Curl Example:</h4> <h3>/admin/api/cluster_tokens</h3>
<pre><code>curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" {{ request.host_url }}admin/api/cluster_tokens</code></pre> </div>
<h4>Response:</h4> <div class="endpoint-content">
<pre><code>{ <p class="endpoint-description">
<i class="fas fa-network-wired text-warning"></i>
List all cluster tokens for distributed processing management.
</p>
<div class="curl-section">
<h4><i class="fas fa-terminal"></i> Curl Example</h4>
<div class="code-block">curl -H "Authorization: Bearer YOUR_ADMIN_API_TOKEN" \
{{ request.host_url }}admin/api/cluster_tokens</div>
</div>
<div class="response-section">
<h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"tokens": [ "tokens": [
{"id": 1, "name": "Worker Token", "token": "abc123...", "active": true, "created_at": "2024-01-01T00:00:00Z"} {
"id": 1,
"name": "Worker Token",
"token": "abc123...",
"active": true,
"created_at": "2024-01-01T00:00:00Z"
}
] ]
}</code></pre> }</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
templates/api.html
View file @ c7dd7b3c
...@@ -2,70 +2,330 @@ ...@@ -2,70 +2,330 @@
{% block title %}API Documentation{% endblock %} {% block title %}API Documentation{% endblock %}
{% block head %}
<style>
.api-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 0;
margin-top: -1rem;
margin-bottom: 2rem;
}
.api-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.api-header .lead {
font-size: 1.25rem;
opacity: 0.9;
}
.endpoint-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
border: 1px solid #e5e7eb;
margin-bottom: 2rem;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.endpoint-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.endpoint-header {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.endpoint-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.endpoint-header .method {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
margin-right: 1rem;
}
.endpoint-content {
padding: 1.5rem;
}
.endpoint-description {
color: #6b7280;
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.6;
}
.params-section h4,
.curl-section h4,
.response-section h4 {
color: #374151;
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.params-list {
background: #f8fafc;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.param-item {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.param-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.param-name {
font-weight: 600;
color: #667eea;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.param-type {
color: #059669;
font-size: 0.875rem;
margin-left: 0.5rem;
}
.param-desc {
color: #6b7280;
margin-top: 0.25rem;
}
.code-block {
background: #1f2937;
color: #f9fafb;
border-radius: 8px;
padding: 1rem;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.code-block .token {
color: #60a5fa;
}
.auth-notice {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.auth-notice .alert-icon {
color: #d97706;
font-size: 1.5rem;
margin-right: 0.75rem;
}
.auth-notice strong {
color: #92400e;
}
.auth-notice p {
color: #78350f;
margin: 0;
}
@media (max-width: 768px) {
.api-header h1 {
font-size: 2rem;
}
.endpoint-card {
margin-bottom: 1.5rem;
}
.endpoint-header {
padding: 1rem;
}
.endpoint-content {
padding: 1rem;
}
}
</style>
{% endblock %}
{% block content %} {% block content %}
<div class="container mt-4"> <div class="api-header">
<h1>API Documentation</h1> <div class="container">
<p class="lead">Programmatic access to Video AI functionality.</p> <h1><i class="fas fa-code"></i> API Documentation</h1>
<p class="lead">Programmatic access to Video AI functionality</p>
</div>
</div>
<div class="alert alert-info"> <div class="container">
<strong>Authentication:</strong> All endpoints require authentication via login session or API token (Bearer token in Authorization header). <div class="auth-notice">
<div class="d-flex align-items-start">
<i class="fas fa-shield-alt alert-icon"></i>
<div>
<strong>Authentication Required</strong>
<p>All endpoints require authentication via login session or API token (Bearer token in Authorization header).</p>
</div>
</div> </div>
</div>
<div class="row">
<div class="col-12">
<div class="endpoint-card" id="stats">
<div class="endpoint-header">
<span class="method">GET</span>
<h3>/api/stats</h3>
</div>
<div class="endpoint-content">
<p class="endpoint-description">
<i class="fas fa-chart-bar text-success"></i>
Get real-time system statistics including CPU usage, RAM consumption, and GPU information.
</p>
<h2>Endpoints</h2> <div class="curl-section">
<h4><i class="fas fa-terminal"></i> Curl Example</h4>
<div class="code-block">curl -H "Authorization: Bearer YOUR_API_TOKEN" {{ request.host_url }}api/stats</div>
</div>
<div class="endpoint" id="stats"> <div class="response-section">
<h3>GET /api/stats</h3> <h4><i class="fas fa-reply"></i> Response</h4>
<p>Get system statistics including CPU, RAM, and GPU information.</p> <div class="code-block">{
<h4>Curl Example:</h4>
<pre><code>curl -H "Authorization: Bearer YOUR_API_TOKEN" {{ request.host_url }}api/stats</code></pre>
<h4>Response:</h4>
<pre><code>{
"status": "Idle", "status": "Idle",
"gpu_count": 1, "gpu_count": 1,
"gpus": [{"name": "NVIDIA RTX 3080", "memory_used": 0.5, "memory_total": 10.0, "utilization": 0}], "gpus": [
{
"name": "NVIDIA RTX 3080",
"memory_used": 0.5,
"memory_total": 10.0,
"utilization": 0
}
],
"cpu_percent": 15.2, "cpu_percent": 15.2,
"ram_used": 4.2, "ram_used": 4.2,
"ram_total": 16.0 "ram_total": 16.0
}</code></pre> }</div>
</div> </div>
</div>
<div class="endpoint" id="analyze"> </div>
<h3>POST /api/analyze</h3>
<p>Perform media analysis using AI models. Costs 10 tokens (free for admins).</p> <div class="endpoint-card" id="analyze">
<h4>Parameters:</h4> <div class="endpoint-header">
<ul> <span class="method">POST</span>
<li><code>model_path</code> (string, optional): Model to use (default: "Qwen/Qwen2.5-VL-7B-Instruct")</li> <h3>/api/analyze</h3>
<li><code>prompt</code> (string, optional): Analysis prompt (default: "Describe this image.")</li> </div>
<li><code>file_path</code> (string, required): Path to media file</li> <div class="endpoint-content">
<li><code>interval</code> (int, optional): Frame interval for video (default: 10)</li> <p class="endpoint-description">
</ul> <i class="fas fa-brain text-primary"></i>
<h4>Curl Example:</h4> Perform AI-powered media analysis using advanced language models. Costs 10 tokens (free for admins).
<pre><code>curl -X POST -H "Authorization: Bearer YOUR_API_TOKEN" -H "Content-Type: application/json" -d '{ </p>
<div class="params-section">
<h4><i class="fas fa-cogs"></i> Parameters</h4>
<div class="params-list">
<div class="param-item">
<span class="param-name">model_path</span>
<span class="param-type">string (optional)</span>
<div class="param-desc">AI model to use (default: "Qwen/Qwen2.5-VL-7B-Instruct")</div>
</div>
<div class="param-item">
<span class="param-name">prompt</span>
<span class="param-type">string (optional)</span>
<div class="param-desc">Analysis prompt (default: "Describe this image.")</div>
</div>
<div class="param-item">
<span class="param-name">file_path</span>
<span class="param-type">string (required)</span>
<div class="param-desc">Path to the media file to analyze</div>
</div>
<div class="param-item">
<span class="param-name">interval</span>
<span class="param-type">integer (optional)</span>
<div class="param-desc">Frame sampling interval for videos (default: 10)</div>
</div>
</div>
</div>
<div class="curl-section">
<h4><i class="fas fa-terminal"></i> Curl Example</h4>
<div class="code-block">curl -X POST -H "Authorization: Bearer YOUR_API_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"model_path": "Qwen/Qwen2.5-VL-7B-Instruct", "model_path": "Qwen/Qwen2.5-VL-7B-Instruct",
"prompt": "Describe this video", "prompt": "Describe this video",
"file_path": "/path/to/video.mp4", "file_path": "/path/to/video.mp4",
"interval": 30 "interval": 30
}' {{ request.host_url }}api/analyze</code></pre> }' {{ request.host_url }}api/analyze</div>
<h4>Response:</h4> </div>
<pre><code>{
<div class="response-section">
<h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"result": "Analysis result here...", "result": "Analysis result here...",
"tokens_used": 10, "tokens_used": 10,
"remaining_tokens": 90 "remaining_tokens": 90
}</code></pre> }</div>
</div>
</div>
</div>
<div class="endpoint-card" id="api_tokens">
<div class="endpoint-header">
<span class="method">GET</span>
<h3>/api/api_tokens</h3>
</div> </div>
<div class="endpoint-content">
<p class="endpoint-description">
<i class="fas fa-key text-warning"></i>
Retrieve a list of your active API tokens for programmatic access.
</p>
<div class="endpoint" id="api_tokens"> <div class="curl-section">
<h3>GET /api/api_tokens</h3> <h4><i class="fas fa-terminal"></i> Curl Example</h4>
<p>List your API tokens.</p> <div class="code-block">curl -H "Authorization: Bearer YOUR_API_TOKEN" {{ request.host_url }}api/api_tokens</div>
<h4>Curl Example:</h4> </div>
<pre><code>curl -H "Authorization: Bearer YOUR_API_TOKEN" {{ request.host_url }}api/api_tokens</code></pre>
<h4>Response:</h4> <div class="response-section">
<pre><code>{ <h4><i class="fas fa-reply"></i> Response</h4>
<div class="code-block">{
"tokens": [ "tokens": [
{"id": 1, "name": "My Token", "created_at": "2024-01-01T00:00:00Z", "last_used": null} {
"id": 1,
"name": "My Token",
"created_at": "2024-01-01T00:00:00Z",
"last_used": null
}
] ]
}</code></pre> }</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment