add Composition Page (RWKV-Music)

frontend/package.json

@@ -11,11 +11,13 @@
   "dependencies": {
     "@fluentui/react-components": "^9.20.0",
     "@fluentui/react-icons": "^2.0.201",
+    "@magenta/music": "^1.23.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@primer/octicons-react": "^19.1.0",
     "chart.js": "^4.3.0",
     "classnames": "^2.3.2",
     "github-markdown-css": "^5.2.0",
+    "html-midi-player": "^1.5.0",
     "i18next": "^22.4.15",
     "mobx": "^6.9.0",
     "mobx-react-lite": "^3.4.3",

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

@@ -234,5 +234,11 @@
   "Failed to merge model": "合并模型失败",
   "The data path should be a directory or a file in jsonl format (more formats will be supported in the future).\n\nWhen you provide a directory path, all the txt files within that directory will be automatically converted into training data. This is commonly used for large-scale training in writing, code generation, or knowledge bases.\n\nThe jsonl format file can be referenced at https://github.com/Abel2076/json2binidx_tool/blob/main/sample.jsonl.\nYou can also write it similar to OpenAI's playground format, as shown in https://platform.openai.com/playground/p/default-chat.\nEven for multi-turn conversations, they must be written in a single line using `\\n` to indicate line breaks. If they are different dialogues or topics, they should be written in separate lines.": "数据路径必须是一个文件夹，或者jsonl格式文件 (未来会支持更多格式)\n\n当你填写的路径是一个文件夹时，该文件夹内的所有txt文件会被自动转换为训练数据，通常这用于大批量训练写作，代码生成或知识库\n\njsonl文件的格式参考 https://github.com/Abel2076/json2binidx_tool/blob/main/sample.jsonl\n你也可以仿照openai的playground编写，参考 https://platform.openai.com/playground/p/default-chat\n即使是多轮对话也必须写在一行，用`\\n`表示换行，如果是不同对话或主题，则另起一行",
   "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.": "尺寸不匹配块。你正在尝试从LoRA模型继续训练，但该LoRA模型与基底模型不匹配，请将LoRA模型设为空",
-  "Instruction: Write a story using the following information\n\nInput: A man named Alex chops a tree down\n\nResponse:": "Instruction: Write a story using the following information\n\nInput: 艾利克斯砍倒了一棵树\n\nResponse:"
+  "Instruction: Write a story using the following information\n\nInput: A man named Alex chops a tree down\n\nResponse:": "Instruction: Write a story using the following information\n\nInput: 艾利克斯砍倒了一棵树\n\nResponse:",
+  "Composition": "作曲",
+  "Use Local Sound Font": "使用本地音色资源",
+  "Auto Play At The End": "结束时自动播放",
+  "No File to save": "无文件可保存",
+  "File Saved": "文件已保存",
+  "Failed to load local sound font, please check if the files exist - assets/sound-font": "加载本地音色资源失败，请检查文件是否存在 - assets/sound-font"
 }

frontend/src/components/ResetConfigsButton.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ArrowReset20Regular } from '@fluentui/react-icons';
 import commonStore from '../stores/commonStore';
 
