release v1.5.3

.github/workflows/release.yml

@@ -134,8 +134,9 @@ jobs:
       - run: |
           git clone https://github.com/josStorer/ai00_rwkv_server --depth=1
           cd ai00_rwkv_server
-          cargo build --release
-          mv ./target/release/ai00_server ../backend-rust/webgpu_server
+          rustup target add aarch64-apple-darwin
+          cargo build --release --target aarch64-apple-darwin
+          mv ./target/aarch64-apple-darwin/release/ai00_server ../backend-rust/webgpu_server
           cd ..
           go install github.com/wailsapp/wails/v2/cmd/wails@latest
           rm ./backend-python/rwkv_pip/wkv_cuda.pyd

CURRENT_CHANGE.md

@@ -1,41 +1,19 @@
 ## Changes
 
-### Features
+### Changes
 
-- allow conversation with some document (.pdf, .txt) (Experimental)
-- add `/file-to-text` api
-- allow avatarImg to be local absolute path
-- base64 preset support
-
-### Upgrades
-
-- upgrade to rwkv 0.8.16 (DirectML support; rwkv 5.2 no longer needs to ensure custom cuda kernel enabled)
-- upgrade to webgpu 0.2.2 (WebGPU Mode is now recommended for AMD and Intel
-  Users) (https://github.com/josStorer/ai00_rwkv_server)
-- upgrade python packages
-
-### Improvements
-
-- improve cuda kernel compatibility (compute compatibility 5.3, Jetson Nano, Nvidia 10 Series+)
-- RWKVType now no longer relies on the file name (use emb)
-- improve message interruption and retry for Chat page
-- update sample.jsonl of LoRA finetune
-- update api stop strategy for better custom user_name and assistant_name support
-- edited chat message now is marked as Normal
-- change default World series prefix to User/Assistant
-
-### Chores
-
-- update manifest.json (RWKV-5)
-- update readme and client text description
-- add pip --no-warn-script-location
-- mark rwkv raven series as old model
-- chore
-
-### Fixes
-
-- fix linux kernel (partial revert 68228a45)
-- fix the `make` command on Linux and macOS, no longer need manual operations on the wsl.go file. (#158, #173, #207)
+- add webgpu nf4
+- add sidePanel for Chat page
+- add hf-mirror for cn users
+- use local API when it's working, even if a custom API URL is provided
+- add rwkv API URL Option
+- macos: change default webgpu backend to aarch64-apple-darwin and fix the permission issue
+- strict default_stop
+- fix state_cache of deploy mode
+- fix a finetune bug
+- improve lazy loading ui
+- display lastModelName at the top (WorkHeader)
+- chores
 
 ## Install
 

Makefile

@@ -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
+

backend-golang/app.go

@@ -4,12 +4,14 @@ import (
 	"bufio"
 	"context"
 	"errors"
+	"io"
 	"net/http"
 	"os"
 	"os/exec"
 	"path/filepath"
 	"runtime"
 	"syscall"
+	"time"
 
 	"github.com/fsnotify/fsnotify"
 	"github.com/minio/selfupdate"
@@ -43,7 +45,7 @@ func (a *App) OnStartup(ctx context.Context) {
 		a.cmdPrefix = "cd " + a.exDir + " && "
 	}
 
-	os.Chmod("./backend-rust/webgpu_server", 0777)
+	os.Chmod(a.exDir+"backend-rust/webgpu_server", 0777)
 	os.Mkdir(a.exDir+"models", os.ModePerm)
 	os.Mkdir(a.exDir+"lora-models", os.ModePerm)
 	os.Mkdir(a.exDir+"finetune/json2binidx_tool/data", os.ModePerm)
@@ -118,13 +120,50 @@ func (a *App) monitorHardware() {
 	monitor.Start()
 }
 
+type ProgressReader struct {
+	reader io.Reader
+	total  int64
+	err    error
+}
+
+func (pr *ProgressReader) Read(p []byte) (n int, err error) {
+	n, err = pr.reader.Read(p)
+	pr.err = err
+	pr.total += int64(n)
+	return
+}
+
 func (a *App) UpdateApp(url string) (broken bool, err error) {
 	resp, err := http.Get(url)
 	if err != nil {
 		return false, err
 	}
 	defer resp.Body.Close()
-	err = selfupdate.Apply(resp.Body, selfupdate.Options{})
+	pr := &ProgressReader{reader: resp.Body}
+
+	ticker := time.NewTicker(250 * time.Millisecond)
+	defer ticker.Stop()
+
+	go func() {
+		for {
+			<-ticker.C
+			wruntime.EventsEmit(a.ctx, "updateApp", &DownloadStatus{
+				Name:        filepath.Base(url),
+				Path:        "",
+				Url:         url,
+				Transferred: pr.total,
+				Size:        resp.ContentLength,
+				Speed:       0,
+				Progress:    100 * (float64(pr.total) / float64(resp.ContentLength)),
+				Downloading: pr.err == nil && pr.total < resp.ContentLength,
+				Done:        pr.total == resp.ContentLength,
+			})
+			if pr.err != nil || pr.total == resp.ContentLength {
+				break
+			}
+		}
+	}()
+	err = selfupdate.Apply(pr, selfupdate.Options{})
 	if err != nil {
 		if rerr := selfupdate.RollbackError(err); rerr != nil {
 			return true, rerr

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")
 	}

backend-golang/utils.go

@@ -5,12 +5,15 @@ import (
 	"bufio"
 	"embed"
 	"errors"
+	"fmt"
 	"io"
 	"io/fs"
+	"net"
 	"os"
 	"os/exec"
 	"path/filepath"
 	"runtime"
+	"strconv"
 	"strings"
 )
 
@@ -205,3 +208,12 @@ func Unzip(source, destination string) error {
 	}
 	return nil
 }
+
+func (a *App) IsPortAvailable(port int) bool {
+	l, err := net.Listen("tcp", fmt.Sprintf("127.0.0.1:%s", strconv.Itoa(port)))
+	if err != nil {
+		return false
+	}
+	defer l.Close()
+	return true
+}

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))

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))

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):

backend-python/main.py

@@ -2,17 +2,53 @@ import time
 
 start_time = time.time()
 
-import setuptools  # avoid warnings
+import argparse
+from typing import Union, Sequence
+
+
+def get_args(args: Union[Sequence[str], None] = None):
+    parser = argparse.ArgumentParser()
+    group = parser.add_argument_group(title="server arguments")
+    group.add_argument(
+        "--port",
+        type=int,
+        default=8000,
+        help="port to run the server on (default: 8000)",
+    )
+    group.add_argument(
+        "--host",
+        type=str,
+        default="127.0.0.1",
+        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",
+        help="whether to use rwkv-beta (default: False)",
+    )
+    args = parser.parse_args(args)
+
+    return args
+
+
+if __name__ == "__main__":
+    args = get_args()
+
+
 import os
 import sys
-import argparse
-from typing import Sequence
-from contextlib import asynccontextmanager
 
 sys.path.append(os.path.dirname(os.path.realpath(__file__)))
 
 import psutil
-from fastapi import Depends, FastAPI
+from contextlib import asynccontextmanager
+from fastapi import Depends, FastAPI, status
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 
@@ -48,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"]
@@ -63,48 +128,7 @@ 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()
-
-
-def get_args(args: Union[Sequence[str], None] = None):
-    parser = argparse.ArgumentParser()
-    group = parser.add_argument_group(title="server arguments")
-    group.add_argument(
-        "--port",
-        type=int,
-        default=8000,
-        help="port to run the server on (default: 8000)",
-    )
-    group.add_argument(
-        "--host",
-        type=str,
-        default="127.0.0.1",
-        help="host to run the server on (default: 127.0.0.1)",
-    )
-    group = parser.add_argument_group(title="mode arguments")
-    group.add_argument(
-        "--rwkv-beta",
-        action="store_true",
-        help="whether to use rwkv-beta (default: False)",
-    )
-    args = parser.parse_args(args)
-
-    return args
-
-
 if __name__ == "__main__":
-    args = get_args()
     os.environ["RWKV_RUNNER_PARAMS"] = " ".join(sys.argv[1:])
     print("--- %s seconds ---" % (time.time() - start_time))
     uvicorn.run("main:app", port=args.port, host=args.host, workers=1)

backend-python/routes/completion.py

@@ -35,6 +35,11 @@ default_stop = [
     "\n\nQ",
     "\n\nHuman",
     "\n\nBob",
+    "\n\nAssistant",
+    "\n\nAnswer",
+    "\n\nA",
+    "\n\nBot",
+    "\n\nAlice",
 ]
 
 
@@ -53,8 +58,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 +77,7 @@ class ChatCompletionBody(ModelConfigBody):
                 "frequency_penalty": 0.4,
             }
         }
+    }
 
 
 class CompletionBody(ModelConfigBody):
@@ -80,8 +86,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 +101,7 @@ class CompletionBody(ModelConfigBody):
                 "frequency_penalty": 0.4,
             }
         }
+    }
 
 
 completion_lock = Lock()
@@ -376,8 +383,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 +392,7 @@ class EmbeddingsBody(BaseModel):
                 "fast_mode": False,
             }
         }
+    }
 
 
 def embedding_base64(embedding: List[float]) -> str:

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,
+                "tokenizer": "",
                 "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))

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

backend-python/routes/state_cache.py

@@ -4,12 +4,13 @@ from fastapi import APIRouter, HTTPException, Request, Response, status
 from pydantic import BaseModel
 import gc
 import copy
+import global_var
 
 router = APIRouter()
 
 trie = None
 dtrie: Dict = {}
-max_trie_len = 3000
+max_trie_len = 300
 loop_start_id = 1  # to prevent preloaded prompts from being deleted
 loop_del_trie_id = loop_start_id
 
@@ -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
 
@@ -65,9 +73,13 @@ class AddStateBody(BaseModel):
     logits: Any
 
 
-@router.post("/add-state", tags=["State Cache"])
+# @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")
 
@@ -141,9 +157,13 @@ def __get_a_dtrie_buff_size(dtrie_v):
     return 54 * len(dtrie_v["tokens"]) + 491520 + 262144 + 28  # TODO
 
 
-@router.post("/longest-prefix-state", tags=["State Cache"])
+# @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")
 
@@ -180,9 +200,13 @@ def longest_prefix_state(body: LongestPrefixStateBody, request: Request):
         }
 
 
-@router.post("/save-state", tags=["State Cache"])
+# @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")
 

backend-python/rwkv_pip/cuda/gemm_fp16_cublas.cpp

@@ -3,6 +3,8 @@
 #include <cuda_fp16.h>
 #include <cuda_runtime.h>
 #include <torch/extension.h>
+#include <c10/cuda/CUDAGuard.h>
+#include <ATen/cuda/CUDAContext.h>
 
 #define CUBLAS_CHECK(condition)                                                \
   for (cublasStatus_t _cublas_check_status = (condition);                      \
@@ -18,26 +20,13 @@
         "CUDA error " + std::string(cudaGetErrorString(_cuda_check_status)) +  \
         " at " + std::to_string(__LINE__));
 
