horus/test.html at main · arshlibruh-code/horus · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Testing</title>
    <style>
        body {
            font-family: monospace;
            background: #1a1a1a;
            color: #00ff00;
            padding: 10px;
        }
        .test-section {
            margin: 10px 0;
            padding: 8px;
            border: 1px solid #333;
        }
        button {
            background: #333;
            color: #00ff00;
            border: 1px solid #555;
            margin: 2px;
            text-transform: uppercase;
            cursor: pointer;
        }
        button:hover {
            background: #555;
        }
        #output {
            background: #000;
            padding: 15px;
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>Module Testing Console</h1>

    <div class="test-section">
        <h3>Audio Module Tests</h3>
        <button onclick="testAudioGeneration()">Test Audio Generation</button>
        <button onclick="testMultipleAudio()">Test Multiple Audio</button>
    </div>

    <div class="test-section">
        <h3>AI Map Control Tests</h3>
        <button onclick="testAIResponse()">Test AI Response (Paris)</button>
        <button onclick="testDifferentLocations()">Test Different Locations</button>
        <button onclick="testIcelandGrid()">Test Iceland Grid (100 points)</button>
        <button onclick="testIcelandSmallGrid()">Test Iceland Small Grid (5x5)</button>
        <button onclick="testPolygonsAndLines()">Test Polygons and Lines</button>
        <button onclick="testVideoAndImage()">Test Video and Image</button>
    </div>

    <div class="test-section">
        <h3>Complete Workflow</h3>
        <button onclick="testCompleteWorkflow()">Test Complete Workflow</button>
        <button onclick="clearOutput()">Clear Output</button>
    </div>

    <div id="output"></div>

    <!-- Map Container for Testing -->
    <div class="test-section">
        <h3>Map Container (for testing)</h3>
        <div id="mapbox-container" style="width: 100%; height: 40vh; background: #333; border: 1px solid #555; margin: 10px 0;"></div>
        <button onclick="initTestMap()">Initialize Test Map</button>
        <button onclick="destroyTestMap()">Destroy Test Map</button>
    </div>

    <!-- Load dependencies -->
    <script src="config.js"></script>

    <!-- Load modules (no hardcoded duplicates) -->
    <script src="audio.js"></script>
    <script src="ai.js"></script>
    <script src="map-lego.js"></script>
    <script src="map-ai.js"></script>

    <script>
        // Override console.log to show in our output div
        const originalLog = console.log;
        const originalError = console.error;
        const output = document.getElementById('output');

        function addToOutput(message, type = 'log') {
            const div = document.createElement('div');
            div.style.color = type === 'error' ? '#ff4444' : '#00ff00';
            div.textContent = message;
            output.appendChild(div);
            output.scrollTop = output.scrollHeight;
        }

        console.log = function(...args) {
            originalLog.apply(console, args);
            addToOutput(args.join(' '));
        };

        console.error = function(...args) {
            originalError.apply(console, args);
            addToOutput(args.join(' '), 'error');
        };

        // Test functions

        async function testAudioGeneration() {
            console.log('\n=== TESTING AUDIO GENERATION ===');
            try {
                const testText = 'Hello there!';
                const voiceId = AudioModule.voices.liam;
                const agent = 'liam';
                console.log('Generating audio for:', testText);
                const audioBuffer = await AudioModule.generateSpeech(testText, voiceId, agent);
                console.log('Audio buffer generated, size:', audioBuffer.byteLength, 'bytes');

                // Test playback
                console.log('Starting audio playback...');
                await AudioModule.playAudio(audioBuffer);
                console.log('Audio playback completed!');
            } catch (error) {
                console.error('Error:', error.message);
            }
        }

        async function testMultipleAudio() {
            console.log('\n=== TESTING MULTIPLE AUDIO ===');
            try {
                const sentences = [
                    '[deep inhale] hey hey heyyyyy there! How you doing motherfucker! [breaths] Ready when you are! [breathes] [phew], [clap] Lets do this! [phew] [humming] [humming] [breathing] [humming] [breathing] [humming] [quite] [humming] [hmm hmm hmm hmmmmmm] [humming continous] [confused] koi input daal na bhai, aise kaise chalega [sighs] '
                ];
                const voiceId = AudioModule.voices.liam;
                const agent = 'liam';
                console.log('Generating audio for', sentences.length, 'sentences with emotional tags (5 at a time)');
                console.log('Sentences:', sentences);

                // Use streaming audio playback for optimal performance
                console.log('Starting streaming audio playback...');
                await AudioModule.streamingAudioPlayback(sentences, voiceId, agent);
                console.log('Streaming audio playback completed!');
            } catch (error) {
                console.error('Error:', error.message);
            }
        }

        async function testCompleteWorkflow() {
            console.log('\n=== TESTING COMPLETE WORKFLOW (NEW AI) - 3 COMPLEXITY LEVELS ===');

            const testCases = [
                { input: 'hey there', complexity: 'BASIC' },
                { input: 'explain how machine learning works', complexity: 'MEDIUM' },
                { input: 'describe the detailed process of photosynthesis including light-dependent and light-independent reactions', complexity: 'COMPLEX' }
            ];

            try {
                for (let i = 0; i < testCases.length; i++) {
                    const { input, complexity } = testCases[i];
                    console.log(`\n--- TEST ${i + 1}/3: ${complexity} COMPLEXITY ---`);
                    console.log('User Input:', input);

                    // Step 1: Get AI response using new airesponse.js
                    console.log('Step 1: Getting AI response...');
                    const aiResponse = await AI.getAIResponse(input);
                    console.log('AI Response:', aiResponse);

                    // Step 2: Split into sentences for audio
                    console.log('Step 2: Splitting into sentences...');
                    const sentences = aiResponse.split('\n').filter(line => line.trim().startsWith('-')).map(line => line.trim().substring(2));
                    console.log('Sentences:', sentences);

                    // Step 3: Generate and play audio with streaming
                    console.log('Step 3: Starting streaming audio playback...');
                    const voiceId = 'TX3LPaxmHKxFdv7VOQHJ';
                    const agent = 'liam';

                    await AudioModule.streamingAudioPlayback(
                        sentences,
                        voiceId,
                        agent
                    );
                    console.log(`${complexity} test completed!`);
                }

                console.log('\n=== ALL TESTS COMPLETE ===');
                console.log('Complete workflow test successful!');

            } catch (error) {
                console.error('Error:', error.message);
            }
        }

        function clearOutput() {
            output.innerHTML = '';
        }

        // Test AI Mapbox Code Processing
        function testAIMapboxCode() {
            console.log('=== TESTING AI MAPBOX CODE PROCESSING ===');

            const testResponses = [
                'MAPBOX:flyTo:[2.3522,48.8566,12]', // Paris with zoom
                'MAPBOX:flyTo:[139.6917,35.6895,11]', // Tokyo with zoom
                'MAPBOX:flyTo:[-74.0060,40.7128,10]', // New York with zoom
                'no mapbox code here',
                'MAPBOX:flyTo:[0,0,0.8]' // Reset to globe
            ];

            testResponses.forEach((response, index) => {
                console.log(`Test ${index + 1}: "${response}"`);
                const result = processAIResponse(response);
                console.log(`Result: ${result ? 'Map action triggered' : 'No map action'}`);
            });

            console.log('=== AI MAPBOX CODE PROCESSING TESTS COMPLETE ===');
        }

        // Test Map Functions
        let testMapInstance = null;

        function initTestMap() {
            console.log('=== INITIALIZING TEST MAP ===');
            try {
                if (typeof MapContainer !== 'undefined') {
                    console.log('MapContainer available, initializing...');
                    MapContainer.init();
                    console.log('Test map initialized successfully!');

                    // Test map connection after a delay
                    setTimeout(() => {
                        if (window.mapInstance) {
                            console.log('✅ Map instance is globally accessible!');
                            console.log('Map center:', window.mapInstance.getCenter());
                            console.log('Map zoom:', window.mapInstance.getZoom());
                        } else {
                            console.log('❌ Map instance not globally accessible');
                        }
                    }, 2000);
                } else {
                    console.log('MapContainer not available, creating mock map...');
                    const mapContainer = document.getElementById('mapbox-container');
                    mapContainer.innerHTML = '<div style="color: #00ff00; text-align: center; padding: 50px;">Mock Map Container<br/>MapBox would load here</div>';
                    console.log('Mock map container created');
                }
            } catch (error) {
                console.error('Error initializing test map:', error);
            }
        }

        function destroyTestMap() {
            console.log('=== DESTROYING TEST MAP ===');
            try {
                if (typeof MapContainer !== 'undefined' && MapContainer.destroy) {
                    MapContainer.destroy();
                    console.log('Test map destroyed successfully!');
                } else {
                    const mapContainer = document.getElementById('mapbox-container');
                    mapContainer.innerHTML = '';
                    console.log('Mock map container cleared');
                }
            } catch (error) {
                console.error('Error destroying test map:', error);
            }
        }

        // Auto-run basic tests on load
        window.addEventListener('load', () => {
            console.log('Module Testing Console Loaded');
            console.log('Click buttons to run tests');

            // Initialize audio player for testing
            if (typeof AudioModule !== 'undefined') {
                AudioModule.initAudioPlayer();
            }

            // Auto-initialize test map
            setTimeout(() => {
                console.log('Auto-initializing test map...');
                initTestMap();
            }, 1000);
        });
    </script>

    <!-- Audio Player UI (hidden for testing) -->
    <div id="audioPlayer" style="display: none;">
        <button id="replayBtn">▶</button>
        <div class="audio-progress">
            <div id="progressBar"></div>
        </div>
    </div>
</body>
</html>