feat(api): Connect frontend + backend

source/ui/src/config/styles.json

@@ -1,9 +0,0 @@
-{
-  "piano": "Piano",
-  "chamber": "Chamber Music",
-  "rock_and_metal": "Rock and Metal",
-  "synth": "Synthesizer",
-  "church": "Church",
-  "timpani_strings_harp": "Timpani, Contrabass, Harp",
-  "country": "Country"
-}

source/ui/src/lib/ComposeButton.svelte

@@ -1,10 +1,45 @@
 <script lang="ts">
-import { loading } from '$lib/stores';
+import { density, composing, style, temperature, notesImage, notesTokens, audioBlob } from '$lib/stores';
 
-$: text = $loading ? 'Composing...' : 'Compose ✨';
+const compose = async (): Promise<void> => {
+  try {
+    $composing = true;
+    const composeResponse = await fetch('compose', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        music_style: $style,
+        density: $density,
+        temperature: $temperature,
+      }),
+    });
+
+    if (!composeResponse.ok) {
+      throw new Error(`Unable to create composition: [${composeResponse.status}] ${composeResponse.text()}`);
+    }
+
+    const { audio, image, tokens } = await composeResponse.json();
+
+    $notesImage = image;
+    $notesTokens = tokens;
+    $audioBlob = audio;
+  } catch (err) {
+    console.error(err);
+  } finally {
+    $composing = false;
+  }
+};
 </script>
 
