source/ui/src/routes/index.svelte

<script lang="ts">
import StyleOptions from '$lib/StyleOptions.svelte';
import DensityOptions from '$lib/DensityOptions.svelte';
import TemperatureOptions from '$lib/TemperatureOptions.svelte';
import ComposeButton from '$lib/ComposeButton.svelte';
import Notes from '$lib/Notes.svelte';
import Tokens from '$lib/Tokens.svelte';
import { audioBlob } from '$lib/stores';
</script>

<main>
  <h1>Composer</h1>
  <p class="heading">Trained on fifteen thousand songs. One AI model. Infinite compositions.</p>
  <p>
    This space contains a deep neural network model that can compose music. You can use it to generate audio in
    different styles, 4 bars at a time.
  </p>
  <p>
    Developed by <a href="https://twitter.com/ronvoluted" rel="noopener" target="_blank">Ron Au</a> and
    <a href="https://twitter.com/DrTBehrens" rel="noopener" target="_blank">Tristan Behrens</a>.
  </p>
  <p>Have fun! And always feel free to send us some feedback and share your compositions!</p>
  <section id="options">
    <StyleOptions />
    <DensityOptions />
    <TemperatureOptions />
  </section>
  <ComposeButton />
  {#if $audioBlob}
    <Notes />
    <Tokens />
  {/if}
</main>

<style>
main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.5rem;
  border-left: 0.25ch solid hsl(0 0% 97%);
  padding-left: 0.5ch;
}

.heading {
  font-size: 2.25rem;
}

p:not(.heading) {
  max-width: 40rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 0;
}

#options {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 1rem;
}

@media (min-width: 600px) {
  main {
    max-width: 60rem;
  }
}
@media (min-width: 900px) {
  #options {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>