-import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultModelConfigs';
+import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultConfigs';
 
 export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => {
   const { t } = useTranslation();

frontend/src/main.tsx

@@ -6,6 +6,7 @@ import App from './App';
 import { HashRouter } from 'react-router-dom';
 import { startup } from './startup';
 import './_locales/i18n-react';
+import 'html-midi-player';
 import { WindowShow } from '../wailsjs/runtime';
 
 startup().then(() => {

frontend/src/pages/Completion.tsx

@@ -13,6 +13,7 @@ import { DialogButton } from '../components/DialogButton';
 import { PresetsButton } from './PresetsManager/PresetsButton';
 import { ToolTipButton } from '../components/ToolTipButton';
 import { ArrowSync20Regular } from '@fluentui/react-icons';
+import { defaultPresets } from './defaultConfigs';
 
 export type CompletionParams = Omit<ApiParameters, 'apiPort'> & {
   stop: string,
@@ -26,112 +27,6 @@ export type CompletionPreset = {
   params: CompletionParams
 }
 
-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.\nChapter 1.\n',
-  params: {
-    maxResponseToken: 500,
-    temperature: 1.2,
-    topP: 0.5,
-    presencePenalty: 0.4,
-    frequencyPenalty: 0.4,
-    stop: '\\n\\nUser',
-    injectStart: '',
-    injectEnd: ''
-  }
-}, {
-  name: 'Translator',
-  prompt: 'Translate this into Chinese.\n\nEnglish: 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\nUser: Hello.\n\nAssistant: I\'m here, meow~.\n\nUser: 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\nAssistant: 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\nUser: Okay, I understand. Let\'s begin. Please assign me a role. Am I the Seer, Werewolf, Villager, or Bodyguard?\n\nAssistant: You are the Seer. Now that night has fallen, please choose a player to check his identity.\n\nUser: 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',
-  prompt: 'Instruction: Write a story using the following information\n\nInput: A man named Alex chops a tree down\n\nResponse:',
-  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: ''
-  }
-}];
-
 let completionSseController: AbortController | null = null;
 
 const CompletionPanel: FC = observer(() => {

frontend/src/pages/Composition.tsx

@@ -0,0 +1,345 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { WorkHeader } from '../components/WorkHeader';
+import { Button, Checkbox, Textarea } from '@fluentui/react-components';
+import { Labeled } from '../components/Labeled';
+import { ValuedSlider } from '../components/ValuedSlider';
+import { useTranslation } from 'react-i18next';
+import commonStore, { ModelStatus } from '../stores/commonStore';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { toast } from 'react-toastify';
+import { DialogButton } from '../components/DialogButton';
+import { ToolTipButton } from '../components/ToolTipButton';
+import { ArrowSync20Regular, Save28Regular } from '@fluentui/react-icons';
+import { PlayerElement, VisualizerElement } from 'html-midi-player';
+import * as mm from '@magenta/music/esm/core.js';
+import { NoteSequence } from '@magenta/music/esm/protobuf.js';
+import { defaultCompositionPrompt } from './defaultConfigs';
+import { FileExists, OpenFileFolder, OpenSaveFileDialogBytes } from '../../wailsjs/go/backend_golang/App';
+import { toastWithButton } from '../utils';
+
+export type CompositionParams = {
+  prompt: string,
+  maxResponseToken: number,
+  temperature: number,
+  topP: number,
+  autoPlay: boolean,
+  useLocalSoundFont: boolean,
+  midi: ArrayBuffer | null,
+  ns: NoteSequence | null
+}
+
+let compositionSseController: AbortController | null = null;
+
+const CompositionPanel: FC = observer(() => {
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
+  const visualizerRef = useRef<VisualizerElement>(null);
+  const playerRef = useRef<PlayerElement>(null);
+
+  const scrollToBottom = () => {
+    if (inputRef.current)
+      inputRef.current.scrollTop = inputRef.current.scrollHeight;
+  };
+
+  const params = commonStore.compositionParams;
+  const setParams = (newParams: Partial<CompositionParams>) => {
+    commonStore.setCompositionParams({
+      ...commonStore.compositionParams,
+      ...newParams
+    });
+  };
+
+  const setPrompt = (prompt: string) => {
+    setParams({
+      prompt
+    });
+    if (!commonStore.compositionGenerating)
+      generateNs(false);
+  };
+
+  const updateNs = (ns: NoteSequence | null) => {
+    if (playerRef.current) {
+      playerRef.current.noteSequence = ns;
+      playerRef.current.reload();
+    }
+    if (visualizerRef.current) {
+      visualizerRef.current.noteSequence = ns;
+      visualizerRef.current.reload();
+    }
+  };
+
+  const setSoundFont = async () => {
+    let soundUrl: string;
+    if (params.useLocalSoundFont)
+      soundUrl = 'assets/sound-font';
+    else
+      soundUrl = !commonStore.settings.giteeUpdatesSource ?
+        `https://raw.githubusercontent.com/josStorer/sgm_plus/master` :
+        `https://gitee.com/josc146/sgm_plus/raw/master`;
+    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);
+    if (playerRef.current) {
+      playerRef.current.soundFont = soundUrl;
+    }
+  };
+
+  useEffect(() => {
+    if (inputRef.current)
+      inputRef.current.style.height = '100%';
+    scrollToBottom();
+
+    if (playerRef.current && visualizerRef.current) {
+      playerRef.current.addVisualizer(visualizerRef.current);
+      playerRef.current.addEventListener('start', () => {
+        visualizerRef.current?.reload();
+      });
+      setSoundFont().then(() => {
+        updateNs(params.ns);
+      });
+
+      const button = playerRef.current.shadowRoot?.querySelector('.controls .play') as HTMLElement | null;
+      if (button)
+        button.style.background = '#f2f5f6';
+    }
+  }, []);
+
+  const generateNs = (autoPlay: boolean) => {
+    fetch(commonStore.settings.apiUrl ?
+      commonStore.settings.apiUrl + '/text-to-midi' :
+      `http://127.0.0.1:${port}/text-to-midi`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        'text': params.prompt.replaceAll(/<pad>|<start>|<end>/g, '').replaceAll('  ', '').trim()
+      })
+    }).then(r => {
+      r.arrayBuffer().then(midi => {
+        const ns = mm.midiToSequenceProto(midi);
+        setParams({
+          midi,
+          ns
+        });
+        updateNs(ns);
+        if (autoPlay) {
+          playerRef.current?.start();
+        }
+      });
+    });
+  };
+
+  const onSubmit = (prompt: string) => {
+    commonStore.setCompositionSubmittedPrompt(prompt);
+
+    if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl) {
+      toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
+      commonStore.setCompositionGenerating(false);
+      return;
+    }
+
+    let answer = '';
+    compositionSseController = new AbortController();
+    fetchEventSource( // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/completions
+      commonStore.settings.apiUrl ?
+        commonStore.settings.apiUrl + '/v1/completions' :
+        `http://127.0.0.1:${port}/completions`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${commonStore.settings.apiKey}`
+        },
+        body: JSON.stringify({
+          prompt,
+          stream: true,
+          model: commonStore.settings.apiCompletionModelName, // 'text-davinci-003'
+          max_tokens: params.maxResponseToken,
+          temperature: params.temperature,
+          top_p: params.topP
+        }),
+        signal: compositionSseController?.signal,
+        onmessage(e) {
+          scrollToBottom();
+          if (e.data.trim() === '[DONE]') {
+            commonStore.setCompositionGenerating(false);
+            generateNs(params.autoPlay);
+            return;
+          }
+          let data;
+          try {
+            data = JSON.parse(e.data);
+          } catch (error) {
+            console.debug('json error', error);
+            return;
+          }
+          if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
+            answer += data.choices[0]?.text || data.choices[0]?.delta?.content || '';
+            setPrompt(prompt + answer.replace(/\s+$/, ''));
+          }
+        },
+        async onopen(response) {
+          if (response.status !== 200) {
+            toast(response.statusText + '\n' + (await response.text()), {
+              type: 'error'
+            });
+          }
+        },
+        onclose() {
+          console.log('Connection closed');
+        },
+        onerror(err) {
+          err = err.message || err;
+          if (err && !err.includes('ReadableStreamDefaultReader'))
+            toast(err, {
+              type: 'error'
+            });
+          commonStore.setCompositionGenerating(false);
+          throw err;
+        }
+      });
+  };
+
+  return (
+    <div className="flex flex-col gap-2 overflow-hidden grow">
+      <div className="flex flex-col sm:flex-row gap-2 overflow-hidden grow">
+        <Textarea
+          ref={inputRef}
+          className="grow"
+          value={params.prompt}
+          onChange={(e) => {
+            commonStore.setCompositionSubmittedPrompt(e.target.value);
+            setPrompt(e.target.value);
+          }}
+        />
+        <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full overflow-x-hidden overflow-y-auto p-1">
+          <Labeled flex breakline label={t('Max Response Token')}
+            desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
+            content={
+              <ValuedSlider value={params.maxResponseToken} min={100} max={4100}
+                step={100}
+                input
+                onChange={(e, data) => {
+                  setParams({
+                    maxResponseToken: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Temperature')}
+            desc={t('Sampling temperature, it\'s like giving alcohol to a model, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
+            content={
+              <ValuedSlider value={params.temperature} min={0} max={2} step={0.1}
+                input
+                onChange={(e, data) => {
+                  setParams({
+                    temperature: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Top_P')}
+            desc={t('Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
+            content={
+              <ValuedSlider value={params.topP} min={0} max={1} step={0.1} input
+                onChange={(e, data) => {
+                  setParams({
+                    topP: data.value
+                  });
+                }} />
+            } />
+          <div className="grow" />
+          <Checkbox className="select-none"
+            size="large" label={t('Use Local Sound Font')} checked={params.useLocalSoundFont}
+            onChange={async (_, data) => {
+              if (data.checked) {
+                if (!await FileExists('assets/sound-font/accordion/instrument.json')) {
+                  toast(t('Failed to load local sound font, please check if the files exist - assets/sound-font'),
+                    { type: 'warning' });
+                  return;
+                }
+              }
+              setParams({
+                useLocalSoundFont: data.checked as boolean
+              });
+              setSoundFont();
+            }} />
+          <Checkbox className="select-none"
+            size="large" label={t('Auto Play At The End')} checked={params.autoPlay} onChange={(_, data) => {
+            setParams({
+              autoPlay: data.checked as boolean
+            });
+          }} />
+          <div className="flex justify-between gap-2">
+            <ToolTipButton desc={t('Regenerate')} icon={<ArrowSync20Regular />} onClick={() => {
+              compositionSseController?.abort();
+              commonStore.setCompositionGenerating(true);
+              setPrompt(commonStore.compositionSubmittedPrompt);
+              onSubmit(commonStore.compositionSubmittedPrompt);
+            }} />
+            <DialogButton className="grow" text={t('Reset')} title={t('Reset')}
+              contentText={t('Are you sure you want to reset this page? It cannot be undone.')}
+              onConfirm={() => {
+                commonStore.setCompositionSubmittedPrompt(defaultCompositionPrompt);
+                setPrompt(defaultCompositionPrompt);
+              }} />
+            <Button className="grow" appearance="primary" onClick={() => {
+              if (commonStore.compositionGenerating) {
+                compositionSseController?.abort();
+                commonStore.setCompositionGenerating(false);
+                generateNs(params.autoPlay);
+              } else {
+                commonStore.setCompositionGenerating(true);
+                onSubmit(params.prompt);
+              }
+            }}>{!commonStore.compositionGenerating ? t('Generate') : t('Stop')}</Button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col">
+        <div className="ml-auto mr-auto">
+          <midi-visualizer
+            ref={visualizerRef}
+            type="waterfall"
+          />
+        </div>
+        <div className="flex">
+          <midi-player
+            ref={playerRef}
+            style={{ width: '100%' }}
+          />
+          <Button icon={<Save28Regular />}
+            onClick={() => {
+              if (params.midi) {
+                OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => {
+                  if (path)
+                    toastWithButton(t('File Saved'), t('Open'), () => {
+                      OpenFileFolder(path, false);
+                    });
+                }).catch((e: any) => {
+                  toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
+                });
+              } else {
+                toast(t('No File to save'), { type: 'warning', autoClose: 1500 });
+              }
+            }}
+          >
+            {t('Save')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const Composition: FC = observer(() => {
+  return (
+    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
+      <WorkHeader />
+      <CompositionPanel />
+    </div>
+  );
+});

frontend/src/pages/defaultConfigs.ts

@@ -1,4 +1,113 @@
 import { ModelConfig } from './Configs';
+import { CompletionPreset } from './Completion';
+
+export const defaultCompositionPrompt = '<pad>';
+
+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.\nChapter 1.\n',
+  params: {
+    maxResponseToken: 500,
+    temperature: 1.2,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: '\\n\\nUser',
+    injectStart: '',
+    injectEnd: ''
+  }
+}, {
+  name: 'Translator',
+  prompt: 'Translate this into Chinese.\n\nEnglish: 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\nUser: Hello.\n\nAssistant: I\'m here, meow~.\n\nUser: 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\nAssistant: 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\nUser: Okay, I understand. Let\'s begin. Please assign me a role. Am I the Seer, Werewolf, Villager, or Bodyguard?\n\nAssistant: You are the Seer. Now that night has fallen, please choose a player to check his identity.\n\nUser: 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',
+  prompt: 'Instruction: Write a story using the following information\n\nInput: A man named Alex chops a tree down\n\nResponse:',
+  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[] = [
   {

frontend/src/pages/index.tsx

@@ -8,6 +8,7 @@ import {
   DocumentSettings20Regular,
   Home20Regular,
   Info20Regular,
+  MusicNote220Regular,
   Settings20Regular,
   Storage20Regular
 } from '@fluentui/react-icons';
@@ -19,6 +20,7 @@ import { Settings } from './Settings';
 import { About } from './About';
 import { Downloads } from './Downloads';
 import { Completion } from './Completion';
+import { Composition } from './Composition';
 
 type NavigationItem = {
   label: string;
@@ -50,6 +52,13 @@ export const pages: NavigationItem[] = [
     element: <Completion />,
     top: true
   },
+  {
+    label: 'Composition',
+    path: '/composition',
+    icon: <MusicNote220Regular />,
+    element: <Composition />,
+    top: true
+  },
   {
     label: 'Configs',
     path: '/configs',

frontend/src/startup.ts

@@ -4,7 +4,7 @@ import { Cache, checkUpdate, downloadProgramFiles, LocalConfig, refreshLocalMode
 import { getStatus } from './apis';
 import { EventsOn } from '../wailsjs/runtime';
 import manifest from '../../manifest.json';
-import { defaultModelConfigs, defaultModelConfigsMac } from './pages/defaultModelConfigs';
+import { defaultModelConfigs, defaultModelConfigsMac } from './pages/defaultConfigs';
 import { Preset } from './pages/PresetsManager/PresetsButton';
 import { wslHandler } from './pages/Train';
 

frontend/src/stores/commonStore.ts

@@ -11,11 +11,12 @@ import { IntroductionContent } from '../pages/Home';
 import { AboutContent } from '../pages/About';
 import i18n from 'i18next';
 import { CompletionPreset } from '../pages/Completion';
-import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultModelConfigs';
+import { defaultCompositionPrompt, defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultConfigs';
 import commonStore from './commonStore';
 import { Preset } from '../pages/PresetsManager/PresetsButton';
 import { DataProcessParameters, LoraFinetuneParameters } from '../pages/Train';
 import { ChartData } from 'chart.js';
+import { CompositionParams } from '../pages/Composition';
 
 export enum ModelStatus {
   Offline,
@@ -57,6 +58,19 @@ class CommonStore {
   completionPreset: CompletionPreset | null = null;
   completionGenerating: boolean = false;
   completionSubmittedPrompt: string = '';
+  // composition
+  compositionParams: CompositionParams = {
+    prompt: defaultCompositionPrompt,
+    maxResponseToken: 200,
+    temperature: 1,
+    topP: 0.8,
+    autoPlay: true,
+    useLocalSoundFont: false,
+    midi: null,
+    ns: null
+  };
+  compositionGenerating: boolean = false;
+  compositionSubmittedPrompt: string = defaultCompositionPrompt;
   // configs
   currentModelConfigIndex: number = 0;
   modelConfigs: ModelConfig[] = [];
@@ -267,6 +281,18 @@ class CommonStore {
     this.completionSubmittedPrompt = value;
   }
 
+  setCompositionParams(value: CompositionParams) {
+    this.compositionParams = value;
+  }
+
+  setCompositionGenerating(value: boolean) {
+    this.compositionGenerating = value;
+  }
+
+  setCompositionSubmittedPrompt(value: string) {
+    this.compositionSubmittedPrompt = value;
+  }
+
   setWslStdout(value: string) {
     this.wslStdout = value;
   }

frontend/src/style.scss

@@ -28,6 +28,7 @@ body {
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 9px;
+  height: 9px;
 }
 
 *::-webkit-scrollbar-thumb {
@@ -92,3 +93,22 @@ body {
     }
   }
 }
+
+midi-player {
+  &::part(control-panel) {
+    background: none;
+  }
+}
+
+midi-visualizer {
+  $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}"] {
+        fill: $color;
+      }
+    }
+  }
+}

frontend/src/types/html-midi-player.d.ts

@@ -0,0 +1,9 @@
+declare module JSX {
+  import { PlayerElement } from 'html-midi-player';
+  import { VisualizerElement } from 'html-midi-player';
+
+  interface IntrinsicElements {
+    'midi-player': PlayerElement;
+    'midi-visualizer': VisualizerElement;
+  }
+}

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

@@ -34,6 +34,8 @@ export function OpenFileFolder(arg1:string,arg2:boolean):Promise<void>;
 
 export function OpenSaveFileDialog(arg1:string,arg2:string,arg3:string):Promise<string>;
 
+export function OpenSaveFileDialogBytes(arg1:string,arg2:string,arg3:Array<number>):Promise<string>;
+
 export function PauseDownload(arg1:string):Promise<void>;
 
 export function ReadFileInfo(arg1:string):Promise<backend_golang.FileInfo>;

frontend/wailsjs/go/backend_golang/App.js

@@ -66,6 +66,10 @@ export function OpenSaveFileDialog(arg1, arg2, arg3) {
   return window['go']['backend_golang']['App']['OpenSaveFileDialog'](arg1, arg2, arg3);
 }
 
+export function OpenSaveFileDialogBytes(arg1, arg2, arg3) {
+  return window['go']['backend_golang']['App']['OpenSaveFileDialogBytes'](arg1, arg2, arg3);
+}
+
 export function PauseDownload(arg1) {
   return window['go']['backend_golang']['App']['PauseDownload'](arg1);
 }