the relay server for openai websocket is ready

web/src/views/RealtimeTest.vue

@@ -170,7 +170,7 @@ const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
 const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
 const client = ref(
     new RealtimeClient({
-      url: "wss://api.geekai.pro/v1/realtime",
+      url: "ws://localhost:5678/api/realtime",
       apiKey: "sk-Gc5cEzDzGQLIqxWA9d62089350F3454bB359C4A3Fa21B3E4",
       dangerouslyAllowAPIKeyInBrowser: true,
     })

web/src/views/Test.vue

@@ -2,15 +2,15 @@
   <div class="audio-chat-page">
     <el-button style="margin: 20px" type="primary" size="large" @click="connect()">开始语音对话</el-button>
 
-    <el-dialog v-model="showDialog" title="语音通话" >
-      <realtime-conversation @close="showDialog = false" ref="conversationRef" :height="dialogHeight+'px'" />
+    <el-dialog v-model="showDialog" title="语音通话" :before-close="close">
+      <realtime-conversation  @close="showDialog = false" ref="conversationRef" :height="dialogHeight+'px'" />
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import {nextTick, ref} from 'vue';
-import RealtimeConversation from "@/components/RealtimeConversation .vue";
+import RealtimeConversation from "@/components/RealtimeConversation.vue";
 
 const showDialog = ref(false);
 const dialogHeight = ref(window.innerHeight - 75);
@@ -21,6 +21,10 @@ const connect = () => {
     conversationRef.value.connect()
   })
 }
+const close = () => {
+  showDialog.value = false;
+  conversationRef.value.hangUp()
+}
 </script>
 
 <style scoped lang="stylus">

web/src/views/Test3.vue

@@ -15,7 +15,7 @@
 import {ref} from 'vue';
 import { RealtimeClient } from '@openai/realtime-api-beta';
 import Calling from "@/components/Calling.vue";
-import Conversation from "@/components/RealtimeConversation .vue";
+import Conversation from "@/components/RealtimeConversation.vue";
 import {playPCM16} from "@/utils/wav_player";
 import {showMessageError} from "@/utils/dialog";
 

web/src/views/admin/ApiKey.vue

@@ -79,7 +79,7 @@
           <el-input v-model="item.name" autocomplete="off"/>
         </el-form-item>
         <el-form-item label="类型：" prop="type">
-          <el-select v-model="item.type" placeholder="请选择类型">
+          <el-select v-model="item.type" placeholder="请选择类型" @change="changeType">
             <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{
                 item.label
               }}
@@ -91,13 +91,13 @@
         </el-form-item>
         <el-form-item label="API URL：" prop="api_url">
           <el-input v-model="item.api_url" autocomplete="off"
-                    placeholder="只填 BASE URL 即可，如：https://api.openai.com"/>
+                    placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com"/>
         </el-form-item>
 
-        <el-form-item label="代理地址：" prop="proxy_url">
-          <el-input v-model="item.proxy_url" autocomplete="off"/>
-          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>
-        </el-form-item>
+<!--        <el-form-item label="代理地址：" prop="proxy_url">-->
+<!--          <el-input v-model="item.proxy_url" autocomplete="off"/>-->
+<!--          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
+<!--        </el-form-item>-->
 
         <el-form-item label="启用状态：" prop="enable">
           <el-switch v-model="item.enabled"/>
@@ -125,7 +125,9 @@ import ClipboardJS from "clipboard";
 // 变量定义
 const items = ref([])
 const query = ref({type: ''})
-const item = ref({})
+const item = ref({
+  enabled: true, api_url: ""
+})
 const showDialog = ref(false)
 const rules = reactive({
   name: [{required: true, message: '请输入名称', trigger: 'change',}],
@@ -143,9 +145,9 @@ const types = ref([
   {label: "DALL-E", value:"dalle"},
   {label: "Suno文生歌", value:"suno"},
   {label: "Luma视频", value:"luma"},
+  {label: "Realtime API", value:"realtime"},
 ])
-
-
+const isEdit = ref(false)
 const clipboard = ref(null)
 onMounted(() => {
   clipboard.value = new ClipboardJS('.copy-key');
@@ -164,6 +166,18 @@ onUnmounted(() => {
   clipboard.value.destroy()
 })
 
+const changeType = (event) => {
+  if (isEdit.value) {
+    return
+  }
+  
+  if (event === 'realtime') {
+    item.value.api_url = "wss://api.geekai.pro"
+  } else {
+    item.value.api_url = "https://api.geekai.pro"
+  }
+}
+
 const getTypeName = (type) => {
   for (let v of types.value) {
     if (v.value === type) {
@@ -194,13 +208,14 @@ const fetchData = () => {
 const add = function () {
   showDialog.value = true
   title.value = "新增 API KEY"
-  item.value = {enabled: true,api_url: "https://api.geekai.pro"}
+  isEdit.value = false
 }
 
 const edit = function (row) {
   showDialog.value = true
   title.value = "修改 API KEY"
   item.value = row
+  isEdit.value = true
 }
 
 const save = function () {