Spaces:
Runtime error
Runtime error
File size: 1,820 Bytes
ca5bd83 3deaf02 2cfd477 ca5bd83 075b025 3deaf02 1b5779c 3deaf02 d579a92 3deaf02 ca5bd83 2cfd477 ca5bd83 3deaf02 ca5bd83 3deaf02 ca5bd83 3deaf02 ca5bd83 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<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>
|