update

package.json

@@ -13,7 +13,10 @@
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "axios": "^1.7.7",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
+    "express": "^4.21.1",
     "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -24,15 +27,19 @@
     "save": "^2.9.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
-    "ws": "^8.18.0"
+    "node-fetch": "^3.2.0",
+    "ws": "^8.18.0",
+    "three": "^0.160.0",
+    "@types/three": "^0.160.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node server.mjs",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "zip": "zip -r realtime-api-console.zip . -x 'node_modules' 'node_modules/*' 'node_modules/**' '.git' '.git/*' '.git/**' '.DS_Store' '*/.DS_Store' 'package-lock.json' '*.zip' '*.tar.gz' '*.tar' '.env'",
-    "relay": "nodemon ./relay-server/index.js"
+    "server": "node server.mjs",
+    "dev": "concurrently \"react-scripts start\" \"nodemon server.mjs\"",
+    "deploy": "npm run build && npm start"
   },
   "eslintConfig": {
     "extends": [
@@ -54,6 +61,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "concurrently": "^9.0.1",
     "nodemon": "^3.1.7"
   }
 }

public/index.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/openai-logomark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>realtime console</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="googlebot" content="noindex">
+    <title>TTG AI - Realtime Console (PRIVATE ALPHA)</title>
     <!-- Fonts -->
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"

server.mjs

@@ -0,0 +1,92 @@
+import express from 'express';
+import cors from 'cors';
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fetch from 'node-fetch';
+
+dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const port = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json());
+
+// Serve static files from the React app
+app.use(express.static(path.join(__dirname, 'build')));
+
+// Perplexity AI search API endpoint
+app.post('/api/perplexity-search', async (req, res) => {
+  try {
+    const { query } = req.body;
+    console.log('Searching with Perplexity for:', query);
+    console.log('API Key available:', !!process.env.PERPLEXITY_API_KEY);
+
+    if (!process.env.PERPLEXITY_API_KEY) {
+      throw new Error('PERPLEXITY_API_KEY is not set');
+    }
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.PERPLEXITY_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: "llama-3.1-sonar-large-128k-online",
+        messages: [
+          { role: "system", content: "Be precise and concise." },
+          { role: "user", content: query }
+        ],
+        temperature: 0.2,
+        top_p: 0.9,
+        return_citations: true,
+        search_domain_filter: ["perplexity.ai"],
+        return_images: false,
+        return_related_questions: false,
+        search_recency_filter: "month",
+        frequency_penalty: 1
+      })
+    };
+
+    const response = await fetch('https://api.perplexity.ai/chat/completions', options);
+    const data = await response.json();
+
+    console.log('Perplexity API Response Status:', response.status);
+    res.json(data);
+  } catch (error) {
+    console.error('Error performing Perplexity search:', error.message);
+    if (error.response) {
+      console.error('API Response:', error.response.status, error.response.data);
+    }
+
+    // Fallback to mock response
+    console.log('Returning mock response');
+    res.json({
+      mock: true,
+      query: req.body.query,
+      choices: [
+        {
+          message: {
+            content: "This is a mock result for: " + req.body.query
+          }
+        }
+      ]
+    });
+  }
+});
+
+// The "catchall" handler: for any request that doesn't match one above, send back React's index.html file.
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+app.listen(port, '0.0.0.0', () => {
+  console.log(`Server running on http://0.0.0.0:${port}`);
+  console.log('Environment:', process.env.NODE_ENV);
+  console.log('Perplexity API Key set:', !!process.env.PERPLEXITY_API_KEY);
+});

src/App.scss

@@ -1,5 +1,80 @@
+:root {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --border-color: #dee2e6;
+  --assistant-color: #009900;
+  --error-color: #990000;
+}
+
+[data-theme='dark'] {
+  --bg-color: #1a1a1a;
+  --text-color: #f0f0f0;
+  --primary-color: #4da3ff;
+  --secondary-color: #a1a1a1;
+  --border-color: #444444;
+  --assistant-color: #00cc00;
+  --error-color: #ff3333;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
 [data-component='App'] {
   height: 100%;
   width: 100%;
   position: relative;
 }
+
+.theme-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: var(--primary-color);
+  color: var(--bg-color);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  z-index: 1000;
+
+  &:hover {
+    background: var(--secondary-color);
+  }
+}
+
+// Add these general styles to be used across components
+button {
+  background-color: var(--primary-color);
+  color: var(--bg-color);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: var(--secondary-color);
+  }
+}
+
+input, textarea {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  padding: 10px;
+  border-radius: 5px;
+  transition: border-color 0.3s ease;
+
+  &:focus {
+    border-color: var(--primary-color);
+    outline: none;
+  }
+}

src/App.tsx

@@ -1,12 +1,32 @@
+import React from 'react';
 import { ConsolePage } from './pages/ConsolePage';
+import { ThemeProvider, useTheme } from './ThemeContext';
 import './App.scss';
 
-function App() {
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <button onClick={toggleTheme} className="theme-toggle">
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+};
+
+const AppContent: React.FC = () => {
   return (
     <div data-component="App">
+      <ThemeToggle />
       <ConsolePage />
     </div>
   );
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
 }
 
 export default App;

src/ThemeContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

src/components/ThreeJsVisualization.tsx

@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react';
+import * as THREE from 'three';
+
+interface ThreeJsVisualizationProps {
+  aiSpeechData: string;
+}
+
+const ThreeJsVisualization: React.FC<ThreeJsVisualizationProps> = ({ aiSpeechData }) => {
+  const mountRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!mountRef.current) return;
+
+    // Set up scene
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    mountRef.current.appendChild(renderer.domElement);
+
+    // Create a simple cube
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    camera.position.z = 5;
+
+    // Animation function
+    const animate = () => {
+      requestAnimationFrame(animate);
+
+      // Rotate the cube based on the length of aiSpeechData
+      cube.rotation.x += 0.01 * aiSpeechData.length;
+      cube.rotation.y += 0.01 * aiSpeechData.length;
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    // Handle window resize
+    const handleResize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      renderer.setSize(width, height);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      mountRef.current?.removeChild(renderer.domElement);
+    };
+  }, [aiSpeechData]); // Re-run effect when aiSpeechData changes
+
+  return <div ref={mountRef} style={{ width: '100%', height: '100%' }} />;
+};
+
+export default ThreeJsVisualization;