first

.editorconfig

@@ -0,0 +1,19 @@
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.py]
+indent_size = 4
+
+[*.{js,vue}]
+indent_size = 2
+
+[*.vue]
+indent_size = 2

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app.py

@@ -0,0 +1,66 @@
+# import gradio as gr
+
+
+# def process(name):
+#     return "Hello re malakako" + name + "!"
+
+
+# with gr.Blocks() as demo:
+#     name = gr.Textbox(label="Score (vextab or musicxml)")
+#     output = gr.Textbox(label="Difficulty Analysis Report")
+#     greet_btn = gr.Button("Process")
+#     greet_btn.click(fn=process, inputs=name, outputs=output, api_name="process")
+
+# demo.launch()
+
+
+import time
+import gradio as gr
+
+
+def fake_diffusion(steps):
+    for i in range(steps):
+        print(f"Current step: {i}")
+        time.sleep(1)
+        yield str(i)
+
+
+def long_prediction(*args, **kwargs):
+    time.sleep(10)
+    return 42
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            n = gr.Slider(1, 10, value=9, step=1, label="Number Steps")
+            run = gr.Button(value="Start Iterating")
+            output = gr.Textbox(label="Iterative Output")
+            stop = gr.Button(value="Stop Iterating")
+        with gr.Column():
+            textbox = gr.Textbox(label="Prompt")
+            prediction = gr.Number(label="Expensive Calculation")
+            run_pred = gr.Button(value="Run Expensive Calculation")
+        with gr.Column():
+            cancel_on_change = gr.Textbox(label="Cancel Iteration and Expensive Calculation on Change")
+            cancel_on_submit = gr.Textbox(label="Cancel Iteration and Expensive Calculation on Submit")
+            echo = gr.Textbox(label="Echo")
+    with gr.Row():
+        with gr.Column():
+            image = gr.Image(sources=["webcam"], label="Cancel on clear", interactive=True)
+        with gr.Column():
+            video = gr.Video(sources=["webcam"], label="Cancel on start recording", interactive=True)
+
+    click_event = run.click(fake_diffusion, n, output)
+    stop.click(fn=None, inputs=None, outputs=None, cancels=[click_event])
+    pred_event = run_pred.click(fn=long_prediction, inputs=[textbox], outputs=prediction)
+
+    cancel_on_change.change(None, None, None, cancels=[click_event, pred_event])
+    cancel_on_submit.submit(lambda s: s, cancel_on_submit, echo, cancels=[click_event, pred_event])
+    image.clear(None, None, None, cancels=[click_event, pred_event])
+    video.start_recording(None, None, None, cancels=[click_event, pred_event])
+
+    demo.queue(max_size=20)
+
+if __name__ == "__main__":
+    demo.launch()

frontend/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

frontend/eslint.config.js

@@ -0,0 +1,31 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    // customizations
+    rules: {
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-vars': 'off',
+      'no-console': 'off',
+    },
+    unocss: true,
+    formatters: {
+      /**
+       * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
+       * By default uses Prettier
+       */
+      // css: true,
+      /**
+       * Format HTML files
+       * By default uses Prettier
+       */
+      // html: true,
+      /**
+       * Format Markdown files
+       * Supports Prettier and dprint
+       * By default uses Prettier
+       */
+      // markdown: 'prettier',
+    },
+  },
+)

frontend/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
+    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp"> -->
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/cedar_guitar_400.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.3/build/cjs/vexflow.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vextab@2.0.13/releases/vextab-div.js"></script>
+    <title>Guitar Diff</title>
+  </head>
+  <body>
+        <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "guitar-diff-client",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "up": "taze major -I",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@coderline/alphatab": "^1.2.3",
+    "@gradio/client": "^0.9.4",
+    "@pangenerator/tweakpane-textarea-plugin": "github:kitschpatrol/tweakpane-textarea-plugin#tweakpane-v4",
+    "@tweakpane/plugin-essentials": "^0.2.1",
+    "@unocss/preset-icons": "^0.58.2",
+    "i": "^0.3.7",
+    "opensheetmusicdisplay": "^1.8.4",
+    "tweakpane": "^4.0.3",
+    "unocss": "^0.58.2",
+    "v-github-icon": "^3.1.2",
+    "v-tweakpane": "github:vinayakkulkarni/v-tweakpane#main",
+    "vexflow": "4.2.3",
+    "vextab": "3.0.6",
+    "vue": "^3.3.13",
+    "vue-meta": "^3.0.0-alpha.10",
+    "vue-router": "^4.2.5",
+    "vue3-tabs-component": "^1.3.7",
+    "vuetify": "^3.4.9"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.6.1",
+    "@iconify/json": "^2.2.162",
+    "@mdi/font": "^7.4.47",
+    "@unocss/eslint-plugin": "^0.58.2",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-flat-config-viewer": "0.1.3",
+    "eslint-plugin-format": "^0.1.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "lint-staged": "^15.2.0",
+    "simple-git-hooks": "^2.9.0",
+    "taze": "^0.13.1",
+    "vite": "^5.0.10"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

frontend/public/_headers

@@ -0,0 +1 @@
+

frontend/public/guitar-diff-example.musicxml