-cublasHandle_t get_cublas_handle() {
-  static cublasHandle_t cublas_handle = []() {
-    cublasHandle_t handle = nullptr;
-    CUBLAS_CHECK(cublasCreate(&handle));
-#if CUDA_VERSION < 11000
-    CUBLAS_CHECK(cublasSetMathMode(handle, CUBLAS_TENSOR_OP_MATH));
-#else
-    CUBLAS_CHECK(cublasSetMathMode(handle, CUBLAS_DEFAULT_MATH));
-#endif // CUDA_VERSION < 11000
-    return handle;
-  }();
-  return cublas_handle;
-}
-
 /*
   NOTE: blas gemm is column-major by default, but we need row-major output.
   The data of row-major, transposed matrix is exactly the same as the
   column-major, non-transposed matrix, and C = A * B ---> C^T = B^T * A^T
  */
 void gemm_fp16_cublas(torch::Tensor a, torch::Tensor b, torch::Tensor c) {
+  const at::cuda::OptionalCUDAGuard device_guard(device_of(a));
   const auto cuda_data_type = CUDA_R_16F;
   const auto cuda_c_data_type =
       c.dtype() == torch::kFloat32 ? CUDA_R_32F : CUDA_R_16F;
@@ -55,7 +44,7 @@ void gemm_fp16_cublas(torch::Tensor a, torch::Tensor b, torch::Tensor c) {
   const int cublas_lda = m;
   const int cublas_ldb = k;
   const int cublas_ldc = m;
-  cublasHandle_t cublas_handle = get_cublas_handle();
+  cublasHandle_t cublas_handle = at::cuda::getCurrentCUDABlasHandle();
 
 #if CUDA_VERSION >= 11000
   cublasGemmAlgo_t algo = CUBLAS_GEMM_DEFAULT;

backend-python/rwkv_pip/cuda/rwkv5_op.cpp

@@ -1,5 +1,6 @@
 #include <torch/extension.h>
 #include "ATen/ATen.h"
+#include <c10/cuda/CUDAGuard.h>
 typedef at::BFloat16 bf16;
 typedef at::Half fp16;
 typedef float fp32;
@@ -9,12 +10,15 @@ void cuda_forward_fp16(int B, int T, int C, int H, float *state, fp16 *r, fp16 *
 void cuda_forward_fp32(int B, int T, int C, int H, float *state, fp32 *r, fp32 *k, fp32 *v, float *w, fp32 *u, fp32 *y);
 
 void forward_bf16(int64_t B, int64_t T, int64_t C, int64_t H, torch::Tensor &state, torch::Tensor &r, torch::Tensor &k, torch::Tensor &v, torch::Tensor &w, torch::Tensor &u, torch::Tensor &y) {
+    const at::cuda::OptionalCUDAGuard device_guard(device_of(state));
     cuda_forward_bf16(B, T, C, H, state.data_ptr<float>(), r.data_ptr<bf16>(), k.data_ptr<bf16>(), v.data_ptr<bf16>(), w.data_ptr<float>(), u.data_ptr<bf16>(), y.data_ptr<bf16>());
 }
 void forward_fp16(int64_t B, int64_t T, int64_t C, int64_t H, torch::Tensor &state, torch::Tensor &r, torch::Tensor &k, torch::Tensor &v, torch::Tensor &w, torch::Tensor &u, torch::Tensor &y) {
+    const at::cuda::OptionalCUDAGuard device_guard(device_of(state));
     cuda_forward_fp16(B, T, C, H, state.data_ptr<float>(), r.data_ptr<fp16>(), k.data_ptr<fp16>(), v.data_ptr<fp16>(), w.data_ptr<float>(), u.data_ptr<fp16>(), y.data_ptr<fp16>());
 }
 void forward_fp32(int64_t B, int64_t T, int64_t C, int64_t H, torch::Tensor &state, torch::Tensor &r, torch::Tensor &k, torch::Tensor &v, torch::Tensor &w, torch::Tensor &u, torch::Tensor &y) {
+    const at::cuda::OptionalCUDAGuard device_guard(device_of(state));
     cuda_forward_fp32(B, T, C, H, state.data_ptr<float>(), r.data_ptr<fp32>(), k.data_ptr<fp32>(), v.data_ptr<fp32>(), w.data_ptr<float>(), u.data_ptr<fp32>(), y.data_ptr<fp32>());
 }
 

backend-python/rwkv_pip/model.py

@@ -171,10 +171,86 @@ if os.environ.get("RWKV_CUDA_ON") == "1":
 else:
     os.environ["RWKV_CUDA_ON"] = "0"
 
-if os.environ.get("RWKV_CUDA_ON") == "1" and not DISABLE_CUBLAS_GEMM:
 
 @MyStatic
-    def gemm(a, b, output_dtype: Optional[torch.dtype] = None):
+def torch_mm8_seq(x, w, mx, rx, my, ry):
+    return x @ ((w.to(dtype=x.dtype) + 0.5) * ry * rx + my + mx)
+
+
+@MyStatic
+def torch_mm8_one(x, w, mx, rx, my, ry):
+    return x @ ((w.to(dtype=x.dtype) + 0.5) * ry * rx + my + mx)
+
+
+if os.environ.get("RWKV_CUDA_ON") == "1":
+
+    @MyStatic
+    def mm8_seq(x, w, mx, rx, my, ry):
+        if w.device.type == "cuda" and x.dtype == torch.float16:
+            B, N, M = x.shape[0], w.shape[0], w.shape[1]
+            return cuda_mm8_seq(B, N, M, x, w, mx, rx, my, ry)
+        else:
+            return torch_mm8_seq(x, w, mx, rx, my, ry)
+
+    @MyStatic
+    def mm8_one(x, w, mx, rx, my, ry):
+        if w.device.type == "cuda":
+            N, M = w.shape[0], w.shape[1]
+            return cuda_mm8_one(N, M, x, w, mx, rx, my, ry)
+        else:
+            return torch_mm8_one(x, w, mx, rx, my, ry)
+
+else:
+
+    @MyStatic
+    def mm8_seq(x, w, mx, rx, my, ry):
+        return torch_mm8_seq(x, w, mx, rx, my, ry)
+
+    @MyStatic
+    def mm8_one(x, w, mx, rx, my, ry):
+        return torch_mm8_one(x, w, mx, rx, my, ry)
+
+
+def mm8(
+    x: torch.Tensor,
+    w: torch.Tensor,
+    mx: torch.Tensor,
+    rx: torch.Tensor,
+    my: torch.Tensor,
+    ry: torch.Tensor,
+):
+    if len(x.shape) == 1:
+        return mm8_one(x, w, mx, rx, my, ry)
+    return mm8_seq(x, w, mx, rx, my, ry)
+
+
+def matmul(
+    a,
+    b,
+    mx: Optional[torch.Tensor] = None,
+    rx: Optional[torch.Tensor] = None,
+    my: Optional[torch.Tensor] = None,
+    ry: Optional[torch.Tensor] = None,
+    output_dtype: Optional[torch.dtype] = None,
+) -> torch.Tensor:
+    if output_dtype is None:
+        output_dtype = a.dtype
+    if b.dtype in [torch.float16, torch.bfloat16, torch.float32]:
+        assert a.dtype == b.dtype
+        return matmul_float(a, b, output_dtype=output_dtype)
+    elif b.dtype == torch.uint8:
+        assert mx is not None
+        assert rx is not None
+        assert my is not None
+        assert ry is not None
+        return mm8(a, b, mx, rx, my, ry).to(output_dtype)
+    else:
+        raise ValueError("Unsupported dtype")
+
+
+if os.environ.get("RWKV_CUDA_ON") == "1" and not DISABLE_CUBLAS_GEMM:
+
+    def matmul_float(a, b, output_dtype: Optional[torch.dtype] = None):
         if output_dtype is None:
             output_dtype = a.dtype
         if a.dtype == b.dtype == torch.float16 and a.device.type == "cuda":
@@ -203,9 +279,7 @@ if os.environ.get("RWKV_CUDA_ON") == "1" and not DISABLE_CUBLAS_GEMM:
 
 else:
 
-    def gemm(a, b, output_dtype: Optional[torch.dtype] = None):
-        if output_dtype is None:
-            output_dtype = a.dtype
+    def matmul_float(a, b, output_dtype: Optional[torch.dtype] = None):
         return (a @ b).to(output_dtype)
 
 
@@ -644,42 +718,6 @@ class RWKV(MyModule):
     def RUN_RWKV_5(self, B, T, C, H, state, r, k, v, w, u):
         return self.RWKV_5.apply(B, T, C, H, state, r, k, v, w, u)
 
-    @MyFunction
-    def torch_mm8_seq(self, x, w, mx, rx, my, ry):
-        return x @ ((w.to(dtype=x.dtype) + 0.5) * ry * rx + my + mx)
-
-    @MyFunction
-    def torch_mm8_one(self, x, w, mx, rx, my, ry):
-        return x @ ((w.to(dtype=x.dtype) + 0.5) * ry * rx + my + mx)
-
-    if os.environ.get("RWKV_CUDA_ON") == "1":
-
-        @MyFunction
-        def mm8_seq(self, x, w, mx, rx, my, ry):
-            if w.device.type == "cuda" and x.dtype == torch.float16:
-                B, N, M = x.shape[0], w.shape[0], w.shape[1]
-                return cuda_mm8_seq(B, N, M, x, w, mx, rx, my, ry)
-            else:
-                return self.torch_mm8_seq(x, w, mx, rx, my, ry)
-
-        @MyFunction
-        def mm8_one(self, x, w, mx, rx, my, ry):
-            if w.device.type == "cuda":
-                N, M = w.shape[0], w.shape[1]
-                return cuda_mm8_one(N, M, x, w, mx, rx, my, ry)
-            else:
-                return self.torch_mm8_one(x, w, mx, rx, my, ry)
-
-    else:
-
-        @MyFunction
-        def mm8_seq(self, x, w, mx, rx, my, ry):
-            return self.torch_mm8_seq(x, w, mx, rx, my, ry)
-
-        @MyFunction
-        def mm8_one(self, x, w, mx, rx, my, ry):
-            return self.torch_mm8_one(x, w, mx, rx, my, ry)
-
     ########################################################################################################
 
     @MyFunction
@@ -711,43 +749,9 @@ class RWKV(MyModule):
         kx = xx * k_mix + sx * (1 - k_mix)
         rx = xx * r_mix + sx * (1 - r_mix)
 
-        r = torch.sigmoid(gemm(rx, rw))
-        vx = torch.square(torch.relu(gemm(kx, kw)))
-        out = r * gemm(vx, vw)
-        return x + out, xx
-
-    @MyFunction
-    def ffn_one_i8(
-        self,
-        x,
-        sx,
-        ln_w,
-        ln_b,
-        k_mix,
-        r_mix,
-        kw,
-        vw,
-        rw,
-        kmx,
-        krx,
-        kmy,
-        kry,
-        vmx,
-        vrx,
-        vmy,
-        vry,
-        rmx,
-        rrx,
-        rmy,
-        rry,
-    ):
-        xx = F.layer_norm(x, (x.shape[-1],), weight=ln_w, bias=ln_b)
-        kx = xx * k_mix + sx * (1 - k_mix)
-        rx = xx * r_mix + sx * (1 - r_mix)
-
-        r = torch.sigmoid(self.mm8_one(rx, rw, rmx, rrx, rmy, rry))
-        vx = torch.square(torch.relu(self.mm8_one(kx, kw, kmx, krx, kmy, kry)))
-        out = r * (self.mm8_one(vx, vw, vmx, vrx, vmy, vry))
+        r = torch.sigmoid(matmul(rx, rw, rmx, rrx, rmy, rry))
+        vx = torch.square(torch.relu(matmul(kx, kw, kmx, krx, kmy, kry)))
+        out = r * matmul(vx, vw, vmx, vrx, vmy, vry)
         return x + out, xx
 
     ########################################################################################################
@@ -782,44 +786,9 @@ class RWKV(MyModule):
         kx = xx * k_mix + sx * (1 - k_mix)
         rx = xx * r_mix + sx * (1 - r_mix)
 
-        r = torch.sigmoid(gemm(rx, rw))
-        vx = torch.square(torch.relu(gemm(kx, kw)))
-        out = r * gemm(vx, vw)
-        return x + out, xx[-1, :]
-
-    @MyFunction
-    def ffn_seq_i8(
-        self,
-        x,
-        sx,
-        ln_w,
-        ln_b,
-        k_mix,
-        r_mix,
-        kw,
-        vw,
-        rw,
-        kmx,
-        krx,
-        kmy,
-        kry,
-        vmx,
-        vrx,
-        vmy,
-        vry,
-        rmx,
-        rrx,
-        rmy,
-        rry,
-    ):
-        xx = F.layer_norm(x, (x.shape[-1],), weight=ln_w, bias=ln_b)
-        sx = torch.cat((sx.unsqueeze(0), xx[:-1, :]))
-        kx = xx * k_mix + sx * (1 - k_mix)
-        rx = xx * r_mix + sx * (1 - r_mix)
-
-        r = torch.sigmoid(self.mm8_seq(rx, rw, rmx, rrx, rmy, rry))
-        vx = torch.square(torch.relu(self.mm8_seq(kx, kw, kmx, krx, kmy, kry)))
-        out = r * (self.mm8_seq(vx, vw, vmx, vrx, vmy, vry))
+        r = torch.sigmoid(matmul(rx, rw, rmx, rrx, rmy, rry))
+        vx = torch.square(torch.relu(matmul(kx, kw, kmx, krx, kmy, kry)))
+        out = r * matmul(vx, vw, vmx, vrx, vmy, vry)
         return x + out, xx[-1, :]
 
     ########################################################################################################
@@ -865,9 +834,9 @@ class RWKV(MyModule):
         vx = xx * v_mix + sx * (1 - v_mix)
         rx = xx * r_mix + sx * (1 - r_mix)
 
-        r = torch.sigmoid(gemm(rx, rw))
-        k = gemm(kx, kw, output_dtype=torch.float32)
-        v = gemm(vx, vw, output_dtype=torch.float32)
+        r = torch.sigmoid(matmul(rx, rw, rmx, rrx, rmy, rry))
+        k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
+        v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
 
         ww = t_first + k
         p = torch.maximum(pp, ww)
@@ -879,65 +848,7 @@ class RWKV(MyModule):
         e1 = torch.exp(ww - p)
         e2 = torch.exp(k - p)
 
-        out = gemm(r * wkv, ow)
-        return x + out, xx, e1 * aa + e2 * v, e1 * bb + e2, p
-
-    @MyFunction
-    def att_one_i8(
-        self,
-        x,
-        sx,
-        aa,
-        bb,
-        pp,
-        ln_w,
-        ln_b,
-        k_mix,
-        v_mix,
-        r_mix,
-        t_decay,
-        t_first,
-        kw,
-        vw,
-        rw,
-        ow,
-        kmx,
-        krx,
-        kmy,
-        kry,
-        vmx,
-        vrx,
-        vmy,
-        vry,
-        rmx,
-        rrx,
-        rmy,
-        rry,
-        omx,
-        orx,
-        omy,
-        ory,
-    ):
-        xx = F.layer_norm(x, (x.shape[-1],), weight=ln_w, bias=ln_b)
-        kx = xx * k_mix + sx * (1 - k_mix)
-        vx = xx * v_mix + sx * (1 - v_mix)
-        rx = xx * r_mix + sx * (1 - r_mix)
-
-        r = torch.sigmoid(self.mm8_one(rx, rw, rmx, rrx, rmy, rry))
-        k = (self.mm8_one(kx, kw, kmx, krx, kmy, kry)).float()
-        v = (self.mm8_one(vx, vw, vmx, vrx, vmy, vry)).float()
-
-        ww = t_first + k
-        p = torch.maximum(pp, ww)
-        e1 = torch.exp(pp - p)
-        e2 = torch.exp(ww - p)
-        wkv = ((e1 * aa + e2 * v) / (e1 * bb + e2)).to(dtype=x.dtype)
-        ww = t_decay + pp
-        p = torch.maximum(ww, k)
-        e1 = torch.exp(ww - p)
-        e2 = torch.exp(k - p)
-
-        out = self.mm8_one(r * wkv, ow, omx, orx, omy, ory)
+        out = matmul(r * wkv, ow, omx, orx, omy, ory)
         return x + out, xx, e1 * aa + e2 * v, e1 * bb + e2, p
 
     ########################################################################################################
@@ -984,9 +895,9 @@ class RWKV(MyModule):
         vx = xx * v_mix + sx * (1 - v_mix)
         rx = xx * r_mix + sx * (1 - r_mix)
 
-        r = torch.sigmoid(gemm(rx, rw))
-        k = gemm(kx, kw, output_dtype=torch.float32)
-        v = gemm(vx, vw, output_dtype=torch.float32)
+        r = torch.sigmoid(matmul(rx, rw, rmx, rrx, rmy, rry))
+        k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
+        v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
 
         T = x.shape[0]
         for t in range(T):
@@ -1004,72 +915,7 @@ class RWKV(MyModule):
             aa = e1 * aa + e2 * vv
             bb = e1 * bb + e2
             pp = p
-        out = gemm(r * sx, ow)
-        return x + out, xx[-1, :], aa, bb, pp
-
-    @MyFunction
-    def att_seq_i8(
-        self,
-        x,
-        sx,
-        aa,
-        bb,
-        pp,
-        ln_w,
-        ln_b,
-        k_mix,
-        v_mix,
-        r_mix,
-        t_decay,
-        t_first,
-        kw,
-        vw,
-        rw,
-        ow,
-        kmx,
-        krx,
-        kmy,
-        kry,
-        vmx,
-        vrx,
-        vmy,
-        vry,
-        rmx,
-        rrx,
-        rmy,
-        rry,
-        omx,
-        orx,
-        omy,
-        ory,
-    ):
-        xx = F.layer_norm(x, (x.shape[-1],), weight=ln_w, bias=ln_b)
-        sx = torch.cat((sx.unsqueeze(0), xx[:-1, :]))
-        kx = xx * k_mix + sx * (1 - k_mix)
-        vx = xx * v_mix + sx * (1 - v_mix)
-        rx = xx * r_mix + sx * (1 - r_mix)
-
-        r = torch.sigmoid(self.mm8_seq(rx, rw, rmx, rrx, rmy, rry))
-        k = self.mm8_seq(kx, kw, kmx, krx, kmy, kry).float()
-        v = self.mm8_seq(vx, vw, vmx, vrx, vmy, vry).float()
-
-        T = x.shape[0]
-        for t in range(T):
-            kk = k[t]
-            vv = v[t]
-            ww = t_first + kk
-            p = torch.maximum(pp, ww)
-            e1 = torch.exp(pp - p)
-            e2 = torch.exp(ww - p)
-            sx[t] = ((e1 * aa + e2 * vv) / (e1 * bb + e2)).to(dtype=x.dtype)
-            ww = t_decay + pp
-            p = torch.maximum(ww, kk)
-            e1 = torch.exp(ww - p)
-            e2 = torch.exp(kk - p)
-            aa = e1 * aa + e2 * vv
-            bb = e1 * bb + e2
-            pp = p
-        out = self.mm8_seq(r * sx, ow, omx, orx, omy, ory)
+        out = matmul(r * sx, ow, omx, orx, omy, ory)
         return x + out, xx[-1, :], aa, bb, pp
 
     ########################################################################################################
@@ -1118,11 +964,11 @@ class RWKV(MyModule):
         H = t_decay.shape[0]
         S = x.shape[-1] // H
 
-        r = gemm(rx, rw, output_dtype=torch.float32).view(H, 1, S)
-        k = gemm(kx, kw, output_dtype=torch.float32).view(H, S, 1)
-        v = gemm(vx, vw, output_dtype=torch.float32).view(H, 1, S)
+        r = matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32).view(H, 1, S)
+        k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32).view(H, S, 1)
+        v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32).view(H, 1, S)
 
