Merge pull request #48 from paulparkinson/main

various mods to update speech select ai and ai holograms

Author: jasperan

interactive-ai-holograms/aiholo-nodb.ps1

@@ -0,0 +1,10 @@
+# Set environment variable
+$env:COMPARTMENT_ID = "ocid1.compartment.oc1..aaaaaaaafnah3ogykjsg34qruhixhb2drls6zhsejzm7mubi2i5qj66slcoq"
+$env:PEM_PASSPHRASE = "Welcome12345"
+
+# Authenticate OCI session
+#oci session authenticate --region us-phoenix-1 --profile-name MYSPEECHAIPROFILE
+
+# Run Python script
+#python python-realtimespeech-selectai/src/RealtimeSpeechSelectAI.py
+python python-realtimespeech-selectai/src/InteractiveAIHologramsWebRequestVersion.py

interactive-ai-holograms/aiholo.ps1

@@ -0,0 +1,11 @@
+# Set environment variable
+$env:COMPARTMENT_ID = "ocid1.compartment.oc1..aaaaaaaafnah3ogykjsg34qruhixhb2drls6zhsejzm7mubi2i5qj66slcoq"
+$env:PEM_PASSPHRASE = "Welcome12345"
+
+# Authenticate OCI session
+#oci session authenticate --region us-phoenix-1 --profile-name MYSPEECHAIPROFILE
+
+# Run Python script
+#python python-realtimespeech-selectai/src/RealtimeSpeechSelectAI.py
+# python python-realtimespeech-selectai/src/InteractiveAIHolograms.py
+python python-realtimespeech-selectai/src/InteractiveAIHologramsRest.py

interactive-ai-holograms/auth.ps1

@@ -0,0 +1,8 @@
+# Set the OCI region environment variable
+$env:OCI_CLI_REGION = "us-phoenix-1"
+
+# Define the profile name to be used
+$ProfileName = "MYSPEECHAIPROFILE`r`n"
+
+# Start the OCI session authenticate command and try to pipe in the profile name
+$ProfileName | oci session authenticate --region $env:OCI_CLI_REGION

interactive-ai-holograms/express-server/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    "env": {
+        "es15": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    },
+    "exclude": ["node_modules"]
+}

interactive-ai-holograms/express-server/.npmrc

@@ -0,0 +1,3 @@
+registry="https://registry.npmjs.org/"
+@types:registry="https://registry.npmjs.org/"
+strict-ssl=false

interactive-ai-holograms/express-server/README.md

@@ -0,0 +1,61 @@
+# Example Client for the Realtime Speech Web SDK
+
+This is an example client that demonstrates how to connect to the OCI Realtime Speech service, and how to handle results. 
+
+This has 2 components, a server and a react client. The server has access to OCI credentials/auth providers, and makes a call to the speech service to fetch a token. This token is passed to the web client to securely connect directly to the realtime speech service.
+
+Follow these instructions to build/test the client.
+
+## Parameter Changes
+
+You'll need to fill in the following parameters. 
+
+In `index.ts`:
+
+- `compartmentId`: The target compartment ID in which you want to use the realtime speec service. If you're using customizations, make they are in the same compartment.
+- `region`: Your target region e.g. "us-ashburn-1"
+- `provider`: Your authentication details provider.
+
+In `react-client/src/App.tsx`:
+
+- `realtimeClientParameters`: This is the place to declare partial/final silence thresholds, language, model domain (generic/medical), customizations, etc.
+
+For customizations, populate the array with the OCIDs of valid, active customizations.
+
+See this for more: https://docs.oracle.com/en-us/iaas/api/#/en/speech/20220101/datatypes/RealtimeParameters
+
+
+## Build Instructions
+
+You can run the following to build both the server and client:
+```bash
+npm run setup
+```
+
+If you want to buld the client the client/server separately, feel free to run `npm install` in their respective directories.
+
+
+## Run Instructions
+
+You can do the following to run the example. It is recommended to run both the server and client simultaneously.
+
+```bash
+npm start
+```
+
+There are a few more start scripts available:
+
+- `start:server`: Starts just the server
+- `start:dev`: Starts in dev mode
+- `start:client`: Starts just the web (React) client
+
+Both the build/run commands should be run from the content root. 
+
+Once you start both the server and the react client, you should be able to load the client on your browser at `http://localhost:4884`. The server is started at `http://localhost:8448`
+
+Press "Start Session" to begin the transcription. You should be able to see the results on the screen.
+
+"Request Final Results" is a command that can be sent to the speech service to return final results instantly. Based on the partial/final silence thresholds defined in the realtime parameters in the react client, results may take time to arrive. This is a way of receiving the results if you need to close the client, without having to wait for the stabilized final results to arrive.
+
+
+

