index.html•10 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenAI Code Assistant MCP Server</title>
<link rel="stylesheet" href="/static/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h1>OpenAI Code Assistant MCP Server</h1>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Status</div>
<div class="stat-value" style="color: #27ae60;">{{ status }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Uptime</div>
<div class="stat-value">{{ uptime }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Requests Served</div>
<div class="stat-value">{{ request_count }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Cache Hit Ratio</div>
<div class="stat-value">{{ cache_hit_ratio }}%</div>
</div>
</div>
<div class="card">
<div class="card-header">System Status</div>
<div class="card-body">
<canvas id="requestsChart" height="100"></canvas>
</div>
</div>
<h2>Available Models</h2>
<div class="card">
<div class="card-body">
<div class="template-grid">
{% for model in models %}
<div class="stat-card">
<div class="stat-label">Model</div>
<div class="stat-value" style="font-size: 20px;">{{ model }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
<h2>Available Prompt Templates</h2>
<div class="template-grid">
{% for template in templates %}
<div class="card">
<div class="card-header">{{ template.id }}</div>
<div class="card-body">
<p><strong>Description:</strong> {{ template.description }}</p>
{% if template.parameters %}
<p><strong>Parameters:</strong></p>
<ul class="parameter-list">
{% for param in template.parameters %}
<li>{{ param }}</li>
{% endfor %}
</ul>
{% else %}
<p><em>No parameters required</em></p>
{% endif %}
<p><strong>Default Model:</strong> <span class="tag">{{ template.default_model }}</span></p>
<div style="margin-top: 15px;">
<button class="btn btn-primary" onclick="testTemplate('{{ template.id }}')">Test Template</button>
</div>
</div>
</div>
{% endfor %}
</div>
<h2>API Documentation</h2>
<div class="card">
<div class="card-body">
<p>Explore the API using the interactive documentation:</p>
<a href="/docs" class="btn btn-primary">Swagger UI</a>
<a href="/redoc" class="btn btn-secondary">ReDoc</a>
<a href="/metrics" class="btn btn-info">Prometheus Metrics</a>
</div>
</div>
<div class="footer">
<p>OpenAI Code Assistant MCP Server © 2025</p>
</div>
</div>
<!-- Template Test Modal -->
<div id="templateModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;">
<div style="background-color: white; margin: 10% auto; padding: 20px; width: 80%; max-width: 600px; border-radius: 8px;">
<h3 id="modalTitle">Test Template</h3>
<div id="modalContent">
<div id="parameterInputs"></div>
<div style="margin-top: 20px;">
<button class="btn btn-primary" onclick="submitTemplateTest()">Generate Context</button>
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
</div>
</div>
<div id="resultContent" style="display: none; margin-top: 20px;">
<h4>Generated Context:</h4>
<pre id="contextResult" style="background-color: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto;"></pre>
<button class="btn btn-secondary" onclick="closeResults()">Close</button>
</div>
</div>
</div>
<script>
// Sample data for the chart - in a real implementation, this would come from the server
const ctx = document.getElementById('requestsChart').getContext('2d');
const requestsChart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({length: 12}, (_, i) => `${i*5} min ago`).reverse(),
datasets: [{
label: 'Requests',
data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 5, 3],
borderColor: '#3498db',
tension: 0.1,
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Template testing functionality
let currentTemplate = '';
function testTemplate(templateId) {
currentTemplate = templateId;
document.getElementById('modalTitle').textContent = `Test Template: ${templateId}`;
document.getElementById('parameterInputs').innerHTML = '';
document.getElementById('resultContent').style.display = 'none';
// Fetch template details
fetch(`/prompts/${templateId}`)
.then(response => response.json())
.then(template => {
const parametersDiv = document.getElementById('parameterInputs');
// Create input fields for each parameter
for (const [paramName, paramInfo] of Object.entries(template.parameters)) {
const paramDiv = document.createElement('div');
paramDiv.style.marginBottom = '15px';
const label = document.createElement('label');
label.textContent = `${paramName}: ${paramInfo.description || ''}`;
label.style.display = 'block';
label.style.marginBottom = '5px';
const input = document.createElement('input');
input.type = 'text';
input.id = `param-${paramName}`;
input.style.width = '100%';
input.style.padding = '8px';
input.style.borderRadius = '4px';
input.style.border = '1px solid #ddd';
paramDiv.appendChild(label);
paramDiv.appendChild(input);
parametersDiv.appendChild(paramDiv);
}
// Show the modal
document.getElementById('templateModal').style.display = 'block';
})
.catch(error => {
console.error('Error fetching template:', error);
alert('Error fetching template details');
});
}
function submitTemplateTest() {
// Collect parameter values
const parameters = {};
const inputs = document.querySelectorAll('[id^="param-"]');
inputs.forEach(input => {
const paramName = input.id.replace('param-', '');
parameters[paramName] = input.value;
});
// Call the context API
fetch('/context', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
prompt_id: currentTemplate,
parameters: parameters
})
})
.then(response => response.json())
.then(data => {
// Display the result
document.getElementById('contextResult').textContent = data.context;
document.getElementById('modalContent').style.display = 'none';
document.getElementById('resultContent').style.display = 'block';
})
.catch(error => {
console.error('Error generating context:', error);
alert('Error generating context');
});
}
function closeModal() {
document.getElementById('templateModal').style.display = 'none';
}
function closeResults() {
document.getElementById('resultContent').style.display = 'none';
document.getElementById('modalContent').style.display = 'block';
closeModal();
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('templateModal');
if (event.target === modal) {
closeModal();
}
}
</script>
</body>
</html>