-<button disabled={$loading}>{text}</button>
+<button disabled={$composing} on:click={compose}>
+  {#if $composing}
+    Composing...
+  {:else}
+    Compose <img src="wand.svg" alt="Magic wand" />
+  {/if}
+</button>
 
 <style>
 button {
@@ -26,4 +61,10 @@ button[disabled] {
   color: hsl(0 0% 50%);
   cursor: initial;
 }
+
+img {
+  height: 1.2rem;
+  aspect-ratio: 1 / 1;
+  vertical-align: bottom;
+}
 </style>

source/ui/src/lib/DensityOptions.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
 import { density } from './stores';
+import { densities } from './config.json';
 import Radio from './Radio.svelte';
-
-const options = ['Low', 'Medium', 'High'];
-const type = 'density';
 </script>
 
 <div>
   <fieldset>
     <legend>Note density</legend>
-    <Radio bind:selection={$density} {options} {type} />
+    <Radio bind:selection={$density} options={densities} />
   </fieldset>
 </div>
 

source/ui/src/lib/NoteTokens.svelte

@@ -1,31 +1,18 @@
+<script lang="ts">
+import { notesTokens } from './stores';
+</script>
+
 <section>
   <h2>Tokenized notes</h2>
-  <p>
-    PIECE_START TRACK_START INST=DRUMS DENSITY=6 BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42
-    TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38
-    NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35
-    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1
-    NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1
-    NOTE_OFF=35 NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1
-    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42
-    TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42
-    TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38
-    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35
-    NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42
-    TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1
-    NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1
-    NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42
-  </p>
+  {#if $notesTokens}
+    <p>{$notesTokens}</p>
+  {/if}
 </section>
 
 <style>
-/* h2 {
-  font-family: 'Italiana', serif;
-} */
 section {
   border: 2px solid hsl(0 0% 80%);
   border-radius: 0.375rem;
-  /* background: hsl(0 0% 20% / 50%); */
   padding: 1rem;
 }
 </style>

source/ui/src/lib/NoteVisualisation.svelte

@@ -1,18 +1,19 @@
+<script lang="ts">
+import { notesImage } from './stores';
+</script>
+
 <section>
   <h2>Visualised notes</h2>
-  <img src="compose.png" alt="MIDI notes of composition" />
+  <img src={$notesImage} alt="MIDI notes of composition" />
 </section>
 
 <style>
 section {
   border: 2px solid hsl(0 0% 80%);
   border-radius: 0.375rem;
-  /* background: hsl(0 0% 20% / 50%); */
   padding: 1rem;
 }
-/* h2 {
-  font-family: 'Italiana', serif;
-} */
+
 img {
   display: block;
   margin: auto;

source/ui/src/lib/Playback.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { playing } from '$lib/stores';
+import { audioBlob } from './stores';
 </script>
 
-<audio controls src="download.wav" />
+<audio src={$audioBlob} controls />
 
 <style>
 audio {

source/ui/src/lib/Radio.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-export let options: string[];
-export let type: string;
-export let selection: string = options[1];
+export let options: Record<string, string>;
+const keys: string[] = Object.keys(options);
+export let selection: string = keys[1];
 </script>
 
 <div class="options">
-  {#each options as option, i}
-    <label data-selected={option === selection}>
-      {option}
-      <input type="radio" bind:group={selection} value={option} />
+  {#each keys as key}
+    <label data-selected={key === selection}>
+      {options[key]}
+      <input type="radio" bind:group={selection} value={key} />
     </label>
   {/each}
   <input type="radio" checked />

source/ui/src/lib/StyleOptions.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 import { style } from './stores';
-import stylesConfig from '../config/styles.json';
+import { styles } from './config.json';
 
-const keys: string[] = Object.keys(stylesConfig);
+const keys: string[] = Object.keys(styles);
 </script>
 
 <fieldset>
-  <legend>{stylesConfig[$style] || 'Synthesizer'}</legend>
+  <legend>{styles[$style] || 'Synthesizer'}</legend>
   <div class="grid">
     {#each keys as key, i}
       <label data-selected={$style === key}>
         <div>
-          <img src={`${key}.svg`} alt={stylesConfig[key]} />
+          <img src={`${key}.svg`} alt={styles[key]} />
         </div>
         <input type="radio" bind:group={$style} value={key} />
       </label>

source/ui/src/lib/TemperatureOptions.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
 import { temperature } from './stores';
+import { temperatures } from './config.json';
 import Radio from './Radio.svelte';
-
-const options = ['Low', 'Medium', 'High', 'Very High'];
-const type = 'temperature';
 </script>
 
 <div>
   <fieldset>
     <legend>Temperature</legend>
-    <Radio bind:selection={$temperature} {options} {type} />
+    <Radio bind:selection={$temperature} options={temperatures} />
   </fieldset>
 </div>
 

source/ui/src/lib/config.json

@@ -0,0 +1,22 @@
+{
+  "styles": {
+    "piano": "Piano",
+    "chamber": "Chamber Music",
+    "rock_and_metal": "Rock and Metal",
+    "synth": "Synthesizer",
+    "church": "Church",
+    "timpani_strings_harp": "Timpani, Contrabass, Harp",
+    "country": "Country"
+  },
+  "densities": {
+    "low": "Low",
+    "medium": "Medium",
+    "high": "High"
+  },
+  "temperatures": {
+    "low": "Low",
+    "medium": "Medium",
+    "high": "High",
+    "very_high": "Very High"
+  }
+}

source/ui/src/lib/stores.ts

@@ -2,8 +2,16 @@ import { writable } from 'svelte/store';
 
 import type { Writable } from 'svelte/store';
 
-export const loading: Writable<boolean> = writable(false);
-export const playing: Writable<boolean> = writable(true);
+/* Input parameters */
 export const style: Writable<string> = writable('synth');
-export const density: Writable<string> = writable('Medium');
-export const temperature: Writable<string> = writable('Medium');
+export const density: Writable<string> = writable('medium');
+export const temperature: Writable<string> = writable('medium');
+
+/* Audio state */
+export const composing: Writable<boolean> = writable(false);
+export const playing: Writable<boolean> = writable(true);
+
+/* Composition outputs */
+export const audioBlob: Writable<string> = writable('');
+export const notesImage: Writable<string> = writable('');
+export const notesTokens: Writable<string> = writable('');