public/apiCall.js

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.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);
      
    }
    
  }