NeuralNetwork/debug.html at main · yajatnarayan/NeuralNetwork · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OCR Debug</title>
    <style>
        body { font-family: monospace; padding: 20px; }
        .log { background: #f0f0f0; padding: 10px; margin: 10px 0; border-left: 3px solid #333; }
        .error { border-left-color: #f00; background: #fee; }
        .success { border-left-color: #0f0; background: #efe; }
        button { padding: 10px 20px; margin: 5px; font-size: 16px; }
    </style>
</head>
<body>
    <h1>OCR Debug Console</h1>

    <div>
        <button onclick="testGetWeights()">Test getWeights Endpoint</button>
        <button onclick="testVisualization()">Test Visualization Rendering</button>
        <button onclick="clearLogs()">Clear Logs</button>
    </div>

    <div id="logs"></div>

    <svg id="test-viz" width="600" height="300" style="border: 1px solid #ccc; margin: 20px 0; display: block;">
    </svg>

    <script>
        function log(message, type = 'log') {
            const div = document.createElement('div');
            div.className = 'log ' + type;
            div.textContent = new Date().toISOString().substr(11, 8) + ' - ' + message;
            document.getElementById('logs').appendChild(div);
            console.log(message);
        }

        function clearLogs() {
            document.getElementById('logs').innerHTML = '';
        }

        function testGetWeights() {
            log('Testing getWeights endpoint...');

            fetch('http://localhost:8000/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ getWeights: true })
            })
            .then(response => {
                log('Response status: ' + response.status, response.ok ? 'success' : 'error');
                return response.json();
            })
            .then(data => {
                log('Response type: ' + data.type, 'success');
                log('Hidden nodes: ' + data.hiddenNodes, 'success');
                log('Theta1 shape: ' + data.theta1.length + 'x' + data.theta1[0].length, 'success');
                log('Theta2 shape: ' + data.theta2.length + 'x' + data.theta2[0].length, 'success');

                // Test rendering
                testVisualization(data);
            })
            .catch(error => {
                log('ERROR: ' + error.message, 'error');
            });
        }

        function testVisualization(weightsData) {
            if (!weightsData) {
                log('Getting weights first...');
                testGetWeights();
                return;
            }

            log('Testing SVG rendering...');

            const svg = document.getElementById('test-viz');
            svg.innerHTML = '';

            // Draw simple test
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', 100);
            circle.setAttribute('cy', 100);
            circle.setAttribute('r', 50);
            circle.setAttribute('fill', '#4CAF50');
            svg.appendChild(circle);

            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', 200);
            text.setAttribute('y', 100);
            text.setAttribute('font-size', '20');
            text.textContent = 'SVG Rendering Works!';
            svg.appendChild(text);

            log('SVG test complete - check above', 'success');

            if (weightsData) {
                // Draw actual network
                log('Drawing network with ' + weightsData.hiddenNodes + ' hidden nodes');

                // Simple network visualization
                for (let i = 0; i < weightsData.hiddenNodes; i++) {
                    const y = 50 + (i * 200 / weightsData.hiddenNodes);
                    const node = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                    node.setAttribute('cx', 300);
                    node.setAttribute('cy', y);
                    node.setAttribute('r', 5);
                    node.setAttribute('fill', '#2196F3');
                    svg.appendChild(node);
                }

                log('Drew ' + weightsData.hiddenNodes + ' nodes', 'success');
            }
        }

        // Auto-run on load
        window.onload = function() {
            log('Page loaded. Click "Test getWeights Endpoint" to start.');
        };
    </script>
</body>
</html>