display mainInstrument of track

frontend/src/_locales/ja/main.json

@@ -300,5 +300,6 @@
   "Select the MIDI input device to be used.": "使用するMIDI入力デバイスを選択します。",
   "Start Time": "開始時間",
   "Content Duration": "内容の長さ",
-  "Please select a MIDI device first": "まずMIDIデバイスを選択してください"
+  "Please select a MIDI device first": "まずMIDIデバイスを選択してください",
+  "Piano is the main instrument": "ピアノはメインの楽器です"
 }

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

@@ -300,5 +300,6 @@
   "Select the MIDI input device to be used.": "选择要使用的MIDI输入设备",
   "Start Time": "开始时间",
   "Content Duration": "内容时长",
-  "Please select a MIDI device first": "请先选择一个MIDI设备"
+  "Please select a MIDI device first": "请先选择一个MIDI设备",
+  "Piano is the main instrument": "钢琴为主"
 }

frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx

@@ -149,6 +149,12 @@ const Track: React.FC<TrackProps> = observer(({
   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 (
     <Draggable
       axis="x"
@@ -183,7 +189,7 @@ const Track: React.FC<TrackProps> = observer(({
         }}
         onClick={() => onSelect(id)}
       >
-        <span className="text-white">{t('Track') + ' ' + (track.content || id)}</span>
+        <span className="text-white">{trackName}</span>
       </div>
     </Draggable>
   );
@@ -421,6 +427,7 @@ const AudiotrackEditor: FC<{ setPrompt: (prompt: string) => void }> = observer((
             onClick={() => {
               commonStore.setTracks([...commonStore.tracks, {
                 id: uuid(),
+                mainInstrument: '',
                 content: '',
                 rawContent: [],
                 offsetTime: 0,

frontend/src/types/composition.ts

@@ -14,6 +14,7 @@ export type CompositionParams = {
 }
 export type Track = {
   id: string;
+  mainInstrument: string;
   content: string;
   rawContent: MidiMessage[];
   offsetTime: number;

frontend/src/utils/index.tsx

@@ -22,7 +22,7 @@ import { DownloadStatus } from '../types/downloads';
 import { ModelSourceItem } from '../types/models';
 import { Language, Languages, SettingsType } from '../types/settings';
 import { DataProcessParameters, LoraFinetuneParameters } from '../types/train';
-import { tracksMinimalTotalTime } from '../types/composition';
+import { InstrumentTypeNameMap, tracksMinimalTotalTime } from '../types/composition';
 
 export type Cache = {
   version: string
@@ -504,11 +504,23 @@ export function flushMidiRecordingContent() {
     .reduce((sum, current) =>
         sum + (current.messageType === 'ElapsedTime' ? current.value : 0)
       , 0);
+
+    const sortedInstrumentFrequency = Object.entries(commonStore.recordingRawContent
+    .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])];
+
     tracks[recordingTrackIndex] = {
       ...recordingTrack,
       content: commonStore.recordingContent,
       rawContent: commonStore.recordingRawContent,
-      contentTime: contentTime
+      contentTime: contentTime,
+      mainInstrument: mainInstrument
     };
     commonStore.setTracks(tracks);
     refreshTracksTotalTime();