-        a = gemm(k, v)
+        a = matmul(k, v)
         out = r @ (t_first * a + s)
         s = a + t_decay * s
 
@@ -1131,7 +977,7 @@ class RWKV(MyModule):
             out.unsqueeze(0), num_groups=H, weight=lx_w, bias=lx_b
         ).squeeze(0)
         out = out.to(dtype=x.dtype)
-        out = gemm(out, ow)
+        out = matmul(out, ow, omx, orx, omy, ory)
 
         return x + out, xx, s
 
@@ -1194,14 +1040,22 @@ class RWKV(MyModule):
         w = w[:, :-T].reshape(-1, T, 2 * T - 1)
         w = w[:, :, T - 1 :].reshape(H, T, T)
 
-        r = gemm(rx, rw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
+        r = (
+            matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
         k = (
-            gemm(kx, kw, output_dtype=torch.float32)
+            matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
             .view(T, H, S)
             .transpose(0, 1)
             .transpose(-2, -1)
         )
-        v = gemm(vx, vw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
+        v = (
+            matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
 
         out = ((r @ k) * w) @ v + (r @ s) * wb
         s = ws * s + (k * wk) @ v
@@ -1209,7 +1063,7 @@ class RWKV(MyModule):
         out = out.transpose(0, 1).contiguous().reshape(T, H * S)
         out = F.group_norm(out, num_groups=H, weight=lx_w, bias=lx_b)
         out = out.to(dtype=x.dtype)
-        out = gemm(out, ow)
+        out = matmul(out, ow, omx, orx, omy, ory)
 
         return x + out, xx[-1, :], s
 
@@ -1248,6 +1102,10 @@ class RWKV(MyModule):
         rrx,
         rmy,
         rry,
+        gmx,
+        grx,
+        gmy,
+        gry,
         omx,
         orx,
         omy,
@@ -1262,12 +1120,12 @@ class RWKV(MyModule):
         H = t_decay.shape[0]
         S = x.shape[-1] // H
 
-        r = gemm(rx, rw, output_dtype=torch.float32).view(H, 1, S)
-        k = gemm(kx, kw, output_dtype=torch.float32).view(H, S, 1)
-        v = gemm(vx, vw, output_dtype=torch.float32).view(H, 1, S)
-        g = F.silu(gemm(gx, gw))
+        r = matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32).view(H, 1, S)
+        k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32).view(H, S, 1)
+        v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32).view(H, 1, S)
+        g = F.silu(matmul(gx, gw, gmx, grx, gmy, gry))
 
-        a = gemm(k, v)
+        a = matmul(k, v)
         out = r @ (t_first * a + s)
         s = a + t_decay * s
 
@@ -1276,7 +1134,7 @@ class RWKV(MyModule):
             out.unsqueeze(0), num_groups=H, weight=lx_w, bias=lx_b
         ).squeeze(0)
         out = out.to(dtype=x.dtype) * g
-        out = gemm(out, ow)
+        out = matmul(out, ow, omx, orx, omy, ory)
 
         return x + out, xx, s
 
@@ -1313,6 +1171,10 @@ class RWKV(MyModule):
         rrx,
         rmy,
         rry,
+        gmx,
+        grx,
+        gmy,
+        gry,
         omx,
         orx,
         omy,
@@ -1342,15 +1204,23 @@ class RWKV(MyModule):
         w = w[:, :-T].reshape(-1, T, 2 * T - 1)
         w = w[:, :, T - 1 :].reshape(H, T, T)
 
