lerobot/examples/openarms_web_interface/App.jsx

import { useState, useEffect, useCallback, useRef } from 'react';
import './App.css';

const API_BASE = 'http://localhost:8000/api';

function App() {
  // State
  const [task, setTask] = useState('');
  const [isRecording, setIsRecording] = useState(false);
  const [isInitializing, setIsInitializing] = useState(false);
  const [isEncoding, setIsEncoding] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [robotsReady, setRobotsReady] = useState(false);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [currentFps, setCurrentFps] = useState(0);
  const [episodeCount, setEpisodeCount] = useState(0);
  const [error, setError] = useState(null);
  const [statusMessage, setStatusMessage] = useState('Ready');
  const [uploadStatus, setUploadStatus] = useState(null);
  const [configExpanded, setConfigExpanded] = useState(false);

  // Configuration
  const [config, setConfig] = useState({
    leader_left: 'can0',
    leader_right: 'can1',
    follower_left: 'can2',
    follower_right: 'can3',
    left_wrist: '/dev/video0',
    right_wrist: '/dev/video1',
    base: '/dev/video4'
  });

  // Available options
  const [availableCameras, setAvailableCameras] = useState([]);
  const canInterfaces = ['can0', 'can1', 'can2', 'can3'];

  const statusIntervalRef = useRef(null);
  const hasInitializedRef = useRef(false);

  const loadConfig = () => {
    try {
      const saved = localStorage.getItem('openarms_config');
      if (saved) {
        setConfig(prev => ({ ...prev, ...JSON.parse(saved) }));
      }
    } catch (e) {
      console.error('Load config error:', e);
    }
  };

  const saveConfig = (newConfig) => {
    try {
      localStorage.setItem('openarms_config', JSON.stringify(newConfig || config));
    } catch (e) {
      console.error('Save config error:', e);
    }
  };

  // Fetch status periodically
  const fetchStatus = async () => {
    try {
      const response = await fetch(`${API_BASE}/status`);
      const data = await response.json();

      setIsRecording(data.is_recording);
      setIsInitializing(data.is_initializing);
      setIsEncoding(data.is_encoding);
      setIsUploading(data.is_uploading);
      setRobotsReady(data.robots_ready);
      setElapsedTime(data.elapsed_time);
      setCurrentFps(data.current_fps || 0);
      setEpisodeCount(data.episode_count);
      setError(data.error);
      setStatusMessage(data.status_message || 'Ready');
      setUploadStatus(data.upload_status);

      if (data.config) {
        // Only merge server config if we don't have a saved config (first load)
        if (!localStorage.getItem('openarms_config')) {
          setConfig(prev => {
            const merged = { ...data.config, ...prev };
            localStorage.setItem('openarms_config', JSON.stringify(merged));
            return merged;
          });
        }
      }
    } catch (e) {
      console.error('Failed to fetch status:', e);
    }
  };

  const setupRobots = async () => {
    setError(null);
    try {
      const response = await fetch(`${API_BASE}/robots/setup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(config)
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || 'Failed to setup robots');
      }

      await response.json();
      saveConfig(config);
    } catch (e) {
      setError(`Robot setup failed: ${e.message}`);
    }
  };

  // Disconnect robots
  const disconnectRobots = async () => {
    try {
      await fetch(`${API_BASE}/robots/disconnect`, { method: 'POST' });
      setRobotsReady(false);
    } catch (e) {
      console.error('Failed to disconnect robots:', e);
    }
  };

  // Discover cameras
  const discoverCameras = async () => {
    try {
      const response = await fetch(`${API_BASE}/cameras/discover`);
      const data = await response.json();
      const cameras = data.cameras || [];
      setAvailableCameras(cameras);

      // Get list of valid camera IDs
      const validCameraIds = cameras.map(cam => String(cam.id));

      // Auto-fix config if current values are invalid or not set
      const updated = { ...config };
      let changed = false;

      // Auto-fix invalid camera config
      if (!config.left_wrist || !validCameraIds.includes(config.left_wrist)) {
        if (cameras.length >= 1) {
          updated.left_wrist = String(cameras[0].id);
          changed = true;
        }
      }

      if (!config.right_wrist || !validCameraIds.includes(config.right_wrist)) {
        if (cameras.length >= 2) {
          updated.right_wrist = String(cameras[1].id);
          changed = true;
        }
      }

      if (!config.base || !validCameraIds.includes(config.base)) {
        if (cameras.length >= 3) {
          updated.base = String(cameras[2].id);
          changed = true;
        }
      }

      if (changed) {
        setConfig(updated);
        saveConfig(updated);
      }

      if (cameras.length === 0) {
        setError('No cameras detected! Please connect cameras and refresh.');
      }
    } catch (e) {
      console.error('Failed to discover cameras:', e);
      setError(`Camera discovery failed: ${e.message}`);
    }
  };

  // Start recording
  const startRecording = async () => {
    if (!task.trim()) {
      setError('Please enter a task description');
      return;
    }

    setError(null);

    try {
      const response = await fetch(`${API_BASE}/recording/start`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task, ...config })
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || 'Failed to start recording');
      }

      await response.json();
      saveConfig(config);
    } catch (e) {
      setError(e.message);
    }
  };

  // Stop recording
  const stopRecording = async () => {
    try {
      const response = await fetch(`${API_BASE}/recording/stop`, {
        method: 'POST'
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || 'Failed to stop recording');
      }

      await response.json();
      setError(null);
    } catch (e) {
      setError(e.message);
    }
  };

  // Reset counter
  const resetCounter = async () => {
    try {
      await fetch(`${API_BASE}/counter/reset`, { method: 'POST' });
      setEpisodeCount(0);
    } catch (e) {
      console.error('Failed to reset counter:', e);
    }
  };

  // Format time as MM:SS
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  // Update config and save
  const updateConfig = (key, value) => {
    const updated = { ...config, [key]: value };
    setConfig(updated);
    saveConfig(updated);
  };

  // Initialize on mount only
  useEffect(() => {
    // Prevent double-initialization in development
    if (hasInitializedRef.current) {
      return;
    }
    hasInitializedRef.current = true;

    loadConfig();
    discoverCameras();
    fetchStatus();
    statusIntervalRef.current = setInterval(fetchStatus, 1000);

    return () => {
      if (statusIntervalRef.current) {
        clearInterval(statusIntervalRef.current);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Run only once on mount

  return (
    <main>
      <header>
        <h1>OpenArms Recording</h1>
      </header>

      <div className="container">
        {/* Configuration Panel */}
        <section className="panel config-panel">
          <div
            className="config-header"
            onClick={() => setConfigExpanded(!configExpanded)}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => e.key === 'Enter' && setConfigExpanded(!configExpanded)}
          >
            <h2>⚙️ Configuration</h2>
            <span className="toggle-icon">{configExpanded ? '▼' : '▶'}</span>
          </div>

          {configExpanded && (
            <div className="config-content">
              {/* Robot Setup */}
              <div className="config-section">
                <h3>🤖 Robot Setup</h3>
                <div className="robot-setup">
                  {robotsReady ? (
                    <div className="robot-status ready">
                      <span>✅ Robots Ready - Recording will start instantly</span>
                      <button onClick={disconnectRobots} className="btn-disconnect">
                        Disconnect Robots
                      </button>
                    </div>
                  ) : (
                    <div className="robot-status not-ready">
                      <span>⚠️ Robots not initialized - Recording will take ~10 seconds</span>
                      <button
                        onClick={setupRobots}
                        disabled={isRecording || isInitializing}
                        className="btn-setup"
                      >
                        🚀 Setup Robots
                      </button>
                    </div>
                  )}
                </div>
              </div>

              {/* CAN Interfaces */}
              <div className="config-section">
                <h3>CAN Interfaces</h3>
                <div className="config-grid">
                  <label>
                    Leader Left
                    <select
                      value={config.leader_left}
                      onChange={(e) => updateConfig('leader_left', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {canInterfaces.map((iface) => (
                        <option key={iface} value={iface}>{iface}</option>
                      ))}
                    </select>
                  </label>

                  <label>
                    Leader Right
                    <select
                      value={config.leader_right}
                      onChange={(e) => updateConfig('leader_right', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {canInterfaces.map((iface) => (
                        <option key={iface} value={iface}>{iface}</option>
                      ))}
                    </select>
                  </label>

                  <label>
                    Follower Left
                    <select
                      value={config.follower_left}
                      onChange={(e) => updateConfig('follower_left', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {canInterfaces.map((iface) => (
                        <option key={iface} value={iface}>{iface}</option>
                      ))}
                    </select>
                  </label>

                  <label>
                    Follower Right
                    <select
                      value={config.follower_right}
                      onChange={(e) => updateConfig('follower_right', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {canInterfaces.map((iface) => (
                        <option key={iface} value={iface}>{iface}</option>
                      ))}
                    </select>
                  </label>
                </div>
              </div>

              {/* Camera Configuration */}
              <div className="config-section">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
                  <h3>Cameras {availableCameras.length > 0 && `(${availableCameras.length} detected)`}</h3>
                  <button
                    onClick={discoverCameras}
                    className="btn-refresh"
                    disabled={isRecording || robotsReady}
                  >
                    🔄 Refresh
                  </button>
                </div>
                <div className="config-grid">
                  <label>
                    Left Wrist
                    <select
                      value={config.left_wrist}
                      onChange={(e) => updateConfig('left_wrist', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {availableCameras.map((cam) => (
                        <option key={cam.id} value={String(cam.id)}>
                          {cam.name || `Camera @ ${cam.id}`}
                        </option>
                      ))}
                    </select>
                  </label>

                  <label>
                    Right Wrist
                    <select
                      value={config.right_wrist}
                      onChange={(e) => updateConfig('right_wrist', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {availableCameras.map((cam) => (
                        <option key={cam.id} value={String(cam.id)}>
                          {cam.name || `Camera @ ${cam.id}`}
                        </option>
                      ))}
                    </select>
                  </label>

                  <label>
                    Base Camera
                    <select
                      value={config.base}
                      onChange={(e) => updateConfig('base', e.target.value)}
                      disabled={isRecording || robotsReady}
                    >
                      {availableCameras.map((cam) => (
                        <option key={cam.id} value={String(cam.id)}>
                          {cam.name || `Camera @ ${cam.id}`}
                        </option>
                      ))}
                    </select>
                  </label>
                </div>
              </div>
            </div>
          )}
        </section>

        {/* Control Panel */}
        <section className="panel control-panel">
          <h2>🎬 Recording Control</h2>

          {/* Status Banner - Always show important statuses */}
          {isInitializing && (
            <div className="status-banner initializing">
              <div className="spinner"></div>
              <span>{statusMessage}</span>
            </div>
          )}

          {isEncoding && (
            <div className="status-banner encoding">
              <div className="spinner"></div>
              <span>📹 {statusMessage}</span>
            </div>
          )}

          {isUploading && (
            <div className="status-banner uploading">
              <div className="spinner"></div>
              <span>☁️ {statusMessage}</span>
            </div>
          )}

          {uploadStatus && !isRecording && !isEncoding && !isUploading && (
            <div className={`status-banner ${uploadStatus.startsWith('✓') ? 'success' : 'warning'}`}>
              <span>{uploadStatus}</span>
            </div>
          )}

          <div className="control-horizontal">
            {/* Task Input and Status */}
            <div className="control-left">
              <div className="input-group">
                <input
                  type="text"
                  value={task}
                  onChange={(e) => setTask(e.target.value)}
                  placeholder="Task description (e.g., 'pick and place')"
                  disabled={isRecording || isInitializing || isEncoding || isUploading}
                />
                <button
                  onClick={startRecording}
                  disabled={isRecording || isInitializing || isEncoding || isUploading || !robotsReady}
                  className="btn-start"
                  title={!robotsReady ? 'Please setup robots first' : ''}
                >
                  {isInitializing
                    ? '⏳ Initializing...'
                    : isRecording
                    ? '⏺ Recording...'
                    : robotsReady
                    ? '⏺ Start Recording'
                    : '⏺ Setup Robots First'}
                </button>
              </div>

              {/* Recording Status */}
              {isRecording && (
                <div className="status recording">
                  <div className="indicator"></div>
                  <span className="time-display">
                    {formatTime(elapsedTime)} @ {currentFps.toFixed(1)} FPS
                  </span>
                  <button onClick={stopRecording} className="btn-stop">
                    ⏹ Stop
                  </button>
                </div>
              )}
            </div>

            {/* Episode Counter */}
            <div className="control-right">
              <div className="counter">
                <div className="counter-label">Episodes Recorded</div>
                <div className="counter-value">{episodeCount}</div>
                <button onClick={resetCounter} className="btn-reset">
                  Reset
                </button>
              </div>
            </div>
          </div>

          {/* Error Display */}
          {error && (
            <div className="error-box">
              ⚠️ {error}
            </div>
          )}
        </section>

        {/* Camera Feeds */}
        <section className="panel cameras">
          <h2>📹 Camera Views</h2>
          {robotsReady || isRecording || isInitializing ? (
            <div className="camera-grid">
              <div className="camera">
                <h3>Left Wrist</h3>
                <img src={`${API_BASE}/camera/stream/left_wrist`} alt="Left Wrist Camera" />
              </div>

              <div className="camera">
                <h3>Base</h3>
                <img src={`${API_BASE}/camera/stream/base`} alt="Base Camera" />
              </div>

              <div className="camera">
                <h3>Right Wrist</h3>
                <img src={`${API_BASE}/camera/stream/right_wrist`} alt="Right Wrist Camera" />
              </div>
            </div>
          ) : (
            <div className="camera-placeholder">
              <p>📷 Camera feeds will appear when robots are set up</p>
              <p className="hint">Click "Setup Robots" above to preview camera feeds</p>
            </div>
          )}
        </section>

      </div>
    </main>
  );
}

export default App;