Add LLM endpoints, web frontend, and rate limiting config
- Added OpenAI-compatible LLM endpoints to API backend - Introduced web frontend with Jinja2 templates and static assets - Implemented API proxy routes in web service - Added sample db.json data for items, users, orders, reviews, categories, llm_requests - Updated ADC and Helm configs for separate AI and standard rate limiting - Upgraded FastAPI, Uvicorn, and added httpx, Jinja2, python-multipart dependencies - Added API configuration modal and client-side JS for web app
This commit is contained in:
d.viti
95
web/templates/base.html
Normal file
95
web/templates/base.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}API Demo{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-brand">
|
||||
<h2>🚀 API7EE Demo</h2>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/items">Items</a></li>
|
||||
<li><a href="/users">Users</a></li>
|
||||
<li><a href="/llm">LLM Chat</a></li>
|
||||
<li><a href="/api/docs" target="_blank">API Docs</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="openApiConfig(event)"
|
||||
>⚙️ API Config</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- API Configuration Modal -->
|
||||
<div id="api-config-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>⚙️ API Configuration</h2>
|
||||
<span class="close" onclick="closeApiConfig()"
|
||||
>×</span
|
||||
>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Configure the base URL for API requests:</p>
|
||||
<div class="form-group">
|
||||
<label for="api-base-url">API Base URL:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="api-base-url"
|
||||
placeholder="https://commandware.it/api"
|
||||
class="form-control"
|
||||
/>
|
||||
<small class="form-hint">
|
||||
Examples:
|
||||
<code>/api</code> (relative),
|
||||
<code>https://commandware.it/api</code> (absolute),
|
||||
<code>http://localhost:8001</code> (local)
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Current Configuration:</label>
|
||||
<div class="config-info">
|
||||
<strong>Base URL:</strong>
|
||||
<span id="current-api-url">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick="saveApiConfig()"
|
||||
>
|
||||
Save Configuration
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick="resetApiConfig()"
|
||||
>
|
||||
Reset to Default
|
||||
</button>
|
||||
<button class="btn" onclick="closeApiConfig()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">{% block content %}{% endblock %}</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 API7EE Demo | Powered by FastAPI & API7</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
86
web/templates/index.html
Normal file
86
web/templates/index.html
Normal file
@@ -0,0 +1,86 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Home - API Demo{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="hero">
|
||||
<h1>Welcome to API7EE Demo Platform</h1>
|
||||
<p class="subtitle">Explore our API services with real-time data and AI-powered features</p>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">📦</div>
|
||||
<h3>Items Management</h3>
|
||||
<p>Browse and manage products in our catalog</p>
|
||||
<a href="/items" class="btn btn-primary">View Items</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">👥</div>
|
||||
<h3>Users</h3>
|
||||
<p>Manage user accounts and profiles</p>
|
||||
<a href="/users" class="btn btn-primary">View Users</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">🤖</div>
|
||||
<h3>AI Chat (LLM)</h3>
|
||||
<p>Chat with our videogame expert AI assistant</p>
|
||||
<a href="/llm" class="btn btn-primary">Start Chat</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-icon">📚</div>
|
||||
<h3>API Documentation</h3>
|
||||
<p>Explore our OpenAPI/Swagger documentation</p>
|
||||
<a href="/api/docs" target="_blank" class="btn btn-primary">Open Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h2>Features</h2>
|
||||
<ul class="features-list">
|
||||
<li>✅ RESTful API with FastAPI</li>
|
||||
<li>✅ AI Rate Limiting (100 tokens/60s for LLM)</li>
|
||||
<li>✅ Standard Rate Limiting (100 req/60s per IP)</li>
|
||||
<li>✅ OpenAI-compatible LLM endpoint</li>
|
||||
<li>✅ Real-time data management</li>
|
||||
<li>✅ Swagger/OpenAPI documentation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-box">
|
||||
<h3 id="items-count">-</h3>
|
||||
<p>Total Items</p>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<h3 id="users-count">-</h3>
|
||||
<p>Active Users</p>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<h3>AI Ready</h3>
|
||||
<p>LLM Service</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Fetch stats from API
|
||||
fetch('/api/items')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
document.getElementById('items-count').textContent = data.length;
|
||||
})
|
||||
.catch(err => console.error('Error fetching items:', err));
|
||||
|
||||
fetch('/api/users')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
document.getElementById('users-count').textContent = data.length;
|
||||
})
|
||||
.catch(err => console.error('Error fetching users:', err));
|
||||
</script>
|
||||
{% endblock %}
|
||||
55
web/templates/items.html
Normal file
55
web/templates/items.html
Normal file
@@ -0,0 +1,55 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Items - API Demo{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>📦 Items Catalog</h1>
|
||||
<p>Browse all available products</p>
|
||||
</div>
|
||||
|
||||
<div id="items-container" class="items-grid">
|
||||
<div class="loading">Loading items...</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
|
||||
async function loadItems() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/items`);
|
||||
const items = await response.json();
|
||||
|
||||
const container = document.getElementById('items-container');
|
||||
container.innerHTML = items.map(item => `
|
||||
<div class="item-card ${!item.in_stock ? 'out-of-stock' : ''}">
|
||||
<div class="item-header">
|
||||
<h3>${item.name}</h3>
|
||||
<span class="badge ${item.in_stock ? 'badge-success' : 'badge-danger'}">
|
||||
${item.in_stock ? 'In Stock' : 'Out of Stock'}
|
||||
</span>
|
||||
</div>
|
||||
<p class="item-description">${item.description || 'No description'}</p>
|
||||
<div class="item-footer">
|
||||
<span class="price">$${item.price.toFixed(2)}</span>
|
||||
<button class="btn btn-sm" onclick="viewItem(${item.id})">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('Error loading items:', error);
|
||||
document.getElementById('items-container').innerHTML =
|
||||
'<div class="error">Failed to load items. Please try again.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function viewItem(id) {
|
||||
alert(`View item details for ID: ${id}\n\nAPI Endpoint: /api/items/${id}`);
|
||||
}
|
||||
|
||||
// Load items on page load
|
||||
loadItems();
|
||||
</script>
|
||||
{% endblock %}
|
||||
135
web/templates/llm.html
Normal file
135
web/templates/llm.html
Normal file
@@ -0,0 +1,135 @@
|
||||
{% extends "base.html" %} {% block title %}LLM Chat - API Demo{% endblock %} {%
|
||||
block content %}
|
||||
<div class="page-header">
|
||||
<h1>🤖 AI Chat - Videogame Expert</h1>
|
||||
<p>Chat with our AI assistant (Rate limited: 100 tokens/60s)</p>
|
||||
</div>
|
||||
|
||||
<div class="chat-container">
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="system-message">
|
||||
Welcome! Ask me anything about videogames. I'm powered by the
|
||||
videogame-expert model.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-container">
|
||||
<textarea
|
||||
id="chat-input"
|
||||
placeholder="Type your message here..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button id="send-btn" class="btn btn-primary" onclick="sendMessage()">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="chat-info">
|
||||
<small>
|
||||
Model: <strong>videogame-expert</strong> | Status:
|
||||
<span id="status">Ready</span> | Rate Limit:
|
||||
<strong>100 tokens/60s</strong>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %} {% block scripts %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
|
||||
<script>
|
||||
const API_BASE = "/api";
|
||||
let isProcessing = false;
|
||||
|
||||
function addMessage(content, isUser = false) {
|
||||
const messagesDiv = document.getElementById("chat-messages");
|
||||
const messageDiv = document.createElement("div");
|
||||
messageDiv.className = isUser ? "user-message" : "assistant-message";
|
||||
|
||||
if (isUser) {
|
||||
messageDiv.textContent = content;
|
||||
} else {
|
||||
// Parse markdown for assistant messages
|
||||
messageDiv.innerHTML = marked.parse(content);
|
||||
}
|
||||
|
||||
messagesDiv.appendChild(messageDiv);
|
||||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||||
}
|
||||
|
||||
function setStatus(text, isError = false) {
|
||||
const statusSpan = document.getElementById("status");
|
||||
statusSpan.textContent = text;
|
||||
statusSpan.style.color = isError ? "#f44336" : "#4CAF50";
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (isProcessing) return;
|
||||
|
||||
const input = document.getElementById("chat-input");
|
||||
const prompt = input.value.trim();
|
||||
|
||||
if (!prompt) {
|
||||
alert("Please enter a message");
|
||||
return;
|
||||
}
|
||||
|
||||
// Add user message
|
||||
addMessage(prompt, true);
|
||||
input.value = "";
|
||||
|
||||
// Set processing state
|
||||
isProcessing = true;
|
||||
document.getElementById("send-btn").disabled = true;
|
||||
setStatus("Processing...");
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/llm/chat`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
max_tokens: 150,
|
||||
temperature: 0.7,
|
||||
model: "videogame-expert",
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || "API request failed");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Add assistant response
|
||||
addMessage(data.response, false);
|
||||
|
||||
// Show tokens used
|
||||
const tokensInfo = `Tokens used: ${data.tokens_used}`;
|
||||
const infoDiv = document.createElement("div");
|
||||
infoDiv.className = "system-message";
|
||||
infoDiv.textContent = tokensInfo;
|
||||
document.getElementById("chat-messages").appendChild(infoDiv);
|
||||
|
||||
setStatus("Ready");
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
addMessage(`Error: ${error.message}`, false);
|
||||
setStatus("Error", true);
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
document.getElementById("send-btn").disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter to send (Shift+Enter for newline)
|
||||
document
|
||||
.getElementById("chat-input")
|
||||
.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
69
web/templates/users.html
Normal file
69
web/templates/users.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Users - API Demo{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>👥 Users</h1>
|
||||
<p>Manage user accounts</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-body">
|
||||
<tr>
|
||||
<td colspan="5" class="loading">Loading users...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/users`);
|
||||
const users = await response.json();
|
||||
|
||||
const tbody = document.getElementById('users-table-body');
|
||||
tbody.innerHTML = users.map(user => `
|
||||
<tr>
|
||||
<td>${user.id}</td>
|
||||
<td>${user.username}</td>
|
||||
<td>${user.email}</td>
|
||||
<td>
|
||||
<span class="badge ${user.active ? 'badge-success' : 'badge-danger'}">
|
||||
${user.active ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm" onclick="viewUser(${user.id})">View</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
document.getElementById('users-table-body').innerHTML =
|
||||
'<tr><td colspan="5" class="error">Failed to load users</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function viewUser(id) {
|
||||
alert(`View user details for ID: ${id}\n\nAPI Endpoint: /api/users/${id}`);
|
||||
}
|
||||
|
||||
loadUsers();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user