-        r = gemm(rx, rw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
+        r = (
+            matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
         k = (
-            gemm(kx, kw, output_dtype=torch.float32)
+            matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
             .view(T, H, S)
             .transpose(0, 1)
             .transpose(-2, -1)
         )
-        v = gemm(vx, vw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
-        g = F.silu(gemm(gx, gw))
+        v = (
+            matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
+        g = F.silu(matmul(gx, gw, gmx, grx, gmy, gry))
 
         out = ((r @ k) * w) @ v + (r @ s) * wb
         s = ws * s + (k * wk) @ v
@@ -1358,7 +1228,7 @@ class RWKV(MyModule):
         out = out.transpose(0, 1).contiguous().reshape(T, H * S)
         out = F.group_norm(out, num_groups=H, weight=lx_w, bias=lx_b)
         out = out.to(dtype=x.dtype) * g
-        out = gemm(out, ow)
+        out = matmul(out, ow, omx, orx, omy, ory)
 
         return x + out, xx[-1, :], s
 
@@ -1397,6 +1267,10 @@ class RWKV(MyModule):
         rrx,
         rmy,
         rry,
+        gmx,
+        grx,
+        gmy,
+        gry,
         omx,
         orx,
         omy,
@@ -1413,29 +1287,37 @@ class RWKV(MyModule):
         S = x.shape[-1] // H
         T = x.shape[0]
 
-        r = gemm(rx, rw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
+        r = (
+            matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
         k = (
-            gemm(kx, kw, output_dtype=torch.float32)
+            matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
             .view(T, H, S)
             .transpose(0, 1)
             .transpose(-2, -1)
         )
-        v = gemm(vx, vw, output_dtype=torch.float32).view(T, H, S).transpose(0, 1)
-        g = F.silu(gemm(gx, gw))
+        v = (
+            matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
+            .view(T, H, S)
+            .transpose(0, 1)
+        )
+        g = F.silu(matmul(gx, gw, gmx, grx, gmy, gry))
 
         out = torch.empty((T, H, S), dtype=r.dtype, device=r.device)
         for t in range(T):
             rt = r[:, t : t + 1, :]
             kt = k[:, :, t : t + 1]
             vt = v[:, t : t + 1, :]
-            at = gemm(kt, vt)
+            at = matmul(kt, vt)
             out[t] = (rt @ (t_first * at + s)).squeeze(1)
             s = at + t_decay * s
 
         out = out.reshape(T, H * S)
         out = F.group_norm(out, num_groups=H, weight=lx_w, bias=lx_b)
         out = out.to(dtype=x.dtype) * g
-        out = gemm(out, ow)
+        out = matmul(out, ow, omx, orx, omy, ory)
 
         return x + out, xx[-1, :], s
 
@@ -1486,63 +1368,12 @@ class RWKV(MyModule):
             vx = xx * v_mix + sx * (1 - v_mix)
             rx = xx * r_mix + sx * (1 - r_mix)
 
-            r = torch.sigmoid(gemm(rx, rw))
-            k = gemm(kx, kw, output_dtype=torch.float32)
-            v = gemm(vx, vw, output_dtype=torch.float32)
-            y, aa, bb, pp = cuda_wkv(T, aa.shape[0], t_decay, t_first, k, v, aa, bb, pp)
-
-            out = gemm(r * y.to(x.dtype), ow)
-            return x + out, xx[-1, :], aa, bb, pp
-
-        @MyFunction
-        def cuda_att_seq_i8(
-            self,
-            x,
-            sx,
-            aa,
-            bb,
-            pp,
-            ln_w,
-            ln_b,
-            k_mix,
-            v_mix,
-            r_mix,
-            t_decay,
-            t_first,
-            kw,
-            vw,
-            rw,
-            ow,
-            kmx,
-            krx,
-            kmy,
-            kry,
-            vmx,
-            vrx,
-            vmy,
-            vry,
-            rmx,
-            rrx,
-            rmy,
-            rry,
-            omx,
-            orx,
-            omy,
-            ory,
-        ):
-            T, C = x.shape
-            xx = F.layer_norm(x, (C,), weight=ln_w, bias=ln_b)
-            sx = torch.cat((sx.unsqueeze(0), xx[:-1, :]))
-            kx = xx * k_mix + sx * (1 - k_mix)
-            vx = xx * v_mix + sx * (1 - v_mix)
-            rx = xx * r_mix + sx * (1 - r_mix)
-
-            r = torch.sigmoid(self.mm8_seq(rx, rw, rmx, rrx, rmy, rry))
-            k = self.mm8_seq(kx, kw, kmx, krx, kmy, kry)
-            v = self.mm8_seq(vx, vw, vmx, vrx, vmy, vry)
+            r = torch.sigmoid(matmul(rx, rw, rmx, rrx, rmy, rry))
+            k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
+            v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
             y, aa, bb, pp = cuda_wkv(T, C, t_decay, t_first, k, v, aa, bb, pp)
 
-            out = self.mm8_seq(r * y, ow, omx, orx, omy, ory)
+            out = matmul(r * y.to(x.dtype), ow, omx, orx, omy, ory)
             return x + out, xx[-1, :], aa, bb, pp
 
         # NOTE: decorate with @MyFunction causes JIT error
@@ -1578,6 +1409,10 @@ class RWKV(MyModule):
             rrx,
             rmy,
             rry,
+            gmx,
+            grx,
+            gmy,
+            gry,
             omx,
             orx,
             omy,
@@ -1594,10 +1429,10 @@ class RWKV(MyModule):
             N = x.shape[-1] // H
             T = x.shape[0]
 
-            r = gemm(rx, rw, output_dtype=torch.float32)
-            k = gemm(kx, kw, output_dtype=torch.float32)
-            v = gemm(vx, vw, output_dtype=torch.float32)
-            g = F.silu(gemm(gx, gw))
+            r = matmul(rx, rw, rmx, rrx, rmy, rry, output_dtype=torch.float32)
+            k = matmul(kx, kw, kmx, krx, kmy, kry, output_dtype=torch.float32)
+            v = matmul(vx, vw, vmx, vrx, vmy, vry, output_dtype=torch.float32)
+            g = F.silu(matmul(gx, gw, gmx, grx, gmy, gry))
 
             out, s = self.RUN_RWKV_5(
                 1,
@@ -1616,7 +1451,7 @@ class RWKV(MyModule):
             out = out.reshape(T, H * N)
             out = F.group_norm(out, num_groups=H, weight=lx_w, bias=lx_b)
             out = out.to(dtype=x.dtype) * g
-            out = gemm(out, ow)
+            out = matmul(out, ow, omx, orx, omy, ory)
 
             return x + out, xx[-1, :], s
 
@@ -1703,13 +1538,9 @@ class RWKV(MyModule):
                         "RWKV_CUDA_ON"
                     ] == "1" and "cuda" in str(dev)
                     if cuda_applicable:
-                        ATT = (
-                            self.cuda_att_seq
-                            if wtype != torch.uint8
-                            else self.cuda_att_seq_i8
-                        )
+                        ATT = self.cuda_att_seq
                     else:
-                        ATT = self.att_seq if wtype != torch.uint8 else self.att_seq_i8
+                        ATT = self.att_seq
                     if self.version == 5:
                         ATT = self.att_seq_v5
                     elif self.version == 5.1:
@@ -1718,16 +1549,16 @@ class RWKV(MyModule):
                         ATT = self.att_seq_v5_2
                         if cuda_applicable:
                             ATT = self.cuda_att_seq_v5_2
-                    FFN = self.ffn_seq if wtype != torch.uint8 else self.ffn_seq_i8
+                    FFN = self.ffn_seq
                 else:
-                    ATT = self.att_one if wtype != torch.uint8 else self.att_one_i8
+                    ATT = self.att_one
                     if self.version == 5:
                         ATT = self.att_one_v5
                     elif self.version == 5.1:
                         ATT = self.att_one_v5_1
                     elif self.version == 5.2:
                         ATT = self.att_one_v5_1  # same as v5.1
-                    FFN = self.ffn_one if wtype != torch.uint8 else self.ffn_one_i8
+                    FFN = self.ffn_one
 
                 x = x.to(dtype=atype, device=dev)
 
@@ -1872,6 +1703,10 @@ class RWKV(MyModule):
                         rrx,
                         rmy,
                         rry,
+                        gmx,
+                        grx,
+                        gmy,
+                        gry,
                         omx,
                         orx,
                         omy,
@@ -1944,7 +1779,7 @@ class RWKV(MyModule):
                 x = x @ w["head.weight"]
             else:
                 if seq_mode and full_output:
-                    x = self.mm8_seq(
+                    x = mm8_seq(
                         x,
                         w["head.weight"],
                         w["head.weight_mx"],
@@ -1953,7 +1788,7 @@ class RWKV(MyModule):
                         w["head.weight_ry"],
                     )
                 else:
-                    x = self.mm8_one(
+                    x = mm8_one(
                         x,
                         w["head.weight"],
                         w["head.weight_mx"],

backend-python/rwkv_pip/utils.py

@@ -81,8 +81,9 @@ class PIPELINE:
     def sample_logits(self, logits, temperature=1.0, top_p=0.85, top_k=0):
         probs = F.softmax(logits.float(), dim=-1)
         top_k = int(top_k)
-        if probs.device == torch.device("cpu"):
-            probs = probs.numpy()
+        # 'privateuseone' is the type of custom devices like `torch_directml.device()`
+        if probs.device.type in ["cpu", "privateuseone"]:
+            probs = probs.cpu().numpy()
             sorted_ids = np.argsort(probs)
             sorted_probs = probs[sorted_ids][::-1]
             cumulative_probs = np.cumsum(sorted_probs)

backend-python/utils/log.py

@@ -10,7 +10,7 @@ logger = logging.getLogger()
 logger.setLevel(logging.INFO)
 formatter = logging.Formatter("%(asctime)s - %(levelname)s\n%(message)s")
 fh = logging.handlers.RotatingFileHandler(
-    "api.log", mode="a", maxBytes=3 * 1024 * 1024, backupCount=3
+    "api.log", mode="a", maxBytes=3 * 1024 * 1024, backupCount=3, encoding="utf-8"
 )
 fh.setFormatter(formatter)
 logger.addHandler(fh)

backend-python/utils/ngrok.py

@@ -1,11 +1,13 @@
 import os
-import sys
+import global_var
 
 
 def ngrok_connect():
     from pyngrok import ngrok, conf
 
-    conf.set_default(conf.PyngrokConfig(ngrok_path="./ngrok"))
+    conf.set_default(
+        conf.PyngrokConfig(ngrok_path="./ngrok.exe" if os.name == "nt" else "./ngrok")
+    )
     ngrok.set_auth_token(os.environ["ngrok_token"])
-    http_tunnel = ngrok.connect(8000 if len(sys.argv) == 1 else int(sys.argv[1]))
-    print(http_tunnel.public_url)
+    http_tunnel = ngrok.connect(global_var.get(global_var.Args).port)
+    print(f"ngrok url: {http_tunnel.public_url}")

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):

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")

deploy-examples/ChatGPT-Next-Web/setup.sh

@@ -9,7 +9,7 @@ cd RWKV-Next-Web
 git clone https://github.com/josStorer/RWKV-Runner --depth=1
 python3 -m pip install torch torchvision torchaudio
 python3 -m pip install -r RWKV-Runner/backend-python/requirements.txt
-python3 ./RWKV-Runner/backend-python/main.py > log.txt &
+python3 ./RWKV-Runner/backend-python/main.py > log.txt & # this is only an example, you should use screen or other tools to run it in background
 
 if [ ! -d RWKV-Runner/models ]; then
     mkdir RWKV-Runner/models
@@ -22,6 +22,6 @@ yarn install
 yarn build
 export PROXY_URL=""
 export BASE_URL=http://127.0.0.1:8000
-yarn start &
+yarn start & # this is only an example, you should use screen or other tools to run it in background
 
 curl http://127.0.0.1:8000/switch-model -X POST -H "Content-Type: application/json" -d '{"model":"./RWKV-Runner/models/RWKV-4-World-0.1B-v1-20230520-ctx4096.pth","strategy":"cpu fp32"}'

deploy-examples/RWKV-Runner-WebUI/setup.bat

@@ -0,0 +1,19 @@
+: install git python3.10 npm by yourself
+: change model and strategy according to your hardware
+
+git clone https://github.com/josStorer/RWKV-Runner --depth=1
+python -m pip install torch==1.13.1 torchvision==0.14.1 torchaudio==0.13.1 --index-url https://download.pytorch.org/whl/cu117
+python -m pip install -r RWKV-Runner/backend-python/requirements.txt
+cd RWKV-Runner/frontend
+call npm ci
+call npm run build
+cd ..
+
+: optional: set ngrok_token=YOUR_NGROK_TOKEN
+start python ./backend-python/main.py --webui
+start "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" "http://127.0.0.1:8000"
+
+powershell -Command "(Test-Path ./models) -or (mkdir models)"
+powershell -Command "Import-Module BitsTransfer"
+powershell -Command "(Test-Path ./models/RWKV-4-World-1.5B-v1-fixed-20230612-ctx4096.pth) -or (Start-BitsTransfer https://huggingface.co/BlinkDL/rwkv-4-world/resolve/main/RWKV-4-World-1.5B-v1-fixed-20230612-ctx4096.pth ./models/RWKV-4-World-1.5B-v1-fixed-20230612-ctx4096.pth)"
+powershell -Command "Invoke-WebRequest http://127.0.0.1:8000/switch-model -Method POST -ContentType 'application/json' -Body '{\"model\":\"./models/RWKV-4-World-1.5B-v1-fixed-20230612-ctx4096.pth\",\"strategy\":\"cuda fp32 *20+\",\"deploy\":\"true\"}'"

deploy-examples/RWKV-Runner-WebUI/setup.sh

@@ -0,0 +1,22 @@
+# install git python3.10 npm by yourself
+# change model and strategy according to your hardware
+
+sudo apt install python3-dev
+
+git clone https://github.com/josStorer/RWKV-Runner --depth=1
+python3 -m pip install torch torchvision torchaudio
+python3 -m pip install -r RWKV-Runner/backend-python/requirements.txt
+cd RWKV-Runner/frontend
+npm ci
+npm run build
+cd ..
+
+# optional: export ngrok_token=YOUR_NGROK_TOKEN
+python3 ./backend-python/main.py --webui > log.txt & # this is only an example, you should use screen or other tools to run it in background
+
+if [ ! -d models ]; then
+    mkdir models
+fi
+wget -N https://huggingface.co/BlinkDL/rwkv-4-world/resolve/main/RWKV-4-World-0.1B-v1-20230520-ctx4096.pth -P models/
+
+curl http://127.0.0.1:8000/switch-model -X POST -H "Content-Type: application/json" -d '{"model":"./models/RWKV-4-World-0.1B-v1-20230520-ctx4096.pth","strategy":"cpu fp32","deploy":"true"}'

finetune/install-wsl-dep-and-train.sh

@@ -49,6 +49,10 @@ fi
 echo "loading $loadModel"
 modelInfo=$(python3 ./finetune/get_layer_and_embd.py $loadModel)
 echo $modelInfo
-
+if [[ $modelInfo =~ "--n_layer" ]]; then
   python3 ./finetune/lora/train.py $modelInfo $@ --proj_dir lora-models --data_type binidx --lora \
     --lora_parts=att,ffn,time,ln --strategy deepspeed_stage_2 --accelerator gpu
+else
+  echo "modelInfo is invalid"
+  exit 1
+fi

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))

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))

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
 #

finetune/requirements.txt

@@ -1,3 +1,3 @@
 torch==1.13.1
 pytorch_lightning==1.9.5
-deepspeed
+deepspeed==0.11.2

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>

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",

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",

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);
 
@@ -47,10 +51,10 @@ const App: FC = observer(() => {
   useEffect(() => setPath(location.pathname), [location]);
 
   return (
-    <FluentProvider className="h-screen"
+    <FluentProvider
       theme={commonStore.settings.darkMode ? webDarkTheme : webLightTheme}
       data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}>
-      <div className="flex h-full">
+      <div className="flex h-screen">
         <div className="flex flex-col w-16 sm:w-48 p-2 justify-between">
           <TabList
             size="large"
@@ -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>

frontend/src/_locales/ja/main.json

@@ -13,7 +13,7 @@
   "Working": "動作中",
   "Stop": "停止",
   "Enable High Precision For Last Layer": "最後の層で高精度を有効にする",
-  "Stored Layers": "メモリ層読み込み",
+  "Stored Layers": "保存されるレイヤー",
   "Precision": "精度",
   "Device": "デバイス",
   "Convert model with these configs. Using a converted model will greatly improve the loading speed, but model parameters of the converted model cannot be modified.": "これらの設定でモデルを変換します。変換されたモデルを使用すると、読み込み速度が大幅に向上しますが、変換したモデルのパラメータを変更することはできません。",
@@ -82,7 +82,7 @@
   "Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.": "モデルに鎮静剤を与えるようなもの。上位n％の確率質量の結果を考えてみてください。0.1は上位10％を考えており、質が高いが保守的で、1は全ての結果を考慮しており、質は低いが多様性があります。",
   "Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics.": "ポジティヴ値は、新しいトークンが今までのテキストに出現していたかどうかに基づいてこれらをペナルティとし、新しいトピックについて話す可能性を増加させます。",
   "Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.": "ポジティブ値は、新しいトークンが既存のテキストでどれだけ頻繁に使われているかに基づいてペナルティを与え、モデルが同じ行を完全に繰り返す可能性を減らします。",
-  "int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality, and fp32 has the best quality.": "int8はVRAMの使用量が少ないですが、質が若干低いです。fp16は高品質、fp32は最高品質です。",
+  "int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality.": "int8はVRAMの使用量が少ないですが、質が若干低いです。fp16は高品質。",
   "Number of the neural network layers loaded into VRAM, the more you load, the faster the speed, but it consumes more VRAM. (If your VRAM is not enough, it will fail to load)": "VRAMにロードされるニューラルネットワークの層の数。ロードする量が多いほど速度は速くなりますが、VRAMを多く消費します。(VRAMが不足している場合、ロードに失敗します)",
   "Whether to use CPU to calculate the last output layer of the neural network with FP32 precision to obtain better quality.": "ネットワークの最終出力層をFP32精度で計算するためにCPUを使用するかどうか。",
   "Downloads": "ダウンロード",
@@ -229,7 +229,7 @@
   "Memory is not enough, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "メモリが不足しています、仮想メモリ (WSL Swap) を増やすか小さなベースモデルを使用してみてください。",
   "VRAM is not enough": "ビデオRAMが不足しています",
   "Training data is not enough, reduce context length or add more data for training": "トレーニングデータが不足しています、コンテキストの長さを減らすか、トレーニング用のデータをさらに追加してください",
-  "You are using WSL 1 for training, please upgrade to WSL 2. e.g. Run \"wsl --set-version Ubuntu-22.04 2\"": "トレーニングにWSL 1を使用しています、WSL 2にアップグレードしてください。例:\"wsl --set-version Ubuntu-22.04 2\"を実行する",
+  "Can not find an Nvidia GPU. Perhaps the gpu driver of windows is too old, or you are using WSL 1 for training, please upgrade to WSL 2. e.g. Run \"wsl --set-version Ubuntu-22.04 2\"": "Nvidia GPUが見つかりません。WindowsのGPUドライバが古すぎるか、トレーニングにWSL 1を使用している可能性があります。WSL 2にアップグレードしてください。例：\"wsl --set-version Ubuntu-22.04 2\"を実行してください",
   "Matched CUDA is not installed": "対応するCUDAがインストールされていません",
   "Failed to convert data": "データの変換に失敗しました",
   "Failed to merge model": "モデルのマージに失敗しました",
@@ -261,5 +261,15 @@
   "The content of file": "ファイル",
   "is as follows. When replying to me, consider the file content and respond accordingly:": "の内容は以下の通りです。私に返信する際は、ファイルの内容を考慮して適切に返信してください:",
   "What's the file name": "ファイル名は何ですか",
-  "The file name is: ": "ファイル名は次のとおりです: "
+  "The file name is: ": "ファイル名は次のとおりです: ",
+  "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": "サーバーはデプロイモードで動作しています、サーバーを停止するにはプログラムを手動で終了してください",
+  "You can increase the number of stored layers in Configs page to improve performance": "パフォーマンスを向上させるために、保存されるレイヤーの数を設定ページで増やすことができます",
+  "Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "モデルの読み込みに失敗しました、仮想メモリ (WSL Swap) を増やすか小さなベースモデルを使用してみてください。",
+  "Save Conversation": "会話を保存",
+  "Use Hugging Face Mirror": "Hugging Faceミラーを使用"
 }

frontend/src/_locales/zh-hans/main.json

@@ -82,7 +82,7 @@
   "Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.": "就像给模型喂镇静剂. 考虑前 n% 概率质量的结果, 0.1 考虑前 10%, 质量更高, 但更保守, 1 考虑所有质量结果, 质量降低, 但更多样",
   "Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics.": "存在惩罚. 正值根据新token在至今的文本中是否出现过, 来对其进行惩罚, 从而增加了模型涉及新话题的可能性",
   "Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.": "频率惩罚. 正值根据新token在至今的文本中出现的频率/次数, 来对其进行惩罚, 从而减少模型原封不动地重复相同句子的可能性",
-  "int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality, and fp32 has the best quality.": "int8占用显存更低, 但质量略微下降. fp16质量更好, fp32质量最好",
+  "int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality.": "int8占用显存更低, 但质量略微下降. fp16质量更好",
   "Number of the neural network layers loaded into VRAM, the more you load, the faster the speed, but it consumes more VRAM. (If your VRAM is not enough, it will fail to load)": "载入显存的神经网络层数, 载入越多, 速度越快, 但显存消耗越大 (如果你的显存不够, 会载入失败)",
   "Whether to use CPU to calculate the last output layer of the neural network with FP32 precision to obtain better quality.": "是否使用cpu以fp32精度计算神经网络的最后一层输出层, 以获得更好的质量",
   "Downloads": "下载",
@@ -229,7 +229,7 @@
   "Memory is not enough, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "内存不足，尝试增加虚拟内存(WSL Swap)，或使用一个更小规模的基底模型",
   "VRAM is not enough": "显存不足",
   "Training data is not enough, reduce context length or add more data for training": "训练数据不足，请减小上下文长度或增加训练数据",
-  "You are using WSL 1 for training, please upgrade to WSL 2. e.g. Run \"wsl --set-version Ubuntu-22.04 2\"": "你正在使用WSL 1进行训练，请升级到WSL 2。例如，运行\"wsl --set-version Ubuntu-22.04 2\"",
+  "Can not find an Nvidia GPU. Perhaps the gpu driver of windows is too old, or you are using WSL 1 for training, please upgrade to WSL 2. e.g. Run \"wsl --set-version Ubuntu-22.04 2\"": "没有找到Nvidia显卡。可能是因为你的windows显卡驱动太旧，或者你正在使用WSL 1进行训练，请升级到WSL 2。例如，执行\"wsl --set-version Ubuntu-22.04 2\"",
   "Matched CUDA is not installed": "未安装匹配的CUDA",
   "Failed to convert data": "数据转换失败",
   "Failed to merge model": "合并模型失败",
@@ -261,5 +261,15 @@
   "The content of file": "文件",
   "is as follows. When replying to me, consider the file content and respond accordingly:": "内容如下。回复时考虑文件内容并做出相应回复:",
   "What's the file name": "文件名是什么",
-  "The file name is: ": "文件名是："
+  "The file name is: ": "文件名是：",
+  "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": "服务器正在部署模式下运行，请手动退出程序以停止服务器",
+  "You can increase the number of stored layers in Configs page to improve performance": "你可以在配置页面增加载入显存层数以提升性能",
+  "Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "模型载入失败，尝试增加虚拟内存(WSL Swap)，或使用一个更小规模的基底模型",
+  "Save Conversation": "保存对话",
+  "Use Hugging Face Mirror": "使用Hugging Face镜像源"
 }

frontend/src/components/ConfigSelector.tsx

@@ -4,7 +4,7 @@ import { Dropdown, Option } from '@fluentui/react-components';
 import commonStore from '../stores/commonStore';
 
 export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => {
-  return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
+  return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
     value={commonStore.getCurrentModelConfig().name}
     selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
     onOptionSelect={(_, data) => {

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>

frontend/src/components/LazyImportComponent.tsx

@@ -0,0 +1,24 @@
+import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Spinner } from '@fluentui/react-components';
+
+interface LazyImportComponentProps {
+  lazyChildren: LazyExoticComponent<FC<any>>;
+  lazyProps?: any;
+  children?: ReactNode;
+}
+
+export const LazyImportComponent: FC<LazyImportComponentProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Suspense fallback={
+      <div className="flex justify-center items-center h-full w-full">
+        <Spinner size="huge" label={t('Loading...')} />
+      </div>}>
+      <props.lazyChildren {...props.lazyProps}>
+        {props.children}
+      </props.lazyChildren>
+    </Suspense>
+  );
+};

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

frontend/src/components/ReadButton.tsx

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

frontend/src/components/RunButton.tsx

@@ -1,16 +1,22 @@
 import React, { FC, MouseEventHandler, ReactElement } from 'react';
 import commonStore, { ModelStatus } from '../stores/commonStore';
-import { AddToDownloadList, FileExists, StartServer, StartWebGPUServer } from '../../wailsjs/go/backend_golang/App';
+import {
+  AddToDownloadList,
+  FileExists,
+  IsPortAvailable,
+  StartServer,
+  StartWebGPUServer
+} from '../../wailsjs/go/backend_golang/App';
 import { Button } from '@fluentui/react-components';
 import { observer } from 'mobx-react-lite';
 import { exit, getStatus, readRoot, switchModel, updateConfig } from '../apis';
 import { toast } from 'react-toastify';
-import { checkDependencies, getStrategy, toastWithButton } from '../utils';
+import { checkDependencies, getHfDownloadUrl, getStrategy, toastWithButton } from '../utils';
 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',
@@ -88,7 +94,7 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
                 navigate({ pathname: '/downloads' });
               },
               { autoClose: 3000 });
-            AddToDownloadList(modelPath, downloadUrl);
+            AddToDownloadList(modelPath, getHfDownloadUrl(downloadUrl));
           } else {
             toast(t('Can not find download url'), { type: 'error' });
           }