@@ -0,0 +1,507 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 3.1 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
+<score-partwise version="3.1">
+  <work>
+    <work-title>Fantasia no.2 </work-title>
+    </work>
+  <identification>
+    <creator type="composer">Michalis Sourvinos</creator>
+    <encoding>
+      <software>MuseScore 3.6.2</software>
+      <encoding-date>2023-11-28</encoding-date>
+      <supports element="accidental" type="yes"/>
+      <supports element="beam" type="yes"/>
+      <supports element="print" attribute="new-page" type="yes" value="yes"/>
+      <supports element="print" attribute="new-system" type="yes" value="yes"/>
+      <supports element="stem" type="yes"/>
+      </encoding>
+    </identification>
+  <defaults>
+    <scaling>
+      <millimeters>6.99912</millimeters>
+      <tenths>40</tenths>
+      </scaling>
+    <page-layout>
+      <page-height>1596.77</page-height>
+      <page-width>1233.87</page-width>
+      <page-margins type="even">
+        <left-margin>85.7251</left-margin>
+        <right-margin>85.7251</right-margin>
+        <top-margin>85.7251</top-margin>
+        <bottom-margin>85.7251</bottom-margin>
+        </page-margins>
+      <page-margins type="odd">
+        <left-margin>85.7251</left-margin>
+        <right-margin>85.7251</right-margin>
+        <top-margin>85.7251</top-margin>
+        <bottom-margin>85.7251</bottom-margin>
+        </page-margins>
+      </page-layout>
+    <word-font font-family="Edwin" font-size="10"/>
+    <lyric-font font-family="Edwin" font-size="10"/>
+    </defaults>
+  <credit page="1">
+    <credit-type>title</credit-type>
+    <credit-words default-x="616.935" default-y="1511.05" justify="center" valign="top" font-size="22">Fantasia no.2 </credit-words>
+    </credit>
+  <credit page="1">
+    <credit-type>subtitle</credit-type>
+    <credit-words default-x="616.935" default-y="1453.9" justify="center" valign="top" font-size="16">in A major</credit-words>
+    </credit>
+  <credit page="1">
+    <credit-type>composer</credit-type>
+    <credit-words default-x="1148.14" default-y="1411.05" justify="right" valign="bottom">Michalis Sourvinos</credit-words>
+    </credit>
+  <part-list>
+    <part-group type="start" number="1">
+      <group-symbol>none</group-symbol>
+      </part-group>
+    <score-part id="P1">
+      <part-name>Classical Guitar</part-name>
+      <part-abbreviation>Guit.</part-abbreviation>
+      <score-instrument id="P1-I1">
+        <instrument-name>Classical Guitar</instrument-name>
+        </score-instrument>
+      <midi-device id="P1-I1" port="1"></midi-device>
+      <midi-instrument id="P1-I1">
+        <midi-channel>1</midi-channel>
+        <midi-program>25</midi-program>
+        <volume>78.7402</volume>
+        <pan>0</pan>
+        </midi-instrument>
+      </score-part>
+    <part-group type="stop" number="1"/>
+    </part-list>
+  <part id="P1">
+    <measure number="0" implicit="yes" width="389.07">
+      <print>
+        <system-layout>
+          <system-margins>
+            <left-margin>50.00</left-margin>
+            <right-margin>0.00</right-margin>
+            </system-margins>
+          <top-system-distance>170.00</top-system-distance>
+          </system-layout>
+        <staff-layout number="2">
+          <staff-distance>130.23</staff-distance>
+          </staff-layout>
+        </print>
+      <attributes>
+        <divisions>4</divisions>
+        <key>
+          <fifths>3</fifths>
+          </key>
+        <time>
+          <beats>2</beats>
+          <beat-type>4</beat-type>
+          </time>
+        <staves>2</staves>
+        <clef number="1">
+          <sign>G</sign>
+          <line>2</line>
+          <clef-octave-change>-1</clef-octave-change>
+          </clef>
+        <clef number="2">
+          <sign>TAB</sign>
+          <line>5</line>
+          </clef>
+        <staff-details number="2">
+          <staff-lines>6</staff-lines>
+          <staff-tuning line="1">
+            <tuning-step>E</tuning-step>
+            <tuning-octave>2</tuning-octave>
+            </staff-tuning>
+          <staff-tuning line="2">
+            <tuning-step>A</tuning-step>
+            <tuning-octave>2</tuning-octave>
+            </staff-tuning>
+          <staff-tuning line="3">
+            <tuning-step>D</tuning-step>
+            <tuning-octave>3</tuning-octave>
+            </staff-tuning>
+          <staff-tuning line="4">
+            <tuning-step>G</tuning-step>
+            <tuning-octave>3</tuning-octave>
+            </staff-tuning>
+          <staff-tuning line="5">
+            <tuning-step>B</tuning-step>
+            <tuning-octave>3</tuning-octave>
+            </staff-tuning>
+          <staff-tuning line="6">
+            <tuning-step>E</tuning-step>
+            <tuning-octave>4</tuning-octave>
+            </staff-tuning>
+          </staff-details>
+        </attributes>
+      <direction placement="above">
+        <direction-type>
+          <metronome parentheses="no" default-x="-37.68" relative-y="20.00">
+            <beat-unit>quarter</beat-unit>
+            <per-minute>60</per-minute>
+            </metronome>
+          </direction-type>
+        <staff>1</staff>
+        <sound tempo="60"/>
+        </direction>
+      <note>
+        <rest/>
+        <duration>2</duration>
+        <voice>1</voice>
+        <type>eighth</type>
+        <staff>1</staff>
+        </note>
+      <note default-x="254.78" default-y="-5.00">
+        <pitch>
+          <step>E</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>2</duration>
+        <voice>1</voice>
+        <type>eighth</type>
+        <stem>down</stem>
+        <staff>1</staff>
+        </note>
+      <backup>
+        <duration>4</duration>
+        </backup>
+      <note>
+        <rest/>
+        <duration>2</duration>
+        <voice>5</voice>
+        <type>eighth</type>
+        <staff>2</staff>
+        </note>
+      <note default-x="257.68" default-y="-170.23">
+        <pitch>
+          <step>E</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>2</duration>
+        <voice>5</voice>
+        <type>eighth</type>
+        <stem>down</stem>
+        <staff>2</staff>
+        <notations>
+          <technical>
+            <string>1</string>
+            <fret>0</fret>
+            </technical>
+          </notations>
+        </note>
+      </measure>
+    <measure number="1" width="589.63">
+      <note default-x="16.50" default-y="30.00">
+        <pitch>
+          <step>E</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>4</duration>
+        <tie type="start"/>
+        <voice>1</voice>
+        <type>quarter</type>
+        <stem>up</stem>
+        <staff>1</staff>
+        <notations>
+          <tied type="start"/>
+          </notations>
+        </note>
+      <note default-x="216.09" default-y="30.00">
+        <pitch>
+          <step>E</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <tie type="stop"/>
+        <voice>1</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>1</staff>
+        <beam number="1">begin</beam>
+        <beam number="2">begin</beam>
+        <notations>
+          <tied type="stop"/>
+          </notations>
+        </note>
+      <note default-x="306.81" default-y="25.00">
+        <pitch>
+          <step>D</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>1</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>1</staff>
+        <beam number="1">continue</beam>
+        <beam number="2">continue</beam>
+        </note>
+      <note default-x="397.54" default-y="20.00">
+        <pitch>
+          <step>C</step>
+          <alter>1</alter>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>1</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>1</staff>
+        <beam number="1">continue</beam>
+        <beam number="2">continue</beam>
+        </note>
+      <note default-x="488.26" default-y="15.00">
+        <pitch>
+          <step>B</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>1</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>1</staff>
+        <beam number="1">end</beam>
+        <beam number="2">end</beam>
+        </note>
+      <backup>
+        <duration>8</duration>
+        </backup>
+      <note default-x="16.50" default-y="-60.00">
+        <pitch>
+          <step>A</step>
+          <octave>2</octave>
+          </pitch>
+        <duration>8</duration>
+        <voice>2</voice>
+        <type>half</type>
+        <stem>down</stem>
+        <staff>1</staff>
+        </note>
+      <backup>
+        <duration>8</duration>
+        </backup>
+      <forward>
+        <duration>4</duration>
+        </forward>
+      <note default-x="216.09" default-y="-20.00">
+        <pitch>
+          <step>B</step>
+          <octave>3</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>4</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>1</staff>
+        </note>
+      <note default-x="216.09" default-y="0.00">
+        <chord/>
+        <pitch>
+          <step>F</step>
+          <alter>1</alter>
+          <octave>4</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>4</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>1</staff>
+        </note>
+      <note default-x="216.09" default-y="10.00">
+        <chord/>
+        <pitch>
+          <step>A</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>4</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>1</staff>
+        </note>
+      <backup>
+        <duration>8</duration>
+        </backup>
+      <note default-x="14.80" default-y="-170.23">
+        <pitch>
+          <step>E</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>4</duration>
+        <tie type="start"/>
+        <voice>5</voice>
+        <type>quarter</type>
+        <stem>up</stem>
+        <staff>2</staff>
+        <notations>
+          <tied type="start"/>
+          <technical>
+            <string>1</string>
+            <fret>12</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="214.39" default-y="-170.23">
+        <pitch>
+          <step>E</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <tie type="stop"/>
+        <voice>5</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>2</staff>
+        <beam number="1">begin</beam>
+        <beam number="2">begin</beam>
+        <notations>
+          <tied type="stop"/>
+          <technical>
+            <string>1</string>
+            <fret>12</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="305.11" default-y="-170.23">
+        <pitch>
+          <step>D</step>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>5</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>2</staff>
+        <beam number="1">continue</beam>
+        <beam number="2">continue</beam>
+        <notations>
+          <technical>
+            <string>1</string>
+            <fret>10</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="400.44" default-y="-170.23">
+        <pitch>
+          <step>C</step>
+          <alter>1</alter>
+          <octave>5</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>5</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>2</staff>
+        <beam number="1">continue</beam>
+        <beam number="2">continue</beam>
+        <notations>
+          <technical>
+            <string>1</string>
+            <fret>9</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="491.16" default-y="-170.23">
+        <pitch>
+          <step>B</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>1</duration>
+        <voice>5</voice>
+        <type>16th</type>
+        <stem>up</stem>
+        <staff>2</staff>
+        <beam number="1">end</beam>
+        <beam number="2">end</beam>
+        <notations>
+          <technical>
+            <string>1</string>
+            <fret>7</fret>
+            </technical>
+          </notations>
+        </note>
+      <backup>
+        <duration>8</duration>
+        </backup>
+      <note default-x="19.40" default-y="-230.23">
+        <pitch>
+          <step>A</step>
+          <octave>2</octave>
+          </pitch>
+        <duration>8</duration>
+        <voice>6</voice>
+        <type>half</type>
+        <stem>down</stem>
+        <staff>2</staff>
+        <notations>
+          <technical>
+            <string>5</string>
+            <fret>0</fret>
+            </technical>
+          </notations>
+        </note>
+      <backup>
+        <duration>8</duration>
+        </backup>
+      <forward>
+        <duration>4</duration>
+        </forward>
+      <note default-x="218.99" default-y="-215.23">
+        <pitch>
+          <step>B</step>
+          <octave>3</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>8</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>2</staff>
+        <notations>
+          <technical>
+            <string>4</string>
+            <fret>9</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="214.39" default-y="-200.23">
+        <chord/>
+        <pitch>
+          <step>F</step>
+          <alter>1</alter>
+          <octave>4</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>8</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>2</staff>
+        <notations>
+          <technical>
+            <string>3</string>
+            <fret>11</fret>
+            </technical>
+          </notations>
+        </note>
+      <note default-x="214.39" default-y="-185.23">
+        <chord/>
+        <pitch>
+          <step>A</step>
+          <octave>4</octave>
+          </pitch>
+        <duration>4</duration>
+        <voice>8</voice>
+        <type>quarter</type>
+        <stem>down</stem>
+        <staff>2</staff>
+        <notations>
+          <technical>
+            <string>2</string>
+            <fret>10</fret>
+            </technical>
+          </notations>
+        </note>
+      <barline location="right">
+        <bar-style>light-heavy</bar-style>
+        </barline>
+      </measure>
+    </part>
+  </score-partwise>

