Skip to content

Commit 943f380

Browse files
flo-bitflo-bit
committed
first commit
0 parents  commit 943f380

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+6831
-0
lines changed

‎.github/workflows/deploy_gh_pages.yml

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- gh-deploy
7+
8+
jobs:
9+
build_site:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: Checkout
13+
uses: actions/checkout@v3
14+
15+
- name: Install Node.js
16+
uses: actions/setup-node@v3
17+
with:
18+
node-version: 18
19+
cache: npm
20+
21+
- name: Install dependencies
22+
run: npm install
23+
24+
- name: build
25+
env:
26+
BASE_PATH: '/${{ github.event.repository.name }}'
27+
run: |
28+
npm run build
29+
30+
- name: Upload Artifacts
31+
uses: actions/upload-pages-artifact@v2
32+
with:
33+
# this should match the `pages` option in your adapter-static options
34+
path: 'build/'
35+
36+
deploy:
37+
needs: build_site
38+
runs-on: ubuntu-latest
39+
40+
permissions:
41+
pages: write
42+
id-token: write
43+
44+
environment:
45+
name: github-pages
46+
url: ${{ steps.deployment.outputs.page_url }}
47+
48+
steps:
49+
- name: Deploy
50+
id: deployment
51+
uses: actions/deploy-pages@v2

‎.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
vite.config.js.timestamp-*
10+
vite.config.ts.timestamp-*

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎.prettierignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Ignore files for PNPM, NPM and YARN
2+
pnpm-lock.yaml
3+
package-lock.json
4+
yarn.lock

‎.prettierrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License Copyright (c) 2024 flo-bit
2+
3+
Permission is hereby granted, free of
4+
charge, to any person obtaining a copy of this software and associated
5+
documentation files (the "Software"), to deal in the Software without
6+
restriction, including without limitation the rights to use, copy, modify, merge,
7+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to the
9+
following conditions:
10+
11+
The above copyright notice and this permission notice
12+
(including the next paragraph) shall be included in all copies or substantial
13+
portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# sveltekit openai realtime api
2+
3+
this is a sveltekit port of the [openai-realtime-console](https://github.com/openai/openai-realtime-console) repository.
4+
5+
it allows you to easily use the openai realtime api in your sveltekit project.
6+
7+
work in progress, but it should be functional.
8+
9+
## how to use
10+
11+
> [!WARNING]
12+
> this is the setup for the client side only version of the realtime api, you will need to use a relay server to use this in production.
13+
> see further down for more information on how to use a relay server.
14+
15+
1. copy the `src/lib/realtime/` folder from this repository into your sveltekit projects `src/lib/` folder
16+
17+
2. install the dependency:
18+
19+
```bash
20+
$ npm i openai/openai-realtime-api-beta
21+
```
22+
23+
2. import the `Realtime` component into your svelte file and use it e.g. like so:
24+
25+
```svelte
26+
<script lang="ts">
27+
import Realtime from '$lib/realtime/realtime.svelte';
28+
import type { ItemType } from '@openai/realtime-api-beta/dist/lib/client';
29+
30+
let startConversation: () => Promise<void>;
31+
let endConversation: () => Promise<void>;
32+
33+
let turnDetection: 'server_vad' | 'none' = 'server_vad';
34+
35+
let items: ItemType[] = [];
36+
37+
let isConnected = false;
38+
let isRecording = false;
39+
40+
let startRecording: () => Promise<void>;
41+
let stopRecording: () => Promise<void>;
42+
43+
// set your api key here
44+
let apiKey = '';
45+
</script>
46+
47+
{#if apiKey}
48+
<Realtime
49+
bind:startConversation
50+
bind:endConversation
51+
bind:isConnected
52+
bind:isRecording
53+
bind:startRecording
54+
bind:stopRecording
55+
bind:items
56+
{turnDetection}
57+
{apiKey}
58+
/>
59+
{/if}
60+
```
61+
62+
see `src/routes/+page.svelte` for a full example.
63+
64+
## relay server
65+
66+
for production use, you will need to use a relay server to use the realtime api.
67+
68+
1. add `OPENAI_API_KEY` to your `.env` file
69+
70+
2. tell the Realtime component to use the relay server:
71+
72+
```svelte
73+
<Realtime useRelayServer />
74+
```
75+
76+
then you have two options:
77+
78+
### run the relay server with your sveltekit server
79+
80+
change your `vite.config.ts` to this:
81+
82+
```ts
83+
import { realtimeWebSocketServer } from './src/lib/realtime/realtime_server';
84+
import { sveltekit } from '@sveltejs/kit/vite';
85+
import { defineConfig } from 'vite';
86+
87+
export default defineConfig({
88+
plugins: [sveltekit(), realtimeWebSocketServer]
89+
});
90+
```
91+
92+
### run the relay server independently
93+
94+
- copy the `relay-server/` folder (identical to the code in the
95+
[openai-realtime-console](https://github.com/openai/openai-realtime-console) repository)
96+
from this repository into your project
97+
98+
- install the dependencies:
99+
100+
```bash
101+
npm i dotenv openai/openai-realtime-api-beta
102+
```
103+
104+
- run the relay server:
105+
106+
```bash
107+
$ node relay-server/index.js
108+
```
109+
110+
- add the relay server url to your Realtime component:
111+
112+
```
113+
<Realtime useRelayServer relayServer="http://localhost:8081" />
114+
```
115+
116+
## todos
117+
118+
- [ ] add tests
119+
- [ ] add more documentation
120+
- [ ] show waveforms
121+
- [ ] tool calling
122+
- [ ] update ui
123+
124+
## license
125+
126+
MIT

‎eslint.config.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import js from '@eslint/js';
2+
import ts from 'typescript-eslint';
3+
import svelte from 'eslint-plugin-svelte';
4+
import prettier from 'eslint-config-prettier';
5+
import globals from 'globals';
6+
7+
/** @type {import('eslint').Linter.FlatConfig[]} */
8+
export default [
9+
js.configs.recommended,
10+
...ts.configs.recommended,
11+
...svelte.configs['flat/recommended'],
12+
prettier,
13+
...svelte.configs['flat/prettier'],
14+
{
15+
languageOptions: {
16+
globals: {
17+
...globals.browser,
18+
...globals.node
19+
}
20+
}
21+
},
22+
{
23+
files: ['**/*.svelte'],
24+
languageOptions: {
25+
parserOptions: {
26+
parser: ts.parser
27+
}
28+
}
29+
},
30+
{
31+
ignores: ['build/', '.svelte-kit/', 'dist/']
32+
}
33+
];

0 commit comments

Comments
 (0)