interactive-ai-holograms/express-server/index.ts

@@ -0,0 +1,84 @@
+import express from "express";
+import cors from "cors";
+import bodyParser from "body-parser";
+import * as common from "oci-common";
+import * as aispeech from "oci-aispeech";
+import https from 'https';
+import fs from 'fs';
+
+const app = express();
+const port = 8448;
+
+// SSL Certificate options with specified paths
+const options = {
+  key: fs.readFileSync('C:\\aiholo-app\\localhost-key.pem'),  // Path to your private key
+  cert: fs.readFileSync('C:\\aiholo-app\\localhost.pem')       // Path to your certificate
+};
+
+// Configure CORS to allow requests from your specific client origin
+// app.use(cors({
+//     origin: 'http://130.61.51.75:4884', // Adjust this to match the origin you are accessing the server from
+//     credentials: true // Allows cookies and credentials to be sent along with the requests
+// }));
+
+app.use(cors({
+  origin: ['https://130.61.51.75:4884'],
+  credentials: true,
+  methods: ['GET', 'POST'],
+  allowedHeaders: ['Content-Type', 'Authorization']
+}));
+
+
+// The OCID of the compartment for authentication and authorization
+const compartmentId = "ocid1.compartment.oc1..aaaaaaaafnah3ogykjsg34qruhixhb2drls6zhsejzm7mubi2i5qj66slcoq";
+
+// Set the region for OCI services
+const region = "us-phoenix-1";
+const provider = new common.SessionAuthDetailProvider("C:/Users/opc/.oci/config", "MYSPEECHAIPROFILE");
+
+/**
+ * Generates a real-time session token using Oracle Cloud Infrastructure (OCI) AI Speech Service.
+ * Configures the OCI client with a specific region and compartment ID, then requests a real-time session token.
+ *
+ * @returns {Promise<string>} The real-time session token generated by the AI Speech Service.
+ * @throws {Error} If the request to generate the session token fails.
+ */
+async function getRealtimeToken() {
+    provider.setRegion(region);
+    const speechClient = new aispeech.AIServiceSpeechClient({ authenticationDetailsProvider: provider });
+
+    const createRealtimeSessionTokenDetails = {
+        compartmentId: compartmentId,
+    };
+
+    const createRealtimeSessionTokenRequest: aispeech.requests.CreateRealtimeSessionTokenRequest = {
+        createRealtimeSessionTokenDetails: createRealtimeSessionTokenDetails,
+    };
+
+    const createRealtimeSessionTokenResponse = await speechClient.createRealtimeSessionToken(createRealtimeSessionTokenRequest);
+    console.log("Token generated: ", createRealtimeSessionTokenResponse);
+    return createRealtimeSessionTokenResponse.realtimeSessionToken;
+}
+
+app.use(bodyParser.json());
+
+app.get("/authenticate", async (req, res) => {
+    try {
+        const token = await getRealtimeToken();
+        console.log("Token Response: ", token);
+        res.send(token);
+    } catch (error) {
+        console.error("createRealtimeSessionToken Failed with error: ", error);
+        res.status(500).send(error.toString());
+    }
+});
+
+app.get("/region", (req, res) => {
+    console.log('Received headers:', req.headers);
+    res.send({ region: region });
+});
+
+// Using HTTPS server instead of the standard HTTP server
+https.createServer(options, app).listen(port, '0.0.0.0', () => {
+    console.log(`https server running at https://0.0.0.0:${port}`);
+});

