diff --git a/header-icons/prompt.svg b/header-icons/prompt.svg
new file mode 100644
index 0000000000..c433bfa970
--- /dev/null
+++ b/header-icons/prompt.svg
@@ -0,0 +1,12 @@
+
+
+
+
\ No newline at end of file
diff --git a/header-icons/trim.svg b/header-icons/trim.svg
new file mode 100644
index 0000000000..456430dc29
--- /dev/null
+++ b/header-icons/trim.svg
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/js/activity.js b/js/activity.js
index 828c76c82e..bd3d5c786c 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -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 === "" ||
diff --git a/js/widgets/sampler.js b/js/widgets/sampler.js
index 1f90c58857..33716980b3 100644
--- a/js/widgets/sampler.js
+++ b/js/widgets/sampler.js
@@ -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");
diff --git a/js/widgets/widgetWindows.js b/js/widgets/widgetWindows.js
index 3963703ff9..755822328a 100644
--- a/js/widgets/widgetWindows.js
+++ b/js/widgets/widgetWindows.js
@@ -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