@@ -107,8 +113,15 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
 
       const port = modelConfig.apiParameters.apiPort;
 
+      if (!await IsPortAvailable(port)) {
         await exit(1000).catch(() => {
         });
+        if (!await IsPortAvailable(port)) {
+          toast(t('Port is occupied. Change it in Configs page or close the program that occupies the port.'), { type: 'error' });
+          commonStore.setStatus({ status: ModelStatus.Offline });
+          return;
+        }
+      }
 
       const startServer = webgpu ?
         (_: string, port: number, host: string) => StartWebGPUServer(port, host)
@@ -116,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'))
@@ -186,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 });
@@ -199,6 +213,12 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
                 const buttonFn = () => {
                   navigate({ pathname: '/' + buttonName.toLowerCase() });
                 };
+
+                if ((modelConfig.modelParameters.device === 'CUDA' || modelConfig.modelParameters.device === 'CUDA-Beta') &&
+                  modelConfig.modelParameters.storedLayers < modelConfig.modelParameters.maxStoredLayers &&
+                  commonStore.monitorData && commonStore.monitorData.totalVram !== 0 &&
+                  (commonStore.monitorData.usedVram / commonStore.monitorData.totalVram) < 0.85)
+                  toast(t('You can increase the number of stored layers in Configs page to improve performance'), { type: 'info' });
                 toastWithButton(t('Startup Completed'), t(buttonName), buttonFn, { type: 'success', autoClose: 3000 });
               } else if (r.status === 304) {
                 toast(t('Loading Model'), { type: 'info' });
@@ -211,7 +231,7 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
                   'invalid header or archive is corrupted': 'The model file is corrupted, please download again.',
                   'no NVIDIA driver': 'Found no NVIDIA driver, please install the latest driver.',
                   'CUDA out of memory': 'VRAM is not enough, please reduce stored layers or use a lower precision in Configs page.',
-                  'Ninja is required to load C++ extensions': 'Failed to enable custom CUDA kernel, ninja is required to load C++ extensions. You may be using the CPU version of PyTorch, please reinstall PyTorch with CUDA. Or if you are using a custom Python interpreter, you must compile the CUDA kernel by yourself or disable Custom CUDA kernel acceleration.',
+                  'Ninja is required to load C++ extensions': 'Failed to enable custom CUDA kernel, ninja is required to load C++ extensions. You may be using the CPU version of PyTorch, please reinstall PyTorch with CUDA. Or if you are using a custom Python interpreter, you must compile the CUDA kernel by yourself or disable Custom CUDA kernel acceleration.'
                 };
                 const matchedError = Object.entries(errorsMap).find(([key, _]) => error.includes(key));
                 const message = matchedError ? t(matchedError[1]) : error;
@@ -233,7 +253,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' });
+      });
     }
   };
 

frontend/src/components/WorkHeader.tsx

