Skip to content
Snippets Groups Projects
Select Git revision
  • aa23ad901d3580a76b909ccc0e3a0ec1f8585d65
  • main default protected
  • kokoro-tts
  • test_save_2
  • enhance_ui
  • some_test_result
  • cv_stream
  • fixing-demo
  • object-detection
  • people-following
  • CompVision
  • fixing-response
  • v2-8th-may-backup
  • ui_updates
  • refactor
  • servo
  • fine-tuning-v1
  • v1-2nd-may-backup
  • motor_fix_attempt
  • decision_tree_based
  • improving_behaviour
21 results

developer-mode.html

Blame
  • developer-mode.html 5.98 KiB
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Developer Mode</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/developer-mode.css') }}">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    </head>
    <body class="developer-mode">
        <div class="dev-container">
            <div class="dev-header">
                <div class="dev-title">Robot Developer Interface</div>
                <div id="cloud-toggle-container"></div>
                <div class="nav-buttons">
                    <button id="home-button" class="mode-switch">Home</button>
                    <button id="mode-switch" class="mode-switch">Robot Mode</button>
                </div>
            </div>
            
            <div class="dev-robot-display">
                <h3>Robot State</h3>
                <div id="kaomoji" class="kaomoji">(・ω・)</div>
                <div class="servo-display">
                    <div class="servo-info pca">
                        <div>Left Ear</div>
                        <div id="ear-left">0</div>
                    </div>
                    <div class="servo-info pca">
                        <div>Right Ear</div>
                        <div id="ear-right">0</div>
                    </div>
                    <div class="servo-info pca">
                        <div>Left Arm</div>
                        <div id="arm-left">0</div>
                    </div>
                    <div class="servo-info pca">
                        <div>Right Arm</div>
                        <div id="arm-right">0</div>
                    </div>
                    <div class="servo-info pca">
                        <div>Tail</div>
                        <div id="tail">0</div>
                    </div>
                </div>
                <div id="robot-status">Robot state: idle</div>
            </div>
            
            <div class="dev-chat">
                <h3>Chat Interface</h3>
                
                <div class="controls">
                    <div class="model-selector">
                        <label for="model-select">LLM Model:</label>
                        <select id="model-select" class="model-dropdown">
                            <option value="loading">Loading models...</option>
                        </select>
                    </div>
                    
                    <button id="update-button" title="Toggle automatic state updates">Auto-Update</button>
                    <button id="test-button" title="Run servo test sequence">Test Servos</button>
                    <button id="reset-button" title="Reset servos to neutral position">Reset Position</button>
                </div>
                
                <div class="motor-controls">
                    <h4>Motor Controls</h4>
                    <button id="motor-forward" class="motor-button motor-forward">Forward</button>
                    <button id="motor-backward" class="motor-button motor-backward">Backward</button>
                    <button id="motor-left" class="motor-button motor-left">Left</button>
                    <button id="motor-right" class="motor-button motor-right">Right</button>
                    <button id="motor-stop" class="motor-button motor-stop">Stop</button>
                </div>
                
                <div class="input-container">
                    <input type="text" id="message" class="chat-input" placeholder="Type a message...">
                    <button id="send-button">Send</button>
                    <button id="voice-button">Voice Input</button>
                </div>
                
                <div id="error-message" class="error-message"></div>
                <div id="loading" class="loading">Processing...</div>
                
                <div id="conversation" class="history">
                    <h3>Conversation History</h3>
                    <div class="status">No conversation history yet.</div>
                </div>
            </div>
            
            <div class="dev-tools">
                <h3>Privacy Settings</h3>
                
                <div class="privacy-settings">
                    <div class="privacy-option">
                        <input type="checkbox" id="save-voice-input" checked>
                        <label for="save-voice-input">Save Voice Input</label>
                        <div class="option-description">
                            When enabled, recordings of your voice inputs will be saved.
                        </div>
                    </div>
                    
                    <div class="privacy-option">
                        <input type="checkbox" id="save-voice-output" checked>
                        <label for="save-voice-output">Save Voice Output</label>
                        <div class="option-description">
                            When enabled, audio files of robot responses will be saved.
                        </div>
                    </div>
                    
                    <div class="privacy-option">
                        <input type="checkbox" id="save-conversations" checked>
                        <label for="save-conversations">Save Conversation History</label>
                        <div class="option-description">
                            When enabled, text of all conversations will be logged.
                        </div>
                    </div>
                    
                    <div class="privacy-actions">
                        <button id="reset-privacy" class="secondary-button">Reset to Defaults</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Hidden audio player for TTS -->
        <audio id="audio-player" style="display: none;"></audio>
        
        <script src="{{ url_for('static', filename='js/api-service.js') }}"></script>
        <script src="{{ url_for('static', filename='js/ui-controller.js') }}"></script>
        <script src="{{ url_for('static', filename='js/developer-mode.js') }}"></script>
        <script src="{{ url_for('static', filename='js/cloud-toggle.js') }}"></script>
        <script>
        document.addEventListener('DOMContentLoaded', () => {
            const cloudToggle = new CloudToggle('cloud-toggle-container');
        });
        </script>
    </body>
    </html>