main.js

import { useState } from 'alpinejs'

const app = document.getElementById('app')

const generateForm = document.getElementById('generate-form')

const result = document.getElementById('result')

const generate = document.getElementById('generate')

const textarea = document.getElementById('text')

const [data, setData] = useState([])

const fetchData = async () => {
 const response = await fetch('https://huggingface.co/facebook/musicgen-large')
 const data = await response.json()
 setData(data)
}

generateForm.onsubmit = async (event) => {
 event.preventDefault()
 result.innerHTML = ''
 generate.disabled = true
 const text = textarea.value
 if (text) {
    const generated = await generate(text)
    result.innerHTML = generated
 } else {
    result.innerHTML = '<p class="bg-green-100 border-green-700 border-dashed p-4">Error: No text entered.</p>'
 }
 generate.disabled = false
}

fetchData()