selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished websocket implementation

Browse Source
This commit is contained in:
Koper
2023-08-09 19:38:46 +07:00
parent bc4a952938
commit 1aa77040ef
4 changed files with 59 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
www/app/components/transcript.js
View File

@@ -3,7 +3,7 @@ import axios from "axios";
const API_URL = process.env.NEXT_PUBLIC_API_URL; const API_URL = process.env.NEXT_PUBLIC_API_URL;
const useCreateTranscript = () => { const useTranscript = () => {
const [response, setResponse] = useState(null); const [response, setResponse] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@@ -15,29 +15,31 @@ const useCreateTranscript = () => {
name: "Weekly All-Hands", // Hardcoded for now name: "Weekly All-Hands", // Hardcoded for now
}; };
console.log("Sending POST:", data); console.debug(
"POST - /v1/transcripts/ - Requesting new transcription creation",
data,
);
axios axios
.post(url, data) .post(url, data)
.then((result) => { .then((result) => {
setResponse(result.data); setResponse(result.data);
setLoading(false); setLoading(false);
console.log("Response:", result.data); console.debug("New transcript created:", result.data);
}) })
.catch((err) => { .catch((err) => {
setError(err.response || err); const errorString = err.response || err || "Unknown error";
setError(eerrorString);
setLoading(false); setLoading(false);
alert("Error: " + (err.response || err)); console.error("Error creating transcript:", errorString);
console.log("Error occurred:", err.response || err); // Debugging line
}); });
}; };
// You can choose when to call createTranscript, e.g., based on some dependencies
useEffect(() => { useEffect(() => {
createTranscript(); createTranscript();
}, []); // Empty dependencies array means this effect will run once on mount }, []);
return { response, loading, error, createTranscript }; return { response, loading, error, createTranscript };
}; };
export default useCreateTranscript; export default useTranscript;

44
www/app/components/webrtc.js
View File

@@ -4,17 +4,16 @@ import axios from "axios";
const API_URL = process.env.NEXT_PUBLIC_API_URL; const API_URL = process.env.NEXT_PUBLIC_API_URL;
const useWebRTC = (stream, transcript) => { const useWebRTC = (stream, transcriptId) => {
const [data, setData] = useState({ const [data, setData] = useState({
peer: null, peer: null,
}); });
useEffect(() => { useEffect(() => {
if (!stream || !transcript) { if (!stream || !transcriptId) {
return; return;
} }
const url = `${API_URL}/v1/transcripts/${transcript.id}/record/webrtc`; const url = `${API_URL}/v1/transcripts/${transcriptId}/record/webrtc`;
console.log("Sending RTC Offer", url, transcript);
let peer = new Peer({ initiator: true, stream: stream }); let peer = new Peer({ initiator: true, stream: stream });
@@ -33,11 +32,10 @@ const useWebRTC = (stream, transcript) => {
}) })
.then((response) => { .then((response) => {
const answer = response.data; const answer = response.data;
console.log("Answer:", answer);
peer.signal(answer); peer.signal(answer);
}) })
.catch((e) => { .catch((e) => {
console.log("Error signaling:", e); console.error("WebRTC signaling error:", e);
}); });
} }
}); });
@@ -47,42 +45,10 @@ const useWebRTC = (stream, transcript) => {
setData((prevData) => ({ ...prevData, peer: peer })); setData((prevData) => ({ ...prevData, peer: peer }));
}); });
peer.on("data", (data) => {
const serverData = JSON.parse(data.toString());
console.log(serverData);
switch (serverData.cmd) {
case "SHOW_TRANSCRIPTION":
setData((prevData) => ({
...prevData,
text: serverData.text,
}));
break;
case "UPDATE_TOPICS":
setData((prevData) => ({
...prevData,
topics: serverData.topics,
}));
break;
case "DISPLAY_FINAL_SUMMARY":
setData((prevData) => ({
...prevData,
finalSummary: {
duration: serverData.duration,
summary: serverData.summary,
},
text: "",
}));
break;
default:
console.error(`Unknown command ${serverData.cmd}`);
}
});
return () => { return () => {
peer.destroy(); peer.destroy();
}; };
}, [stream, transcript]); }, [stream, transcriptId]);
return data; return data;
}; };

43
www/app/components/websocket.js
View File

