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 // 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("/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 ( // <> // //
//
//
// //
//
// //
//
//
// //
//
// // ); } // export default function App() { // const [openAiToken, setOpenAiToken] = useState(); // // useEffect(() => { // get_the_fucking_token_already(); // }, []); // // const contents = openAiToken === undefined // ?

Connecting to Open AI...

// :
// { // openAiToken === null // ?

Failed to connect to OpenAI, please reload the page.

// :

// {openAiToken.ephemeralToken}
// {new Date(openAiToken.expiresAt * 1000).toLocaleString()} //

// } //
; // return ( //
//

Weather forecast

//

This component demonstrates fetching data from the server.

// {contents} //
// ); // // 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 ( // <> // //
//
//
// //
//
// //
//
//
// //
//
// // ); // }