File size: 4,210 Bytes
c2a5d87
 
 
 
 
82da9f8
c2a5d87
 
 
 
 
 
 
 
 
 
82da9f8
 
 
 
c2a5d87
82da9f8
 
 
 
c2a5d87
 
82da9f8
 
 
 
c2a5d87
82da9f8
 
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
138
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);
      
    }
    
  }