Select Git revision
developer-mode.html
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>