|
<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> |
|
|