Spaces:
Runtime error
Runtime error
File size: 3,216 Bytes
ca5bd83 72db8a4 075b025 ca5bd83 075b025 1b5779c 075b025 72db8a4 075b025 72db8a4 075b025 72db8a4 075b025 72db8a4 075b025 72db8a4 075b025 72db8a4 ca5bd83 72db8a4 075b025 72db8a4 ca5bd83 72db8a4 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<script lang="ts">
import { density, composing, style, temperature, notesImage, notesTokens, audioBlob } from '$lib/stores';
import { styles } from './config.json';
const updateMetadata = () => {
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: `${styles[$style]} Composition`,
artist: 'AI Guru Composer',
album: 'Hugging Face',
artwork: [
{
src: 'static/hugging-face-headphones.png',
sizes: '512x512',
type: 'image/png',
},
],
});
}
};
const createTask = async ({
music_style,
density,
temperature,
}: {
music_style: string;
density: string;
temperature: string;
}) => {
const taskResponse = await fetch('task/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
music_style,
density,
temperature,
}),
});
if (!taskResponse.ok || !taskResponse.headers.get('content-type')?.includes('application/json')) {
throw new Error(`Unable to create composition: [${taskResponse.status}] ${await taskResponse.text()}`);
}
const task = await taskResponse.json();
return task;
};
const pollTask = async (task: Record<string, any>) => {
const taskResponse = await fetch(`task/poll?task_id=${task.task_id}`);
if (!taskResponse.ok || !taskResponse.headers.get('content-type')?.includes('application/json')) {
throw new Error(`Unable to create composition: [${taskResponse.status}] ${await taskResponse.text()}`);
}
return await taskResponse.json();
};
const longPollTask = async (task: Record<string, any>, interval = 1_000, max = 100): Promise<Record<string, any>> => {
task = await pollTask(task);
if (task.status === 'completed' || task.status === 'failed' || (max && task.poll_count > max)) {
return task;
}
await new Promise((resolve) => setTimeout(resolve, interval));
return await longPollTask(task, interval, max);
};
const compose = async () => {
$composing = true;
try {
const task = await createTask({
music_style: $style,
density: $density,
temperature: $temperature,
});
const completedTask = await longPollTask(task);
const { audio, image, tokens } = completedTask.output;
$audioBlob = audio;
$notesImage = image;
$notesTokens = tokens;
updateMetadata();
} catch (err) {
console.error(err);
} finally {
$composing = false;
}
};
</script>
<button disabled={$composing} on:click={compose}>
{#if $composing}
Composing...
{:else}
Compose <img src="static/wand.svg" alt="Magic wand" />
{/if}
</button>
<style>
button {
display: block;
font-size: 1.2rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
color: hsl(0 0% 97%);
background: transparent;
border: 3px solid hsl(0 0% 97%);
border-radius: 0.375rem;
padding: 0.5rem 1rem;
cursor: pointer;
margin: 1rem auto 2rem;
}
button[disabled] {
border-color: hsl(0 0% 50%);
color: hsl(0 0% 50%);
cursor: initial;
}
img {
height: 1.2rem;
aspect-ratio: 1 / 1;
vertical-align: bottom;
}
@media (min-width: 900px) {
button {
margin-top: 0;
}
}
</style>
|