From 8d84b326b8b9ed25889f3589f23755d3a1763cc3 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Fri, 5 Jan 2024 12:45:41 +0800
Subject: [PATCH] basic abc frontend support

---
 frontend/src/components/RunButton.tsx |  9 +++++++++
 frontend/src/pages/Composition.tsx    |  8 +++++---
 frontend/src/pages/defaultConfigs.ts  | 11 +++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RunButton.tsx b/frontend/src/components/RunButton.tsx
index 9c1cb97..f80c8b6 100644
--- a/frontend/src/components/RunButton.tsx
+++ b/frontend/src/components/RunButton.tsx
@@ -19,6 +19,7 @@ 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';
 
 const mainButtonText = {
   [ModelStatus.Offline]: 'Run',
@@ -257,6 +258,7 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
                 commonStore.setStatus({ status: ModelStatus.Working });
                 let buttonNameMap = {
                   'novel': 'Completion',
+                  'abc': 'Composition',
                   'midi': 'Composition'
                 };
                 let buttonName = 'Chat';
@@ -264,6 +266,13 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
                 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 &&
diff --git a/frontend/src/pages/Composition.tsx b/frontend/src/pages/Composition.tsx
index 285d124..caaaf09 100644
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -15,7 +15,7 @@ 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 { defaultCompositionABCPrompt, defaultCompositionPrompt } from './defaultConfigs';
 import {
   CloseMidiPort,
   FileExists,
@@ -370,11 +370,13 @@ const CompositionPanel: FC = observer(() => {
             <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);
+                const isABC = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('abc');
+                const defaultPrompt = isABC ? defaultCompositionABCPrompt : defaultCompositionPrompt;
+                commonStore.setCompositionSubmittedPrompt(defaultPrompt);
                 setParams({
                   generationStartTime: 0
                 });
-                setPrompt(defaultCompositionPrompt);
+                setPrompt(defaultPrompt);
               }} />
             <Button className="grow" appearance="primary" onClick={() => {
               if (commonStore.compositionGenerating) {
diff --git a/frontend/src/pages/defaultConfigs.ts b/frontend/src/pages/defaultConfigs.ts
index a45b092..45b75f6 100644
--- a/frontend/src/pages/defaultConfigs.ts
+++ b/frontend/src/pages/defaultConfigs.ts
@@ -2,6 +2,17 @@ import { CompletionPreset } from '../types/completion';
 import { ModelConfig } from '../types/configs';
 
 export const defaultCompositionPrompt = '<pad>';
+export const defaultCompositionABCPrompt='S:3\n' +
+  'B:9\n' +
+  'E:4\n' +
+  'B:9\n' +
+  'E:4\n' +
+  'E:4\n' +
+  'B:9\n' +
+  'L:1/8\n' +
+  'M:3/4\n' +
+  'K:D\n' +
+  ' Bc |"G" d2 cB"A" A2 FE |"Bm" F2 B4 F^G |'
 
 export const defaultPresets: CompletionPreset[] = [{
   name: 'Writer',