frontend/public/guitar-diff-example.vextab.txt

@@ -0,0 +1,6 @@
+tabstave notation=true key=A time=4/4
+
+notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
+notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :q p5/4
+
+text :w, |#segno, ,|, :hd, , #tr

frontend/src/App.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+import { ref } from 'vue'
+
+const state = ref({
+  position: 'top-right',
+  url: 'https://github.com/xribene',
+  background: '#FFF',
+  fill: '#0a2050',
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <v-github-icon
+      :position="state.position"
+      :url="state.url"
+      :bg-color="state.background"
+      :fill-color="state.fill"
+    />
+
+    <nav class="navbar">
+      <ul class="nav-list">
+        <li>
+          <RouterLink :to="{ name: 'Home' }">
+            Home
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink :to="{ name: 'Analyzer' }">
+            Analyzer
+          </RouterLink>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="content">
+      <!-- <a href="https://vitejs.dev" target="_blank">
+            <img src="/guitarDiffLogo2.svg" class="logo" alt="Vite logo" />
+            </a> -->
+
+      <!-- <keep-alive>
+            <router-view />
+            </keep-alive> -->
+      <RouterView v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" :key="$route.fullPath" />
+        </keep-alive>
+      </RouterView>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+    .app-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .navbar {
+        background-color: #c5bdbd;
+        padding: 1rem;
+        width: 100%;
+        /* margin-left: 10px; */
+    }
+
+    .nav-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        /* background-color: #0a2050; */
+    }
+
+    .nav-list li {
+        margin-right: 1rem;
+    }
+
+    .nav-list li a {
+        text-decoration: none;
+        color: rgb(78, 74, 74);
+    }
+
+    .content {
+        margin: 2rem;
+        text-align: center;
+    }
+</style>

frontend/src/components/CounterButton.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const counter = ref(0)
+
+function increment() {
+  counter.value++
+}
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <button @click="increment">
+    {{ counter }}
+  </button>
+</template>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">
+      count is {{ count }}
+    </button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">
+    Click on the Vite and Vue logos to learn more
+  </p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

frontend/src/components/MusicXmlWidget.vue

@@ -0,0 +1,320 @@
+<script setup>
+import { computed, onMounted, onUpdated, ref, watch } from 'vue'
+import { OpenSheetMusicDisplay } from 'opensheetmusicdisplay'
+import { Pane } from 'tweakpane'
+
+const props = defineProps({
+  // int id
+  id: {
+    type: String,
+    required: true,
+  },
+  xmlText: {
+    type: String,
+    required: false,
+  },
+  isActive: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+
+})
+
+const emit = defineEmits(['updateScoreCode'])
+
+// let renderer = null;
+// let artist = null;
+// let tab = null;
+
+let openSheetMusicDisplay = null
+let timeoutID = null
+let pane = null
+
+// const message = ref('hello')
+const currentScoreCode = ref(props.xmlText)
+const showParsingError = ref(false)
+const parsingError = ref('')
+// const count = ref(0)
+const settingsStatus = ref(false)
+const isActive = ref(false)
+
+const SETTINGS_PARAMS = {
+  scale: 1.0,
+  // width: 800,
+  // factor: 123,
+  // title: 'hello',
+  // color: '#ff0055',
+  // percentage: 50,
+  // theme: 'dark',
+  // prop: 'Put your\nmultiline\ntext here!'
+}
+
+const divId = computed(() => {
+  return `xmlScoreContainer_${props.id}`
+})
+
+function initializePane() {
+  pane = new Pane({
+    container: document.getElementById('paneContainerXml'),
+    title: 'MusicXML Settings',
+  },
+  )
+  pane.addBinding(SETTINGS_PARAMS, 'scale', {
+    min: 0.5,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    openSheetMusicDisplay.zoom = ev.value
+    openSheetMusicDisplay.render()
+  })
+
+  // pane.addBinding(SETTINGS_PARAMS, 'width', {
+  //     min: 400,
+  //     max: 1200,
+  //     step: 50
+  // }).on('change', (ev) => {
+  //     console.log(ev.value);
+  //     artist.reset();
+  //     tab.reset();
+  //     tab.parse(currentTabText.value);
+  //     artist.width = ev.value;
+  //     artist.render(renderer);
+  // });
+}
+async function initializeOSMD() {
+  // renderer = new Flow.Renderer($('#' + divId.value)[0], Flow.Renderer.Backends.SVG);
+  // artist = new Artist(10, 10, 750, { scale: 0.8 });
+  // tab = new VexTab(artist);
+  openSheetMusicDisplay = new OpenSheetMusicDisplay(divId.value, {
+    autoResize: false,
+    backend: 'svg',
+    disableCursor: false,
+    drawingParameters: 'full', // : "default", // try compact (instead of default)
+    drawPartNames: false, // try false
+    drawTitle: false,
+    drawSubtitle: false,
+    drawComposer: false,
+    // darkMode: true,
+    // cursor
+    followCursor: true,
+    drawFingerings: true,
+    // fingeringPosition: "left", // Above/Below is default. try left or right. experimental: above, below.
+    // fingeringPositionFromXML: false, // do this if you want them always left, for example.
+    // fingeringInsideStafflines: "true", // default: false. true draws fingerings directly above/below notes
+    setWantedStemDirectionByXml: true, // try false, which was previously the default behavior
+    drawUpToMeasureNumber: 20, // draws only up to measure 3, meaning it draws measure 1 to 3 of the piece.
+    // drawFromMeasureNumber : 1,
+    // drawUpToMeasureNumber : 3,
+    drawMeasureNumbers: true,
+
+    // drawMeasureNumbers: false, // disable drawing measure numbers
+    // measureNumberInterval: 4, // draw measure numbers only every 4 bars (and at the beginning of a new system)
+    useXMLMeasureNumbers: true, // read measure numbers from xml
+
+    // coloring options
+    coloringEnabled: true,
+    // defaultColorNotehead: "#CC0055", // try setting a default color. default is black (undefined)
+    // defaultColorStem: "#BB0099",
+
+    autoBeam: false, // try true, OSMD Function Test AutoBeam sample
+    autoBeamOptions: {
+      beam_rests: false,
+      beam_middle_rests_only: false,
+      // groups: [[3,4], [1,1]],
+      maintain_stem_directions: false,
+    },
+    // pageFormat: "A4_P",//"Endless",//pageFormat,
+    // pageBackgroundColor: "red",
+    renderSingleHorizontalStaffline: true, // true
+
+    // tupletsBracketed: true, // creates brackets for all tuplets except triplets, even when not set by xml
+    // tripletsBracketed: true,
+    // tupletsRatioed: true, // unconventional; renders ratios for tuplets (3:2 instead of 3 for triplets)
+  })
+  // window.osmd = openSheetMusicDisplay;
+  // artist.reset();
+  // tab.reset();
+  // tab.parse(currentTabText.value);
+  // artist.render(renderer);
+  await fetch('/guitar-diff-example.musicxml')
+    .then((response) => {
+      return response.text()
+    })
+    .then((data) => {
+      console.log('in data')
+      openSheetMusicDisplay.load(data)
+        .then(
+          () => {
+            window.osmd = openSheetMusicDisplay
+            openSheetMusicDisplay.render()
+            // openSheetMusicDisplay.cursor.show();
+            console.log('in load')
+            showParsingError.value = false
+            currentScoreCode.value = data
+          },
+        )
+        .catch((e) => {
+          showParsingError.value = true
+          console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+          parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+        })
+
+      // .catch((e) => {
+      //     showParsingError.value = true;
+      //     console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'));
+      //     parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>');
+      // });
+    })
+}
+
+// function loadScoreCode(scoreCode) {
+//   currentScoreCode.value = scoreCode
+//   showScore()
+// }
+
+function showScore() {
+  openSheetMusicDisplay.clear()
+  console.log(currentScoreCode.value)
+  openSheetMusicDisplay.load(currentScoreCode.value)
+    .then(
+      () => {
+        window.osmd = openSheetMusicDisplay
+        openSheetMusicDisplay.render()
+        // openSheetMusicDisplay.cursor.show();
+        console.log('in load')
+        showParsingError.value = false
+      },
+    )
+    .catch((e) => {
+      showParsingError.value = true
+      console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+      parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+    })
+}
+
+function handleKeyUp(_event) {
+  if (timeoutID)
+    clearTimeout(timeoutID)
+  timeoutID = setTimeout(showScore, 500)
+}
+
+onMounted(async () => {
+  // console.log($(`#${divId.value}`)[0])
+  initializePane()
+  await initializeOSMD()
+})
+
+function handleDrop(event) {
+  event.preventDefault()
+  const textData = event.dataTransfer.getData('text')
+  const file = event.dataTransfer.files[0]
+  console.log(textData)
+  console.log(file)
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = function (e) {
+      currentScoreCode.value = e.target.result
+      showScore()
+    }
+    reader.readAsText(file)
+  }
+  else if (textData) {
+    currentScoreCode.value = textData
+    showScore()
+  }
+}
+
+function showHideSettings() {
+  console.log('showHideSettings')
+  settingsStatus.value = !settingsStatus.value
+}
+
+// invoked when there is any type of change in the component
+onUpdated(() => {
+  if (props.isActive !== isActive.value) {
+    // Prop has changed, update the ref and emit an event
+    if (props.isActive) {
+      isActive.value = props.isActive
+      emit('updateScoreCode', currentScoreCode.value)
+      // console.log("emitted updateScoreCode");
+      // console.log(currentScoreCode.value);
+    }
+    isActive.value = props.isActive
+  }
+})
+
+watch(currentScoreCode, () => {
+  // Emit the event so that the parent component can update the tabText
+  // prop
+  emit('updateScoreCode', currentScoreCode.value)
+  // console.log("emitted updateScoreCode");
+  // console.log(currentScoreCode.value);
+})
+
+// const moveCursor = () => {
+//     openSheetMusicDisplay.cursor.next();
+// };
+
+// const fillScore = () => {
+//     // console.log(vt);
+//     // Perform any logic to fill the score
+//     response.value = 'Button pressed!'; // Update response if needed
+
+// };
+</script>
+
+<template>
+  <!--
+        Which ever of the following elements wants to use the class
+        attributes coming from the parent component needs to use
+        :class="$attrs.class"
+        UNLESS I have a single root div-element
+     -->
+  <div>
+    <!-- <button @click="showScore">You clicked me {{ count }} times</button> -->
+    <button class="left-align" @click="showHideSettings">
+      <!-- <v-icon icon="mdi-pencil-box" /> -->
+      Settings
+    </button>
+    <div :id="divId" class="scoreContainer" />
+
+    <div v-show="settingsStatus" id="tabSettingsArea">
+      <!-- <TweakComponent :visible="settingsStatus"/> -->
+      <div id="paneContainerXml" />
+      <textarea
+        v-model="currentScoreCode"
+        class="editorBox"
+        placeholder="add your musicxml code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+
+    <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
+  </div>
+</template>
+
+<style scoped>
+.xmlContainer {
+        /* width: 100%;
+        height: 100%; */
+        /* background-color: #f80707; */
+        border: 0px solid rgb(212, 22, 22);
+        overflow-x: auto;
+    }
+
+    .left-align {
+        display: flex;
+        margin-right: auto;
+    }
+    #tabSettingsArea {
+        display: flex;
+        flex-direction: row;
+        align-items: center; /* Optional: align items in the center vertically */
+        gap: 20px;
+        margin-left: 10px;
+    }
+</style>

