Skip to content

Commit 02d3cc1

Browse files
THHamiltonSmithTHHamiltonSmith
committed
Improve UI
1 parent fcacec0 commit 02d3cc1

File tree

3 files changed

+196
-30
lines changed

3 files changed

+196
-30
lines changed

‎README.md

Lines changed: 126 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,126 @@
1-
# openai-realtime-api-nodejs-dashboard
2-
A NodeJS Frontend + Backend application that works as a chatbot with the new openai realtime api.
1+
# OpenAI Realtime API Node.js Dashboard
2+
3+
The documentation provided by OpenAI was pretty average in providing an easy way to test out the new realtime api with a working frontend, so I thought I would take a crack at making one.
4+
5+
The app works as a chatbot utilising the new realtime websocket system to have as minimal delay as possible. You can either type messages to the chatbot, or enable 'Conversation Mode' to simulate a realtime conversation. Utilises socket.io websockets to handle server-to-client communication.
6+
7+
## Feature Overview
8+
9+
- Real-Time Conversation: Chat with an AI assistant in real-time. Customise to your liking
10+
- Audio Transcription: Transcribe user input via voice.
11+
- Audio Playback: The assistant speaks responses using the integrated audio streaming.
12+
- Responsive User Interface: A simple, user-friendly chat interface.
13+
- Toggle Voice Mode: Enable/disable conversation mode to switch between text and voice input.
14+
15+
## Demo
16+
17+
Include a screenshot showing the app interface
18+
19+
## Technologies Used
20+
21+
- Node.js: Backend server for handling API calls and Socket.io connections.
22+
- Express.js: Web framework for serving static files and handling HTTP requests.
23+
- Socket.io: Real-time, bidirectional communication between the client and server.
24+
- OpenAI Realtime API: Provides AI capabilities for real-time conversation and speech synthesis.
25+
- JavaScript: Used for both server and client-side logic.
26+
- HTML/CSS: Frontend structure and styling (with EJS).
27+
28+
## Getting Started
29+
30+
### Prerequisites
31+
32+
- Node.js (v14.x or later)
33+
- npm or yarn
34+
- An OpenAI API key (with access to the Realtime API)
35+
36+
### Installation
37+
38+
1. Clone the Repository
39+
40+
```bash
41+
git clone https://github.com/yourusername/openai-realtime-api-nodejs-dashboard.git
42+
cd openai-realtime-api-nodejs-dashboard
43+
```
44+
45+
2. Install Dependencies
46+
47+
```bash
48+
npm install
49+
```
50+
51+
3. Set Up Environment Variables
52+
Create a .env file in the root directory and add your OpenAI API key:
53+
54+
```bash
55+
OPENAI_API_KEY=your_openai_api_key
56+
```
57+
58+
4. Run the Application (Defaults on port 3000)
59+
60+
```bash
61+
npm start
62+
```
63+
64+
Or for development with live reloading, use nodemon:
65+
66+
```bash
67+
npm run dev
68+
```
69+
70+
5. Access the Application
71+
Open your browser and navigate to http://localhost:3000.
72+
73+
## File Structure
74+
75+
```bash
76+
openai-realtime-api-nodejs-dashboard/
77+
|
78+
|-- public/ # Frontend files
79+
| |-- /wavtools # Assets for speech recognition/synthesis.
80+
| |-- dashboard.js # Client-side JavaScript
81+
| `-- style.css # Styling for the application
82+
|
83+
|-- views/ # Frontend HTML files
84+
| -- index.ejs
85+
|
86+
|-- .env # Environment variables (not included in version control)
87+
|-- server.js # Main server file
88+
|-- package.json # Project metadata and dependencies
89+
`-- README.md # Project documentation
90+
```
91+
92+
## Usage
93+
94+
- Chat Interaction: Type a message in the input field and press "Send" or use the microphone button
95+
to enable/disable voice conversation mode.
96+
- Audio Playback: The assistant will speak responses if voice output is enabled (may need to check Chrome settings).
97+
- Responsive Display: The conversation log updates in real-time, displaying both user input and
98+
assistant responses.
99+
100+
## Customisation
101+
102+
- Update Instructions: Modify server.js to customise the instructions given to the AI. Update any other settings to your preference.
103+
```js
104+
client.updateSession({
105+
instructions: 'You are a helpful, english speaking assistant.',
106+
voice: 'alloy',
107+
turn_detection: { type: 'server_vad', threshold: 0.3 },
108+
output_audio: { model: 'audio-davinci', format: 'pcm' },
109+
input_audio_transcription: { model: 'whisper-1' },
110+
});
111+
```
112+
- Styling: Change the style.css file to update the appearance of the chat interface.
113+
114+
## Troubleshooting
115+
116+
- Server Errors: Ensure the OpenAI API key is valid and that your environment variables are
117+
correctly set.
118+
- Audio Issues: Verify your browser supports audio playback on localhost.
119+
120+
## Contributing
121+
122+
Contributions are welcome! If you'd like to improve the code or add new features, please submit a pull request.
123+
124+
## License
125+
126+
This project is licensed under the MIT License. See the LICENSE file for more details.