interactive-ai-holograms/express-server/nodemon.config.js

@@ -0,0 +1,5 @@
+{
+  "ignore": [
+    "node_modules"
+  ]
+}

interactive-ai-holograms/express-server/nodemon.json

@@ -0,0 +1,9 @@
+{
+  "watch": [
+    "index.ts",
+    "index.html"
+  ],
+  "ext": ".ts,.js",
+  "ignore": [],
+  "exec": "npx ts-node ./index.ts"
+}

interactive-ai-holograms/express-server/react-client/.npmrc

@@ -0,0 +1,3 @@
+registry="https://registry.npmjs.org/"
+@types:registry="https://registry.npmjs.org/"
+strict-ssl=false

interactive-ai-holograms/express-server/react-client/public/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="SDK Latency Testing Tool" />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous" />
+    <title>OCI AI Speech</title>
+    <link rel="icon" href="https://www.oracle.com/asset/web/favicons/favicon-32.png" sizes="32x32" />
+    <link rel="icon" href="https://www.oracle.com/asset/web/favicons/favicon-128.png" sizes="128x128" />
+    <link rel="icon" href="https://www.oracle.com/asset/web/favicons/favicon-192.png" sizes="192x192" />
+    <link rel="apple-touch-icon" href="https://www.oracle.com/asset/web/favicons/favicon-120.png" sizes="120x120" />
+    <link rel="apple-touch-icon" href="https://www.oracle.com/asset/web/favicons/favicon-152.png" sizes="152x152" />
+    <link rel="apple-touch-icon" href="https://www.oracle.com/asset/web/favicons/favicon-180.png" sizes="180x180" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

interactive-ai-holograms/express-server/react-client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

interactive-ai-holograms/express-server/react-client/server.js

@@ -0,0 +1,23 @@
+const express = require('express');
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+const app = express();
+
+const PORT = 4884; // Port number for your HTTPS server
+const options = {
+  key: fs.readFileSync('C:\\aiholo-app\\localhost-key.pem'),  // Path to your private key
+  cert: fs.readFileSync('C:\\aiholo-app\\localhost.pem')       // Path to your certificate
+};
+
+// Serve static files from the React build directory
+app.use(express.static(path.join(__dirname, 'build')));
+
+// All routes should redirect to the index.html
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+https.createServer(options, app).listen(PORT, () => {
+  console.log(`Server running on https://130.61.51.75:${PORT}`);
+});

interactive-ai-holograms/express-server/react-client/src/App-justselectaiform.tsx0

@@ -0,0 +1,42 @@
+import React from "react";
+import "./App.css";
+// Import additional components and hooks
+import { useState } from 'react';
+
+function App() {
+  // Existing states and other code...
+
+  // Add state for the text field value
+  const [textFieldValue, setTextFieldValue] = useState('');
+
+  // Function to handle HTTP call when button is clicked
+  const handleCallSelectAI = async () => {
+    const url = `http://130.61.51.75/data?question=${encodeURIComponent(textFieldValue)}`;
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      console.log('Response from AI:', data);
+    } catch (error) {
+      console.error('Error fetching AI data:', error);
+    }
+  };
+
+  // Render function with added text field and button
+  return (
+    <div className="App">
+      {/* Existing components... */}
+      <div>
+        <input
+          type="text"
+          value={textFieldValue}
+          onChange={(e) => setTextFieldValue(e.target.value)}
+          placeholder="Enter your question"
+        />
+        <button onClick={handleCallSelectAI}>Call Select AI</button>
+      </div>
+      {/* Existing rendering logic... */}
+    </div>
+  );
+}
+
+export default App;

interactive-ai-holograms/express-server/react-client/src/App.css

@@ -0,0 +1,47 @@
+/*
+** MyWidget version 1.0.
+**
+** Copyright (c) 2015 WidgetCo, Inc.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
+*/
+
+.App {
+  text-align: left;
+  padding: 20px;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}