CephEx (Vite + React + TypeScript)

A Vite React application that integrates Cephable (voice and gesture control) with a Webex device controller, providing a simple UI to initialize services, start camera/voice controls, select Cephable profiles, and trigger macros by gestures or voice.

Features

• Cephable integration (authentication, profiles, voice, and gesture recognition)
• Webex device control (mute/unmute, layout toggles, etc.)
• Profile dropdown to switch current Cephable profile
• Macro matching: executes actions when a recognized gesture matches profile macros
• Responsive UI with tabs and device controls
• Camera canvas overlay and logging for diagnostics

Tech Stack

• Vite + React + TypeScript
• Cephable Web SDK (@cephable/cephable-web)
• CSS (custom styles)
• Optional: Font Awesome for icons

Project Structure

• src/
  • App.tsx, main.tsx
  • components/
    • Cephex.tsx (main UI and logic)
    • Cephex.css
    • profile-dropdown.tsx
    • profile-dropdown.css
  • hooks/
    • integrationCephable.ts (Cephable manager/integration)
    • integrationWebex.ts (Webex device integration)
    • controller.ts, urlParams.ts
  • config/
    • env.ts (environment/config helpers)

Prerequisites

• Node.js 18+ (recommended)
• A Cephable clientId, clientSecret, deviceTypeId, and deviceName
• A camera and microphone (allow browser permissions)

Setup

1. Install dependencies:

   • npm: npm install
   • pnpm: pnpm install
   • yarn: yarn

2. Configure credentials:

   • Prefer using environment variables (see .gitignore). For development, you can:
     • Create a .env.local with:
       • VITE_CEPHABLE_CLIENT_ID=...
       • VITE_CEPHABLE_CLIENT_SECRET=...
       • VITE_CEPHABLE_DEVICE_TYPE_ID=...
       • VITE_CEPHABLE_DEVICE_NAME=CephEx App
       • VITE_CEPHABLE_LOCALE=en-US
     • Or update src/config/env.ts to read from import.meta.env and provide safe defaults.
   • Do not commit real secrets.

3. Start the dev server:

   • npm run dev (or pnpm dev / yarn dev)
   • Open http://localhost:5173

Usage

• Initialize Cephable:
  • The app can auto-initialize on mount, or via a button. Ensure the browser granted camera/microphone permissions.
• Start Camera Controls:
  • Starts gesture recognition and draws overlays on the canvas.
• Start Voice Controls:
  • Starts speech recognition; logs partial/final results and can trigger actions.
• Select Profile:
  • Use the profile dropdown to change currentProfile in Cephable; the UI lists macros and commands for that profile.
• Macros by Gestures:
  • When a gesture is recognized, the app compares it with the current profile macros and executes matching actions (e.g., mute/unmute on Webex).

Key Files

• src/hooks/integrationCephable.ts
  • Creates and manages the Cephable service
  • Handles initialization, camera/voice start/stop, profile load/set
  • Exposes gesture callback to the UI
• src/components/Cephex.tsx
  • UI and state management
  • Sets gesture callback, matches gestures to macros, renders controls and logs
• src/components/profile-dropdown.tsx
  • Renders a to choose Cephable profiles On change, updates current profile and refreshes macros Troubleshooting Camera errors (NotReadableError, permission prompts): Ensure you allow camera/microphone permissions Close other applications using the camera Chrome allows camera on http://localhost, but some setups work better over HTTPS WebGPU/WebGL fallback: If you see “Initialization of backend webgpu failed”, ensure the code falls back to WebGL/CPU Update GPU drivers if necessary Hydration/HTML structure: can only contain elements (no
  • inside ) Gestures not logging: Ensure setGestureCallback is set after profiles/macros load Verify video and canvas elements exist and are visible/attached to DOM Scripts dev – start development server build – production build preview – preview production build Example (npm): npm run dev npm run build npm run preview Security Notes Never commit real client secrets. Use .env.local or a secure secret manager. Limit logs in production (avoid logging credentials or PII).