release v1.5.1

when client webUI enabled, set server into deployment mode
add deployment mode. If /switch-model with deploy: true, will disable /switch-model, /exit and other dangerous APIs (state cache APIs, part of midi APIs)
2023-11-08 23:41:17 +08:00 · 2023-11-08 23:31:13 +08:00 · 2023-11-08 23:29:42 +08:00 · 2023-11-08 23:05:59 +08:00 · 2023-11-08 22:57:38 +08:00 · 2023-11-08 22:25:41 +08:00
65 changed files with 1305 additions and 780 deletions
--- a/CURRENT_CHANGE.md
+++ b/CURRENT_CHANGE.md
@@ -2,28 +2,21 @@

 ### Features

- chat attachment is now related to single message (Experimental)
- port occupied detection
-
-### Upgrades
-
- upgrade to rwkv 0.8.20
-
-### Improvements
-
- improve the compatibility between frontend presets and chatgpt api
- improve memory usage of state cache
+- add webUI for easier service sharing (enable it in Configs page or --webui command line parameter, compile it
+  with `make
+  build-web`)
+- add deployment mode. If `/switch-model` with `deploy: true`, will disable /switch-model, /exit and other dangerous
+  APIs (state cache APIs, part of midi APIs)

 ### Chores

- update ngrok_connect
- python38 compatibility
- adjust startup process
+- print error.txt to console when script fails
+- api url getter

 ### Fixes

- fix log encoding error
- fix stop button status of Chat page
+- set deepspeed to 0.11.2 to avoid finetune error
+- fix `/docs` default api params (Pydantic v2)

 ## Install

--- a/10
+++ b/10
@@ -18,6 +18,16 @@ build-linux:
 	@echo ---- build for linux
 	wails build -upx -ldflags "-s -w" -platform linux/amd64

+build-web:
+	@echo ---- build for web
+	cd frontend && npm run build
+
 dev:
 	wails dev

+dev-web:
+	cd frontend && npm run dev
+
+preview:
+	cd frontend && npm run preview
+
--- a/backend-golang/rwkv.go
+++ b/backend-golang/rwkv.go
@@ -10,7 +10,7 @@ import (
 	"strings"
 )

-func (a *App) StartServer(python string, port int, host string, rwkvBeta bool) (string, error) {
+func (a *App) StartServer(python string, port int, host string, webui bool, rwkvBeta bool) (string, error) {
 	var err error
 	if python == "" {
 		python, err = GetPython()
@@ -19,6 +19,9 @@ func (a *App) StartServer(python string, port int, host string, rwkvBeta bool) (
 		return "", err
 	}
 	args := []string{python, "./backend-python/main.py"}
+	if webui {
+		args = append(args, "--webui")
+	}
 	if rwkvBeta {
 		args = append(args, "--rwkv-beta")
 	}
--- a/backend-python/convert_model.py
+++ b/backend-python/convert_model.py
@@ -231,5 +231,6 @@ try:
        convert_and_save_and_exit=args.out,
    )
 except Exception as e:
+    print(e)
    with open("error.txt", "w") as f:
        f.write(str(e))
--- a/backend-python/convert_safetensors.py
+++ b/backend-python/convert_safetensors.py
@@ -65,5 +65,6 @@ if __name__ == "__main__":
        )
        print(f"Saved to {args.output}")
    except Exception as e:
+        print(e)
        with open("error.txt", "w") as f:
            f.write(str(e))
--- a/backend-python/global_var.py
+++ b/backend-python/global_var.py
@@ -4,6 +4,7 @@ Args = "args"
 Model = "model"
 Model_Status = "model_status"
 Model_Config = "model_config"
+Deploy_Mode = "deploy_mode"


 class ModelStatus(Enum):
@@ -16,6 +17,7 @@ def init():
    global GLOBALS
    GLOBALS = {}
    set(Model_Status, ModelStatus.Offline)
+    set(Deploy_Mode, False)


 def set(key, value):
--- a/backend-python/main.py
+++ b/backend-python/main.py
@@ -22,6 +22,11 @@ def get_args(args: Union[Sequence[str], None] = None):
        help="host to run the server on (default: 127.0.0.1)",
    )
    group = parser.add_argument_group(title="mode arguments")
+    group.add_argument(
+        "--webui",
+        action="store_true",
+        help="whether to enable WebUI (default: False)",
+    )
    group.add_argument(
        "--rwkv-beta",
        action="store_true",
@@ -43,7 +48,7 @@ sys.path.append(os.path.dirname(os.path.realpath(__file__)))

 import psutil
 from contextlib import asynccontextmanager
-from fastapi import Depends, FastAPI
+from fastapi import Depends, FastAPI, status
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn

@@ -79,6 +84,35 @@ app.include_router(misc.router)
 app.include_router(state_cache.router)


+@app.post("/exit", tags=["Root"])
+def exit():
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
+    parent_pid = os.getpid()
+    parent = psutil.Process(parent_pid)
+    for child in parent.children(recursive=True):
+        child.kill()
+    parent.kill()
+
+
+try:
+    if (
+        "RWKV_RUNNER_PARAMS" in os.environ
+        and "--webui" in os.environ["RWKV_RUNNER_PARAMS"].split(" ")
+    ) or args.webui:
+        from webui_server import webui_server
+
+        app.mount("/", webui_server)
+except NameError:
+    pass
+
+
+@app.get("/", tags=["Root"])
+def read_root():
+    return {"Hello": "World!"}
+
+
 def init():
    global_var.init()
    cmd_params = os.environ["RWKV_RUNNER_PARAMS"]
@@ -94,20 +128,6 @@ def init():
        ngrok_connect()


-@app.get("/", tags=["Root"])
-def read_root():
-    return {"Hello": "World!"}
-
-
-@app.post("/exit", tags=["Root"])
-def exit():
-    parent_pid = os.getpid()
-    parent = psutil.Process(parent_pid)
-    for child in parent.children(recursive=True):
-        child.kill()
-    parent.kill()
-
-
 if __name__ == "__main__":
    os.environ["RWKV_RUNNER_PARAMS"] = " ".join(sys.argv[1:])
    print("--- %s seconds ---" % (time.time() - start_time))
--- a/backend-python/routes/completion.py
+++ b/backend-python/routes/completion.py
@@ -53,8 +53,8 @@ class ChatCompletionBody(ModelConfigBody):
        True, description="Whether to insert default system prompt at the beginning"
    )

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "messages": [
                    {"role": Role.User.value, "content": "hello", "raw": False}
@@ -72,6 +72,7 @@ class ChatCompletionBody(ModelConfigBody):
                "frequency_penalty": 0.4,
            }
        }
+    }


 class CompletionBody(ModelConfigBody):
@@ -80,8 +81,8 @@ class CompletionBody(ModelConfigBody):
    stream: bool = False
    stop: Union[str, List[str], None] = None

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "prompt": "The following is an epic science fiction masterpiece that is immortalized, "
                + "with delicate descriptions and grand depictions of interstellar civilization wars.\nChapter 1.\n",
@@ -95,6 +96,7 @@ class CompletionBody(ModelConfigBody):
                "frequency_penalty": 0.4,
            }
        }
+    }


 completion_lock = Lock()
@@ -376,8 +378,8 @@ class EmbeddingsBody(BaseModel):
    encoding_format: str = None
    fast_mode: bool = False

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "input": "a big apple",
                "model": "rwkv",
@@ -385,6 +387,7 @@ class EmbeddingsBody(BaseModel):
                "fast_mode": False,
            }
        }
+    }


 def embedding_base64(embedding: List[float]) -> str:
--- a/backend-python/routes/config.py
+++ b/backend-python/routes/config.py
@@ -15,20 +15,29 @@ class SwitchModelBody(BaseModel):
    strategy: str
    tokenizer: Union[str, None] = None
    customCuda: bool = False
+    deploy: bool = Field(
+        False,
+        description="Deploy mode. If success, will disable /switch-model, /exit and other dangerous APIs (state cache APIs, part of midi APIs)",
+    )

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "model": "models/RWKV-4-World-3B-v1-20230619-ctx4096.pth",
                "strategy": "cuda fp16",
                "tokenizer": None,
                "customCuda": False,
+                "deploy": False,
+            }
        }
    }


@router.post("/switch-model", tags=["Configs"])
 def switch_model(body: SwitchModelBody, response: Response, request: Request):
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(Status.HTTP_403_FORBIDDEN)
+
    if global_var.get(global_var.Model_Status) is global_var.ModelStatus.Loading:
        response.status_code = Status.HTTP_304_NOT_MODIFIED
        return
@@ -64,6 +73,8 @@ def switch_model(body: SwitchModelBody, response: Response, request: Request):
            Status.HTTP_500_INTERNAL_SERVER_ERROR, f"failed to load: {e}"
        )

+    if body.deploy:
+        global_var.set(global_var.Deploy_Mode, True)
    if global_var.get(global_var.Model_Config) is None:
        global_var.set(
            global_var.Model_Config, get_rwkv_config(global_var.get(global_var.Model))
--- a/backend-python/routes/midi.py
+++ b/backend-python/routes/midi.py
@@ -1,4 +1,5 @@
 import io
+import global_var
 from fastapi import APIRouter, HTTPException, status
 from starlette.responses import StreamingResponse
 from pydantic import BaseModel
@@ -11,12 +12,13 @@ router = APIRouter()
 class TextToMidiBody(BaseModel):
    text: str

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "text": "p:24:a p:2a:a p:31:a p:39:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:24:0 p:2a:0 p:31:0 p:39:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:26:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:2e:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2e:0 p:3b:0 p:45:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:2e:a p:3b:a p:45:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2e:0 p:3b:0 p:45:0 b:26:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:26:a p:2a:a p:3b:a p:45:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2a:0 p:3b:0 p:45:0 b:26:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:2d:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 b:2d:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2e:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2e:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:26:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:26:a p:2e:a p:31:a p:39:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:26:0 p:2e:0 p:31:0 p:39:0 p:3b:0 p:45:0 b:21:0 t2 p:26:a p:2e:a p:31:a p:39:a p:3b:a p:45:a b:21:a t14 p:26:0 p:2e:0 p:31:0 p:39:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2a:a p:31:a p:39:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:24:0 p:2a:0 p:31:0 p:39:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:2e:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2e:0 p:3b:0 p:45:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:2e:a p:3b:a p:45:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2e:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:26:a p:2a:a p:3b:a p:45:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2a:0 p:3b:0 p:45:0 b:1f:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:1f:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:24:a p:2e:a p:3b:a p:45:a b:26:a g:39:a g:39:a g:3e:a g:3e:a g:42:a g:42:a pi:39:a pi:3e:a pi:42:a t14 p:24:0 p:2e:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0",
            }
        }
+    }


@router.post("/text-to-midi", tags=["MIDI"])
@@ -35,17 +37,21 @@ class TxtToMidiBody(BaseModel):
    txt_path: str
    midi_path: str

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "txt_path": "midi/sample.txt",
                "midi_path": "midi/sample.mid",
            }
        }
+    }


@router.post("/txt-to-midi", tags=["MIDI"])
 def txt_to_midi(body: TxtToMidiBody):
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if not body.midi_path.startswith("midi/"):
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "bad output path")

@@ -65,14 +71,15 @@ class MidiToWavBody(BaseModel):
    wav_path: str
    sound_font_path: str = "assets/default_sound_font.sf2"

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "midi_path": "midi/sample.mid",
                "wav_path": "midi/sample.wav",
                "sound_font_path": "assets/default_sound_font.sf2",
            }
        }
+    }


