Spaces:
Runtime error
Runtime error
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>') | |
.mousePressed(this.call_API.bind(this)) | |
.id('api-btn') | |
.parent('#inner-right'); | |
this.running_API_btn = createButton('<i class="fa-solid fa-spinner"></i>') | |
.id('running-api-btn') | |
.parent('#inner-right') | |
.addClass('hide'); | |
this.show_diffused = false; | |
this.showHide_diff_btn = createButton('<i class="fa-solid fa-eye-slash"></i>') | |
.mousePressed(this.showHide_diff.bind(this)) | |
.id('show-hide-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.neg_prompt_value | |
]; | |
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); | |
} | |
} |