frontend/src/components/TweakComponent.vue

@@ -0,0 +1,26 @@
+<script>
+import { ref } from 'vue'
+
+const state = ref({
+  pane: {
+    title: 'My Awesome Pane',
+    inputs: [
+      {
+        factor: 123,
+        title: 'hello',
+        color: '#0f0',
+      },
+    ],
+  },
+})
+const skata = 3
+</script>
+
+<template>
+  <!-- <v-tweakpane :pane="state.pane" /> -->
+  <div>blabla</div>
+</template>
+
+<style>
+  @import 'v-tweakpane/dist/v-tweakpane.css';
+</style>

frontend/src/components/TweakComponent2.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { Pane } from 'tweakpane'
+import * as TextareaPlugin from '@pangenerator/tweakpane-textarea-plugin'
+import { onMounted, watch } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  data: {
+    type: Object,
+    required: true,
+    default: () => {},
+  },
+})
+
+let pane = null
+
+onMounted(() => {
+  initializePane()
+})
+
+watch(() => props.visible, () => {
+  updateVisibility()
+})
+
+// const updateData = (changeEvent) => {
+//     console.log(changeEvent);
+// };
+
+// const showHide = () => {
+//     pane.hidden = !pane.hidden;
+// };
+
+function updateVisibility() {
+  if (pane)
+    pane.hidden = !props.visible
+}
+
+function initializePane() {
+  const PARAMS = {
+    factor: 123,
+    title: 'hello',
+    color: '#ff0055',
+    percentage: 50,
+    theme: 'dark',
+    prop: 'Put your\nmultiline\ntext here!',
+  }
+
+  pane = new Pane({
+    container: document.getElementById('paneContainer'),
+    title: 'Mixer',
+  },
+  )
+  pane.registerPlugin(TextareaPlugin)
+
+  pane.addBinding(PARAMS, 'factor')
+  pane.addBinding(PARAMS, 'title')
+  pane.addBinding(PARAMS, 'color')
+  pane.addBinding(
+    PARAMS,
+    'percentage',
+    { min: 0, max: 100, step: 10 },
+  )
+
+  // `options`: list
+  pane.addBinding(
+    PARAMS,
+    'theme',
+    { options: { Dark: 'dark', Light: 'light' } },
+  )
+
+  // multiline pluggin
+
+  // pane.addBinding(PARAMS, 'prop', {
+  //         view: 'textarea',
+  //         rows: 6,
+  //         placeholder: 'Type here...'
+  //     }).on('change', (ev) => {
+  //     console.log(ev.value);
+  // });
+
+  pane.hidden = !props.visible
+}
+</script>
+
+<template>
+  <div id="paneContainer" />
+</template>
+
+<style scoped>
+    #paneContainer2 {
+        position: absolute;
+        top:300px;
+        right: 100px;
+
+        /* top: 0px; */
+        /* left: 0px; */
+        /* width: 100%; */
+        /* height: 100%; */
+        /* background-color: #f80707; */
+        /* border: 1px solid black; */
+        /* overflow-x: scroll; */
+    }
+</style>

