File size: 4,366 Bytes
c2a5d87 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
class GRAPI {
constructor(URI, token){
this.URI_endpoint = URI;
this.token = token;
this.prompt_value = '';
this.prompt_input = select('#prompt-inp')
.attribute('placeholder', 'PROMPT')
.input(this.set_prompt_value.bind(this));
this.neg_prompt_value = '';
this.neg_prompt_input = select('#neg-prompt-inp')
.attribute('placeholder', 'NEGATIVE PROMPT')
.input(this.set_neg_prompt_value.bind(this));
this.call_API_btn = createButton('<i class="fa-solid fa-wand-magic-sparkles"></i>');
this.call_API_btn.mousePressed(this.call_API.bind(this));
this.call_API_btn.id('api-btn');
this.call_API_btn.parent('#inner-right')
this.running_API_btn = createButton('<i class="fa-solid fa-spinner"></i>');
this.running_API_btn.id('running-api-btn');
this.running_API_btn.parent('#inner-right');
this.running_API_btn.addClass('hide');
this.show_diffused = false;
this.showHide_diff_btn = createButton('<i class="fa-solid fa-eye-slash"></i>');
this.showHide_diff_btn.mousePressed(this.showHide_diff.bind(this));
this.showHide_diff_btn.id('show-hide-diff-btn');
this.showHide_diff_btn.parent('#inner-left');
this.API_log_txt = createDiv('logs')
this.API_log_txt.id('api-logs')
this.hiddenScribbleGraphics = createGraphics(width, height);
this.diffusedGraphics = createGraphics(width, height);
}
set_prompt_value(){
this.prompt_value = this.prompt_input.value();
}
set_neg_prompt_value(){
this.neg_prompt_value = this.neg_prompt_input.value();
}
fakeCall(){
this.running_API_btn.removeClass('hide');
this.call_API_btn.addClass('hide');
setTimeout(function(){
this.call_API_btn.removeClass('hide');
this.running_API_btn.addClass('hide');
}.bind(this), 3000)
}
call_API(){
this.running_API_btn.removeClass('hide');
this.call_API_btn.addClass('hide');
if(AS.framesList.length != 0) {
console.log(AS.frame_displayed)
this.hiddenScribbleGraphics.loadPixels();
let frame1_data = this.hiddenScribbleGraphics.canvas.toDataURL('image/png');
let inputs = [
this.prompt_value,
frame1_data
];
this.query(inputs);
console.log("API CALLED • Waiting for a response ... ")
console.log("PROMPT: " + this.prompt_value)
//this.API_log_txt.html('API CALLED • Waiting for a response ... ')
}
}
async query(data) {
const response = await fetch(this.URI_endpoint, {
method: "POST",
body: JSON.stringify(
{ "data": data } // data images to send
),
headers: { "Content-Type": "application/json",
"Authorization": "Bearer " + this.token + "" }
})
.then(function(response) { return response.json(); })
.then(function(json_response){
console.log("got results");
//this.API_log_txt.html('got results • hit Play Anim button !')
//console.log(json_response.data);
setTimeout(function(){AS.display_frame(AS.frame_displayed)}, 100);
loadImage(json_response.data[0], function(diff_img){
AS.framesList[AS.frame_displayed].diffused_data = diff_img;
});
console.log('stored');
this.call_API_btn.removeClass('hide');
this.running_API_btn.addClass('hide');
if(this.show_diffused == false){
this.showHide_diff()
}
}.bind(this));
}
showHide_diff(){
if(this.show_diffused == false){
this.show_diffused = true;
this.showHide_diff_btn.html('<i class="fa-solid fa-eye"></i>');
} else if(this.show_diffused == true){
this.show_diffused = false;
this.showHide_diff_btn.html('<i class="fa-solid fa-eye-slash"></i>');
}
setTimeout(AS.display_frame(AS.frame_displayed), 1000);
}
} |