416 lines
15 KiB
TypeScript
416 lines
15 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import './App.css';
|
|
import {ChatControl} from "./ChatClient/ChatControl.tsx";
|
|
|
|
interface Forecast {
|
|
date: string;
|
|
temperatureC: number;
|
|
temperatureF: number;
|
|
summary: string;
|
|
}
|
|
|
|
interface OpenAiToken {
|
|
ephemeralToken: string;
|
|
expiresAt: number;
|
|
}
|
|
|
|
|
|
export default function App() {
|
|
|
|
return <ChatControl/>
|
|
|
|
// const [isSessionActive, setIsSessionActive] = useState(false);
|
|
// const [events, setEvents] = useState([]);
|
|
// const [dataChannel, setDataChannel] = useState<RTCDataChannel | null>(null);
|
|
// const peerConnection = useRef<RTCPeerConnection>(null);
|
|
// const audioElement = useRef<HTMLAudioElement>(null);
|
|
//
|
|
// async function startSession() {
|
|
// // Get a session token for OpenAI Realtime API
|
|
// const tokenResponse = await fetch("/ephemeral_token");
|
|
// const data: OpenAiToken = await tokenResponse.json();
|
|
// const EPHEMERAL_KEY = data.ephemeralToken;
|
|
//
|
|
// // Create a peer connection
|
|
// const pc = new RTCPeerConnection();
|
|
//
|
|
// // Set up to play remote audio from the model
|
|
// audioElement.current = document.createElement("audio");
|
|
// audioElement.current.autoplay = true;
|
|
// pc.ontrack = (e) => {
|
|
// if (audioElement?.current !== null) {
|
|
// audioElement.current.srcObject = e.streams[0]
|
|
// }
|
|
// };
|
|
//
|
|
// // Add local audio track for microphone input in the browser
|
|
// const ms = await navigator.mediaDevices.getUserMedia({
|
|
// audio: true,
|
|
// });
|
|
// pc.addTrack(ms.getTracks()[0]);
|
|
//
|
|
// // Set up data channel for sending and receiving events
|
|
// const dc = pc.createDataChannel("oai-events");
|
|
// setDataChannel(dc);
|
|
//
|
|
// // Start the session using the Session Description Protocol (SDP)
|
|
// const offer = await pc.createOffer();
|
|
// await pc.setLocalDescription(offer);
|
|
//
|
|
// const baseUrl = "https://api.openai.com/v1/realtime";
|
|
// const model = "gpt-4o-realtime-preview-2024-12-17";
|
|
// const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
|
|
// method: "POST",
|
|
// body: offer.sdp,
|
|
// headers: {
|
|
// Authorization: `Bearer ${EPHEMERAL_KEY}`,
|
|
// "Content-Type": "application/sdp",
|
|
// },
|
|
// });
|
|
//
|
|
// const answer: RTCSessionDescriptionInit = {
|
|
// type: "answer",
|
|
// sdp: await sdpResponse.text(),
|
|
// };
|
|
// await pc.setRemoteDescription(answer);
|
|
//
|
|
// peerConnection.current = pc;
|
|
// }
|
|
//
|
|
// // Stop current session, clean up peer connection and data channel
|
|
// function stopSession() {
|
|
// if (dataChannel) {
|
|
// dataChannel.close();
|
|
// }
|
|
//
|
|
// if (peerConnection?.current !== null)
|
|
// {
|
|
// peerConnection.current.getSenders().forEach((sender) => {
|
|
// if (sender.track) {
|
|
// sender.track.stop();
|
|
// }
|
|
// });
|
|
//
|
|
// if (peerConnection.current) {
|
|
// peerConnection.current.close();
|
|
// }
|
|
// }
|
|
//
|
|
// setIsSessionActive(false);
|
|
// setDataChannel(null);
|
|
// peerConnection.current = null;
|
|
// }
|
|
//
|
|
// // Send a message to the model
|
|
// function sendClientEvent(message) {
|
|
// if (dataChannel) {
|
|
// const timestamp = new Date().toLocaleTimeString();
|
|
// message.event_id = message.event_id || crypto.randomUUID();
|
|
//
|
|
// // send event before setting timestamp since the backend peer doesn't expect this field
|
|
// dataChannel.send(JSON.stringify(message));
|
|
//
|
|
// // if guard just in case the timestamp exists by miracle
|
|
// if (!message.timestamp) {
|
|
// message.timestamp = timestamp;
|
|
// }
|
|
// setEvents((prev) => [message, ...prev]);
|
|
// } else {
|
|
// console.error(
|
|
// "Failed to send message - no data channel available",
|
|
// message,
|
|
// );
|
|
// }
|
|
// }
|
|
//
|
|
// // Send a text message to the model
|
|
// function sendTextMessage(message) {
|
|
// const event = {
|
|
// type: "conversation.item.create",
|
|
// item: {
|
|
// type: "message",
|
|
// role: "user",
|
|
// content: [
|
|
// {
|
|
// type: "input_text",
|
|
// text: message,
|
|
// },
|
|
// ],
|
|
// },
|
|
// };
|
|
//
|
|
// sendClientEvent(event);
|
|
// sendClientEvent({ type: "response.create" });
|
|
// }
|
|
//
|
|
// // Attach event listeners to the data channel when a new one is created
|
|
// useEffect(() => {
|
|
// if (dataChannel) {
|
|
// // Append new server events to the list
|
|
// dataChannel.addEventListener("message", (e) => {
|
|
// const event = JSON.parse(e.data);
|
|
// if (!event.timestamp) {
|
|
// event.timestamp = new Date().toLocaleTimeString();
|
|
// }
|
|
//
|
|
// setEvents((prev) => [event, ...prev]);
|
|
// });
|
|
//
|
|
// // Set session active when the data channel is opened
|
|
// dataChannel.addEventListener("open", () => {
|
|
// setIsSessionActive(true);
|
|
// setEvents([]);
|
|
// });
|
|
// }
|
|
// }, [dataChannel]);
|
|
//
|
|
// return (
|
|
// <>
|
|
// <nav className="absolute top-0 left-0 right-0 h-16 flex items-center">
|
|
// <div className="flex items-center gap-4 w-full m-4 pb-2 border-0 border-b border-solid border-gray-200">
|
|
// <img style={{ width: "24px" }} src={logo} />
|
|
// <h1>realtime console</h1>
|
|
// </div>
|
|
// </nav>
|
|
// <main className="absolute top-16 left-0 right-0 bottom-0">
|
|
// <section className="absolute top-0 left-0 right-[380px] bottom-0 flex">
|
|
// <section className="absolute top-0 left-0 right-0 bottom-32 px-4 overflow-y-auto">
|
|
// <EventLog events={events} />
|
|
// </section>
|
|
// <section className="absolute h-32 left-0 right-0 bottom-0 p-4">
|
|
// <SessionControls
|
|
// startSession={startSession}
|
|
// stopSession={stopSession}
|
|
// sendClientEvent={sendClientEvent}
|
|
// sendTextMessage={sendTextMessage}
|
|
// events={events}
|
|
// isSessionActive={isSessionActive}
|
|
// />
|
|
// </section>
|
|
// </section>
|
|
// <section className="absolute top-0 w-[380px] right-0 bottom-0 p-4 pt-0 overflow-y-auto">
|
|
// <ToolPanel
|
|
// sendClientEvent={sendClientEvent}
|
|
// sendTextMessage={sendTextMessage}
|
|
// events={events}
|
|
// isSessionActive={isSessionActive}
|
|
// />
|
|
// </section>
|
|
// </main>
|
|
// </>
|
|
// );
|
|
}
|
|
|
|
// export default function App() {
|
|
// const [openAiToken, setOpenAiToken] = useState<OpenAiToken | null>();
|
|
//
|
|
// useEffect(() => {
|
|
// get_the_fucking_token_already();
|
|
// }, []);
|
|
//
|
|
// const contents = openAiToken === undefined
|
|
// ? <p>Connecting to Open AI...</p>
|
|
// : <div>
|
|
// {
|
|
// openAiToken === null
|
|
// ? <p>Failed to connect to OpenAI, please reload the page.</p>
|
|
// : <p>
|
|
// {openAiToken.ephemeralToken}<br/>
|
|
// {new Date(openAiToken.expiresAt * 1000).toLocaleString()}
|
|
// </p>
|
|
// }
|
|
// </div>;
|
|
// return (
|
|
// <div>
|
|
// <h1 id="tableLabel">Weather forecast</h1>
|
|
// <p>This component demonstrates fetching data from the server.</p>
|
|
// {contents}
|
|
// </div>
|
|
// );
|
|
//
|
|
// async function get_the_fucking_token_already() {
|
|
// const response = await fetch('ephemeral_token');
|
|
// if (response.ok) {
|
|
// const data = await response.json();
|
|
// setOpenAiToken(data);
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
// function Chatter({ openAiToken }: { openAiToken: OpenAiToken }) {
|
|
// const [isSessionActive, setIsSessionActive] = useState(false);
|
|
// const [events, setEvents] = useState([]);
|
|
// const [dataChannel, setDataChannel] = useState(null);
|
|
// const peerConnection = useRef(null);
|
|
// const audioElement = useRef(null);
|
|
//
|
|
// async function startSession() {
|
|
// // Get a session token for OpenAI Realtime API
|
|
// const tokenResponse = await fetch("/token");
|
|
// const data = await tokenResponse.json();
|
|
// const EPHEMERAL_KEY = data.client_secret.value;
|
|
//
|
|
// // Create a peer connection
|
|
// const pc = new RTCPeerConnection();
|
|
//
|
|
// // Set up to play remote audio from the model
|
|
// audioElement.current = document.createElement("audio");
|
|
// audioElement.current.autoplay = true;
|
|
// pc.ontrack = (e) => (audioElement.current.srcObject = e.streams[0]);
|
|
//
|
|
// // Add local audio track for microphone input in the browser
|
|
// const ms = await navigator.mediaDevices.getUserMedia({
|
|
// audio: true,
|
|
// });
|
|
// pc.addTrack(ms.getTracks()[0]);
|
|
//
|
|
// // Set up data channel for sending and receiving events
|
|
// const dc = pc.createDataChannel("oai-events");
|
|
// setDataChannel(dc);
|
|
//
|
|
// // Start the session using the Session Description Protocol (SDP)
|
|
// const offer = await pc.createOffer();
|
|
// await pc.setLocalDescription(offer);
|
|
//
|
|
// const baseUrl = "https://api.openai.com/v1/realtime";
|
|
// const model = "gpt-4o-realtime-preview-2024-12-17";
|
|
// const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
|
|
// method: "POST",
|
|
// body: offer.sdp,
|
|
// headers: {
|
|
// Authorization: `Bearer ${EPHEMERAL_KEY}`,
|
|
// "Content-Type": "application/sdp",
|
|
// },
|
|
// });
|
|
//
|
|
// const answer = {
|
|
// type: "answer",
|
|
// sdp: await sdpResponse.text(),
|
|
// };
|
|
// await pc.setRemoteDescription(answer);
|
|
//
|
|
// peerConnection.current = pc;
|
|
// }
|
|
//
|
|
// // Stop current session, clean up peer connection and data channel
|
|
// function stopSession() {
|
|
// if (dataChannel) {
|
|
// dataChannel.close();
|
|
// }
|
|
//
|
|
// peerConnection.current.getSenders().forEach((sender) => {
|
|
// if (sender.track) {
|
|
// sender.track.stop();
|
|
// }
|
|
// });
|
|
//
|
|
// if (peerConnection.current) {
|
|
// peerConnection.current.close();
|
|
// }
|
|
//
|
|
// setIsSessionActive(false);
|
|
// setDataChannel(null);
|
|
// peerConnection.current = null;
|
|
// }
|
|
//
|
|
// // Send a message to the model
|
|
// function sendClientEvent(message) {
|
|
// if (dataChannel) {
|
|
// const timestamp = new Date().toLocaleTimeString();
|
|
// message.event_id = message.event_id || crypto.randomUUID();
|
|
//
|
|
// // send event before setting timestamp since the backend peer doesn't expect this field
|
|
// dataChannel.send(JSON.stringify(message));
|
|
//
|
|
// // if guard just in case the timestamp exists by miracle
|
|
// if (!message.timestamp) {
|
|
// message.timestamp = timestamp;
|
|
// }
|
|
// setEvents((prev) => [message, ...prev]);
|
|
// } else {
|
|
// console.error(
|
|
// "Failed to send message - no data channel available",
|
|
// message,
|
|
// );
|
|
// }
|
|
// }
|
|
//
|
|
// // Send a text message to the model
|
|
// function sendTextMessage(message) {
|
|
// const event = {
|
|
// type: "conversation.item.create",
|
|
// item: {
|
|
// type: "message",
|
|
// role: "user",
|
|
// content: [
|
|
// {
|
|
// type: "input_text",
|
|
// text: message,
|
|
// },
|
|
// ],
|
|
// },
|
|
// };
|
|
//
|
|
// sendClientEvent(event);
|
|
// sendClientEvent({ type: "response.create" });
|
|
// }
|
|
//
|
|
// // Attach event listeners to the data channel when a new one is created
|
|
// useEffect(() => {
|
|
// if (dataChannel) {
|
|
// // Append new server events to the list
|
|
// dataChannel.addEventListener("message", (e) => {
|
|
// const event = JSON.parse(e.data);
|
|
// if (!event.timestamp) {
|
|
// event.timestamp = new Date().toLocaleTimeString();
|
|
// }
|
|
//
|
|
// setEvents((prev) => [event, ...prev]);
|
|
// });
|
|
//
|
|
// // Set session active when the data channel is opened
|
|
// dataChannel.addEventListener("open", () => {
|
|
// setIsSessionActive(true);
|
|
// setEvents([]);
|
|
// });
|
|
// }
|
|
// }, [dataChannel]);
|
|
//
|
|
// return (
|
|
// <>
|
|
// <nav className="absolute top-0 left-0 right-0 h-16 flex items-center">
|
|
// <div className="flex items-center gap-4 w-full m-4 pb-2 border-0 border-b border-solid border-gray-200">
|
|
// <img style={{ width: "24px" }} src={logo} />
|
|
// <h1>realtime console</h1>
|
|
// </div>
|
|
// </nav>
|
|
// <main className="absolute top-16 left-0 right-0 bottom-0">
|
|
// <section className="absolute top-0 left-0 right-[380px] bottom-0 flex">
|
|
// <section className="absolute top-0 left-0 right-0 bottom-32 px-4 overflow-y-auto">
|
|
// <EventLog events={events} />
|
|
// </section>
|
|
// <section className="absolute h-32 left-0 right-0 bottom-0 p-4">
|
|
// <SessionControls
|
|
// startSession={startSession}
|
|
// stopSession={stopSession}
|
|
// sendClientEvent={sendClientEvent}
|
|
// sendTextMessage={sendTextMessage}
|
|
// events={events}
|
|
// isSessionActive={isSessionActive}
|
|
// />
|
|
// </section>
|
|
// </section>
|
|
// <section className="absolute top-0 w-[380px] right-0 bottom-0 p-4 pt-0 overflow-y-auto">
|
|
// <ToolPanel
|
|
// sendClientEvent={sendClientEvent}
|
|
// sendTextMessage={sendTextMessage}
|
|
// events={events}
|
|
// isSessionActive={isSessionActive}
|
|
// />
|
|
// </section>
|
|
// </main>
|
|
// </>
|
|
// );
|
|
// }
|
|
|