@@ -1,15 +1,19 @@
import { useEffect } from "react"; import { useEffect, useState } from "react";
export const useWebSockets = (transcriptId) => {
const [transcriptText, setTranscriptText] = useState("");
const [topics, setTopics] = useState([]);
const [finalSummary, setFinalSummary] = useState("");
const [status, setStatus] = useState("disconnected");
export const useWebSockets = (transcript_id) => {
useEffect(() => { useEffect(() => {
if (!transcript_id) return; if (!transcriptId) return;
const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcript_id}/events`; const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
const ws = new WebSocket(url); const ws = new WebSocket(url);
console.log("Opening websocket: ", url);
ws.onopen = () => { ws.onopen = () => {
console.log("WebSocket connection opened"); console.debug("WebSocket connection opened");
}; };
ws.onmessage = (event) => { ws.onmessage = (event) => {
@@ -17,15 +21,28 @@ export const useWebSockets = (transcript_id) => {
switch (message.event) { switch (message.event) {
case "TRANSCRIPT": case "TRANSCRIPT":
if (!message.data.text) break; if (message.data.text) {
console.log("TRANSCRIPT event:", message.data.text); setTranscriptText(message.data.text.trim());
console.debug("TRANSCRIPT event:", message.data);
}
break; break;
case "TOPIC": case "TOPIC":
console.log("TOPIC event:", message.data); setTopics((prevTopics) => [...prevTopics, message.data]);
console.debug("TOPIC event:", message.data);
break; break;
case "FINAL_SUMMARY": case "FINAL_SUMMARY":
console.log("FINAL_SUMMARY event:", message.data.summary); if (message.data.summary) {
setFinalSummary(message.data.summary.trim());
console.debug("FINAL_SUMMARY event:", message.data.summary);
}
break; break;
case "STATUS":
setStatus(message.data.status);
break;
default: default:
console.error("Unknown event:", message.event); console.error("Unknown event:", message.event);
} }
@@ -36,11 +53,13 @@ export const useWebSockets = (transcript_id) => {
}; };
ws.onclose = () => { ws.onclose = () => {
console.log("WebSocket connection closed"); console.debug("WebSocket connection closed");
}; };
return () => { return () => {
ws.close(); ws.close();
}; };
}, [transcript_id]); }, [transcriptId]);
return { transcriptText, topics, finalSummary, status };
}; };

24
www/app/page.js
View File

@@ -3,22 +3,17 @@ import React, { useState } from "react";
import Recorder from "./components/record.js"; import Recorder from "./components/record.js";
import { Dashboard } from "./components/dashboard.js"; import { Dashboard } from "./components/dashboard.js";
import useWebRTC from "./components/webrtc.js"; import useWebRTC from "./components/webrtc.js";
import useCreateTranscript from "./components/transcript.js"; import useTranscript from "./components/transcript.js";
import { useWebSockets } from "./components/websocket.js"; import { useWebSockets } from "./components/websocket.js";
import "../public/button.css"; import "../public/button.css";
const App = () => { const App = () => {
const [stream, setStream] = useState(null); const [stream, setStream] = useState(null);
const transcript = useCreateTranscript(); const transcript = useTranscript();
const serverData = useWebRTC(stream, transcript.response); const webRTC = useWebRTC(stream, transcript.response?.id);
const webSockets = useWebSockets(transcript.response?.id); const webSockets = useWebSockets(transcript.response?.id);
console.log("serverData", serverData);
const sendStopCmd = () =>
serverData?.peer?.send(JSON.stringify({ cmd: "STOP" }));
return ( return (
<div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]"> <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
<div className="h-[13svh] flex flex-col justify-center items-center"> <div className="h-[13svh] flex flex-col justify-center items-center">
@@ -26,11 +21,16 @@ const App = () => {
<p className="text-gray-500">Capture The Signal, Not The Noise</p> <p className="text-gray-500">Capture The Signal, Not The Noise</p>
</div> </div>
<Recorder setStream={setStream} onStop={sendStopCmd} /> <Recorder
setStream={setStream}
onStop={() => {
setStream(null);
}}
/>
<Dashboard <Dashboard
transcriptionText={serverData.text ?? "(No transcription yet)"} transcriptionText={webSockets.transcriptText}
finalSummary={serverData.finalSummary} finalSummary={webSockets.finalSummary}
topics={serverData.topics ?? []} topics={webSockets.topics}
stream={stream} stream={stream}
/> />
</div> </div>