```
### 2. Create `frontend/app.js`
```javascript
const uploadBtn = document.getElementById('uploadBtn');
const fileInput = document.getElementById('fileInput');
const status = document.getElementById('status');
const players = document.getElementById('players');
const originalPlayer = document.getElementById('originalPlayer');
const cleanedPlayer = document.getElementById('cleanedPlayer');
uploadBtn.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) {
status.textContent = 'Please select a file first.';
return;
}
status.textContent = 'Uploading and processing... this takes 1-3 minutes.';
players.hidden = true;
const formData = new FormData();
formData.append('file', file);
const response = await fetch('http://localhost:8000/upload', {
method: 'POST',
body: formData,
});
const data = await response.json();
originalPlayer.src = URL.createObjectURL(file);
cleanedPlayer.src = `http://localhost:8000${data.download_url}`;
players.hidden = false;
status.textContent = 'Done!';
});
```
### 3. Create `frontend/style.css`
```css
body {
font-family: sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
padding: 40px 20px;
}
.card {
background: white;
padding: 32px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
max-width: 560px;
width: 100%;
}
h1 { margin-top: 0; }
input[type="file"] { display: block; margin: 16px 0; }
button {
background: #2563eb;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover { background: #1d4ed8; }
#status { margin: 16px 0; color: #555; }
.players {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
```
---
## How to open it
Just open the HTML file directly in the browser — no server needed for the frontend:
```bash
xdg-open frontend/index.html # Linux
```
Make sure the FastAPI backend is running first:
```bash
source venv/bin/activate
uvicorn backend.main:app --reload
```
---
## What the user sees
1. Opens the page — sees a clean upload card
2. Selects an audio file
3. Clicks "Upload & Clean"
4. Status shows "Processing..." while Demucs runs
5. Two audio players appear: original and cleaned
6. User hits play on both to compare
---
## Notes
- The backend URL is hardcoded to `localhost:8000` — update this to the live Hugging Face URL after deployment
- No file type validation on the frontend yet — the backend will reject non-audio files anyway
- Processing takes 1–3 minutes on CPU — the status message sets that expectation for the user