claude-flow-multilang
Version:
Revolutionary multilingual AI orchestration framework with cultural awareness and DDD architecture
221 lines (187 loc) • 6.33 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neural Networks Test Page</title>
<link rel="stylesheet" href="styles/console.css" />
<link rel="stylesheet" href="styles/neural-networks.css" />
<style>
body {
padding: 20px;
background: #1a1a1a;
color: #fff;
}
#testResults {
margin-top: 20px;
padding: 20px;
background: #0a0a0a;
border: 1px solid #333;
border-radius: 8px;
font-family: monospace;
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
}
.test-controls {
margin-bottom: 20px;
}
.test-button {
padding: 10px 20px;
margin-right: 10px;
background: #007acc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.test-button:hover {
background: #005a9e;
}
/* Mock console elements */
.header-right {
position: fixed;
top: 10px;
right: 10px;
display: flex;
gap: 10px;
}
.header-button {
padding: 8px 16px;
background: #333;
color: white;
border: 1px solid #555;
border-radius: 4px;
cursor: pointer;
}
.header-button:hover {
background: #444;
}
</style>
</head>
<body>
<h1>Neural Networks Dialog Test Page</h1>
<div class="test-controls">
<button class="test-button" onclick="runTests()">Run All Tests</button>
<button class="test-button" onclick="showPanel()">Show Neural Panel</button>
<button class="test-button" onclick="clearResults()">Clear Results</button>
</div>
<!-- Mock header controls -->
<div class="header-right" id="headerRight">
<!-- Neural toggle button will be added here -->
</div>
<!-- Test results area -->
<div id="testResults">Test results will appear here...</div>
<!-- Container for console main where panel will be added -->
<div class="console-main"></div>
<!-- Load test dependencies -->
<script type="module">
// Mock WebSocket client
class MockWebSocketClient {
constructor() {
this.listeners = {};
}
on(event, callback) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(callback);
}
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach((cb) => cb(data));
}
}
sendMessage(message) {
console.log('Mock WebSocket message:', message);
return Promise.resolve({ success: true, mock: true });
}
getStatus() {
return 'connected';
}
}
// Create mock WebSocket client
window.mockWsClient = new MockWebSocketClient();
// Import and initialize neural panel
import { NeuralNetworksPanel } from './js/neural-networks.js';
import { NeuralNetworksExtended } from './js/neural-networks-extended.js';
async function initializeNeuralPanel() {
try {
// Create neural panel
const neuralPanel = new NeuralNetworksPanel(window.mockWsClient);
await neuralPanel.init();
// Create extended functionality
const neuralExtended = new NeuralNetworksExtended(neuralPanel, window.mockWsClient);
// Make globally available
window.neuralPanel = {
panel: neuralPanel,
extended: neuralExtended,
};
console.log('Neural panel initialized successfully');
// Auto-show panel after initialization
setTimeout(() => {
neuralPanel.showPanel();
}, 500);
} catch (error) {
console.error('Failed to initialize neural panel:', error);
document.getElementById('testResults').textContent =
'Failed to initialize neural panel: ' + error.message;
}
}
// Initialize on load
window.addEventListener('load', initializeNeuralPanel);
</script>
<!-- Load test script -->
<script src="test-neural-networks.js"></script>
<script>
function runTests() {
document.getElementById('testResults').textContent = 'Running tests...\n';
if (window.testNeuralNetworks) {
window.testNeuralNetworks().then((report) => {
console.log('Test completed:', report);
});
} else {
document.getElementById('testResults').textContent = 'Test script not loaded properly!';
}
}
function showPanel() {
if (window.neuralPanel && window.neuralPanel.panel) {
window.neuralPanel.panel.showPanel();
} else {
alert('Neural panel not initialized yet!');
}
}
function clearResults() {
document.getElementById('testResults').textContent = 'Test results cleared.';
}
// Capture console output to display in results
const originalLog = console.log;
const originalError = console.error;
const originalWarn = console.warn;
console.log = function (...args) {
originalLog.apply(console, args);
const resultsDiv = document.getElementById('testResults');
if (resultsDiv) {
resultsDiv.textContent += args.join(' ') + '\n';
resultsDiv.scrollTop = resultsDiv.scrollHeight;
}
};
console.error = function (...args) {
originalError.apply(console, args);
const resultsDiv = document.getElementById('testResults');
if (resultsDiv) {
resultsDiv.textContent += '❌ ' + args.join(' ') + '\n';
resultsDiv.scrollTop = resultsDiv.scrollHeight;
}
};
console.warn = function (...args) {
originalWarn.apply(console, args);
const resultsDiv = document.getElementById('testResults');
if (resultsDiv) {
resultsDiv.textContent += '⚠️ ' + args.join(' ') + '\n';
resultsDiv.scrollTop = resultsDiv.scrollHeight;
}
};
</script>
</body>
</html>