Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

various mods to update speech select ai and ai holograms #48

Merged
merged 16 commits into from
Feb 4, 2025
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions interactive-ai-holograms/aiholo-nodb.ps1
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions interactive-ai-holograms/aiholo.ps1
Original file line number Diff line number Diff line change
@@ -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
8 changes: 8 additions & 0 deletions interactive-ai-holograms/auth.ps1
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions interactive-ai-holograms/express-server/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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"]
}
3 changes: 3 additions & 0 deletions interactive-ai-holograms/express-server/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
registry="https://registry.npmjs.org/"
@types:registry="https://registry.npmjs.org/"
strict-ssl=false
61 changes: 61 additions & 0 deletions interactive-ai-holograms/express-server/README.md
Original file line number Diff line number Diff line change
@@ -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.



84 changes: 84 additions & 0 deletions interactive-ai-holograms/express-server/index.ts
Original file line number Diff line number Diff line change
@@ -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}`);
});
5 changes: 5 additions & 0 deletions interactive-ai-holograms/express-server/nodemon.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"ignore": [
"node_modules"
]
}
9 changes: 9 additions & 0 deletions interactive-ai-holograms/express-server/nodemon.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"watch": [
"index.ts",
"index.html"
],
"ext": ".ts,.js",
"ignore": [],
"exec": "npx ts-node ./index.ts"
}
3 changes: 3 additions & 0 deletions interactive-ai-holograms/express-server/react-client/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
registry="https://registry.npmjs.org/"
@types:registry="https://registry.npmjs.org/"
strict-ssl=false
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
23 changes: 23 additions & 0 deletions interactive-ai-holograms/express-server/react-client/server.js
Original file line number Diff line number Diff line change
@@ -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}`);
});
Original file line number Diff line number Diff line change
@@ -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;
47 changes: 47 additions & 0 deletions interactive-ai-holograms/express-server/react-client/src/App.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
Loading