Skip to content

feat: AI sample generation in Music Blocks #4740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

feat: AI sample generation in Music Blocks #4740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7c3d1ef
frontend code for AI sample generation
haroon10725 Aug 17, 2025
9c56e15
frontend code for audio trimmer
haroon10725 Aug 23, 2025
c1c6e56
add title in trim input boxes
haroon10725 Aug 24, 2025
cc9bf78
add placeholder prompts
haroon10725 Aug 24, 2025
044fd95
add missing semicolon
haroon10725 Aug 24, 2025
9f42c87
remove extra spaces
haroon10725 Aug 24, 2025
5e7c026
stop generating audio msg on error
haroon10725 Aug 28, 2025
a0d4fd4
change minutes to seconds
haroon10725 Aug 31, 2025
176e921
update url
haroon10725 Oct 5, 2025
6e5978d
comment out the trimmer functionality
haroon10725 Oct 12, 2025
a00e58a
update text message
haroon10725 Oct 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions header-icons/prompt.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions header-icons/trim.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3087,6 +3087,7 @@ class Activity {
this.searchWidget.style.visibility === "visible" ||
this.helpfulSearchWidget.style.visibility === "visible" ||
this.isInputON ||
docById("samplerPrompt") ||
docById("planet-iframe").style.display === "" ||
docById("paste").style.visibility === "visible" ||
docById("wheelDiv").style.display === "" ||
Expand Down
333 changes: 333 additions & 0 deletions js/widgets/sampler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,339 @@ function SampleWidget() {
_("Playback"),
"");

this._promptBtn = widgetWindow.addButton(
"prompt.svg",
ICONSIZE,
_("Prompt"),
""
);

// this._trimBtn = widgetWindow.addButton(
// "trim.svg",
// ICONSIZE,
// _("Trim"),
// ""
// );

let generating = false;

this._promptBtn.onclick = () => {

this.widgetWindow.clearScreen();
let width, height;
if (!this.widgetWindow.isMaximized()) {
width = SAMPLEWIDTH;
height = SAMPLEHEIGHT;
} else {
width = this.widgetWindow.getWidgetBody().getBoundingClientRect().width;
height = this.widgetWindow.getWidgetFrame().getBoundingClientRect().height - 70;
}

const randomDigit = Math.floor(Math.random() * 10);

const promptList = [
"Birds chirping in the morning",
"Rain falling on a window",
"Waves crashing on some rocks",
"Cat meowing near a door",
"Dog barking in a park",
"Horse galloping in a field",
"Children laughing at a playground",
"Footsteps walking on wooden floor",
"Car honking on the street",
"Clock ticking in a quiet room"
];

const randomPrompt = promptList[randomDigit];

const container = document.createElement("div");
container.id = "samplerPrompt";
this.widgetWindow.getWidgetBody().appendChild(container);

container.style.height = height + "px";
container.style.width = width + "px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.alignItems = "center";
container.style.justifyContent = "center";
container.style.gap = "20px";

const h1 = document.createElement("h1");
h1.innerHTML = "AI Sample Generation";
h1.style.fontSize = "40px";
h1.style.marginTop = "0";
h1.style.marginBottom = "0px";
h1.style.fontWeight = "200";

const textArea = document.createElement("textarea");
textArea.style.height = "200px";
textArea.style.width = "650px";
textArea.style.fontSize = "30px";
textArea.style.resize = "none";
textArea.style.borderRadius = "10px";
textArea.style.border = "none";
textArea.style.padding = "15px";
textArea.placeholder = randomPrompt;
textArea.addEventListener("input", function() {
if (generating) {
submit.disabled = true;
preview.disabled = true;
save.disabled = true;
} else {
submit.disabled = false;
preview.disabled = true;
save.disabled = true;
}
});

const buttonDiv = document.createElement("div");
buttonDiv.style.display = "flex";
buttonDiv.style.justifyContent = "space-between";
buttonDiv.style.width = "650px";

const submit = document.createElement("button");
submit.style.width = "152px";
submit.style.height = "61px";
submit.style.fontSize = "32px";
submit.style.borderRadius = "10px";
submit.style.border = "none";
submit.style.cursor = "pointer";
submit.innerHTML = "Submit";
submit.onclick = async function () {
submit.disabled = true;
const prompt = textArea.value;
const encodedPrompt = encodeURIComponent(prompt);
const url = `http://13.61.94.100:8000/generate?prompt=${encodedPrompt}`;

let blinkInterval;

try {
generating = true;
activity.textMsg(_("Generating Audio... (It may take up to 1 minute)"), 2500);

blinkInterval = setInterval(() => {
activity.textMsg(_("Generating Audio..."), 1000);
}, 5000);

const response = await fetch(url);
const result = await response.json();

clearInterval(blinkInterval);

if (result.status === "success") {
generating = false;
activity.textMsg(_("Audio ready!"), 3000);
preview.disabled = false;
save.disabled = false;
} else {
generating = false;
activity.textMsg(_("Failed to generate audio"), 3000);
}
} catch (error) {
generating = false;
clearInterval(blinkInterval);
activity.textMsg(_("Error occurred"), 3000);
submit.disabled = false;
}
};

const preview = document.createElement("button");
preview.style.width = "152px";
preview.style.height = "61px";
preview.style.fontSize = "32px";
preview.style.borderRadius = "10px";
preview.style.border = "none";
preview.style.cursor = "pointer";
preview.innerHTML = "Preview";
preview.disabled = true;
preview.onclick = function (){
const audioURL = `http://13.61.94.100:8000/preview`;
const audio = new Audio(audioURL);
audio.play();
};

const save = document.createElement("button");
save.style.width = "152px";
save.style.height = "61px";
save.style.fontSize = "32px";
save.style.borderRadius = "10px";
save.style.border = "none";
save.style.cursor = "pointer";
save.innerHTML = "Save";
save.disabled = true;
save.onclick = function (){
const audioURL = `http://13.61.94.100:8000/save`;
const link = document.createElement('a');
link.href = audioURL;
link.download = 'output.wav';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};

buttonDiv.appendChild(submit);
buttonDiv.appendChild(preview);
buttonDiv.appendChild(save);

container.appendChild(h1)
container.appendChild(textArea);
container.appendChild(buttonDiv);
};

// this._trimBtn.onclick = () => {

// this.widgetWindow.clearScreen();
// let width, height;
// if (!this.widgetWindow.isMaximized()) {
// width = SAMPLEWIDTH;
// height = SAMPLEHEIGHT;
// } else {
// width = this.widgetWindow.getWidgetBody().getBoundingClientRect().width;
// height = this.widgetWindow.getWidgetFrame().getBoundingClientRect().height - 70;
// }

// const container = document.createElement("div");
// container.id = "samplerPrompt";
// this.widgetWindow.getWidgetBody().appendChild(container);

// container.style.height = height + "px";
// container.style.width = width + "px";
// container.style.display = "flex";
// container.style.flexDirection = "column";
// container.style.alignItems = "center";
// container.style.justifyContent = "center";
// container.style.gap = "20px";

// const h1 = document.createElement("h1");
// h1.innerHTML = "Audio Trimmer";
// h1.style.fontSize = "40px";
// h1.style.marginTop = "0";
// h1.style.marginBottom = "0px";
// h1.style.fontWeight = "200";

// const divUploadSample = document.createElement("div");
// divUploadSample.style.backgroundColor = "#8cc6ff";
// divUploadSample.style.width = "50px";
// divUploadSample.style.height = "50px";
// divUploadSample.style.display = "flex";
// divUploadSample.style.cursor = "pointer";
// divUploadSample.style.justifyContent = "center";
// divUploadSample.style.alignItems = "center";

// const uploadSample = document.createElement("img");
// uploadSample.setAttribute("src", "/header-icons/load-media.svg");
// uploadSample.style.height = "32px";
// uploadSample.style.width = "32px";

// divUploadSample.appendChild(uploadSample);

// const fileChooser = document.createElement("input");
// fileChooser.type = "file";

// divUploadSample.onclick = function () {
// fileChooser.click();
// };

// fileChooser.onchange = function () {
// const file = fileChooser.files[0];
// const audioPlayer = document.createElement("audio");
// audioPlayer.controls = true;
// const fileURL = URL.createObjectURL(file);
// audioPlayer.src = fileURL;
// container.replaceChild(audioPlayer, divUploadSample);
// };

// const inputDiv = document.createElement("div");
// inputDiv.style.width = "400px";
// inputDiv.style.display = "flex";
// inputDiv.style.justifyContent = "space-between";

// const fromInputBox = document.createElement("input");
// fromInputBox.type = "text";
// fromInputBox.title = "Enter start time (in seconds)";
// fromInputBox.placeholder = "0.00";
// fromInputBox.style.width = "152px";
// fromInputBox.style.height = "61px";
// fromInputBox.style.backgroundColor = "#FFFFFF";
// fromInputBox.style.color = "#766C6C";
// fromInputBox.style.fontSize = "32px";
// fromInputBox.style.font = "Inter";
// fromInputBox.style.borderRadius = "10px"
// fromInputBox.style.border = "none"
// fromInputBox.style.padding = "8px";
// fromInputBox.style.textAlign = "center";
// fromInputBox.type = "number";

// const toInputBox = document.createElement("input");
// toInputBox.type = "text";
// toInputBox.title = "Enter end time (in seconds)";
// toInputBox.placeholder = "10.00";
// toInputBox.style.width = "152px";
// toInputBox.style.height = "61px";
// toInputBox.style.backgroundColor = "#FFFFFF";
// toInputBox.style.color = "#766C6C";
// toInputBox.style.fontSize = "32px";
// toInputBox.style.font = "Inter";
// toInputBox.style.borderRadius = "10px";
// toInputBox.style.border = "none";
// toInputBox.style.padding = "8px";
// toInputBox.style.textAlign = "center";
// toInputBox.type = "number";

// inputDiv.appendChild(fromInputBox);
// inputDiv.appendChild(toInputBox);

// const buttonDiv = document.createElement("div");
// buttonDiv.style.width = "400px";
// buttonDiv.style.display = "flex";
// buttonDiv.style.justifyContent = "space-between";

// const preview = document.createElement("button");
// preview.style.width = "152px";
// preview.style.height = "61px";
// preview.style.fontSize = "32px";
// preview.style.borderRadius = "10px";
// preview.style.border = "none";
// preview.style.cursor = "pointer";
// preview.innerHTML = "Preview";

// preview.onclick = async function() {
// const from = fromInputBox.value
// const to = toInputBox.value
// const audioURL = `http://13.61.94.100:8000/trim-preview?start=${from}&end=${to}`;
// const audio = new Audio(audioURL);
// audio.play();
// save.disabled = false;
// };

// const save = document.createElement("button");
// save.style.width = "152px";
// save.style.height = "61px";
// save.style.fontSize = "32px";
// save.style.borderRadius = "10px";
// save.style.border = "none";
// save.style.cursor = "pointer";
// save.innerHTML = "Save";
// save.disabled = true;
// save.onclick = function (){
// const audioURL = `http://13.61.94.100:8000/trim-save`;
// const link = document.createElement('a');
// link.href = audioURL;
// link.download = 'trimmed-output.wav';
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// };

// buttonDiv.appendChild(preview);
// buttonDiv.appendChild(save);

// container.appendChild(h1);
// container.appendChild(divUploadSample);
// container.appendChild(inputDiv);
// container.appendChild(buttonDiv);
// };

this._playbackBtn.id="playbackBtn";
this._playbackBtn.classList.add("disabled");

Expand Down
11 changes: 11 additions & 0 deletions js/widgets/widgetWindows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,17 @@ class WidgetWindow {
return this;
}

/**
* @public
* @return {WidgetWindow} this
*
* Clears the widget window not the toolbar
*/
clearScreen() {
this._widget.innerHTML = "";
return this;
}

/**
* @private
* @return {WidgetWindow} this
Expand Down
Loading