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

Merge pull request #1 from Rettend/kennethnym-main

Browse Source 
perf: preload assets upfront to prevent waterfall
This commit is contained in:
Kenneth
2024-07-24 15:30:46 +01:00
committed by GitHub
parent fa49faea5f 50c5599d5e
commit df353b7472
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>
<html>
<head>
<meta charset="utf-8">
<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="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@kennethnym"></meta>
<meta name="twitter:title" content="infinifi"></meta>
<meta name="twitter:description" content="infinite lo-fi beats in the background"></meta>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@kennethnym">
<meta name="twitter:title" content="infinifi">
<meta name="twitter:description" content="infinite lo-fi beats in the background">
</head>
<body>
<div class="container">
@@ -24,8 +31,8 @@
<input id="volume-slider" type="range" min="0" max="100" step="1" />
</div>
</main>
<img class="cat" src="/images/cat-0.png"></img>
<img class="eeping-cat" src="/images/eeping-cat.png"></img>
<img class="cat" src="./images/cat-0.png">
<img class="eeping-cat" src="./images/eeping-cat.png">
</div>
<footer>
@@ -35,7 +42,10 @@
<canvas id="bg"></canvas>
<script type="text/javascript" src="/bg.js"></script>
<script type="text/javascript" src="/script.js"></script>
<audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
<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>
</html>

8
web/script.js
View File

@@ -2,8 +2,8 @@ const playBtn = document.getElementById("play-btn");
const catImg = document.getElementsByClassName("cat")[0];
const volumeSlider = document.getElementById("volume-slider");
const currentVolumeLabel = document.getElementById("current-volume-label");
const clickAudio = new Audio("/audio/click.wav");
const clickReleaseAudio = new Audio("/audio/click-release.wav");
const clickAudio = document.getElementById("click-audio");
const clickReleaseAudio = document.getElementById("click-release-audio");
const CROSSFADE_DURATION_MS = 5000;
const CROSSFADE_INTERVAL_MS = 20;
@@ -17,7 +17,7 @@ let currentVolume = 0;
function playAudio() {
// 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 = () => {
isPlaying = true;
playBtn.innerText = "pause";
@@ -93,7 +93,7 @@ function animateCat() {
} else {
current += 1;
}
catImg.src = `/images/cat-${current}.png`;
catImg.src = `./images/cat-${current}.png`;
}, 500);
}

13
web/style.css
View File

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