‎public/style.css

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
body {
33
margin: 0;
44
padding: 0;
5-
font-family: Arial, sans-serif;
6-
background-color: #121212;
5+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6+
background-color: #181818;
77
color: #ffffff;
88
}
99

@@ -13,8 +13,9 @@ body {
1313
max-width: 800px;
1414
margin: 50px auto;
1515
padding: 20px;
16-
background-color: #1e1e1e;
17-
border-radius: 8px;
16+
background-color: #242424;
17+
border-radius: 12px;
18+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1819
}
1920

2021
/* Conversation Container */
@@ -23,54 +24,100 @@ body {
2324
overflow-y: auto;
2425
max-height: 500px;
2526
margin-bottom: 20px;
27+
padding: 10px;
28+
background-color: #1a1a1a;
29+
border-radius: 10px;
30+
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
2631
}
2732

2833
.message {
2934
margin: 10px 0;
30-
padding: 10px;
31-
border-radius: 5px;
35+
padding: 12px;
36+
border-radius: 8px;
37+
line-height: 1.5;
38+
word-wrap: break-word;
39+
animation: fadeIn 0.3s ease-in-out;
3240
}
3341

3442
.user-message {
35-
background-color: #2e7d32;
43+
background-color: #388e3c;
3644
align-self: flex-end;
45+
color: #ffffff;
46+
box-shadow: 0 2px 8px rgba(0, 255, 0, 0.2);
3747
}
3848

3949
.bot-message {
40-
background-color: #1565c0;
50+
background-color: #1976d2;
4151
align-self: flex-start;
52+
color: #ffffff;
53+
box-shadow: 0 2px 8px rgba(0, 0, 255, 0.2);
4254
}
4355

4456
/* Input Container */
4557
#input-container {
4658
display: flex;
47-
gap: 10px;
59+
gap: 12px;
4860
}
4961

5062
#userInput {
5163
flex: 1;
52-
padding: 10px;
53-
border: none;
54-
border-radius: 5px;
64+
padding: 12px;
65+
border: 1px solid #444;
66+
border-radius: 8px;
67+
background-color: #2e2e2e;
68+
color: #ffffff;
69+
outline: none;
70+
transition: border 0.2s;
71+
}
72+
73+
#userInput:focus {
74+
border-color: #4caf50;
5575
}
5676

5777
#submitMessage, #toggle-button {
58-
padding: 10px;
78+
padding: 12px;
5979
border: none;
60-
border-radius: 5px;
80+
border-radius: 8px;
6181
cursor: pointer;
82+
transition: background-color 0.3s, box-shadow 0.3s;
6283
}
6384

6485
#submitMessage {
65-
background-color: #55cb5b;
86+
background-color: #4caf50;
87+
color: #ffffff;
88+
}
89+
90+
#submitMessage:hover {
91+
background-color: #66bb6a;
92+
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
6693
}
94+
6795
#toggle-button {
68-
background-color: #3686e0;
96+
background-color: #1e88e5;
97+
color: #ffffff;
6998
}
99+
70100
#toggle-button.active {
71-
background-color: #d32f2f;
101+
background-color: #e53935;
72102
}
73103

74-
#toggle-button i {
75-
color: #ffffff;
104+
#toggle-button:hover {
105+
background-color: #42a5f5;
106+
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
107+
}
108+
109+
#toggle-button i, #submitMessage i {
110+
font-size: 18px;
111+
}
112+
113+
/* Animation */
114+
@keyframes fadeIn {
115+
from {
116+
opacity: 0;
117+
transform: translateY(10px);
118+
}
119+
to {
120+
opacity: 1;
121+
transform: translateY(0);
122+
}
76123
}

‎views/index.ejs

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,26 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Virtual Assistant</title>
6-
7-
<!-- Font Awesome for icons -->
86
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9-
<!-- Custom CSS -->
107
<link rel="stylesheet" href="/style.css">
118
</head>
129
<body>
1310
<div class="main-container">
1411
<div class="conversation-container" id="conversation">
15-
<!-- Messages will be appended here -->
1612
<div class="message bot-message">Assistant: Hello! How can I assist you today?</div>
1713
</div>
1814
<div id="input-container">
19-
<input type="text" id="userInput" placeholder="Type your message..." />
20-
<button id="submitMessage">Send</button>
15+
<input type="text" id="userInput" placeholder="Type your message...">
16+
<button id="submitMessage">
17+
<i class="fas fa-paper-plane"></i>
18+
</button>
2119
<button id="toggle-button">
2220
<i class="fas fa-microphone"></i>
2321
</button>
2422
</div>
2523
</div>
2624

27-
<!-- Socket.io -->
2825
<script src="/socket.io/socket.io.js"></script>
29-
30-
<!-- Main JavaScript -->
3126
<script type="module" src="/dashboard.js"></script>
3227
</body>
3328
</html>

0 commit comments

Comments
 (0)