frontend/src/components/VextabWidget.vue

@@ -0,0 +1,225 @@
+<script setup>
+import { computed, onMounted, onUpdated, ref, watch } from 'vue'
+import { Artist, Flow, VexTab } from 'vextab/releases/vextab-div.js'
+
+// import TweakComponent from '@/components/TweakComponent2.vue'
+import { Pane } from 'tweakpane'
+import * as TextareaPlugin from '@pangenerator/tweakpane-textarea-plugin'
+
+const props = defineProps({
+  // int id
+  id: {
+    type: String,
+    required: true,
+  },
+  tabText: {
+    type: String,
+    required: false,
+  },
+  isActive: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+
+})
+
+const emit = defineEmits(['updateScoreCode'])
+
+let renderer = null
+let artist = null
+let tab = null
+let timeoutID = null
+let pane = null
+
+const SETTINGS_PARAMS = {
+  scale: 1.0,
+  width: 800,
+  // factor: 123,
+  // title: 'hello',
+  // color: '#ff0055',
+  // percentage: 50,
+  // theme: 'dark',
+  // prop: 'Put your\nmultiline\ntext here!'
+}
+
+const message = ref('hello')
+const currentScoreCode = ref(props.tabText)
+const showParsingError = ref(false)
+const parsingError = ref('')
+const count = ref(0)
+const settingsStatus = ref(false)
+const isActive = ref(props.isActive)
+
+const scoreRef = ref(null)
+const paneContainer = ref(null)
+const divId = computed(() => {
+  console.log('inside computed')
+  return `scoreContainer_${props.id}`
+})
+
+onMounted(() => {
+  // console.log($(`#${divId.value}`)[0])
+  console.log('mounted start')
+  initializePane()
+  initializeVexTab()
+  console.log('mounted end')
+})
+
+function initializeVexTab() {
+  // renderer = new Flow.Renderer($(`#${divId.value}`)[0], Flow.Renderer.Backends.SVG)
+  renderer = new Flow.Renderer(scoreRef.value, Flow.Renderer.Backends.SVG)
+  artist = new Artist(10, 10, SETTINGS_PARAMS.width, { scale: SETTINGS_PARAMS.scale })
+  tab = new VexTab(artist)
+  showScore()
+}
+function initializePane() {
+  pane = new Pane({
+    container: paneContainer.value,
+    title: 'VexTab Settings',
+  },
+  )
+  pane.registerPlugin(TextareaPlugin)
+  pane.addBinding(SETTINGS_PARAMS, 'scale', {
+    min: 0.5,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    artist.reset()
+    tab.reset()
+    tab.parse(currentScoreCode.value)
+    artist.options.scale = ev.value
+    artist.render(renderer)
+  })
+
+  pane.addBinding(SETTINGS_PARAMS, 'width', {
+    min: 400,
+    max: 1200,
+    step: 50,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    artist.reset()
+    tab.reset()
+    tab.parse(currentScoreCode.value)
+    artist.width = ev.value
+    artist.render(renderer)
+  })
+}
+
+function showScore() {
+  try {
+    artist.reset()
+    tab.reset()
+    tab.parse(currentScoreCode.value)
+
+    // artist.width += 100;
+    artist.render(renderer)
+    console.log('test')
+    console.log(artist.width)
+    showParsingError.value = false
+  }
+  catch (e) {
+    showParsingError.value = true
+    console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+    parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+  }
+}
+
+function handleKeyUp(event) {
+  if (timeoutID)
+    clearTimeout(timeoutID)
+  timeoutID = setTimeout(showScore, 500)
+}
+
+function handleDrop(event) {
+  event.preventDefault()
+  const textData = event.dataTransfer.getData('text')
+  const file = event.dataTransfer.files[0]
+  console.log(textData)
+  console.log(file)
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = function (e) {
+      currentScoreCode.value = e.target.result
+      showScore()
+    }
+    reader.readAsText(file)
+  }
+  else if (textData) {
+    currentScoreCode.value = textData
+    showScore()
+  }
+}
+
+function showHideSettings() {
+  console.log('showHideSettings')
+  settingsStatus.value = !settingsStatus.value
+}
+
+// invoked when there is any type of change in the component
+onUpdated(() => {
+  if (props.isActive !== isActive.value) {
+    // Prop has changed, update the ref and emit an event
+    if (props.isActive) {
+      isActive.value = props.isActive
+      emit('updateScoreCode', currentScoreCode.value)
+      console.log('emitted updateScoreCode')
+    }
+    isActive.value = props.isActive
+  }
+})
+
+watch(currentScoreCode, () => {
+  // Emit the event so that the parent component can update the tabText
+  // prop
+  emit('updateScoreCode', currentScoreCode.value)
+  console.log('emitted updateScoreCode')
+  // this should go to the first tab that is shown (for now vextab)
+}, { immediate: true })
+</script>
+
+<template>
+  <!--
+        Which ever of the following elements wants to use the class
+        attributes coming from the parent component needs to use
+        :class="$attrs.class"
+        UNLESS I have a single root div-element
+     -->
+  <div>
+    <!-- <button class="left-align i-twemoji:globe-showing-europe-africa" @click="showHideSettings">
+      Settings
+    </button> -->
+    <button class="i-mdi:file-document-edit-outline?mask flex text-3xl text-stone-700" @click="showHideSettings" />
+    <!-- <div class="mt-4 w-full flex items-center justify-center gap-x-4 p-2 text-4xl">
+      <button class="i-vscode:file-type-light-pnpm" />
+      <button class="i-vscode:file-type-light-pnpm?mask text-red-300" />
+    </div> -->
+    <div :id="divId" ref="scoreRef" class="scoreContainer" />
+    <div v-show="settingsStatus" class="tabSettingsArea">
+      <div ref="paneContainer" class="basis-3/12" />
+      <textarea
+        v-show="settingsStatus" v-model="currentScoreCode"
+        class="editorBox justify-center"
+        placeholder="add your vextab code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+
+    <div v-if="showParsingError" class="ml-10px mt-10px text-red-500" v-html="parsingError" />
+  </div>
+</template>
+
+<style scoped>
+    .tabSettingsArea {
+        display: flex;
+        /* flex-direction: row; */
+        align-items: center;
+        justify-content: center;
+
+        gap: 20px;
+        margin-left: 10px;
+    }
+</style>

