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('') .mousePressed(this.call_API.bind(this)) .attribute('title', 'Diffuse current frame') .id('api-btn') .parent('#inner-right'); this.running_API_btn = createButton('') .id('running-api-btn') .attribute('title', 'processing diffusion ...') .parent('#inner-right') .addClass('hide'); this.show_diffused = false; this.showHide_diff_btn = createButton('') .mousePressed(this.showHide_diff.bind(this)) .attribute('title', 'Show/Hide diffused results ') .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(''); } else if(this.show_diffused == true){ this.show_diffused = false; this.showHide_diff_btn.html(''); } setTimeout(AS.display_frame(AS.frame_displayed), 1000); } }