source/ui/src/lib/NoteVisualisation.svelte

<script lang="ts">
import { notesImage } from './stores';
</script>

<section>
  <h2>Visualised notes</h2>
  <img src={$notesImage} alt="MIDI notes of composition" />
</section>

<style>
section {
  border: 2px solid hsl(0 0% 80%);
  border-radius: 0.375rem;
  padding: 1rem;
}

img {
  display: block;
  margin: auto;
  max-width: 100%;
}
</style>