@router.post("/midi-to-wav", tags=["MIDI"])
@@ -81,6 +88,9 @@ def midi_to_wav(body: MidiToWavBody):
    Install fluidsynth first, see more: https://github.com/FluidSynth/fluidsynth/wiki/Download#distributions
    """

+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if not body.wav_path.startswith("midi/"):
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "bad output path")

@@ -95,14 +105,15 @@ class TextToWavBody(BaseModel):
    wav_name: str
    sound_font_path: str = "assets/default_sound_font.sf2"

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "text": "p:24:a p:2a:a p:31:a p:39:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:24:0 p:2a:0 p:31:0 p:39:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:26:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:2e:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2e:0 p:3b:0 p:45:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:2e:a p:3b:a p:45:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2e:0 p:3b:0 p:45:0 b:26:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:26:a p:2a:a p:3b:a p:45:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a b:26:a g:3e:a g:3e:a g:42:a g:42:a g:45:a g:45:a pi:3e:a pi:42:a pi:45:a t14 p:2a:0 p:3b:0 p:45:0 b:26:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:2d:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 b:2d:0 g:3e:0 g:3e:0 g:42:0 g:42:0 g:45:0 g:45:0 pi:3e:0 pi:42:0 pi:45:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2e:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2e:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:26:a p:2a:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:26:a p:2e:a p:31:a p:39:a p:3b:a p:45:a b:21:a g:39:a g:39:a g:3d:a g:3d:a g:40:a g:40:a pi:39:a pi:3d:a pi:40:a t14 p:26:0 p:2e:0 p:31:0 p:39:0 p:3b:0 p:45:0 b:21:0 t2 p:26:a p:2e:a p:31:a p:39:a p:3b:a p:45:a b:21:a t14 p:26:0 p:2e:0 p:31:0 p:39:0 p:3b:0 p:45:0 b:21:0 g:39:0 g:39:0 g:3d:0 g:3d:0 g:40:0 g:40:0 pi:39:0 pi:3d:0 pi:40:0 t2 p:24:a p:2a:a p:31:a p:39:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:24:0 p:2a:0 p:31:0 p:39:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:2e:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2e:0 p:3b:0 p:45:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:2e:a p:3b:a p:45:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2e:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:26:a p:2a:a p:3b:a p:45:a t14 p:26:0 p:2a:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a b:1f:a g:3b:a g:3b:a g:3e:a g:3e:a g:43:a g:43:a pi:3b:a pi:3e:a pi:43:a t14 p:2a:0 p:3b:0 p:45:0 b:1f:0 t2 p:24:a p:2a:a p:3b:a p:45:a b:1f:a t14 p:24:0 p:2a:0 p:3b:0 p:45:0 b:1f:0 g:3b:0 g:3b:0 g:3e:0 g:3e:0 g:43:0 g:43:0 pi:3b:0 pi:3e:0 pi:43:0 t2 p:24:a p:2e:a p:3b:a p:45:a b:26:a g:39:a g:39:a g:3e:a g:3e:a g:42:a g:42:a pi:39:a pi:3e:a pi:42:a t14 p:24:0 p:2e:0 p:3b:0 p:45:0 t2 p:2a:a p:3b:a p:45:a t14 p:2a:0 p:3b:0",
                "wav_name": "sample",
                "sound_font_path": "assets/default_sound_font.sf2",
            }
        }
+    }


@router.post("/text-to-wav", tags=["MIDI"])
@@ -111,6 +122,9 @@ def text_to_wav(body: TextToWavBody):
    Install fluidsynth first, see more: https://github.com/FluidSynth/fluidsynth/wiki/Download#distributions
    """

+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    text = body.text.strip()
    if not text.startswith("<start>"):
        text = "<start> " + text
--- a/backend-python/routes/state_cache.py
+++ b/backend-python/routes/state_cache.py
@@ -4,6 +4,7 @@ from fastapi import APIRouter, HTTPException, Request, Response, status
 from pydantic import BaseModel
 import gc
 import copy
+import global_var

 router = APIRouter()

@@ -36,6 +37,9 @@ def init():
 def disable_state_cache():
    global trie, dtrie

+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    trie = None
    dtrie = {}
    gc.collect()
@@ -46,6 +50,10 @@ def disable_state_cache():
@router.post("/enable-state-cache", tags=["State Cache"])
 def enable_state_cache():
    global trie, dtrie
+
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    try:
        import cyac

@@ -68,6 +76,10 @@ class AddStateBody(BaseModel):
@router.post("/add-state", tags=["State Cache"])
 def add_state(body: AddStateBody):
    global trie, dtrie, loop_del_trie_id
+
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if trie is None:
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "trie not loaded")

@@ -108,6 +120,10 @@ def add_state(body: AddStateBody):
@router.post("/reset-state", tags=["State Cache"])
 def reset_state():
    global trie, dtrie
+
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if trie is None:
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "trie not loaded")

@@ -144,6 +160,10 @@ def __get_a_dtrie_buff_size(dtrie_v):
@router.post("/longest-prefix-state", tags=["State Cache"])
 def longest_prefix_state(body: LongestPrefixStateBody, request: Request):
    global trie
+
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if trie is None:
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "trie not loaded")

@@ -183,6 +203,10 @@ def longest_prefix_state(body: LongestPrefixStateBody, request: Request):
@router.post("/save-state", tags=["State Cache"])
 def save_state():
    global trie
+
+    if global_var.get(global_var.Deploy_Mode) is True:
+        raise HTTPException(status.HTTP_403_FORBIDDEN)
+
    if trie is None:
        raise HTTPException(status.HTTP_400_BAD_REQUEST, "trie not loaded")

--- a/backend-python/utils/rwkv.py
+++ b/backend-python/utils/rwkv.py
@@ -551,8 +551,8 @@ class ModelConfigBody(BaseModel):
    presence_penalty: float = Field(default=None, ge=-2, le=2)
    frequency_penalty: float = Field(default=None, ge=-2, le=2)

-    class Config:
-        json_schema_extra = {
+    model_config = {
+        "json_schema_extra": {
            "example": {
                "max_tokens": 1000,
                "temperature": 1.2,
@@ -561,6 +561,7 @@ class ModelConfigBody(BaseModel):
                "frequency_penalty": 0.4,
            }
        }
+    }


 def set_rwkv_config(model: AbstractRWKV, body: ModelConfigBody):
--- a/backend-python/webui_server.py
+++ b/backend-python/webui_server.py
@@ -0,0 +1,14 @@
+from fastapi import FastAPI
+from fastapi.middleware.gzip import GZipMiddleware
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+
+webui_server = FastAPI()
+
+webui_server.add_middleware(GZipMiddleware, minimum_size=1000)
+webui_server.mount(
+    "/", StaticFiles(directory="frontend/dist", html=True), name="static"
+)
+
+if __name__ == "__main__":
+    uvicorn.run("webui_server:webui_server")
--- a/finetune/json2binidx_tool/tools/preprocess_data.py
+++ b/finetune/json2binidx_tool/tools/preprocess_data.py
@@ -246,5 +246,6 @@ if __name__ == "__main__":
    try:
        main()
    except Exception as e:
+        print(e)
        with open("error.txt", "w") as f:
            f.write(str(e))
--- a/finetune/lora/merge_lora.py
+++ b/finetune/lora/merge_lora.py
@@ -64,5 +64,6 @@ try:

        torch.save(output_w, output)
 except Exception as e:
+    print(e)
    with open("error.txt", "w") as f:
        f.write(str(e))
--- a/finetune/lora/train.py
+++ b/finetune/lora/train.py
@@ -264,7 +264,7 @@ if __name__ == "__main__":
 #
 # Data = {args.data_file} ({args.data_type}), ProjDir = {args.proj_dir}
 #
-# Epoch = {args.epoch_begin} to {args.epoch_begin + args.epoch_count - 1} (will continue afterwards), save every {args.epoch_save} epoch
+# Epoch = {args.epoch_begin} to {args.epoch_begin + args.epoch_count - 1}, save every {args.epoch_save} epoch
 #
 # Each "epoch" = {args.epoch_steps} steps, {samples_per_epoch} samples, {tokens_per_epoch} tokens
 #
--- a/finetune/requirements.txt
+++ b/finetune/requirements.txt
@@ -1,3 +1,3 @@
 torch==1.13.1
 pytorch_lightning==1.9.5
-deepspeed
+deepspeed==0.11.2
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>RWKV-Runner</title>
+  <link href="./src/assets/images/logo.png" rel="icon" type="image/x-icon">
 </head>
 <body>
 <div id="root"></div>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,7 +15,7 @@
        "@primer/octicons-react": "^19.1.0",
        "chart.js": "^4.3.0",
        "classnames": "^2.3.2",
-        "github-markdown-css": "^5.2.0",
+        "file-saver": "^2.0.5",
        "html-midi-player": "^1.5.0",
        "i18next": "^22.4.15",
        "mobx": "^6.9.0",
@@ -37,6 +37,7 @@
        "uuid": "^9.0.0"
      },
      "devDependencies": {
+        "@types/file-saver": "^2.0.7",
        "@types/react": "^18.2.6",
        "@types/react-beautiful-dnd": "^13.1.4",
        "@types/react-dom": "^18.2.4",
@@ -74,12 +75,13 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
      "dev": true,
      "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -125,12 +127,12 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
-      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
      "dev": true,
      "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.23.0",
        "@jridgewell/gen-mapping": "^0.3.2",
        "@jridgewell/trace-mapping": "^0.3.17",
        "jsesc": "^2.5.1"
@@ -159,22 +161,22 @@
      }
    },
    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
      "dev": true,
      "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -245,9 +247,9 @@
      }
    },
    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
-      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
@@ -266,9 +268,9 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
@@ -298,13 +300,13 @@
      }
    },
    "node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
-      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
        "js-tokens": "^4.0.0"
      },
      "engines": {
@@ -312,9 +314,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
-      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -365,33 +367,33 @@
      }
    },
    "node_modules/@babel/template": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
      "dev": true,
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
-      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
      "dev": true,
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -400,13 +402,13 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
-      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
        "to-fast-properties": "^2.0.0"
      },
      "engines": {
@@ -2279,6 +2281,12 @@
        "@types/ms": "*"
      }
    },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
    "node_modules/@types/hast": {
      "version": "2.3.4",
      "resolved": "https://registry.npmmirror.com/@types/hast/-/hast-2.3.4.tgz",
@@ -2288,9 +2296,9 @@
      }
    },
    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
      "dependencies": {
        "@types/react": "*",
        "hoist-non-react-statics": "^3.3.0"
@@ -2371,9 +2379,9 @@
      }
    },
    "node_modules/@types/react-redux": {
-      "version": "7.1.25",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz",
-      "integrity": "sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==",
+      "version": "7.1.29",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.29.tgz",
+      "integrity": "sha512-orHCOWqBBQ1LP1uD6JVdXL+ZRTEWhGGne+VOPcXef03rC+QYdzktLhxR3ozymPDyZK0CNCUuQs9tyQhfg1ku+w==",
      "dependencies": {
        "@types/hoist-non-react-statics": "^3.3.0",
        "@types/react": "*",
@@ -2649,10 +2657,24 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001482",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
-      "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
-      "dev": true
+      "version": "1.0.30001561",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
+      "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
    },
    "node_modules/ccount": {
      "version": "2.0.1",
@@ -3232,6 +3254,11 @@
      "resolved": "https://registry.npmjs.org/fft.js/-/fft.js-4.0.4.tgz",
      "integrity": "sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw=="
    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
@@ -3316,11 +3343,6 @@
        "node": "6.* || 8.* || >= 10.*"
      }
    },
