Skip to content

Commit 7c3d1ef

Browse files
haroon10725haroon10725
committed
frontend code for AI sample generation
1 parent 2836d91 commit 7c3d1ef

File tree

5 files changed

+333
-0
lines changed

5 files changed

+333
-0
lines changed

‎header-icons/prompt.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎header-icons/trim.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎js/activity.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3087,6 +3087,7 @@ class Activity {
30873087
this.searchWidget.style.visibility === "visible" ||
30883088
this.helpfulSearchWidget.style.visibility === "visible" ||
30893089
this.isInputON ||
3090+
docById("samplerPrompt") ||
30903091
docById("planet-iframe").style.display === "" ||
30913092
docById("paste").style.visibility === "visible" ||
30923093
docById("wheelDiv").style.display === "" ||

‎js/widgets/sampler.js‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,306 @@ function SampleWidget() {
493493
_("Playback"),
494494
"");
495495

496+
this._promptBtn = widgetWindow.addButton(
497+
"prompt.svg",
498+
ICONSIZE,
499+
_("Prompt"),
500+
""
501+
);
502+
503+
this._trimBtn = widgetWindow.addButton(
504+
"trim.svg",
505+
ICONSIZE,
506+
_("Trim"),
507+
""
508+
);
509+
510+
this._promptBtn.onclick = () => {
511+
512+
this.widgetWindow.clearScreen();
513+
let width, height;
514+
if (!this.widgetWindow.isMaximized()) {
515+
width = SAMPLEWIDTH;
516+
height = SAMPLEHEIGHT;
517+
} else {
518+
width = this.widgetWindow.getWidgetBody().getBoundingClientRect().width;
519+
height = this.widgetWindow.getWidgetFrame().getBoundingClientRect().height - 70;
520+
}
521+
522+
const randomDigit = Math.floor(Math.random() * 10);
523+
524+
const promptList = [
525+
"a",
526+
"b",
527+
"c",
528+
"d",
529+
"e",
530+
"f",
531+
"g",
532+
"h",
533+
"i",
534+
"j"
535+
]
536+
537+
const randomPrompt = promptList[randomDigit]
538+
539+
const container = document.createElement("div");
540+
container.id = "samplerPrompt";
541+
this.widgetWindow.getWidgetBody().appendChild(container);
542+
543+
container.style.height = height + "px";
544+
container.style.width = width + "px";
545+
container.style.display = "flex";
546+
container.style.flexDirection = "column";
547+
container.style.alignItems = "center";
548+
container.style.justifyContent = "center";
549+
container.style.gap = "20px";
550+
551+
const h1 = document.createElement("h1");
552+
h1.innerHTML = "AI Sample Generation";
553+
h1.style.fontSize = "40px";
554+
h1.style.marginTop = "0";
555+
h1.style.marginBottom = "0px";
556+
h1.style.fontWeight = "200";
557+
558+
const textArea = document.createElement("textarea");
559+
textArea.style.height = "200px";
560+
textArea.style.width = "650px";
561+
textArea.style.fontSize = "30px";
562+
textArea.style.resize = "none";
563+
textArea.style.borderRadius = "10px";
564+
textArea.style.border = "none"
565+
textArea.style.padding = "15px";
566+
textArea.placeholder = randomPrompt;
567+
568+
const buttonDiv = document.createElement("div");
569+
buttonDiv.style.display = "flex";
570+
buttonDiv.style.justifyContent = "space-between";
571+
buttonDiv.style.width = "650px";
572+
573+
const submit = document.createElement("button");
574+
submit.style.width = "152px";
575+
submit.style.height = "61px";
576+
submit.style.fontSize = "32px";
577+
submit.style.borderRadius = "10px";
578+
submit.style.border = "none"
579+
submit.style.cursor = "pointer";
580+
submit.innerHTML = "Submit";
581+
submit.onclick = async function () {
582+
const prompt = textArea.value;
583+
const encodedPrompt = encodeURIComponent(prompt);
584+
const url = `http://localhost:8000/generate?prompt=${encodedPrompt}`;
585+
586+
try {
587+
588+
activity.textMsg(_("Generating Audio..."), 2500)
589+
590+
let blinkInterval = setInterval(() => {
591+
activity.textMsg(_("Generating Audio..."), 1000);
592+
}, 5000);
593+
594+
const response = await fetch(url);
595+
const result = await response.json();
596+
597+
clearInterval(blinkInterval);
598+
599+
if (result.status === "success") {
600+
activity.textMsg(_("Audio ready!"), 3000);
601+
preview.disabled = false;
602+
save.disabled = false;
603+
} else {
604+
activity.textMsg(_("Failed to generate audio"), 3000);
605+
}
606+
} catch (error) {
607+
activity.textMsg(_("Error occurred"), 3000);
608+
}
609+
};
610+
611+
const preview = document.createElement("button");
612+
preview.style.width = "152px";
613+
preview.style.height = "61px";
614+
preview.style.fontSize = "32px";
615+
preview.style.borderRadius = "10px";
616+
preview.style.border = "none"
617+
preview.style.cursor = "pointer";
618+
preview.innerHTML = "Preview";
619+
preview.disabled = true;
620+
preview.onclick = function (){
621+
const audioURL = `http://localhost:8000/preview`;
622+
const audio = new Audio(audioURL);
623+
audio.play();
624+
}
625+
626+
const save = document.createElement("button");
627+
save.style.width = "152px";
628+
save.style.height = "61px";
629+
save.style.fontSize = "32px";
630+
save.style.borderRadius = "10px";
631+
save.style.border = "none"
632+
save.style.cursor = "pointer";
633+
save.innerHTML = "Save";
634+
save.disabled = true;
635+
save.onclick = function (){
636+
const audioURL = `http://localhost:8000/save`;
637+
const link = document.createElement('a');
638+
link.href = audioURL;
639+
link.download = 'output.wav';
640+
document.body.appendChild(link);
641+
link.click();
642+
document.body.removeChild(link);
643+
}
644+
645+
buttonDiv.appendChild(submit);
646+
buttonDiv.appendChild(preview);
647+
buttonDiv.appendChild(save);
648+
649+
650+
container.appendChild(h1)
651+
container.appendChild(textArea);
652+
container.appendChild(buttonDiv);
653+
};
654+
655+
this._trimBtn.onclick = () => {
656+
657+
this.widgetWindow.clearScreen();
658+
let width, height;
659+
if (!this.widgetWindow.isMaximized()) {
660+
width = SAMPLEWIDTH;
661+
height = SAMPLEHEIGHT;
662+
} else {
663+
width = this.widgetWindow.getWidgetBody().getBoundingClientRect().width;
664+
height = this.widgetWindow.getWidgetFrame().getBoundingClientRect().height - 70;
665+
}
666+
667+
const container = document.createElement("div");
668+
container.id = "samplerPrompt";
669+
this.widgetWindow.getWidgetBody().appendChild(container);
670+
671+
container.style.height = height + "px";
672+
container.style.width = width + "px";
673+
container.style.display = "flex";
674+
container.style.flexDirection = "column";
675+
container.style.alignItems = "center";
676+
container.style.justifyContent = "center";
677+
container.style.gap = "20px";
678+
679+
const h1 = document.createElement("h1");
680+
h1.innerHTML = "Audio Trimmer";
681+
h1.style.fontSize = "40px";
682+
h1.style.marginTop = "0";
683+
h1.style.marginBottom = "0px";
684+
h1.style.fontWeight = "200";
685+
686+
const divUploadSample = document.createElement("div");
687+
divUploadSample.style.backgroundColor = "#8cc6ff";
688+
divUploadSample.style.width = "50px";
689+
divUploadSample.style.height = "50px";
690+
divUploadSample.style.display = "flex";
691+
divUploadSample.style.cursor = "pointer";
692+
divUploadSample.style.justifyContent = "center";
693+
divUploadSample.style.alignItems = "center";
694+
695+
const uploadSample = document.createElement("img");
696+
uploadSample.setAttribute("src", "../header-icons/load-media.svg");
697+
uploadSample.style.height = "32px";
698+
uploadSample.style.width = "32px";
699+
700+
divUploadSample.appendChild(uploadSample)
701+
702+
const fileChooser = document.createElement("input");
703+
fileChooser.type = "file";
704+
705+
divUploadSample.onclick = function () {
706+
fileChooser.click();
707+
};
708+
709+
fileChooser.onchange = function () {
710+
const file = fileChooser.files[0];
711+
712+
const audioPlayer = document.createElement("audio");
713+
714+
audioPlayer.controls = true;
715+
716+
const fileURL = URL.createObjectURL(file);
717+
audioPlayer.src = fileURL;
718+
719+
container.replaceChild(audioPlayer, divUploadSample);
720+
721+
};
722+
723+
const inputDiv = document.createElement("div");
724+
inputDiv.style.width = "400px";
725+
inputDiv.style.display = "flex";
726+
inputDiv.style.justifyContent = "space-between";
727+
728+
const fromInputBox = document.createElement("input");
729+
fromInputBox.type = "text";
730+
fromInputBox.placeholder = "0.00";
731+
fromInputBox.style.width = "152px";
732+
fromInputBox.style.height = "61px";
733+
fromInputBox.style.backgroundColor = "#FFFFFF";
734+
fromInputBox.style.color = "#766C6C";
735+
fromInputBox.style.fontSize = "32px";
736+
fromInputBox.style.font = "Inter";
737+
fromInputBox.style.borderRadius = "10px"
738+
fromInputBox.style.border = "none"
739+
fromInputBox.style.padding = "8px";
740+
fromInputBox.style.textAlign = "center";
741+
fromInputBox.type = "number";
742+
743+
const toInputBox = document.createElement("input");
744+
toInputBox.type = "text";
745+
toInputBox.placeholder = "10.00";
746+
toInputBox.style.width = "152px";
747+
toInputBox.style.height = "61px";
748+
toInputBox.style.backgroundColor = "#FFFFFF";
749+
toInputBox.style.color = "#766C6C";
750+
toInputBox.style.fontSize = "32px";
751+
toInputBox.style.font = "Inter";
752+
toInputBox.style.borderRadius = "10px";
753+
toInputBox.style.border = "none";
754+
toInputBox.style.padding = "8px";
755+
toInputBox.style.textAlign = "center";
756+
toInputBox.type = "number";
757+
758+
759+
inputDiv.appendChild(fromInputBox);
760+
inputDiv.appendChild(toInputBox);
761+
762+
763+
const buttonDiv = document.createElement("div");
764+
buttonDiv.style.width = "400px";
765+
buttonDiv.style.display = "flex";
766+
buttonDiv.style.justifyContent = "space-between";
767+
768+
const preview = document.createElement("button");
769+
preview.style.width = "152px";
770+
preview.style.height = "61px";
771+
preview.style.fontSize = "32px";
772+
preview.style.borderRadius = "10px";
773+
preview.style.border = "none"
774+
preview.style.cursor = "pointer";
775+
preview.innerHTML = "Preview";
776+
777+
const save = document.createElement("button");
778+
save.style.width = "152px";
779+
save.style.height = "61px";
780+
save.style.fontSize = "32px";
781+
save.style.borderRadius = "10px";
782+
save.style.border = "none"
783+
save.style.cursor = "pointer";
784+
save.innerHTML = "Save";
785+
786+
buttonDiv.appendChild(preview);
787+
buttonDiv.appendChild(save);
788+
789+
container.appendChild(h1);
790+
container.appendChild(divUploadSample);
791+
container.appendChild(inputDiv);
792+
container.appendChild(buttonDiv);
793+
794+
};
795+
496796
this._playbackBtn.id="playbackBtn";
497797
this._playbackBtn.classList.add("disabled");
498798

‎js/widgets/widgetWindows.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -601,6 +601,17 @@ class WidgetWindow {
601601
return this;
602602
}
603603

604+
/**
605+
* @public
606+
* @return {WidgetWindow} this
607+
*
608+
* Clears the widget window not the toolbar
609+
*/
610+
clearScreen() {
611+
this._widget.innerHTML = "";
612+
return this;
613+
}
614+
604615
/**
605616
* @private
606617
* @return {WidgetWindow} this

0 commit comments

Comments
 (0)