final_test.html•7.85 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Connection Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255,255,255,0.1);
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(10px);
}
h1 { text-align: center; margin-bottom: 30px; }
button {
background: #28a745;
color: white;
border: none;
padding: 15px 30px;
margin: 10px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
button:hover { background: #218838; transform: translateY(-2px); }
.result {
margin: 15px 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); }
.status {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.status-card {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 10px;
text-align: center;
}
.icon { font-size: 48px; margin-bottom: 10px; }
pre { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 5px; overflow-x: auto; }
</style>
</head>
<body>
<div class="container">
<h1>🎯 Final Connection Test</h1>
<p style="text-align: center;">Testing BlackHole Core MCP Frontend-Backend Connection</p>
<div class="status">
<div class="status-card">
<div class="icon">🚀</div>
<h3>Server</h3>
<div id="serverStatus">Testing...</div>
</div>
<div class="status-card">
<div class="icon">🗄️</div>
<h3>Database</h3>
<div id="dbStatus">Testing...</div>
</div>
<div class="status-card">
<div class="icon">🌐</div>
<h3>Connection</h3>
<div id="connectionStatus">Testing...</div>
</div>
</div>
<div style="text-align: center;">
<button onclick="runFullTest()">🧪 Run Full Test</button>
<button onclick="testUpload()">📄 Test Upload</button>
<button onclick="clearResults()">🗑️ Clear</button>
</div>
<div id="results"></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 = `
<strong>${new Date().toLocaleTimeString()}: ${message}</strong>
${details ? `<pre>${details}</pre>` : ''}
`;
results.appendChild(div);
}
function updateStatus(elementId, status, message) {
const element = document.getElementById(elementId);
element.innerHTML = `<div class="${status}">${message}</div>`;
}
function clearResults() {
document.getElementById('results').innerHTML = '';
}
async function runFullTest() {
addResult('🚀 Starting comprehensive connection test...', 'info');
try {
// Test 1: Basic connection
addResult('1️⃣ Testing basic connection...', 'info');
const response = await fetch('http://localhost:8000/api/health');
if (response.ok) {
const data = await response.json();
addResult('✅ Connection successful!', 'success',
`Status: ${response.status}\n` +
`MongoDB: ${data.mongodb}\n` +
`Timestamp: ${data.timestamp}`
);
updateStatus('serverStatus', 'success', '✅ Online');
updateStatus('dbStatus', 'success', `✅ ${data.mongodb}`);
updateStatus('connectionStatus', 'success', '✅ Working');
// Test 2: API endpoints
addResult('2️⃣ Testing API endpoints...', 'info');
await testEndpoints();
} else {
addResult('❌ Connection failed!', 'error', `HTTP ${response.status}`);
updateStatus('serverStatus', 'error', '❌ Error');
updateStatus('connectionStatus', 'error', '❌ Failed');
}
} catch (error) {
addResult('❌ Connection error!', 'error', error.message);
updateStatus('serverStatus', 'error', '❌ Offline');
updateStatus('connectionStatus', 'error', '❌ Failed');
}
}
async function testEndpoints() {
const endpoints = [
{ name: 'Health', url: '/api/health' },
{ name: 'Test', url: '/api/test' },
{ name: 'Results', url: '/api/results' }
];
for (const endpoint of endpoints) {
try {
const response = await fetch(`http://localhost:8000${endpoint.url}`);
if (response.ok) {
addResult(`✅ ${endpoint.name} endpoint working`, 'success');
} else {
addResult(`❌ ${endpoint.name} endpoint failed`, 'error', `Status: ${response.status}`);
}
} catch (error) {
addResult(`❌ ${endpoint.name} endpoint error`, 'error', error.message);
}
}
}
async function testUpload() {
addResult('📄 Testing file upload...', 'info');
try {
const formData = new FormData();
formData.append('file', new Blob(['Final test file content'], { type: 'text/plain' }), 'final-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 successful!', 'success', JSON.stringify(data, null, 2));
} else {
addResult('❌ File upload failed!', 'error', `Status: ${response.status}`);
}
} catch (error) {
addResult('❌ File upload error!', 'error', error.message);
}
}
// Auto-run test on page load
window.addEventListener('load', function() {
setTimeout(runFullTest, 1000);
});
</script>
</body>
</html>