James Gentes

jgentes@gmail.com

github.com/jgentes/mixpoint

# INTRO

1. Demo!

Remix

MUI

SSR

Deployment

2. UI

3. State

IndexedDb

Teaful

Web File System API

4. Audio

Web Audio API

WaveSurfer

Demucs

LameMp3

# AGENDA
  • Built on React (vs Vue)
  • Good for SPAs (vs Astro)
  • Nested Routes (Next.js 13 Server Components)
  • Support for MUI (Solid and Svelte weren't working)
  • Very fast esBuild reloads

Remix

# REMIX

entry.server.tsx

# REMIX

entry.client.tsx

# REMIX

root.tsx

# REMIX

root.tsx

# REMIX
# MATERIAL UI

MUI: Components, Icons, Dark Mode

useColorScheme Hook + theme palettes

# MATERIAL UI

SSR & <ClientOnly>

# REMIX

Deployment

# REMIX

Deployment

# REMIX

Deployment

# REMIX

Session

Teaful.js

Data Lost on Browser Reload

Component State

Notifications

Smart Re-renders

Persistence

Dexie.js (IndexedDb)

Browser Storage Holds Data

User Preferences

FS Handles & Cache

Sync with Cloud?

Large Files

Web File System API

Your Local File System

Music Library

Downloaded Stems

Requires User Input

Application State

# APP STATE

Teaful.js

# SESSION STATE

https://github.com/teafuljs/teaful

Teaful.js

# SESSION STATE

https://github.com/teafuljs/teaful

Teaful.js - no .Provider / Object.is()

# SESSION STATE

Dexie.js (IndexedDb)

# PERSISTANT STATE

https://dexie.org/

Dexie.js (IndexedDb)

# PERSISTANT STATE

https://dexie.org/

Dexie.js (IndexedDb)

# PERSISTANT STATE

https://dexie.org/

Dexie.js (IndexedDb)

# PERSISTANT STATE

https://dexie.org/

Web File System API

# LOCAL STORAGE

Web File System API - Get Handle

# LOCAL STORAGE

Web File System API - Query Permission

# LOCAL STORAGE

Web File System API - Cache the Files!

# LOCAL STORAGE

Web File System API - Cache the Files!

# LOCAL STORAGE

TS trick

Web Audio - AudioContext

# WEB AUDIO

Web Audio - AudioContext

# WEB AUDIO

for garbage collection

Web Audio - WaveSurfer

# WEB AUDIO
# WEB AUDIO

1

Convert MP3 file to Base64 and upload to Banana.dev

2

Spin up container, run Demucs audio separation, return stems as WAV files in Base64

3

Poll Banana.dev every 50s and download files when ready

5

Store MP3 files in cache for future access without requiring user intervention

4

Launch Web Worker to run LameMP3 to convert WAV files back to MP3 (320kbps)

# WEB AUDIO

Dockerfile for Serverless GPU

# https://hub.docker.com/r/nvidia/cuda
FROM nvidia/cuda:12.0.0-base-ubuntu20.04

# Install demucs
RUN pip3 install --upgrade pip
RUN pip3 install -U demucs

# Trigger model download
RUN python3 -m demucs -n htdemucs test.mp3
RUN python3 -m demucs -n htdemucs_ft test.mp3
RUN rm -r separated  # cleanup

# We add the banana boilerplate here
ADD server.py .

# Add your model weight files 
# (in this case we have a python script)
ADD download.py .
RUN python3 download.py

# Add your custom app code, init() and inference()
ADD app.py .

EXPOSE 8000

CMD python3 -u server.py
# BANANA.DEV

Web Worker for LameMP3

# LAMEMP3

Web Worker for LameMP3

# LAMEMP3
  • Use it :)
  • Supabase for Auth
  • Mix recommendations
  • Rework UI layout
  • Website, bugfixes, etc

What's Next?

# NEXT

Thanks!

jgentes@gmail.com

Made with Slides.com