@@ -6,6 +6,7 @@ import { ConfigSelector } from './ConfigSelector';
 import { RunButton } from './RunButton';
 import { PresenceBadgeStatus } from '@fluentui/react-badge';
 import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from 'usehooks-ts';
 
 const statusText = {
   [ModelStatus.Offline]: 'Offline',
@@ -23,15 +24,21 @@ const badgeStatus: { [modelStatus: number]: PresenceBadgeStatus } = {
 
 export const WorkHeader: FC = observer(() => {
   const { t } = useTranslation();
+  const mq = useMediaQuery('(min-width: 640px)');
   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">
           <PresenceBadge status={badgeStatus[commonStore.status.status]} />
           <Text size={100}>{t('Model Status') + ': ' + t(statusText[commonStore.status.status])}</Text>
         </div>
+        {commonStore.lastModelName && mq &&
+          <Text size={100}>
+            {commonStore.lastModelName}
+          </Text>}
         <div className="flex items-center gap-2">
           <ConfigSelector size="small" />
           <RunButton iconMode />
@@ -42,5 +49,5 @@ export const WorkHeader: FC = observer(() => {
       </Text>
       <Divider style={{ flexGrow: 0 }} />
     </div>
-  );
+    ;
 });

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(() => {

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;

frontend/src/pages/Chat.tsx

@@ -16,8 +16,11 @@ import {
   Attach16Regular,
   Delete28Regular,
   Dismiss16Regular,
+  Dismiss24Regular,
   RecordStop28Regular,
-  Save28Regular
+  SaveRegular,
+  TextAlignJustify24Regular,
+  TextAlignJustifyRotate9024Regular
 } from '@fluentui/react-icons';
 import { CopyButton } from '../components/CopyButton';
 import { ReadButton } from '../components/ReadButton';
@@ -25,49 +28,21 @@ 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 { PresetsButton } from './PresetsManager/PresetsButton';
+import { absPathAsset, bytesToReadable, getServerRoot, toastWithButton } from '../utils';
 import { useMediaQuery } from 'usehooks-ts';
+import { botName, ConversationMessage, MessageType, userName, welcomeUuid } from '../types/chat';
+import { Labeled } from '../components/Labeled';
+import { ValuedSlider } from '../components/ValuedSlider';
+import { PresetsButton } from './PresetsManager/PresetsButton';
 
-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
 }) => {
@@ -91,13 +66,15 @@ const MoreUtilsButton: FC<{ uuid: string, setEditing: (editing: boolean) => void
         onClick={() => {
           commonStore.conversationOrder.splice(commonStore.conversationOrder.indexOf(uuid), 1);
           delete commonStore.conversation[uuid];
+          commonStore.setAttachment(uuid, null);
         }} />
     </MenuPopover>
   </Menu>;
 });
 
 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();
@@ -157,7 +134,21 @@ const ChatMessageItem: FC<{
       )}
     >
       {!editing ?
-        <MarkdownRender>{messageItem.content}</MarkdownRender> :
+        <div className="flex flex-col">
+          <MarkdownRender>{messageItem.content}</MarkdownRender>
+          {uuid in commonStore.attachments &&
+            <div className="flex grow">
+              <div className="grow" />
+              <ToolTipButton className="whitespace-nowrap"
+                text={
+                  commonStore.attachments[uuid][0].name.replace(
+                    new RegExp('(^[^\\.]{5})[^\\.]+'), '$1...')
+                }
+                desc={`${commonStore.attachments[uuid][0].name} (${bytesToReadable(commonStore.attachments[uuid][0].size)})`}
+                size="small" shape="circular" appearance="secondary" />
+            </div>
+          }
+        </div> :
         <Textarea ref={textareaRef}
           className="grow"
           style={{ minWidth: 0 }}
@@ -202,11 +193,125 @@ const ChatMessageItem: FC<{
   </div>;
 });
 
+const SidePanel: FC = observer(() => {
+  const [t] = useTranslation();
+  const mq = useMediaQuery('(min-width: 640px)');
+  const params = commonStore.chatParams;
+
+  return <div
+    className={classnames(
+      'flex flex-col gap-1 h-full flex-shrink-0 transition-width duration-300 ease-in-out',
+      commonStore.sidePanelCollapsed ? 'w-0' : (mq ? 'w-64' : 'w-full'),
+      !commonStore.sidePanelCollapsed && 'ml-1')
+    }>
+    <div className="flex m-1">
+      <div className="grow" />
+      <PresetsButton tab="Chat" size="medium" shape="circular" appearance="subtle" />
+      <Button size="medium" shape="circular" appearance="subtle" icon={<Dismiss24Regular />}
+        onClick={() => commonStore.setSidePanelCollapsed(true)}
+      />
+    </div>
+    <div className="flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-1">
+      <Labeled flex breakline label={t('Max Response Token')}
+        desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
+        content={
+          <ValuedSlider value={params.maxResponseToken} min={100} max={8100}
+            step={100}
+            input
+            onChange={(e, data) => {
+              commonStore.setChatParams({
+                maxResponseToken: data.value
+              });
+            }} />
+        } />
+      <Labeled flex breakline label={t('Temperature')}
+        desc={t('Sampling temperature, it\'s like giving alcohol to a model, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
+        content={
+          <ValuedSlider value={params.temperature} min={0} max={2} step={0.1}
+            input
+            onChange={(e, data) => {
+              commonStore.setChatParams({
+                temperature: data.value
+              });
+            }} />
+        } />
+      <Labeled flex breakline label={t('Top_P')}
+        desc={t('Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
+        content={
+          <ValuedSlider value={params.topP} min={0} max={1} step={0.1} input
+            onChange={(e, data) => {
+              commonStore.setChatParams({
+                topP: data.value
+              });
+            }} />
+        } />
+      <Labeled flex breakline label={t('Presence Penalty')}
+        desc={t('Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.')}
+        content={
+          <ValuedSlider value={params.presencePenalty} min={0} max={2}
+            step={0.1} input
+            onChange={(e, data) => {
+              commonStore.setChatParams({
+                presencePenalty: data.value
+              });
+            }} />
+        } />
+      <Labeled flex breakline label={t('Frequency Penalty')}
+        desc={t('Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.')}
+        content={
+          <ValuedSlider value={params.frequencyPenalty} min={0} max={2}
+            step={0.1} input
+            onChange={(e, data) => {
+              commonStore.setChatParams({
+                frequencyPenalty: data.value
+              });
+            }} />
+        } />
+    </div>
+    <div className="grow" />
+    {/*<Button*/}
+    {/*  icon={<FolderOpenVerticalRegular />}*/}
+    {/*  onClick={() => {*/}
+    {/*  }}>*/}
+    {/*  {t('Load Conversation')}*/}
+    {/*</Button>*/}
+    <Button
+      icon={<SaveRegular />}
+      onClick={() => {
+        let savedContent: string = '';
+        const isWorldModel = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('world');
+        const user = isWorldModel ? 'User' : 'Bob';
+        const bot = isWorldModel ? 'Assistant' : 'Alice';
+        commonStore.conversationOrder.forEach((uuid) => {
+          if (uuid === welcomeUuid)
+            return;
+          const messageItem = commonStore.conversation[uuid];
+          if (messageItem.type !== MessageType.Error) {
+            savedContent += `${messageItem.sender === userName ? user : bot}: ${messageItem.content}\n\n`;
+          }
+        });
+
+        OpenSaveFileDialog('*.txt', 'conversation.txt', savedContent).then((path) => {
+          if (path)
+            toastWithButton(t('Conversation Saved'), t('Open'), () => {
+              OpenFileFolder(path, false);
+            });
+        }).catch(e => {
+          toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
+        });
+      }}>
+      {t('Save Conversation')}
+    </Button>
+  </div>;
+});
+
 const ChatPanel: FC = observer(() => {
   const { t } = useTranslation();
   const bodyRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const mq = useMediaQuery('(min-width: 640px)');
+  if (commonStore.sidePanelCollapsed === 'auto')
+    commonStore.setSidePanelCollapsed(!mq);
   const currentConfig = commonStore.getCurrentModelConfig();
   const apiParams = currentConfig.apiParameters;
   const port = apiParams.apiPort;
@@ -228,7 +333,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
         }
@@ -245,7 +350,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;
       }
@@ -275,6 +380,11 @@ const ChatPanel: FC = observer(() => {
       commonStore.setConversation(commonStore.conversation);
       commonStore.conversationOrder.push(newId);
       commonStore.setConversationOrder(commonStore.conversationOrder);
+
+      if (commonStore.currentTempAttachment) {
+        commonStore.setAttachment(newId, [commonStore.currentTempAttachment]);
+        commonStore.setCurrentTempAttachment(null);
+      }
     }
 
     let startIndex = startUuid ? commonStore.conversationOrder.indexOf(startUuid) : 0;
@@ -282,20 +392,21 @@ const ChatPanel: FC = observer(() => {
     let targetRange = commonStore.conversationOrder.slice(startIndex, endIndex);
 
     const messages: ConversationMessage[] = [];
-    if (commonStore.attachmentContent) {
-      messages.push({
-        role: 'user',
-        content: t('The content of file') + ` "${commonStore.attachmentName}" `
-          + t('is as follows. When replying to me, consider the file content and respond accordingly:')
-          + '\n\n' + commonStore.attachmentContent
-      });
-      messages.push({ role: 'user', content: t('What\'s the file name') });
-      messages.push({ role: 'assistant', content: t('The file name is: ') + commonStore.attachmentName });
-    }
     targetRange.forEach((uuid, index) => {
       if (uuid === welcomeUuid)
         return;
       const messageItem = commonStore.conversation[uuid];
+      if (uuid in commonStore.attachments) {
+        const attachment = commonStore.attachments[uuid][0];
+        messages.push({
+          role: 'user',
+          content: t('The content of file') + ` "${attachment.name}" `
+            + t('is as follows. When replying to me, consider the file content and respond accordingly:')
+            + '\n\n' + attachment.content
+        });
+        messages.push({ role: 'user', content: t('What\'s the file name') });
+        messages.push({ role: 'assistant', content: t('The file name is: ') + attachment.name });
+      }
       if (messageItem.done && messageItem.type === MessageType.Normal && messageItem.sender === userName) {
         messages.push({ role: 'user', content: messageItem.content });
       } else if (messageItem.done && messageItem.type === MessageType.Normal && messageItem.sender === botName) {
@@ -323,10 +434,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: {
@@ -337,16 +446,20 @@ const ChatPanel: FC = observer(() => {
           messages,
           stream: true,
           model: commonStore.settings.apiChatModelName, // 'gpt-3.5-turbo'
-          temperature: apiParams.temperature,
-          top_p: apiParams.topP,
-          user_name: commonStore.activePreset?.userName,
-          assistant_name: commonStore.activePreset?.assistantName,
-          presystem: commonStore.activePreset?.presystem
+          temperature: commonStore.chatParams.temperature,
+          top_p: commonStore.chatParams.topP,
+          presence_penalty: commonStore.chatParams.presencePenalty,
+          frequency_penalty: commonStore.chatParams.frequencyPenalty,
+          user_name: commonStore.activePreset?.userName || undefined,
+          assistant_name: commonStore.activePreset?.assistantName || undefined,
+          presystem: commonStore.activePreset?.presystem && undefined
         }),
         signal: chatSseController?.signal,
         onmessage(e) {
           scrollToBottom();
           if (e.data.trim() === '[DONE]') {
+            if (answerId! in chatSseControllers)
+              delete chatSseControllers[answerId!];
             commonStore.conversation[answerId!].done = true;
             commonStore.conversation[answerId!].content = commonStore.conversation[answerId!].content.trim();
             commonStore.setConversation(commonStore.conversation);
@@ -360,6 +473,8 @@ const ChatPanel: FC = observer(() => {
             console.debug('json error', error);
             return;
           }
+          if (data.model)
+            commonStore.setLastModelName(data.model);
           if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
             answer += data.choices[0]?.delta?.content || '';
             commonStore.conversation[answerId!].content = answer;
@@ -381,6 +496,8 @@ const ChatPanel: FC = observer(() => {
           console.log('Connection closed');
         },
         onerror(err) {
+          if (answerId! in chatSseControllers)
+            delete chatSseControllers[answerId!];
           commonStore.conversation[answerId!].type = MessageType.Error;
           commonStore.conversation[answerId!].done = true;
           err = err.message || err;
@@ -395,14 +512,17 @@ const ChatPanel: FC = observer(() => {
   }, []);
 
   return (
-    <div className="flex flex-col w-full grow gap-4 pt-4 overflow-hidden">
+    <div className="flex h-full grow pt-4 overflow-hidden">
+      <div className="relative flex flex-col w-full grow gap-4 overflow-hidden">
+        <Button className="absolute top-1 right-1" size="medium" shape="circular" appearance="subtle"
+          icon={commonStore.sidePanelCollapsed ? <TextAlignJustify24Regular /> : <TextAlignJustifyRotate9024Regular />}
+          onClick={() => commonStore.setSidePanelCollapsed(!commonStore.sidePanelCollapsed)} />
         <div ref={bodyRef} className="grow overflow-y-scroll overflow-x-hidden pr-2">
           {commonStore.conversationOrder.map(uuid =>
             <ChatMessageItem key={uuid} uuid={uuid} onSubmit={onSubmit} />
           )}
         </div>
         <div className={classnames('flex items-end', mq ? 'gap-2' : '')}>
-        <PresetsButton tab="Chat" size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" />
           <DialogButton tooltip={t('Clear')}
             icon={<Delete28Regular />}
             size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" title={t('Clear')}
@@ -429,7 +549,7 @@ const ChatPanel: FC = observer(() => {
               onKeyDown={handleKeyDownOrClick}
             />
             <div className="absolute right-2 bottom-2">
-            {!commonStore.attachmentContent ?
+              {!commonStore.currentTempAttachment ?
                 <ToolTipButton
                   desc={commonStore.attachmentUploading ?
                     t('Uploading Attachment') :
@@ -439,7 +559,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;
                     }
@@ -453,29 +573,48 @@ 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
                                 attachmentContent = pages.map((p, i) => `Page ${i + 1}:\n${p.page_content}`).join('\n\n');
-                          commonStore.setAttachmentName(attachmentName!);
-                          commonStore.setAttachmentSize(blob.size);
-                          commonStore.setAttachmentContent(attachmentContent);
+                              commonStore.setCurrentTempAttachment(
+                                {
+                                  name: attachmentName!,
+                                  size: blob.size,
+                                  content: attachmentContent!
+                                });
                             } else {
                               toast(r.statusText + '\n' + (await r.text()), {
                                 type: 'error'
@@ -487,6 +626,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 });
                     });
@@ -495,18 +635,16 @@ const ChatPanel: FC = observer(() => {
                 <div>
                   <ToolTipButton
                     text={
-                    commonStore.attachmentName.replace(
+                      commonStore.currentTempAttachment.name.replace(
                         new RegExp('(^[^\\.]{5})[^\\.]+'), '$1...')
                     }
-                  desc={`${commonStore.attachmentName} (${bytesToReadable(commonStore.attachmentSize)})`}
+                    desc={`${commonStore.currentTempAttachment.name} (${bytesToReadable(commonStore.currentTempAttachment.size)})`}
                     size="small" shape="circular" appearance="secondary" />
                   <ToolTipButton desc={t('Remove Attachment')}
                     icon={<Dismiss16Regular />}
                     size="small" shape="circular" appearance="subtle"
                     onClick={() => {
-                    commonStore.setAttachmentName('');
-                    commonStore.setAttachmentSize(0);
-                    commonStore.setAttachmentContent('');
+                      commonStore.setCurrentTempAttachment(null);
                     }} />
                 </div>
               }
@@ -529,38 +667,14 @@ const ChatPanel: FC = observer(() => {
                 handleKeyDownOrClick(e);
               }
             }} />
-        <ToolTipButton desc={t('Save')}
-          icon={<Save28Regular />}
-          size={mq ? 'large' : 'small'} shape="circular" appearance="subtle"
-          onClick={() => {
-            let savedContent: string = '';
-            const isWorldModel = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('world');
-            const user = isWorldModel ? 'User' : 'Bob';
-            const bot = isWorldModel ? 'Assistant' : 'Alice';
-            commonStore.conversationOrder.forEach((uuid) => {
-              if (uuid === welcomeUuid)
-                return;
-              const messageItem = commonStore.conversation[uuid];
-              if (messageItem.type !== MessageType.Error) {
-                savedContent += `${messageItem.sender === userName ? user : bot}: ${messageItem.content}\n\n`;
-              }
-            });
-
-            OpenSaveFileDialog('*.txt', 'conversation.txt', savedContent).then((path) => {
-              if (path)
-                toastWithButton(t('Conversation Saved'), t('Open'), () => {
-                  OpenFileFolder(path, false);
-                });
-            }).catch(e => {
-              toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
-            });
-          }} />
         </div>
       </div>
+      <SidePanel />
+    </div>
   );
 });
 
-export const Chat: FC = observer(() => {
+const Chat: FC = observer(() => {
   return (
     <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
       <WorkHeader />
@@ -568,3 +682,5 @@ export const Chat: FC = observer(() => {
     </div>
   );
 });
+
+export default Chat;

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;
 
@@ -40,8 +29,10 @@ const CompletionPanel: FC = observer(() => {
   };
 
   useEffect(() => {
-    if (inputRef.current)
+    if (inputRef.current) {
       inputRef.current.style.height = '100%';
+      inputRef.current.style.maxHeight = '100%';
+    }
     scrollToBottom();
   }, []);
 
@@ -80,7 +71,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 +81,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: {
@@ -125,6 +114,8 @@ const CompletionPanel: FC = observer(() => {
             console.debug('json error', error);
             return;
           }
+          if (data.model)
+            commonStore.setLastModelName(data.model);
           if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
             answer += data.choices[0]?.text || data.choices[0]?.delta?.content || '';
             setPrompt(prompt + answer.replace(/\s+$/, '') + params.injectEnd.replaceAll('\\n', '\n'));
@@ -186,7 +177,7 @@ const CompletionPanel: FC = observer(() => {
             desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
             content={
               <ValuedSlider value={params.maxResponseToken} min={100} max={8100}
-                step={400}
+                step={100}
                 input
                 onChange={(e, data) => {
                   setParams({
@@ -269,7 +260,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 +294,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 +302,5 @@ export const Completion: FC = observer(() => {
     </div>
   );
 });
+
+export default Completion;

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,23 +17,15 @@ 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';
+import { useMediaQuery } from 'usehooks-ts';
 
 let compositionSseController: AbortController | null = null;
 
 const CompositionPanel: FC = observer(() => {
   const { t } = useTranslation();
+  const mq = useMediaQuery('(min-width: 640px)');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
   const visualizerRef = useRef<VisualizerElement>(null);
@@ -89,8 +82,10 @@ const CompositionPanel: FC = observer(() => {
   };
 
   useEffect(() => {
-    if (inputRef.current)
+    if (inputRef.current) {
       inputRef.current.style.height = '100%';
+      inputRef.current.style.maxHeight = '100%';
+    }
     scrollToBottom();
 
     if (playerRef.current && visualizerRef.current) {
@@ -109,9 +104,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 +130,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 +138,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: {
@@ -178,6 +169,8 @@ const CompositionPanel: FC = observer(() => {
             console.debug('json error', error);
             return;
           }
+          if (data.model)
+            commonStore.setLastModelName(data.model);
           if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
             answer += data.choices[0]?.text || data.choices[0]?.delta?.content || '';
             setPrompt(prompt + answer.replace(/\s+$/, ''));
@@ -217,7 +210,8 @@ const CompositionPanel: FC = observer(() => {
             setPrompt(e.target.value);
           }}
         />
-        <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full overflow-x-hidden overflow-y-auto p-1">
+        <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full">
+          <div className="flex flex-col gap-1 grow overflow-x-hidden overflow-y-auto p-1">
             <Labeled flex breakline label={t('Max Response Token')}
               desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
               content={
@@ -273,6 +267,7 @@ const CompositionPanel: FC = observer(() => {
                 autoPlay: data.checked as boolean
               });
             }} />
+          </div>
           <div className="flex justify-between gap-2">
             <ToolTipButton desc={t('Regenerate')} icon={<ArrowSync20Regular />} onClick={() => {
               compositionSseController?.abort();
@@ -311,7 +306,7 @@ const CompositionPanel: FC = observer(() => {
             ref={playerRef}
             style={{ width: '100%' }}
           />
-          <Button icon={<Save28Regular />}
+          <Button icon={<Save28Regular />} size={mq ? 'large' : 'medium'} appearance={mq ? 'secondary' : 'subtle'}
             onClick={() => {
               if (params.midi) {
                 OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => {
@@ -327,7 +322,7 @@ const CompositionPanel: FC = observer(() => {
               }
             }}
           >
-            {t('Save')}
+            {mq ? t('Save') : ''}
           </Button>
         </div>
       </div>
@@ -335,7 +330,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 +338,5 @@ export const Composition: FC = observer(() => {
     </div>
   );
 });
+
+export default Composition;

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]);
@@ -181,7 +150,7 @@ export const Configs: FC = observer(() => {
                   desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
                   content={
                     <ValuedSlider value={selectedConfig.apiParameters.maxResponseToken} min={100} max={8100}
-                      step={400}
+                      step={100}
                       input
                       onChange={(e, data) => {
                         setSelectedConfigApiParams({
@@ -359,7 +328,7 @@ export const Configs: FC = observer(() => {
                 } />
                 {
                   selectedConfig.modelParameters.device !== 'Custom' && <Labeled label={t('Precision')}
-                    desc={t('int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality, and fp32 has the best quality.')}
+                    desc={t('int8 uses less VRAM, but has slightly lower quality. fp16 has higher quality.')}
                     content={
                       <Dropdown style={{ minWidth: 0 }} className="grow"
                         value={selectedConfig.modelParameters.precision}
@@ -371,8 +340,10 @@ export const Configs: FC = observer(() => {
                             });
                           }
                         }}>
-                        <Option>fp16</Option>
+                        {selectedConfig.modelParameters.device !== 'CPU' && selectedConfig.modelParameters.device !== 'MPS' &&
+                          <Option>fp16</Option>}
                         <Option>int8</Option>
+                        {selectedConfig.modelParameters.device === 'WebGPU' && <Option>nf4</Option>}
                         {selectedConfig.modelParameters.device !== 'WebGPU' && <Option>fp32</Option>}
                       </Dropdown>
                     } />
@@ -472,9 +443,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;

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;

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 overflow-x-hidden overflow-y-auto">
+        <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;

frontend/src/pages/Models.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import {
+  Checkbox,
   createTableColumn,
   DataGrid,
   DataGridBody,
@@ -19,24 +20,10 @@ import commonStore from '../stores/commonStore';
 import { BrowserOpenURL } from '../../wailsjs/runtime';
 import { AddToDownloadList, OpenFileFolder } from '../../wailsjs/go/backend_golang/App';
 import { Page } from '../components/Page';
-import { bytesToGb, refreshModels, saveConfigs, toastWithButton } from '../utils';
+import { bytesToGb, getHfDownloadUrl, 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>({
@@ -153,7 +140,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
                     navigate({ pathname: '/downloads' });
                   },
                   { autoClose: 3000 });
-                AddToDownloadList(`${commonStore.settings.customModelsPath}/${item.name}`, item.downloadUrl!);
+                AddToDownloadList(`${commonStore.settings.customModelsPath}/${item.name}`, getHfDownloadUrl(item.downloadUrl!));
               }} />}
             {item.url && <ToolTipButton desc={t('Open Url')} icon={<Open20Regular />} onClick={() => {
               BrowserOpenURL(item.url!);
@@ -165,7 +152,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
   })
 ];
 
-export const Models: FC = observer(() => {
+const Models: FC = observer(() => {
   const { t } = useTranslation();
 
   return (
@@ -174,11 +161,22 @@ export const Models: FC = observer(() => {
         <div className="flex flex-col gap-1">
           <div className="flex justify-between items-center">
             <Text weight="medium">{t('Model Source Manifest List')}</Text>
+            <div className="flex">
+              {commonStore.settings.language === 'zh' &&
+                <Checkbox className="select-none"
+                  size="large" label={t('Use Hugging Face Mirror')}
+                  checked={commonStore.settings.useHfMirror}
+                  onChange={(_, data) => {
+                    commonStore.setSettings({
+                      useHfMirror: data.checked as boolean
+                    });
+                  }} />}
               <ToolTipButton desc={t('Refresh')} icon={<ArrowClockwise20Regular />} onClick={() => {
                 refreshModels(false);
                 saveConfigs();
               }} />
             </div>
+          </div>
           <Text size={100}>
             {t('Provide JSON file URLs for the models manifest. Separate URLs with semicolons. The "models" field in JSON files will be parsed into the following table.')}
           </Text>
@@ -220,3 +218,5 @@ export const Models: FC = observer(() => {
     } />
   );
 });
+
+export default Models;

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!;
@@ -108,7 +108,8 @@ export const MessagesEditor: FC = observer(() => {
                             style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
                             <ReOrderDotsVertical20Regular />
                           </Card>
-                          <Dropdown style={{ minWidth: 0, borderRadius: 0 }} listbox={{ style: { minWidth: 0 } }}
+                          <Dropdown style={{ minWidth: 0, borderRadius: 0 }}
+                            listbox={{ style: { minWidth: 'fit-content' } }}
                             value={t(item.role)!}
                             selectedOptions={[item.role]}
                             onOptionSelect={(_, data) => {
@@ -152,3 +153,5 @@ export const MessagesEditor: FC = observer(() => {
     </div>
   );
 });
+
+export default MessagesEditor;

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);
 

frontend/src/pages/Settings.tsx

@@ -16,45 +16,14 @@ 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 const GeneralSettings: FC = observer(() => {
+  const { t } = useTranslation();
 
-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(() => {
-  const { t, i18n } = 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 } }}
+      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
         value={Languages[commonStore.settings.language]}
         selectedOptions={[commonStore.settings.language]}
         onOptionSelect={(_, data) => {
@@ -74,7 +43,7 @@ export const Settings: FC = observer(() => {
     {
       commonStore.platform === 'windows' &&
       <Labeled label={t('DPI Scaling')} flex spaceBetween content={
-            <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
+        <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
           value={commonStore.settings.dpiScaling + '%'}
           selectedOptions={[commonStore.settings.dpiScaling.toString()]}
           onOptionSelect={(_, data) => {
@@ -104,6 +73,146 @@ 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: 'fit-content' } }}
+            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: 'gpt-3.5-turbo-instruct'
+                  });
+              } else if (data.optionText === 'RWKV') {
+                if (commonStore.settings.apiChatModelName === 'gpt-3.5-turbo')
+                  commonStore.setSettings({
+                    apiChatModelName: 'rwkv'
+                  });
+                if (commonStore.settings.apiCompletionModelName === 'gpt-3.5-turbo-instruct' || commonStore.settings.apiCompletionModelName === 'text-davinci-003')
+                  commonStore.setSettings({
+                    apiCompletionModelName: 'rwkv'
+                  });
+              }
+            }}>
+            <Option value="">{t('Localhost')!}</Option>
+            <Option value="https://rwkv.ai-creator.net/chntuned">RWKV</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: 'fit-content' } }}
+            value="..." selectedOptions={[]} expandIcon={null}
+            onOptionSelect={(_, data) => {
+              if (data.optionValue) {
+                commonStore.setSettings({
+                  apiChatModelName: data.optionValue
+                });
+              }
+            }}>
+            {
+              ['rwkv', 'gpt-4-1106-preview', 'gpt-4', 'gpt-4-32k', 'gpt-4-0613', 'gpt-4-32k-0613', 'gpt-3.5-turbo-1106', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k']
+              .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: 'fit-content', minHeight: 0 } }}
+            value="..." selectedOptions={[]} expandIcon={null}
+            onOptionSelect={(_, data) => {
+              if (data.optionValue) {
+                commonStore.setSettings({
+                  apiCompletionModelName: data.optionValue
+                });
+              }
+            }}>
+            {
+              ['rwkv', 'gpt-3.5-turbo-instruct', 'text-davinci-003', 'text-davinci-002', 'code-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 +245,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 +265,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 +276,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 +285,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;

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'],
@@ -157,11 +129,12 @@ const errorsMap = Object.entries({
   'python3 ./finetune/lora/train.py': 'Memory is not enough, try to increase the virtual memory (Swap of WSL) or use a smaller base model.',
   'cuda out of memory': 'VRAM is not enough',
   'valueerror: high <= 0': 'Training data is not enough, reduce context length or add more data for training',
-  '+= \'+ptx\'': 'You are using WSL 1 for training, please upgrade to WSL 2. e.g. Run "wsl --set-version Ubuntu-22.04 2"',
+  '+= \'+ptx\'': 'Can not find an Nvidia GPU. Perhaps the gpu driver of windows is too old, or you are using WSL 1 for training, please upgrade to WSL 2. e.g. Run "wsl --set-version Ubuntu-22.04 2"',
   'size mismatch for blocks': 'Size mismatch for blocks. You are attempting to continue training from the LoRA model, but it does not match the base model. Please set LoRA model to None.',
   'cuda_home environment variable is not set': 'Matched CUDA is not installed',
   'unsupported gpu architecture': 'Matched CUDA is not installed',
-  'error building extension \'fused_adam\'': 'Matched CUDA is not installed'
+  'error building extension \'fused_adam\'': 'Matched CUDA is not installed',
+  'modelinfo is invalid': 'Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.'
 });
 
 export const wslHandler = (data: string) => {
@@ -568,10 +541,6 @@ const LoraFinetune: FC = observer(() => {
   );
 });
 
-type TrainNavigationItem = {
-  element: ReactElement;
-};
-
 const pages: { [label: string]: TrainNavigationItem } = {
   'LoRA Finetune': {
     element: <LoraFinetune />
@@ -582,7 +551,7 @@ const pages: { [label: string]: TrainNavigationItem } = {
 };
 
 
-export const Train: FC = () => {
+const Train: FC = () => {
   const { t } = useTranslation();
   const [tab, setTab] = useState('LoRA Finetune');
 
@@ -607,3 +576,5 @@ export const Train: FC = () => {
     </div>
   </div>;
 };
+
+export default Train;

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>';
 

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
   }
 ];

frontend/src/startup.ts

@@ -1,34 +1,36 @@
-import commonStore, { Platform } from './stores/commonStore';
+import commonStore, { MonitorData, Platform } from './stores/commonStore';
 import { GetPlatform, ListDirFiles, ReadJson } from '../wailsjs/go/backend_golang/App';
 import { Cache, checkUpdate, downloadProgramFiles, LocalConfig, refreshLocalModels, refreshModels } from './utils';
 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(() => {
   });
@@ -121,19 +125,12 @@ async function initLocalModelsNotify() {
   });
 }
 
-type monitorData = {
-  usedMemory: number;
-  totalMemory: number;
-  gpuUsage: number;
-  gpuPower: number;
-  usedVram: number;
-  totalVram: number;
-}
-
 async function initHardwareMonitor() {
   EventsOn('monitor', (data: string) => {
-    const results: monitorData = JSON.parse(data);
-    if (results)
+    const results: MonitorData = JSON.parse(data);
+    if (results) {
+      commonStore.setMonitorData(results);
       WindowSetTitle(`RWKV-Runner (${t('RAM')}: ${results.usedMemory.toFixed(1)}/${results.totalMemory.toFixed(1)} GB, ${t('VRAM')}: ${(results.usedVram / 1024).toFixed(1)}/${(results.totalVram / 1024).toFixed(1)} GB, ${t('GPU Usage')}: ${results.gpuUsage}%)`);
+    }
   });
 }

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 { Attachment, ChatParams, 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,
@@ -31,9 +30,16 @@ export type Status = {
   device_name: string;
 }
 
-export type Platform = 'windows' | 'darwin' | 'linux';
+export type MonitorData = {
+  usedMemory: number;
+  totalMemory: number;
+  gpuUsage: number;
+  gpuPower: number;
+  usedVram: number;
+  totalVram: number;
+}
 
-const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+export type Platform = 'windows' | 'darwin' | 'linux' | 'web';
 
 class CommonStore {
   // global
@@ -42,8 +48,10 @@ class CommonStore {
     pid: 0,
     device_name: 'CPU'
   };
+  monitorData: MonitorData | null = null;
   depComplete: boolean = false;
   platform: Platform = 'windows';
+  lastModelName: string = '';
   // presets manager
   editingPreset: Preset | null = null;
   presets: Preset[] = [];
@@ -55,9 +63,16 @@ class CommonStore {
   conversationOrder: string[] = [];
   activePreset: Preset | null = null;
   attachmentUploading: boolean = false;
-  attachmentName: string = '';
-  attachmentSize: number = 0;
-  attachmentContent: string = '';
+  attachments: { [uuid: string]: Attachment[] } = {};
+  currentTempAttachment: Attachment | null = null;
+  chatParams: ChatParams = {
+    maxResponseToken: 1000,
+    temperature: 1,
+    topP: 0.3,
+    presencePenalty: 0,
+    frequencyPenalty: 1
+  };
+  sidePanelCollapsed: boolean | 'auto' = 'auto';
   // completion
   completionPreset: CompletionPreset | null = null;
   completionGenerating: boolean = false;
@@ -100,7 +115,7 @@ class CommonStore {
     epochSteps: 200,
     epochCount: 20,
     epochBegin: 0,
-    epochSave: 2,
+    epochSave: 1,
     microBsz: 1,
     accumGradBatches: 8,
     preFfn: false,
@@ -127,12 +142,13 @@ class CommonStore {
     autoUpdatesCheck: true,
     giteeUpdatesSource: getUserLanguage() === 'zh',
     cnMirror: getUserLanguage() === 'zh',
+    useHfMirror: false,
     host: '127.0.0.1',
     dpiScaling: 100,
     customModelsPath: './models',
     customPythonPath: '',
     apiUrl: '',
-    apiKey: 'sk-',
+    apiKey: '',
     apiChatModelName: 'rwkv',
     apiCompletionModelName: 'rwkv'
   };
@@ -172,7 +188,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);
@@ -226,6 +242,10 @@ class CommonStore {
     this.about = value;
   };
 
+  setLastModelName(value: string) {
+    this.lastModelName = value;
+  }
+
   setDepComplete = (value: boolean, inSaveCache: boolean = true) => {
     this.depComplete = value;
     if (inSaveCache)
@@ -252,6 +272,10 @@ class CommonStore {
     this.completionGenerating = value;
   }
 
+  setMonitorData(value: MonitorData) {
+    this.monitorData = value;
+  }
+
   setPlatform(value: Platform) {
     this.platform = value;
   }
@@ -334,16 +358,27 @@ class CommonStore {
     this.attachmentUploading = value;
   }
 
-  setAttachmentName(value: string) {
-    this.attachmentName = value;
+  setAttachments(value: { [uuid: string]: Attachment[] }) {
+    this.attachments = value;
   }
 
-  setAttachmentSize(value: number) {
-    this.attachmentSize = value;
+  setAttachment(uuid: string, value: Attachment[] | null) {
+    if (value === null)
+      delete this.attachments[uuid];
+    else
+      this.attachments[uuid] = value;
   }
 
-  setAttachmentContent(value: string) {
-    this.attachmentContent = value;
+  setCurrentTempAttachment(value: Attachment | null) {
+    this.currentTempAttachment = value;
+  }
+
+  setChatParams(value: Partial<ChatParams>) {
+    this.chatParams = { ...this.chatParams, ...value };
+  }
+
+  setSidePanelCollapsed(value: boolean | 'auto') {
+    this.sidePanelCollapsed = value;
   }
 }
 

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);
 }
 
@@ -16,7 +14,6 @@
 
 body {
   margin: 0;
-  overflow: hidden;
   width: 100%;
   height: 100%;
 }

frontend/src/types/about.ts

@@ -0,0 +1 @@
+export type AboutContent = { [lang: string]: string }

frontend/src/types/chat.ts

@@ -0,0 +1,37 @@
+import { ApiParameters } from './configs';
+
+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;
+}
+export type Attachment = {
+  name: string;
+  size: number;
+  content: string;
+}
+export type ChatParams = Omit<ApiParameters, 'apiPort'>

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
+}

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
+}

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' | 'nf4';
+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;
+}

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;
+}

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;
+};

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;
+};

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;
+};

frontend/src/types/settings.ts

@@ -0,0 +1,22 @@
+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
+  useHfMirror: boolean
+  host: string
+  dpiScaling: number
+  customModelsPath: string
+  customPythonPath: string
+  apiUrl: string
+  apiKey: string
+  apiChatModelName: string
+  apiCompletionModelName: string
+}

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;
+};

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 { BrowserOpenURL, EventsOff, EventsOn, 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
@@ -178,14 +178,14 @@ export const getStrategy = (modelConfig: ModelConfig | undefined = undefined) =>
       strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32';
       break;
     case 'WebGPU':
-      strategy += params.precision === 'int8' ? 'fp16i8' : 'fp16';
+      strategy += params.precision === 'nf4' ? 'fp16i4' : params.precision === 'int8' ? 'fp16i8' : 'fp16';
       break;
     case 'CUDA':
     case 'CUDA-Beta':
       if (avoidOverflow)
         strategy = params.useCustomCuda ? 'cuda fp16 *1 -> ' : 'cuda fp32 *1 -> ';
       strategy += 'cuda ';
-      strategy += params.precision === 'fp16' ? 'fp16' : params.precision === 'int8' ? 'fp16i8' : 'fp32';
+      strategy += params.precision === 'int8' ? 'fp16i8' : params.precision === 'fp32' ? 'fp32' : 'fp16';
       if (params.storedLayers < params.maxStoredLayers)
         strategy += ` *${params.storedLayers}+`;
       break;
@@ -193,7 +193,7 @@ export const getStrategy = (modelConfig: ModelConfig | undefined = undefined) =>
       if (avoidOverflow)
         strategy = 'mps fp32 *1 -> ';
       strategy += 'mps ';
-      strategy += params.precision === 'fp16' ? 'fp16' : params.precision === 'int8' ? 'fp16i8' : 'fp32';
+      strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32';
       break;
     case 'Custom':
       strategy = params.customStrategy || '';
@@ -289,7 +289,21 @@ export function bytesToReadable(size: number) {
   else return bytesToGb(size) + ' GB';
 }
 
+export function getServerRoot(defaultLocalPort: number) {
+  const defaultRoot = `http://127.0.0.1:${defaultLocalPort}`;
+  if (commonStore.status.status !== ModelStatus.Offline)
+    return defaultRoot;
+  const customApiUrl = commonStore.settings.apiUrl.trim().replace(/\/$/, '');
+  if (customApiUrl)
+    return customApiUrl;
+  if (commonStore.platform === 'web')
+    return '';
+  return defaultRoot;
+}
+
 export function absPathAsset(path: string) {
+  if (commonStore.platform === 'web')
+    return path;
   if ((path.length > 0 && path[0] === '/') ||
     (path.length > 1 && path[1] === ':')) {
     return '=>' + path;
@@ -322,12 +336,30 @@ export async function checkUpdate(notifyEvenLatest: boolean = false) {
                           `https://gitee.com/josc146/RWKV-Runner/releases/download/${versionTag}/${asset.name}`;
                         toastWithButton(t('New Version Available') + ': ' + versionTag, t('Update'), () => {
                           DeleteFile('cache.json');
-                          toast(t('Downloading update, please wait. If it is not completed, please manually download the program from GitHub and replace the original program.'), {
+                          const progressId = 'update_app';
+                          const progressEvent = 'updateApp';
+                          const updateProgress = (ds: DownloadStatus | null) => {
+                            const content =
+                              t('Downloading update, please wait. If it is not completed, please manually download the program from GitHub and replace the original program.')
+                              + (ds ? ` (${ds.progress.toFixed(2)}%  ${bytesToReadable(ds.transferred)}/${bytesToReadable(ds.size)})` : '');
+                            const options: ToastOptions = {
                               type: 'info',
                               position: 'bottom-left',
-                            autoClose: false
+                              autoClose: false,
+                              toastId: progressId,
+                              hideProgressBar: false,
+                              progress: ds ? ds.progress / 100 : 0
+                            };
+                            if (toast.isActive(progressId))
+                              toast.update(progressId, {
+                                render: content,
+                                ...options
                               });
-                          setTimeout(() => {
+                            else
+                              toast(content, options);
+                          };
+                          updateProgress(null);
+                          EventsOn(progressEvent, updateProgress);
                           UpdateApp(updateUrl).then(() => {
                             toast(t('Update completed, please restart the program.'), {
                                 type: 'success',
@@ -341,8 +373,10 @@ export async function checkUpdate(notifyEvenLatest: boolean = false) {
                               position: 'bottom-left',
                               autoClose: false
                             });
+                          }).finally(() => {
+                            toast.dismiss(progressId);
+                            EventsOff(progressEvent);
                           });
-                          }, 500);
                         }, {
                           autoClose: false,
                           position: 'bottom-left'
@@ -440,6 +474,12 @@ export function toastWithButton(text: string, buttonText: string, onClickButton:
   return id;
 }
 
+export function getHfDownloadUrl(url: string) {
+  if (commonStore.settings.useHfMirror && url.includes('huggingface.co') && url.includes('resolve'))
+    return url.replace('huggingface.co', 'hf-mirror.com');
+  return url;
+}
+
 export function getSupportedCustomCudaFile(isBeta: boolean) {
   if ([' 10', ' 16', ' 20', ' 30', 'MX', 'Tesla P', 'Quadro P', 'NVIDIA P', 'TITAN X', 'TITAN RTX', 'RTX A',
     'Quadro RTX 4000', 'Quadro RTX 5000', 'Tesla T4', 'NVIDIA A10', 'NVIDIA A40'].some(v => commonStore.status.device_name.includes(v)))

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))
+  })
+}

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)
+        }
+      }
+    }
+  }
 });

frontend/wailsjs/go/backend_golang/App.d.ts

@@ -28,6 +28,8 @@ export function GetPyError():Promise<string>;
 
 export function InstallPyDep(arg1:string,arg2:boolean):Promise<string>;
 
+export function IsPortAvailable(arg1:number):Promise<boolean>;
+
 export function ListDirFiles(arg1:string):Promise<Array<backend_golang.FileInfo>>;
 
 export function MergeLora(arg1:string,arg2:boolean,arg3:number,arg4:string,arg5:string,arg6:string):Promise<string>;
@@ -50,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>;
 

frontend/wailsjs/go/backend_golang/App.js

@@ -54,6 +54,10 @@ export function InstallPyDep(arg1, arg2) {
   return window['go']['backend_golang']['App']['InstallPyDep'](arg1, arg2);
 }
 
+export function IsPortAvailable(arg1) {
+  return window['go']['backend_golang']['App']['IsPortAvailable'](arg1);
+}
+
 export function ListDirFiles(arg1) {
   return window['go']['backend_golang']['App']['ListDirFiles'](arg1);
 }
@@ -98,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) {

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)

manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.8",
+  "version": "1.5.2",
   "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的优点结合起来 - 高性能、快速推理、节省显存、快速训练、“无限”上下文长度以及免费的语句嵌入（使用最终隐藏状态）。"