debug.html•10.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔧 BlackHole Core MCP - Debug Console</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255,255,255,0.1);
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(10px);
}
.test-section {
background: rgba(255,255,255,0.1);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
}
.result {
margin: 10px 0;
padding: 15px;
border-radius: 8px;
font-family: monospace;
}
.success { background: rgba(40, 167, 69, 0.8); }
.error { background: rgba(220, 53, 69, 0.8); }
.info { background: rgba(23, 162, 184, 0.8); }
.warning { background: rgba(255, 193, 7, 0.8); color: #000; }
button {
background: #28a745;
color: white;
border: none;
padding: 12px 24px;
margin: 8px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
button:hover { background: #218838; transform: translateY(-2px); }
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.status-card {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 10px;
text-align: center;
}
.status-icon { font-size: 48px; margin-bottom: 10px; }
pre {
background: rgba(0,0,0,0.3);
padding: 15px;
border-radius: 8px;
overflow-x: auto;
white-space: pre-wrap;
}
h1, h2 { text-align: center; margin-bottom: 30px; }
.timestamp { font-size: 12px; opacity: 0.8; }
</style>
</head>
<body>
<div class="container">
<h1>🔧 BlackHole Core MCP - Debug Console</h1>
<p style="text-align: center; font-size: 18px;">Comprehensive Frontend-Backend Connection Diagnostics</p>
<div class="status-grid">
<div class="status-card">
<div class="status-icon">🚀</div>
<h3>Server Status</h3>
<div id="serverStatus">Testing...</div>
</div>
<div class="status-card">
<div class="status-icon">🗄️</div>
<h3>Database Status</h3>
<div id="dbStatus">Testing...</div>
</div>
<div class="status-card">
<div class="status-icon">🌐</div>
<h3>CORS Status</h3>
<div id="corsStatus">Testing...</div>
</div>
<div class="status-card">
<div class="status-icon">📄</div>
<h3>API Status</h3>
<div id="apiStatus">Testing...</div>
</div>
</div>
<div class="test-section">
<h2>🧪 Manual Tests</h2>
<button onclick="testHealth()">Test Health Endpoint</button>
<button onclick="testCORS()">Test CORS Headers</button>
<button onclick="testFileUpload()">Test File Upload</button>
<button onclick="testAllEndpoints()">Test All Endpoints</button>
<button onclick="clearResults()">Clear Results</button>
</div>
<div class="test-section">
<h2>📊 Test Results</h2>
<div id="results"></div>
</div>
<div class="test-section">
<h2>🔍 System Information</h2>
<div id="systemInfo"></div>
</div>
</div>
<script>
function addResult(message, type = 'info', details = '') {
const results = document.getElementById('results');
const div = document.createElement('div');
div.className = `result ${type}`;
div.innerHTML = `
<div class="timestamp">${new Date().toLocaleTimeString()}</div>
<strong>${message}</strong>
${details ? `<pre>${details}</pre>` : ''}
`;
results.insertBefore(div, results.firstChild);
}
function clearResults() {
document.getElementById('results').innerHTML = '';
}
function updateStatus(elementId, status, message) {
const element = document.getElementById(elementId);
element.innerHTML = `<div class="${status}">${message}</div>`;
}
async function testHealth() {
addResult('🔍 Testing Health Endpoint...', 'info');
try {
const response = await fetch('http://localhost:8000/api/health', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
const data = await response.json();
if (response.ok) {
addResult('✅ Health Check SUCCESS', 'success', JSON.stringify(data, null, 2));
updateStatus('serverStatus', 'success', '✅ Online');
updateStatus('dbStatus', 'success', `✅ ${data.mongodb}`);
} else {
addResult('❌ Health Check FAILED', 'error', `Status: ${response.status}`);
updateStatus('serverStatus', 'error', '❌ Error');
}
} catch (error) {
addResult('❌ Health Check ERROR', 'error', error.message);
updateStatus('serverStatus', 'error', '❌ Offline');
}
}
async function testCORS() {
addResult('🌐 Testing CORS Headers...', 'info');
try {
const response = await fetch('http://localhost:8000/api/health', {
method: 'OPTIONS'
});
const corsHeaders = {
'Access-Control-Allow-Origin': response.headers.get('access-control-allow-origin'),
'Access-Control-Allow-Methods': response.headers.get('access-control-allow-methods'),
'Access-Control-Allow-Headers': response.headers.get('access-control-allow-headers')
};
addResult('✅ CORS Headers Retrieved', 'success', JSON.stringify(corsHeaders, null, 2));
updateStatus('corsStatus', 'success', '✅ Configured');
} catch (error) {
addResult('❌ CORS Test FAILED', 'error', error.message);
updateStatus('corsStatus', 'error', '❌ Failed');
}
}
async function testFileUpload() {
addResult('📄 Testing File Upload...', 'info');
try {
const formData = new FormData();
formData.append('file', new Blob(['Debug test file'], { type: 'text/plain' }), 'debug-test.txt');
formData.append('enable_llm', 'false');
formData.append('save_to_db', 'true');
const response = await fetch('http://localhost:8000/api/process-document', {
method: 'POST',
body: formData
});
if (response.ok) {
const data = await response.json();
addResult('✅ File Upload SUCCESS', 'success', JSON.stringify(data, null, 2));
updateStatus('apiStatus', 'success', '✅ Working');
} else {
addResult('❌ File Upload FAILED', 'error', `Status: ${response.status}`);
updateStatus('apiStatus', 'error', '❌ Failed');
}
} catch (error) {
addResult('❌ File Upload ERROR', 'error', error.message);
updateStatus('apiStatus', 'error', '❌ Error');
}
}
async function testAllEndpoints() {
addResult('🔄 Testing All Endpoints...', 'info');
const endpoints = [
{ name: 'Health', url: '/api/health', method: 'GET' },
{ name: 'Test', url: '/api/test', method: 'GET' },
{ name: 'Results', url: '/api/results', method: 'GET' }
];
for (const endpoint of endpoints) {
try {
const response = await fetch(`http://localhost:8000${endpoint.url}`, {
method: endpoint.method
});
if (response.ok) {
addResult(`✅ ${endpoint.name} Endpoint`, 'success', `Status: ${response.status}`);
} else {
addResult(`❌ ${endpoint.name} Endpoint`, 'error', `Status: ${response.status}`);
}
} catch (error) {
addResult(`❌ ${endpoint.name} Endpoint`, 'error', error.message);
}
}
}
function showSystemInfo() {
const info = {
'User Agent': navigator.userAgent,
'Current URL': window.location.href,
'Protocol': window.location.protocol,
'Host': window.location.host,
'Backend URL': 'http://localhost:8000',
'Timestamp': new Date().toISOString()
};
document.getElementById('systemInfo').innerHTML = `<pre>${JSON.stringify(info, null, 2)}</pre>`;
}
// Auto-run tests on page load
window.addEventListener('load', function() {
addResult('🚀 Starting Automatic Diagnostics...', 'info');
showSystemInfo();
setTimeout(() => {
testHealth();
}, 1000);
setTimeout(() => {
testCORS();
}, 2000);
});
</script>
</body>
</html>