improve webui

frontend/src/components/ReadButton.tsx

@@ -40,6 +40,8 @@ export const ReadButton: FC<{
       voice = voices.find((v) => v.name.toLowerCase().includes('microsoft aria'));
     else if (lang === 'zh')
       voice = voices.find((v) => v.name.toLowerCase().includes('xiaoyi'));
+    else if (lang === 'ja')
+      voice = voices.find((v) => v.name.toLowerCase().includes('nanami'));
     if (!voice) voice = voices.find((v) => v.lang.substring(0, 2) === lang);
     if (!voice) voice = voices.find((v) => v.lang === navigator.language);
 

frontend/src/pages/Chat.tsx

@@ -25,7 +25,7 @@ import { toast } from 'react-toastify';
 import { WorkHeader } from '../components/WorkHeader';
 import { DialogButton } from '../components/DialogButton';
 import { OpenFileFolder, OpenOpenFileDialog, OpenSaveFileDialog } from '../../wailsjs/go/backend_golang/App';
-import { absPathAsset, bytesToReadable, toastWithButton } from '../utils';
+import { absPathAsset, bytesToReadable, getServerRoot, toastWithButton } from '../utils';
 import { PresetsButton } from './PresetsManager/PresetsButton';
 import { useMediaQuery } from 'usehooks-ts';
 import { botName, ConversationMessage, MessageType, userName, welcomeUuid } from '../types/chat';
@@ -315,10 +315,8 @@ const ChatPanel: FC = observer(() => {
     let answer = '';
     const chatSseController = new AbortController();
     chatSseControllers[answerId] = chatSseController;
-    fetchEventSource( // https://api.openai.com/v1/chat/completions || http://127.0.0.1:${port}/chat/completions
+    fetchEventSource( // https://api.openai.com/v1/chat/completions || http://127.0.0.1:${port}/v1/chat/completions
-      commonStore.settings.apiUrl ?
+      getServerRoot(port) + '/v1/chat/completions',
-        commonStore.settings.apiUrl + '/v1/chat/completions' :
-        `http://127.0.0.1:${port}/chat/completions`,
       {
         method: 'POST',
         headers: {
@@ -475,9 +473,7 @@ const ChatPanel: FC = observer(() => {
                       const urlPath = `/file-to-text?file_name=${attachmentName}`;
                       const bodyForm = new FormData();
                       bodyForm.append('file_data', blob, attachmentName);
-                      fetch(commonStore.settings.apiUrl ?
+                      fetch(getServerRoot(port) + urlPath, {
-                        commonStore.settings.apiUrl + urlPath :
-                        `http://127.0.0.1:${port}${urlPath}`, {
                         method: 'POST',
                         body: bodyForm
                       }).then(async r => {

frontend/src/pages/Completion.tsx

@@ -14,6 +14,7 @@ import { ToolTipButton } from '../components/ToolTipButton';
 import { ArrowSync20Regular } from '@fluentui/react-icons';
 import { defaultPresets } from './defaultConfigs';
 import { CompletionParams, CompletionPreset } from '../types/completion';
+import { getServerRoot } from '../utils';
 
 let completionSseController: AbortController | null = null;
 
@@ -78,10 +79,8 @@ const CompletionPanel: FC = observer(() => {
 
     let answer = '';
     completionSseController = new AbortController();
-    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/completions
+    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/v1/completions
-      commonStore.settings.apiUrl ?
+      getServerRoot(port) + '/v1/completions',
-        commonStore.settings.apiUrl + '/v1/completions' :
-        `http://127.0.0.1:${port}/completions`,
       {
         method: 'POST',
         headers: {

frontend/src/pages/Composition.tsx

@@ -17,7 +17,7 @@ import * as mm from '@magenta/music/esm/core.js';
 import { NoteSequence } from '@magenta/music/esm/protobuf.js';
 import { defaultCompositionPrompt } from './defaultConfigs';
 import { FileExists, OpenFileFolder, OpenSaveFileDialogBytes } from '../../wailsjs/go/backend_golang/App';
-import { toastWithButton } from '../utils';
+import { getServerRoot, toastWithButton } from '../utils';
 import { CompositionParams } from '../types/composition';
 
 let compositionSseController: AbortController | null = null;
@@ -100,9 +100,7 @@ const CompositionPanel: FC = observer(() => {
   }, []);
 
   const generateNs = (autoPlay: boolean) => {
-    fetch(commonStore.settings.apiUrl ?
+    fetch(getServerRoot(port) + '/text-to-midi', {
-      commonStore.settings.apiUrl + '/text-to-midi' :
-      `http://127.0.0.1:${port}/text-to-midi`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -136,10 +134,8 @@ const CompositionPanel: FC = observer(() => {
 
     let answer = '';
     compositionSseController = new AbortController();
-    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/completions
+    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/v1/completions
-      commonStore.settings.apiUrl ?
+      getServerRoot(port) + '/v1/completions',
-        commonStore.settings.apiUrl + '/v1/completions' :
-        `http://127.0.0.1:${port}/completions`,
       {
         method: 'POST',
         headers: {

frontend/src/utils/index.tsx

@@ -289,6 +289,14 @@ export function bytesToReadable(size: number) {
   else return bytesToGb(size) + ' GB';
 }
 
+export function getServerRoot(defaultLocalPort: number) {
+  if (commonStore.settings.apiUrl)
+    return commonStore.settings.apiUrl;
+  if (commonStore.platform === 'web')
+    return '';
+  return `http://127.0.0.1:${defaultLocalPort}`;
+}
+
 export function absPathAsset(path: string) {
   if (commonStore.platform === 'web')
     return path;