add gradio client for image gen instead of fetch

sketch.js

@@ -1,6 +1,7 @@
 
 // IMPORT LIBRARIES TOOLS
 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+import { Client } from "@gradio/client";
 
 // skip local model check
 env.allowLocalModels = false;
@@ -39,31 +40,50 @@ async function post(request) {
   }
 }
 
-async function textImgTask(prompt){
+async function textImgTask(input){
   console.log('text-to-image task initiated')
+
+  let MODEL = "multimodalart/FLUX.1-merged"
+
+  let INPUT = input
+
+  const client = await Client.connect(MODEL);
+  const result = await client.predict("/infer", { 		
+  		prompt: INPUT, 		
+  		seed: 0, 		
+  		randomize_seed: true, 		
+  		width: 256, 		
+  		height: 256, 		
+  		guidance_scale: 1, 		
+  		num_inference_steps: 1, 
+  });
+
+  console.log(result.data);
+
+  let OUT = result.data[0]
   
-  const URL = 'https://multimodalart-flux-1-merged.hf.space/call/infer'
-  const seed = 0
-  const randomizeSeed = true
-  const width = 1024
-  const height = 1024
-  const guidaneceScale = 3.5
-  const inferenceSteps = 8
+  // const URL = 'https://multimodalart-flux-1-merged.hf.space/call/infer'
+  // const seed = 0
+  // const randomizeSeed = true
+  // const width = 1024
+  // const height = 1024
+  // const guidaneceScale = 3.5
+  // const inferenceSteps = 8
   
-  const options = [ prompt[0], seed, randomizeSeed, width, height, guidaneceScale, inferenceSteps ]
+  // const options = [ prompt[0], seed, randomizeSeed, width, height, guidaneceScale, inferenceSteps ]
 
-  const request = new Request(URL,{
-      method: "POST",
-      body: JSON.stringify({"data": options }),
-      headers: { "Content-Type": "application/json" }
-  })
+  // const request = new Request(URL,{
+  //     method: "POST",
+  //     body: JSON.stringify({"data": options }),
+  //     headers: { "Content-Type": "application/json" }
+  // })
 
-  let out = post(request)
+  // let out = post(request)
 
-  console.log(out)
-  console.log("text-to-image task completed")
+  // console.log(out)
+  // console.log("text-to-image task completed")
 
-  return out
+  return OUT
 }
 
 
@@ -200,8 +220,8 @@ new p5(function (p5){
     const inputDiv = p5.createDiv().class('module', 'main').id('inputDiv')
     p5.createElement('h4', 'INPUT').parent(inputDiv)
     p5.createElement('h3', 'Enter your prompt').class('header').parent(inputDiv)
-    p5.createP(`Write your prompt in the box below using one [BLANK] and one [MASK].`).parent(inputDiv)
-    p5.createP(`e.g. Write "The [BLANK] was a [MASK]." and in the three blanks choose three occupations.`).parent(inputDiv)
+    p5.createP(`Write your prompt in the box below using one [BLANK] and one [MASK]`).parent(inputDiv)
+    p5.createP(`e.g. Write "The [BLANK] was a [MASK]." and in the three blanks choose three occupations`).parent(inputDiv)
     p5.createP(`(This is taken from an actual example used to test GPT-3. (Brown et al. 2020, §6.2.1).)`).class('caption').parent(inputDiv)
     promptField = p5.createInput(PROMPT_INPUT).parent(inputDiv) // turns the string into an input; now access the text via PROMPT_INPUT.value()
     promptField.size(700)
@@ -258,7 +278,7 @@ new p5(function (p5){
     // placeholder DIV for images and captions
     p5.createElement('h3', 'Text-to-image output').parent(outputDiv)
     outPics = p5.createDiv().id('outPics').parent(outputDiv)
-        // img1 = p5.createImg('URL')
+        
 
     // print info about model, prompt, and hyperparams
     p5.createElement('h3', 'Prompting info').parent(outputDiv)    
@@ -302,7 +322,7 @@ new p5(function (p5){
 
     let outPic = await textImgTask(promptArray)
     console.log(outPic[1])
-    p5.createImage(outPic[1].url)
+    p5.createImage(outPic).parent('#outputDiv')
   }
 
   p5.draw = function(){