theluyuan/RWKV-Runner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic abc frontend support

Browse Source
This commit is contained in:
josc146 2024-01-05 13:47:00 +08:00
parent 62350d975d
commit e3b3452a73
3 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/package-lock.json generated
View File

@ -13,6 +13,7 @@
"@magenta/music": "^1.23.1",
"@microsoft/fetch-event-source": "^2.0.1",
"@primer/octicons-react": "^19.1.0",
"abcjs": "^6.2.3",
"chart.js": "^4.3.0",
"classnames": "^2.3.2",
"file-saver": "^2.0.5",
@ -2690,6 +2691,15 @@
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"optional": true
},
"node_modules/abcjs": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/abcjs/-/abcjs-6.2.3.tgz",
"integrity": "sha512-epu8C1yRkxV7Ss9hS0Bu72rairl1p2sR3hviVowjtdDJvb5GRE0SrB4TtN4HBbaoYhvxGnSZQxGULfQlW3o3RQ==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/paulrosen"
}
},
"node_modules/acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",

1
frontend/package.json
View File

@ -14,6 +14,7 @@
"@magenta/music": "^1.23.1",
"@microsoft/fetch-event-source": "^2.0.1",
"@primer/octicons-react": "^19.1.0",
"abcjs": "^6.2.3",
"chart.js": "^4.3.0",
"classnames": "^2.3.2",
"file-saver": "^2.0.5",

43
frontend/src/pages/Composition.tsx
View File

@ -21,6 +21,7 @@ import {
FileExists,
OpenFileFolder,
OpenMidiPort,
OpenSaveFileDialog,
OpenSaveFileDialogBytes,
SaveFile,
StartFile
@ -36,7 +37,9 @@ const CompositionPanel: FC = observer(() => {
const { t } = useTranslation();
const mq = useMediaQuery('(min-width: 640px)');
const inputRef = useRef<HTMLTextAreaElement>(null);
const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
const modelConfig = commonStore.getCurrentModelConfig();
const port = modelConfig.apiParameters.apiPort;
const isABC = modelConfig.modelParameters.modelName.toLowerCase().includes('abc');
const visualizerRef = useRef<VisualizerElement>(null);
const playerRef = useRef<PlayerElement>(null);
@ -133,6 +136,13 @@ const CompositionPanel: FC = observer(() => {
}, [commonStore.midiPorts]);
const generateNs = (autoPlay: boolean) => {
if (commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('abc')) {
import('abcjs').then(ABCJS => {
ABCJS.renderAbc('abc-paper', commonStore.compositionParams.prompt, { responsive: 'resize' });
});
return;
}
fetch(getServerRoot(port) + '/text-to-midi', {
method: 'POST',
headers: {
@ -396,18 +406,33 @@ const CompositionPanel: FC = observer(() => {
</div>
<div className="flex flex-col">
<div className="ml-auto mr-auto">
<midi-visualizer
ref={visualizerRef}
type="waterfall"
/>
{isABC ? <div /> :
<midi-visualizer
ref={visualizerRef}
type="waterfall"
/>}
</div>
<div className="flex">
<midi-player
ref={playerRef}
style={{ width: '100%' }}
/>
{isABC ? <div className="flex flex-col overflow-y-auto grow m-1" style={{ maxHeight: '260px' }}>
<div id="abc-paper" />
</div> :
<midi-player
ref={playerRef}
style={{ width: '100%' }}
/>}
<Button icon={<Save28Regular />} size={mq ? 'large' : 'medium'} appearance={mq ? 'secondary' : 'subtle'}
onClick={() => {
if (isABC) {
OpenSaveFileDialog('*.txt', 'abc-music.txt', commonStore.compositionParams.prompt).then((path) => {
if (path)
toastWithButton(t('File Saved'), t('Open'), () => {
OpenFileFolder(path, false);
});
}).catch((e) => {
toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
});
return;
}
if (params.midi) {
OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => {
if (path)