frontend/src/main.js

@@ -0,0 +1,51 @@
+import { createApp } from 'vue'
+import { Tab, Tabs } from 'vue3-tabs-component'
+import { VGithubIcon } from 'v-github-icon'
+import { router } from '@/plugins/router'
+import '@/style.css'
+import App from '@/App.vue'
+
+// import { createMetaManager } from 'vue-meta'
+import 'virtual:uno.css'
+
+// Vuetify
+// import 'vuetify/styles'
+// import { createVuetify } from 'vuetify'
+// import * as components from 'vuetify/components'
+// import * as directives from 'vuetify/directives'
+// import { aliases, mdi } from 'vuetify/iconsets/mdi'
+// import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
+
+// const vuetify = createVuetify({
+//     components,
+//     directives,
+//     // icons: {
+//     //     defaultSet: 'mdi',
+//     //     aliases,
+//     //     sets: {
+//     //       mdi,
+//     //     },
+//     //   },
+//     icons: {
+//         defaultSet: 'mdi', // This is already the default value - only for display purposes
+//     },
+//     defaults: {
+//         VBtn: {
+//           color: 'primary',
+//           variant: 'outlined',
+//           rounded: true,
+//         },
+//       },
+//   })
+
+const app = createApp(App)
+  .use(router)
+//   .use(store)
+// .use(vuetify)
+  .component('tabs', Tabs)
+  .component('tab', Tab)
+  .component('v-github-icon', VGithubIcon)
+//   .use(createMetaManager())
+
+// await router.isReady()
+app.mount('#app')

