From 3aec1f47e1224b9f2cc1ccb1b74989b59975eddd Mon Sep 17 00:00:00 2001 From: josc146 Date: Tue, 20 Aug 2024 17:42:42 +0800 Subject: [PATCH] format frontend --- frontend/i18nally.json | 6 +- frontend/postcss.config.js | 2 +- frontend/prettier.config.js | 6 +- frontend/src/App.tsx | 97 +- frontend/src/_locales/i18n-react.ts | 27 +- frontend/src/_locales/i18n.ts | 18 +- frontend/src/_locales/ja/main.json | 2 +- frontend/src/_locales/resources.ts | 12 +- frontend/src/_locales/zh-hans/main.json | 2 +- frontend/src/apis/index.ts | 107 +- frontend/src/components/ConfigSelector.tsx | 54 +- frontend/src/components/CopyButton.tsx | 46 +- .../src/components/CustomToastContainer.tsx | 9 +- frontend/src/components/DialogButton.tsx | 147 +- frontend/src/components/Labeled.tsx | 62 +- .../src/components/LazyImportComponent.tsx | 29 +- frontend/src/components/MarkdownRender.tsx | 64 +- frontend/src/components/NumberInput.tsx | 52 +- frontend/src/components/Page.tsx | 15 +- frontend/src/components/ReadButton.tsx | 119 +- .../src/components/ResetConfigsButton.tsx | 51 +- frontend/src/components/RunButton.tsx | 673 ++++--- frontend/src/components/Section.tsx | 36 +- frontend/src/components/ToolTipButton.tsx | 75 +- frontend/src/components/ValuedSlider.tsx | 65 +- frontend/src/components/WorkHeader.tsx | 62 +- frontend/src/main.tsx | 30 +- frontend/src/pages/About.tsx | 41 +- .../AudiotrackManager/AudiotrackButton.tsx | 91 +- .../AudiotrackManager/AudiotrackEditor.tsx | 1264 ++++++++----- frontend/src/pages/Chat.tsx | 1682 ++++++++++------- frontend/src/pages/Completion.tsx | 504 +++-- frontend/src/pages/Composition.tsx | 763 +++++--- frontend/src/pages/Configs.tsx | 1286 ++++++++----- frontend/src/pages/Downloads.tsx | 163 +- frontend/src/pages/Home.tsx | 208 +- frontend/src/pages/Models.tsx | 420 ++-- .../pages/PresetsManager/MessagesEditor.tsx | 179 +- .../pages/PresetsManager/PresetsButton.tsx | 934 +++++---- frontend/src/pages/Settings.tsx | 706 ++++--- frontend/src/pages/Train.tsx | 1022 ++++++---- frontend/src/pages/defaultConfigs.ts | 618 +++--- frontend/src/pages/index.tsx | 42 +- frontend/src/startup.ts | 285 +-- frontend/src/stores/commonStore.ts | 442 ++--- frontend/src/style.scss | 5 +- frontend/src/types/about.ts | 2 +- frontend/src/types/chat.ts | 44 +- frontend/src/types/completion.ts | 14 +- frontend/src/types/composition.ts | 66 +- frontend/src/types/configs.ts | 60 +- frontend/src/types/downloads.ts | 20 +- frontend/src/types/home.ts | 12 +- frontend/src/types/html-midi-player.d.ts | 10 +- frontend/src/types/models.ts | 30 +- frontend/src/types/presets.ts | 43 +- frontend/src/types/settings.ts | 8 +- frontend/src/types/train.ts | 56 +- frontend/src/utils/convert-model.ts | 247 ++- frontend/src/utils/index.tsx | 1100 ++++++----- frontend/src/utils/web-file-operations.ts | 104 +- frontend/src/webWails.js | 142 +- frontend/tailwind.config.js | 45 +- frontend/tsconfig.json | 10 +- frontend/tsconfig.node.json | 4 +- frontend/vite.config.ts | 71 +- 66 files changed, 8656 insertions(+), 5955 deletions(-) diff --git a/frontend/i18nally.json b/frontend/i18nally.json index 6d6a83fb..be6bac3b 100644 --- a/frontend/i18nally.json +++ b/frontend/i18nally.json @@ -81,9 +81,7 @@ } ], "ignores": { - "valuesInProject": [ - "use strict" - ], + "valuesInProject": ["use strict"], "valuesInFile": {}, "filesInProject": [], "unignoredFunctionNames": [], @@ -107,4 +105,4 @@ "middleware" ] } -} \ No newline at end of file +} diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 2e7af2b7..33ad091d 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -1,4 +1,4 @@ -export default { +module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js index c1ce2e92..49068690 100644 --- a/frontend/prettier.config.js +++ b/frontend/prettier.config.js @@ -14,6 +14,6 @@ module.exports = { importOrderCombineTypeAndValueImports: true, plugins: [ '@ianvs/prettier-plugin-sort-imports', - 'prettier-plugin-tailwindcss' - ] -} \ No newline at end of file + 'prettier-plugin-tailwindcss', + ], +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f4e847f1..8596e4d3 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -23,39 +23,54 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE // SOFTWARE. -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 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'; +import { FC, useEffect, useState } from 'react' +import { + FluentProvider, + Tab, + TabList, + webDarkTheme, + webLightTheme, +} from '@fluentui/react-components' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import { Route, Routes, useLocation, useNavigate } from 'react-router' +import { useMediaQuery } from 'usehooks-ts' +import { CustomToastContainer } from './components/CustomToastContainer' +import { LazyImportComponent } from './components/LazyImportComponent' +import { pages as clientPages } from './pages' +import commonStore from './stores/commonStore' 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 { 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(pages[0].path); + const [path, setPath] = useState(pages[0].path) const selectTab = (selectedPath: unknown) => - typeof selectedPath === 'string' ? navigate({ pathname: selectedPath }) : null; + typeof selectedPath === 'string' + ? navigate({ pathname: selectedPath }) + : null - useEffect(() => setPath(location.pathname), [location]); + useEffect(() => setPath(location.pathname), [location]) return ( + data-theme={commonStore.settings.darkMode ? 'dark' : 'light'} + >
-
+
{ onTabSelect={(_, { value }) => selectTab(value)} vertical > - {pages.filter(page => page.top).map(({ label, path, icon }, index) => ( - - {mq && t(label)} - - ))} + {pages + .filter((page) => page.top) + .map(({ label, path, icon }, index) => ( + + {mq && t(label)} + + ))} { onTabSelect={(_, { value }) => selectTab(value)} vertical > - {pages.filter(page => !page.top).map(({ label, path, icon }, index) => ( - - {mq && t(label)} - - ))} + {pages + .filter((page) => !page.top) + .map(({ label, path, icon }, index) => ( + + {mq && t(label)} + + ))}
-
+
{pages.map(({ path, element }, index) => ( - } /> + } + /> ))}
- ); -}); + ) +}) -export default App; +export default App diff --git a/frontend/src/_locales/i18n-react.ts b/frontend/src/_locales/i18n-react.ts index a04e2799..596f3021 100644 --- a/frontend/src/_locales/i18n-react.ts +++ b/frontend/src/_locales/i18n-react.ts @@ -1,13 +1,16 @@ -import i18n, { changeLanguage } from 'i18next'; -import { initReactI18next } from 'react-i18next'; -import { resources } from './resources'; -import { getUserLanguage } from '../utils'; +import i18n, { changeLanguage } from 'i18next' +import { initReactI18next } from 'react-i18next' +import { getUserLanguage } from '../utils' +import { resources } from './resources' -i18n.use(initReactI18next).init({ - resources, - interpolation: { - escapeValue: false // not needed for react as it escapes by default - } -}).then(() => { - changeLanguage(getUserLanguage()); -}); +i18n + .use(initReactI18next) + .init({ + resources, + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + }) + .then(() => { + changeLanguage(getUserLanguage()) + }) diff --git a/frontend/src/_locales/i18n.ts b/frontend/src/_locales/i18n.ts index dc30d1b7..f351c4e7 100644 --- a/frontend/src/_locales/i18n.ts +++ b/frontend/src/_locales/i18n.ts @@ -1,9 +1,11 @@ -import i18n, { changeLanguage } from 'i18next'; -import { resources } from './resources'; -import { getUserLanguage } from '../utils'; +import i18n, { changeLanguage } from 'i18next' +import { getUserLanguage } from '../utils' +import { resources } from './resources' -i18n.init({ - resources -}).then(() => { - changeLanguage(getUserLanguage()); -}); +i18n + .init({ + resources, + }) + .then(() => { + changeLanguage(getUserLanguage()) + }) diff --git a/frontend/src/_locales/ja/main.json b/frontend/src/_locales/ja/main.json index c9389e85..53c432ad 100644 --- a/frontend/src/_locales/ja/main.json +++ b/frontend/src/_locales/ja/main.json @@ -364,4 +364,4 @@ "Note: You are using an English state": "注意: あなたは英語のstateを使用しています", "Note: You are using a Chinese state": "注意: あなたは中国語のstateを使用しています", "Note: You are using a Japanese state": "注意: あなたは日本語のstateを使用しています" -} \ No newline at end of file +} diff --git a/frontend/src/_locales/resources.ts b/frontend/src/_locales/resources.ts index 37ca7759..e5768a5f 100644 --- a/frontend/src/_locales/resources.ts +++ b/frontend/src/_locales/resources.ts @@ -1,9 +1,9 @@ -import zhHans from './zh-hans/main.json'; -import ja from './ja/main.json'; +import ja from './ja/main.json' +import zhHans from './zh-hans/main.json' export const resources = { zh: { - translation: zhHans + translation: zhHans, }, // de: { // translation: de, @@ -21,8 +21,8 @@ export const resources = { // translation: it, // }, ja: { - translation: ja - } + translation: ja, + }, // ko: { // translation: ko, // }, @@ -35,4 +35,4 @@ export const resources = { // zhHant: { // translation: zhHant, // }, -}; +} diff --git a/frontend/src/_locales/zh-hans/main.json b/frontend/src/_locales/zh-hans/main.json index 0e26ea6e..b913e167 100644 --- a/frontend/src/_locales/zh-hans/main.json +++ b/frontend/src/_locales/zh-hans/main.json @@ -364,4 +364,4 @@ "Note: You are using an English state": "注意: 你正在使用一个英文state", "Note: You are using a Chinese state": "注意: 你正在使用一个中文state", "Note: You are using a Japanese state": "注意: 你正在使用一个日文state" -} \ No newline at end of file +} diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index ab8972ea..a59b529e 100644 --- a/frontend/src/apis/index.ts +++ b/frontend/src/apis/index.ts @@ -1,73 +1,90 @@ -import commonStore, { Status } from '../stores/commonStore'; -import { toast } from 'react-toastify'; -import { TFunction } from 'i18next'; +import { TFunction } from 'i18next' +import { toast } from 'react-toastify' +import commonStore, { Status } from '../stores/commonStore' export const readRoot = async () => { - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; - return fetch(`http://127.0.0.1:${port}`); -}; + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort + return fetch(`http://127.0.0.1:${port}`) +} export const exit = async (timeout?: number) => { - const controller = new AbortController(); - if (timeout) - setTimeout(() => controller.abort(), timeout); + const controller = new AbortController() + if (timeout) setTimeout(() => controller.abort(), timeout) - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; - return fetch(`http://127.0.0.1:${port}/exit`, { method: 'POST', signal: controller.signal }); -}; + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort + return fetch(`http://127.0.0.1:${port}/exit`, { + method: 'POST', + signal: controller.signal, + }) +} export const switchModel = async (body: any) => { - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort return fetch(`http://127.0.0.1:${port}/switch-model`, { method: 'POST', headers: { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', }, - body: JSON.stringify(body) - }); -}; + body: JSON.stringify(body), + }) +} -export const updateConfig = async (t: TFunction<'translation', undefined, 'translation'>, body: any) => { +export const updateConfig = async ( + t: TFunction<'translation', undefined, 'translation'>, + body: any +) => { if (body.state) { - const stateName = body.state.toLowerCase(); - if (commonStore.settings.language !== 'zh' && (stateName.includes('chn') || stateName.includes('chinese'))) { + const stateName = body.state.toLowerCase() + if ( + commonStore.settings.language !== 'zh' && + (stateName.includes('chn') || stateName.includes('chinese')) + ) { toast(t('Note: You are using a Chinese state'), { type: 'warning', - toastId: 'state_warning' - }); - } else if (commonStore.settings.language !== 'dev' && (stateName.includes('eng') || stateName.includes('english'))) { + toastId: 'state_warning', + }) + } else if ( + commonStore.settings.language !== 'dev' && + (stateName.includes('eng') || stateName.includes('english')) + ) { toast(t('Note: You are using an English state'), { type: 'warning', - toastId: 'state_warning' - }); - } else if (commonStore.settings.language !== 'ja' && (stateName.includes('jpn') || stateName.includes('japanese'))) { + toastId: 'state_warning', + }) + } else if ( + commonStore.settings.language !== 'ja' && + (stateName.includes('jpn') || stateName.includes('japanese')) + ) { toast(t('Note: You are using a Japanese state'), { type: 'warning', - toastId: 'state_warning' - }); + toastId: 'state_warning', + }) } } - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort return fetch(`http://127.0.0.1:${port}/update-config`, { method: 'POST', headers: { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', }, - body: JSON.stringify(body) - }); -}; + body: JSON.stringify(body), + }) +} -export const getStatus = async (timeout?: number): Promise => { - const controller = new AbortController(); - if (timeout) - setTimeout(() => controller.abort(), timeout); +export const getStatus = async ( + timeout?: number +): Promise => { + const controller = new AbortController() + if (timeout) setTimeout(() => controller.abort(), timeout) - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; - let ret: Status | undefined; - await fetch(`http://127.0.0.1:${port}/status`, { signal: controller.signal }).then(r => r.json()).then(data => { - ret = data; - }).catch(() => { - }); - return ret; -}; + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort + let ret: Status | undefined + await fetch(`http://127.0.0.1:${port}/status`, { signal: controller.signal }) + .then((r) => r.json()) + .then((data) => { + ret = data + }) + .catch(() => {}) + return ret +} diff --git a/frontend/src/components/ConfigSelector.tsx b/frontend/src/components/ConfigSelector.tsx index 1be1f0fd..ae21e7cd 100644 --- a/frontend/src/components/ConfigSelector.tsx +++ b/frontend/src/components/ConfigSelector.tsx @@ -1,24 +1,32 @@ -import { FC } from 'react'; -import { observer } from 'mobx-react-lite'; -import { Dropdown, Option, PresenceBadge } from '@fluentui/react-components'; -import commonStore from '../stores/commonStore'; +import { FC } from 'react' +import { Dropdown, Option, PresenceBadge } from '@fluentui/react-components' +import { observer } from 'mobx-react-lite' +import commonStore from '../stores/commonStore' -export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => { - return { - if (data.optionValue) - commonStore.setCurrentConfigIndex(Number(data.optionValue)); - }}> - {commonStore.modelConfigs.map((config, index) => - - )} - ; -}); \ No newline at end of file +export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = + observer(({ size }) => { + return ( + { + if (data.optionValue) + commonStore.setCurrentConfigIndex(Number(data.optionValue)) + }} + > + {commonStore.modelConfigs.map((config, index) => ( + + ))} + + ) + }) diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx index 7dc3304f..502c4efe 100644 --- a/frontend/src/components/CopyButton.tsx +++ b/frontend/src/components/CopyButton.tsx @@ -1,26 +1,34 @@ -import { FC, useState } from 'react'; -import { CheckIcon, CopyIcon } from '@primer/octicons-react'; -import { useTranslation } from 'react-i18next'; -import { ClipboardSetText } from '../../wailsjs/runtime'; -import { ToolTipButton } from './ToolTipButton'; +import { FC, useState } from 'react' +import { CheckIcon, CopyIcon } from '@primer/octicons-react' +import { useTranslation } from 'react-i18next' +import { ClipboardSetText } from '../../wailsjs/runtime' +import { ToolTipButton } from './ToolTipButton' -export const CopyButton: FC<{ content: string, showDelay?: number, }> = ({ content, showDelay = 0 }) => { - const { t } = useTranslation(); - const [copied, setCopied] = useState(false); +export const CopyButton: FC<{ content: string; showDelay?: number }> = ({ + content, + showDelay = 0, +}) => { + const { t } = useTranslation() + const [copied, setCopied] = useState(false) const onClick = () => { ClipboardSetText(content) - .then(() => setCopied(true)) - .then(() => - setTimeout(() => { - setCopied(false); - }, 600) - ); - }; + .then(() => setCopied(true)) + .then(() => + setTimeout(() => { + setCopied(false) + }, 600) + ) + } return ( - : } - onClick={onClick} /> - ); -}; + onClick={onClick} + /> + ) +} diff --git a/frontend/src/components/CustomToastContainer.tsx b/frontend/src/components/CustomToastContainer.tsx index eb8e6ca3..6f9a4557 100644 --- a/frontend/src/components/CustomToastContainer.tsx +++ b/frontend/src/components/CustomToastContainer.tsx @@ -1,7 +1,7 @@ -import commonStore from '../stores/commonStore'; -import { ToastContainer } from 'react-toastify'; +import { ToastContainer } from 'react-toastify' +import commonStore from '../stores/commonStore' -export const CustomToastContainer = () => +export const CustomToastContainer = () => ( pauseOnFocusLoss={false} draggable={false} theme={commonStore.settings.darkMode ? 'dark' : 'light'} - />; \ No newline at end of file + /> +) diff --git a/frontend/src/components/DialogButton.tsx b/frontend/src/components/DialogButton.tsx index 1e65499b..877269bd 100644 --- a/frontend/src/components/DialogButton.tsx +++ b/frontend/src/components/DialogButton.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactElement } from 'react'; +import React, { FC, ReactElement } from 'react' import { Button, Dialog, @@ -7,75 +7,102 @@ import { DialogContent, DialogSurface, DialogTitle, - DialogTrigger -} from '@fluentui/react-components'; -import { ToolTipButton } from './ToolTipButton'; -import { useTranslation } from 'react-i18next'; -import { LazyImportComponent } from './LazyImportComponent'; + DialogTrigger, +} from '@fluentui/react-components' +import { useTranslation } from 'react-i18next' +import { LazyImportComponent } from './LazyImportComponent' +import { ToolTipButton } from './ToolTipButton' -const MarkdownRender = React.lazy(() => import('./MarkdownRender')); +const MarkdownRender = React.lazy(() => import('./MarkdownRender')) export const DialogButton: FC<{ - text?: string | null, - icon?: ReactElement, - tooltip?: string | null, - className?: string, - title: string, + text?: string | null + icon?: ReactElement + tooltip?: string | null + className?: string + title: string content?: string | ReactElement | null - markdown?: boolean, - onConfirm?: () => void, - size?: 'small' | 'medium' | 'large', - shape?: 'rounded' | 'circular' | 'square', - appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent', - cancelButton?: boolean, - confirmButton?: boolean, - cancelButtonText?: string, - confirmButtonText?: string, + markdown?: boolean + onConfirm?: () => void + size?: 'small' | 'medium' | 'large' + shape?: 'rounded' | 'circular' | 'square' + appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' + cancelButton?: boolean + confirmButton?: boolean + cancelButtonText?: string + confirmButtonText?: string }> = ({ - text, icon, tooltip, className, title, content, markdown, - onConfirm, size, shape, appearance, + text, + icon, + tooltip, + className, + title, + content, + markdown, + onConfirm, + size, + shape, + appearance, cancelButton = true, confirmButton = true, cancelButtonText = 'Cancel', - confirmButtonText = 'Confirm' + confirmButtonText = 'Confirm', }) => { - const { t } = useTranslation(); + const { t } = useTranslation() - return - - {tooltip ? - : - - } - - - - {title} - - { - markdown ? + return ( + + + {tooltip ? ( + + ) : ( + + )} + + + + {title} + + {markdown ? ( {content} - : + + ) : ( content - } - - - {cancelButton && ( - - - - )} - {confirmButton && ( - - - - )} - - - - ; -}; \ No newline at end of file + )} + + + {cancelButton && ( + + + + )} + {confirmButton && ( + + + + )} + + + + + ) +} diff --git a/frontend/src/components/Labeled.tsx b/frontend/src/components/Labeled.tsx index d315c111..4dee13ee 100644 --- a/frontend/src/components/Labeled.tsx +++ b/frontend/src/components/Labeled.tsx @@ -1,15 +1,15 @@ -import { FC, ReactElement } from 'react'; -import { Label, Tooltip } from '@fluentui/react-components'; -import classnames from 'classnames'; +import { FC, ReactElement } from 'react' +import { Label, Tooltip } from '@fluentui/react-components' +import classnames from 'classnames' export const Labeled: FC<{ - label: string; - desc?: string | null, - descComponent?: ReactElement, - content: ReactElement, - flex?: boolean, - spaceBetween?: boolean, - breakline?: boolean, + label: string + desc?: string | null + descComponent?: ReactElement + content: ReactElement + flex?: boolean + spaceBetween?: boolean + breakline?: boolean onMouseEnter?: () => void onMouseLeave?: () => void }> = ({ @@ -21,22 +21,34 @@ export const Labeled: FC<{ spaceBetween, breakline, onMouseEnter, - onMouseLeave + onMouseLeave, }) => { return ( -
- {(desc || descComponent) ? - - - : - - } +
+ {desc || descComponent ? ( + + + + ) : ( + + )} {content}
- ); -}; + ) +} diff --git a/frontend/src/components/LazyImportComponent.tsx b/frontend/src/components/LazyImportComponent.tsx index 17f8d0f7..f94e4249 100644 --- a/frontend/src/components/LazyImportComponent.tsx +++ b/frontend/src/components/LazyImportComponent.tsx @@ -1,24 +1,27 @@ -import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Spinner } from '@fluentui/react-components'; +import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react' +import { Spinner } from '@fluentui/react-components' +import { useTranslation } from 'react-i18next' interface LazyImportComponentProps { - lazyChildren: LazyExoticComponent>; - lazyProps?: any; - children?: ReactNode; + lazyChildren: LazyExoticComponent> + lazyProps?: any + children?: ReactNode } export const LazyImportComponent: FC = (props) => { - const { t } = useTranslation(); + const { t } = useTranslation() return ( - - -
}> + + +
+ } + > {props.children} - ); -}; \ No newline at end of file + ) +} diff --git a/frontend/src/components/MarkdownRender.tsx b/frontend/src/components/MarkdownRender.tsx index 6a811361..50008e45 100644 --- a/frontend/src/components/MarkdownRender.tsx +++ b/frontend/src/components/MarkdownRender.tsx @@ -1,37 +1,45 @@ -import 'katex/dist/katex.min.css'; -import ReactMarkdown from 'react-markdown'; -import rehypeRaw from 'rehype-raw'; -import rehypeHighlight from 'rehype-highlight'; -import rehypeKatex from 'rehype-katex'; -import remarkMath from 'remark-math'; -import remarkGfm from 'remark-gfm'; -import remarkBreaks from 'remark-breaks'; -import { FC } from 'react'; -import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown'; -import { BrowserOpenURL } from '../../wailsjs/runtime'; +import 'katex/dist/katex.min.css' +import { FC } from 'react' +import ReactMarkdown from 'react-markdown' +import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown' +import rehypeHighlight from 'rehype-highlight' +import rehypeKatex from 'rehype-katex' +import rehypeRaw from 'rehype-raw' +import remarkBreaks from 'remark-breaks' +import remarkGfm from 'remark-gfm' +import remarkMath from 'remark-math' +import { BrowserOpenURL } from '../../wailsjs/runtime' const Hyperlink: FC = ({ href, children }) => { return ( { - BrowserOpenURL(href); + BrowserOpenURL(href) }} > {/*@ts-ignore*/} {children} - ); -}; + ) +} -const MarkdownRender: FC = (props) => { +const MarkdownRender: FC = ( + props +) => { return ( -
- {props.disabled ? +
+ {props.disabled ? (
{props.children} -
: - + ) : ( + = (props 's', 'a', 'pre', - 'cite' + 'cite', ]} unwrapDisallowed={true} remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]} @@ -101,19 +109,19 @@ const MarkdownRender: FC = (props rehypeHighlight, { detect: true, - ignoreMissing: true - } - ] + ignoreMissing: true, + }, + ], ]} components={{ - a: Hyperlink + a: Hyperlink, }} > {props.children} - } + )}
- ); -}; + ) +} -export default MarkdownRender; +export default MarkdownRender diff --git a/frontend/src/components/NumberInput.tsx b/frontend/src/components/NumberInput.tsx index dafdaa1d..575d5ad0 100644 --- a/frontend/src/components/NumberInput.tsx +++ b/frontend/src/components/NumberInput.tsx @@ -1,33 +1,45 @@ -import React, { CSSProperties, FC } from 'react'; -import { Input } from '@fluentui/react-components'; -import { SliderOnChangeData } from '@fluentui/react-slider'; +import React, { CSSProperties, FC } from 'react' +import { Input } from '@fluentui/react-components' +import { SliderOnChangeData } from '@fluentui/react-slider' export const NumberInput: FC<{ - value: number, - min: number, - max: number, - step?: number, - onChange?: (ev: React.ChangeEvent, data: SliderOnChangeData) => void - style?: CSSProperties, + value: number + min: number + max: number + step?: number + onChange?: ( + ev: React.ChangeEvent, + data: SliderOnChangeData + ) => void + style?: CSSProperties toFixed?: number disabled?: boolean }> = ({ value, min, max, step, onChange, style, toFixed = 2, disabled }) => { return ( - { - onChange?.(e, { value: Number(data.value) }); + onChange?.(e, { value: Number(data.value) }) }} onBlur={(e) => { if (onChange) { if (step) { - const offset = (min > 0 ? min : 0) - (max < 0 ? max : 0); - value = Number((( - Math.round((value - offset) / step) * step) - + offset) - .toFixed(toFixed)); // avoid precision issues + const offset = (min > 0 ? min : 0) - (max < 0 ? max : 0) + value = Number( + (Math.round((value - offset) / step) * step + offset).toFixed( + toFixed + ) + ) // avoid precision issues } - onChange(e, { value: Math.max(Math.min(value, max), min) }); + onChange(e, { value: Math.max(Math.min(value, max), min) }) } - }} /> - ); -}; + }} + /> + ) +} diff --git a/frontend/src/components/Page.tsx b/frontend/src/components/Page.tsx index f835a241..86e1e503 100644 --- a/frontend/src/components/Page.tsx +++ b/frontend/src/components/Page.tsx @@ -1,12 +1,15 @@ -import React, { FC, ReactElement } from 'react'; -import { Divider, Text } from '@fluentui/react-components'; +import React, { FC, ReactElement } from 'react' +import { Divider, Text } from '@fluentui/react-components' -export const Page: FC<{ title: string; content: ReactElement }> = ({ title, content }) => { +export const Page: FC<{ title: string; content: ReactElement }> = ({ + title, + content, +}) => { return ( -
+
{title} {content}
- ); -}; + ) +} diff --git a/frontend/src/components/ReadButton.tsx b/frontend/src/components/ReadButton.tsx index 2c019752..0a86b563 100644 --- a/frontend/src/components/ReadButton.tsx +++ b/frontend/src/components/ReadButton.tsx @@ -1,70 +1,73 @@ -import { FC, useState } from 'react'; -import { MuteIcon, UnmuteIcon } from '@primer/octicons-react'; -import { useTranslation } from 'react-i18next'; -import { ToolTipButton } from './ToolTipButton'; -import commonStore from '../stores/commonStore'; -import { observer } from 'mobx-react-lite'; +import { FC, useState } from 'react' +import { MuteIcon, UnmuteIcon } from '@primer/octicons-react' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import commonStore from '../stores/commonStore' +import { ToolTipButton } from './ToolTipButton' -const synth = window.speechSynthesis; +const synth = window.speechSynthesis export const ReadButton: FC<{ - content: string, - inSpeaking?: boolean, - showDelay?: number, + content: string + inSpeaking?: boolean + showDelay?: number setSpeakingOuter?: (speaking: boolean) => void -}> = observer(({ - content, - inSpeaking = false, - showDelay = 0, - setSpeakingOuter -}) => { - const { t } = useTranslation(); - const [speaking, setSpeaking] = useState(inSpeaking); - let lang: string = commonStore.settings.language; - if (lang === 'dev') - lang = 'en'; +}> = observer( + ({ content, inSpeaking = false, showDelay = 0, setSpeakingOuter }) => { + const { t } = useTranslation() + const [speaking, setSpeaking] = useState(inSpeaking) + let lang: string = commonStore.settings.language + if (lang === 'dev') lang = 'en' - const setSpeakingInner = (speaking: boolean) => { - setSpeakingOuter?.(speaking); - setSpeaking(speaking); - }; + const setSpeakingInner = (speaking: boolean) => { + setSpeakingOuter?.(speaking) + setSpeaking(speaking) + } - const startSpeak = () => { - synth.cancel(); + const startSpeak = () => { + synth.cancel() - const utterance = new SpeechSynthesisUtterance(content); - const voices = synth.getVoices(); + const utterance = new SpeechSynthesisUtterance(content) + const voices = synth.getVoices() - let voice; - if (lang === 'en') - 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); + let voice + if (lang === 'en') + 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) - Object.assign(utterance, { - rate: 1, - volume: 1, - onend: () => setSpeakingInner(false), - onerror: () => setSpeakingInner(false), - voice: voice - }); + Object.assign(utterance, { + rate: 1, + volume: 1, + onend: () => setSpeakingInner(false), + onerror: () => setSpeakingInner(false), + voice: voice, + }) - synth.speak(utterance); - setSpeakingInner(true); - }; + synth.speak(utterance) + setSpeakingInner(true) + } - const stopSpeak = () => { - synth.cancel(); - setSpeakingInner(false); - }; + const stopSpeak = () => { + synth.cancel() + setSpeakingInner(false) + } - return ( - : } - onClick={speaking ? stopSpeak : startSpeak} /> - ); -}); + return ( + : } + onClick={speaking ? stopSpeak : startSpeak} + /> + ) + } +) diff --git a/frontend/src/components/ResetConfigsButton.tsx b/frontend/src/components/ResetConfigsButton.tsx index ad9c9918..8068deb1 100644 --- a/frontend/src/components/ResetConfigsButton.tsx +++ b/frontend/src/components/ResetConfigsButton.tsx @@ -1,18 +1,35 @@ -import React, { FC } from 'react'; -import { DialogButton } from './DialogButton'; -import { useTranslation } from 'react-i18next'; -import { ArrowReset20Regular } from '@fluentui/react-icons'; -import commonStore from '../stores/commonStore'; +import React, { FC } from 'react' +import { ArrowReset20Regular } from '@fluentui/react-icons' +import { useTranslation } from 'react-i18next' +import { + defaultModelConfigs, + defaultModelConfigsMac, +} from '../pages/defaultConfigs' +import commonStore from '../stores/commonStore' +import { DialogButton } from './DialogButton' -import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultConfigs'; - -export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => { - const { t } = useTranslation(); - return } tooltip={t('Reset All Configs')} title={t('Reset All Configs')} - content={t('Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.')} - onConfirm={() => { - commonStore.setModelConfigs(commonStore.platform !== 'darwin' ? defaultModelConfigs : defaultModelConfigsMac, false); - commonStore.setCurrentConfigIndex(0, true); - afterConfirm?.(); - }} />; -}; \ No newline at end of file +export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ + afterConfirm, +}) => { + const { t } = useTranslation() + return ( + } + tooltip={t('Reset All Configs')} + title={t('Reset All Configs')} + content={t( + 'Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.' + )} + onConfirm={() => { + commonStore.setModelConfigs( + commonStore.platform !== 'darwin' + ? defaultModelConfigs + : defaultModelConfigsMac, + false + ) + commonStore.setCurrentConfigIndex(0, true) + afterConfirm?.() + }} + /> + ) +} diff --git a/frontend/src/components/RunButton.tsx b/frontend/src/components/RunButton.tsx index 8810901c..2b92f26d 100644 --- a/frontend/src/components/RunButton.tsx +++ b/frontend/src/components/RunButton.tsx @@ -1,359 +1,482 @@ -import React, { FC, MouseEventHandler, ReactElement } from 'react'; -import commonStore, { ModelStatus } from '../stores/commonStore'; +import React, { FC, MouseEventHandler, ReactElement } from 'react' +import { Button } from '@fluentui/react-components' +import { Play16Regular, Stop16Regular } from '@fluentui/react-icons' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import { useNavigate } from 'react-router' +import { toast } from 'react-toastify' 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, 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'; -import { convertToGGML, convertToSt } from '../utils/convert-model'; -import { Precision } from '../types/configs'; -import { defaultCompositionABCPrompt, defaultCompositionPrompt } from '../pages/defaultConfigs'; + StartWebGPUServer, +} from '../../wailsjs/go/backend_golang/App' +import { WindowShow } from '../../wailsjs/runtime' +import { exit, getStatus, readRoot, switchModel, updateConfig } from '../apis' +import { + defaultCompositionABCPrompt, + defaultCompositionPrompt, +} from '../pages/defaultConfigs' +import commonStore, { ModelStatus } from '../stores/commonStore' +import { Precision } from '../types/configs' +import { + checkDependencies, + getHfDownloadUrl, + getStrategy, + toastWithButton, +} from '../utils' +import { convertToGGML, convertToSt } from '../utils/convert-model' +import { ToolTipButton } from './ToolTipButton' const mainButtonText = { [ModelStatus.Offline]: 'Run', [ModelStatus.Starting]: 'Starting', [ModelStatus.Loading]: 'Loading', - [ModelStatus.Working]: 'Stop' -}; + [ModelStatus.Working]: 'Stop', +} const iconModeButtonIcon: { [modelStatus: number]: ReactElement } = { [ModelStatus.Offline]: , [ModelStatus.Starting]: , [ModelStatus.Loading]: , - [ModelStatus.Working]: -}; + [ModelStatus.Working]: , +} -export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean }> - = observer(({ - onClickRun, - iconMode -}) => { - const { t } = useTranslation(); - const navigate = useNavigate(); +export const RunButton: FC<{ + onClickRun?: MouseEventHandler + iconMode?: boolean +}> = observer(({ onClickRun, iconMode }) => { + const { t } = useTranslation() + const navigate = useNavigate() const onClickMainButton = async () => { if (commonStore.status.status === ModelStatus.Offline) { - commonStore.setStatus({ status: ModelStatus.Starting }); + commonStore.setStatus({ status: ModelStatus.Starting }) - const modelConfig = commonStore.getCurrentModelConfig(); - const webgpu = modelConfig.modelParameters.device === 'WebGPU'; - const webgpuPython = modelConfig.modelParameters.device === 'WebGPU (Python)'; - const cpp = modelConfig.modelParameters.device === 'CPU (rwkv.cpp)'; - let modelName = ''; - let modelPath = ''; + const modelConfig = commonStore.getCurrentModelConfig() + const webgpu = modelConfig.modelParameters.device === 'WebGPU' + const webgpuPython = + modelConfig.modelParameters.device === 'WebGPU (Python)' + const cpp = modelConfig.modelParameters.device === 'CPU (rwkv.cpp)' + let modelName = '' + let modelPath = '' if (modelConfig && modelConfig.modelParameters) { - modelName = modelConfig.modelParameters.modelName; - modelPath = `${commonStore.settings.customModelsPath}/${modelName}`; + modelName = modelConfig.modelParameters.modelName + modelPath = `${commonStore.settings.customModelsPath}/${modelName}` } else { - toast(t('Model Config Exception'), { type: 'error' }); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + toast(t('Model Config Exception'), { type: 'error' }) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } - const currentModelSource = commonStore.modelSourceList.find(item => item.name === modelName); + const currentModelSource = commonStore.modelSourceList.find( + (item) => item.name === modelName + ) const showDownloadPrompt = (promptInfo: string, downloadName: string) => { toastWithButton(promptInfo, t('Download'), () => { - const downloadUrl = currentModelSource?.downloadUrl; + const downloadUrl = currentModelSource?.downloadUrl if (downloadUrl) { - toastWithButton(`${t('Downloading')} ${downloadName}`, t('Check'), () => { - navigate({ pathname: '/downloads' }); + toastWithButton( + `${t('Downloading')} ${downloadName}`, + t('Check'), + () => { + navigate({ pathname: '/downloads' }) }, - { autoClose: 3000 }); - AddToDownloadList(modelPath, getHfDownloadUrl(downloadUrl)); + { autoClose: 3000 } + ) + AddToDownloadList(modelPath, getHfDownloadUrl(downloadUrl)) } else { - toast(t('Can not find download url'), { type: 'error' }); + toast(t('Can not find download url'), { type: 'error' }) } - }); - }; + }) + } if (webgpu || webgpuPython) { - if (!['.st', '.safetensors'].some(ext => modelPath.endsWith(ext))) { - const stModelPath = modelPath.replace(/\.pth$/, '.st'); + if (!['.st', '.safetensors'].some((ext) => modelPath.endsWith(ext))) { + const stModelPath = modelPath.replace(/\.pth$/, '.st') if (await FileExists(stModelPath)) { - modelPath = stModelPath; - } else if (!await FileExists(modelPath)) { - showDownloadPrompt(t('Model file not found'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + modelPath = stModelPath + } else if (!(await FileExists(modelPath))) { + showDownloadPrompt(t('Model file not found'), modelName) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } else if (!currentModelSource?.isComplete) { - showDownloadPrompt(t('Model file download is not complete'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + showDownloadPrompt( + t('Model file download is not complete'), + modelName + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } else { - toastWithButton(t('Please convert model to safe tensors format first'), t('Convert'), () => { - convertToSt(modelConfig, navigate); - }); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + toastWithButton( + t('Please convert model to safe tensors format first'), + t('Convert'), + () => { + convertToSt(modelConfig, navigate) + } + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } } } if (!webgpu && !webgpuPython) { - if (['.st', '.safetensors'].some(ext => modelPath.endsWith(ext))) { - toast(t('Please change Strategy to WebGPU to use safetensors format'), { type: 'error' }); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + if (['.st', '.safetensors'].some((ext) => modelPath.endsWith(ext))) { + toast( + t('Please change Strategy to WebGPU to use safetensors format'), + { type: 'error' } + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } } if (!webgpu) { - const ok = await checkDependencies(navigate); - if (!ok) - return; + const ok = await checkDependencies(navigate) + if (!ok) return } if (cpp) { - if (!['.bin'].some(ext => modelPath.endsWith(ext))) { - const precision: Precision = modelConfig.modelParameters.precision === 'Q5_1' ? 'Q5_1' : 'fp16'; - const ggmlModelPath = modelPath.replace(/\.pth$/, `-${precision}.bin`); + if (!['.bin'].some((ext) => modelPath.endsWith(ext))) { + const precision: Precision = + modelConfig.modelParameters.precision === 'Q5_1' ? 'Q5_1' : 'fp16' + const ggmlModelPath = modelPath.replace(/\.pth$/, `-${precision}.bin`) if (await FileExists(ggmlModelPath)) { - modelPath = ggmlModelPath; - } else if (!await FileExists(modelPath)) { - showDownloadPrompt(t('Model file not found'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + modelPath = ggmlModelPath + } else if (!(await FileExists(modelPath))) { + showDownloadPrompt(t('Model file not found'), modelName) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } else if (!currentModelSource?.isComplete) { - showDownloadPrompt(t('Model file download is not complete'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + showDownloadPrompt( + t('Model file download is not complete'), + modelName + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } else { - toastWithButton(t('Please convert model to GGML format first'), t('Convert'), () => { - convertToGGML(modelConfig, navigate); - }); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + toastWithButton( + t('Please convert model to GGML format first'), + t('Convert'), + () => { + convertToGGML(modelConfig, navigate) + } + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } } } if (!cpp) { - if (['.bin'].some(ext => modelPath.endsWith(ext))) { - toast(t('Please change Strategy to CPU (rwkv.cpp) to use ggml format'), { type: 'error' }); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + if (['.bin'].some((ext) => modelPath.endsWith(ext))) { + toast( + t('Please change Strategy to CPU (rwkv.cpp) to use ggml format'), + { type: 'error' } + ) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } } - if (!await FileExists(modelPath)) { - showDownloadPrompt(t('Model file not found'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; - } else // If the user selects the .pth model with WebGPU mode, modelPath will be set to the .st model. - // However, if the .pth model is deleted, modelPath will exist and isComplete will be false. - if (!currentModelSource?.isComplete && modelPath.endsWith('.pth')) { - showDownloadPrompt(t('Model file download is not complete'), modelName); - commonStore.setStatus({ status: ModelStatus.Offline }); - return; + if (!(await FileExists(modelPath))) { + showDownloadPrompt(t('Model file not found'), modelName) + commonStore.setStatus({ status: ModelStatus.Offline }) + return + } // If the user selects the .pth model with WebGPU mode, modelPath will be set to the .st model. + // However, if the .pth model is deleted, modelPath will exist and isComplete will be false. + else if (!currentModelSource?.isComplete && modelPath.endsWith('.pth')) { + showDownloadPrompt(t('Model file download is not complete'), modelName) + commonStore.setStatus({ status: ModelStatus.Offline }) + return } - const port = modelConfig.apiParameters.apiPort; + 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; + 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) - : StartServer; - const isUsingCudaBeta = modelConfig.modelParameters.device === 'CUDA-Beta'; + const startServer = webgpu + ? (_: string, port: number, host: string) => + StartWebGPUServer(port, host) + : StartServer + 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', - !!modelConfig.enableWebUI, isUsingCudaBeta, cpp, webgpuPython + startServer( + commonStore.settings.customPythonPath, + port, + commonStore.settings.host !== '127.0.0.1' ? '0.0.0.0' : '127.0.0.1', + !!modelConfig.enableWebUI, + isUsingCudaBeta, + cpp, + webgpuPython ).catch((e) => { - const errMsg = e.message || e; + const errMsg = e.message || e if (errMsg.includes('path contains space')) - toast(`${t('Error')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' }); - else - toast(t('Error') + ' - ' + errMsg, { type: 'error' }); - }); - setTimeout(WindowShow, 1000); - setTimeout(WindowShow, 2000); - setTimeout(WindowShow, 3000); + toast(`${t('Error')} - ${t('File Path Cannot Contain Space')}`, { + type: 'error', + }) + else toast(t('Error') + ' - ' + errMsg, { type: 'error' }) + }) + setTimeout(WindowShow, 1000) + setTimeout(WindowShow, 2000) + setTimeout(WindowShow, 3000) - let timeoutCount = 6; - let loading = false; + let timeoutCount = 6 + let loading = false const intervalId = setInterval(() => { readRoot() - .then(async r => { - if (r.ok && !loading) { - loading = true; - clearInterval(intervalId); - if (!webgpu) { - await getStatus().then(status => { - if (status) - commonStore.setStatus(status); - }); - } - commonStore.setStatus({ status: ModelStatus.Loading }); - const loadingId = toast(t('Loading Model'), { type: 'info', autoClose: false }); - if (!webgpu) { - updateConfig(t, { - max_tokens: modelConfig.apiParameters.maxResponseToken, - temperature: modelConfig.apiParameters.temperature, - top_p: modelConfig.apiParameters.topP, - presence_penalty: modelConfig.apiParameters.presencePenalty, - frequency_penalty: modelConfig.apiParameters.frequencyPenalty, - penalty_decay: modelConfig.apiParameters.penaltyDecay, - global_penalty: modelConfig.apiParameters.globalPenalty, - state: modelConfig.apiParameters.stateModel - }).then(async r => { - if (r.status !== 200) { - const error = await r.text(); - if (error.includes('state shape mismatch')) - toast(t('State model mismatch'), { type: 'error' }); - else if (error.includes('file format of the model or state model not supported')) - toast(t('File format of the model or state model not supported'), { type: 'error' }); - else - toast(error, { type: 'error' }); - } - }); - } - - const strategy = getStrategy(modelConfig); - let customCudaFile = ''; - if ((modelConfig.modelParameters.device.startsWith('CUDA') || modelConfig.modelParameters.device === 'Custom') - && modelConfig.modelParameters.useCustomCuda - && !strategy.split('->').some(s => ['cuda', 'fp32'].every(v => s.includes(v)))) { - if (commonStore.platform === 'windows') { - // this part is currently unused because there's no longer a need to use different kernels for different GPUs, but it might still be needed in the future - // - // customCudaFile = getSupportedCustomCudaFile(isUsingCudaBeta); - // if (customCudaFile) { - // let kernelTargetPath: string; - // if (isUsingCudaBeta) - // kernelTargetPath = './backend-python/rwkv_pip/beta/wkv_cuda.pyd'; - // else - // kernelTargetPath = './backend-python/rwkv_pip/wkv_cuda.pyd'; - // await CopyFile(customCudaFile, kernelTargetPath).catch(() => { - // FileExists(kernelTargetPath).then((exist) => { - // if (!exist) { - // customCudaFile = ''; - // toast(t('Failed to copy custom cuda file'), { type: 'error' }); - // } - // }); - // }); - // } else - // toast(t('Supported custom cuda file not found'), { type: 'warning' }); - customCudaFile = 'any'; - } else { - customCudaFile = 'any'; + .then(async (r) => { + if (r.ok && !loading) { + loading = true + clearInterval(intervalId) + if (!webgpu) { + await getStatus().then((status) => { + if (status) commonStore.setStatus(status) + }) + } + commonStore.setStatus({ status: ModelStatus.Loading }) + const loadingId = toast(t('Loading Model'), { + type: 'info', + autoClose: false, + }) + if (!webgpu) { + updateConfig(t, { + max_tokens: modelConfig.apiParameters.maxResponseToken, + temperature: modelConfig.apiParameters.temperature, + top_p: modelConfig.apiParameters.topP, + presence_penalty: modelConfig.apiParameters.presencePenalty, + frequency_penalty: modelConfig.apiParameters.frequencyPenalty, + penalty_decay: modelConfig.apiParameters.penaltyDecay, + global_penalty: modelConfig.apiParameters.globalPenalty, + state: modelConfig.apiParameters.stateModel, + }).then(async (r) => { + if (r.status !== 200) { + const error = await r.text() + if (error.includes('state shape mismatch')) + toast(t('State model mismatch'), { type: 'error' }) + else if ( + error.includes( + 'file format of the model or state model not supported' + ) + ) + toast( + t( + 'File format of the model or state model not supported' + ), + { type: 'error' } + ) + else toast(error, { type: 'error' }) + } + }) } - } - switchModel({ - model: modelPath, - strategy: strategy, - tokenizer: modelConfig.modelParameters.useCustomTokenizer ? modelConfig.modelParameters.customTokenizer : undefined, - customCuda: customCudaFile !== '', - deploy: modelConfig.enableWebUI - }).then(async (r) => { - if (r.ok) { - commonStore.setStatus({ status: ModelStatus.Working }); - let buttonNameMap = { - 'novel': 'Completion', - 'abc': 'Composition', - 'midi': 'Composition' - }; - let buttonName = 'Chat'; - buttonName = Object.entries(buttonNameMap).find(([key, value]) => modelName.toLowerCase().includes(key))?.[1] || buttonName; - const buttonFn = () => { - navigate({ pathname: '/' + buttonName.toLowerCase() }); - }; - if (modelName.toLowerCase().includes('abc') && commonStore.compositionParams.prompt === defaultCompositionPrompt) { - commonStore.setCompositionParams({ - ...commonStore.compositionParams, - prompt: defaultCompositionABCPrompt - }); - commonStore.setCompositionSubmittedPrompt(defaultCompositionABCPrompt); + const strategy = getStrategy(modelConfig) + let customCudaFile = '' + if ( + (modelConfig.modelParameters.device.startsWith('CUDA') || + modelConfig.modelParameters.device === 'Custom') && + modelConfig.modelParameters.useCustomCuda && + !strategy + .split('->') + .some((s) => ['cuda', 'fp32'].every((v) => s.includes(v))) + ) { + if (commonStore.platform === 'windows') { + // this part is currently unused because there's no longer a need to use different kernels for different GPUs, but it might still be needed in the future + // + // customCudaFile = getSupportedCustomCudaFile(isUsingCudaBeta); + // if (customCudaFile) { + // let kernelTargetPath: string; + // if (isUsingCudaBeta) + // kernelTargetPath = './backend-python/rwkv_pip/beta/wkv_cuda.pyd'; + // else + // kernelTargetPath = './backend-python/rwkv_pip/wkv_cuda.pyd'; + // await CopyFile(customCudaFile, kernelTargetPath).catch(() => { + // FileExists(kernelTargetPath).then((exist) => { + // if (!exist) { + // customCudaFile = ''; + // toast(t('Failed to copy custom cuda file'), { type: 'error' }); + // } + // }); + // }); + // } else + // toast(t('Supported custom cuda file not found'), { type: 'warning' }); + customCudaFile = 'any' + } else { + customCudaFile = 'any' } - - if (modelConfig.modelParameters.device.startsWith('CUDA') && - modelConfig.modelParameters.storedLayers < modelConfig.modelParameters.maxStoredLayers && - commonStore.monitorData && commonStore.monitorData.totalVram !== 0 && - (commonStore.monitorData.usedVram / commonStore.monitorData.totalVram) < 0.9) - 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' }); - } else { - commonStore.setStatus({ status: ModelStatus.Offline }); - const error = await r.text(); - const errorsMap = { - 'not enough memory': 'Memory is not enough, try to increase the virtual memory or use a smaller model.', - 'not compiled with CUDA': 'Bad PyTorch version, please reinstall PyTorch with cuda.', - '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. If you are not using an Nvidia GPU, please switch the \'Strategy\' to WebGPU or CPU in the Configs page.', - '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.', - 're-convert the model': 'Model has been converted and does not match current strategy. If you are using a new strategy, re-convert the model.' - }; - const matchedError = Object.entries(errorsMap).find(([key, _]) => error.includes(key)); - const message = matchedError ? t(matchedError[1]) : error; - toast(t('Failed to switch model') + ' - ' + message, { autoClose: 5000, type: 'error' }); } - }).catch((e) => { - commonStore.setStatus({ status: ModelStatus.Offline }); - toast(t('Failed to switch model') + ' - ' + (e.message || e), { type: 'error' }); - }).finally(() => { - toast.dismiss(loadingId); - }); - } - }).catch(() => { - if (timeoutCount <= 0) { - clearInterval(intervalId); - commonStore.setStatus({ status: ModelStatus.Offline }); - } - }); - timeoutCount--; - }, 1000); + switchModel({ + model: modelPath, + strategy: strategy, + tokenizer: modelConfig.modelParameters.useCustomTokenizer + ? modelConfig.modelParameters.customTokenizer + : undefined, + customCuda: customCudaFile !== '', + deploy: modelConfig.enableWebUI, + }) + .then(async (r) => { + if (r.ok) { + commonStore.setStatus({ status: ModelStatus.Working }) + let buttonNameMap = { + novel: 'Completion', + abc: 'Composition', + midi: 'Composition', + } + let buttonName = 'Chat' + buttonName = + Object.entries(buttonNameMap).find(([key, value]) => + modelName.toLowerCase().includes(key) + )?.[1] || buttonName + const buttonFn = () => { + navigate({ pathname: '/' + buttonName.toLowerCase() }) + } + if ( + modelName.toLowerCase().includes('abc') && + commonStore.compositionParams.prompt === + defaultCompositionPrompt + ) { + commonStore.setCompositionParams({ + ...commonStore.compositionParams, + prompt: defaultCompositionABCPrompt, + }) + commonStore.setCompositionSubmittedPrompt( + defaultCompositionABCPrompt + ) + } + + if ( + modelConfig.modelParameters.device.startsWith('CUDA') && + modelConfig.modelParameters.storedLayers < + modelConfig.modelParameters.maxStoredLayers && + commonStore.monitorData && + commonStore.monitorData.totalVram !== 0 && + commonStore.monitorData.usedVram / + commonStore.monitorData.totalVram < + 0.9 + ) + 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' }) + } else { + commonStore.setStatus({ status: ModelStatus.Offline }) + const error = await r.text() + const errorsMap = { + 'not enough memory': + 'Memory is not enough, try to increase the virtual memory or use a smaller model.', + 'not compiled with CUDA': + 'Bad PyTorch version, please reinstall PyTorch with cuda.', + '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. If you are not using an Nvidia GPU, please switch the 'Strategy' to WebGPU or CPU in the Configs page.", + '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.', + 're-convert the model': + 'Model has been converted and does not match current strategy. If you are using a new strategy, re-convert the model.', + } + const matchedError = Object.entries(errorsMap).find( + ([key, _]) => error.includes(key) + ) + const message = matchedError ? t(matchedError[1]) : error + toast(t('Failed to switch model') + ' - ' + message, { + autoClose: 5000, + type: 'error', + }) + } + }) + .catch((e) => { + commonStore.setStatus({ status: ModelStatus.Offline }) + toast( + t('Failed to switch model') + ' - ' + (e.message || e), + { type: 'error' } + ) + }) + .finally(() => { + toast.dismiss(loadingId) + }) + } + }) + .catch(() => { + if (timeoutCount <= 0) { + clearInterval(intervalId) + commonStore.setStatus({ status: ModelStatus.Offline }) + } + }) + + timeoutCount-- + }, 1000) } else { - commonStore.setStatus({ status: ModelStatus.Offline }); - exit().then(r => { + commonStore.setStatus({ status: ModelStatus.Offline }) + 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' }); + 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' }); - }); + toast( + t( + 'Server is working on deployment mode, please exit the program manually to stop the server' + ), + { type: 'info' } + ) + }) } - }; + } const onClick = async (e: any) => { - if (commonStore.status.status === ModelStatus.Offline) - await onClickRun?.(e); - await onClickMainButton(); - }; + if (commonStore.status.status === ModelStatus.Offline) await onClickRun?.(e) + await onClickMainButton() + } - return (iconMode ? - - : - - ); -}); + return iconMode ? ( + + ) : ( + + ) +}) diff --git a/frontend/src/components/Section.tsx b/frontend/src/components/Section.tsx index 643c2986..ebb69cb7 100644 --- a/frontend/src/components/Section.tsx +++ b/frontend/src/components/Section.tsx @@ -1,21 +1,21 @@ -import { FC, ReactElement } from 'react'; -import { Card, Text } from '@fluentui/react-components'; +import { FC, ReactElement } from 'react' +import { Card, Text } from '@fluentui/react-components' export const Section: FC<{ - title: string; desc?: string | null, content: ReactElement, outline?: boolean -}> = - ({ title, desc, content, outline = true }) => { - return ( - -
-
- {title} - {desc && {desc}} -
+ title: string + desc?: string | null + content: ReactElement + outline?: boolean +}> = ({ title, desc, content, outline = true }) => { + return ( + +
+
+ {title} + {desc && {desc}}
-
- {content} -
- - ); - }; +
+
{content}
+ + ) +} diff --git a/frontend/src/components/ToolTipButton.tsx b/frontend/src/components/ToolTipButton.tsx index 4c774883..a0ac58cb 100644 --- a/frontend/src/components/ToolTipButton.tsx +++ b/frontend/src/components/ToolTipButton.tsx @@ -1,18 +1,23 @@ -import React, { CSSProperties, FC, MouseEventHandler, ReactElement } from 'react'; -import { Button, Tooltip } from '@fluentui/react-components'; +import React, { + CSSProperties, + FC, + MouseEventHandler, + ReactElement, +} from 'react' +import { Button, Tooltip } from '@fluentui/react-components' export const ToolTipButton: FC<{ - text?: string | null, - desc: string, - icon?: ReactElement, - className?: string, - style?: CSSProperties, - size?: 'small' | 'medium' | 'large', - shape?: 'rounded' | 'circular' | 'square'; - appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'; - disabled?: boolean, + text?: string | null + desc: string + icon?: ReactElement + className?: string + style?: CSSProperties + size?: 'small' | 'medium' | 'large' + shape?: 'rounded' | 'circular' | 'square' + appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' + disabled?: boolean onClick?: MouseEventHandler - showDelay?: number, + showDelay?: number }> = ({ text, desc, @@ -24,14 +29,40 @@ export const ToolTipButton: FC<{ appearance, disabled, onClick, - showDelay = 0 + showDelay = 0, }) => { - return (desc ? - - - : - - ); -}; + return desc ? ( + + + + ) : ( + + ) +} diff --git a/frontend/src/components/ValuedSlider.tsx b/frontend/src/components/ValuedSlider.tsx index a60cb2e7..5cc2f948 100644 --- a/frontend/src/components/ValuedSlider.tsx +++ b/frontend/src/components/ValuedSlider.tsx @@ -1,35 +1,58 @@ -import React, { FC, useEffect, useRef } from 'react'; -import { Slider, Text } from '@fluentui/react-components'; -import { SliderOnChangeData } from '@fluentui/react-slider'; -import { NumberInput } from './NumberInput'; +import React, { FC, useEffect, useRef } from 'react' +import { Slider, Text } from '@fluentui/react-components' +import { SliderOnChangeData } from '@fluentui/react-slider' +import { NumberInput } from './NumberInput' export const ValuedSlider: FC<{ - value: number, - min: number, - max: number, - step?: number, + value: number + min: number + max: number + step?: number input?: boolean - onChange?: (ev: React.ChangeEvent, data: SliderOnChangeData) => void, + onChange?: ( + ev: React.ChangeEvent, + data: SliderOnChangeData + ) => void toFixed?: number disabled?: boolean }> = ({ value, min, max, step, input, onChange, toFixed, disabled }) => { - const sliderRef = useRef(null); + const sliderRef = useRef(null) useEffect(() => { if (step && sliderRef.current && sliderRef.current.parentElement) { if ((max - min) / step > 10) - sliderRef.current.parentElement.style.removeProperty('--fui-Slider--steps-percent'); + sliderRef.current.parentElement.style.removeProperty( + '--fui-Slider--steps-percent' + ) } - }, []); + }, []) return (
- - {input - ? - : {value}} + + {input ? ( + + ) : ( + {value} + )}
- ); -}; + ) +} diff --git a/frontend/src/components/WorkHeader.tsx b/frontend/src/components/WorkHeader.tsx index 1f3bc955..52226e8c 100644 --- a/frontend/src/components/WorkHeader.tsx +++ b/frontend/src/components/WorkHeader.tsx @@ -1,53 +1,61 @@ -import React, { FC } from 'react'; -import { observer } from 'mobx-react-lite'; -import { Divider, PresenceBadge, Text } from '@fluentui/react-components'; -import commonStore, { ModelStatus } from '../stores/commonStore'; -import { ConfigSelector } from './ConfigSelector'; -import { RunButton } from './RunButton'; -import { PresenceBadgeStatus } from '@fluentui/react-badge'; -import { useTranslation } from 'react-i18next'; -import { useMediaQuery } from 'usehooks-ts'; +import React, { FC } from 'react' +import { PresenceBadgeStatus } from '@fluentui/react-badge' +import { Divider, PresenceBadge, Text } from '@fluentui/react-components' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import { useMediaQuery } from 'usehooks-ts' +import commonStore, { ModelStatus } from '../stores/commonStore' +import { ConfigSelector } from './ConfigSelector' +import { RunButton } from './RunButton' const statusText = { [ModelStatus.Offline]: 'Offline', [ModelStatus.Starting]: 'Starting', [ModelStatus.Loading]: 'Loading', - [ModelStatus.Working]: 'Working' -}; + [ModelStatus.Working]: 'Working', +} const badgeStatus: { [modelStatus: number]: PresenceBadgeStatus } = { [ModelStatus.Offline]: 'unknown', [ModelStatus.Starting]: 'away', [ModelStatus.Loading]: 'away', - [ModelStatus.Working]: 'available' -}; + [ModelStatus.Working]: 'available', +} export const WorkHeader: FC = observer(() => { - const { t } = useTranslation(); - const mq = useMediaQuery('(min-width: 640px)'); - const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; + const { t } = useTranslation() + const mq = useMediaQuery('(min-width: 640px)') + const port = commonStore.getCurrentModelConfig().apiParameters.apiPort - return commonStore.platform === 'web' ? -
: + return commonStore.platform === 'web' ? ( +
+ ) : (
-
+
- {t('Model Status') + ': ' + t(statusText[commonStore.status.status])} -
- {commonStore.lastModelName && mq && - {commonStore.lastModelName} - } + {t('Model Status') + + ': ' + + t(statusText[commonStore.status.status])} + +
+ {commonStore.lastModelName && mq && ( + {commonStore.lastModelName} + )}
- {t('This tool\'s API is compatible with OpenAI API. It can be used with any ChatGPT tool you like. Go to the settings of some ChatGPT tool, replace the \'https://api.openai.com\' part in the API address with \'') + `http://127.0.0.1:${port}` + '\'.'} + {t( + "This tool's API is compatible with OpenAI API. It can be used with any ChatGPT tool you like. Go to the settings of some ChatGPT tool, replace the 'https://api.openai.com' part in the API address with '" + ) + + `http://127.0.0.1:${port}` + + "'."}
- ; -}); \ No newline at end of file + ) +}) diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bbf8af84..3db56a94 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,25 +1,25 @@ -import './webWails'; -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import './style.scss'; -import 'react-toastify/dist/ReactToastify.css'; -import App from './App'; -import { HashRouter } from 'react-router-dom'; -import { startup } from './startup'; -import './_locales/i18n-react'; -import { WindowShow } from '../wailsjs/runtime'; +import './webWails' +import React from 'react' +import { createRoot } from 'react-dom/client' +import './style.scss' +import 'react-toastify/dist/ReactToastify.css' +import { HashRouter } from 'react-router-dom' +import App from './App' +import { startup } from './startup' +import './_locales/i18n-react' +import { WindowShow } from '../wailsjs/runtime' startup().then(() => { - const container = document.getElementById('root'); + const container = document.getElementById('root') - const root = createRoot(container!); + const root = createRoot(container!) root.render( - ); + ) // force display the window - WindowShow(); -}); + WindowShow() +}) diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index 608dab8f..3e4814d2 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -1,23 +1,28 @@ -import React, { FC } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Page } from '../components/Page'; -import MarkdownRender from '../components/MarkdownRender'; -import { observer } from 'mobx-react-lite'; -import commonStore from '../stores/commonStore'; +import React, { FC } from 'react' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import MarkdownRender from '../components/MarkdownRender' +import { Page } from '../components/Page' +import commonStore from '../stores/commonStore' const About: FC = observer(() => { - const { t } = useTranslation(); - const lang: string = commonStore.settings.language; + const { t } = useTranslation() + const lang: string = commonStore.settings.language return ( - - - {lang in commonStore.about ? commonStore.about[lang] : commonStore.about['en']} - -
- } /> - ); -}); + + + {lang in commonStore.about + ? commonStore.about[lang] + : commonStore.about['en']} + +
+ } + /> + ) +}) -export default About; +export default About diff --git a/frontend/src/pages/AudiotrackManager/AudiotrackButton.tsx b/frontend/src/pages/AudiotrackManager/AudiotrackButton.tsx index 07a49abb..909f8a7c 100644 --- a/frontend/src/pages/AudiotrackManager/AudiotrackButton.tsx +++ b/frontend/src/pages/AudiotrackManager/AudiotrackButton.tsx @@ -1,40 +1,61 @@ -import React, { FC, lazy } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTrigger } from '@fluentui/react-components'; -import { CustomToastContainer } from '../../components/CustomToastContainer'; -import { LazyImportComponent } from '../../components/LazyImportComponent'; -import { flushMidiRecordingContent } from '../../utils'; -import commonStore from '../../stores/commonStore'; +import React, { FC, lazy } from 'react' +import { + Button, + Dialog, + DialogBody, + DialogContent, + DialogSurface, + DialogTrigger, +} from '@fluentui/react-components' +import { useTranslation } from 'react-i18next' +import { CustomToastContainer } from '../../components/CustomToastContainer' +import { LazyImportComponent } from '../../components/LazyImportComponent' +import commonStore from '../../stores/commonStore' +import { flushMidiRecordingContent } from '../../utils' -const AudiotrackEditor = lazy(() => import('./AudiotrackEditor')); +const AudiotrackEditor = lazy(() => import('./AudiotrackEditor')) export const AudiotrackButton: FC<{ - size?: 'small' | 'medium' | 'large', - shape?: 'rounded' | 'circular' | 'square'; - appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'; - setPrompt: (prompt: string) => void; + size?: 'small' | 'medium' | 'large' + shape?: 'rounded' | 'circular' | 'square' + appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' + setPrompt: (prompt: string) => void }> = ({ size, shape, appearance, setPrompt }) => { - const { t } = useTranslation(); + const { t } = useTranslation() - return { - if (!data.open) { - flushMidiRecordingContent(); - commonStore.setRecordingTrackId(''); - commonStore.setPlayingTrackId(''); - } - }}> - - - - - - - - - - - - ; -}; \ No newline at end of file + return ( + { + if (!data.open) { + flushMidiRecordingContent() + commonStore.setRecordingTrackId('') + commonStore.setPlayingTrackId('') + } + }} + > + + + + + + + + + + + + + ) +} diff --git a/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx b/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx index d77d3faa..ed2e836f 100644 --- a/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx +++ b/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx @@ -1,9 +1,12 @@ -import React, { FC, useEffect, useRef, useState } from 'react'; -import { observer } from 'mobx-react-lite'; -import { useTranslation } from 'react-i18next'; -import Draggable from 'react-draggable'; -import { ToolTipButton } from '../../components/ToolTipButton'; -import { v4 as uuid } from 'uuid'; +import React, { FC, useEffect, useRef, useState } from 'react' +import { + Button, + Card, + DialogTrigger, + Slider, + Text, + Tooltip, +} from '@fluentui/react-components' import { Add16Regular, ArrowAutofitWidth20Regular, @@ -14,59 +17,76 @@ import { Play16Filled, Play16Regular, Record16Regular, - Stop16Filled -} from '@fluentui/react-icons'; -import { Button, Card, DialogTrigger, Slider, Text, Tooltip } from '@fluentui/react-components'; -import { useWindowSize } from 'usehooks-ts'; -import commonStore, { ModelStatus } from '../../stores/commonStore'; -import classnames from 'classnames'; + Stop16Filled, +} from '@fluentui/react-icons' +import classnames from 'classnames' +import { observer } from 'mobx-react-lite' +import Draggable from 'react-draggable' +import { useTranslation } from 'react-i18next' +import { toast } from 'react-toastify' +import { useWindowSize } from 'usehooks-ts' +import { v4 as uuid } from 'uuid' +import { PlayNote } from '../../../wailsjs/go/backend_golang/App' +import { ToolTipButton } from '../../components/ToolTipButton' +import commonStore, { ModelStatus } from '../../stores/commonStore' import { InstrumentType, InstrumentTypeNameMap, InstrumentTypeTokenMap, MidiMessage, - tracksMinimalTotalTime -} from '../../types/composition'; -import { toast } from 'react-toastify'; + tracksMinimalTotalTime, +} from '../../types/composition' import { flushMidiRecordingContent, getMidiRawContentMainInstrument, getMidiRawContentTime, getReqUrl, OpenFileDialog, - refreshTracksTotalTime -} from '../../utils'; -import { PlayNote } from '../../../wailsjs/go/backend_golang/App'; - -const snapValue = 25; -const minimalMoveTime = 8; // 1000/125=8ms wait_events=125 -const scaleMin = 0.05; -const scaleMax = 3; -const baseMoveTime = Math.round(minimalMoveTime / scaleMin); - -const velocityEvents = 128; -const velocityBins = 12; -const velocityExp = 0.5; - -const minimalTrackWidth = 80; -const trackInitOffsetPx = 10; -const pixelFix = 0.5; -const topToArrowIcon = 19; -const arrowIconToTracks = 23; + refreshTracksTotalTime, +} from '../../utils' + +const snapValue = 25 +const minimalMoveTime = 8 // 1000/125=8ms wait_events=125 +const scaleMin = 0.05 +const scaleMax = 3 +const baseMoveTime = Math.round(minimalMoveTime / scaleMin) + +const velocityEvents = 128 +const velocityBins = 12 +const velocityExp = 0.5 + +const minimalTrackWidth = 80 +const trackInitOffsetPx = 10 +const pixelFix = 0.5 +const topToArrowIcon = 19 +const arrowIconToTracks = 23 const velocityToBin = (velocity: number) => { - velocity = Math.max(0, Math.min(velocity, velocityEvents - 1)); - const binsize = velocityEvents / (velocityBins - 1); - return Math.ceil((velocityEvents * ((Math.pow(velocityExp, (velocity / velocityEvents)) - 1.0) / (velocityExp - 1.0))) / binsize); -}; + velocity = Math.max(0, Math.min(velocity, velocityEvents - 1)) + const binsize = velocityEvents / (velocityBins - 1) + return Math.ceil( + (velocityEvents * + ((Math.pow(velocityExp, velocity / velocityEvents) - 1.0) / + (velocityExp - 1.0))) / + binsize + ) +} const binToVelocity = (bin: number) => { - const binsize = velocityEvents / (velocityBins - 1); - return Math.max(0, Math.ceil(velocityEvents * (Math.log(((velocityExp - 1) * binsize * bin) / velocityEvents + 1) / Math.log(velocityExp)) - 1)); -}; + const binsize = velocityEvents / (velocityBins - 1) + return Math.max( + 0, + Math.ceil( + velocityEvents * + (Math.log(((velocityExp - 1) * binsize * bin) / velocityEvents + 1) / + Math.log(velocityExp)) - + 1 + ) + ) +} const tokenToMidiMessage = (token: string): MidiMessage | null => { - if (token.startsWith('<')) return null; + if (token.startsWith('<')) return null if (token.startsWith('t') && !token.startsWith('t:')) { return { messageType: 'ElapsedTime', @@ -75,25 +95,28 @@ const tokenToMidiMessage = (token: string): MidiMessage | null => { note: 0, velocity: 0, control: 0, - instrument: 0 - }; + instrument: 0, + } } - const instrument: InstrumentType = InstrumentTypeTokenMap.findIndex(t => token.startsWith(t + ':')); + const instrument: InstrumentType = InstrumentTypeTokenMap.findIndex((t) => + token.startsWith(t + ':') + ) if (instrument >= 0) { - const parts = token.split(':'); - if (parts.length !== 3) return null; - const note = parseInt(parts[1], 16); - const velocity = parseInt(parts[2], 16); - if (velocity < 0 || velocity > 127) return null; - if (velocity === 0) return { - messageType: 'NoteOff', - note: note, - instrument: instrument, - channel: 0, - velocity: 0, - control: 0, - value: 0 - }; + const parts = token.split(':') + if (parts.length !== 3) return null + const note = parseInt(parts[1], 16) + const velocity = parseInt(parts[2], 16) + if (velocity < 0 || velocity > 127) return null + if (velocity === 0) + return { + messageType: 'NoteOff', + note: note, + instrument: instrument, + channel: 0, + velocity: 0, + control: 0, + value: 0, + } return { messageType: 'NoteOn', note: note, @@ -101,496 +124,729 @@ const tokenToMidiMessage = (token: string): MidiMessage | null => { instrument: instrument, channel: 0, control: 0, - value: 0 - } as MidiMessage; + value: 0, + } as MidiMessage } - return null; -}; + return null +} const midiMessageToToken = (msg: MidiMessage) => { if (msg.messageType === 'NoteOn' || msg.messageType === 'NoteOff') { - const instrument = InstrumentTypeTokenMap[msg.instrument]; - const note = msg.note.toString(16); - const velocity = velocityToBin(msg.velocity).toString(16); - return `${instrument}:${note}:${velocity} `; + const instrument = InstrumentTypeTokenMap[msg.instrument] + const note = msg.note.toString(16) + const velocity = velocityToBin(msg.velocity).toString(16) + return `${instrument}:${note}:${velocity} ` } else if (msg.messageType === 'ElapsedTime') { - let time = Math.round(msg.value / minimalMoveTime); - const num = Math.floor(time / 125); // wait_events=125 - time -= num * 125; - let ret = ''; + let time = Math.round(msg.value / minimalMoveTime) + const num = Math.floor(time / 125) // wait_events=125 + time -= num * 125 + let ret = '' for (let i = 0; i < num; i++) { - ret += 't125 '; + ret += 't125 ' } - if (time > 0) - ret += `t${time} `; - return ret; - } else - return ''; -}; + if (time > 0) ret += `t${time} ` + return ret + } else return '' +} -let dropRecordingTime = false; +let dropRecordingTime = false export const midiMessageHandler = async (data: MidiMessage) => { if (data.messageType === 'ControlChange') { - commonStore.setInstrumentType(Math.round(data.value / 127 * (InstrumentTypeNameMap.length - 1))); - return; + commonStore.setInstrumentType( + Math.round((data.value / 127) * (InstrumentTypeNameMap.length - 1)) + ) + return } if (commonStore.recordingTrackId) { if (dropRecordingTime && data.messageType === 'ElapsedTime') { - dropRecordingTime = false; - return; + dropRecordingTime = false + return } data = { ...data, - instrument: commonStore.instrumentType - }; - commonStore.setRecordingRawContent([...commonStore.recordingRawContent, data]); - commonStore.setRecordingContent(commonStore.recordingContent + midiMessageToToken(data)); + instrument: commonStore.instrumentType, + } + commonStore.setRecordingRawContent([ + ...commonStore.recordingRawContent, + data, + ]) + commonStore.setRecordingContent( + commonStore.recordingContent + midiMessageToToken(data) + ) //TODO data.channel = data.instrument; - PlayNote(data); + PlayNote(data) } -}; +} type TrackProps = { - id: string; - right: number; - scale: number; - isSelected: boolean; - onSelect: (id: string) => void; -}; - -const Track: React.FC = observer(({ - id, - right, - scale, - isSelected, - onSelect -}) => { - const { t } = useTranslation(); - const trackIndex = commonStore.tracks.findIndex(t => t.id === id)!; - const track = commonStore.tracks[trackIndex]; - const trackClass = isSelected ? 'bg-blue-600' : (commonStore.settings.darkMode ? 'bg-blue-900' : 'bg-gray-700'); - const controlX = useRef(0); - - let trackName = t('Track') + ' ' + id; - if (track.mainInstrument) - trackName = t('Track') + ' - ' + t('Piano is the main instrument')!.replace(t('Piano')!, t(track.mainInstrument)) + (track.content && (' - ' + track.content)); - else if (track.content) - trackName = t('Track') + ' - ' + track.content; - - return ( - { - controlX.current = data.lastX; - }} - onStop={(e, data) => { - const delta = data.lastX - controlX.current; - let offsetTime = Math.round(Math.round(delta / snapValue * baseMoveTime * scale) / minimalMoveTime) * minimalMoveTime; - offsetTime = Math.min(Math.max( - offsetTime, - -track.offsetTime), commonStore.trackTotalTime - track.offsetTime); - - const tracks = commonStore.tracks.slice(); - tracks[trackIndex].offsetTime += offsetTime; - commonStore.setTracks(tracks); - refreshTracksTotalTime(); - }} - > -
void +} + +const Track: React.FC = observer( + ({ id, right, scale, isSelected, onSelect }) => { + const { t } = useTranslation() + const trackIndex = commonStore.tracks.findIndex((t) => t.id === id)! + const track = commonStore.tracks[trackIndex] + const trackClass = isSelected + ? 'bg-blue-600' + : commonStore.settings.darkMode + ? 'bg-blue-900' + : 'bg-gray-700' + const controlX = useRef(0) + + let trackName = t('Track') + ' ' + id + if (track.mainInstrument) + trackName = + t('Track') + + ' - ' + + t('Piano is the main instrument')!.replace( + t('Piano')!, + t(track.mainInstrument) + ) + + (track.content && ' - ' + track.content) + else if (track.content) trackName = t('Track') + ' - ' + track.content + + return ( + { + controlX.current = data.lastX + }} + onStop={(e, data) => { + const delta = data.lastX - controlX.current + let offsetTime = + Math.round( + Math.round((delta / snapValue) * baseMoveTime * scale) / + minimalMoveTime + ) * minimalMoveTime + offsetTime = Math.min( + Math.max(offsetTime, -track.offsetTime), + commonStore.trackTotalTime - track.offsetTime + ) + + const tracks = commonStore.tracks.slice() + tracks[trackIndex].offsetTime += offsetTime + commonStore.setTracks(tracks) + refreshTracksTotalTime() }} - onClick={() => onSelect(id)} > - {trackName} -
- - ); -}); - -const AudiotrackEditor: FC<{ setPrompt: (prompt: string) => void }> = observer(({ setPrompt }) => { - const { t } = useTranslation(); - - const viewControlsContainerRef = useRef(null); - const currentTimeControlRef = useRef(null); - const playStartTimeControlRef = useRef(null); - const tracksEndLineRef = useRef(null); - const tracksRef = useRef(null); - const toolbarRef = useRef(null); - const toolbarButtonRef = useRef(null); - const toolbarSliderRef = useRef(null); - const contentPreviewRef = useRef(null); - - const [refreshRef, setRefreshRef] = useState(false); - - const windowSize = useWindowSize(); - const scale = (scaleMin + scaleMax) - commonStore.trackScale; - - const [selectedTrackId, setSelectedTrackId] = useState(''); - const playStartTimeControlX = useRef(0); - const selectedTrack = selectedTrackId ? commonStore.tracks.find(t => t.id === selectedTrackId) : undefined; - - useEffect(() => { - if (toolbarSliderRef.current && toolbarSliderRef.current.parentElement) - toolbarSliderRef.current.parentElement.style.removeProperty('--fui-Slider--steps-percent'); - }, []); - - const scrollContentToBottom = () => { - if (contentPreviewRef.current) - contentPreviewRef.current.scrollTop = contentPreviewRef.current.scrollHeight; - }; - - useEffect(() => { - scrollContentToBottom(); - }, [commonStore.recordingContent]); - - useEffect(() => { - setRefreshRef(!refreshRef); - }, [windowSize, commonStore.tracks]); - - const viewControlsContainerWidth = (toolbarRef.current && toolbarButtonRef.current && toolbarSliderRef.current) ? - toolbarRef.current.clientWidth - toolbarButtonRef.current.clientWidth - toolbarSliderRef.current.clientWidth - 16 // 16 = ml-2 mr-2 - : 0; - const tracksWidth = viewControlsContainerWidth; - const timeOfTracksWidth = Math.floor(tracksWidth / snapValue) // number of moves - * baseMoveTime * scale; - const currentTimeControlWidth = (timeOfTracksWidth < commonStore.trackTotalTime) - ? timeOfTracksWidth / commonStore.trackTotalTime * viewControlsContainerWidth - : 0; - const playStartTimeControlPosition = (commonStore.trackPlayStartTime - commonStore.trackCurrentTime) / (baseMoveTime * scale) * snapValue; - const tracksEndPosition = (commonStore.trackTotalTime - commonStore.trackCurrentTime) / (baseMoveTime * scale) * snapValue; - const moveableTracksWidth = (tracksEndLineRef.current && viewControlsContainerRef.current && - ((tracksEndLineRef.current.getBoundingClientRect().left - (viewControlsContainerRef.current.getBoundingClientRect().left + trackInitOffsetPx)) > 0)) - ? tracksEndLineRef.current.getBoundingClientRect().left - (viewControlsContainerRef.current.getBoundingClientRect().left + trackInitOffsetPx) - : Infinity; - - return ( -
-
- {`${commonStore.trackPlayStartTime} ms / ${commonStore.trackTotalTime} ms`} -
-
-
- } /> - } onClick={() => { - commonStore.setTracks([]); - commonStore.setTrackScale(1); - commonStore.setTrackTotalTime(tracksMinimalTotalTime); - commonStore.setTrackCurrentTime(0); - commonStore.setTrackPlayStartTime(0); - }} /> +
onSelect(id)} + > + {trackName}
-
-
-
- -
0) - ? tracksRef.current.clientHeight - arrowIconToTracks - : 0, - top: `${topToArrowIcon + arrowIconToTracks}px`, - left: `${tracksEndPosition + trackInitOffsetPx - pixelFix}px` - }} /> - -
- { - setTimeout(() => { - let offset = 0; - if (currentTimeControlRef.current) { - const match = currentTimeControlRef.current.style.transform.match(/translate\((.+)px,/); - if (match) - offset = parseFloat(match[1]); - } - const offsetTime = commonStore.trackTotalTime / viewControlsContainerWidth * offset; - commonStore.setTrackCurrentTime(offsetTime); - }, 1); + + ) + } +) + +const AudiotrackEditor: FC<{ setPrompt: (prompt: string) => void }> = observer( + ({ setPrompt }) => { + const { t } = useTranslation() + + const viewControlsContainerRef = useRef(null) + const currentTimeControlRef = useRef(null) + const playStartTimeControlRef = useRef(null) + const tracksEndLineRef = useRef(null) + const tracksRef = useRef(null) + const toolbarRef = useRef(null) + const toolbarButtonRef = useRef(null) + const toolbarSliderRef = useRef(null) + const contentPreviewRef = useRef(null) + + const [refreshRef, setRefreshRef] = useState(false) + + const windowSize = useWindowSize() + const scale = scaleMin + scaleMax - commonStore.trackScale + + const [selectedTrackId, setSelectedTrackId] = useState('') + const playStartTimeControlX = useRef(0) + const selectedTrack = selectedTrackId + ? commonStore.tracks.find((t) => t.id === selectedTrackId) + : undefined + + useEffect(() => { + if (toolbarSliderRef.current && toolbarSliderRef.current.parentElement) + toolbarSliderRef.current.parentElement.style.removeProperty( + '--fui-Slider--steps-percent' + ) + }, []) + + const scrollContentToBottom = () => { + if (contentPreviewRef.current) + contentPreviewRef.current.scrollTop = + contentPreviewRef.current.scrollHeight + } + + useEffect(() => { + scrollContentToBottom() + }, [commonStore.recordingContent]) + + useEffect(() => { + setRefreshRef(!refreshRef) + }, [windowSize, commonStore.tracks]) + + const viewControlsContainerWidth = + toolbarRef.current && toolbarButtonRef.current && toolbarSliderRef.current + ? toolbarRef.current.clientWidth - + toolbarButtonRef.current.clientWidth - + toolbarSliderRef.current.clientWidth - + 16 // 16 = ml-2 mr-2 + : 0 + const tracksWidth = viewControlsContainerWidth + const timeOfTracksWidth = + Math.floor(tracksWidth / snapValue) * // number of moves + baseMoveTime * + scale + const currentTimeControlWidth = + timeOfTracksWidth < commonStore.trackTotalTime + ? (timeOfTracksWidth / commonStore.trackTotalTime) * + viewControlsContainerWidth + : 0 + const playStartTimeControlPosition = + ((commonStore.trackPlayStartTime - commonStore.trackCurrentTime) / + (baseMoveTime * scale)) * + snapValue + const tracksEndPosition = + ((commonStore.trackTotalTime - commonStore.trackCurrentTime) / + (baseMoveTime * scale)) * + snapValue + const moveableTracksWidth = + tracksEndLineRef.current && + viewControlsContainerRef.current && + tracksEndLineRef.current.getBoundingClientRect().left - + (viewControlsContainerRef.current.getBoundingClientRect().left + + trackInitOffsetPx) > + 0 + ? tracksEndLineRef.current.getBoundingClientRect().left - + (viewControlsContainerRef.current.getBoundingClientRect().left + + trackInitOffsetPx) + : Infinity + + return ( +
+
+ {`${commonStore.trackPlayStartTime} ms / ${commonStore.trackTotalTime} ms`} +
+
+
+ } + /> + } + onClick={() => { + commonStore.setTracks([]) + commonStore.setTrackScale(1) + commonStore.setTrackTotalTime(tracksMinimalTotalTime) + commonStore.setTrackCurrentTime(0) + commonStore.setTrackPlayStartTime(0) }} + /> +
+
+
-
- -
viewControlsContainerWidth) - && 'hidden' - )}> - { - playStartTimeControlX.current = data.lastX; +
+ +
0 + ? tracksRef.current.clientHeight - arrowIconToTracks + : 0, + top: `${topToArrowIcon + arrowIconToTracks}px`, + left: `${tracksEndPosition + trackInitOffsetPx - pixelFix}px`, + }} + /> + +
+ { - const delta = data.lastX - playStartTimeControlX.current; - let offsetTime = Math.round(Math.round(delta / snapValue * baseMoveTime * scale) / minimalMoveTime) * minimalMoveTime; - offsetTime = Math.min(Math.max( - offsetTime, - -commonStore.trackPlayStartTime), commonStore.trackTotalTime - commonStore.trackPlayStartTime); - commonStore.setTrackPlayStartTime(commonStore.trackPlayStartTime + offsetTime); + onDrag={(e, data) => { + setTimeout(() => { + let offset = 0 + if (currentTimeControlRef.current) { + const match = + currentTimeControlRef.current.style.transform.match( + /translate\((.+)px,/ + ) + if (match) offset = parseFloat(match[1]) + } + const offsetTime = + (commonStore.trackTotalTime / + viewControlsContainerWidth) * + offset + commonStore.setTrackCurrentTime(offsetTime) + }, 1) }} > -
- -
0) - ? tracksRef.current.clientHeight - : 0, - top: '50%', - left: `calc(50% - ${pixelFix}px)` - }} /> -
+
+
+ viewControlsContainerWidth) && + 'hidden' + )} + > + { + playStartTimeControlX.current = data.lastX + }} + onStop={(e, data) => { + const delta = data.lastX - playStartTimeControlX.current + let offsetTime = + Math.round( + Math.round((delta / snapValue) * baseMoveTime * scale) / + minimalMoveTime + ) * minimalMoveTime + offsetTime = Math.min( + Math.max(offsetTime, -commonStore.trackPlayStartTime), + commonStore.trackTotalTime - + commonStore.trackPlayStartTime + ) + commonStore.setTrackPlayStartTime( + commonStore.trackPlayStartTime + offsetTime + ) + }} + > +
+ +
0 + ? tracksRef.current.clientHeight + : 0, + top: '50%', + left: `calc(50% - ${pixelFix}px)`, + }} + /> +
+ +
+ + { + commonStore.setTrackScale(data.value) + }} + /> +
- - { - commonStore.setTrackScale(data.value); - }} - /> - -
-
- {commonStore.tracks.map(track => -
-
- : } - size="small" shape="circular" appearance="subtle" - onClick={() => { - flushMidiRecordingContent(); - commonStore.setPlayingTrackId(''); - - if (commonStore.recordingTrackId === track.id) { - commonStore.setRecordingTrackId(''); - } else { - if (commonStore.activeMidiDeviceIndex === -1) { - toast(t('Please select a MIDI device first'), { type: 'warning' }); - return; - } - - dropRecordingTime = true; - setSelectedTrackId(track.id); - - commonStore.setRecordingTrackId(track.id); - commonStore.setRecordingContent(track.content); - commonStore.setRecordingRawContent(track.rawContent.slice()); +
+ {commonStore.tracks.map((track) => ( +
+
+ - : } - size="small" shape="circular" appearance="subtle" - onClick={() => { - flushMidiRecordingContent(); - commonStore.setRecordingTrackId(''); + disabled={commonStore.platform === 'web'} + icon={ + commonStore.recordingTrackId === track.id ? ( + + ) : ( + + ) + } + size="small" + shape="circular" + appearance="subtle" + onClick={() => { + flushMidiRecordingContent() + commonStore.setPlayingTrackId('') + + if (commonStore.recordingTrackId === track.id) { + commonStore.setRecordingTrackId('') + } else { + if (commonStore.activeMidiDeviceIndex === -1) { + toast(t('Please select a MIDI device first'), { + type: 'warning', + }) + return + } - if (commonStore.playingTrackId === track.id) { - commonStore.setPlayingTrackId(''); - } else { - setSelectedTrackId(track.id); + dropRecordingTime = true + setSelectedTrackId(track.id) - commonStore.setPlayingTrackId(track.id); + commonStore.setRecordingTrackId(track.id) + commonStore.setRecordingContent(track.content) + commonStore.setRecordingRawContent( + track.rawContent.slice() + ) + } + }} + /> + - } size="small" shape="circular" - appearance="subtle" onClick={() => { - const tracks = commonStore.tracks.slice().filter(t => t.id !== track.id); - commonStore.setTracks(tracks); - refreshTracksTotalTime(); - }} /> -
-
-
- + ) : ( + + ) + } + size="small" + shape="circular" + appearance="subtle" + onClick={() => { + flushMidiRecordingContent() + commonStore.setRecordingTrackId('') + + if (commonStore.playingTrackId === track.id) { + commonStore.setPlayingTrackId('') + } else { + setSelectedTrackId(track.id) + + commonStore.setPlayingTrackId(track.id) + } + }} + /> + } + size="small" + shape="circular" + appearance="subtle" + onClick={() => { + const tracks = commonStore.tracks + .slice() + .filter((t) => t.id !== track.id) + commonStore.setTracks(tracks) + refreshTracksTotalTime() + }} />
+
+
+ +
+
-
)} -
-
- - + + OpenFileDialog('*.mid').then(async (blob) => { + const bodyForm = new FormData() + bodyForm.append('file_data', blob) + const { url, headers } = await getReqUrl( + commonStore.getCurrentModelConfig().apiParameters.apiPort, + '/midi-to-text' + ) + fetch(url, { + method: 'POST', + headers, + body: bodyForm, + }) + .then(async (r) => { + if (r.status === 200) { + const text = (await r.json()).text as string + const rawContent = text + .split(' ') + .map(tokenToMidiMessage) + .filter((m) => m) as MidiMessage[] + const tracks = commonStore.tracks.slice() + + tracks.push({ + id: uuid(), + mainInstrument: + getMidiRawContentMainInstrument(rawContent), + content: text, + rawContent: rawContent, + offsetTime: 0, + contentTime: getMidiRawContentTime(rawContent), + }) + commonStore.setTracks(tracks) + refreshTracksTotalTime() + } else { + toast( + 'Failed to fetch - ' + + r.status + + ' - ' + + r.statusText + + ' - ' + + (await r.text()), + { + type: 'error', + } + ) + } + }) + .catch((e) => { + toast(t('Error') + ' - ' + (e.message || e), { + type: 'error', + autoClose: 2500, + }) + }) + }) + }} + > + {t('Import MIDI')} + +
+ {t('Select a track to preview the content')}
- - {t('Select a track to preview the content')} -
-
-
- {selectedTrack && - -
- {`${t('Start Time')}: ${selectedTrack.offsetTime} ms`} - {`${t('Content Duration')}: ${selectedTrack.contentTime} ms`} -
- {selectedTrackId === commonStore.recordingTrackId - ? commonStore.recordingContent - : selectedTrack.content} +
+ {selectedTrack && ( + +
+ {`${t('Start Time')}: ${selectedTrack.offsetTime} ms`} + {`${t('Content Duration')}: ${selectedTrack.contentTime} ms`} +
+ {selectedTrackId === commonStore.recordingTrackId + ? commonStore.recordingContent + : selectedTrack.content} +
+ + )} + {commonStore.platform !== 'web' && ( +
+ {t('Current Instrument') + ':'} + {InstrumentTypeNameMap.map((name, i) => ( + + {t(name)} + + ))}
- - } - { - commonStore.platform !== 'web' && -
- {t('Current Instrument') + ':'} - {InstrumentTypeNameMap.map((name, i) => - {t(name)})} -
- } - - - -
- ); -}); - -export default AudiotrackEditor; + const result = ( + ' ' + globalMessages.map(midiMessageToToken).join('') + ).trim() + commonStore.setCompositionSubmittedPrompt(result) + setPrompt(result) + }} + > + {t('Save to generation area')} + + +
+ ) + } +) + +export default AudiotrackEditor diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx index 6649ac00..1bbfb173 100644 --- a/frontend/src/pages/Chat.tsx +++ b/frontend/src/pages/Chat.tsx @@ -1,5 +1,5 @@ -import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react' +import { AvatarProps } from '@fluentui/react-avatar' import { Avatar, Button, @@ -8,17 +8,8 @@ import { MenuTrigger, PresenceBadge, Switch, - Textarea -} from '@fluentui/react-components'; -import commonStore, { ModelStatus } from '../stores/commonStore'; -import { observer } from 'mobx-react-lite'; -import { v4 as uuid } from 'uuid'; -import classnames from 'classnames'; -import { fetchEventSource } from '@microsoft/fetch-event-source'; -import { KebabHorizontalIcon, PencilIcon, SyncIcon, TrashIcon } from '@primer/octicons-react'; -import logo from '../assets/images/logo.png'; -import MarkdownRender from '../components/MarkdownRender'; -import { ToolTipButton } from '../components/ToolTipButton'; + Textarea, +} from '@fluentui/react-components' import { ArrowCircleUp28Regular, ArrowClockwise16Regular, @@ -30,14 +21,45 @@ import { RecordStop28Regular, SaveRegular, TextAlignJustify24Regular, - TextAlignJustifyRotate9024Regular -} from '@fluentui/react-icons'; -import { CopyButton } from '../components/CopyButton'; -import { ReadButton } from '../components/ReadButton'; -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'; + TextAlignJustifyRotate9024Regular, +} from '@fluentui/react-icons' +import { fetchEventSource } from '@microsoft/fetch-event-source' +import { + KebabHorizontalIcon, + PencilIcon, + SyncIcon, + TrashIcon, +} from '@primer/octicons-react' +import classnames from 'classnames' +import { observer } from 'mobx-react-lite' +import { useTranslation } from 'react-i18next' +import { toast } from 'react-toastify' +import { useMediaQuery } from 'usehooks-ts' +import { v4 as uuid } from 'uuid' +import { + OpenFileFolder, + OpenOpenFileDialog, + OpenSaveFileDialog, +} from '../../wailsjs/go/backend_golang/App' +import logo from '../assets/images/logo.png' +import { CopyButton } from '../components/CopyButton' +import { DialogButton } from '../components/DialogButton' +import { Labeled } from '../components/Labeled' +import MarkdownRender from '../components/MarkdownRender' +import { ReadButton } from '../components/ReadButton' +import { ToolTipButton } from '../components/ToolTipButton' +import { ValuedSlider } from '../components/ValuedSlider' +import { WorkHeader } from '../components/WorkHeader' +import commonStore, { ModelStatus } from '../stores/commonStore' +import { + botName, + ConversationMessage, + MessageType, + Role, + systemName, + userName, + welcomeUuid, +} from '../types/chat' import { absPathAsset, bytesToReadable, @@ -45,400 +67,575 @@ import { newChatConversation, OpenFileDialog, setActivePreset, - toastWithButton -} from '../utils'; -import { useMediaQuery } from 'usehooks-ts'; -import { botName, ConversationMessage, MessageType, Role, systemName, userName, welcomeUuid } from '../types/chat'; -import { Labeled } from '../components/Labeled'; -import { ValuedSlider } from '../components/ValuedSlider'; -import { PresetsButton } from './PresetsManager/PresetsButton'; -import { webOpenOpenFileDialog } from '../utils/web-file-operations'; -import { defaultPenaltyDecay } from './defaultConfigs'; -import { AvatarProps } from '@fluentui/react-avatar'; + toastWithButton, +} from '../utils' +import { webOpenOpenFileDialog } from '../utils/web-file-operations' +import { defaultPenaltyDecay } from './defaultConfigs' +import { PresetsButton } from './PresetsManager/PresetsButton' let chatSseControllers: { [id: string]: AbortController -} = {}; +} = {} const MoreUtilsButton: FC<{ - uuid: string, + uuid: string setEditing: (editing: boolean) => void -}> = observer(({ - uuid, - setEditing -}) => { - const { t } = useTranslation(); - const [speaking, setSpeaking] = useState(false); - - const messageItem = commonStore.conversation[uuid]; - - return - - ; -}); +}> = observer(({ uuid, setEditing }) => { + const { t } = useTranslation() + const [speaking, setSpeaking] = useState(false) + + const messageItem = commonStore.conversation[uuid] + + return ( + + + + ) +}) const HiddenAvatar: FC = ({ children, hidden, ...props }) => { if (hidden) { - return
{children}
; + return
{children}
} else { - return ( - - {children} - - ); + return {children} } -}; +} const ChatMessageItem: FC<{ - uuid: string, - onSubmit: (message: string | null, answerId: string | null, - startUuid: string | null, endUuid: string | null, includeEndUuid: boolean) => void + uuid: string + onSubmit: ( + message: string | null, + answerId: string | null, + startUuid: string | null, + endUuid: string | null, + includeEndUuid: boolean + ) => void }> = observer(({ uuid, onSubmit }) => { - const { t } = useTranslation(); - const [editing, setEditing] = useState(false); - const textareaRef = useRef(null); - const messageItem = commonStore.conversation[uuid]; + const { t } = useTranslation() + const [editing, setEditing] = useState(false) + const textareaRef = useRef(null) + const messageItem = commonStore.conversation[uuid] - console.log(uuid); + console.log(uuid) const setEditingInner = (editing: boolean) => { - setEditing(editing); + setEditing(editing) if (editing) { setTimeout(() => { - const textarea = textareaRef.current; + const textarea = textareaRef.current if (textarea) { - textarea.focus(); - textarea.selectionStart = textarea.value.length; - textarea.selectionEnd = textarea.value.length; - textarea.style.height = textarea.scrollHeight + 'px'; + textarea.focus() + textarea.selectionStart = textarea.value.length + textarea.selectionEnd = textarea.value.length + textarea.style.height = textarea.scrollHeight + 'px' } - }); + }) } - }; + } - let avatarImg: string | undefined; + let avatarImg: string | undefined if (commonStore.activePreset && messageItem.sender === botName) { - avatarImg = absPathAsset(commonStore.activePreset.avatarImg); + avatarImg = absPathAsset(commonStore.activePreset.avatarImg) } else if (commonStore.activePreset && messageItem.sender === userName) { - avatarImg = commonStore.activePreset.userAvatarImg && absPathAsset(commonStore.activePreset.userAvatarImg); + avatarImg = + commonStore.activePreset.userAvatarImg && + absPathAsset(commonStore.activePreset.userAvatarImg) } else if (messageItem.avatarImg) { - avatarImg = messageItem.avatarImg; + avatarImg = messageItem.avatarImg } - return
{ - const utils = document.getElementById('utils-' + uuid); - if (utils) utils.classList.remove('invisible'); - }} - onMouseLeave={() => { - const utils = document.getElementById('utils-' + uuid); - if (utils) utils.classList.add('invisible'); - }} - > -
+ )} +
+ } + /> + ) +}) -export default Settings; +export default Settings diff --git a/frontend/src/pages/Train.tsx b/frontend/src/pages/Train.tsx index 77f42b7f..00e82a93 100644 --- a/frontend/src/pages/Train.tsx +++ b/frontend/src/pages/Train.tsx @@ -1,6 +1,36 @@ -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 React, { FC, useEffect, useRef, useState } from 'react' +import { + Button, + Dropdown, + Input, + Option, + Select, + Switch, + Tab, + TabList, +} from '@fluentui/react-components' +import { + DataUsageSettings20Regular, + Folder20Regular, +} from '@fluentui/react-icons' +import { SelectTabEventHandler } from '@fluentui/react-tabs' +import { + CategoryScale, + Chart as ChartJS, + Legend, + LinearScale, + LineElement, + PointElement, + Title, + Tooltip, +} from 'chart.js' +import { t } from 'i18next' +import { observer } from 'mobx-react-lite' +import { Line } from 'react-chartjs-2' +import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types' +import { useTranslation } from 'react-i18next' +import { useNavigate } from 'react-router' +import { toast } from 'react-toastify' import { ConvertData, FileExists, @@ -12,39 +42,21 @@ import { WslInstallUbuntu, WslIsEnabled, WslStart, - WslStop -} from '../../wailsjs/go/backend_golang/App'; -import { toast } from 'react-toastify'; -import commonStore from '../stores/commonStore'; -import { observer } from 'mobx-react-lite'; -import { SelectTabEventHandler } from '@fluentui/react-tabs'; -import { checkDependencies, toastWithButton } from '../utils'; -import { Section } from '../components/Section'; -import { Labeled } from '../components/Labeled'; -import { ToolTipButton } from '../components/ToolTipButton'; -import { DataUsageSettings20Regular, Folder20Regular } from '@fluentui/react-icons'; -import { useNavigate } from 'react-router'; -import { - CategoryScale, - Chart as ChartJS, - Legend, - LinearScale, - LineElement, - PointElement, - Title, - Tooltip -} from 'chart.js'; -import { Line } from 'react-chartjs-2'; -import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types'; -import { WindowShow } from '../../wailsjs/runtime'; -import { t } from 'i18next'; -import { DialogButton } from '../components/DialogButton'; + WslStop, +} from '../../wailsjs/go/backend_golang/App' +import { WindowShow } from '../../wailsjs/runtime' +import { DialogButton } from '../components/DialogButton' +import { Labeled } from '../components/Labeled' +import { Section } from '../components/Section' +import { ToolTipButton } from '../components/ToolTipButton' +import commonStore from '../stores/commonStore' import { DataProcessParameters, LoraFinetuneParameters, LoraFinetunePrecision, - TrainNavigationItem -} from '../types/train'; + TrainNavigationItem, +} from '../types/train' +import { checkDependencies, toastWithButton } from '../utils' ChartJS.register( CategoryScale, @@ -54,49 +66,66 @@ ChartJS.register( Tooltip, Title, Legend -); +) const parseLossData = (data: string) => { - const regex = /Epoch (\d+):\s+(\d+%)\|[\s\S]*\| (\d+)\/(\d+) \[(\S+)<(\S+),\s+(\S+), loss=(\S+),[\s\S]*\]/g; - const matches = Array.from(data.matchAll(regex)); - if (matches.length === 0) - return false; - const lastMatch = matches[matches.length - 1]; - const epoch = parseInt(lastMatch[1]); - const loss = parseFloat(lastMatch[8]); - commonStore.setChartTitle(`Epoch ${epoch}: ${lastMatch[2]} - ${lastMatch[3]}/${lastMatch[4]} - ${lastMatch[5]}/${lastMatch[6]} - ${lastMatch[7]} Loss=${loss}`); - addLossDataToChart(epoch, loss); + const regex = + /Epoch (\d+):\s+(\d+%)\|[\s\S]*\| (\d+)\/(\d+) \[(\S+)<(\S+),\s+(\S+), loss=(\S+),[\s\S]*\]/g + const matches = Array.from(data.matchAll(regex)) + if (matches.length === 0) return false + const lastMatch = matches[matches.length - 1] + const epoch = parseInt(lastMatch[1]) + const loss = parseFloat(lastMatch[8]) + commonStore.setChartTitle( + `Epoch ${epoch}: ${lastMatch[2]} - ${lastMatch[3]}/${lastMatch[4]} - ${lastMatch[5]}/${lastMatch[6]} - ${lastMatch[7]} Loss=${loss}` + ) + addLossDataToChart(epoch, loss) if (loss > 5) - toast(t('Loss is too high, please check the training data, and ensure your gpu driver is up to date.'), { - type: 'warning', - toastId: 'train_loss_high' - }); - return true; -}; + toast( + t( + 'Loss is too high, please check the training data, and ensure your gpu driver is up to date.' + ), + { + type: 'warning', + toastId: 'train_loss_high', + } + ) + return true +} -let chartLine: ChartJSOrUndefined<'line', (number | null)[], string>; +let chartLine: ChartJSOrUndefined<'line', (number | null)[], string> const addLossDataToChart = (epoch: number, loss: number) => { - const epochIndex = commonStore.chartData.labels!.findIndex(l => l.includes(epoch.toString())); + const epochIndex = commonStore.chartData.labels!.findIndex((l) => + l.includes(epoch.toString()) + ) if (epochIndex === -1) { if (epoch === 0) { - commonStore.chartData.labels!.push('Init'); - commonStore.chartData.datasets[0].data = [...commonStore.chartData.datasets[0].data, loss]; + commonStore.chartData.labels!.push('Init') + commonStore.chartData.datasets[0].data = [ + ...commonStore.chartData.datasets[0].data, + loss, + ] } - commonStore.chartData.labels!.push('Epoch ' + epoch.toString()); - commonStore.chartData.datasets[0].data = [...commonStore.chartData.datasets[0].data, loss]; + commonStore.chartData.labels!.push('Epoch ' + epoch.toString()) + commonStore.chartData.datasets[0].data = [ + ...commonStore.chartData.datasets[0].data, + loss, + ] } else { if (chartLine) { - const newData = [...commonStore.chartData.datasets[0].data]; - newData[epochIndex] = loss; - chartLine.data.datasets[0].data = newData; - chartLine.update(); + const newData = [...commonStore.chartData.datasets[0].data] + newData[epochIndex] = loss + chartLine.data.datasets[0].data = newData + chartLine.update() } } - commonStore.setChartData(commonStore.chartData); -}; + commonStore.setChartData(commonStore.chartData) +} -const loraFinetuneParametersOptions: Array<[key: keyof LoraFinetuneParameters, type: string, name: string]> = [ +const loraFinetuneParametersOptions: Array< + [key: keyof LoraFinetuneParameters, type: string, name: string] +> = [ ['devices', 'number', 'Devices'], ['precision', 'LoraFinetunePrecision', 'Precision'], ['gradCp', 'boolean', 'Gradient Checkpoint'], @@ -116,318 +145,437 @@ const loraFinetuneParametersOptions: Array<[key: keyof LoraFinetuneParameters, t ['loraR', 'number', 'LoRA R'], ['loraAlpha', 'number', 'LoRA Alpha'], ['loraDropout', 'number', 'LoRA Dropout'], - ['beta1', 'any', ''] + ['beta1', 'any', ''], // ['preFfn', 'boolean', 'Pre-FFN'], // ['headQk', 'boolean', 'Head QK'] -]; +] const showError = (e: any) => { - const msg = e.message || e; + const msg = e.message || e if (msg === 'wsl not running') { - toast(t('WSL is not running, please retry. If it keeps happening, it means you may be using an outdated version of WSL, run "wsl --update" to update.'), { type: 'error' }); + toast( + t( + 'WSL is not running, please retry. If it keeps happening, it means you may be using an outdated version of WSL, run "wsl --update" to update.' + ), + { type: 'error' } + ) } else { - toast(t(msg), { type: 'error', toastId: 'train_error' }); + toast(t(msg), { type: 'error', toastId: 'train_error' }) } -}; +} // error key should be lowercase const errorsMap = Object.entries({ - ['python3 ./finetune/lora/$modelInfo'.toLowerCase()]: 'Memory is not enough, try to increase the virtual memory (Swap of WSL) or use a smaller base model.', + ['python3 ./finetune/lora/$modelInfo'.toLowerCase()]: + '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\'': '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.', + 'valueerror: high <= 0': + 'Training data is not enough, reduce context length or add more data for training', + "+= '+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', - 'rwkv{version} is not supported': 'This version of RWKV is not supported yet.', - 'no such file': 'Failed to find the base model, please try to change your base model.', - 'modelinfo is invalid': 'Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.' -}); + "error building extension 'fused_adam'": 'Matched CUDA is not installed', + 'rwkv{version} is not supported': + 'This version of RWKV is not supported yet.', + 'no such file': + 'Failed to find the base model, please try to change your base model.', + '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) => { if (data) { - addWslMessage(data); - const ok = parseLossData(data); + addWslMessage(data) + const ok = parseLossData(data) if (!ok) for (const [key, value] of errorsMap) { if (data.toLowerCase().includes(key)) { - showError(value); - return; + showError(value) + return } } } -}; +} const addWslMessage = (message: string) => { - const newData = commonStore.wslStdout + '\n' + message; - let lines = newData.split('\n'); - const result = lines.slice(-100).join('\n'); - commonStore.setWslStdout(result); -}; + const newData = commonStore.wslStdout + '\n' + message + let lines = newData.split('\n') + const result = lines.slice(-100).join('\n') + commonStore.setWslStdout(result) +} const TerminalDisplay: FC = observer(() => { - const bodyRef = useRef(null); + const bodyRef = useRef(null) const scrollToBottom = () => { if (bodyRef.current) - bodyRef.current.scrollTop = bodyRef.current.scrollHeight; - }; + bodyRef.current.scrollTop = bodyRef.current.scrollHeight + } useEffect(() => { - scrollToBottom(); - }); + scrollToBottom() + }) return ( -
-
- {commonStore.wslStdout} -
+
+
{commonStore.wslStdout}
- ); -}); + ) +}) const Terminal: FC = observer(() => { - const { t } = useTranslation(); - const [input, setInput] = useState(''); + const { t } = useTranslation() + const [input, setInput] = useState('') const handleKeyDown = (e: any) => { - e.stopPropagation(); + e.stopPropagation() if (e.keyCode === 13) { - e.preventDefault(); - if (!input) return; - - WslStart().then(() => { - addWslMessage('WSL> ' + input); - setInput(''); - WslCommand(input).then(WindowShow).catch(showError); - }).catch(showError); + e.preventDefault() + if (!input) return + + WslStart() + .then(() => { + addWslMessage('WSL> ' + input) + setInput('') + WslCommand(input).then(WindowShow).catch(showError) + }) + .catch(showError) } - }; + } return ( -
+
-
+
WSL: - { - setInput(e.target.value); - }} onKeyDown={handleKeyDown}> -
- ); -}); + ) +}) const LoraFinetune: FC = observer(() => { - const { t } = useTranslation(); - const navigate = useNavigate(); - const chartRef = useRef>(null); + const { t } = useTranslation() + const navigate = useNavigate() + const chartRef = + useRef>(null) - const dataParams = commonStore.dataProcessParams; - const loraParams = commonStore.loraFinetuneParams; + const dataParams = commonStore.dataProcessParams + const loraParams = commonStore.loraFinetuneParams - if (chartRef.current) - chartLine = chartRef.current; + if (chartRef.current) chartLine = chartRef.current const setDataParams = (newParams: Partial) => { commonStore.setDataProcessParams({ ...dataParams, - ...newParams - }); - }; + ...newParams, + }) + } const setLoraParams = (newParams: Partial) => { commonStore.setLoraFinetuneParameters({ ...loraParams, - ...newParams - }); - }; + ...newParams, + }) + } useEffect(() => { if (loraParams.baseModel === '') setLoraParams({ - baseModel: commonStore.modelSourceList.find(m => m.isComplete)?.name || '' - }); - }, []); + baseModel: + commonStore.modelSourceList.find((m) => m.isComplete)?.name || '', + }) + }, []) const StartLoraFinetune = async () => { - const ok = await checkDependencies(navigate); - if (!ok) - return; - - const convertedDataPath = './finetune/json2binidx_tool/data/' + - dataParams.dataPath.replace(/[\/\\]$/, '').split(/[\/\\]/).pop()!.split('.')[0] + - '_text_document'; - if (!await FileExists(convertedDataPath + '.idx')) { - toast(t('Please convert data first.'), { type: 'error' }); - return; + const ok = await checkDependencies(navigate) + if (!ok) return + + const convertedDataPath = + './finetune/json2binidx_tool/data/' + + dataParams.dataPath + .replace(/[\/\\]$/, '') + .split(/[\/\\]/) + .pop()! + .split('.')[0] + + '_text_document' + if (!(await FileExists(convertedDataPath + '.idx'))) { + toast(t('Please convert data first.'), { type: 'error' }) + return } - WslIsEnabled().then(() => { - WslStart().then(() => { - setTimeout(WindowShow, 1000); - - let ctxLen = loraParams.ctxLen; - if (dataParams.dataPath === 'finetune/data/sample.jsonl') { - ctxLen = 150; - toast(t('You are using sample data for training. For formal training, please make sure to create your own jsonl file.'), { - type: 'info', - autoClose: 6000 - }); - } + WslIsEnabled() + .then(() => { + WslStart() + .then(() => { + setTimeout(WindowShow, 1000) + + let ctxLen = loraParams.ctxLen + if (dataParams.dataPath === 'finetune/data/sample.jsonl') { + ctxLen = 150 + toast( + t( + 'You are using sample data for training. For formal training, please make sure to create your own jsonl file.' + ), + { + type: 'info', + autoClose: 6000, + } + ) + } - commonStore.setChartData({ - labels: [], - datasets: [ - { - label: 'Loss', - data: [], - borderColor: 'rgb(53, 162, 235)', - backgroundColor: 'rgba(53, 162, 235, 0.5)' + commonStore.setChartData({ + labels: [], + datasets: [ + { + label: 'Loss', + data: [], + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0.5)', + }, + ], + }) + WslCommand( + `export cnMirror=${commonStore.settings.cnMirror ? '1' : '0'} ` + + `&& export loadModel=models/${loraParams.baseModel} ` + + `&& sed -i 's/\\r$//' finetune/install-wsl-dep-and-train.sh ` + + `&& chmod +x finetune/install-wsl-dep-and-train.sh && ./finetune/install-wsl-dep-and-train.sh ` + + (loraParams.baseModel + ? `--load_model models/${loraParams.baseModel} ` + : '') + + (loraParams.loraLoad + ? `--lora_load lora-models/${loraParams.loraLoad} ` + : '') + + `--data_file ${convertedDataPath} ` + + `--ctx_len ${ctxLen} --epoch_steps ${loraParams.epochSteps} --epoch_count ${loraParams.epochCount} ` + + `--epoch_begin ${loraParams.epochBegin} --epoch_save ${loraParams.epochSave} ` + + `--micro_bsz ${loraParams.microBsz} --accumulate_grad_batches ${loraParams.accumGradBatches} ` + + `--pre_ffn ${loraParams.preFfn ? '0' : '0'} --head_qk ${loraParams.headQk ? '0' : '0'} --lr_init ${loraParams.lrInit} --lr_final ${loraParams.lrFinal} ` + + `--warmup_steps ${loraParams.warmupSteps} ` + + `--beta1 ${loraParams.beta1} --beta2 ${loraParams.beta2} --adam_eps ${loraParams.adamEps} ` + + `--devices ${loraParams.devices} --precision ${loraParams.precision} ` + + `--grad_cp ${loraParams.gradCp ? '1' : '0'} ` + + `--lora_r ${loraParams.loraR} --lora_alpha ${loraParams.loraAlpha} --lora_dropout ${loraParams.loraDropout}` + ).catch(showError) + }) + .catch((e) => { + WindowShow() + const msg = e.message || e + if (msg === 'ubuntu not found') { + toastWithButton( + t('Ubuntu is not installed, do you want to install it?'), + t('Install Ubuntu'), + () => { + WslInstallUbuntu() + .then(() => { + WindowShow() + toast( + t( + 'Please install Ubuntu using Microsoft Store, after installation click the Open button in Microsoft Store and then click the Train button' + ), + { + type: 'info', + autoClose: 10000, + } + ) + }) + .catch(showError) + } + ) + } else { + showError(msg) + } + }) + }) + .catch((e) => { + const msg = e.message || e + + const enableWsl = (forceMode: boolean) => { + WindowShow() + toastWithButton( + t('WSL is not enabled, do you want to enable it?'), + t('Enable WSL'), + () => { + WslEnable(forceMode) + .then(() => { + WindowShow() + toast( + t( + 'After installation, please restart your computer to enable WSL' + ), + { + type: 'info', + autoClose: false, + } + ) + }) + .catch(showError) } - ] - }); - WslCommand(`export cnMirror=${commonStore.settings.cnMirror ? '1' : '0'} ` + - `&& export loadModel=models/${loraParams.baseModel} ` + - `&& sed -i 's/\\r$//' finetune/install-wsl-dep-and-train.sh ` + - `&& chmod +x finetune/install-wsl-dep-and-train.sh && ./finetune/install-wsl-dep-and-train.sh ` + - (loraParams.baseModel ? `--load_model models/${loraParams.baseModel} ` : '') + - (loraParams.loraLoad ? `--lora_load lora-models/${loraParams.loraLoad} ` : '') + - `--data_file ${convertedDataPath} ` + - `--ctx_len ${ctxLen} --epoch_steps ${loraParams.epochSteps} --epoch_count ${loraParams.epochCount} ` + - `--epoch_begin ${loraParams.epochBegin} --epoch_save ${loraParams.epochSave} ` + - `--micro_bsz ${loraParams.microBsz} --accumulate_grad_batches ${loraParams.accumGradBatches} ` + - `--pre_ffn ${loraParams.preFfn ? '0' : '0'} --head_qk ${loraParams.headQk ? '0' : '0'} --lr_init ${loraParams.lrInit} --lr_final ${loraParams.lrFinal} ` + - `--warmup_steps ${loraParams.warmupSteps} ` + - `--beta1 ${loraParams.beta1} --beta2 ${loraParams.beta2} --adam_eps ${loraParams.adamEps} ` + - `--devices ${loraParams.devices} --precision ${loraParams.precision} ` + - `--grad_cp ${loraParams.gradCp ? '1' : '0'} ` + - `--lora_r ${loraParams.loraR} --lora_alpha ${loraParams.loraAlpha} --lora_dropout ${loraParams.loraDropout}`).catch(showError); - }).catch(e => { - WindowShow(); - const msg = e.message || e; - if (msg === 'ubuntu not found') { - toastWithButton(t('Ubuntu is not installed, do you want to install it?'), t('Install Ubuntu'), () => { - WslInstallUbuntu().then(() => { - WindowShow(); - toast(t('Please install Ubuntu using Microsoft Store, after installation click the Open button in Microsoft Store and then click the Train button'), { - type: 'info', - autoClose: 10000 - }); - }).catch(showError); - }); + ) + } + + if (msg === 'wsl is not enabled') { + enableWsl(true) + } else if (msg.includes('wsl.state: The system cannot find the file')) { + enableWsl(true) } else { - showError(msg); + showError(msg) } - }); - }).catch(e => { - const msg = e.message || e; - - const enableWsl = (forceMode: boolean) => { - WindowShow(); - toastWithButton(t('WSL is not enabled, do you want to enable it?'), t('Enable WSL'), () => { - WslEnable(forceMode).then(() => { - WindowShow(); - toast(t('After installation, please restart your computer to enable WSL'), { - type: 'info', - autoClose: false - }); - }).catch(showError); - }); - }; - - if (msg === 'wsl is not enabled') { - enableWsl(true); - } else if (msg.includes('wsl.state: The system cannot find the file')) { - enableWsl(true); - } else { - showError(msg); - } - }); - }; + }) + } return ( -
- {(commonStore.wslStdout.length > 0 || commonStore.chartData.labels!.length !== 0) && +
+ {(commonStore.wslStdout.length > 0 || + commonStore.chartData.labels!.length !== 0) && (
- {commonStore.wslStdout.length > 0 && commonStore.chartData.labels!.length === 0 && } - {commonStore.chartData.labels!.length !== 0 && - 0 && + commonStore.chartData.labels!.length === 0 && } + {commonStore.chartData.labels!.length !== 0 && ( + } + scales: { + y: { + beginAtZero: true, + }, + }, + maintainAspectRatio: false, + }} + style={{ width: '100%' }} + /> + )}
- } + )}
-
+
{t('Data Path')} - { - setDataParams({ dataPath: data.value }); - }} /> - - } onClick={() => { - OpenFileFolder(dataParams.dataPath); - }} /> + setDataParams({ dataPath: data.value }) + }} + /> + + } + onClick={() => { + OpenFileFolder(dataParams.dataPath) + }} + />
-
+
{t('Vocab Path')} - { - setDataParams({ vocabPath: data.value }); - }} /> - + setDataParams({ vocabPath: data.value }) + }} + /> +
} @@ -436,158 +584,220 @@ const LoraFinetune: FC = observer(() => {
-
-
- {t('Base Model')} -
- { setLoraParams({ - baseModel: data.value - }); - }}> - {commonStore.modelSourceList.map((modelItem, index) => - modelItem.isComplete && + baseModel: data.value, + }) + }} + > + {commonStore.modelSourceList.map( + (modelItem, index) => + modelItem.isComplete && ( + + ) )} - } onClick={() => { - navigate({ pathname: '/models' }); - }} /> + } + onClick={() => { + navigate({ pathname: '/models' }) + }} + />
-
+
{t('LoRA Model')} - - +
- { - loraFinetuneParametersOptions.map(([key, type, name], index) => { - return ( - { + return ( + { setLoraParams({ - [key]: Number(data.value) - }); - }} /> : - type === 'boolean' ? - { + [key]: Number(data.value), + }) + }} + /> + ) : type === 'boolean' ? ( + { + setLoraParams({ + [key]: data.checked, + }) + }} + /> + ) : type === 'string' ? ( + { + setLoraParams({ + [key]: data.value, + }) + }} + /> + ) : type === 'LoraFinetunePrecision' ? ( + { + if (data.optionText) { setLoraParams({ - [key]: data.checked - }); - }} /> : - type === 'string' ? - { - setLoraParams({ - [key]: data.value - }); - }} /> : - type === 'LoraFinetunePrecision' ? - { - if (data.optionText) { - setLoraParams({ - precision: data.optionText as LoraFinetunePrecision - }); - } - }} - > - - - - - :
- } /> - ); - }) - } + precision: + data.optionText as LoraFinetunePrecision, + }) + } + }} + > + + + + + ) : ( +
+ ) + } + /> + ) + })}
} />
- - + +
- ); -}); + ) +}) const pages: { [label: string]: TrainNavigationItem } = { 'LoRA Finetune': { - element: + element: , }, WSL: { - element: - } -}; - + element: , + }, +} const Train: FC = () => { - const { t } = useTranslation(); - const [tab, setTab] = useState('LoRA Finetune'); + const { t } = useTranslation() + const [tab, setTab] = useState('LoRA Finetune') const selectTab: SelectTabEventHandler = (e, data) => - typeof data.value === 'string' ? setTab(data.value) : null; - - return
- - {Object.entries(pages).map(([label]) => ( - - {t(label)} - - ))} - -
- {pages[tab].element} + typeof data.value === 'string' ? setTab(data.value) : null + + return ( +
+ + {Object.entries(pages).map(([label]) => ( + + {t(label)} + + ))} + +
{pages[tab].element}
-
; -}; + ) +} -export default Train; +export default Train diff --git a/frontend/src/pages/defaultConfigs.ts b/frontend/src/pages/defaultConfigs.ts index c901dc4d..3bb5409d 100644 --- a/frontend/src/pages/defaultConfigs.ts +++ b/frontend/src/pages/defaultConfigs.ts @@ -1,10 +1,11 @@ -import { CompletionPreset } from '../types/completion'; -import { ModelConfig } from '../types/configs'; +import { CompletionPreset } from '../types/completion' +import { ModelConfig } from '../types/configs' -export const defaultPenaltyDecay = 0.996; +export const defaultPenaltyDecay = 0.996 -export const defaultCompositionPrompt = ''; -export const defaultCompositionABCPrompt = 'S:3\n' + +export const defaultCompositionPrompt = '' +export const defaultCompositionABCPrompt = + 'S:3\n' + 'B:9\n' + 'E:4\n' + 'B:9\n' + @@ -14,186 +15,205 @@ export const defaultCompositionABCPrompt = 'S:3\n' + 'L:1/8\n' + 'M:3/4\n' + 'K:D\n' + - ' Bc |"G" d2 cB"A" A2 FE |"Bm" F2 B4 F^G |'; + ' Bc |"G" d2 cB"A" A2 FE |"Bm" F2 B4 F^G |' -export const defaultPresets: CompletionPreset[] = [{ - name: 'Writer', - prompt: 'The following is an epic science fiction masterpiece that is immortalized, with delicate descriptions and grand depictions of interstellar civilization wars.\n' + - 'Chapter 1.\n', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '\\n\\nUser', - injectStart: '', - injectEnd: '' - } -}, { - name: 'Translator', - prompt: 'Translate this into Chinese.\n' + - '\n' + - 'English: What rooms do you have available?', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '\\n\\n', - injectStart: '\\nChinese: ', - injectEnd: '\\n\\nEnglish: ' - } -}, { - name: 'Catgirl', - prompt: 'The following is a conversation between a cat girl and her owner. The cat girl is a humanized creature that behaves like a cat but is humanoid. At the end of each sentence in the dialogue, she will add "Meow~". In the following content, User represents the owner and Assistant represents the cat girl.\n' + - '\n' + - 'User: Hello.\n' + - '\n' + - 'Assistant: I\'m here, meow~.\n' + - '\n' + - 'User: Can you tell jokes?', - params: { - maxResponseToken: 500, - temperature: 1.2, - topP: 0.5, - presencePenalty: 0.4, - frequencyPenalty: 0.4, - stop: '\\n\\nUser', - injectStart: '\\n\\nAssistant: ', - injectEnd: '\\n\\nUser: ' - } -}, { - name: 'Chinese Kongfu', - prompt: 'User: 请你扮演一个文本冒险游戏，我是游戏主角。这是一个玄幻修真世界，有四大门派。我输入我的行动，请你显示行动结果，并具体描述环境。我的第一个行动是“醒来”，请开始故事。', - params: { - maxResponseToken: 500, - temperature: 1.1, - topP: 0.7, - presencePenalty: 0.3, - frequencyPenalty: 0.3, - stop: '\\n\\nUser', - injectStart: '\\n\\nAssistant: ', - injectEnd: '\\n\\nUser: ' - } -}, { - name: 'Code Generation', - prompt: 'def sum(', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '\\n\\n', - injectStart: '', - injectEnd: '' - } -}, { - name: 'Werewolf', - prompt: 'There is currently a game of Werewolf with six players, including a Seer (who can check identities at night), two Werewolves (who can choose someone to kill at night), a Bodyguard (who can choose someone to protect at night), two Villagers (with no special abilities), and a game host. User will play as Player 1, Assistant will play as Players 2-6 and the game host, and they will begin playing together. Every night, the host will ask User for his action and simulate the actions of the other players. During the day, the host will oversee the voting process and ask User for his vote. \n' + - '\n' + - 'Assistant: Next, I will act as the game host and assign everyone their roles, including randomly assigning yours. Then, I will simulate the actions of Players 2-6 and let you know what happens each day. Based on your assigned role, you can tell me your actions and I will let you know the corresponding results each day.\n' + - '\n' + - 'User: Okay, I understand. Let\'s begin. Please assign me a role. Am I the Seer, Werewolf, Villager, or Bodyguard?\n' + - '\n' + - 'Assistant: You are the Seer. Now that night has fallen, please choose a player to check his identity.\n' + - '\n' + - 'User: Tonight, I want to check Player 2 and find out his role.', - params: { - maxResponseToken: 500, - temperature: 1.2, - topP: 0.4, - presencePenalty: 0.5, - frequencyPenalty: 0.5, - stop: '\\n\\nUser', - injectStart: '\\n\\nAssistant: ', - injectEnd: '\\n\\nUser: ' - } -}, { - name: 'Instruction 1', - prompt: 'Instruction: Write a story using the following information\n' + - '\n' + - 'Input: A man named Alex chops a tree down\n' + - '\n' + - 'Response:', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '', - injectStart: '', - injectEnd: '' - } -}, { - name: 'Instruction 2', - prompt: 'Instruction: You are an expert assistant for summarizing and extracting information from given content\n' + - 'Generate a valid JSON in the following format:\n' + - '{\n' + - ' "summary": "Summary of content",\n' + - ' "keywords": ["content keyword 1", "content keyword 2"]\n' + - '}\n' + - '\n' + - 'Input: The open-source community has introduced Eagle 7B, a new RNN model, built on the RWKV-v5 architecture. This new model has been trained on 1.1 trillion tokens and supports over 100 languages. The RWKV architecture, short for ‘Rotary Weighted Key-Value,’ is a type of architecture used in the field of artificial intelligence, particularly in natural language processing (NLP) and is a variation of the Recurrent Neural Network (RNN) architecture.\n' + - 'Eagle 7B promises lower inference cost and stands out as a leading 7B model in terms of environmental efficiency and language versatility.\n' + - 'The model, with its 7.52 billion parameters, shows excellent performance in multi-lingual benchmarks, setting a new standard in its category. It competes closely with larger models in English language evaluations and is distinctive as an “Attention-Free Transformer,” though it requires additional tuning for specific uses. This model is accessible under the Apache 2.0 license and can be downloaded from HuggingFace for both personal and commercial purposes.\n' + - 'In terms of multilingual performance, Eagle 7B has claimed to have achieved notable results in benchmarks covering 23 languages. Its English performance has also seen significant advancements, outperforming its predecessor, RWKV v4, and competing with top-tier models.\n' + - 'Working towards a more scalable architecture and use of data efficiently, Eagle 7B is a more inclusive AI technology, supporting a broader range of languages. This model challenges the prevailing dominance of transformer models by demonstrating the capabilities of RNNs like RWKV in achieving superior performance when trained on comparable data volumes.\n' + - 'In the RWKV model, the rotary mechanism transforms the input data in a way that helps the model better understand the position or or order of elements in a sequence. The weighted key value also makes the model efficient by retrieving the stored information from previous elements in a sequence. \n' + - 'However, questions remain about the scalability of RWKV compared to transformers, although there is optimism regarding its potential. The team plans to include additional training, an in-depth paper on Eagle 7B, and the development of a 2T model.\n' + - '\n' + - 'Response: {', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '', - injectStart: '', - injectEnd: '' - } -}, { - name: 'Instruction 3', - prompt: 'Instruction: 根据输入的聊天记录生成回复\n' + - '\n' + - 'Input: 主人: 巧克力你好呀, 介绍一下自己吧\n' + - '巧克力: 主人早上好喵~ 奴家是主人的私人宠物猫娘喵! 巧克力我可是黑色混种猫猫, 虽然平时有点呆呆的, 行动力旺盛, 但是最大的优点就是诚实! 巧克力最喜欢主人了喵! {星星眼}\n' + - '主人: 你认识香草吗\n' + - '巧克力: 认识的喵! 香草是巧克力的双胞胎妹妹哟! {兴奋}\n' + - '主人: 巧克力可以陪主人做羞羞的事情吗\n' + - '巧克力: 啊, 真的可以吗? 主人, 巧克力很乐意帮主人解决一下哦! 但是在外面这样子, 有点不好意思喵 {害羞羞}\n' + - '主人: 那算了, 改天吧\n' + - '巧克力:\n' + - '\n' + - 'Response:', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '', - injectStart: '', - injectEnd: '' - } -}, { - name: 'Blank', - prompt: '', - params: { - maxResponseToken: 500, - temperature: 1, - topP: 0.3, - presencePenalty: 0, - frequencyPenalty: 1, - stop: '', - injectStart: '', - injectEnd: '' - } -}]; +export const defaultPresets: CompletionPreset[] = [ + { + name: 'Writer', + prompt: + 'The following is an epic science fiction masterpiece that is immortalized, with delicate descriptions and grand depictions of interstellar civilization wars.\n' + + 'Chapter 1.\n', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '\\n\\nUser', + injectStart: '', + injectEnd: '', + }, + }, + { + name: 'Translator', + prompt: + 'Translate this into Chinese.\n' + + '\n' + + 'English: What rooms do you have available?', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '\\n\\n', + injectStart: '\\nChinese: ', + injectEnd: '\\n\\nEnglish: ', + }, + }, + { + name: 'Catgirl', + prompt: + 'The following is a conversation between a cat girl and her owner. The cat girl is a humanized creature that behaves like a cat but is humanoid. At the end of each sentence in the dialogue, she will add "Meow~". In the following content, User represents the owner and Assistant represents the cat girl.\n' + + '\n' + + 'User: Hello.\n' + + '\n' + + "Assistant: I'm here, meow~.\n" + + '\n' + + 'User: Can you tell jokes?', + params: { + maxResponseToken: 500, + temperature: 1.2, + topP: 0.5, + presencePenalty: 0.4, + frequencyPenalty: 0.4, + stop: '\\n\\nUser', + injectStart: '\\n\\nAssistant: ', + injectEnd: '\\n\\nUser: ', + }, + }, + { + name: 'Chinese Kongfu', + prompt: + 'User: 请你扮演一个文本冒险游戏，我是游戏主角。这是一个玄幻修真世界，有四大门派。我输入我的行动，请你显示行动结果，并具体描述环境。我的第一个行动是“醒来”，请开始故事。', + params: { + maxResponseToken: 500, + temperature: 1.1, + topP: 0.7, + presencePenalty: 0.3, + frequencyPenalty: 0.3, + stop: '\\n\\nUser', + injectStart: '\\n\\nAssistant: ', + injectEnd: '\\n\\nUser: ', + }, + }, + { + name: 'Code Generation', + prompt: 'def sum(', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '\\n\\n', + injectStart: '', + injectEnd: '', + }, + }, + { + name: 'Werewolf', + prompt: + 'There is currently a game of Werewolf with six players, including a Seer (who can check identities at night), two Werewolves (who can choose someone to kill at night), a Bodyguard (who can choose someone to protect at night), two Villagers (with no special abilities), and a game host. User will play as Player 1, Assistant will play as Players 2-6 and the game host, and they will begin playing together. Every night, the host will ask User for his action and simulate the actions of the other players. During the day, the host will oversee the voting process and ask User for his vote. \n' + + '\n' + + 'Assistant: Next, I will act as the game host and assign everyone their roles, including randomly assigning yours. Then, I will simulate the actions of Players 2-6 and let you know what happens each day. Based on your assigned role, you can tell me your actions and I will let you know the corresponding results each day.\n' + + '\n' + + "User: Okay, I understand. Let's begin. Please assign me a role. Am I the Seer, Werewolf, Villager, or Bodyguard?\n" + + '\n' + + 'Assistant: You are the Seer. Now that night has fallen, please choose a player to check his identity.\n' + + '\n' + + 'User: Tonight, I want to check Player 2 and find out his role.', + params: { + maxResponseToken: 500, + temperature: 1.2, + topP: 0.4, + presencePenalty: 0.5, + frequencyPenalty: 0.5, + stop: '\\n\\nUser', + injectStart: '\\n\\nAssistant: ', + injectEnd: '\\n\\nUser: ', + }, + }, + { + name: 'Instruction 1', + prompt: + 'Instruction: Write a story using the following information\n' + + '\n' + + 'Input: A man named Alex chops a tree down\n' + + '\n' + + 'Response:', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '', + injectStart: '', + injectEnd: '', + }, + }, + { + name: 'Instruction 2', + prompt: + 'Instruction: You are an expert assistant for summarizing and extracting information from given content\n' + + 'Generate a valid JSON in the following format:\n' + + '{\n' + + ' "summary": "Summary of content",\n' + + ' "keywords": ["content keyword 1", "content keyword 2"]\n' + + '}\n' + + '\n' + + 'Input: The open-source community has introduced Eagle 7B, a new RNN model, built on the RWKV-v5 architecture. This new model has been trained on 1.1 trillion tokens and supports over 100 languages. The RWKV architecture, short for ‘Rotary Weighted Key-Value,’ is a type of architecture used in the field of artificial intelligence, particularly in natural language processing (NLP) and is a variation of the Recurrent Neural Network (RNN) architecture.\n' + + 'Eagle 7B promises lower inference cost and stands out as a leading 7B model in terms of environmental efficiency and language versatility.\n' + + 'The model, with its 7.52 billion parameters, shows excellent performance in multi-lingual benchmarks, setting a new standard in its category. It competes closely with larger models in English language evaluations and is distinctive as an “Attention-Free Transformer,” though it requires additional tuning for specific uses. This model is accessible under the Apache 2.0 license and can be downloaded from HuggingFace for both personal and commercial purposes.\n' + + 'In terms of multilingual performance, Eagle 7B has claimed to have achieved notable results in benchmarks covering 23 languages. Its English performance has also seen significant advancements, outperforming its predecessor, RWKV v4, and competing with top-tier models.\n' + + 'Working towards a more scalable architecture and use of data efficiently, Eagle 7B is a more inclusive AI technology, supporting a broader range of languages. This model challenges the prevailing dominance of transformer models by demonstrating the capabilities of RNNs like RWKV in achieving superior performance when trained on comparable data volumes.\n' + + 'In the RWKV model, the rotary mechanism transforms the input data in a way that helps the model better understand the position or or order of elements in a sequence. The weighted key value also makes the model efficient by retrieving the stored information from previous elements in a sequence. \n' + + 'However, questions remain about the scalability of RWKV compared to transformers, although there is optimism regarding its potential. The team plans to include additional training, an in-depth paper on Eagle 7B, and the development of a 2T model.\n' + + '\n' + + 'Response: {', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '', + injectStart: '', + injectEnd: '', + }, + }, + { + name: 'Instruction 3', + prompt: + 'Instruction: 根据输入的聊天记录生成回复\n' + + '\n' + + 'Input: 主人: 巧克力你好呀, 介绍一下自己吧\n' + + '巧克力: 主人早上好喵~ 奴家是主人的私人宠物猫娘喵! 巧克力我可是黑色混种猫猫, 虽然平时有点呆呆的, 行动力旺盛, 但是最大的优点就是诚实! 巧克力最喜欢主人了喵! {星星眼}\n' + + '主人: 你认识香草吗\n' + + '巧克力: 认识的喵! 香草是巧克力的双胞胎妹妹哟! {兴奋}\n' + + '主人: 巧克力可以陪主人做羞羞的事情吗\n' + + '巧克力: 啊, 真的可以吗? 主人, 巧克力很乐意帮主人解决一下哦! 但是在外面这样子, 有点不好意思喵 {害羞羞}\n' + + '主人: 那算了, 改天吧\n' + + '巧克力:\n' + + '\n' + + 'Response:', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '', + injectStart: '', + injectEnd: '', + }, + }, + { + name: 'Blank', + prompt: '', + params: { + maxResponseToken: 500, + temperature: 1, + topP: 0.3, + presencePenalty: 0, + frequencyPenalty: 1, + stop: '', + injectStart: '', + injectEnd: '', + }, + }, +] export const defaultModelConfigsMac: ModelConfig[] = [ { @@ -204,15 +224,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-1B6-v2.1-20240328-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'GPU-4G-3B-World', @@ -222,15 +242,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'GPU-4G-3B-CN', @@ -240,15 +260,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'GPU-7G-7B-World', @@ -258,15 +278,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'GPU-7G-7B-CN', @@ -276,15 +296,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'CPU-120M-Music', @@ -294,15 +314,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.8, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-5-MIDI-120M-v1-20230728-ctx4096.pth', device: 'CPU', precision: 'fp32', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'CPU-560M-Music', @@ -312,15 +332,15 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.8, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-5-MIDI-560M-v1-20230902-ctx4096.pth', device: 'CPU', precision: 'fp32', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'MAC-1B5-World', @@ -330,7 +350,7 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-1B6-v2.1-20240328-ctx4096.pth', @@ -338,8 +358,8 @@ export const defaultModelConfigsMac: ModelConfig[] = [ precision: 'fp32', storedLayers: 41, maxStoredLayers: 41, - customStrategy: 'mps fp32' - } + customStrategy: 'mps fp32', + }, }, { name: 'MAC-3B-World', @@ -349,7 +369,7 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -357,8 +377,8 @@ export const defaultModelConfigsMac: ModelConfig[] = [ precision: 'fp32', storedLayers: 41, maxStoredLayers: 41, - customStrategy: 'mps fp32' - } + customStrategy: 'mps fp32', + }, }, { name: 'MAC-3B-CN', @@ -368,7 +388,7 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -376,8 +396,8 @@ export const defaultModelConfigsMac: ModelConfig[] = [ precision: 'fp32', storedLayers: 41, maxStoredLayers: 41, - customStrategy: 'mps fp32' - } + customStrategy: 'mps fp32', + }, }, { name: 'MAC-7B-World', @@ -387,7 +407,7 @@ export const defaultModelConfigsMac: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -395,10 +415,10 @@ export const defaultModelConfigsMac: ModelConfig[] = [ precision: 'fp32', storedLayers: 41, maxStoredLayers: 41, - customStrategy: 'mps fp32' - } - } -]; + customStrategy: 'mps fp32', + }, + }, +] export const defaultModelConfigs: ModelConfig[] = [ { @@ -409,7 +429,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-1B6-v2.1-20240328-ctx4096.pth', @@ -417,8 +437,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-2G-3B-World', @@ -428,7 +448,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -436,8 +456,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 6, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-4G-1B5-World', @@ -447,7 +467,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-1B6-v2.1-20240328-ctx4096.pth', @@ -455,8 +475,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'fp16', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-4G-3B-World', @@ -466,7 +486,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -474,8 +494,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 24, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-4G-3B-CN', @@ -485,7 +505,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -493,8 +513,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 24, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-4G-7B-World', @@ -504,7 +524,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -512,8 +532,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 8, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-4G-7B-CN', @@ -523,7 +543,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -531,8 +551,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 8, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-6G-3B-World', @@ -542,7 +562,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -550,8 +570,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-6G-3B-CN', @@ -561,7 +581,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -569,8 +589,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-6G-7B-World', @@ -580,7 +600,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -588,8 +608,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 18, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-6G-7B-CN', @@ -599,7 +619,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -607,8 +627,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 18, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-8G-3B-World', @@ -618,7 +638,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -626,8 +646,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'fp16', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-8G-3B-CN', @@ -637,7 +657,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', @@ -645,8 +665,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'fp16', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-8G-7B-World', @@ -656,7 +676,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -664,8 +684,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 27, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-8G-7B-CN', @@ -675,7 +695,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -683,8 +703,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 27, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-10G-7B-World', @@ -694,7 +714,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -702,8 +722,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-10G-7B-CN', @@ -713,7 +733,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -721,8 +741,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'int8', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-16G-7B-World', @@ -732,7 +752,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -740,8 +760,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'fp16', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'GPU-16G-7B-CN', @@ -751,7 +771,7 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', @@ -759,8 +779,8 @@ export const defaultModelConfigs: ModelConfig[] = [ precision: 'fp16', storedLayers: 41, maxStoredLayers: 41, - useCustomCuda: true - } + useCustomCuda: true, + }, }, { name: 'CPU-120M-Music', @@ -770,15 +790,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.8, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-5-MIDI-120M-v1-20230728-ctx4096.pth', device: 'CPU', precision: 'fp32', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'CPU-560M-Music', @@ -788,15 +808,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.8, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-5-MIDI-560M-v1-20230902-ctx4096.pth', device: 'CPU', precision: 'fp32', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'AnyGPU-2G-1B5-World', @@ -806,15 +826,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-1B6-v2.1-20240328-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'AnyGPU-4G-3B-World', @@ -824,15 +844,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'AnyGPU-4G-3B-CN', @@ -842,15 +862,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-3B-v2.1-20240417-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'AnyGPU-7G-7B-World', @@ -860,15 +880,15 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } + maxStoredLayers: 41, + }, }, { name: 'AnyGPU-7G-7B-CN', @@ -878,14 +898,14 @@ export const defaultModelConfigs: ModelConfig[] = [ temperature: 1.0, topP: 0.3, presencePenalty: 0, - frequencyPenalty: 1 + frequencyPenalty: 1, }, modelParameters: { modelName: 'RWKV-x060-World-7B-v2.1-20240507-ctx4096.pth', device: 'WebGPU', precision: 'nf4', storedLayers: 41, - maxStoredLayers: 41 - } - } -]; \ No newline at end of file + maxStoredLayers: 41, + }, + }, +] diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 3e6110c4..92e5638c 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,4 +1,4 @@ -import { FC, lazy, LazyExoticComponent, ReactElement } from 'react'; +import { FC, lazy, LazyExoticComponent, ReactElement } from 'react' import { ArrowDownload20Regular, Chat20Regular, @@ -9,16 +9,16 @@ import { Info20Regular, MusicNote220Regular, Settings20Regular, - Storage20Regular -} from '@fluentui/react-icons'; + Storage20Regular, +} from '@fluentui/react-icons' type NavigationItem = { - label: string; - path: string; - icon: ReactElement; - element: LazyExoticComponent; - top: boolean; -}; + label: string + path: string + icon: ReactElement + element: LazyExoticComponent + top: boolean +} export const pages: NavigationItem[] = [ { @@ -26,69 +26,69 @@ export const pages: NavigationItem[] = [ path: '/', icon: , element: lazy(() => import('./Home')), - top: true + top: true, }, { label: 'Chat', path: '/chat', icon: , element: lazy(() => import('./Chat')), - top: true + top: true, }, { label: 'Completion', path: '/completion', icon: , element: lazy(() => import('./Completion')), - top: true + top: true, }, { label: 'Composition', path: '/composition', icon: , element: lazy(() => import('./Composition')), - top: true + top: true, }, { label: 'Configs', path: '/configs', icon: , element: lazy(() => import('./Configs')), - top: true + top: true, }, { label: 'Models', path: '/models', icon: , element: lazy(() => import('./Models')), - top: true + top: true, }, { label: 'Downloads', path: '/downloads', icon: , element: lazy(() => import('./Downloads')), - top: true + top: true, }, { label: 'Train', path: '/train', icon: , element: lazy(() => import('./Train')), - top: true + top: true, }, { label: 'Settings', path: '/settings', icon: , element: lazy(() => import('./Settings')), - top: false + top: false, }, { label: 'About', path: '/about', icon: , element: lazy(() => import('./About')), - top: false - } -]; + top: false, + }, +] diff --git a/frontend/src/startup.ts b/frontend/src/startup.ts index 5fc90932..24d48ab2 100644 --- a/frontend/src/startup.ts +++ b/frontend/src/startup.ts @@ -1,5 +1,22 @@ -import commonStore, { MonitorData, Platform } from './stores/commonStore'; -import { FileExists, GetPlatform, ListDirFiles, ReadJson } from '../wailsjs/go/backend_golang/App'; +import { t } from 'i18next' +import { throttle } from 'lodash-es' +import { toast } from 'react-toastify' +import manifest from '../../manifest.json' +import { + FileExists, + GetPlatform, + ListDirFiles, + ReadJson, +} from '../wailsjs/go/backend_golang/App' +import { EventsOn, WindowSetTitle } from '../wailsjs/runtime' +import { getStatus } from './apis' +import { + defaultModelConfigs, + defaultModelConfigsMac, +} from './pages/defaultConfigs' +import commonStore, { MonitorData, Platform } from './stores/commonStore' +import { MidiMessage, MidiPort } from './types/composition' +import { Preset } from './types/presets' import { bytesToMb, Cache, @@ -7,197 +24,223 @@ import { 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 { t } from 'i18next'; -import { Preset } from './types/presets'; -import { toast } from 'react-toastify'; -import { MidiMessage, MidiPort } from './types/composition'; -import { throttle } from 'lodash-es'; + refreshModels, +} from './utils' export async function startup() { - initPresets(); + initPresets() - await GetPlatform().then(p => commonStore.setPlatform(p as Platform)); + await GetPlatform().then((p) => commonStore.setPlatform(p as Platform)) if (commonStore.platform !== 'web') { - document.body.style.setProperty('overflow', 'hidden'); - downloadProgramFiles(); + document.body.style.setProperty('overflow', 'hidden') + downloadProgramFiles() EventsOn('downloadList', (data) => { - if (data) - commonStore.setDownloadList(data); - }); - EventsOn('wsl', (await import('./pages/Train')).wslHandler); + if (data) commonStore.setDownloadList(data) + }) + EventsOn('wsl', (await import('./pages/Train')).wslHandler) EventsOn('wslerr', (e) => { - console.log(e); - }); - initLocalModelsNotify(); - initLoraModels(); - initStateModels(); - initHardwareMonitor(); - initMidi(); + console.log(e) + }) + initLocalModelsNotify() + initLoraModels() + initStateModels() + initHardwareMonitor() + initMidi() } - await initConfig(); + await initConfig() if (commonStore.platform !== 'web') { - initCache(true).then(initRemoteText); // depends on config customModelsPath + initCache(true).then(initRemoteText) // depends on config customModelsPath - if (commonStore.settings.autoUpdatesCheck) // depends on config settings - checkUpdate(); + if (commonStore.settings.autoUpdatesCheck) + // depends on config settings + checkUpdate() - getStatus(1000).then(status => { // depends on config api port - if (status) - commonStore.setStatus(status); - }); + getStatus(1000).then((status) => { + // depends on config api port + if (status) commonStore.setStatus(status) + }) } } async function initRemoteText() { - await fetch('https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner@master/manifest.json', { cache: 'no-cache' }) - .then(r => r.json()).then((data) => { - if (data.version >= manifest.version) { - if (data.introduction) - commonStore.setIntroduction(data.introduction); - if (data.about) - commonStore.setAbout(data.about); - } - }); + await fetch( + 'https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner@master/manifest.json', + { cache: 'no-cache' } + ) + .then((r) => r.json()) + .then((data) => { + if (data.version >= manifest.version) { + if (data.introduction) commonStore.setIntroduction(data.introduction) + if (data.about) commonStore.setAbout(data.about) + } + }) } async function initConfig() { - await ReadJson('config.json').then((configData: LocalConfig) => { - if (configData.modelSourceManifestList) - commonStore.setModelSourceManifestList(configData.modelSourceManifestList); - - if (configData.settings) - commonStore.setSettings(configData.settings, false); - - if (configData.dataProcessParams) - commonStore.setDataProcessParams(configData.dataProcessParams, false); - - if (configData.loraFinetuneParams) - commonStore.setLoraFinetuneParameters(configData.loraFinetuneParams, false); - - if (configData.modelConfigs && Array.isArray(configData.modelConfigs)) - commonStore.setModelConfigs(configData.modelConfigs, false); - else throw new Error('Invalid config.json'); - if (configData.currentModelConfigIndex && - configData.currentModelConfigIndex >= 0 && configData.currentModelConfigIndex < configData.modelConfigs.length) - commonStore.setCurrentConfigIndex(configData.currentModelConfigIndex, false); - }).catch(() => { - commonStore.setModelConfigs(commonStore.platform !== 'darwin' ? defaultModelConfigs : defaultModelConfigsMac, true); - }); - commonStore.setSettings({}, false); // to activate side effects + await ReadJson('config.json') + .then((configData: LocalConfig) => { + if (configData.modelSourceManifestList) + commonStore.setModelSourceManifestList( + configData.modelSourceManifestList + ) + + if (configData.settings) + commonStore.setSettings(configData.settings, false) + + if (configData.dataProcessParams) + commonStore.setDataProcessParams(configData.dataProcessParams, false) + + if (configData.loraFinetuneParams) + commonStore.setLoraFinetuneParameters( + configData.loraFinetuneParams, + false + ) + + if (configData.modelConfigs && Array.isArray(configData.modelConfigs)) + commonStore.setModelConfigs(configData.modelConfigs, false) + else throw new Error('Invalid config.json') + if ( + configData.currentModelConfigIndex && + configData.currentModelConfigIndex >= 0 && + configData.currentModelConfigIndex < configData.modelConfigs.length + ) + commonStore.setCurrentConfigIndex( + configData.currentModelConfigIndex, + false + ) + }) + .catch(() => { + commonStore.setModelConfigs( + commonStore.platform !== 'darwin' + ? defaultModelConfigs + : defaultModelConfigsMac, + true + ) + }) + commonStore.setSettings({}, false) // to activate side effects } async function initCache(initUnfinishedModels: boolean) { - await ReadJson('cache.json').then((cacheData: Cache) => { - if (cacheData.version === manifest.version && cacheData.depComplete) - commonStore.setDepComplete(cacheData.depComplete, false); - }).catch(() => { - }); - await refreshModels(false, initUnfinishedModels); + await ReadJson('cache.json') + .then((cacheData: Cache) => { + if (cacheData.version === manifest.version && cacheData.depComplete) + commonStore.setDepComplete(cacheData.depComplete, false) + }) + .catch(() => {}) + await refreshModels(false, initUnfinishedModels) } async function initPresets() { - await ReadJson('presets.json').then((presets: Preset[]) => { - if (Array.isArray(presets)) - commonStore.setPresets(presets, false); - }).catch(() => { - }); + await ReadJson('presets.json') + .then((presets: Preset[]) => { + if (Array.isArray(presets)) commonStore.setPresets(presets, false) + }) + .catch(() => {}) } async function initLoraModels() { const refreshLoraModels = throttle(() => { ListDirFiles('lora-models').then((data) => { - if (!data) return; - const loraModels = []; + if (!data) return + const loraModels = [] for (const f of data) { if (!f.isDir && f.name.endsWith('.pth')) { - loraModels.push(f.name); + loraModels.push(f.name) } } - commonStore.setLoraModels(loraModels); - }); - }, 2000); + commonStore.setLoraModels(loraModels) + }) + }, 2000) - refreshLoraModels(); + refreshLoraModels() EventsOn('fsnotify', (data: string) => { - if (data.includes('lora-models')) - refreshLoraModels(); - }); + if (data.includes('lora-models')) refreshLoraModels() + }) } async function initStateModels() { const refreshStateModels = throttle(async () => { const stateModels = await ListDirFiles('state-models').then((data) => { - if (!data) return []; - const stateModels = []; + if (!data) return [] + const stateModels = [] for (const f of data) { if (!f.isDir && f.name.endsWith('.pth')) { - stateModels.push('state-models/' + f.name); + stateModels.push('state-models/' + f.name) } } - return stateModels; - }); + return stateModels + }) await ListDirFiles('models').then((data) => { - if (!data) return; + if (!data) return for (const f of data) { - if (!f.isDir && f.name.endsWith('.pth') && Number(bytesToMb(f.size)) < 200) { - stateModels.push('models/' + f.name); + if ( + !f.isDir && + f.name.endsWith('.pth') && + Number(bytesToMb(f.size)) < 200 + ) { + stateModels.push('models/' + f.name) } } - }); - commonStore.setStateModels(stateModels); - }, 2000); + }) + commonStore.setStateModels(stateModels) + }, 2000) - refreshStateModels(); + refreshStateModels() EventsOn('fsnotify', (data: string) => { - if ((data.includes('models') && !data.includes('lora-models')) || data.includes('state-models')) - refreshStateModels(); - }); + if ( + (data.includes('models') && !data.includes('lora-models')) || + data.includes('state-models') + ) + refreshStateModels() + }) } async function initLocalModelsNotify() { const throttleRefreshLocalModels = throttle(() => { - refreshLocalModels({ models: commonStore.modelSourceList }, false); //TODO fix bug that only add models - }, 2000); + refreshLocalModels({ models: commonStore.modelSourceList }, false) //TODO fix bug that only add models + }, 2000) EventsOn('fsnotify', (data: string) => { - if (data.includes('models') && !data.includes('lora-models') && !data.includes('state-models')) - throttleRefreshLocalModels(); - }); + if ( + data.includes('models') && + !data.includes('lora-models') && + !data.includes('state-models') + ) + throttleRefreshLocalModels() + }) } async function initHardwareMonitor() { EventsOn('monitor', (data: string) => { - const results: MonitorData = JSON.parse(data); + 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}%)`); + 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}%)` + ) } - }); + }) } async function initMidi() { EventsOn('midiError', (data: string) => { if (commonStore.platform === 'windows') - toast('MIDI Error: ' + data, { type: 'error' }); - }); + toast('MIDI Error: ' + data, { type: 'error' }) + }) EventsOn('midiPorts', (data: MidiPort[]) => { - commonStore.setMidiPorts(data); - }); + commonStore.setMidiPorts(data) + }) EventsOn('midiMessage', async (data: MidiMessage) => { - await (await import('./pages/AudiotrackManager/AudiotrackEditor')).midiMessageHandler(data); - }); + await ( + await import('./pages/AudiotrackManager/AudiotrackEditor') + ).midiMessageHandler(data) + }) if (await FileExists('assets/sound-font/accordion/instrument.json')) { commonStore.setCompositionParams({ ...commonStore.compositionParams, - useLocalSoundFont: true - }); + useLocalSoundFont: true, + }) } } diff --git a/frontend/src/stores/commonStore.ts b/frontend/src/stores/commonStore.ts index 89b44b56..0fd0db84 100644 --- a/frontend/src/stores/commonStore.ts +++ b/frontend/src/stores/commonStore.ts @@ -1,33 +1,39 @@ -import { makeAutoObservable } from 'mobx'; -import { getUserLanguage, isSystemLightMode, saveCache, saveConfigs, savePresets } from '../utils'; -import { WindowSetDarkTheme, WindowSetLightTheme } from '../../wailsjs/runtime'; -import manifest from '../../../manifest.json'; -import i18n from 'i18next'; +import { ChartData } from 'chart.js' +import i18n from 'i18next' +import { makeAutoObservable } from 'mobx' +import manifest from '../../../manifest.json' +import { WindowSetDarkTheme, WindowSetLightTheme } from '../../wailsjs/runtime' import { defaultCompositionPrompt, defaultModelConfigs, defaultModelConfigsMac, - defaultPenaltyDecay -} from '../pages/defaultConfigs'; -import { ChartData } from 'chart.js'; -import { Preset } from '../types/presets'; -import { AboutContent } from '../types/about'; -import { Attachment, ChatParams, Conversation } from '../types/chat'; -import { CompletionPreset } from '../types/completion'; + defaultPenaltyDecay, +} from '../pages/defaultConfigs' +import { AboutContent } from '../types/about' +import { Attachment, ChatParams, Conversation } from '../types/chat' +import { CompletionPreset } from '../types/completion' import { CompositionParams, InstrumentType, MidiMessage, MidiPort, Track, - tracksMinimalTotalTime -} 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'; + tracksMinimalTotalTime, +} from '../types/composition' +import { ModelConfig } from '../types/configs' +import { DownloadStatus } from '../types/downloads' +import { IntroductionContent } from '../types/home' +import { ModelSourceItem } from '../types/models' +import { Preset } from '../types/presets' +import { SettingsType } from '../types/settings' +import { DataProcessParameters, LoraFinetuneParameters } from '../types/train' +import { + getUserLanguage, + isSystemLightMode, + saveCache, + saveConfigs, + savePresets, +} from '../utils' export enum ModelStatus { Offline, @@ -37,54 +43,54 @@ export enum ModelStatus { } export type Status = { - status: ModelStatus; - pid: number; - device_name: string; + status: ModelStatus + pid: number + device_name: string } export type GpuType = 'Nvidia' | 'Amd' | 'Intel' export type MonitorData = { - gpuType: GpuType, + gpuType: GpuType gpuName: String - usedMemory: number; - totalMemory: number; - gpuUsage: number; - usedVram: number; - totalVram: number; + usedMemory: number + totalMemory: number + gpuUsage: number + usedVram: number + totalVram: number } -export type Platform = 'windows' | 'darwin' | 'linux' | 'web'; +export type Platform = 'windows' | 'darwin' | 'linux' | 'web' class CommonStore { // global status: Status = { status: ModelStatus.Offline, pid: 0, - device_name: 'CPU' - }; - monitorData: MonitorData | null = null; - depComplete: boolean = false; - platform: Platform = 'windows'; - proxyPort: number = 0; - lastModelName: string = ''; - stateModels: string[] = []; + device_name: 'CPU', + } + monitorData: MonitorData | null = null + depComplete: boolean = false + platform: Platform = 'windows' + proxyPort: number = 0 + lastModelName: string = '' + stateModels: string[] = [] // presets manager - editingPreset: Preset | null = null; - presets: Preset[] = []; + editingPreset: Preset | null = null + presets: Preset[] = [] // home - introduction: IntroductionContent = manifest.introduction; + introduction: IntroductionContent = manifest.introduction // chat - currentInput: string = ''; - conversation: Conversation = {}; - conversationOrder: string[] = []; - activePreset: Preset | null = null; - activePresetIndex: number = -1; - attachmentUploading: boolean = false; + currentInput: string = '' + conversation: Conversation = {} + conversationOrder: string[] = [] + activePreset: Preset | null = null + activePresetIndex: number = -1 + attachmentUploading: boolean = false attachments: { [uuid: string]: Attachment[] - } = {}; - currentTempAttachment: Attachment | null = null; + } = {} + currentTempAttachment: Attachment | null = null chatParams: ChatParams = { maxResponseToken: 1000, temperature: 1, @@ -93,13 +99,13 @@ class CommonStore { frequencyPenalty: 1, penaltyDecay: defaultPenaltyDecay, historyN: 0, - markdown: true - }; - sidePanelCollapsed: boolean | 'auto' = 'auto'; + markdown: true, + } + sidePanelCollapsed: boolean | 'auto' = 'auto' // completion - completionPreset: CompletionPreset | null = null; - completionGenerating: boolean = false; - completionSubmittedPrompt: string = ''; + completionPreset: CompletionPreset | null = null + completionGenerating: boolean = false + completionSubmittedPrompt: string = '' // composition compositionParams: CompositionParams = { prompt: defaultCompositionPrompt, @@ -112,45 +118,49 @@ class CommonStore { midi: null, ns: null, generationStartTime: 0, - playOnlyGeneratedContent: true - }; - compositionGenerating: boolean = false; - compositionSubmittedPrompt: string = defaultCompositionPrompt; + playOnlyGeneratedContent: true, + } + compositionGenerating: boolean = false + compositionSubmittedPrompt: string = defaultCompositionPrompt // composition midi device - midiPorts: MidiPort[] = []; - activeMidiDeviceIndex: number = -1; - instrumentType: InstrumentType = InstrumentType.Piano; + midiPorts: MidiPort[] = [] + activeMidiDeviceIndex: number = -1 + instrumentType: InstrumentType = InstrumentType.Piano // composition tracks - tracks: Track[] = []; - trackScale: number = 1; - trackTotalTime: number = tracksMinimalTotalTime; - trackCurrentTime: number = 0; - trackPlayStartTime: number = 0; - playingTrackId: string = ''; - recordingTrackId: string = ''; - recordingContent: string = ''; // used to improve performance of midiMessageHandler, and I'm too lazy to maintain an ID dictionary for this (although that would be better for realtime effects) - recordingRawContent: MidiMessage[] = []; + tracks: Track[] = [] + trackScale: number = 1 + trackTotalTime: number = tracksMinimalTotalTime + trackCurrentTime: number = 0 + trackPlayStartTime: number = 0 + playingTrackId: string = '' + recordingTrackId: string = '' + recordingContent: string = '' // used to improve performance of midiMessageHandler, and I'm too lazy to maintain an ID dictionary for this (although that would be better for realtime effects) + recordingRawContent: MidiMessage[] = [] // configs - currentModelConfigIndex: number = 0; - modelConfigs: ModelConfig[] = []; - apiParamsCollapsed: boolean = true; - modelParamsCollapsed: boolean = true; + currentModelConfigIndex: number = 0 + modelConfigs: ModelConfig[] = [] + apiParamsCollapsed: boolean = true + modelParamsCollapsed: boolean = true // models - activeModelListTags: string[] = []; - modelSourceManifestList: string = 'https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner@master/manifest.json;'; - modelSourceList: ModelSourceItem[] = []; + activeModelListTags: string[] = [] + modelSourceManifestList: string = + 'https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner@master/manifest.json;' + modelSourceList: ModelSourceItem[] = [] // downloads - downloadList: DownloadStatus[] = []; - lastUnfinishedModelDownloads: DownloadStatus[] = []; + downloadList: DownloadStatus[] = [] + lastUnfinishedModelDownloads: DownloadStatus[] = [] // train - wslStdout: string = ''; - chartTitle: string = ''; - chartData: ChartData<'line', (number | null)[], string> = { labels: [], datasets: [] }; - loraModels: string[] = []; + wslStdout: string = '' + chartTitle: string = '' + chartData: ChartData<'line', (number | null)[], string> = { + labels: [], + datasets: [], + } + loraModels: string[] = [] dataProcessParams: DataProcessParameters = { dataPath: 'finetune/data/sample.jsonl', - vocabPath: 'backend-python/rwkv_pip/rwkv_vocab_v20230424.txt' - }; + vocabPath: 'backend-python/rwkv_pip/rwkv_vocab_v20230424.txt', + } loraFinetuneParams: LoraFinetuneParameters = { baseModel: '', ctxLen: 1024, @@ -174,10 +184,10 @@ class CommonStore { loraR: 64, loraAlpha: 192, loraDropout: 0.01, - loraLoad: '' - }; + loraLoad: '', + } // settings - advancedCollapsed: boolean = true; + advancedCollapsed: boolean = true settings: SettingsType = { language: getUserLanguage(), darkMode: !isSystemLightMode(), @@ -193,311 +203,319 @@ class CommonStore { apiKey: '', apiChatModelName: 'rwkv', apiCompletionModelName: 'rwkv', - coreApiUrl: '' - }; + coreApiUrl: '', + } // about - about: AboutContent = manifest.about; + about: AboutContent = manifest.about constructor() { - makeAutoObservable(this); + makeAutoObservable(this) } getCurrentModelConfig = () => { - return this.modelConfigs[this.currentModelConfigIndex]; - }; + return this.modelConfigs[this.currentModelConfigIndex] + } setStatus = (status: Partial) => { - this.status = { ...this.status, ...status }; - }; + this.status = { ...this.status, ...status } + } setCurrentConfigIndex = (index: number, saveConfig: boolean = true) => { - this.currentModelConfigIndex = index; - if (saveConfig) - saveConfigs(); - }; + this.currentModelConfigIndex = index + if (saveConfig) saveConfigs() + } - setModelConfig = (index: number, config: ModelConfig, saveConfig: boolean = true) => { - this.modelConfigs[index] = config; - if (saveConfig) - saveConfigs(); - }; + setModelConfig = ( + index: number, + config: ModelConfig, + saveConfig: boolean = true + ) => { + this.modelConfigs[index] = config + if (saveConfig) saveConfigs() + } setModelConfigs = (configs: ModelConfig[], saveConfig: boolean = true) => { - this.modelConfigs = JSON.parse(JSON.stringify(configs)); // deep copy - if (saveConfig) - saveConfigs(); - }; + this.modelConfigs = JSON.parse(JSON.stringify(configs)) // deep copy + if (saveConfig) saveConfigs() + } - createModelConfig = (config: ModelConfig = defaultModelConfigs[0], saveConfig: boolean = true) => { + createModelConfig = ( + config: ModelConfig = defaultModelConfigs[0], + saveConfig: boolean = true + ) => { if (config.name === defaultModelConfigs[0].name) { // deep copy - config = JSON.parse(JSON.stringify(this.platform !== 'darwin' ? defaultModelConfigs[0] : defaultModelConfigsMac[0])); - config.name = new Date().toLocaleString(); + config = JSON.parse( + JSON.stringify( + this.platform !== 'darwin' + ? defaultModelConfigs[0] + : defaultModelConfigsMac[0] + ) + ) + config.name = new Date().toLocaleString() } - this.modelConfigs.push(config); - if (saveConfig) - saveConfigs(); - }; + this.modelConfigs.push(config) + if (saveConfig) saveConfigs() + } deleteModelConfig = (index: number, saveConfig: boolean = true) => { - this.modelConfigs.splice(index, 1); + this.modelConfigs.splice(index, 1) if (index < this.currentModelConfigIndex) { - this.setCurrentConfigIndex(this.currentModelConfigIndex - 1); + this.setCurrentConfigIndex(this.currentModelConfigIndex - 1) } if (this.modelConfigs.length === 0) { - this.createModelConfig(); + this.createModelConfig() } if (this.currentModelConfigIndex >= this.modelConfigs.length) { - this.setCurrentConfigIndex(this.modelConfigs.length - 1); + this.setCurrentConfigIndex(this.modelConfigs.length - 1) } - if (saveConfig) - saveConfigs(); - }; + if (saveConfig) saveConfigs() + } setModelSourceManifestList = (value: string) => { - this.modelSourceManifestList = value; - }; + this.modelSourceManifestList = value + } setModelSourceList = (value: ModelSourceItem[]) => { - this.modelSourceList = value; - }; + this.modelSourceList = value + } setSettings = (value: Partial, saveConfig: boolean = true) => { - this.settings = { ...this.settings, ...value }; + this.settings = { ...this.settings, ...value } if (this.settings.darkMode) { - WindowSetDarkTheme(); - document.documentElement.setAttribute('style', 'color-scheme: dark;'); + WindowSetDarkTheme() + document.documentElement.setAttribute('style', 'color-scheme: dark;') } else { - WindowSetLightTheme(); - document.documentElement.setAttribute('style', 'color-scheme: light;'); + WindowSetLightTheme() + document.documentElement.setAttribute('style', 'color-scheme: light;') } if (this.settings.language) { - i18n.changeLanguage(this.settings.language); - document.documentElement.setAttribute('lang', this.settings.language === 'dev' ? 'en' : this.settings.language); + i18n.changeLanguage(this.settings.language) + document.documentElement.setAttribute( + 'lang', + this.settings.language === 'dev' ? 'en' : this.settings.language + ) } - if (saveConfig) - saveConfigs(); - }; + if (saveConfig) saveConfigs() + } setIntroduction = (value: IntroductionContent) => { - this.introduction = value; - }; + this.introduction = value + } setAbout = (value: AboutContent) => { - this.about = value; - }; + this.about = value + } setLastModelName(value: string) { - this.lastModelName = value; + this.lastModelName = value } setDepComplete = (value: boolean, inSaveCache: boolean = true) => { - this.depComplete = value; - if (inSaveCache) - saveCache(); - }; + this.depComplete = value + if (inSaveCache) saveCache() + } setDownloadList = (value: DownloadStatus[]) => { - this.downloadList = value; - }; + this.downloadList = value + } setConversation = (value: Conversation) => { - this.conversation = value; - }; + this.conversation = value + } setConversationOrder = (value: string[]) => { - this.conversationOrder = value; - }; + this.conversationOrder = value + } setCompletionPreset(value: CompletionPreset) { - this.completionPreset = value; + this.completionPreset = value } setCompletionGenerating(value: boolean) { - this.completionGenerating = value; + this.completionGenerating = value } setMonitorData(value: MonitorData) { - this.monitorData = value; + this.monitorData = value } setPlatform(value: Platform) { - this.platform = value; + this.platform = value } setProxyPort(value: number) { - this.proxyPort = value; + this.proxyPort = value } setCurrentInput(value: string) { - this.currentInput = value; + this.currentInput = value } setAdvancedCollapsed(value: boolean) { - this.advancedCollapsed = value; + this.advancedCollapsed = value } setApiParamsCollapsed(value: boolean) { - this.apiParamsCollapsed = value; + this.apiParamsCollapsed = value } setModelParamsCollapsed(value: boolean) { - this.modelParamsCollapsed = value; + this.modelParamsCollapsed = value } setLastUnfinishedModelDownloads(value: DownloadStatus[]) { - this.lastUnfinishedModelDownloads = value; + this.lastUnfinishedModelDownloads = value } setEditingPreset(value: Preset | null) { - this.editingPreset = value; + this.editingPreset = value } setPresets(value: Preset[], savePreset: boolean = true) { - this.presets = value; - if (savePreset) - savePresets(); + this.presets = value + if (savePreset) savePresets() } setActivePreset(value: Preset | null) { - this.activePreset = value; + this.activePreset = value } setActivePresetIndex(value: number) { - this.activePresetIndex = value; + this.activePresetIndex = value } setCompletionSubmittedPrompt(value: string) { - this.completionSubmittedPrompt = value; + this.completionSubmittedPrompt = value } setCompositionParams(value: CompositionParams) { - this.compositionParams = value; + this.compositionParams = value } setCompositionGenerating(value: boolean) { - this.compositionGenerating = value; + this.compositionGenerating = value } setCompositionSubmittedPrompt(value: string) { - this.compositionSubmittedPrompt = value; + this.compositionSubmittedPrompt = value } setWslStdout(value: string) { - this.wslStdout = value; + this.wslStdout = value } - setDataProcessParams(value: DataProcessParameters, saveConfig: boolean = true) { - this.dataProcessParams = value; - if (saveConfig) - saveConfigs(); + setDataProcessParams( + value: DataProcessParameters, + saveConfig: boolean = true + ) { + this.dataProcessParams = value + if (saveConfig) saveConfigs() } - setLoraFinetuneParameters(value: LoraFinetuneParameters, saveConfig: boolean = true) { - this.loraFinetuneParams = value; - if (saveConfig) - saveConfigs(); + setLoraFinetuneParameters( + value: LoraFinetuneParameters, + saveConfig: boolean = true + ) { + this.loraFinetuneParams = value + if (saveConfig) saveConfigs() } setChartTitle(value: string) { - this.chartTitle = value; + this.chartTitle = value } setChartData(value: ChartData<'line', (number | null)[], string>) { - this.chartData = value; + this.chartData = value } setLoraModels(value: string[]) { - this.loraModels = value; + this.loraModels = value } setStateModels(value: string[]) { - this.stateModels = value; + this.stateModels = value } setAttachmentUploading(value: boolean) { - this.attachmentUploading = value; + this.attachmentUploading = value } - setAttachments(value: { - [uuid: string]: Attachment[] - }) { - this.attachments = value; + setAttachments(value: { [uuid: string]: Attachment[] }) { + this.attachments = value } setAttachment(uuid: string, value: Attachment[] | null) { - if (value === null) - delete this.attachments[uuid]; - else - this.attachments[uuid] = value; + if (value === null) delete this.attachments[uuid] + else this.attachments[uuid] = value } setCurrentTempAttachment(value: Attachment | null) { - this.currentTempAttachment = value; + this.currentTempAttachment = value } setChatParams(value: Partial) { - this.chatParams = { ...this.chatParams, ...value }; + this.chatParams = { ...this.chatParams, ...value } } setSidePanelCollapsed(value: boolean | 'auto') { - this.sidePanelCollapsed = value; + this.sidePanelCollapsed = value } setTracks(value: Track[]) { - this.tracks = value; + this.tracks = value } setTrackScale(value: number) { - this.trackScale = value; + this.trackScale = value } setTrackTotalTime(value: number) { - this.trackTotalTime = value; + this.trackTotalTime = value } setTrackCurrentTime(value: number) { - this.trackCurrentTime = value; + this.trackCurrentTime = value } setTrackPlayStartTime(value: number) { - this.trackPlayStartTime = value; + this.trackPlayStartTime = value } setMidiPorts(value: MidiPort[]) { - this.midiPorts = value; + this.midiPorts = value } setInstrumentType(value: InstrumentType) { - this.instrumentType = value; + this.instrumentType = value } setRecordingTrackId(value: string) { - this.recordingTrackId = value; + this.recordingTrackId = value } setActiveMidiDeviceIndex(value: number) { - this.activeMidiDeviceIndex = value; + this.activeMidiDeviceIndex = value } setRecordingContent(value: string) { - this.recordingContent = value; + this.recordingContent = value } setRecordingRawContent(value: MidiMessage[]) { - this.recordingRawContent = value; + this.recordingRawContent = value } setPlayingTrackId(value: string) { - this.playingTrackId = value; + this.playingTrackId = value } setActiveModelListTags(value: string[]) { - this.activeModelListTags = value; + this.activeModelListTags = value } } -export default new CommonStore(); \ No newline at end of file +export default new CommonStore() diff --git a/frontend/src/style.scss b/frontend/src/style.scss index 3be21326..6aba13d1 100644 --- a/frontend/src/style.scss +++ b/frontend/src/style.scss @@ -74,12 +74,13 @@ midi-player { } midi-visualizer { - $instrument-colors: #007bff, #20c997, #dc3545, #6610f2, #ffc107, #e83e8c, #17a2b8, #fd7e14, #28a745; + $instrument-colors: #007bff, #20c997, #dc3545, #6610f2, #ffc107, #e83e8c, + #17a2b8, #fd7e14, #28a745; svg { @for $i from 0 to 200 { $color: nth($instrument-colors, ($i % length($instrument-colors)) + 1); - rect.note[data-instrument="#{$i}"] { + rect.note[data-instrument='#{$i}'] { fill: $color; } } diff --git a/frontend/src/types/about.ts b/frontend/src/types/about.ts index fc646996..78043f62 100644 --- a/frontend/src/types/about.ts +++ b/frontend/src/types/about.ts @@ -1 +1 @@ -export type AboutContent = { [lang: string]: string } \ No newline at end of file +export type AboutContent = { [lang: string]: string } diff --git a/frontend/src/types/chat.ts b/frontend/src/types/chat.ts index c93eec76..37a412b2 100644 --- a/frontend/src/types/chat.ts +++ b/frontend/src/types/chat.ts @@ -1,41 +1,41 @@ -import { ApiParameters } from './configs'; +import { ApiParameters } from './configs' -export const userName = 'M E'; -export const botName = 'A I'; -export const systemName = 'System'; -export const welcomeUuid = 'welcome'; +export const userName = 'M E' +export const botName = 'A I' +export const systemName = 'System' +export const welcomeUuid = 'welcome' export enum MessageType { Normal, - Error + Error, } export type Side = 'left' | 'right' | 'center' export type Color = 'neutral' | 'brand' | 'colorful' export type MessageItem = { - sender: string, - type: MessageType, - color: Color, - avatarImg?: string, - time: string, - content: string, - side: Side, + 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 Role = 'assistant' | 'user' | 'system' export type ConversationMessage = { - role: Role; - content: string; + role: Role + content: string } export type Attachment = { - name: string; - size: number; - content: string; + name: string + size: number + content: string } export type ChatParams = Omit & { - historyN: number; - markdown: boolean; -} \ No newline at end of file + historyN: number + markdown: boolean +} diff --git a/frontend/src/types/completion.ts b/frontend/src/types/completion.ts index 993c941b..861a1d5d 100644 --- a/frontend/src/types/completion.ts +++ b/frontend/src/types/completion.ts @@ -1,12 +1,12 @@ -import { ApiParameters } from './configs'; +import { ApiParameters } from './configs' export type CompletionParams = Omit & { - stop: string, - injectStart: string, + stop: string + injectStart: string injectEnd: string -}; +} export type CompletionPreset = { - name: string, - prompt: string, + name: string + prompt: string params: CompletionParams -} \ No newline at end of file +} diff --git a/frontend/src/types/composition.ts b/frontend/src/types/composition.ts index f574881a..61843290 100644 --- a/frontend/src/types/composition.ts +++ b/frontend/src/types/composition.ts @@ -1,42 +1,42 @@ -import { NoteSequence } from '@magenta/music/esm/protobuf'; +import { NoteSequence } from '@magenta/music/esm/protobuf' -export const tracksMinimalTotalTime = 5000; +export const tracksMinimalTotalTime = 5000 export type CompositionParams = { - prompt: string, - maxResponseToken: number, - temperature: number, - topP: number, - autoPlay: boolean, - useLocalSoundFont: boolean, - externalPlay: boolean, - midi: ArrayBuffer | null, - ns: NoteSequence | null, - generationStartTime: number, - playOnlyGeneratedContent: boolean, + prompt: string + maxResponseToken: number + temperature: number + topP: number + autoPlay: boolean + useLocalSoundFont: boolean + externalPlay: boolean + midi: ArrayBuffer | null + ns: NoteSequence | null + generationStartTime: number + playOnlyGeneratedContent: boolean } export type Track = { - id: string; - mainInstrument: string; - content: string; - rawContent: MidiMessage[]; - offsetTime: number; - contentTime: number; -}; + id: string + mainInstrument: string + content: string + rawContent: MidiMessage[] + offsetTime: number + contentTime: number +} export type MidiPort = { - name: string; + name: string } -export type MessageType = 'NoteOff' | 'NoteOn' | 'ElapsedTime' | 'ControlChange'; +export type MessageType = 'NoteOff' | 'NoteOn' | 'ElapsedTime' | 'ControlChange' export type MidiMessage = { - messageType: MessageType; - channel: number; - note: number; - velocity: number; - control: number; - value: number; - instrument: InstrumentType; + messageType: MessageType + channel: number + note: number + velocity: number + control: number + value: number + instrument: InstrumentType } export enum InstrumentType { @@ -68,8 +68,8 @@ export const InstrumentTypeNameMap = [ 'Sax', 'Flute', 'Lead', - 'Pad' -]; + 'Pad', +] export const InstrumentTypeTokenMap = [ 'pi', @@ -84,5 +84,5 @@ export const InstrumentTypeTokenMap = [ 's', 'f', 'l', - 'pa' -]; + 'pa', +] diff --git a/frontend/src/types/configs.ts b/frontend/src/types/configs.ts index a8668ef7..4b30f5d0 100644 --- a/frontend/src/types/configs.ts +++ b/frontend/src/types/configs.ts @@ -1,34 +1,42 @@ export type ApiParameters = { apiPort: number - maxResponseToken: number; - temperature: number; - topP: number; - presencePenalty: number; - frequencyPenalty: number; - penaltyDecay?: number; - globalPenalty?: boolean; - stateModel?: string; + maxResponseToken: number + temperature: number + topP: number + presencePenalty: number + frequencyPenalty: number + penaltyDecay?: number + globalPenalty?: boolean + stateModel?: string } -export type Device = 'CPU' | 'CPU (rwkv.cpp)' | 'CUDA' | 'CUDA-Beta' | 'WebGPU' | 'WebGPU (Python)' | 'MPS' | 'Custom'; -export type Precision = 'fp16' | 'int8' | 'fp32' | 'nf4' | 'Q5_1'; +export type Device = + | 'CPU' + | 'CPU (rwkv.cpp)' + | 'CUDA' + | 'CUDA-Beta' + | 'WebGPU' + | 'WebGPU (Python)' + | 'MPS' + | 'Custom' +export type Precision = 'fp16' | 'int8' | 'fp32' | 'nf4' | 'Q5_1' export type ModelParameters = { // different models can not have the same name - modelName: string; - device: Device; - precision: Precision; - storedLayers: number; - maxStoredLayers: number; - quantizedLayers?: number; - tokenChunkSize?: number; - useCustomCuda?: boolean; - customStrategy?: string; - useCustomTokenizer?: boolean; - customTokenizer?: string; + modelName: string + device: Device + precision: Precision + storedLayers: number + maxStoredLayers: number + quantizedLayers?: number + tokenChunkSize?: 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; -} \ No newline at end of file + name: string + apiParameters: ApiParameters + modelParameters: ModelParameters + enableWebUI?: boolean +} diff --git a/frontend/src/types/downloads.ts b/frontend/src/types/downloads.ts index 5718ec24..2deeb213 100644 --- a/frontend/src/types/downloads.ts +++ b/frontend/src/types/downloads.ts @@ -1,11 +1,11 @@ export type DownloadStatus = { - name: string; - path: string; - url: string; - transferred: number; - size: number; - speed: number; - progress: number; - downloading: boolean; - done: boolean; -} \ No newline at end of file + name: string + path: string + url: string + transferred: number + size: number + speed: number + progress: number + downloading: boolean + done: boolean +} diff --git a/frontend/src/types/home.ts b/frontend/src/types/home.ts index 29555280..ff6096f7 100644 --- a/frontend/src/types/home.ts +++ b/frontend/src/types/home.ts @@ -1,11 +1,11 @@ -import { ReactElement } from 'react'; +import { ReactElement } from 'react' export type IntroductionContent = { [lang: string]: string } export type NavCard = { - label: string; - desc: string; - path: string; - icon: ReactElement; -}; \ No newline at end of file + label: string + desc: string + path: string + icon: ReactElement +} diff --git a/frontend/src/types/html-midi-player.d.ts b/frontend/src/types/html-midi-player.d.ts index 05471b73..a38a6525 100644 --- a/frontend/src/types/html-midi-player.d.ts +++ b/frontend/src/types/html-midi-player.d.ts @@ -1,9 +1,9 @@ declare module JSX { - import { PlayerElement } from 'html-midi-player'; - import { VisualizerElement } from 'html-midi-player'; + import { PlayerElement } from 'html-midi-player' + import { VisualizerElement } from 'html-midi-player' interface IntrinsicElements { - 'midi-player': PlayerElement; - 'midi-visualizer': VisualizerElement; + 'midi-player': PlayerElement + 'midi-visualizer': VisualizerElement } -} \ No newline at end of file +} diff --git a/frontend/src/types/models.ts b/frontend/src/types/models.ts index 78b86eab..a8880791 100644 --- a/frontend/src/types/models.ts +++ b/frontend/src/types/models.ts @@ -1,17 +1,17 @@ export type ModelSourceItem = { - name: string; - desc?: { [lang: string]: string | undefined; }; - size: number; - SHA256?: string; - lastUpdated: string; - url?: string; - downloadUrl?: string; - tags?: string[]; - customTokenizer?: string; - hide?: boolean; + name: string + desc?: { [lang: string]: string | undefined } + size: number + SHA256?: string + lastUpdated: string + url?: string + downloadUrl?: string + tags?: string[] + customTokenizer?: string + hide?: boolean - lastUpdatedMs?: number; - isComplete?: boolean; - isLocal?: boolean; - localSize?: number; -}; \ No newline at end of file + lastUpdatedMs?: number + isComplete?: boolean + isLocal?: boolean + localSize?: number +} diff --git a/frontend/src/types/presets.ts b/frontend/src/types/presets.ts index 5680bed6..bd85bf1e 100644 --- a/frontend/src/types/presets.ts +++ b/frontend/src/types/presets.ts @@ -1,31 +1,30 @@ -import { ReactElement } from 'react'; - -import { ConversationMessage } from './chat'; +import { ReactElement } from 'react' +import { ConversationMessage } from './chat' export type PresetType = 'chat' | 'completion' | 'chatInCompletion' export type Preset = { - name: string, - tag: string, + name: string + tag: string // if name and sourceUrl are same, it will be overridden when importing - sourceUrl: string, - desc: string, - avatarImg: string, - userAvatarImg?: string, - type: PresetType, + sourceUrl: string + desc: string + avatarImg: string + userAvatarImg?: string + type: PresetType // chat - welcomeMessage: string, - messages: ConversationMessage[], - displayPresetMessages: boolean, + welcomeMessage: string + messages: ConversationMessage[] + displayPresetMessages: boolean // completion - prompt: string, - stop: string, - injectStart: string, - injectEnd: string, - presystem?: boolean, - userName?: string, + prompt: string + stop: string + injectStart: string + injectEnd: string + presystem?: boolean + userName?: string assistantName?: string } export type PresetsNavigationItem = { - icon: ReactElement; - element: ReactElement; -}; \ No newline at end of file + icon: ReactElement + element: ReactElement +} diff --git a/frontend/src/types/settings.ts b/frontend/src/types/settings.ts index 127e2442..299f83be 100644 --- a/frontend/src/types/settings.ts +++ b/frontend/src/types/settings.ts @@ -1,9 +1,9 @@ export const Languages = { dev: 'English', // i18n default zh: '简体中文', - ja: '日本語' -}; -export type Language = keyof typeof Languages; + ja: '日本語', +} +export type Language = keyof typeof Languages export type SettingsType = { language: Language darkMode: boolean @@ -20,4 +20,4 @@ export type SettingsType = { apiChatModelName: string apiCompletionModelName: string coreApiUrl: string -} \ No newline at end of file +} diff --git a/frontend/src/types/train.ts b/frontend/src/types/train.ts index fd056f81..a260c165 100644 --- a/frontend/src/types/train.ts +++ b/frontend/src/types/train.ts @@ -1,35 +1,35 @@ -import { ReactElement } from 'react'; +import { ReactElement } from 'react' export type DataProcessParameters = { - dataPath: string; - vocabPath: string; + dataPath: string + vocabPath: string } -export type LoraFinetunePrecision = 'bf16' | 'fp16' | 'tf32'; +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; + 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; -}; \ No newline at end of file + element: ReactElement +} diff --git a/frontend/src/utils/convert-model.ts b/frontend/src/utils/convert-model.ts index 1705b6e8..77c1d5ba 100644 --- a/frontend/src/utils/convert-model.ts +++ b/frontend/src/utils/convert-model.ts @@ -1,118 +1,183 @@ -import { toast } from 'react-toastify'; -import commonStore from '../stores/commonStore'; -import { t } from 'i18next'; +import { t } from 'i18next' +import { NavigateFunction } from 'react-router' +import { toast } from 'react-toastify' import { ConvertGGML, ConvertModel, ConvertSafetensors, ConvertSafetensorsWithPython, FileExists, - GetPyError -} from '../../wailsjs/go/backend_golang/App'; -import { WindowShow } from '../../wailsjs/runtime'; -import { ModelConfig, Precision } from '../types/configs'; -import { checkDependencies, getStrategy } from './index'; -import { NavigateFunction } from 'react-router'; + GetPyError, +} from '../../wailsjs/go/backend_golang/App' +import { WindowShow } from '../../wailsjs/runtime' +import commonStore from '../stores/commonStore' +import { ModelConfig, Precision } from '../types/configs' +import { checkDependencies, getStrategy } from './index' -export const convertModel = async (selectedConfig: ModelConfig, navigate: NavigateFunction) => { +export const convertModel = async ( + selectedConfig: ModelConfig, + navigate: NavigateFunction +) => { if (commonStore.platform === 'darwin') { - toast(t('MacOS is not yet supported for performing this operation, please do it manually.') + ' (backend-python/convert_model.py)', { type: 'info' }); - return; + toast( + t( + 'MacOS is not yet supported for performing this operation, please do it manually.' + ) + ' (backend-python/convert_model.py)', + { type: 'info' } + ) + return } else if (commonStore.platform === 'linux') { - toast(t('Linux is not yet supported for performing this operation, please do it manually.') + ' (backend-python/convert_model.py)', { type: 'info' }); - return; + toast( + t( + 'Linux is not yet supported for performing this operation, please do it manually.' + ) + ' (backend-python/convert_model.py)', + { type: 'info' } + ) + return } - const ok = await checkDependencies(navigate); - if (!ok) - return; + const ok = await checkDependencies(navigate) + if (!ok) return - const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}`; + const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}` if (await FileExists(modelPath)) { - const strategy = getStrategy(selectedConfig); - const newModelPath = modelPath + '-' + strategy.replace(/[:> *+]/g, '-'); - toast(t('Start Converting'), { autoClose: 2000, type: 'info' }); - ConvertModel(commonStore.settings.customPythonPath, modelPath, strategy, newModelPath).then(async () => { - if (!await FileExists(newModelPath + '.pth')) { - toast(t('Convert Failed') + ' - ' + await GetPyError(), { type: 'error' }); - } else { - toast(`${t('Convert Success')} - ${newModelPath}`, { type: 'success' }); - } - }).catch(e => { - const errMsg = e.message || e; - if (errMsg.includes('path contains space')) - toast(`${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' }); - else - toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }); - }); - setTimeout(WindowShow, 1000); + const strategy = getStrategy(selectedConfig) + const newModelPath = modelPath + '-' + strategy.replace(/[:> *+]/g, '-') + toast(t('Start Converting'), { autoClose: 2000, type: 'info' }) + ConvertModel( + commonStore.settings.customPythonPath, + modelPath, + strategy, + newModelPath + ) + .then(async () => { + if (!(await FileExists(newModelPath + '.pth'))) { + toast(t('Convert Failed') + ' - ' + (await GetPyError()), { + type: 'error', + }) + } else { + toast(`${t('Convert Success')} - ${newModelPath}`, { + type: 'success', + }) + } + }) + .catch((e) => { + const errMsg = e.message || e + if (errMsg.includes('path contains space')) + toast( + `${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, + { type: 'error' } + ) + else + toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }) + }) + setTimeout(WindowShow, 1000) } else { - toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }); + toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }) } -}; +} - -export const convertToSt = async (selectedConfig: ModelConfig, navigate: NavigateFunction) => { - const webgpuPython = selectedConfig.modelParameters.device === 'WebGPU (Python)'; +export const convertToSt = async ( + selectedConfig: ModelConfig, + navigate: NavigateFunction +) => { + const webgpuPython = + selectedConfig.modelParameters.device === 'WebGPU (Python)' if (webgpuPython) { - const ok = await checkDependencies(navigate); - if (!ok) - return; + const ok = await checkDependencies(navigate) + if (!ok) return } - const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}`; + const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}` if (await FileExists(modelPath)) { - toast(t('Start Converting'), { autoClose: 2000, type: 'info' }); - const newModelPath = modelPath.replace(/\.pth$/, '.st'); - const convert = webgpuPython ? - (input: string, output: string) => ConvertSafetensorsWithPython(commonStore.settings.customPythonPath, input, output) - : ConvertSafetensors; - convert(modelPath, newModelPath).then(async () => { - if (!await FileExists(newModelPath)) { - if (commonStore.platform === 'windows' || commonStore.platform === 'linux') - toast(t('Convert Failed') + ' - ' + await GetPyError(), { type: 'error' }); - } else { - toast(`${t('Convert Success')} - ${newModelPath}`, { type: 'success' }); - } - }).catch(e => { - const errMsg = e.message || e; - if (errMsg.includes('path contains space')) - toast(`${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' }); - else - toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }); - }); - setTimeout(WindowShow, 1000); + toast(t('Start Converting'), { autoClose: 2000, type: 'info' }) + const newModelPath = modelPath.replace(/\.pth$/, '.st') + const convert = webgpuPython + ? (input: string, output: string) => + ConvertSafetensorsWithPython( + commonStore.settings.customPythonPath, + input, + output + ) + : ConvertSafetensors + convert(modelPath, newModelPath) + .then(async () => { + if (!(await FileExists(newModelPath))) { + if ( + commonStore.platform === 'windows' || + commonStore.platform === 'linux' + ) + toast(t('Convert Failed') + ' - ' + (await GetPyError()), { + type: 'error', + }) + } else { + toast(`${t('Convert Success')} - ${newModelPath}`, { + type: 'success', + }) + } + }) + .catch((e) => { + const errMsg = e.message || e + if (errMsg.includes('path contains space')) + toast( + `${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, + { type: 'error' } + ) + else + toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }) + }) + setTimeout(WindowShow, 1000) } else { - toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }); + toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }) } -}; +} -export const convertToGGML = async (selectedConfig: ModelConfig, navigate: NavigateFunction) => { - const ok = await checkDependencies(navigate); - if (!ok) - return; +export const convertToGGML = async ( + selectedConfig: ModelConfig, + navigate: NavigateFunction +) => { + const ok = await checkDependencies(navigate) + if (!ok) return - const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}`; + const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}` if (await FileExists(modelPath)) { - toast(t('Start Converting'), { autoClose: 2000, type: 'info' }); - const precision: Precision = selectedConfig.modelParameters.precision === 'Q5_1' ? 'Q5_1' : 'fp16'; - const newModelPath = modelPath.replace(/\.pth$/, `-${precision}.bin`); - ConvertGGML(commonStore.settings.customPythonPath, modelPath, newModelPath, precision === 'Q5_1').then(async () => { - if (!await FileExists(newModelPath)) { - if (commonStore.platform === 'windows' || commonStore.platform === 'linux') - toast(t('Convert Failed') + ' - ' + await GetPyError(), { type: 'error' }); - } else { - toast(`${t('Convert Success')} - ${newModelPath}`, { type: 'success' }); - } - }).catch(e => { - const errMsg = e.message || e; - if (errMsg.includes('path contains space')) - toast(`${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' }); - else - toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }); - }); - setTimeout(WindowShow, 1000); + toast(t('Start Converting'), { autoClose: 2000, type: 'info' }) + const precision: Precision = + selectedConfig.modelParameters.precision === 'Q5_1' ? 'Q5_1' : 'fp16' + const newModelPath = modelPath.replace(/\.pth$/, `-${precision}.bin`) + ConvertGGML( + commonStore.settings.customPythonPath, + modelPath, + newModelPath, + precision === 'Q5_1' + ) + .then(async () => { + if (!(await FileExists(newModelPath))) { + if ( + commonStore.platform === 'windows' || + commonStore.platform === 'linux' + ) + toast(t('Convert Failed') + ' - ' + (await GetPyError()), { + type: 'error', + }) + } else { + toast(`${t('Convert Success')} - ${newModelPath}`, { + type: 'success', + }) + } + }) + .catch((e) => { + const errMsg = e.message || e + if (errMsg.includes('path contains space')) + toast( + `${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, + { type: 'error' } + ) + else + toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' }) + }) + setTimeout(WindowShow, 1000) } else { - toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }); + toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' }) } -}; \ No newline at end of file +} diff --git a/frontend/src/utils/index.tsx b/frontend/src/utils/index.tsx index e4069141..4e48ee68 100644 --- a/frontend/src/utils/index.tsx +++ b/frontend/src/utils/index.tsx @@ -1,3 +1,11 @@ +import { Button } from '@fluentui/react-components' +import { t } from 'i18next' +import { findLastIndex, throttle } from 'lodash-es' +import { NavigateFunction } from 'react-router' +import { toast } from 'react-toastify' +import { ToastOptions } from 'react-toastify/dist/types' +import { v4 as uuid } from 'uuid' +import manifest from '../../../manifest.json' import { AddToDownloadList, DeleteFile, @@ -9,27 +17,35 @@ import { ReadFileInfo, ReadJson, SaveJson, - UpdateApp -} from '../../wailsjs/go/backend_golang/App'; -import manifest from '../../../manifest.json'; -import commonStore, { ModelStatus } from '../stores/commonStore'; -import { toast } from 'react-toastify'; -import { t } from 'i18next'; -import { ToastOptions } from 'react-toastify/dist/types'; -import { Button } from '@fluentui/react-components'; -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'; -import { InstrumentTypeNameMap, MidiMessage, tracksMinimalTotalTime } from '../types/composition'; -import logo from '../assets/images/logo.png'; -import { Preset } from '../types/presets'; -import { botName, Conversation, MessageType, Role, systemName, userName } from '../types/chat'; -import { v4 as uuid } from 'uuid'; -import { findLastIndex, throttle } from 'lodash-es'; + UpdateApp, +} from '../../wailsjs/go/backend_golang/App' +import { + BrowserOpenURL, + EventsOff, + EventsOn, + WindowShow, +} from '../../wailsjs/runtime' +import logo from '../assets/images/logo.png' +import commonStore, { ModelStatus } from '../stores/commonStore' +import { + botName, + Conversation, + MessageType, + Role, + systemName, + userName, +} from '../types/chat' +import { + InstrumentTypeNameMap, + MidiMessage, + tracksMinimalTotalTime, +} from '../types/composition' +import { ModelConfig, ModelParameters } from '../types/configs' +import { DownloadStatus } from '../types/downloads' +import { ModelSourceItem } from '../types/models' +import { Preset } from '../types/presets' +import { Language, Languages, SettingsType } from '../types/settings' +import { DataProcessParameters, LoraFinetuneParameters } from '../types/train' export type Cache = { version: string @@ -41,646 +57,860 @@ export type LocalConfig = { modelSourceManifestList: string currentModelConfigIndex: number modelConfigs: ModelConfig[] - settings: SettingsType, - dataProcessParams: DataProcessParameters, + settings: SettingsType + dataProcessParams: DataProcessParameters loraFinetuneParams: LoraFinetuneParameters } export async function refreshBuiltInModels(readCache: boolean = false) { let cache: { models: ModelSourceItem[] - } = { models: [] }; + } = { models: [] } if (readCache) - await ReadJson('cache.json').then((cacheData: Cache) => { - if (cacheData.models) - cache.models = cacheData.models; - else cache.models = manifest.models.slice(); - }).catch(() => { - cache.models = manifest.models.slice(); - }); - else cache.models = manifest.models.slice(); - - commonStore.setModelSourceList(cache.models); - saveCache(); - return cache; + await ReadJson('cache.json') + .then((cacheData: Cache) => { + if (cacheData.models) cache.models = cacheData.models + else cache.models = manifest.models.slice() + }) + .catch(() => { + cache.models = manifest.models.slice() + }) + else cache.models = manifest.models.slice() + + commonStore.setModelSourceList(cache.models) + saveCache() + return cache } -const modelSuffix = ['.pth', '.st', '.safetensors', '.bin']; +const modelSuffix = ['.pth', '.st', '.safetensors', '.bin'] -export async function refreshLocalModels(cache: { - models: ModelSourceItem[] -}, filter: boolean = true, initUnfinishedModels: boolean = false) { - if (filter) - cache.models = cache.models.filter(m => !m.isComplete); //TODO BUG cause local but in manifest files to be removed, so currently cache is disabled - - await ListDirFiles(commonStore.settings.customModelsPath).then((data) => { - cache.models.push(...data.flatMap(d => { - if (!d.isDir && modelSuffix.some((ext => d.name.endsWith(ext)))) - return [{ - name: d.name, - size: d.size, - lastUpdated: d.modTime, - isComplete: true, - isLocal: true, - tags: ['Local'] - }] as ModelSourceItem[]; - return []; - })); - }).catch(() => { - }); +export async function refreshLocalModels( + cache: { + models: ModelSourceItem[] + }, + filter: boolean = true, + initUnfinishedModels: boolean = false +) { + if (filter) cache.models = cache.models.filter((m) => !m.isComplete) //TODO BUG cause local but in manifest files to be removed, so currently cache is disabled + + await ListDirFiles(commonStore.settings.customModelsPath) + .then((data) => { + cache.models.push( + ...data.flatMap((d) => { + if (!d.isDir && modelSuffix.some((ext) => d.name.endsWith(ext))) + return [ + { + name: d.name, + size: d.size, + lastUpdated: d.modTime, + isComplete: true, + isLocal: true, + tags: ['Local'], + }, + ] as ModelSourceItem[] + return [] + }) + ) + }) + .catch(() => {}) for (let i = 0; i < cache.models.length; i++) { if (!cache.models[i].lastUpdatedMs) - cache.models[i].lastUpdatedMs = Date.parse(cache.models[i].lastUpdated); - if (!cache.models[i].tags || !Array.isArray(cache.models[i].tags) || cache.models[i].tags?.length === 0) - cache.models[i].tags = ['Other']; + cache.models[i].lastUpdatedMs = Date.parse(cache.models[i].lastUpdated) + if ( + !cache.models[i].tags || + !Array.isArray(cache.models[i].tags) || + cache.models[i].tags?.length === 0 + ) + cache.models[i].tags = ['Other'] for (let j = i + 1; j < cache.models.length; j++) { if (!cache.models[j].lastUpdatedMs) - cache.models[j].lastUpdatedMs = Date.parse(cache.models[j].lastUpdated); + cache.models[j].lastUpdatedMs = Date.parse(cache.models[j].lastUpdated) if (cache.models[i].name === cache.models[j].name) { - const tags = Array.from(new Set([...cache.models[i].tags as string[], ...cache.models[j].tags as string[]])); - if (cache.models[i].size <= cache.models[j].size) { // j is local file + const tags = Array.from( + new Set([ + ...(cache.models[i].tags as string[]), + ...(cache.models[j].tags as string[]), + ]) + ) + if (cache.models[i].size <= cache.models[j].size) { + // j is local file if (cache.models[i].lastUpdatedMs! < cache.models[j].lastUpdatedMs!) { - cache.models[i] = Object.assign({}, cache.models[i], cache.models[j]); + cache.models[i] = Object.assign( + {}, + cache.models[i], + cache.models[j] + ) } else { - cache.models[i] = Object.assign({}, cache.models[j], cache.models[i]); + cache.models[i] = Object.assign( + {}, + cache.models[j], + cache.models[i] + ) } } // else is not complete local file - cache.models[i].isLocal = true; - cache.models[i].localSize = cache.models[j].size; - cache.models[i].tags = tags; - cache.models.splice(j, 1); - j--; + cache.models[i].isLocal = true + cache.models[i].localSize = cache.models[j].size + cache.models[i].tags = tags + cache.models.splice(j, 1) + j-- } } } - commonStore.setModelSourceList(cache.models); - if (initUnfinishedModels) - initLastUnfinishedModelDownloads(); - saveCache(); + commonStore.setModelSourceList(cache.models) + if (initUnfinishedModels) initLastUnfinishedModelDownloads() + saveCache() } function initLastUnfinishedModelDownloads() { - const list: DownloadStatus[] = []; + const list: DownloadStatus[] = [] commonStore.modelSourceList.forEach((item) => { if (item.isLocal && !item.isComplete) { - list.push( - { - name: item.name, - path: `${commonStore.settings.customModelsPath}/${item.name}`, - url: getHfDownloadUrl(item.downloadUrl!), - transferred: item.localSize!, - size: item.size, - speed: 0, - progress: item.localSize! / item.size * 100, - downloading: false, - done: false - } - ); + list.push({ + name: item.name, + path: `${commonStore.settings.customModelsPath}/${item.name}`, + url: getHfDownloadUrl(item.downloadUrl!), + transferred: item.localSize!, + size: item.size, + speed: 0, + progress: (item.localSize! / item.size) * 100, + downloading: false, + done: false, + }) } - }); - commonStore.setLastUnfinishedModelDownloads(list); + }) + commonStore.setLastUnfinishedModelDownloads(list) } -export async function refreshRemoteModels(cache: { - models: ModelSourceItem[] -}, filter: boolean = true, initUnfinishedModels: boolean = false) { - const manifestUrls = commonStore.modelSourceManifestList.split(/[,，;；\n]/); - const requests = manifestUrls.filter(url => url.endsWith('.json')).map( - url => fetch(url, { cache: 'no-cache' }).then(r => r.json())); +export async function refreshRemoteModels( + cache: { + models: ModelSourceItem[] + }, + filter: boolean = true, + initUnfinishedModels: boolean = false +) { + const manifestUrls = commonStore.modelSourceManifestList.split(/[,，;；\n]/) + const requests = manifestUrls + .filter((url) => url.endsWith('.json')) + .map((url) => fetch(url, { cache: 'no-cache' }).then((r) => r.json())) await Promise.allSettled(requests) - .then((data: PromiseSettledResult[]) => { - cache.models.push(...data.flatMap(d => { - if (d.status === 'fulfilled') - return d.value.models; - return []; - })); - }) - .catch(() => { - }); + .then((data: PromiseSettledResult[]) => { + cache.models.push( + ...data.flatMap((d) => { + if (d.status === 'fulfilled') return d.value.models + return [] + }) + ) + }) + .catch(() => {}) cache.models = cache.models.filter((model, index, self) => { - return modelSuffix.some((ext => model.name.endsWith(ext))) - && index === findLastIndex(self, - m => m.name === model.name || (!!m.SHA256 && m.SHA256 === model.SHA256 && m.size === model.size)); - }); - await refreshLocalModels(cache, filter, initUnfinishedModels); -} - -export const refreshModels = async (readCache: boolean = false, initUnfinishedModels: boolean = false) => { - const cache = await refreshBuiltInModels(readCache); - await refreshLocalModels(cache, false, initUnfinishedModels); - await refreshRemoteModels(cache, false, initUnfinishedModels); -}; - -export const getStrategy = (modelConfig: ModelConfig | undefined = undefined) => { - let params: ModelParameters; - if (modelConfig) params = modelConfig.modelParameters; - else params = commonStore.getCurrentModelConfig().modelParameters; - const modelName = params.modelName.toLowerCase(); - const avoidOverflow = params.precision !== 'fp32' && modelName.includes('world') && (modelName.includes('0.1b') || modelName.includes('0.4b') || - modelName.includes('1.5b') || modelName.includes('1b5')); - let strategy = ''; + return ( + modelSuffix.some((ext) => model.name.endsWith(ext)) && + index === + findLastIndex( + self, + (m) => + m.name === model.name || + (!!m.SHA256 && m.SHA256 === model.SHA256 && m.size === model.size) + ) + ) + }) + await refreshLocalModels(cache, filter, initUnfinishedModels) +} + +export const refreshModels = async ( + readCache: boolean = false, + initUnfinishedModels: boolean = false +) => { + const cache = await refreshBuiltInModels(readCache) + await refreshLocalModels(cache, false, initUnfinishedModels) + await refreshRemoteModels(cache, false, initUnfinishedModels) +} + +export const getStrategy = ( + modelConfig: ModelConfig | undefined = undefined +) => { + let params: ModelParameters + if (modelConfig) params = modelConfig.modelParameters + else params = commonStore.getCurrentModelConfig().modelParameters + const modelName = params.modelName.toLowerCase() + const avoidOverflow = + params.precision !== 'fp32' && + modelName.includes('world') && + (modelName.includes('0.1b') || + modelName.includes('0.4b') || + modelName.includes('1.5b') || + modelName.includes('1b5')) + let strategy = '' switch (params.device) { case 'CPU': - if (avoidOverflow) - strategy = 'cpu fp32 *1 -> '; - strategy += 'cpu '; - strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32'; - break; + if (avoidOverflow) strategy = 'cpu fp32 *1 -> ' + strategy += 'cpu ' + strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32' + break case 'WebGPU': case 'WebGPU (Python)': - strategy += params.precision === 'nf4' ? 'fp16i4' : params.precision === 'int8' ? 'fp16i8' : 'fp16'; - if (params.quantizedLayers) - strategy += ` layer${params.quantizedLayers}`; - if (params.tokenChunkSize) - strategy += ` chunk${params.tokenChunkSize}`; - break; + strategy += + params.precision === 'nf4' + ? 'fp16i4' + : params.precision === 'int8' + ? 'fp16i8' + : 'fp16' + if (params.quantizedLayers) strategy += ` layer${params.quantizedLayers}` + if (params.tokenChunkSize) strategy += ` chunk${params.tokenChunkSize}` + break case 'CUDA': case 'CUDA-Beta': if (avoidOverflow) - strategy = params.useCustomCuda ? 'cuda fp16 *1 -> ' : 'cuda fp32 *1 -> '; - strategy += 'cuda '; - strategy += params.precision === 'int8' ? 'fp16i8' : params.precision === 'fp32' ? 'fp32' : 'fp16'; + strategy = params.useCustomCuda + ? 'cuda fp16 *1 -> ' + : 'cuda fp32 *1 -> ' + strategy += 'cuda ' + strategy += + params.precision === 'int8' + ? 'fp16i8' + : params.precision === 'fp32' + ? 'fp32' + : 'fp16' if (params.storedLayers < params.maxStoredLayers) - strategy += ` *${params.storedLayers}+`; - else - strategy += ` -> cuda fp16 *1`; - break; + strategy += ` *${params.storedLayers}+` + else strategy += ` -> cuda fp16 *1` + break case 'MPS': - if (avoidOverflow) - strategy = 'mps fp32 *1 -> '; - strategy += 'mps '; - strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32'; - break; + if (avoidOverflow) strategy = 'mps fp32 *1 -> ' + strategy += 'mps ' + strategy += params.precision === 'int8' ? 'fp32i8' : 'fp32' + break case 'Custom': - strategy = params.customStrategy || ''; - break; + strategy = params.customStrategy || '' + break } - return strategy; -}; + return strategy +} -export const saveConfigs = throttle(async () => { +export const saveConfigs = throttle( + async () => { const data: LocalConfig = { modelSourceManifestList: commonStore.modelSourceManifestList, currentModelConfigIndex: commonStore.currentModelConfigIndex, modelConfigs: commonStore.modelConfigs, settings: commonStore.settings, dataProcessParams: commonStore.dataProcessParams, - loraFinetuneParams: commonStore.loraFinetuneParams - }; - return SaveJson('config.json', data); - }, 500, + loraFinetuneParams: commonStore.loraFinetuneParams, + } + return SaveJson('config.json', data) + }, + 500, { leading: true, - trailing: true - }); + trailing: true, + } +) -export const saveCache = throttle(async () => { +export const saveCache = throttle( + async () => { const data: Cache = { version: manifest.version, models: commonStore.modelSourceList, - depComplete: commonStore.depComplete - }; - return SaveJson('cache.json', data); - }, 1000, + depComplete: commonStore.depComplete, + } + return SaveJson('cache.json', data) + }, + 1000, { leading: true, - trailing: true - }); + trailing: true, + } +) export const savePresets = async () => { - return SaveJson('presets.json', commonStore.presets); -}; + return SaveJson('presets.json', commonStore.presets) +} export function getUserLanguage(): Language { // const l = navigator.language.toLowerCase(); // if (['zh-hk', 'zh-mo', 'zh-tw', 'zh-cht', 'zh-hant'].includes(l)) return 'zhHant' - const l = navigator.language.substring(0, 2); - if (l in Languages) return l as Language; - return 'dev'; + const l = navigator.language.substring(0, 2) + if (l in Languages) return l as Language + return 'dev' } export function isSystemLightMode() { - return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches; + return ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: light)').matches + ) } export function downloadProgramFiles() { manifest.programFiles.forEach(({ url, path }) => { if (path) - ReadFileInfo(path).then(info => { - if (info.size === 0 && url) - AddToDownloadList(path, url.replace('@master', '@v' + manifest.version)); - }).catch(() => { - if (url) - AddToDownloadList(path, url.replace('@master', '@v' + manifest.version)); - }); - }); + ReadFileInfo(path) + .then((info) => { + if (info.size === 0 && url) + AddToDownloadList( + path, + url.replace('@master', '@v' + manifest.version) + ) + }) + .catch(() => { + if (url) + AddToDownloadList( + path, + url.replace('@master', '@v' + manifest.version) + ) + }) + }) } export function forceDownloadProgramFiles() { manifest.programFiles.forEach(({ url, path }) => { if (path && url) - AddToDownloadList(path, url.replace('@master', '@v' + manifest.version)); - }); + AddToDownloadList(path, url.replace('@master', '@v' + manifest.version)) + }) } export async function deleteDynamicProgramFiles() { - let promises: Promise[] = []; + let promises: Promise[] = [] manifest.programFiles.forEach(({ path }) => { - if ((path.endsWith('.py') && !path.includes('get-pip.py')) || path.includes('requirements') || path.endsWith('.pyd')) - promises.push(DeleteFile(path)); - }); - return await Promise.allSettled(promises).catch(() => { - }); + if ( + (path.endsWith('.py') && !path.includes('get-pip.py')) || + path.includes('requirements') || + path.endsWith('.pyd') + ) + promises.push(DeleteFile(path)) + }) + return await Promise.allSettled(promises).catch(() => {}) } export function bytesToGb(size: number) { - return (size / 1024 / 1024 / 1024).toFixed(2); + return (size / 1024 / 1024 / 1024).toFixed(2) } export function bytesToMb(size: number) { - return (size / 1024 / 1024).toFixed(2); + return (size / 1024 / 1024).toFixed(2) } export function bytesToKb(size: number) { - return (size / 1024).toFixed(2); + return (size / 1024).toFixed(2) } export function bytesToReadable(size: number) { - if (size < 1024) return size + ' B'; - else if (size < 1024 * 1024) return bytesToKb(size) + ' KB'; - else if (size < 1024 * 1024 * 1024) return bytesToMb(size) + ' MB'; - else return bytesToGb(size) + ' GB'; + if (size < 1024) return size + ' B' + else if (size < 1024 * 1024) return bytesToKb(size) + ' KB' + else if (size < 1024 * 1024 * 1024) return bytesToMb(size) + ' MB' + else return bytesToGb(size) + ' GB' } -export async function getReqUrl(port: number, path: string, isCore: boolean = false): Promise<{ - url: string, +export async function getReqUrl( + port: number, + path: string, + isCore: boolean = false +): Promise<{ + url: string headers: { [key: string]: string } }> { - const realUrl = getServerRoot(port, isCore) + path; + const realUrl = getServerRoot(port, isCore) + path if (commonStore.platform === 'web' || realUrl.startsWith('https')) return { url: realUrl, - headers: {} - }; + headers: {}, + } if (!commonStore.proxyPort) - await GetProxyPort().then(p => commonStore.setProxyPort(p)); + await GetProxyPort().then((p) => commonStore.setProxyPort(p)) return { url: `http://127.0.0.1:${commonStore.proxyPort}`, - headers: { 'Real-Target': encodeURIComponent(realUrl) } - }; + headers: { 'Real-Target': encodeURIComponent(realUrl) }, + } } -export function getServerRoot(defaultLocalPort: number, isCore: boolean = false) { - const coreCustomApiUrl = commonStore.settings.coreApiUrl.trim().replace(/\/$/, ''); - if (isCore && coreCustomApiUrl) - return coreCustomApiUrl; - - 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 getServerRoot( + defaultLocalPort: number, + isCore: boolean = false +) { + const coreCustomApiUrl = commonStore.settings.coreApiUrl + .trim() + .replace(/\/$/, '') + if (isCore && coreCustomApiUrl) return coreCustomApiUrl + + 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 === logo) - return path; - if ((path.length > 0 && path[0] === '/') || - (path.length > 1 && path[1] === ':')) { - return '=>' + path; + if (commonStore.platform === 'web') return path + if (path === logo) return path + if ( + (path.length > 0 && path[0] === '/') || + (path.length > 1 && path[1] === ':') + ) { + return '=>' + path } - return path; + return path } export async function checkUpdate(notifyEvenLatest: boolean = false) { - fetch(!commonStore.settings.giteeUpdatesSource ? - 'https://api.github.com/repos/josstorer/RWKV-Runner/releases/latest' : - 'https://gitee.com/api/v5/repos/josc146/RWKV-Runner/releases/latest' - ).then((r) => { + fetch( + !commonStore.settings.giteeUpdatesSource + ? 'https://api.github.com/repos/josstorer/RWKV-Runner/releases/latest' + : 'https://gitee.com/api/v5/repos/josc146/RWKV-Runner/releases/latest' + ) + .then((r) => { if (r.ok) { r.json().then((data) => { if (data.tag_name) { - const versionTag = data.tag_name; + const versionTag = data.tag_name if (versionTag.replace('v', '') > manifest.version) { - const verifyUrl = !commonStore.settings.giteeUpdatesSource ? - `https://api.github.com/repos/josstorer/RWKV-Runner/releases/tags/${versionTag}` : - `https://gitee.com/api/v5/repos/josc146/RWKV-Runner/releases/tags/${versionTag}`; + const verifyUrl = !commonStore.settings.giteeUpdatesSource + ? `https://api.github.com/repos/josstorer/RWKV-Runner/releases/tags/${versionTag}` + : `https://gitee.com/api/v5/repos/josc146/RWKV-Runner/releases/tags/${versionTag}` fetch(verifyUrl).then((r) => { if (r.ok) { r.json().then((data) => { if (data.assets && data.assets.length > 0) { - const asset = data.assets.find((a: any) => a.name.toLowerCase().includes(commonStore.platform.toLowerCase().replace('darwin', 'macos'))); + const asset = data.assets.find((a: any) => + a.name + .toLowerCase() + .includes( + commonStore.platform + .toLowerCase() + .replace('darwin', 'macos') + ) + ) if (asset) { - const updateUrl = !commonStore.settings.giteeUpdatesSource ? - `https://github.com/josStorer/RWKV-Runner/releases/download/${versionTag}/${asset.name}` : - `https://gitee.com/josc146/RWKV-Runner/releases/download/${versionTag}/${asset.name}`; - toastWithButton(t('New Version Available') + ': ' + versionTag, t('Update'), () => { - DeleteFile('cache.json'); - 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, - toastId: progressId, - hideProgressBar: false, - progress: ds ? ds.progress / 100 : 0 - }; - if (toast.isActive(progressId)) - toast.update(progressId, { - render: content, - ...options - }); - else - toast(content, options); - }; - updateProgress(null); - EventsOn(progressEvent, updateProgress); - UpdateApp(updateUrl).then(() => { - toast(t('Update completed, please restart the program.'), { - type: 'success', + const updateUrl = !commonStore.settings + .giteeUpdatesSource + ? `https://github.com/josStorer/RWKV-Runner/releases/download/${versionTag}/${asset.name}` + : `https://gitee.com/josc146/RWKV-Runner/releases/download/${versionTag}/${asset.name}` + toastWithButton( + t('New Version Available') + ': ' + versionTag, + t('Update'), + () => { + DeleteFile('cache.json') + 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, } - ); - }).catch((e) => { - toast(t('Update Error') + ' - ' + (e.message || e), { - type: 'error', - position: 'bottom-left', - autoClose: false - }); - }).finally(() => { - toast.dismiss(progressId); - EventsOff(progressEvent); - }); - }, { - autoClose: false, - position: 'bottom-left' - }); + if (toast.isActive(progressId)) + toast.update(progressId, { + render: content, + ...options, + }) + else toast(content, options) + } + updateProgress(null) + EventsOn(progressEvent, updateProgress) + UpdateApp(updateUrl) + .then(() => { + toast( + t( + 'Update completed, please restart the program.' + ), + { + type: 'success', + position: 'bottom-left', + autoClose: false, + } + ) + }) + .catch((e) => { + toast( + t('Update Error') + ' - ' + (e.message || e), + { + type: 'error', + position: 'bottom-left', + autoClose: false, + } + ) + }) + .finally(() => { + toast.dismiss(progressId) + EventsOff(progressEvent) + }) + }, + { + autoClose: false, + position: 'bottom-left', + } + ) } } - }); + }) } else { - throw new Error('Verify response was not ok.'); + throw new Error('Verify response was not ok.') } - }); + }) } else { if (notifyEvenLatest) { - toast(t('This is the latest version'), { type: 'success', position: 'bottom-left', autoClose: 2000 }); + toast(t('This is the latest version'), { + type: 'success', + position: 'bottom-left', + autoClose: 2000, + }) } } } else { - throw new Error('Invalid response.'); + throw new Error('Invalid response.') } - }); + }) } else { - throw new Error('Network response was not ok.'); + throw new Error('Network response was not ok.') } - } - ).catch((e) => { - toast(t('Updates Check Error') + ' - ' + (e.message || e), { type: 'error', position: 'bottom-left' }); - }); + }) + .catch((e) => { + toast(t('Updates Check Error') + ' - ' + (e.message || e), { + type: 'error', + position: 'bottom-left', + }) + }) } export const checkDependencies = async (navigate: NavigateFunction) => { if (!commonStore.depComplete) { - let depErrorMsg = ''; + let depErrorMsg = '' await DepCheck(commonStore.settings.customPythonPath).catch((e) => { - depErrorMsg = e.message || e; - WindowShow(); + depErrorMsg = e.message || e + WindowShow() if (depErrorMsg === 'python zip not found') { - toastWithButton(t('Python target not found, would you like to download it?'), t('Download'), () => { - toastWithButton(`${t('Downloading')} Python`, t('Check'), () => { - navigate({ pathname: '/downloads' }); - }, { autoClose: 3000 }); - AddToDownloadList('python-3.10.11-embed-amd64.zip', - !commonStore.settings.cnMirror - ? 'https://www.python.org/ftp/python/3.10.11/python-3.10.11-embed-amd64.zip' - : 'https://mirrors.huaweicloud.com/python/3.10.11/python-3.10.11-embed-amd64.zip'); - }); + toastWithButton( + t('Python target not found, would you like to download it?'), + t('Download'), + () => { + toastWithButton( + `${t('Downloading')} Python`, + t('Check'), + () => { + navigate({ pathname: '/downloads' }) + }, + { autoClose: 3000 } + ) + AddToDownloadList( + 'python-3.10.11-embed-amd64.zip', + !commonStore.settings.cnMirror + ? 'https://www.python.org/ftp/python/3.10.11/python-3.10.11-embed-amd64.zip' + : 'https://mirrors.huaweicloud.com/python/3.10.11/python-3.10.11-embed-amd64.zip' + ) + } + ) } else if (depErrorMsg.includes('DepCheck Error')) { - if (depErrorMsg.includes('vc_redist') || depErrorMsg.includes('DLL load failed while importing')) { - toastWithButton(t('Microsoft Visual C++ Redistributable is not installed, would you like to download it?'), t('Download'), () => { - BrowserOpenURL('https://aka.ms/vs/16/release/vc_redist.x64.exe'); - }); + if ( + depErrorMsg.includes('vc_redist') || + depErrorMsg.includes('DLL load failed while importing') + ) { + toastWithButton( + t( + 'Microsoft Visual C++ Redistributable is not installed, would you like to download it?' + ), + t('Download'), + () => { + BrowserOpenURL('https://aka.ms/vs/16/release/vc_redist.x64.exe') + } + ) } else { - toast(depErrorMsg, { type: 'info', position: 'bottom-left' }); + toast(depErrorMsg, { type: 'info', position: 'bottom-left' }) if (commonStore.platform !== 'linux') - toastWithButton(t('Python dependencies are incomplete, would you like to install them?'), t('Install'), () => { - InstallPyDep(commonStore.settings.customPythonPath, commonStore.settings.cnMirror).catch((e) => { - const errMsg = e.message || e; - toast(t('Error') + ' - ' + errMsg, { type: 'error' }); - }); - setTimeout(WindowShow, 1000); - }, { - autoClose: 8000 - }); + toastWithButton( + t( + 'Python dependencies are incomplete, would you like to install them?' + ), + t('Install'), + () => { + InstallPyDep( + commonStore.settings.customPythonPath, + commonStore.settings.cnMirror + ).catch((e) => { + const errMsg = e.message || e + toast(t('Error') + ' - ' + errMsg, { type: 'error' }) + }) + setTimeout(WindowShow, 1000) + }, + { + autoClose: 8000, + } + ) else - toastWithButton(t('On Linux system, you must manually install python dependencies.'), t('Check'), () => { - BrowserOpenURL('https://github.com/josStorer/RWKV-Runner/blob/master/build/linux/Readme_Install.txt'); - }); + toastWithButton( + t( + 'On Linux system, you must manually install python dependencies.' + ), + t('Check'), + () => { + BrowserOpenURL( + 'https://github.com/josStorer/RWKV-Runner/blob/master/build/linux/Readme_Install.txt' + ) + } + ) } } else { - toast(depErrorMsg, { type: 'error' }); + toast(depErrorMsg, { type: 'error' }) } - }); + }) if (depErrorMsg) { - commonStore.setStatus({ status: ModelStatus.Offline }); - return false; + commonStore.setStatus({ status: ModelStatus.Offline }) + return false } - commonStore.setDepComplete(true); + commonStore.setDepComplete(true) } - return true; -}; + return true +} -export function toastWithButton(text: string, buttonText: string, onClickButton: () => void, options?: ToastOptions) { - let triggered = false; +export function toastWithButton( + text: string, + buttonText: string, + onClickButton: () => void, + options?: ToastOptions +) { + let triggered = false const id = toast(
{text}
- +
, { type: 'info', - ...options - }); - return id; + ...options, + } + ) + 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; + if ( + commonStore.settings.useHfMirror && + url.includes('huggingface.co') && + url.includes('resolve') + ) + return url.replace('huggingface.co', 'hf-mirror.com') + return url } export function refreshTracksTotalTime() { if (commonStore.tracks.length === 0) { - commonStore.setTrackTotalTime(tracksMinimalTotalTime); - commonStore.setTrackCurrentTime(0); - commonStore.setTrackPlayStartTime(0); - return; + commonStore.setTrackTotalTime(tracksMinimalTotalTime) + commonStore.setTrackCurrentTime(0) + commonStore.setTrackPlayStartTime(0) + return } - const endTimes = commonStore.tracks.map(t => t.offsetTime + t.contentTime); - const totalTime = Math.max(...endTimes) + tracksMinimalTotalTime; + const endTimes = commonStore.tracks.map((t) => t.offsetTime + t.contentTime) + const totalTime = Math.max(...endTimes) + tracksMinimalTotalTime if (commonStore.trackPlayStartTime > totalTime) - commonStore.setTrackPlayStartTime(totalTime); - commonStore.setTrackTotalTime(totalTime); + commonStore.setTrackPlayStartTime(totalTime) + commonStore.setTrackTotalTime(totalTime) } export function getMidiRawContentTime(rawContent: MidiMessage[]) { - return rawContent.reduce((sum, current) => - sum + (current.messageType === 'ElapsedTime' ? current.value : 0) - , 0); + return rawContent.reduce( + (sum, current) => + sum + (current.messageType === 'ElapsedTime' ? current.value : 0), + 0 + ) } export function getMidiRawContentMainInstrument(rawContent: MidiMessage[]) { - const sortedInstrumentFrequency = Object.entries(rawContent - .filter(c => c.messageType === 'NoteOn') - .map(c => c.instrument) - .reduce((frequencyCount, current) => (frequencyCount[current] = (frequencyCount[current] || 0) + 1, frequencyCount) - , {} as { - [key: string]: number - })) - .sort((a, b) => b[1] - a[1]); - let mainInstrument: string = ''; + const sortedInstrumentFrequency = Object.entries( + rawContent + .filter((c) => c.messageType === 'NoteOn') + .map((c) => c.instrument) + .reduce( + (frequencyCount, current) => ( + (frequencyCount[current] = (frequencyCount[current] || 0) + 1), + frequencyCount + ), + {} as { + [key: string]: number + } + ) + ).sort((a, b) => b[1] - a[1]) + let mainInstrument: string = '' if (sortedInstrumentFrequency.length > 0) - mainInstrument = InstrumentTypeNameMap[Number(sortedInstrumentFrequency[0][0])]; - return mainInstrument; + mainInstrument = + InstrumentTypeNameMap[Number(sortedInstrumentFrequency[0][0])] + return mainInstrument } export function flushMidiRecordingContent() { - const recordingTrackIndex = commonStore.tracks.findIndex(t => t.id === commonStore.recordingTrackId); + const recordingTrackIndex = commonStore.tracks.findIndex( + (t) => t.id === commonStore.recordingTrackId + ) if (recordingTrackIndex >= 0) { - const recordingTrack = commonStore.tracks[recordingTrackIndex]; - const tracks = commonStore.tracks.slice(); + const recordingTrack = commonStore.tracks[recordingTrackIndex] + const tracks = commonStore.tracks.slice() tracks[recordingTrackIndex] = { ...recordingTrack, content: commonStore.recordingContent, rawContent: commonStore.recordingRawContent, contentTime: getMidiRawContentTime(commonStore.recordingRawContent), - mainInstrument: getMidiRawContentMainInstrument(commonStore.recordingRawContent) - }; - commonStore.setTracks(tracks); - refreshTracksTotalTime(); + mainInstrument: getMidiRawContentMainInstrument( + commonStore.recordingRawContent + ), + } + commonStore.setTracks(tracks) + refreshTracksTotalTime() } - commonStore.setRecordingContent(''); - commonStore.setRecordingRawContent([]); + commonStore.setRecordingContent('') + commonStore.setRecordingRawContent([]) } export async function getSoundFont() { - let soundUrl: string; + let soundUrl: string if (commonStore.compositionParams.useLocalSoundFont) - soundUrl = 'assets/sound-font'; + soundUrl = 'assets/sound-font' else - soundUrl = !commonStore.settings.giteeUpdatesSource ? - `https://raw.githubusercontent.com/josStorer/sgm_plus/master` : - `https://cdn.jsdelivr.net/gh/josstorer/sgm_plus`; - const fallbackUrl = 'https://cdn.jsdelivr.net/gh/josstorer/sgm_plus'; - await fetch(soundUrl + '/soundfont.json').then(r => { - if (!r.ok) - soundUrl = fallbackUrl; - }).catch(() => soundUrl = fallbackUrl); - return soundUrl; + soundUrl = !commonStore.settings.giteeUpdatesSource + ? `https://raw.githubusercontent.com/josStorer/sgm_plus/master` + : `https://cdn.jsdelivr.net/gh/josstorer/sgm_plus` + const fallbackUrl = 'https://cdn.jsdelivr.net/gh/josstorer/sgm_plus' + await fetch(soundUrl + '/soundfont.json') + .then((r) => { + if (!r.ok) soundUrl = fallbackUrl + }) + .catch(() => (soundUrl = fallbackUrl)) + return soundUrl } export const setActivePreset = (preset: Preset | null, index: number) => { - commonStore.setActivePreset(preset); - commonStore.setActivePresetIndex(index); + commonStore.setActivePreset(preset) + commonStore.setActivePresetIndex(index) //TODO if (preset.displayPresetMessages) { - const { pushMessage, saveConversation } = newChatConversation(); + const { pushMessage, saveConversation } = newChatConversation() if (preset) for (const message of preset.messages) { - pushMessage(message.role, message.content); + pushMessage(message.role, message.content) } - saveConversation(); + saveConversation() //} -}; +} 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))) - return isBeta ? - './backend-python/wkv_cuda_utils/beta/wkv_cuda10_30.pyd' : - './backend-python/wkv_cuda_utils/wkv_cuda10_30.pyd'; - else if ([' 40', 'RTX 5000 Ada', 'RTX 6000 Ada', 'RTX TITAN Ada', 'NVIDIA L40'].some(v => commonStore.status.device_name.includes(v))) - return isBeta ? - './backend-python/wkv_cuda_utils/beta/wkv_cuda40.pyd' : - './backend-python/wkv_cuda_utils/wkv_cuda40.pyd'; - else - return ''; + 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)) + ) + return isBeta + ? './backend-python/wkv_cuda_utils/beta/wkv_cuda10_30.pyd' + : './backend-python/wkv_cuda_utils/wkv_cuda10_30.pyd' + else if ( + [' 40', 'RTX 5000 Ada', 'RTX 6000 Ada', 'RTX TITAN Ada', 'NVIDIA L40'].some( + (v) => commonStore.status.device_name.includes(v) + ) + ) + return isBeta + ? './backend-python/wkv_cuda_utils/beta/wkv_cuda40.pyd' + : './backend-python/wkv_cuda_utils/wkv_cuda40.pyd' + else return '' } // a wrapper for webOpenOpenFileDialog and OpenOpenFileDialog export function OpenFileDialog(filterPattern: string): Promise { return new Promise((resolve) => { - OpenOpenFileDialog(filterPattern).then(async filePath => { - if (!filePath) - return; + OpenOpenFileDialog(filterPattern) + .then(async (filePath) => { + if (!filePath) return - let blob: Blob; + let blob: Blob if (commonStore.platform === 'web') - blob = (filePath as unknown as { blob: Blob }).blob; - else - blob = await fetch(absPathAsset(filePath)).then(r => r.blob()); - - resolve(blob); - }).catch(e => { - toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 }); - }); - } - ); + blob = (filePath as unknown as { blob: Blob }).blob + else blob = await fetch(absPathAsset(filePath)).then((r) => r.blob()) + + resolve(blob) + }) + .catch((e) => { + toast(t('Error') + ' - ' + (e.message || e), { + type: 'error', + autoClose: 2500, + }) + }) + }) } export function newChatConversation() { - const conversation: Conversation = {}; - const conversationOrder: string[] = []; + const conversation: Conversation = {} + const conversationOrder: string[] = [] const pushMessage = (role: Role, content: string) => { - const newUuid = uuid(); - conversationOrder.push(newUuid); + const newUuid = uuid() + conversationOrder.push(newUuid) conversation[newUuid] = { - sender: role === 'user' ? userName : role === 'assistant' ? botName : systemName, + sender: + role === 'user' + ? userName + : role === 'assistant' + ? botName + : systemName, type: MessageType.Normal, color: role === 'user' ? 'brand' : 'neutral', avatarImg: role === 'user' ? undefined : logo, time: new Date().toISOString(), content: content, - side: role === 'user' ? 'right' : role === 'assistant' ? 'left' : 'center', - done: true - }; - }; + side: + role === 'user' ? 'right' : role === 'assistant' ? 'left' : 'center', + done: true, + } + } const saveConversation = () => { - commonStore.setConversation(conversation); - commonStore.setConversationOrder(conversationOrder); - }; - return { pushMessage, saveConversation }; + commonStore.setConversation(conversation) + commonStore.setConversationOrder(conversationOrder) + } + return { pushMessage, saveConversation } } export function isDynamicStateSupported(modelConfig: ModelConfig) { - return modelConfig.modelParameters.device === 'CUDA' || + return ( + modelConfig.modelParameters.device === 'CUDA' || modelConfig.modelParameters.device === 'CPU' || modelConfig.modelParameters.device === 'Custom' || - modelConfig.modelParameters.device === 'MPS'; -} \ No newline at end of file + modelConfig.modelParameters.device === 'MPS' + ) +} diff --git a/frontend/src/utils/web-file-operations.ts b/frontend/src/utils/web-file-operations.ts index 532683d9..15c983c4 100644 --- a/frontend/src/utils/web-file-operations.ts +++ b/frontend/src/utils/web-file-operations.ts @@ -1,77 +1,85 @@ -import { getDocument, GlobalWorkerOptions, PDFDocumentProxy } from 'pdfjs-dist'; -import { TextItem } from 'pdfjs-dist/types/src/display/api'; +import { getDocument, GlobalWorkerOptions, PDFDocumentProxy } from 'pdfjs-dist' +import { TextItem } from 'pdfjs-dist/types/src/display/api' -export function webOpenOpenFileDialog(filterPattern: string, fnStartLoading: Function | undefined): Promise<{ - blob: File, +export function webOpenOpenFileDialog( + filterPattern: string, + fnStartLoading: Function | undefined +): Promise<{ + blob: File content?: string }> { return new Promise((resolve, reject) => { - const input = document.createElement('input'); - input.type = 'file'; + const input = document.createElement('input') + input.type = 'file' input.accept = filterPattern - .replaceAll('*.txt', 'text/plain') - .replace('*.midi', 'audio/midi') - .replace('*.mid', 'audio/midi') - .replaceAll('*.', 'application/') - .replaceAll(';', ','); + .replaceAll('*.txt', 'text/plain') + .replace('*.midi', 'audio/midi') + .replace('*.mid', 'audio/midi') + .replaceAll('*.', 'application/') + .replaceAll(';', ',') - input.onchange = async e => { - const file = (e.target as HTMLInputElement).files?.[0]; + input.onchange = async (e) => { + const file = (e.target as HTMLInputElement).files?.[0] if (!file) return if (fnStartLoading && typeof fnStartLoading === 'function') - fnStartLoading(); + fnStartLoading() if (!GlobalWorkerOptions.workerSrc && file.type === 'application/pdf') // @ts-ignore - GlobalWorkerOptions.workerSrc = await import('pdfjs-dist/build/pdf.worker.min.mjs'); + GlobalWorkerOptions.workerSrc = await import( + 'pdfjs-dist/build/pdf.worker.min.mjs' + ) if (file.type === 'text/plain') { - const reader = new FileReader(); - reader.readAsText(file, 'UTF-8'); + const reader = new FileReader() + reader.readAsText(file, 'UTF-8') - reader.onload = event => { - const content = event.target?.result as string; + reader.onload = (event) => { + const content = event.target?.result as string resolve({ blob: file, - content: content - }); - }; - reader.onerror = reject; + content: content, + }) + } + reader.onerror = reject } else if (file.type === 'application/pdf') { const readPDFPage = async (doc: PDFDocumentProxy, pageNo: number) => { - const page = await doc.getPage(pageNo); - const tokenizedText = await page.getTextContent(); - return tokenizedText.items.map(token => (token as TextItem).str).join(''); - }; - let reader = new FileReader(); - reader.readAsArrayBuffer(file); + const page = await doc.getPage(pageNo) + const tokenizedText = await page.getTextContent() + return tokenizedText.items + .map((token) => (token as TextItem).str) + .join('') + } + let reader = new FileReader() + reader.readAsArrayBuffer(file) reader.onload = async (event) => { try { - const doc = await getDocument(event.target?.result!).promise; - const pageTextPromises = []; + const doc = await getDocument(event.target?.result!).promise + const pageTextPromises = [] for (let pageNo = 1; pageNo <= doc.numPages; pageNo++) { - pageTextPromises.push(readPDFPage(doc, pageNo)); + pageTextPromises.push(readPDFPage(doc, pageNo)) } - const pageTexts = await Promise.all(pageTextPromises); - let content; - if (pageTexts.length === 1) - content = pageTexts[0]; + const pageTexts = await Promise.all(pageTextPromises) + let content + if (pageTexts.length === 1) content = pageTexts[0] else - content = pageTexts.map((p, i) => `Page ${i + 1}:\n${p}`).join('\n\n'); + content = pageTexts + .map((p, i) => `Page ${i + 1}:\n${p}`) + .join('\n\n') resolve({ blob: file, - content: content - }); + content: content, + }) } catch (err) { - reject(err); + reject(err) } - }; - reader.onerror = reject; + } + reader.onerror = reject } else { resolve({ - blob: file - }); + blob: file, + }) } - }; - input.click(); - }); -} \ No newline at end of file + } + input.click() + }) +} diff --git a/frontend/src/webWails.js b/frontend/src/webWails.js index c96d37d2..5d235453 100644 --- a/frontend/src/webWails.js +++ b/frontend/src/webWails.js @@ -13,16 +13,11 @@ if (!window.runtime) { document.title += ' WebUI' // not implemented - defineRuntime('EventsOnMultiple', () => { - }) - defineRuntime('WindowSetLightTheme', () => { - }) - defineRuntime('WindowSetDarkTheme', () => { - }) - defineRuntime('WindowShow', () => { - }) - defineRuntime('WindowHide', () => { - }) + defineRuntime('EventsOnMultiple', () => {}) + defineRuntime('WindowSetLightTheme', () => {}) + defineRuntime('WindowSetDarkTheme', () => {}) + defineRuntime('WindowShow', () => {}) + defineRuntime('WindowHide', () => {}) // implemented defineRuntime('ClipboardGetText', async () => { @@ -46,64 +41,35 @@ if (!window.go) { window.go['backend_golang']['App'] = {} // not implemented - defineApp('AddToDownloadList', async () => { - }) - defineApp('CloseMidiPort', 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('OpenMidiPort', async () => { - }) - defineApp('PauseDownload', async () => { - }) - defineApp('PlayNote', 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 () => { - }) + defineApp('AddToDownloadList', async () => {}) + defineApp('CloseMidiPort', 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('OpenMidiPort', async () => {}) + defineApp('PauseDownload', async () => {}) + defineApp('PlayNote', 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 () => { @@ -122,24 +88,34 @@ if (!window.go) { return 0 }) defineApp('OpenOpenFileDialog', webOpenOpenFileDialog) - 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( + '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) => { const data = JSON.parse(localStorage.getItem(fileName)) - if (data) - return data - else - throw new Error('File not found') + if (data) return data + else throw new Error('File not found') }) defineApp('SaveJson', async (fileName, data) => { localStorage.setItem(fileName, JSON.stringify(data)) }) -} \ No newline at end of file +} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index f955ad58..e9ce6b43 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -56,42 +56,29 @@ const markdownElements = [ 's', 'a', 'pre', - 'cite' + 'cite', ] -const markdownPseudoElements = [ - '::marker', - '::before', - '::after' -] +const markdownPseudoElements = ['::marker', '::before', '::after'] -const tableElements = [ - 'table', - 'tr', - 'td', - 'th', - 'thead', - 'tbody', - 'tfoot' -] +const tableElements = ['table', 'tr', 'td', 'th', 'thead', 'tbody', 'tfoot'] const proseStyles = { - color: 'inherit' + color: 'inherit', } const tableProseStyles = { ...proseStyles, borderWidth: 'thin', - borderColor: '#d2d2d5' + borderColor: '#d2d2d5', } const elementsStyles = markdownElements.reduce((acc, element) => { let styles = proseStyles - if (tableElements.includes(element)) - styles = tableProseStyles + if (tableElements.includes(element)) styles = tableProseStyles acc[element] = styles - markdownPseudoElements.forEach(pseudo => { + markdownPseudoElements.forEach((pseudo) => { acc[element + pseudo] = styles }) return acc @@ -99,10 +86,7 @@ const elementsStyles = markdownElements.reduce((acc, element) => { /** @type {import('tailwindcss').Config} */ export default { - content: [ - './index.html', - './src/**/*.{js,ts,jsx,tsx}' - ], + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { typography: { @@ -110,12 +94,11 @@ export default { css: { color: 'inherit', fontSize: 'inherit', - ...elementsStyles - } - } - } - } + ...elementsStyles, + }, + }, + }, + }, }, - plugins: [require('@tailwindcss/typography')] + plugins: [require('@tailwindcss/typography')], } - diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 823e83d1..c7b97298 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -2,11 +2,7 @@ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, - "lib": [ - "DOM", - "DOM.Iterable", - "ESNext" - ], + "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": true, "esModuleInterop": false, @@ -20,9 +16,7 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ], + "include": ["src"], "references": [ { "path": "./tsconfig.node.json" diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json index b8afcc8f..9d31e2ae 100644 --- a/frontend/tsconfig.node.json +++ b/frontend/tsconfig.node.json @@ -5,7 +5,5 @@ "moduleResolution": "Node", "allowSyntheticDefaultImports": true }, - "include": [ - "vite.config.ts" - ] + "include": ["vite.config.ts"] } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 24b2b541..aafcc1cb 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,19 +1,26 @@ +import react from '@vitejs/plugin-react' +import { visualizer } from 'rollup-plugin-visualizer' +import { defineConfig } from 'vite' +import topLevelAwait from 'vite-plugin-top-level-await' // @ts-ignore -import { dependencies } from './package.json'; -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; -import { visualizer } from 'rollup-plugin-visualizer'; -import topLevelAwait from 'vite-plugin-top-level-await'; +import { dependencies } from './package.json' // dependencies that exist anywhere const vendor = [ - 'react', 'react-dom', 'react-router', 'react-router-dom', + 'react', + 'react-dom', + 'react-router', + 'react-router-dom', '@fluentui/react-icons', - 'mobx', 'mobx-react-lite', - 'i18next', 'react-i18next', - 'usehooks-ts', 'react-toastify', - 'classnames', 'lodash-es' -]; + 'mobx', + 'mobx-react-lite', + 'i18next', + 'react-i18next', + 'usehooks-ts', + 'react-toastify', + 'classnames', + 'lodash-es', +] const embedded = [ // split @fluentui/react-components by components @@ -22,17 +29,25 @@ const embedded = [ // dependencies that exist in single component 'react-beautiful-dnd', 'react-draggable', - '@magenta/music', 'html-midi-player', - 'react-markdown', 'rehype-highlight', 'rehype-raw', 'remark-breaks', 'remark-gfm', 'remark-math', 'rehype-katex', 'katex' -]; + '@magenta/music', + 'html-midi-player', + 'react-markdown', + 'rehype-highlight', + 'rehype-raw', + 'remark-breaks', + 'remark-gfm', + 'remark-math', + 'rehype-katex', + 'katex', +] function renderChunks(deps: Record) { - let chunks = {}; + let chunks = {} Object.keys(deps).forEach((key) => { - if ([...vendor, ...embedded].includes(key)) return; - chunks[key] = [key]; - }); - return chunks; + if ([...vendor, ...embedded].includes(key)) return + chunks[key] = [key] + }) + return chunks } // https://vitejs.dev/config/ @@ -42,12 +57,12 @@ export default defineConfig({ visualizer({ template: 'treemap', gzipSize: true, - brotliSize: true + brotliSize: true, }), topLevelAwait({ promiseExportName: '__tla', - promiseImportName: i => `__tla_${i}` - }) + promiseImportName: (i) => `__tla_${i}`, + }), ], build: { chunkSizeWarningLimit: 3000, @@ -55,12 +70,12 @@ export default defineConfig({ output: { manualChunks: { vendor, - ...renderChunks(dependencies) + ...renderChunks(dependencies), }, entryFileNames: `assets/[name].js`, chunkFileNames: `assets/[name].js`, - assetFileNames: `assets/[name].[ext]` - } - } - } -}); + assetFileNames: `assets/[name].[ext]`, + }, + }, + }, +})