// server.js
import express from 'express';
import { WebSocketServer } from 'ws';
import fetch from 'node-fetch';
import { pipeline } from 'stream';
import { createReadStream } from 'fs';

const app = express();
const PORT = process.env.PORT || 4000;

// Serve the React bundle
app.use(express.static('public'));

app.listen(PORT, () => console.log(`🚀 Server listening on ${PORT}`));

// ---------------------------------------------------
// WebSocket bridge to Meta Muse
// ---------------------------------------------------
const MUSE_WS_URL = 'wss://api.meta.com/muse/v1/stream';
const MUSE_API_KEY = process.env.MUSE_API_KEY; // <-- set this in .env

const wss = new WebSocketServer({ noServer: true });

app.on('upgrade', (request, socket, head) => {
  if (request.url === '/muse') {
    wss.handleUpgrade(request, socket, head, (ws) => {
      const museWs = new WebSocket(`${MUSE_WS_URL}?lang=en&max_speakers=20`, {
        headers: { Authorization: `Bearer ${MUSE_API_KEY}` },
      });

      // Forward microphone audio to Muse
      ws.on('message', (msg) => museWs.send(msg));

      // Forward Muse results back to the client
      museWs.on('message', (msg) => ws.send(msg));

      // Clean up on close
      ws.on('close', () => museWs.close());
      museWs.on('close', () => ws.close());
    });
  } else {
    socket.destroy();
  }
});

// src/App.tsx
import { useEffect, useRef, useState } from 'react';

type Transcript = {
  speaker: number;
  text: string;
  confidence: number;
  start: number; // seconds
  end: number;
};

const speakerColors = [
  '#e63946', '#457b9d', '#2a9d8f', '#f4a261', '#e9c46a',
  '#264653', '#6a4c93', '#ff6b6b', '#4a4e69', '#9a8c98',
  '#ff9f1c', '#2ec4b6', '#f72585', '#3a0ca3', '#4361ee',
  '#f72585', '#ff006e', '#3a0ca3', '#4cc9f0', '#b5179e',
];

export default function App() {
  const [transcripts, setTranscripts] = useState<Transcript[]>([]);
  const wsRef = useRef<WebSocket | null>(null);
  const audioRef = useRef<HTMLAudioElement>(null);

  // 1️⃣ Open WebSocket to our Node bridge
  useEffect(() => {
    wsRef.current = new WebSocket(`${location.origin.replace(/^http/, 'ws')}/muse`);
    wsRef.current.binaryType = 'arraybuffer';

    wsRef.current.onmessage = (event) => {
      const data = JSON.parse(event.data) as Transcript;
      setTranscripts((prev) => [...prev, data]);
    };

    return () => wsRef.current?.close();
  }, []);

  // 2️⃣ Capture microphone and pipe to WebSocket
  useEffect(() => {
    async function startMic() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });

      mediaRecorder.ondataavailable = (e) => {
        if (wsRef.current?.readyState === WebSocket.OPEN) {
          wsRef.current.send(e.data);
        }
      };
      mediaRecorder.start(250); // send 250 ms chunks
    }
    startMic();
  }, []);

  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1>Meta Muse Live Caption Demo</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {transcripts.map((t, i) => (
          <li key={i} style={{ marginBottom: '.5rem' }}>
            <span
              style={{
                color: speakerColors[t.speaker % speakerColors.length],
                fontWeight: 'bold',
                marginRight: '.5rem',
              }}
            >
              Speaker {t.speaker + 1}:
            </span>
            <span>{t.text}</span>
            <span style={{ opacity: 0.6, marginLeft: '.5rem' }}>
              ({(t.confidence * 100).toFixed(0)}%)
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

# 1️⃣ Install deps
npm install express ws node-fetch

# 2️⃣ Build React (assuming Create‑React‑App)
npm run build   # outputs to ./public

# 3️⃣ Start the server
MUSE_API_KEY=your_token node server.js