frontend/src/plugins/router.js

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/analyzer',
+    name: 'Analyzer',
+    component: () => import('@/views/Analyzer.vue'),
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/Home.vue'),
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export { router }

frontend/src/style.css

@@ -0,0 +1,157 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --primary-color: #3498db;
+  --background-light: #c6dbfa;
+  --background-dark: #3c3d3d;
+  --accent-color: #b9a329;
+  --text-color-dark: #333333;
+  --text-color-light: #e0e0e0;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0px;
+  display: flex;
+  place-items: top center;
+  min-width: 320px;
+  min-height: 100vh;
+  /* background-color: #ff0000; */
+  background-color: var(--background-light);
+
+  overflow: auto;
+
+}
+
+body::-webkit-scrollbar {
+    width: 0em;
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: #888; /* Color of the thumb */
+    border-radius: 0.25em; /* Roundness of the thumb */
+    display: none;
+}
+
+body::-webkit-scrollbar-track {
+    background-color: #f0f0f0; /* Color of the track */
+    display: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+    background-color: var(--background-dark);
+    margin-top: 0px;
+    border-radius: 8px;
+    /* give some 3d shade */
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+
+.editorBox {
+    min-height: 100px;
+    min-width: 200px;
+    width: 500px;
+    height: 145px;
+    max-width:800px;
+    overflow: auto;
+    background-color: rgb(40, 41, 46);
+    color: rgb(187, 188, 196);
+    border-radius: 8px;
+}
+.editorBox::-webkit-scrollbar {
+width: 0.5em;
+}
+
+.editorBox::-webkit-scrollbar-thumb {
+background-color: #888; /* Color of the thumb */
+border-radius: 0.25em; /* Roundness of the thumb */
+}
+
+.editorBox::-webkit-scrollbar-track {
+background-color: #f0f0f0; /* Color of the track */
+}
+
+.parsing-error {
+    color: red;
+    margin-top: 10px;
+    text-align: left; /* Set text alignment to left */
+}
+
+.scoreContainer {
+    border: 0px solid rgb(212, 22, 22);
+    overflow-x: auto;
+}
+.scoreContainer::-webkit-scrollbar {
+    height: 0.5em;
+}
+.scoreContainer::-webkit-scrollbar-thumb {
+    background-color: #888; /* Color of the thumb */
+    border-radius: 0.25em; /* Roundness of the thumb */
+}
+.scoreContainer::-webkit-scrollbar-track {
+    background-color: #f0f0f0; /* Color of the track */
+}

frontend/src/views/Analyzer.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { client } from '@gradio/client'
+import { onMounted, ref } from 'vue'
+import VextabWidget from '@/components/VextabWidget.vue'
+import MusicXmlWidget from '@/components/MusicXmlWidget.vue'
+import '@/style.css'
+
+let app = null
+const response = ref('')
+const currentTab = ref(0)
+const currentScoreCode = ref('')
+const tabs = [
+  { name: 'VexTab', component: VextabWidget, id: 'first' },
+  { name: 'VexTab2', component: VextabWidget, id: 'second' },
+  { name: 'MusicXml', component: MusicXmlWidget, id: 'second' },
+]
+const tabText_component1 = `
+tabstave notation=true key=A time=4/4
+
+notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
+notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :q p5/4
+text :w, |#segno, ,|, :hd, , #tr
+`
+const tabText_component2 = `
+tabstave notation=true key=A time=4/4
+
+notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
+`
+
+async function connectToServer() {
+  try {
+    app = await client('xribene/guitar_diff')
+  }
+  catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
+
+onMounted(async () => {
+  // Call the async function when the component is mounted
+  await connectToServer()
+})
+
+async function processScore() {
+  try {
+    const result = await app.predict('/process', [currentScoreCode.value])
+    response.value = result.data
+    console.log(result.data)
+  }
+  catch (error) {
+    console.error('Error processing the score:', error)
+  }
+}
+
+function updateScoreCode(scoreCode) {
+  currentScoreCode.value = scoreCode
+  // console.log("updateScoreCode")
+  // console.log(currentScoreCode.value);
+}
+</script>
+
+<template>
+  <div class="guitar-score-analyzer">
+    <h1 class="title">
+      Guitar Score Analyzer
+    </h1>
+    <p class="description">
+      You can load a guitar score either using Vextab or MusicXml
+    </p>
+    <br>
+
+    <!-- Tab Buttons -->
+    <div class="debug-background-color tab-buttons">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-button" :class="[{ active: currentTab === index }]"
+        @click="currentTab = index"
+      >
+        {{ tab.name }}
+      </button>
+    </div>
+    <br>
+    <br>
+    <br>
+
+    <!-- <div>
+        <TweakComponent />
+      </div> -->
+    <!-- Vextab Widget -->
+    <div v-show="currentTab === 0" class="tab" :class="{ active: currentTab === 0 }">
+      <VextabWidget
+        :id="tabs[currentTab].id"
+        class="tab-vexTab"
+        :tab-text="tabText_component1"
+        :is-active="currentTab === 0"
+        @update-score-code="updateScoreCode"
+      />
+    </div>
+
+    <div v-show="currentTab === 1" class="tab" :class="{ active: currentTab === 1 }">
+      <VextabWidget
+        :id="tabs[currentTab].id"
+        class="tab-vexTab"
+        :tab-text="tabText_component2"
+        :is-active="currentTab === 1"
+        @update-score-code="updateScoreCode"
+      />
+    </div>
+
+    <!-- MusicXml Widget -->
+    <div v-show="currentTab === 2" class="tab" :class="{ active: currentTab === 2 }">
+      <MusicXmlWidget
+        :id="tabs[currentTab].id"
+        class="tab-musicXml"
+        :is-active="currentTab === 2"
+        @update-score-code="updateScoreCode"
+      />
+    </div>
+
+    <!-- Report Container -->
+    <div class="debug-background-color report-container">
+      <button class="analyze-button" @click="processScore">
+        Analyze
+      </button>
+      <p class="response">
+        {{ response }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.guitar-score-analyzer {
+  max-width: 1280px; /* Adjust the max width as needed */
+  margin: auto;
+  background-color: rgb(238, 235, 212);
+}
+
+.title {
+  font-size: 2em;
+  margin-bottom: 10px;
+  /* background-color: aqua; */
+}
+
+.description {
+  font-size: 1.2em;
+  margin-bottom: 20px;
+  /* background-color: aquamarine; */
+}
+
+.tab-buttons {
+  display: block;
+  /* background-color: #4caf50; */
+}
+
+.tab-button {
+  background-color: rgb(248, 240, 201);
+  padding: 10px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.tab-button.active {
+  background-color: var(--accent-color);
+}
+
+.tab {
+  display: none;
+}
+
+.tab.active {
+  display: flex;
+  /* background-color: #4caf50; */
+  width: 800px;
+  max-width: 1280px;
+  min-width:200px;
+  min-height:300px;
+
+}
+
+.analyze-button {
+  padding: 10px;
+  background-color: #4caf50;
+  color: #fff;
+  cursor: pointer;
+}
+
+.report-container {
+  margin-top: 20px;
+}
+
+/* Debug Styles - Remove when done */
+/* .debug-background-color {
+  background-color: #f0f0f0;
+} */
+</style>

frontend/src/views/Home.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="home-container">
+    <!-- <a href="https://vuejs.org/" target="_blank"> -->
+    <img src="/cedar_guitar_800.png" class="logo" alt="guitar">
+    <!-- </a> -->
+    <h1>Home</h1>
+  </div>
+</template>
+
+<style scoped>
+    .home-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 800px;
+        max-width: 1280px; /* Adjust the max width as needed */
+        margin: auto;
+        background-color: bisque;
+    }
+
+    .logo {
+        height: 12em;
+        padding: 1.5em;
+        will-change: filter;
+        transition: filter 300ms;
+    }
+    .logo:hover {
+        filter: drop-shadow(0 0 2em #646cffaa);
+    }
+    .logo.vue:hover {
+        filter: drop-shadow(0 0 2em #b8a642aa);
+    }
+</style>

frontend/uno.config.js

@@ -0,0 +1,46 @@
+import {
+  defineConfig,
+  //   presetIcons,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+import presetIcons from '@unocss/preset-icons/browser'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetIcons({
+      scale: 1.5,
+      warn: true,
+      unit: 'em',
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+        // ...
+      },
+      collections: {
+        // carbon: () => import('@iconify/json/carbon.json').then(i => i.default),
+        // mdi: () => import('@iconify/json/mid.json').then(i => i.default),
+        // logos: () => import('@iconify/json/logos.json').then(i => i.default),
+        // twemoji: () => import('@iconify/json/twemoji.json').then(i => i.default),
+        mdi: () => import('@iconify/json/json/mdi.json').then(i => i.default),
+        logos: () => import('@iconify/json/json/logos.json').then(i => i.default),
+        twemoji: () => import('@iconify/json/json/twemoji.json').then(i => i.default),
+        vscode: () => import('@iconify/json/json/vscode-icons.json').then(i => i.default),
+      },
+    }),
+    presetWebFonts({
+      provider: 'bunny',
+      fonts: {
+        sans: 'Inter',
+      },
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})

frontend/vite.config.js

@@ -0,0 +1,21 @@
+import path from 'node:path'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    UnoCSS(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  // build:{
+  //     target: "esnext" // or "es2019",
+  //    }
+
+})

pyproject.toml

@@ -0,0 +1,70 @@
+[tool.ruff]
+# Exclude a variety of commonly ignored directories.
+exclude = [
+    ".bzr",
+    ".direnv",
+    ".eggs",
+    ".git",
+    ".git-rewrite",
+    ".hg",
+    ".ipynb_checkpoints",
+    ".mypy_cache",
+    ".nox",
+    ".pants.d",
+    ".pyenv",
+    ".pytest_cache",
+    ".pytype",
+    ".ruff_cache",
+    ".svn",
+    ".tox",
+    ".venv",
+    ".vscode",
+    "__pypackages__",
+    "_build",
+    "buck-out",
+    "build",
+    "dist",
+    "node_modules",
+    "site-packages",
+    "venv",
+    "frontend"
+]
+
+# Same as Black.
+line-length = 100
+indent-width = 4
+
+# Assume Python 3.9
+target-version = "py39"
+
+[tool.ruff.lint]
+# Enable Pyflakes (`F`) and a subset of the pycodestyle (`E`)  codes by default.
+# select = ["E4", "E7", "E9", "F", "W", "PLR"]
+select = ["ALL"]
+ignore = ["ERA", "T201"]
+
+# Allow fix for all enabled rules (when `--fix`) is provided.
+fixable = ["ALL"]
+unfixable = []
+
+# Allow unused variables when underscore-prefixed.
+dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$"
+
+[tool.ruff.lint.pylint]
+max-args = 5
+
+[tool.ruff.lint.pycodestyle]
+max-doc-length = 100
+
+[tool.ruff.format]
+# Like Black, use double quotes for strings.
+quote-style = "double"
+
+# Like Black, indent with spaces, rather than tabs.
+indent-style = "space"
+
+# Like Black, respect magic trailing commas.
+skip-magic-trailing-comma = false
+
+# Like Black, automatically detect the appropriate line ending.
+line-ending = "auto"