mirror of
https://github.com/Significant-Gravitas/AutoModerate.git
synced 2026-11-10 04:42:00 -10:00
Bentlybro
604c469d39
Enhanced AI moderator to default to approval on malformed responses and apply a confidence threshold before rejecting content. Updated user registration to avoid detached session errors. Fixed project ID extraction in dashboard members JS. Removed cache-busting query parameters from static asset links in templates for more consistent asset loading.
481 lines
20 KiB
HTML
481 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}API Documentation - AutoModerate{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<link href="{{ url_for('static', filename='css/api/docs.css') }}" rel="stylesheet">
|
|
<script src="{{ url_for('static', filename='js/api/docs.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1><i class="fas fa-book"></i> API Documentation</h1>
|
|
<a href="{{ url_for('dashboard.index') }}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Sidebar Navigation -->
|
|
<div class="col-md-3">
|
|
<div class="card sticky-sidebar">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Quick Navigation</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<nav class="nav flex-column">
|
|
<a class="nav-link" href="#overview">Overview</a>
|
|
<a class="nav-link" href="#authentication">Authentication</a>
|
|
<a class="nav-link" href="#endpoints">Endpoints</a>
|
|
<a class="nav-link" href="#moderation">Content Moderation</a>
|
|
<a class="nav-link" href="#responses">Response Formats</a>
|
|
<a class="nav-link" href="#errors">Error Handling</a>
|
|
<a class="nav-link" href="#examples">Examples</a>
|
|
<a class="nav-link" href="#websockets">WebSocket Events</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-md-9">
|
|
<!-- Overview Section -->
|
|
<div class="card mb-4" id="overview">
|
|
<div class="card-header">
|
|
<h3>Overview</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The AutoModerate API provides programmatic access to content moderation services. All endpoints require authentication via API keys.</p>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Base URL:</strong> <code>{{ request.host_url.rstrip('/') }}/api</code>
|
|
</div>
|
|
|
|
<h5>Features:</h5>
|
|
<ul>
|
|
<li>Real-time content moderation</li>
|
|
<li>Custom rule-based filtering</li>
|
|
<li>AI-powered analysis</li>
|
|
<li>WebSocket real-time updates</li>
|
|
<li>Comprehensive response data</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication Section -->
|
|
<div class="card mb-4" id="authentication">
|
|
<div class="card-header">
|
|
<h3>Authentication</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>All API requests require authentication using an API key in the request headers.</p>
|
|
|
|
<h5>Header Format:</h5>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>X-API-Key: your-api-key-here</code></pre>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Getting Your API Key:</h5>
|
|
<ol>
|
|
<li>Go to your project dashboard</li>
|
|
<li>Navigate to "API Keys" section</li>
|
|
<li>Create a new API key</li>
|
|
<li>Copy the generated key (starts with <code>am_</code>)</li>
|
|
</ol>
|
|
|
|
<div class="alert alert-warning">
|
|
<strong>Security:</strong> Keep your API key secure and never share it publicly. API keys have full access to your project's moderation capabilities.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Endpoints Section -->
|
|
<div class="card mb-4" id="endpoints">
|
|
<div class="card-header">
|
|
<h3>API Endpoints</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Method</th>
|
|
<th>Endpoint</th>
|
|
<th>Description</th>
|
|
<th>Authentication</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="badge bg-success">POST</span></td>
|
|
<td><code>/api/moderate</code></td>
|
|
<td>Moderate content</td>
|
|
<td>Required</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="badge bg-info">GET</span></td>
|
|
<td><code>/api/health</code></td>
|
|
<td>Check API status</td>
|
|
<td>None</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="badge bg-info">GET</span></td>
|
|
<td><code>/api/docs</code></td>
|
|
<td>API documentation</td>
|
|
<td>None</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Moderation Section -->
|
|
<div class="card mb-4" id="moderation">
|
|
<div class="card-header">
|
|
<h3>Content Moderation</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>Endpoint: <code>POST /api/moderate</code></h5>
|
|
|
|
<h6>Request Body:</h6>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"type": "text",
|
|
"content": "Your content to moderate",
|
|
"metadata": {
|
|
"user_id": "user123",
|
|
"source": "web"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h6 class="mt-3">Parameters:</h6>
|
|
<ul>
|
|
<li><strong>type</strong> (string, required): Content type - "text", "image", "video"</li>
|
|
<li><strong>content</strong> (string, required): The content to moderate</li>
|
|
<li><strong>metadata</strong> (object, optional): Additional context about the content
|
|
<ul>
|
|
<li><strong>user_id</strong> (string, optional): External user identifier for tracking. If provided, moderation results and stats will be associated with this user. This enables per-user moderation history, approval rates, and analytics in the dashboard.</li>
|
|
<li><strong>source</strong> (string, optional): Source of the content (e.g., "web", "mobile")</li>
|
|
<li><strong>session_id</strong> (string, optional): Session identifier</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h6 class="mt-3">Example Request with user_id:</h6>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"type": "text",
|
|
"content": "Your content to moderate",
|
|
"metadata": {
|
|
"user_id": "user123",
|
|
"source": "web"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
<p class="mt-2 text-muted">Including <code>user_id</code> in the metadata enables user-specific moderation tracking, stats, and review in the dashboard.</p>
|
|
|
|
<h6>Response:</h6>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"success": true,
|
|
"content_id": "uuid-here",
|
|
"status": "approved|rejected|flagged",
|
|
"moderation_results": [
|
|
{
|
|
"decision": "rejected",
|
|
"confidence": 0.95,
|
|
"reason": "Content violates rule X",
|
|
"moderator_type": "rule",
|
|
"rule_id": "rule-uuid",
|
|
"rule_name": "Rule Name",
|
|
"processing_time": 1.23
|
|
}
|
|
]
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Response Formats Section -->
|
|
<div class="card mb-4" id="responses">
|
|
<div class="card-header">
|
|
<h3>Response Formats</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>Success Response:</h5>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"success": true,
|
|
"content_id": "uuid",
|
|
"status": "approved|rejected|flagged",
|
|
"moderation_results": [...],
|
|
"rule_matched": true,
|
|
"total_rules_checked": 5,
|
|
"fast_rules_checked": 2,
|
|
"ai_rules_checked": 3
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Error Response:</h5>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"error": "Error message here",
|
|
"success": false
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Status Values:</h5>
|
|
<ul>
|
|
<li><strong>approved</strong>: Content passed all moderation checks</li>
|
|
<li><strong>rejected</strong>: Content violated rules and was rejected</li>
|
|
<li><strong>flagged</strong>: Content needs human review</li>
|
|
<li><strong>pending</strong>: Content is being processed</li>
|
|
</ul>
|
|
|
|
<h5 class="mt-3">User Tracking:</h5>
|
|
<p>Include a <code>user_id</code> in the metadata to track individual users and their moderation history:</p>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"type": "text",
|
|
"content": "Content to moderate",
|
|
"metadata": {
|
|
"user_id": "user123",
|
|
"source": "web"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
<p>This enables:</p>
|
|
<ul>
|
|
<li>User-specific moderation statistics</li>
|
|
<li>Approval rate tracking per user</li>
|
|
<li>Historical content review</li>
|
|
<li>Pattern analysis for problematic users</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Handling Section -->
|
|
<div class="card mb-4" id="errors">
|
|
<div class="card-header">
|
|
<h3>Error Handling</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>Common HTTP Status Codes:</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Code</th>
|
|
<th>Description</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>200</td>
|
|
<td>Success</td>
|
|
<td>Content moderated successfully</td>
|
|
</tr>
|
|
<tr>
|
|
<td>400</td>
|
|
<td>Bad Request</td>
|
|
<td>Missing required fields</td>
|
|
</tr>
|
|
<tr>
|
|
<td>401</td>
|
|
<td>Unauthorized</td>
|
|
<td>Invalid or missing API key</td>
|
|
</tr>
|
|
<tr>
|
|
<td>403</td>
|
|
<td>Forbidden</td>
|
|
<td>API key disabled or expired</td>
|
|
</tr>
|
|
<tr>
|
|
<td>500</td>
|
|
<td>Internal Server Error</td>
|
|
<td>Server processing error</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Examples Section -->
|
|
<div class="card mb-4" id="examples">
|
|
<div class="card-header">
|
|
<h3>Code Examples</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Here are examples of how to integrate with the AutoModerate API using different programming languages and tools:</p>
|
|
|
|
<!-- Language Selector Buttons -->
|
|
<div class="mb-3">
|
|
<div class="btn-group" role="group" aria-label="Language selector">
|
|
<button type="button" class="btn btn-outline-success active" data-lang="python">
|
|
<i class="fab fa-python me-2"></i>Python
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary" data-lang="curl">
|
|
<i class="fas fa-terminal me-2"></i>cURL
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning" data-lang="javascript">
|
|
<i class="fab fa-js-square me-2"></i>JavaScript
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Examples -->
|
|
<div class="code-examples">
|
|
<!-- Python Example (shown by default) -->
|
|
<div class="code-example" data-lang="python" style="display: block;">
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>import requests
|
|
|
|
url = "http://your-domain.com/api/moderate"
|
|
headers = {
|
|
"Content-Type": "application/json",
|
|
"X-API-Key": "am_your-api-key-here"
|
|
}
|
|
data = {
|
|
"type": "text",
|
|
"content": "Hello world!",
|
|
"metadata": {"user": "test123"}
|
|
}
|
|
|
|
response = requests.post(url, headers=headers, json=data)
|
|
result = response.json()
|
|
print(result)</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- cURL Example -->
|
|
<div class="code-example" data-lang="curl" style="display: none;">
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>curl -X POST \
|
|
-H "Content-Type: application/json" \
|
|
-H "X-API-Key: am_your-api-key-here" \
|
|
-d '{
|
|
"type": "text",
|
|
"content": "Hello world!",
|
|
"metadata": {"user": "test123"}
|
|
}' \
|
|
http://your-domain.com/api/moderate</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript Example -->
|
|
<div class="code-example" data-lang="javascript" style="display: none;">
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>const response = await fetch('/api/moderate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-API-Key': 'am_your-api-key-here'
|
|
},
|
|
body: JSON.stringify({
|
|
type: 'text',
|
|
content: 'Hello world!',
|
|
metadata: { user: 'test123' }
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
console.log(result);</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WebSocket Section -->
|
|
<div class="card mb-4" id="websockets">
|
|
<div class="card-header">
|
|
<h3>WebSocket Real-time Updates</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Connect to WebSocket for real-time moderation updates:</p>
|
|
|
|
<h5>Connection:</h5>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>const socket = io('http://your-domain.com');
|
|
|
|
// Join project room
|
|
socket.emit('join_project', {project_id: 'your-project-id'});
|
|
|
|
// Listen for moderation updates
|
|
socket.on('moderation_update', function(data) {
|
|
console.log('New moderation result:', data);
|
|
});</code></pre>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Update Event Format:</h5>
|
|
<div class="code-container">
|
|
<pre class="code-block"><code>{
|
|
"content_id": "uuid",
|
|
"project_id": "project-uuid",
|
|
"status": "approved|rejected|flagged",
|
|
"content_type": "text",
|
|
"content_preview": "Content preview...",
|
|
"meta_data": {"user": "user123"},
|
|
"results_count": 3,
|
|
"processing_time": 1.23,
|
|
"timestamp": "2025-01-01T12:00:00Z"
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Event Fields:</h5>
|
|
<ul>
|
|
<li><strong>content_id</strong>: Unique identifier for the content</li>
|
|
<li><strong>project_id</strong>: Project the content belongs to</li>
|
|
<li><strong>status</strong>: Final moderation decision</li>
|
|
<li><strong>content_type</strong>: Type of content (text, image, video)</li>
|
|
<li><strong>content_preview</strong>: Truncated preview of the content</li>
|
|
<li><strong>meta_data</strong>: Additional metadata provided with the content</li>
|
|
<li><strong>results_count</strong>: Number of moderation results generated</li>
|
|
<li><strong>processing_time</strong>: Total processing time in seconds</li>
|
|
<li><strong>timestamp</strong>: When the content was processed</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rate Limiting Section -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h3>Rate Limiting & Best Practices</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>Rate Limits:</h5>
|
|
<ul>
|
|
<li>100 requests per minute per API key</li>
|
|
<li>1000 requests per hour per API key</li>
|
|
<li>Concurrent requests are supported</li>
|
|
</ul>
|
|
|
|
<h5 class="mt-3">Best Practices:</h5>
|
|
<ul>
|
|
<li>Store API keys securely</li>
|
|
<li>Use HTTPS in production</li>
|
|
<li>Implement proper error handling</li>
|
|
<li>Cache results when appropriate</li>
|
|
<li>Monitor your usage</li>
|
|
</ul>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Need Help?</strong> Check the dashboard for usage statistics and contact support if you need assistance.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|