-    "node_modules/github-markdown-css": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmmirror.com/github-markdown-css/-/github-markdown-css-5.2.0.tgz",
-      "integrity": "sha512-hq5RaCInSUZ48bImOZpkppW2/MT44StRgsbsZ8YA4vJFwLKB/Vo3k7R2t+pUGqO+ThG0QDMi96TewV/B3vyItg=="
-    },
    "node_modules/glob": {
      "version": "7.1.6",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.6.tgz",
@@ -4591,10 +4613,24 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
      "dependencies": {
        "nanoid": "^3.3.6",
        "picocolors": "^1.0.0",
@@ -4696,9 +4732,9 @@
      "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg=="
    },
    "node_modules/protobufjs": {
-      "version": "6.11.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.3.tgz",
-      "integrity": "sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==",
+      "version": "6.11.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.4.tgz",
+      "integrity": "sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==",
      "hasInstallScript": true,
      "dependencies": {
        "@protobufjs/aspromise": "^1.1.2",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,7 @@
    "@primer/octicons-react": "^19.1.0",
    "chart.js": "^4.3.0",
    "classnames": "^2.3.2",
-    "github-markdown-css": "^5.2.0",
+    "file-saver": "^2.0.5",
    "html-midi-player": "^1.5.0",
    "i18next": "^22.4.15",
    "mobx": "^6.9.0",
@@ -38,6 +38,7 @@
    "uuid": "^9.0.0"
  },
  "devDependencies": {
+    "@types/file-saver": "^2.0.7",
    "@types/react": "^18.2.6",
    "@types/react-beautiful-dnd": "^13.1.4",
    "@types/react-dom": "^18.2.4",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -26,18 +26,22 @@
 import { FluentProvider, Tab, TabList, webDarkTheme, webLightTheme } from '@fluentui/react-components';
 import { FC, useEffect, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router';
-import { pages } from './pages';
+import { pages as clientPages } from './pages';
 import { useMediaQuery } from 'usehooks-ts';
 import commonStore from './stores/commonStore';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { CustomToastContainer } from './components/CustomToastContainer';
+import { LazyImportComponent } from './components/LazyImportComponent';

 const App: FC = observer(() => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const mq = useMediaQuery('(min-width: 640px)');
+  const pages = commonStore.platform === 'web' ? clientPages.filter(page =>
+    !['/configs', '/models', '/downloads', '/train', '/about'].some(path => page.path === path)
+  ) : clientPages;

  const [path, setPath] = useState<string>(pages[0].path);

@@ -82,7 +86,7 @@ const App: FC = observer(() => {
        <div className="h-full w-full p-2 box-border overflow-y-hidden">
          <Routes>
            {pages.map(({ path, element }, index) => (
-              <Route key={`${path}-${index}`} path={path} element={element} />
+              <Route key={`${path}-${index}`} path={path} element={<LazyImportComponent lazyChildren={element} />} />
            ))}
          </Routes>
        </div>
--- a/frontend/src/_locales/ja/main.json
+++ b/frontend/src/_locales/ja/main.json
@@ -262,5 +262,10 @@
  "is as follows. When replying to me, consider the file content and respond accordingly:": "の内容は以下の通りです。私に返信する際は、ファイルの内容を考慮して適切に返信してください:",
  "What's the file name": "ファイル名は何ですか",
  "The file name is: ": "ファイル名は次のとおりです: ",
-  "Port is occupied. Change it in Configs page or close the program that occupies the port.": "ポートが占有されています。設定ページで変更するか、ポートを占有しているプログラムを終了してください。"
+  "Port is occupied. Change it in Configs page or close the program that occupies the port.": "ポートが占有されています。設定ページで変更するか、ポートを占有しているプログラムを終了してください。",
+  "Loading...": "読み込み中...",
+  "Hello, what can I do for you?": "こんにちは、何かお手伝いできますか？",
+  "Enable WebUI": "WebUIを有効化",
+  "Server is working on deployment mode, please close the terminal window manually": "サーバーはデプロイモードで動作しています、ターミナルウィンドウを手動で閉じてください",
+  "Server is working on deployment mode, please exit the program manually to stop the server": "サーバーはデプロイモードで動作しています、サーバーを停止するにはプログラムを手動で終了してください"
 }
--- a/frontend/src/_locales/zh-hans/main.json
+++ b/frontend/src/_locales/zh-hans/main.json
@@ -262,5 +262,10 @@
  "is as follows. When replying to me, consider the file content and respond accordingly:": "内容如下。回复时考虑文件内容并做出相应回复:",
  "What's the file name": "文件名是什么",
  "The file name is: ": "文件名是：",
-  "Port is occupied. Change it in Configs page or close the program that occupies the port.": "端口被占用。请在配置页面更改端口，或关闭占用端口的程序"
+  "Port is occupied. Change it in Configs page or close the program that occupies the port.": "端口被占用。请在配置页面更改端口，或关闭占用端口的程序",
+  "Loading...": "加载中...",
+  "Hello, what can I do for you?": "你好，有什么要我帮忙的吗？",
+  "Enable WebUI": "启用WebUI",
+  "Server is working on deployment mode, please close the terminal window manually": "服务器正在部署模式下运行，请手动关闭终端窗口",
+  "Server is working on deployment mode, please exit the program manually to stop the server": "服务器正在部署模式下运行，请手动退出程序以停止服务器"
 }
--- a/frontend/src/components/DialogButton.tsx
+++ b/frontend/src/components/DialogButton.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import React, { FC, ReactElement } from 'react';
 import {
  Button,
  Dialog,
@@ -11,7 +11,9 @@ import {
 } from '@fluentui/react-components';
 import { ToolTipButton } from './ToolTipButton';
 import { useTranslation } from 'react-i18next';
-import MarkdownRender from './MarkdownRender';
+import { LazyImportComponent } from './LazyImportComponent';
+
+const MarkdownRender = React.lazy(() => import('./MarkdownRender'));

 export const DialogButton: FC<{
  text?: string | null
@@ -45,7 +47,9 @@ export const DialogButton: FC<{
        <DialogContent>
          {
            markdown ?
-              <MarkdownRender>{contentText}</MarkdownRender> :
+              <LazyImportComponent lazyChildren={MarkdownRender}>
+                {contentText}
+              </LazyImportComponent> :
              contentText
          }
        </DialogContent>
--- a/frontend/src/components/LazyImportComponent.tsx
+++ b/frontend/src/components/LazyImportComponent.tsx
@@ -0,0 +1,20 @@
+import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface LazyImportComponentProps {
+  lazyChildren: LazyExoticComponent<FC<any>>;
+  lazyProps?: any;
+  children?: ReactNode;
+}
+
+export const LazyImportComponent: FC<LazyImportComponentProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Suspense fallback={<div>{t('Loading...')}</div>}>
+      <props.lazyChildren {...props.lazyProps}>
+        {props.children}
+      </props.lazyChildren>
+    </Suspense>
+  );
+};
--- a/frontend/src/components/MarkdownRender.tsx
+++ b/frontend/src/components/MarkdownRender.tsx
@@ -21,7 +21,7 @@ const Hyperlink: FC<any> = ({ href, children }) => {
  );
 };

-export const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
+const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
  return (
    <div dir="auto" className="markdown-body">
      <ReactMarkdown
--- a/frontend/src/components/ReadButton.tsx
+++ b/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);

--- a/frontend/src/components/RunButton.tsx
+++ b/frontend/src/components/RunButton.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { ToolTipButton } from './ToolTipButton';
 import { Play16Regular, Stop16Regular } from '@fluentui/react-icons';
 import { useNavigate } from 'react-router';
-import { WindowShow } from '../../wailsjs/runtime/runtime';
+import { WindowShow } from '../../wailsjs/runtime';

 const mainButtonText = {
  [ModelStatus.Offline]: 'Run',
@@ -129,7 +129,7 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
      const isUsingCudaBeta = modelConfig.modelParameters.device === 'CUDA-Beta';

      startServer(commonStore.settings.customPythonPath, port, commonStore.settings.host !== '127.0.0.1' ? '0.0.0.0' : '127.0.0.1',
-        isUsingCudaBeta
+        !!modelConfig.enableWebUI, isUsingCudaBeta
      ).catch((e) => {
        const errMsg = e.message || e;
        if (errMsg.includes('path contains space'))
@@ -199,7 +199,8 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
              model: modelPath,
              strategy: strategy,
              tokenizer: modelConfig.modelParameters.useCustomTokenizer ? modelConfig.modelParameters.customTokenizer : undefined,
-              customCuda: customCudaFile !== ''
+              customCuda: customCudaFile !== '',
+              deploy: modelConfig.enableWebUI
            }).then(async (r) => {
              if (r.ok) {
                commonStore.setStatus({ status: ModelStatus.Working });
@@ -246,7 +247,13 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
      }, 1000);
    } else {
      commonStore.setStatus({ status: ModelStatus.Offline });
-      exit();
+      exit().then(r => {
+        if (r.status === 403)
+          if (commonStore.platform !== 'linux')
+            toast(t('Server is working on deployment mode, please close the terminal window manually'), { type: 'info' });
+          else
+            toast(t('Server is working on deployment mode, please exit the program manually to stop the server'), { type: 'info' });
+      });
    }
  };

--- a/frontend/src/components/WorkHeader.tsx
+++ b/frontend/src/components/WorkHeader.tsx
@@ -25,7 +25,8 @@ export const WorkHeader: FC = observer(() => {
  const { t } = useTranslation();
  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;

-  return (
+  return commonStore.platform === 'web' ?
+    <div /> :
    <div className="flex flex-col gap-1">
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-2">
@@ -42,5 +43,5 @@ export const WorkHeader: FC = observer(() => {
      </Text>
      <Divider style={{ flexGrow: 0 }} />
    </div>
-  );
+    ;
 });
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,3 +1,4 @@
+import './webWails';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './style.scss';
@@ -6,7 +7,6 @@ import App from './App';
 import { HashRouter } from 'react-router-dom';
 import { startup } from './startup';
 import './_locales/i18n-react';
-import 'html-midi-player';
 import { WindowShow } from '../wailsjs/runtime';

 startup().then(() => {
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -5,9 +5,7 @@ import MarkdownRender from '../components/MarkdownRender';
 import { observer } from 'mobx-react-lite';
 import commonStore from '../stores/commonStore';

-export type AboutContent = { [lang: string]: string }
-
-export const About: FC = observer(() => {
+const About: FC = observer(() => {
  const { t } = useTranslation();
  const lang: string = commonStore.settings.language;

@@ -21,3 +19,5 @@ export const About: FC = observer(() => {
    } />
  );
 });
+
+export default About;
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -25,49 +25,19 @@ 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';

-export const userName = 'M E';
-export const botName = 'A I';
+let chatSseControllers: {
+  [id: string]: AbortController
+} = {};

-export const welcomeUuid = 'welcome';
-
-export enum MessageType {
-  Normal,
-  Error
-}
-
-export type Side = 'left' | 'right'
-
-export type Color = 'neutral' | 'brand' | 'colorful'
-
-export type MessageItem = {
-  sender: string,
-  type: MessageType,
-  color: Color,
-  avatarImg?: string,
-  time: string,
-  content: string,
-  side: Side,
-  done: boolean
-}
-
-export type Conversation = {
-  [uuid: string]: MessageItem
-}
-
-export type Role = 'assistant' | 'user' | 'system';
-
-export type ConversationMessage = {
-  role: Role;
-  content: string;
-}
-
-let chatSseControllers: { [id: string]: AbortController } = {};
-
-const MoreUtilsButton: FC<{ uuid: string, setEditing: (editing: boolean) => void }> = observer(({
+const MoreUtilsButton: FC<{
+  uuid: string,
+  setEditing: (editing: boolean) => void
+}> = observer(({
  uuid,
  setEditing
 }) => {
@@ -98,7 +68,8 @@ const MoreUtilsButton: FC<{ uuid: string, setEditing: (editing: boolean) => void
 });

 const ChatMessageItem: FC<{
-  uuid: string, onSubmit: (message: string | null, answerId: string | null,
+  uuid: string,
+  onSubmit: (message: string | null, answerId: string | null,
    startUuid: string | null, endUuid: string | null, includeEndUuid: boolean) => void
 }> = observer(({ uuid, onSubmit }) => {
  const { t } = useTranslation();
@@ -243,7 +214,7 @@ const ChatPanel: FC = observer(() => {
          color: 'colorful',
          avatarImg: logo,
          time: new Date().toISOString(),
-          content: t('Hello! I\'m RWKV, an open-source and commercially usable large language model.'),
+          content: commonStore.platform === 'web' ? t('Hello, what can I do for you?') : t('Hello! I\'m RWKV, an open-source and commercially usable large language model.'),
          side: 'left',
          done: true
        }
@@ -260,7 +231,7 @@ const ChatPanel: FC = observer(() => {
    e.stopPropagation();
    if (e.type === 'click' || (e.keyCode === 13 && !e.shiftKey)) {
      e.preventDefault();
-      if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl) {
+      if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl && commonStore.platform !== 'web') {
        toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
        return;
      }
@@ -344,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
-      commonStore.settings.apiUrl ?
-        commonStore.settings.apiUrl + '/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
+      getServerRoot(port) + '/v1/chat/completions',
      {
        method: 'POST',
        headers: {
@@ -464,7 +433,7 @@ const ChatPanel: FC = observer(() => {
                  : <Attach16Regular />}
                size="small" shape="circular" appearance="secondary"
                onClick={() => {
-                  if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl) {
+                  if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl && commonStore.platform !== 'web') {
                    toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
                    return;
                  }
@@ -478,22 +447,38 @@ const ChatPanel: FC = observer(() => {

                    commonStore.setAttachmentUploading(true);

+                    let blob: Blob;
+                    let attachmentName: string | undefined;
+                    let attachmentContent: string | undefined;
+                    if (commonStore.platform === 'web') {
+                      const webReturn = filePath as any;
+                      blob = webReturn.blob;
+                      attachmentName = blob.name;
+                      attachmentContent = webReturn.content;
+                    } else {
                      // Both are slow. Communication between frontend and backend is slow. Use AssetServer Handler to read the file.
                      // const blob = new Blob([atob(info.content as unknown as string)]); // await fetch(`data:application/octet-stream;base64,${info.content}`).then(r => r.blob());
-                    const blob = await fetch(absPathAsset(filePath)).then(r => r.blob());
-                    const attachmentName = filePath.split(/[\\/]/).pop();
+                      blob = await fetch(absPathAsset(filePath)).then(r => r.blob());
+                      attachmentName = filePath.split(/[\\/]/).pop();
+                    }
+                    if (attachmentContent) {
+                      commonStore.setCurrentTempAttachment(
+                        {
+                          name: attachmentName!,
+                          size: blob.size,
+                          content: attachmentContent
+                        });
+                      commonStore.setAttachmentUploading(false);
+                    } else {
                      const urlPath = `/file-to-text?file_name=${attachmentName}`;
                      const bodyForm = new FormData();
                      bodyForm.append('file_data', blob, attachmentName);
-                    fetch(commonStore.settings.apiUrl ?
-                      commonStore.settings.apiUrl + urlPath :
-                      `http://127.0.0.1:${port}${urlPath}`, {
+                      fetch(getServerRoot(port) + urlPath, {
                        method: 'POST',
                        body: bodyForm
                      }).then(async r => {
                          if (r.status === 200) {
                            const pages = (await r.json()).pages as any[];
-                          let attachmentContent: string;
                            if (pages.length === 1)
                              attachmentContent = pages[0].page_content;
                            else
@@ -502,7 +487,7 @@ const ChatPanel: FC = observer(() => {
                              {
                                name: attachmentName!,
                                size: blob.size,
-                              content: attachmentContent
+                                content: attachmentContent!
                              });
                          } else {
                            toast(r.statusText + '\n' + (await r.text()), {
@@ -515,6 +500,7 @@ const ChatPanel: FC = observer(() => {
                        commonStore.setAttachmentUploading(false);
                        toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
                      });
+                    }
                  }).catch(e => {
                    toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
                  });
@@ -586,7 +572,7 @@ const ChatPanel: FC = observer(() => {
  );
 });

-export const Chat: FC = observer(() => {
+const Chat: FC = observer(() => {
  return (
    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
      <WorkHeader />
@@ -594,3 +580,5 @@ export const Chat: FC = observer(() => {
    </div>
  );
 });
+
+export default Chat;
--- a/frontend/src/pages/Completion.tsx
+++ b/frontend/src/pages/Completion.tsx
@@ -5,7 +5,6 @@ import { Button, Dropdown, Input, Option, Textarea } from '@fluentui/react-compo
 import { Labeled } from '../components/Labeled';
 import { ValuedSlider } from '../components/ValuedSlider';
 import { useTranslation } from 'react-i18next';
-import { ApiParameters } from './Configs';
 import commonStore, { ModelStatus } from '../stores/commonStore';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { toast } from 'react-toastify';
@@ -14,18 +13,8 @@ import { PresetsButton } from './PresetsManager/PresetsButton';
 import { ToolTipButton } from '../components/ToolTipButton';
 import { ArrowSync20Regular } from '@fluentui/react-icons';
 import { defaultPresets } from './defaultConfigs';
-
-export type CompletionParams = Omit<ApiParameters, 'apiPort'> & {
-  stop: string,
-  injectStart: string,
-  injectEnd: string
-};
-
-export type CompletionPreset = {
-  name: string,
-  prompt: string,
-  params: CompletionParams
-}
+import { CompletionParams, CompletionPreset } from '../types/completion';
+import { getServerRoot } from '../utils';

 let completionSseController: AbortController | null = null;

@@ -80,7 +69,7 @@ const CompletionPanel: FC = observer(() => {
  const onSubmit = (prompt: string) => {
    commonStore.setCompletionSubmittedPrompt(prompt);

-    if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl) {
+    if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl && commonStore.platform !== 'web') {
      toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
      commonStore.setCompletionGenerating(false);
      return;
@@ -90,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
-      commonStore.settings.apiUrl ?
-        commonStore.settings.apiUrl + '/v1/completions' :
-        `http://127.0.0.1:${port}/completions`,
+    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/v1/completions
+      getServerRoot(port) + '/v1/completions',
      {
        method: 'POST',
        headers: {
@@ -269,7 +256,7 @@ const CompletionPanel: FC = observer(() => {
            } />
        </div>
        <div className="grow" />
-        <div className="flex justify-between gap-2">
+        <div className="hidden justify-between gap-2 sm:flex">
          <Button className="grow" onClick={() => {
            const newPrompt = prompt.replace(/\n+\ /g, '\n').split('\n').map((line) => line.trim()).join('\n');
            setPrompt(newPrompt);
@@ -303,7 +290,7 @@ const CompletionPanel: FC = observer(() => {
  );
 });

-export const Completion: FC = observer(() => {
+const Completion: FC = observer(() => {
  return (
    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
      <WorkHeader />
@@ -311,3 +298,5 @@ export const Completion: FC = observer(() => {
    </div>
  );
 });
+
+export default Completion;
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -1,3 +1,4 @@
+import 'html-midi-player';
 import React, { FC, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { WorkHeader } from '../components/WorkHeader';
@@ -16,18 +17,8 @@ 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';
-
-export type CompositionParams = {
-  prompt: string,
-  maxResponseToken: number,
-  temperature: number,
-  topP: number,
-  autoPlay: boolean,
-  useLocalSoundFont: boolean,
-  midi: ArrayBuffer | null,
-  ns: NoteSequence | null
-}
+import { getServerRoot, toastWithButton } from '../utils';
+import { CompositionParams } from '../types/composition';

 let compositionSseController: AbortController | null = null;

@@ -109,9 +100,7 @@ const CompositionPanel: FC = observer(() => {
  }, []);

  const generateNs = (autoPlay: boolean) => {
-    fetch(commonStore.settings.apiUrl ?
-      commonStore.settings.apiUrl + '/text-to-midi' :
-      `http://127.0.0.1:${port}/text-to-midi`, {
+    fetch(getServerRoot(port) + '/text-to-midi', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
@@ -137,7 +126,7 @@ const CompositionPanel: FC = observer(() => {
  const onSubmit = (prompt: string) => {
    commonStore.setCompositionSubmittedPrompt(prompt);

-    if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl) {
+    if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl && commonStore.platform !== 'web') {
      toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
      commonStore.setCompositionGenerating(false);
      return;
@@ -145,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
-      commonStore.settings.apiUrl ?
-        commonStore.settings.apiUrl + '/v1/completions' :
-        `http://127.0.0.1:${port}/completions`,
+    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/v1/completions
+      getServerRoot(port) + '/v1/completions',
      {
        method: 'POST',
        headers: {
@@ -335,7 +322,7 @@ const CompositionPanel: FC = observer(() => {
  );
 });

-export const Composition: FC = observer(() => {
+const Composition: FC = observer(() => {
  return (
    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
      <WorkHeader />
@@ -343,3 +330,5 @@ export const Composition: FC = observer(() => {
    </div>
  );
 });
+
+export default Composition;
--- a/frontend/src/pages/Configs.tsx
+++ b/frontend/src/pages/Configs.tsx
@@ -29,45 +29,14 @@ import { updateConfig } from '../apis';
 import { ConvertModel, ConvertSafetensors, FileExists, GetPyError } from '../../wailsjs/go/backend_golang/App';
 import { checkDependencies, getStrategy } from '../utils';
 import { useTranslation } from 'react-i18next';
-import { WindowShow } from '../../wailsjs/runtime/runtime';
+import { WindowShow } from '../../wailsjs/runtime';
 import strategyImg from '../assets/images/strategy.jpg';
 import strategyZhImg from '../assets/images/strategy_zh.jpg';
 import { ResetConfigsButton } from '../components/ResetConfigsButton';
 import { useMediaQuery } from 'usehooks-ts';
+import { ApiParameters, Device, ModelParameters, Precision } from '../types/configs';

-export type ApiParameters = {
-  apiPort: number
-  maxResponseToken: number;
-  temperature: number;
-  topP: number;
-  presencePenalty: number;
-  frequencyPenalty: number;
-}
-
-export type Device = 'CPU' | 'CUDA' | 'CUDA-Beta' | 'WebGPU' | 'MPS' | 'Custom';
-export type Precision = 'fp16' | 'int8' | 'fp32';
-
-export type ModelParameters = {
-  // different models can not have the same name
-  modelName: string;
-  device: Device;
-  precision: Precision;
-  storedLayers: number;
-  maxStoredLayers: number;
-  useCustomCuda?: boolean;
-  customStrategy?: string;
-  useCustomTokenizer?: boolean;
-  customTokenizer?: string;
-}
-
-export type ModelConfig = {
-  // different configs can have the same name
-  name: string;
-  apiParameters: ApiParameters
-  modelParameters: ModelParameters
-}
-
-export const Configs: FC = observer(() => {
+const Configs: FC = observer(() => {
  const { t } = useTranslation();
  const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);
  const [selectedConfig, setSelectedConfig] = React.useState(commonStore.modelConfigs[selectedIndex]);
@@ -472,9 +441,23 @@ export const Configs: FC = observer(() => {
          />
        </div>
        <div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
+          <div className="flex gap-2">
+            {selectedConfig.modelParameters.device !== 'WebGPU'
+              && <Checkbox className="select-none"
+                size="large" label={t('Enable WebUI')}
+                checked={selectedConfig.enableWebUI}
+                onChange={(_, data) => {
+                  setSelectedConfig({
+                    ...selectedConfig,
+                    enableWebUI: data.checked as boolean
+                  });
+                }} />}
            <RunButton onClickRun={onClickSave} />
          </div>
        </div>
+      </div>
    } />
  );
 });
+
+export default Configs;
--- a/frontend/src/pages/Downloads.tsx
+++ b/frontend/src/pages/Downloads.tsx
@@ -9,19 +9,7 @@ import { ToolTipButton } from '../components/ToolTipButton';
 import { Folder20Regular, Pause20Regular, Play20Regular } from '@fluentui/react-icons';
 import { AddToDownloadList, OpenFileFolder, PauseDownload } from '../../wailsjs/go/backend_golang/App';

-export type DownloadStatus = {
-  name: string;
-  path: string;
-  url: string;
-  transferred: number;
-  size: number;
-  speed: number;
-  progress: number;
-  downloading: boolean;
-  done: boolean;
-}
-
-export const Downloads: FC = observer(() => {
+const Downloads: FC = observer(() => {
  const { t } = useTranslation();
  const finishedModelsLen = commonStore.downloadList.filter((status) => status.done && status.name.endsWith('.pth')).length;
  useEffect(() => {
@@ -91,3 +79,5 @@ export const Downloads: FC = observer(() => {
    } />
  );
 });
+
+export default Downloads;
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,11 +1,13 @@
 import { CompoundButton, Link, Text } from '@fluentui/react-components';
-import React, { FC, ReactElement } from 'react';
+import React, { FC } from 'react';
 import banner from '../assets/images/banner.jpg';
 import {
  Chat20Regular,
  ClipboardEdit20Regular,
  DataUsageSettings20Regular,
-  DocumentSettings20Regular
+  DocumentSettings20Regular,
+  MusicNote220Regular,
+  Settings20Regular
 } from '@fluentui/react-icons';
 import { useNavigate } from 'react-router';
 import { observer } from 'mobx-react-lite';
@@ -14,21 +16,13 @@ import manifest from '../../../manifest.json';
 import { BrowserOpenURL } from '../../wailsjs/runtime';
 import { useTranslation } from 'react-i18next';
 import { ConfigSelector } from '../components/ConfigSelector';
-import MarkdownRender from '../components/MarkdownRender';
 import commonStore from '../stores/commonStore';
-import { Completion } from './Completion';
 import { ResetConfigsButton } from '../components/ResetConfigsButton';
+import { AdvancedGeneralSettings } from './Settings';
+import { NavCard } from '../types/home';
+import { LazyImportComponent } from '../components/LazyImportComponent';

-export type IntroductionContent = { [lang: string]: string }
-
-type NavCard = {
-  label: string;
-  desc: string;
-  path: string;
-  icon: ReactElement;
-};
-
-const navCards: NavCard[] = [
+const clientNavCards: NavCard[] = [
  {
    label: 'Chat',
    desc: 'Go to chat page',
@@ -55,7 +49,36 @@ const navCards: NavCard[] = [
  }
 ];

-export const Home: FC = observer(() => {
+const webNavCards: NavCard[] = [
+  {
+    label: 'Chat',
+    desc: 'Go to chat page',
+    path: '/chat',
+    icon: <Chat20Regular />
+  },
+  {
+    label: 'Completion',
+    desc: 'Writer, Translator, Role-playing',
+    path: '/completion',
+    icon: <ClipboardEdit20Regular />
+  },
+  {
+    label: 'Composition',
+    desc: '',
+    path: '/composition',
+    icon: <MusicNote220Regular />
+  },
+  {
+    label: 'Settings',
+    desc: '',
+    path: '/settings',
+    icon: <Settings20Regular />
+  }
+];
+
+const MarkdownRender = React.lazy(() => import('../components/MarkdownRender'));
+
+const Home: FC = observer(() => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const lang: string = commonStore.settings.language;
@@ -64,20 +87,43 @@ export const Home: FC = observer(() => {
    navigate({ pathname: path });
  };

-  return (
+  return commonStore.platform === 'web' ?
+    (
+      <div className="flex flex-col gap-2 h-full">
+        <img className="rounded-xl select-none object-cover grow"
+          style={{ maxHeight: '40%' }} src={banner} />
+        <div className="grow"></div>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
+          {webNavCards.map(({ label, path, icon, desc }, index) => (
+            <CompoundButton icon={icon} secondaryContent={t(desc)} key={`${path}-${index}`} value={path}
+              size="large" onClick={() => onClickNavCard(path)}>
+              {t(label)}
+            </CompoundButton>
+          ))}
+        </div>
+        <div className="flex flex-col gap-2">
+          <AdvancedGeneralSettings />
+          <div className="flex gap-4 items-end">
+            {t('Version')}: {manifest.version}
+            <Link onClick={() => BrowserOpenURL('https://github.com/josStorer/RWKV-Runner')}>{t('Help')}</Link>
+          </div>
+        </div>
+      </div>
+    )
+    : (
      <div className="flex flex-col justify-between h-full">
-      <img className="rounded-xl select-none hidden sm:block"
-        style={{ maxHeight: '40%', margin: '0 auto' }} src={banner} />
+        <img className="rounded-xl select-none object-cover hidden sm:block"
+          style={{ maxHeight: '40%' }} src={banner} />
        <div className="flex flex-col gap-2">
          <Text size={600} weight="medium">{t('Introduction')}</Text>
          <div className="h-40 overflow-y-auto overflow-x-hidden p-1">
-          <MarkdownRender>
+            <LazyImportComponent lazyChildren={MarkdownRender}>
              {lang in commonStore.introduction ? commonStore.introduction[lang] : commonStore.introduction['en']}
-          </MarkdownRender>
+            </LazyImportComponent>
          </div>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
-        {navCards.map(({ label, path, icon, desc }, index) => (
+          {clientNavCards.map(({ label, path, icon, desc }, index) => (
            <CompoundButton icon={icon} secondaryContent={t(desc)} key={`${path}-${index}`} value={path}
              size="large" onClick={() => onClickNavCard(path)}>
              {t(label)}
@@ -100,3 +146,5 @@ export const Home: FC = observer(() => {
      </div>
    );
 });
+
+export default Home;
--- a/frontend/src/pages/Models.tsx
+++ b/frontend/src/pages/Models.tsx
@@ -22,21 +22,7 @@ import { Page } from '../components/Page';
 import { bytesToGb, refreshModels, saveConfigs, toastWithButton } from '../utils';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-
-export type ModelSourceItem = {
-  name: string;
-  size: number;
-  lastUpdated: string;
-  desc?: { [lang: string]: string | undefined; };
-  SHA256?: string;
-  url?: string;
-  downloadUrl?: string;
-  isComplete?: boolean;
-  isLocal?: boolean;
-  localSize?: number;
-  lastUpdatedMs?: number;
-  hide?: boolean;
-};
+import { ModelSourceItem } from '../types/models';

 const columns: TableColumnDefinition<ModelSourceItem>[] = [
  createTableColumn<ModelSourceItem>({
@@ -165,7 +151,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
  })
 ];

-export const Models: FC = observer(() => {
+const Models: FC = observer(() => {
  const { t } = useTranslation();

  return (
@@ -220,3 +206,5 @@ export const Models: FC = observer(() => {
    } />
  );
 });
+
+export default Models;
--- a/frontend/src/pages/PresetsManager/MessagesEditor.tsx
+++ b/frontend/src/pages/PresetsManager/MessagesEditor.tsx
@@ -1,14 +1,14 @@
 import React, { FC, useState } from 'react';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import commonStore from '../../stores/commonStore';
-import { Preset } from './PresetsButton';
 import { observer } from 'mobx-react-lite';
 import { v4 as uuid } from 'uuid';
 import { Button, Card, Dropdown, Option, Textarea } from '@fluentui/react-components';
 import { useTranslation } from 'react-i18next';
 import { ToolTipButton } from '../../components/ToolTipButton';
 import { Delete20Regular, ReOrderDotsVertical20Regular } from '@fluentui/react-icons';
-import { ConversationMessage, Role } from '../Chat';
+import { Preset } from '../../types/presets';
+import { ConversationMessage, Role } from '../../types/chat';

 type Item = {
  id: string;
@@ -31,7 +31,7 @@ const reorder = (list: Item[], startIndex: number, endIndex: number) => {
  return result;
 };

-export const MessagesEditor: FC = observer(() => {
+const MessagesEditor: FC = observer(() => {
  const { t } = useTranslation();

  const editingPreset = commonStore.editingPreset!;
@@ -152,3 +152,5 @@ export const MessagesEditor: FC = observer(() => {
    </div>
  );
 });
+
+export default MessagesEditor;
--- a/frontend/src/pages/PresetsManager/PresetsButton.tsx
+++ b/frontend/src/pages/PresetsManager/PresetsButton.tsx
@@ -1,6 +1,6 @@
 // TODO refactor

-import React, { FC, PropsWithChildren, ReactElement, useState } from 'react';
+import React, { FC, lazy, PropsWithChildren, ReactElement, useState } from 'react';
 import {
  Button,
  Dialog,
@@ -25,44 +25,21 @@ import {
 } from '@fluentui/react-icons';
 import { ToolTipButton } from '../../components/ToolTipButton';
 import { useTranslation } from 'react-i18next';
-import { botName, Conversation, ConversationMessage, MessageType, userName } from '../Chat';
 import { SelectTabEventHandler } from '@fluentui/react-tabs';
 import { Labeled } from '../../components/Labeled';
 import commonStore from '../../stores/commonStore';
 import logo from '../../assets/images/logo.png';
 import { observer } from 'mobx-react-lite';
-import { MessagesEditor } from './MessagesEditor';
 import { ClipboardGetText, ClipboardSetText } from '../../../wailsjs/runtime';
 import { toast } from 'react-toastify';
 import { CustomToastContainer } from '../../components/CustomToastContainer';
 import { v4 as uuid } from 'uuid';
 import { absPathAsset } from '../../utils';
+import { Preset, PresetsNavigationItem } from '../../types/presets';
+import { botName, Conversation, MessageType, userName } from '../../types/chat';
+import { LazyImportComponent } from '../../components/LazyImportComponent';

-export type PresetType = 'chat' | 'completion' | 'chatInCompletion'
-
-export type Preset = {
-  name: string,
-  tag: string,
-  // if name and sourceUrl are same, it will be overridden when importing
-  sourceUrl: string,
-  desc: string,
-  avatarImg: string,
-  type: PresetType,
-  // chat
-  welcomeMessage: string,
-  messages: ConversationMessage[],
-  displayPresetMessages: boolean,
-  // completion
-  prompt: string,
-  stop: string,
-  injectStart: string,
-  injectEnd: string,
-  presystem?: boolean,
-  userName?: string,
-  assistantName?: string
-}
-
-export const defaultPreset: Preset = {
+const defaultPreset: Preset = {
  name: 'RWKV',
  tag: 'default',
  sourceUrl: '',
@@ -78,6 +55,8 @@ export const defaultPreset: Preset = {
  injectEnd: ''
 };

+const MessagesEditor = lazy(() => import('./MessagesEditor'));
+
 const setActivePreset = (preset: Preset) => {
  commonStore.setActivePreset(preset);
  //TODO if (preset.displayPresetMessages) {
@@ -101,7 +80,7 @@ const setActivePreset = (preset: Preset) => {
  //}
 };

-export const PresetCardFrame: FC<PropsWithChildren & { onClick?: () => void }> = (props) => {
+const PresetCardFrame: FC<PropsWithChildren & { onClick?: () => void }> = (props) => {
  return <Button
    className="flex flex-col gap-1 w-32 h-56 break-all"
    style={{ minWidth: 0, borderRadius: '0.75rem', justifyContent: 'unset' }}
@@ -111,7 +90,7 @@ export const PresetCardFrame: FC<PropsWithChildren & { onClick?: () => void }> =
  </Button>;
 };

-export const PresetCard: FC<{
+const PresetCard: FC<{
  avatarImg: string,
  name: string,
  desc: string,
@@ -147,7 +126,7 @@ export const PresetCard: FC<{
  </PresetCardFrame>;
 });

-export const ChatPresetEditor: FC<{
+const ChatPresetEditor: FC<{
  triggerButton: ReactElement,
  presetIndex: number
 }> = observer(({ triggerButton, presetIndex }) => {
@@ -291,7 +270,7 @@ export const ChatPresetEditor: FC<{
                      });
                    }} />
                  } />
-                <MessagesEditor />
+                <LazyImportComponent lazyChildren={MessagesEditor} />
              </div> :
              <div className="flex flex-col gap-1 p-2 overflow-x-hidden overflow-y-auto">
                <Labeled flex breakline label={`${t('Description')} (${t('Preview Only')})`}
@@ -356,7 +335,7 @@ export const ChatPresetEditor: FC<{
  </Dialog>;
 });

-export const ChatPresets: FC = observer(() => {
+const ChatPresets: FC = observer(() => {
  const { t } = useTranslation();

  return <div className="flex flex-wrap gap-2">
@@ -392,11 +371,6 @@ export const ChatPresets: FC = observer(() => {
  </div>;
 });

-type PresetsNavigationItem = {
-  icon: ReactElement;
-  element: ReactElement;
-};
-
 const pages: { [label: string]: PresetsNavigationItem } = {
  Chat: {
    icon: <Chat20Regular />,
@@ -412,7 +386,7 @@ const pages: { [label: string]: PresetsNavigationItem } = {
  }
 };

-export const PresetsManager: FC<{ initTab: string }> = ({ initTab }) => {
+const PresetsManager: FC<{ initTab: string }> = ({ initTab }) => {
  const { t } = useTranslation();
  const [tab, setTab] = useState(initTab);

--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -16,43 +16,12 @@ import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { checkUpdate, toastWithButton } from '../utils';
 import { RestartApp } from '../../wailsjs/go/backend_golang/App';
+import { Language, Languages } from '../types/settings';

-export const Languages = {
-  dev: 'English', // i18n default
-  zh: '简体中文',
-  ja: '日本語'
-};
-
-export type Language = keyof typeof Languages;
-
-export type SettingsType = {
-  language: Language
-  darkMode: boolean
-  autoUpdatesCheck: boolean
-  giteeUpdatesSource: boolean
-  cnMirror: boolean
-  host: string
-  dpiScaling: number
-  customModelsPath: string
-  customPythonPath: string
-  apiUrl: string
-  apiKey: string
-  apiChatModelName: string
-  apiCompletionModelName: string
-}
-
-export const Settings: FC = observer(() => {
+export const GeneralSettings: FC = observer(() => {
  const { t } = useTranslation();
-  const advancedHeaderRef = useRef<HTMLDivElement>(null);

-  useEffect(() => {
-    if (advancedHeaderRef.current)
-      (advancedHeaderRef.current.firstElementChild as HTMLElement).style.padding = '0';
-  }, []);
-
-  return (
-    <Page title={t('Settings')} content={
-      <div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden p-1">
+  return <div className="flex flex-col gap-2">
    <Labeled label={t('Language')} flex spaceBetween content={
      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
        value={Languages[commonStore.settings.language]}
@@ -104,6 +73,136 @@ export const Settings: FC = observer(() => {
          });
        }} />
    } />
+  </div>;
+});
+
+export const AdvancedGeneralSettings: FC = observer(() => {
+  const { t } = useTranslation();
+
+  return <div className="flex flex-col gap-2">
+    <Labeled label={'API URL'}
+      content={
+        <div className="flex gap-2">
+          <Input style={{ minWidth: 0 }} className="grow" value={commonStore.settings.apiUrl}
+            onChange={(e, data) => {
+              commonStore.setSettings({
+                apiUrl: data.value
+              });
+            }} />
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+            value="..." selectedOptions={[]} expandIcon={null}
+            onOptionSelect={(_, data) => {
+              commonStore.setSettings({
+                apiUrl: data.optionValue
+              });
+              if (data.optionText === 'OpenAI') {
+                if (commonStore.settings.apiChatModelName === 'rwkv')
+                  commonStore.setSettings({
+                    apiChatModelName: 'gpt-3.5-turbo'
+                  });
+                if (commonStore.settings.apiCompletionModelName === 'rwkv')
+                  commonStore.setSettings({
+                    apiCompletionModelName: 'text-davinci-003'
+                  });
+              }
+            }}>
+            <Option value="">{t('Localhost')!}</Option>
+            <Option value="https://api.openai.com">OpenAI</Option>
+          </Dropdown>
+        </div>
+      } />
+    <Labeled label={'API Key'}
+      content={
+        <Input type="password" className="grow" placeholder="sk-" value={commonStore.settings.apiKey}
+          onChange={(e, data) => {
+            commonStore.setSettings({
+              apiKey: data.value
+            });
+          }} />
+      } />
+    <Labeled label={t('API Chat Model Name')}
+      content={
+        <div className="flex gap-2">
+          <Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
+            value={commonStore.settings.apiChatModelName}
+            onChange={(e, data) => {
+              commonStore.setSettings({
+                apiChatModelName: data.value
+              });
+            }} />
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+            value="..." selectedOptions={[]} expandIcon={null}
+            onOptionSelect={(_, data) => {
+              if (data.optionValue) {
+                commonStore.setSettings({
+                  apiChatModelName: data.optionValue
+                });
+              }
+            }}>
+            {
+              ['rwkv', 'gpt-4', 'gpt-4-0613', 'gpt-4-32k', 'gpt-4-32k-0613', 'gpt-3.5-turbo', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613']
+              .map((v, i) =>
+                <Option key={i} value={v}>{v}</Option>
+              )
+            }
+          </Dropdown>
+        </div>
+      } />
+    <Labeled label={t('API Completion Model Name')}
+      content={
+        <div className="flex gap-2">
+          <Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
+            value={commonStore.settings.apiCompletionModelName}
+            onChange={(e, data) => {
+              commonStore.setSettings({
+                apiCompletionModelName: data.value
+              });
+            }} />
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+            value="..." selectedOptions={[]} expandIcon={null}
+            onOptionSelect={(_, data) => {
+              if (data.optionValue) {
+                commonStore.setSettings({
+                  apiCompletionModelName: data.optionValue
+                });
+              }
+            }}>
+            {
+              ['rwkv', 'text-davinci-003', 'text-davinci-002', 'text-curie-001', 'text-babbage-001', 'text-ada-001']
+              .map((v, i) =>
+                <Option key={i} value={v}>{v}</Option>
+              )
+            }
+          </Dropdown>
+        </div>
+      } />
+  </div>;
+});
+
+const Settings: FC = observer(() => {
+  const { t } = useTranslation();
+  const advancedHeaderRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (advancedHeaderRef.current)
+      (advancedHeaderRef.current.firstElementChild as HTMLElement).style.padding = '0';
+  }, []);
+
+  return (
+    <Page title={t('Settings')} content={
+      <div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden p-1">
+        {
+          commonStore.platform === 'web' ?
+            (
+              <div className="flex flex-col gap-2">
+                <GeneralSettings />
+                <AdvancedGeneralSettings />
+              </div>
+            )
+            :
+            (
+              <div className="flex flex-col gap-2">
+                <GeneralSettings />
                <Labeled label={t('Automatic Updates Check')} flex spaceBetween content={
                  <Switch checked={commonStore.settings.autoUpdatesCheck}
                    onChange={(e, data) => {
@@ -136,7 +235,8 @@ export const Settings: FC = observer(() => {
                      }} />
                  } />
                }
-        <Labeled label={t('Allow external access to the API (service must be restarted)')} flex spaceBetween content={
+                <Labeled label={t('Allow external access to the API (service must be restarted)')} flex spaceBetween
+                  content={
                    <Switch checked={commonStore.settings.host !== '127.0.0.1'}
                      onChange={(e, data) => {
                        commonStore.setSettings({
@@ -155,7 +255,8 @@ export const Settings: FC = observer(() => {
                        {commonStore.platform !== 'darwin' &&
                          <Labeled label={t('Custom Models Path')}
                            content={
-                      <Input className="grow" placeholder="./models" value={commonStore.settings.customModelsPath}
+                              <Input className="grow" placeholder="./models"
+                                value={commonStore.settings.customModelsPath}
                                onChange={(e, data) => {
                                  commonStore.setSettings({
                                    customModelsPath: data.value
@@ -165,7 +266,8 @@ export const Settings: FC = observer(() => {
                        }
                        <Labeled label={t('Custom Python Path')} // if set, will not use precompiled cuda kernel
                          content={
-                    <Input className="grow" placeholder="./py310/python" value={commonStore.settings.customPythonPath}
+                            <Input className="grow" placeholder="./py310/python"
+                              value={commonStore.settings.customPythonPath}
                              onChange={(e, data) => {
                                commonStore.setDepComplete(false);
                                commonStore.setSettings({
@@ -173,107 +275,17 @@ export const Settings: FC = observer(() => {
                                });
                              }} />
                          } />
-                <Labeled label={'API URL'}
-                  content={
-                    <div className="flex gap-2">
-                      <Input style={{ minWidth: 0 }} className="grow" value={commonStore.settings.apiUrl}
-                        onChange={(e, data) => {
-                          commonStore.setSettings({
-                            apiUrl: data.value
-                          });
-                        }} />
-                      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
-                        value="..." selectedOptions={[]} expandIcon={null}
-                        onOptionSelect={(_, data) => {
-                          commonStore.setSettings({
-                            apiUrl: data.optionValue
-                          });
-                          if (data.optionText === 'OpenAI') {
-                            if (commonStore.settings.apiChatModelName === 'rwkv')
-                              commonStore.setSettings({
-                                apiChatModelName: 'gpt-3.5-turbo'
-                              });
-                            if (commonStore.settings.apiCompletionModelName === 'rwkv')
-                              commonStore.setSettings({
-                                apiCompletionModelName: 'text-davinci-003'
-                              });
-                          }
-                        }}>
-                        <Option value="">{t('Localhost')!}</Option>
-                        <Option value="https://api.openai.com">OpenAI</Option>
-                      </Dropdown>
-                    </div>
-                  } />
-                <Labeled label={'API Key'}
-                  content={
-                    <Input className="grow" placeholder="sk-" value={commonStore.settings.apiKey}
-                      onChange={(e, data) => {
-                        commonStore.setSettings({
-                          apiKey: data.value
-                        });
-                      }} />
-                  } />
-                <Labeled label={t('API Chat Model Name')}
-                  content={
-                    <div className="flex gap-2">
-                      <Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
-                        value={commonStore.settings.apiChatModelName}
-                        onChange={(e, data) => {
-                          commonStore.setSettings({
-                            apiChatModelName: data.value
-                          });
-                        }} />
-                      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
-                        value="..." selectedOptions={[]} expandIcon={null}
-                        onOptionSelect={(_, data) => {
-                          if (data.optionValue) {
-                            commonStore.setSettings({
-                              apiChatModelName: data.optionValue
-                            });
-                          }
-                        }}>
-                        {
-                          ['rwkv', 'gpt-4', 'gpt-4-0613', 'gpt-4-32k', 'gpt-4-32k-0613', 'gpt-3.5-turbo', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613']
-                          .map((v, i) =>
-                            <Option key={i} value={v}>{v}</Option>
-                          )
-                        }
-                      </Dropdown>
-                    </div>
-                  } />
-                <Labeled label={t('API Completion Model Name')}
-                  content={
-                    <div className="flex gap-2">
-                      <Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
-                        value={commonStore.settings.apiCompletionModelName}
-                        onChange={(e, data) => {
-                          commonStore.setSettings({
-                            apiCompletionModelName: data.value
-                          });
-                        }} />
-                      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
-                        value="..." selectedOptions={[]} expandIcon={null}
-                        onOptionSelect={(_, data) => {
-                          if (data.optionValue) {
-                            commonStore.setSettings({
-                              apiCompletionModelName: data.optionValue
-                            });
-                          }
-                        }}>
-                        {
-                          ['rwkv', 'text-davinci-003', 'text-davinci-002', 'text-curie-001', 'text-babbage-001', 'text-ada-001']
-                          .map((v, i) =>
-                            <Option key={i} value={v}>{v}</Option>
-                          )
-                        }
-                      </Dropdown>
-                    </div>
-                  } />
+                        <AdvancedGeneralSettings />
                      </div>
                    </AccordionPanel>
                  </AccordionItem>
                </Accordion>
              </div>
+            )
+        }
+      </div>
    } />
  );
 });
+
+export default Settings;
--- a/frontend/src/pages/Train.tsx
+++ b/frontend/src/pages/Train.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Input, Option, Select, Switch, Tab, TabList } from '@fluentui/react-components';
 import {
@@ -24,7 +24,6 @@ import { Labeled } from '../components/Labeled';
 import { ToolTipButton } from '../components/ToolTipButton';
 import { DataUsageSettings20Regular, Folder20Regular } from '@fluentui/react-icons';
 import { useNavigate } from 'react-router';
-import { Precision } from './Configs';
 import {
  CategoryScale,
  Chart as ChartJS,
@@ -40,6 +39,12 @@ import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';
 import { WindowShow } from '../../wailsjs/runtime';
 import { t } from 'i18next';
 import { DialogButton } from '../components/DialogButton';
+import {
+  DataProcessParameters,
+  LoraFinetuneParameters,
+  LoraFinetunePrecision,
+  TrainNavigationItem
+} from '../types/train';

 ChartJS.register(
  CategoryScale,
@@ -86,39 +91,6 @@ const addLossDataToChart = (epoch: number, loss: number) => {
  commonStore.setChartData(commonStore.chartData);
 };

-export type DataProcessParameters = {
-  dataPath: string;
-  vocabPath: string;
-}
-
-export type LoraFinetunePrecision = 'bf16' | 'fp16' | 'tf32';
-
-export type LoraFinetuneParameters = {
-  baseModel: string;
-  ctxLen: number;
-  epochSteps: number;
-  epochCount: number;
-  epochBegin: number;
-  epochSave: number;
-  microBsz: number;
-  accumGradBatches: number;
-  preFfn: boolean;
-  headQk: boolean;
-  lrInit: string;
-  lrFinal: string;
-  warmupSteps: number;
-  beta1: number;
-  beta2: number;
-  adamEps: string;
-  devices: number;
-  precision: LoraFinetunePrecision;
-  gradCp: boolean;
-  loraR: number;
-  loraAlpha: number;
-  loraDropout: number;
-  loraLoad: string
-}
-
 const loraFinetuneParametersOptions: Array<[key: keyof LoraFinetuneParameters, type: string, name: string]> = [
  ['devices', 'number', 'Devices'],
  ['precision', 'LoraFinetunePrecision', 'Precision'],
@@ -568,10 +540,6 @@ const LoraFinetune: FC = observer(() => {
  );
 });

-type TrainNavigationItem = {
-  element: ReactElement;
-};
-
 const pages: { [label: string]: TrainNavigationItem } = {
  'LoRA Finetune': {
    element: <LoraFinetune />
@@ -582,7 +550,7 @@ const pages: { [label: string]: TrainNavigationItem } = {
 };


-export const Train: FC = () => {
+const Train: FC = () => {
  const { t } = useTranslation();
  const [tab, setTab] = useState('LoRA Finetune');

@@ -607,3 +575,5 @@ export const Train: FC = () => {
    </div>
  </div>;
 };
+
+export default Train;
--- a/frontend/src/pages/defaultConfigs.ts
+++ b/frontend/src/pages/defaultConfigs.ts
@@ -1,5 +1,5 @@
-import { ModelConfig } from './Configs';
-import { CompletionPreset } from './Completion';
+import { CompletionPreset } from '../types/completion';
+import { ModelConfig } from '../types/configs';

 export const defaultCompositionPrompt = '<pad>';

--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { Configs } from './Configs';
+import { FC, lazy, LazyExoticComponent, ReactElement } from 'react';
 import {
  ArrowDownload20Regular,
  Chat20Regular,
@@ -12,21 +11,12 @@ import {
  Settings20Regular,
  Storage20Regular
 } from '@fluentui/react-icons';
-import { Home } from './Home';
-import { Chat } from './Chat';
-import { Models } from './Models';
-import { Train } from './Train';
-import { Settings } from './Settings';
-import { About } from './About';
-import { Downloads } from './Downloads';
-import { Completion } from './Completion';
-import { Composition } from './Composition';

 type NavigationItem = {
  label: string;
  path: string;
  icon: ReactElement;
-  element: ReactElement;
+  element: LazyExoticComponent<FC>;
  top: boolean;
 };

@@ -35,70 +25,70 @@ export const pages: NavigationItem[] = [
    label: 'Home',
    path: '/',
    icon: <Home20Regular />,
-    element: <Home />,
+    element: lazy(() => import('./Home')),
    top: true
  },
  {
    label: 'Chat',
    path: '/chat',
    icon: <Chat20Regular />,
-    element: <Chat />,
+    element: lazy(() => import('./Chat')),
    top: true
  },
  {
    label: 'Completion',
    path: '/completion',
    icon: <ClipboardEdit20Regular />,
-    element: <Completion />,
+    element: lazy(() => import('./Completion')),
    top: true
  },
  {
    label: 'Composition',
    path: '/composition',
    icon: <MusicNote220Regular />,
-    element: <Composition />,
+    element: lazy(() => import('./Composition')),
    top: true
  },
  {
    label: 'Configs',
    path: '/configs',
    icon: <DocumentSettings20Regular />,
-    element: <Configs />,
+    element: lazy(() => import('./Configs')),
    top: true
  },
  {
    label: 'Models',
    path: '/models',
    icon: <DataUsageSettings20Regular />,
-    element: <Models />,
+    element: lazy(() => import('./Models')),
    top: true
  },
  {
    label: 'Downloads',
    path: '/downloads',
    icon: <ArrowDownload20Regular />,
-    element: <Downloads />,
+    element: lazy(() => import('./Downloads')),
    top: true
  },
  {
    label: 'Train',
    path: '/train',
    icon: <Storage20Regular />,
-    element: <Train />,
+    element: lazy(() => import('./Train')),
    top: true
  },
  {
    label: 'Settings',
    path: '/settings',
    icon: <Settings20Regular />,
-    element: <Settings />,
+    element: lazy(() => import('./Settings')),
    top: false
  },
  {
    label: 'About',
    path: '/about',
    icon: <Info20Regular />,
-    element: <About />,
+    element: lazy(() => import('./About')),
    top: false
  }
 ];
--- a/frontend/src/startup.ts
+++ b/frontend/src/startup.ts
@@ -5,30 +5,32 @@ import { getStatus } from './apis';
 import { EventsOn, WindowSetTitle } from '../wailsjs/runtime';
 import manifest from '../../manifest.json';
 import { defaultModelConfigs, defaultModelConfigsMac } from './pages/defaultConfigs';
-import { Preset } from './pages/PresetsManager/PresetsButton';
-import { wslHandler } from './pages/Train';
 import { t } from 'i18next';
+import { Preset } from './types/presets';

 export async function startup() {
+  initPresets();
+
+  await GetPlatform().then(p => commonStore.setPlatform(p as Platform));
+
+  if (commonStore.platform !== 'web') {
    downloadProgramFiles();
    EventsOn('downloadList', (data) => {
      if (data)
        commonStore.setDownloadList(data);
    });
-  EventsOn('wsl', wslHandler);
+    EventsOn('wsl', (await import('./pages/Train')).wslHandler);
    EventsOn('wslerr', (e) => {
      console.log(e);
    });
    initLocalModelsNotify();
    initLoraModels();
-
-  initPresets();
-
    initHardwareMonitor();
+  }

-  await GetPlatform().then(p => commonStore.setPlatform(p as Platform));
  await initConfig();

+  if (commonStore.platform !== 'web') {
    initCache(true).then(initRemoteText); // depends on config customModelsPath

    if (commonStore.settings.autoUpdatesCheck) // depends on config settings
@@ -39,6 +41,7 @@ export async function startup() {
        commonStore.setStatus(status);
    });
  }
+}

 async function initRemoteText() {
  await fetch('https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner@master/manifest.json', { cache: 'no-cache' })
@@ -88,6 +91,7 @@ async function initCache(initUnfinishedModels: boolean) {

 async function initPresets() {
  await ReadJson('presets.json').then((presets: Preset[]) => {
+    if (Array.isArray(presets))
      commonStore.setPresets(presets, false);
  }).catch(() => {
  });
--- a/frontend/src/stores/commonStore.ts
+++ b/frontend/src/stores/commonStore.ts
@@ -2,21 +2,20 @@ import { makeAutoObservable } from 'mobx';
 import { getUserLanguage, isSystemLightMode, saveCache, saveConfigs, savePresets } from '../utils';
 import { WindowSetDarkTheme, WindowSetLightTheme } from '../../wailsjs/runtime';
 import manifest from '../../../manifest.json';
-import { ModelConfig } from '../pages/Configs';
-import { Conversation } from '../pages/Chat';
-import { ModelSourceItem } from '../pages/Models';
-import { DownloadStatus } from '../pages/Downloads';
-import { SettingsType } from '../pages/Settings';
-import { IntroductionContent } from '../pages/Home';
-import { AboutContent } from '../pages/About';
 import i18n from 'i18next';
-import { CompletionPreset } from '../pages/Completion';
 import { defaultCompositionPrompt, defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultConfigs';
-import commonStore from './commonStore';
-import { Preset } from '../pages/PresetsManager/PresetsButton';
-import { DataProcessParameters, LoraFinetuneParameters } from '../pages/Train';
 import { ChartData } from 'chart.js';
-import { CompositionParams } from '../pages/Composition';
+import { Preset } from '../types/presets';
+import { AboutContent } from '../types/about';
+import { Conversation } from '../types/chat';
+import { CompletionPreset } from '../types/completion';
+import { CompositionParams } from '../types/composition';
+import { ModelConfig } from '../types/configs';
+import { DownloadStatus } from '../types/downloads';
+import { IntroductionContent } from '../types/home';
+import { ModelSourceItem } from '../types/models';
+import { SettingsType } from '../types/settings';
+import { DataProcessParameters, LoraFinetuneParameters } from '../types/train';

 export enum ModelStatus {
  Offline,
@@ -37,7 +36,7 @@ export type Attachment = {
  content: string;
 }

-export type Platform = 'windows' | 'darwin' | 'linux';
+export type Platform = 'windows' | 'darwin' | 'linux' | 'web';

 class CommonStore {
  // global
@@ -103,7 +102,7 @@ class CommonStore {
    epochSteps: 200,
    epochCount: 20,
    epochBegin: 0,
-    epochSave: 2,
+    epochSave: 1,
    microBsz: 1,
    accumGradBatches: 8,
    preFfn: false,
@@ -135,7 +134,7 @@ class CommonStore {
    customModelsPath: './models',
    customPythonPath: '',
    apiUrl: '',
-    apiKey: 'sk-',
+    apiKey: '',
    apiChatModelName: 'rwkv',
    apiCompletionModelName: 'rwkv'
  };
@@ -175,7 +174,7 @@ class CommonStore {
  createModelConfig = (config: ModelConfig = defaultModelConfigs[0], saveConfig: boolean = true) => {
    if (config.name === defaultModelConfigs[0].name) {
      // deep copy
-      config = JSON.parse(JSON.stringify(commonStore.platform !== 'darwin' ? defaultModelConfigs[0] : defaultModelConfigsMac[0]));
+      config = JSON.parse(JSON.stringify(this.platform !== 'darwin' ? defaultModelConfigs[0] : defaultModelConfigsMac[0]));
      config.name = new Date().toLocaleString();
    }
    this.modelConfigs.push(config);
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -1,12 +1,10 @@
 [data-theme='dark'] {
  @import 'highlight.js/scss/github-dark.scss';
-  @import 'github-markdown-css/github-markdown-dark.css';
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
 }

 [data-theme='light'] {
  @import 'highlight.js/scss/github.scss';
-  @import 'github-markdown-css/github-markdown-light.css';
  --color-neutral-muted: rgba(150, 160, 170, 0.3);
 }

--- a/frontend/src/types/about.ts
+++ b/frontend/src/types/about.ts
@@ -0,0 +1 @@
+export type AboutContent = { [lang: string]: string }
--- a/frontend/src/types/chat.ts
+++ b/frontend/src/types/chat.ts
@@ -0,0 +1,29 @@
+export const userName = 'M E';
+export const botName = 'A I';
+export const welcomeUuid = 'welcome';
+
+export enum MessageType {
+  Normal,
+  Error
+}
+
+export type Side = 'left' | 'right'
+export type Color = 'neutral' | 'brand' | 'colorful'
+export type MessageItem = {
+  sender: string,
+  type: MessageType,
+  color: Color,
+  avatarImg?: string,
+  time: string,
+  content: string,
+  side: Side,
+  done: boolean
+}
+export type Conversation = {
+  [uuid: string]: MessageItem
+}
+export type Role = 'assistant' | 'user' | 'system';
+export type ConversationMessage = {
+  role: Role;
+  content: string;
+}
--- a/frontend/src/types/completion.ts
+++ b/frontend/src/types/completion.ts
@@ -0,0 +1,12 @@
+import { ApiParameters } from './configs';
+
+export type CompletionParams = Omit<ApiParameters, 'apiPort'> & {
+  stop: string,
+  injectStart: string,
+  injectEnd: string
+};
+export type CompletionPreset = {
+  name: string,
+  prompt: string,
+  params: CompletionParams
+}
--- a/frontend/src/types/composition.ts
+++ b/frontend/src/types/composition.ts
@@ -0,0 +1,12 @@
+import { NoteSequence } from '@magenta/music/esm/protobuf';
+
+export type CompositionParams = {
+  prompt: string,
+  maxResponseToken: number,
+  temperature: number,
+  topP: number,
+  autoPlay: boolean,
+  useLocalSoundFont: boolean,
+  midi: ArrayBuffer | null,
+  ns: NoteSequence | null
+}
--- a/frontend/src/types/configs.ts
+++ b/frontend/src/types/configs.ts
@@ -0,0 +1,29 @@
+export type ApiParameters = {
+  apiPort: number
+  maxResponseToken: number;
+  temperature: number;
+  topP: number;
+  presencePenalty: number;
+  frequencyPenalty: number;
+}
+export type Device = 'CPU' | 'CUDA' | 'CUDA-Beta' | 'WebGPU' | 'MPS' | 'Custom';
+export type Precision = 'fp16' | 'int8' | 'fp32';
+export type ModelParameters = {
+  // different models can not have the same name
+  modelName: string;
+  device: Device;
+  precision: Precision;
+  storedLayers: number;
+  maxStoredLayers: number;
+  useCustomCuda?: boolean;
+  customStrategy?: string;
+  useCustomTokenizer?: boolean;
+  customTokenizer?: string;
+}
+export type ModelConfig = {
+  // different configs can have the same name
+  name: string;
+  apiParameters: ApiParameters;
+  modelParameters: ModelParameters;
+  enableWebUI?: boolean;
+}
--- a/frontend/src/types/downloads.ts
+++ b/frontend/src/types/downloads.ts
@@ -0,0 +1,11 @@
+export type DownloadStatus = {
+  name: string;
+  path: string;
+  url: string;
+  transferred: number;
+  size: number;
+  speed: number;
+  progress: number;
+  downloading: boolean;
+  done: boolean;
+}
--- a/frontend/src/types/home.ts
+++ b/frontend/src/types/home.ts
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+
+export type IntroductionContent = {
+  [lang: string]: string
+}
+export type NavCard = {
+  label: string;
+  desc: string;
+  path: string;
+  icon: ReactElement;
+};
--- a/frontend/src/types/models.ts
+++ b/frontend/src/types/models.ts
@@ -0,0 +1,14 @@
+export type ModelSourceItem = {
+  name: string;
+  size: number;
+  lastUpdated: string;
+  desc?: { [lang: string]: string | undefined; };
+  SHA256?: string;
+  url?: string;
+  downloadUrl?: string;
+  isComplete?: boolean;
+  isLocal?: boolean;
+  localSize?: number;
+  lastUpdatedMs?: number;
+  hide?: boolean;
+};
--- a/frontend/src/types/presets.ts
+++ b/frontend/src/types/presets.ts
@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+
+import { ConversationMessage } from './chat';
+
+export type PresetType = 'chat' | 'completion' | 'chatInCompletion'
+export type Preset = {
+  name: string,
+  tag: string,
+  // if name and sourceUrl are same, it will be overridden when importing
+  sourceUrl: string,
+  desc: string,
+  avatarImg: string,
+  type: PresetType,
+  // chat
+  welcomeMessage: string,
+  messages: ConversationMessage[],
+  displayPresetMessages: boolean,
+  // completion
+  prompt: string,
+  stop: string,
+  injectStart: string,
+  injectEnd: string,
+  presystem?: boolean,
+  userName?: string,
+  assistantName?: string
+}
+export type PresetsNavigationItem = {
+  icon: ReactElement;
+  element: ReactElement;
+};
--- a/frontend/src/types/settings.ts
+++ b/frontend/src/types/settings.ts
@@ -0,0 +1,21 @@
+export const Languages = {
+  dev: 'English', // i18n default
+  zh: '简体中文',
+  ja: '日本語'
+};
+export type Language = keyof typeof Languages;
+export type SettingsType = {
+  language: Language
+  darkMode: boolean
+  autoUpdatesCheck: boolean
+  giteeUpdatesSource: boolean
+  cnMirror: boolean
+  host: string
+  dpiScaling: number
+  customModelsPath: string
+  customPythonPath: string
+  apiUrl: string
+  apiKey: string
+  apiChatModelName: string
+  apiCompletionModelName: string
+}
--- a/frontend/src/types/train.ts
+++ b/frontend/src/types/train.ts
@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+
+export type DataProcessParameters = {
+  dataPath: string;
+  vocabPath: string;
+}
+export type LoraFinetunePrecision = 'bf16' | 'fp16' | 'tf32';
+export type LoraFinetuneParameters = {
+  baseModel: string;
+  ctxLen: number;
+  epochSteps: number;
+  epochCount: number;
+  epochBegin: number;
+  epochSave: number;
+  microBsz: number;
+  accumGradBatches: number;
+  preFfn: boolean;
+  headQk: boolean;
+  lrInit: string;
+  lrFinal: string;
+  warmupSteps: number;
+  beta1: number;
+  beta2: number;
+  adamEps: string;
+  devices: number;
+  precision: LoraFinetunePrecision;
+  gradCp: boolean;
+  loraR: number;
+  loraAlpha: number;
+  loraDropout: number;
+  loraLoad: string
+}
+export type TrainNavigationItem = {
+  element: ReactElement;
+};
--- a/frontend/src/utils/index.tsx
+++ b/frontend/src/utils/index.tsx
@@ -15,13 +15,13 @@ import { toast } from 'react-toastify';
 import { t } from 'i18next';
 import { ToastOptions } from 'react-toastify/dist/types';
 import { Button } from '@fluentui/react-components';
-import { Language, Languages, SettingsType } from '../pages/Settings';
-import { ModelSourceItem } from '../pages/Models';
-import { ModelConfig, ModelParameters } from '../pages/Configs';
-import { DownloadStatus } from '../pages/Downloads';
-import { DataProcessParameters, LoraFinetuneParameters } from '../pages/Train';
 import { BrowserOpenURL, WindowShow } from '../../wailsjs/runtime';
 import { NavigateFunction } from 'react-router';
+import { ModelConfig, ModelParameters } from '../types/configs';
+import { DownloadStatus } from '../types/downloads';
+import { ModelSourceItem } from '../types/models';
+import { Language, Languages, SettingsType } from '../types/settings';
+import { DataProcessParameters, LoraFinetuneParameters } from '../types/train';

 export type Cache = {
  version: string
@@ -289,7 +289,18 @@ export function bytesToReadable(size: number) {
  else return bytesToGb(size) + ' GB';
 }

+export function getServerRoot(defaultLocalPort: number) {
+  const customApiUrl = commonStore.settings.apiUrl.trim().replace(/\/$/, '');
+  if (customApiUrl)
+    return customApiUrl;
+  if (commonStore.platform === 'web')
+    return '';
+  return `http://127.0.0.1:${defaultLocalPort}`;
+}
+
 export function absPathAsset(path: string) {
+  if (commonStore.platform === 'web')
+    return path;
  if ((path.length > 0 && path[0] === '/') ||
    (path.length > 1 && path[1] === ':')) {
    return '=>' + path;
--- a/frontend/src/webWails.js
+++ b/frontend/src/webWails.js
@@ -0,0 +1,157 @@
+function defineRuntime(name, func) {
+  window.runtime[name] = func
+}
+
+function defineApp(name, func) {
+  window.go['backend_golang']['App'][name] = func
+}
+
+if (!window.runtime) {
+  window.runtime = {}
+  document.title += ' WebUI'
+
+  // not implemented
+  defineRuntime('EventsOnMultiple', () => {
+  })
+  defineRuntime('WindowSetLightTheme', () => {
+  })
+  defineRuntime('WindowSetDarkTheme', () => {
+  })
+  defineRuntime('WindowShow', () => {
+  })
+  defineRuntime('WindowHide', () => {
+  })
+
+  // implemented
+  defineRuntime('ClipboardGetText', async () => {
+    return await navigator.clipboard.readText()
+  })
+  defineRuntime('ClipboardSetText', async (text) => {
+    await navigator.clipboard.writeText(text)
+    return true
+  })
+  defineRuntime('WindowSetTitle', (title) => {
+    document.title = title
+  })
+  defineRuntime('BrowserOpenURL', (url) => {
+    window.open(url, '_blank', 'noopener, noreferrer')
+  })
+}
+
+if (!window.go) {
+  window.go = {}
+  window.go['backend_golang'] = {}
+  window.go['backend_golang']['App'] = {}
+
+  // not implemented
+  defineApp('AddToDownloadList', async () => {
+  })
+  defineApp('ContinueDownload', async () => {
+  })
+  defineApp('ConvertData', async () => {
+  })
+  defineApp('ConvertModel', async () => {
+  })
+  defineApp('ConvertSafetensors', async () => {
+  })
+  defineApp('CopyFile', async () => {
+  })
+  defineApp('DeleteFile', async () => {
+  })
+  defineApp('DepCheck', async () => {
+  })
+  defineApp('DownloadFile', async () => {
+  })
+  defineApp('GetPyError', async () => {
+  })
+  defineApp('InstallPyDep', async () => {
+  })
+  defineApp('IsPortAvailable', async () => {
+  })
+  defineApp('MergeLora', async () => {
+  })
+  defineApp('OpenFileFolder', async () => {
+  })
+  defineApp('PauseDownload', async () => {
+  })
+  defineApp('ReadFileInfo', async () => {
+  })
+  defineApp('RestartApp', async () => {
+  })
+  defineApp('StartServer', async () => {
+  })
+  defineApp('StartWebGPUServer', async () => {
+  })
+  defineApp('UpdateApp', async () => {
+  })
+  defineApp('WslCommand', async () => {
+  })
+  defineApp('WslEnable', async () => {
+  })
+  defineApp('WslInstallUbuntu', async () => {
+  })
+  defineApp('WslIsEnabled', async () => {
+  })
+  defineApp('WslStart', async () => {
+  })
+  defineApp('WslStop', async () => {
+  })
+
+  // implemented
+  defineApp('FileExists', async () => {
+    return false
+  })
+  defineApp('GetPlatform', async () => {
+    return 'web'
+  })
+  defineApp('ListDirFiles', async () => {
+    return []
+  })
+  defineApp('OpenOpenFileDialog', async (filterPattern) => {
+    return new Promise((resolve, reject) => {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = filterPattern
+        .replaceAll('*.txt', 'text/plain')
+        .replaceAll('*.', 'application/')
+        .replaceAll(';', ',')
+
+      input.onchange = e => {
+        const file = e.target?.files[0]
+        if (file.type === 'text/plain') {
+          const reader = new FileReader()
+          reader.readAsText(file, 'UTF-8')
+
+          reader.onload = readerEvent => {
+            const content = readerEvent.target?.result
+            resolve({
+              blob: file,
+              content: content
+            })
+          }
+        } else {
+          resolve({
+            blob: file
+          })
+        }
+      }
+      input.click()
+    })
+  })
+  defineApp('OpenSaveFileDialog', async (filterPattern, defaultFileName, savedContent) => {
+    const saver = await import('file-saver')
+    saver.saveAs(new Blob([savedContent], { type: 'text/plain;charset=utf-8' }), defaultFileName)
+    return ''
+  })
+  defineApp('OpenSaveFileDialogBytes', async (filterPattern, defaultFileName, savedContent) => {
+    const saver = await import('file-saver')
+    saver.saveAs(new Blob([new Uint8Array(savedContent)], { type: 'octet/stream' }), defaultFileName)
+    return ''
+  })
+  defineApp('ReadJson', async (fileName) => {
+    return JSON.parse(localStorage.getItem(fileName))
+  })
+  defineApp('SaveJson', async (fileName, data) => {
+    localStorage.setItem(fileName, JSON.stringify(data))
+  })
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,38 @@
+// @ts-ignore
+import { dependencies } from './package.json';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';

+// dependencies that exist anywhere
+const vendor = [
+  'react', 'react-dom', 'react-router', 'react-router-dom',
+  '@fluentui/react-icons',
+  'mobx', 'mobx-react-lite',
+  'i18next', 'react-i18next',
+  'usehooks-ts', 'react-toastify',
+  'classnames'
+];
+
+const embedded = [
+  // split @fluentui/react-components by components
+  '@fluentui/react-components',
+
+  // dependencies that exist in single component
+  'react-beautiful-dnd',
+  '@magenta/music', 'html-midi-player',
+  'react-markdown', 'rehype-highlight', 'rehype-raw', 'remark-breaks', 'remark-gfm'
+];
+
+function renderChunks(deps: Record<string, string>) {
+  let chunks = {};
+  Object.keys(deps).forEach((key) => {
+    if ([...vendor, ...embedded].includes(key)) return;
+    chunks[key] = [key];
+  });
+  return chunks;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react(),
@@ -9,5 +40,16 @@ export default defineConfig({
      template: 'treemap',
      gzipSize: true,
      brotliSize: true
-    })]
+    })],
+  build: {
+    chunkSizeWarningLimit: 3000,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor,
+          ...renderChunks(dependencies)
+        }
+      }
+    }
+  }
 });
--- a/frontend/wailsjs/go/backend_golang/App.d.ts
+++ b/frontend/wailsjs/go/backend_golang/App.d.ts
@@ -52,7 +52,7 @@ export function RestartApp():Promise<void>;

 export function SaveJson(arg1:string,arg2:any):Promise<void>;

-export function StartServer(arg1:string,arg2:number,arg3:string,arg4:boolean):Promise<string>;
+export function StartServer(arg1:string,arg2:number,arg3:string,arg4:boolean,arg5:boolean):Promise<string>;

 export function StartWebGPUServer(arg1:number,arg2:string):Promise<string>;

--- a/frontend/wailsjs/go/backend_golang/App.js
+++ b/frontend/wailsjs/go/backend_golang/App.js
@@ -102,8 +102,8 @@ export function SaveJson(arg1, arg2) {
  return window['go']['backend_golang']['App']['SaveJson'](arg1, arg2);
 }

-export function StartServer(arg1, arg2, arg3, arg4) {
-  return window['go']['backend_golang']['App']['StartServer'](arg1, arg2, arg3, arg4);
+export function StartServer(arg1, arg2, arg3, arg4, arg5) {
+  return window['go']['backend_golang']['App']['StartServer'](arg1, arg2, arg3, arg4, arg5);
 }

 export function StartWebGPUServer(arg1, arg2) {
--- a/main.go
+++ b/main.go
@@ -67,6 +67,7 @@ var components embed.FS

 func main() {
 	if buildInfo, ok := debug.ReadBuildInfo(); !ok || strings.Contains(buildInfo.String(), "-ldflags") {
+		backend.CopyEmbed(assets)
 		os.RemoveAll("./py310/Lib/site-packages/cyac-1.7.dist-info")
 		backend.CopyEmbed(cyac)
 		backend.CopyEmbed(cyacInfo)
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.4.9",
+  "version": "1.5.0",
  "introduction": {
    "en": "RWKV is an open-source, commercially usable large language model with high flexibility and great potential for development.\n### About This Tool\nThis tool aims to lower the barrier of entry for using large language models, making it accessible to everyone. It provides fully automated dependency and model management. You simply need to click and run, following the instructions, to deploy a local large language model. The tool itself is very compact and only requires a single executable file for one-click deployment.\nAdditionally, this tool offers an interface that is fully compatible with the OpenAI API. This means you can use any ChatGPT client as a client for RWKV, enabling capability expansion beyond just chat functionality.\n### Preset Configuration Rules at the Bottom\nThis tool comes with a series of preset configurations to reduce complexity. The naming rules for each configuration represent the following in order: device - required VRAM/memory - model size - model language.\nFor example, \"GPU-8G-3B-EN\" indicates that this configuration is for a graphics card with 8GB of VRAM, a model size of 3 billion parameters, and it uses an English language model.\nLarger model sizes have higher performance and VRAM requirements. Among configurations with the same model size, those with higher VRAM usage will have faster runtime.\nFor example, if you have 12GB of VRAM but running the \"GPU-12G-7B-EN\" configuration is slow, you can downgrade to \"GPU-8G-3B-EN\" for a significant speed improvement.\n### About RWKV\nRWKV is an RNN with Transformer-level LLM performance, which can also be directly trained like a GPT transformer (parallelizable). And it's 100% attention-free. You only need the hidden state at position t to compute the state at position t+1. You can use the \"GPT\" mode to quickly compute the hidden state for the \"RNN\" mode.<br/>So it's combining the best of RNN and transformer - great performance, fast inference, saves VRAM, fast training, \"infinite\" ctx_len, and free sentence embedding (using the final hidden state).",
    "zh": "RWKV是一个开源且允许商用的大语言模型，灵活性很高且极具发展潜力。\n### 关于本工具\n本工具旨在降低大语言模型的使用门槛，做到人人可用，本工具提供了全自动化的依赖和模型管理，你只需要直接点击运行，跟随引导，即可完成本地大语言模型的部署，工具本身体积极小，只需要一个exe即可完成一键部署。\n此外，本工具提供了与OpenAI API完全兼容的接口，这意味着你可以把任意ChatGPT客户端用作RWKV的客户端，实现能力拓展，而不局限于聊天。\n### 底部的预设配置规则\n本工具内置了一系列预设配置，以降低使用难度，每个配置名的规则，依次代表着：设备-所需显存/内存-模型规模-模型语言。\n例如，GPU-8G-3B-CN，表示该配置用于显卡，需要8G显存，模型规模为30亿参数，使用的是中文模型。\n模型规模越大，性能要求越高，显存要求也越高，而同样模型规模的配置中，显存占用越高的，运行速度越快。\n例如当你有12G显存，但运行GPU-12G-7B-CN配置速度比较慢，可降级成GPU-8G-3B-CN，将会大幅提速。\n### 关于RWKV\nRWKV是具有Transformer级别LLM性能的RNN，也可以像GPT Transformer一样直接进行训练（可并行化）。而且它是100% attention-free的。你只需在位置t处获得隐藏状态即可计算位置t + 1处的状态。你可以使用“GPT”模式快速计算用于“RNN”模式的隐藏状态。\n因此，它将RNN和Transformer的优点结合起来 - 高性能、快速推理、节省显存、快速训练、“无限”上下文长度以及免费的语句嵌入（使用最终隐藏状态）。"
Author	SHA1	Message	Date
josc146	c7dcff52a1	release v1.5.1	2023-11-08 23:41:17 +08:00
josc146	c6ef32958e	when client webUI enabled, set server into deployment mode	2023-11-08 23:31:13 +08:00
josc146	7235e1067b	add deployment mode. If `/switch-model` with `deploy: true`, will disable /switch-model, /exit and other dangerous APIs (state cache APIs, part of midi APIs)	2023-11-08 23:29:42 +08:00
josc146	0594290b92	disable WebUI Option of WebGPU Mode (webgpu not supported yet)	2023-11-08 23:05:59 +08:00
josc146	d249a4c29a	print error.txt	2023-11-08 22:57:38 +08:00
josc146	02ba37fab4	improve api url getter	2023-11-08 22:25:41 +08:00
josc146	b5a6f8a425	set deepspeed to 0.11.2 to avoid finetune error	2023-11-08 22:20:11 +08:00
josc146	1ad86d737c	chore	2023-11-08 22:18:49 +08:00
josc146	cfa3669f6f	fix `/docs` default api params (Pydantic v2)	2023-11-07 22:53:11 +08:00
josc146	26d4c9f0ed	chore	2023-11-07 22:28:13 +08:00
josc146	3ddcf9f62e	add webui entry	2023-11-07 22:24:06 +08:00
josc146	e734fce64f	create webui assets	2023-11-07 22:23:26 +08:00
josc146	150beb578c	chore	2023-11-07 22:23:00 +08:00
josc146	db6fbe8366	add python webui server	2023-11-07 22:22:29 +08:00
josc146	46f52923c3	improve webui	2023-11-07 22:21:41 +08:00
josc146	893be5cf43	webui build	2023-11-07 19:27:21 +08:00
github-actions[bot]	384e4ce4d0	release v1.5.0	2023-11-05 13:10:50 +00:00
				`@@ -0,0 +1 @@`
				`export type AboutContent = { [lang: string]: string }`