Spaces:
Running
Running
Commit
·
77d3f6c
1
Parent(s):
f237ac4
Add 5 files
Browse files- README.md +5 -8
- app.js +15 -0
- index.html +1 -19
- main.js +35 -0
- package.json +11 -0
README.md
CHANGED
|
@@ -1,11 +1,8 @@
|
|
| 1 |
---
|
|
|
|
| 2 |
title: Music Gen
|
| 3 |
-
emoji: 📉
|
| 4 |
-
colorFrom: gray
|
| 5 |
-
colorTo: indigo
|
| 6 |
sdk: static
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
license: apache-2.0
|
| 3 |
title: Music Gen
|
|
|
|
|
|
|
|
|
|
| 4 |
sdk: static
|
| 5 |
+
emoji: 👨💻
|
| 6 |
+
colorFrom: yellow
|
| 7 |
+
colorTo: green
|
| 8 |
+
---
|
|
|
app.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const generate = async (text) => {
|
| 2 |
+
const token = 'Your API Token'
|
| 3 |
+
const model = 'facebook/musicgen-large'
|
| 4 |
+
const prompt = text
|
| 5 |
+
const url = `https://api.huggingface.co/v1/models/${model}`
|
| 6 |
+
const response = await fetch(url, {
|
| 7 |
+
method: 'POST',
|
| 8 |
+
body: JSON.stringify({ token, prompt }),
|
| 9 |
+
headers: {
|
| 10 |
+
'Content-Type': 'application/json'
|
| 11 |
+
}
|
| 12 |
+
})
|
| 13 |
+
const json = await response.json()
|
| 14 |
+
return json.generated_text
|
| 15 |
+
}
|
index.html
CHANGED
|
@@ -1,19 +1 @@
|
|
| 1 |
-
|
| 2 |
-
<html>
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="utf-8" />
|
| 5 |
-
<meta name="viewport" content="width=device-width" />
|
| 6 |
-
<title>My static Space</title>
|
| 7 |
-
<link rel="stylesheet" href="style.css" />
|
| 8 |
-
</head>
|
| 9 |
-
<body>
|
| 10 |
-
<div class="card">
|
| 11 |
-
<h1>Welcome to your static Space!</h1>
|
| 12 |
-
<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
|
| 13 |
-
<p>
|
| 14 |
-
Also don't forget to check the
|
| 15 |
-
<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
|
| 16 |
-
</p>
|
| 17 |
-
</div>
|
| 18 |
-
</body>
|
| 19 |
-
</html>
|
|
|
|
| 1 |
+
<html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Music Gen</title></head><body class="prose"><div class="flex items-center justify-center h-screen bg-black"><div class="w-full max-w-md p-4 space-y-8"><form class="space-y-8" action="/process" method="GET" id="generate-form"><textarea name="text" id="text" class="block w-full p-6 border-4 border-green-700 border-dashed" required>Type...</textarea><button class="p-4 bg-green-700 text-white font-bold" type="submit" id="generate"><i class="fas fa-music" aria-hidden="true"></i> Generate</button></form><div class="space-y-8" id="result"></div></div></div></body><script src="app.js"></script></html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
main.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { useState } from 'alpinejs'
|
| 2 |
+
|
| 3 |
+
const app = document.getElementById('app')
|
| 4 |
+
|
| 5 |
+
const generateForm = document.getElementById('generate-form')
|
| 6 |
+
|
| 7 |
+
const result = document.getElementById('result')
|
| 8 |
+
|
| 9 |
+
const generate = document.getElementById('generate')
|
| 10 |
+
|
| 11 |
+
const textarea = document.getElementById('text')
|
| 12 |
+
|
| 13 |
+
const [data, setData] = useState([])
|
| 14 |
+
|
| 15 |
+
const fetchData = async () => {
|
| 16 |
+
const response = await fetch('https://huggingface.co/facebook/musicgen-large')
|
| 17 |
+
const data = await response.json()
|
| 18 |
+
setData(data)
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
generateForm.onsubmit = async (event) => {
|
| 22 |
+
event.preventDefault()
|
| 23 |
+
result.innerHTML = ''
|
| 24 |
+
generate.disabled = true
|
| 25 |
+
const text = textarea.value
|
| 26 |
+
if (text) {
|
| 27 |
+
const generated = await generate(text)
|
| 28 |
+
result.innerHTML = generated
|
| 29 |
+
} else {
|
| 30 |
+
result.innerHTML = '<p class="bg-green-100 border-green-700 border-dashed p-4">Error: No text entered.</p>'
|
| 31 |
+
}
|
| 32 |
+
generate.disabled = false
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
fetchData()
|
package.json
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"scripts": {
|
| 3 |
+
"start": "serve"
|
| 4 |
+
},
|
| 5 |
+
"dependencies": {
|
| 6 |
+
"alpinejs": "^3.x.x",
|
| 7 |
+
"daisyui": "^3.1.6",
|
| 8 |
+
"tailwindcss": "^3.0.19",
|
| 9 |
+
"three": "^0.156.1"
|
| 10 |
+
}
|
| 11 |
+
}
|