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>