From e3b3452a7338067321d6f22a5cb241a65585db90 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Fri, 5 Jan 2024 13:47:00 +0800
Subject: [PATCH] basic abc frontend support

---
 frontend/package-lock.json         | 10 +++++++
 frontend/package.json              |  1 +
 frontend/src/pages/Composition.tsx | 43 +++++++++++++++++++++++-------
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7066671..330803a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -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",
diff --git a/frontend/package.json b/frontend/package.json
index b866159..30cf38e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/src/pages/Composition.tsx b/frontend/src/pages/Composition.tsx
index caaaf09..792ac9a 100644
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -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)