kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Small optimizations #1

Merged
Rettend merged 22 commits from kennethnym-main into main 2024-07-24 15:30:46 +01:00
Conversation 4 Commits 22 Files Changed 4 +31 -67
4 changed files with 31 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
modal_wrapper.py
View File

@@ -1,49 +0,0 @@
from audiocraft.models.musicgen import MusicGen
import modal
import io
import torch
MODEL_DIR = "/root/model/model_input"
MODEL_ID = "facebook/musicgen-large"
N_GPUS = 1
GPU_CONFIG = modal.gpu.A100(count=N_GPUS)
def download_model():
import torchaudio
from audiocraft.models.musicgen import MusicGen
MusicGen.get_pretrained(MODEL_ID)
image = modal.Image.from_registry("python:3.9.19-slim-bookworm")
image = (
image.apt_install("ffmpeg")
.env({"AUDIOCRAFT_CACHE_DIR": MODEL_DIR})
.pip_install("audiocraft==1.3.0", "torchaudio==2.1.0")
.run_function(download_model, timeout=20 * 60)
)
app = modal.App("infinifi", image=image)
@app.cls(gpu=GPU_CONFIG, container_idle_timeout=15 * 60)
class Model:
@modal.enter()
def load(self):
self.model = MusicGen.get_pretrained(MODEL_ID)
self.model.set_generation_params(duration=60)
@modal.method()
def sample_rate(self):
return self.model.sample_rate
@modal.method()
def generate(self, prompts):
wav = self.model.generate(prompts)
buf = io.BytesIO()
torch.save(wav, buf)
return buf.getvalue()

28
web/index.html
View File

@@ -1,15 +1,22 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>infinifi</title> <title>infinifi</title>
<link rel="stylesheet" href="/style.css">
<link rel="preload" href="./style.css" as="style">
<link rel="modulepreload" href="./bg.js">
<link rel="modulepreload" href="./script.js">
<link rel="preload" href="./images/cat-0.png" as="image">
<link rel="preload" href="./images/eeping-cat.png" as="image">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary"></meta> <meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@kennethnym"></meta> <meta name="twitter:site" content="@kennethnym">
<meta name="twitter:title" content="infinifi"></meta> <meta name="twitter:title" content="infinifi">
<meta name="twitter:description" content="infinite lo-fi beats in the background"></meta> <meta name="twitter:description" content="infinite lo-fi beats in the background">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -24,8 +31,8 @@
<input id="volume-slider" type="range" min="0" max="100" step="1" /> <input id="volume-slider" type="range" min="0" max="100" step="1" />
</div> </div>
</main> </main>
<img class="cat" src="/images/cat-0.png"></img> <img class="cat" src="./images/cat-0.png">
<img class="eeping-cat" src="/images/eeping-cat.png"></img> <img class="eeping-cat" src="./images/eeping-cat.png">
</div> </div>
<footer> <footer>
@@ -35,7 +42,10 @@
<canvas id="bg"></canvas> <canvas id="bg"></canvas>
<script type="text/javascript" src="/bg.js"></script> <audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
<script type="text/javascript" src="/script.js"></script> <audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></audio>
<script type="module" src="./bg.js"></script>
<script type="module" src="./script.js"></script>
</body> </body>
</html> </html>

8
web/script.js
View File

@@ -2,8 +2,8 @@ const playBtn = document.getElementById("play-btn");
const catImg = document.getElementsByClassName("cat")[0]; const catImg = document.getElementsByClassName("cat")[0];
const volumeSlider = document.getElementById("volume-slider"); const volumeSlider = document.getElementById("volume-slider");
const currentVolumeLabel = document.getElementById("current-volume-label"); const currentVolumeLabel = document.getElementById("current-volume-label");
const clickAudio = new Audio("/audio/click.wav"); const clickAudio = document.getElementById("click-audio");
const clickReleaseAudio = new Audio("/audio/click-release.wav"); const clickReleaseAudio = document.getElementById("click-release-audio");
const CROSSFADE_DURATION_MS = 5000; const CROSSFADE_DURATION_MS = 5000;
const CROSSFADE_INTERVAL_MS = 20; const CROSSFADE_INTERVAL_MS = 20;
@@ -17,7 +17,7 @@ let currentVolume = 0;
function playAudio() { function playAudio() {
// add a random query parameter at the end to prevent browser caching // add a random query parameter at the end to prevent browser caching
currentAudio = new Audio(`/current.mp3?t=${Date.now()}`); currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
currentAudio.onplay = () => { currentAudio.onplay = () => {
isPlaying = true; isPlaying = true;
playBtn.innerText = "pause"; playBtn.innerText = "pause";
@@ -93,7 +93,7 @@ function animateCat() {
} else { } else {
current += 1; current += 1;
} }
catImg.src = `/images/cat-${current}.png`; catImg.src = `./images/cat-${current}.png`;
}, 500); }, 500);
} }

13
web/style.css
View File

@@ -34,6 +34,7 @@ body {
padding: 2rem; padding: 2rem;
margin: 0; margin: 0;
background-color: var(--base); background-color: var(--base);
overflow: hidden;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
body { body {
@@ -170,21 +171,21 @@ a {
input[type="range"] { input[type="range"] {
overflow: hidden; overflow: hidden;
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
border: 2px solid var(--text); border: 2px solid var(--text);
background-color: var(--base); background-color: var(--base);
} }
input[type="range"]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
color: #13bba4; color: #13bba4;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
width: var(--range-height); width: var(--range-height);
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
background: var(--text); background: var(--text);
box-shadow: -80px 0 0 80px var(--range-accent); box-shadow: -80px 0 0 80px var(--range-accent);
} }
@@ -226,6 +227,8 @@ input[type="range"]::-ms-fill-upper {
font-weight: 800; font-weight: 800;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: var(--text); color: var(--text);
width: 68px;
text-align: center;
} }
.button:hover { .button:hover {
@@ -270,8 +273,7 @@ input[type="range"]::-ms-fill-upper {
.button:after { .button:after {
display: block; display: block;
position: absolute; position: absolute;
margin: -2px; margin: -2px -2px;
width: inherit;
top: 1px; top: 1px;
left: 1px; left: 1px;
right: -1px; right: -1px;
@@ -281,6 +283,7 @@ input[type="range"]::-ms-fill-upper {
background-color: var(--text); background-color: var(--text);
z-index: -1; z-index: -1;
transform: translate(2px, 2px); transform: translate(2px, 2px);
width: 42px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {