xxxxxxxxxx175
const model = new rw.HostedModel({ url: "https://spade-coco-4d3d41dc.hosted-models.runwayml.cloud/v1/", token: "g8jc2l8/KA0CH0TBPXHNhA==",});let video;let myBodyPix;let segment;let myCanvas;const options = { "outputStride": 8, // 8, 16, or 32, default is 16 "segmentationThreshold": 0.3, // 0 - 1, defaults to 0.5 "palette": { leftFace: { id: 0, color: [216, 195, 130], //cake }, rightFace: { id: 1, color: [216, 195, 130], //cake }, rightUpperLegFront: { id: 2, color: [143, 198, 243], }, rightLowerLegBack: { id: 3, color: [143, 198, 243], }, rightUpperLegBack: { id: 4, color: [143, 198, 243], }, leftLowerLegFront: { id: 5, color: [143, 198, 243], }, leftUpperLegFront: { id: 6, color: [143, 198, 243], }, leftUpperLegBack: { id: 7, color: [143, 198, 243], }, leftLowerLegBack: { id: 8, color: [143, 198, 243], }, rightFeet: { id: 9, color: [252, 228, 116], }, rightLowerLegFront: { id: 10, color: [252, 228, 116], }, leftFeet: { id: 11, color: [252, 228, 116], }, torsoFront: { id: 12, color: [121, 216, 170], //light }, torsoBack: { id: 13, color: [121, 216, 170], }, rightUpperArmFront: { id: 14, color: [170, 170, 170], //cloud }, rightUpperArmBack: { id: 15, color: [170, 170, 170], //cloud }, rightLowerArmBack: { id: 16, color: [29, 195, 49], //grass }, leftLowerArmFront: { id: 17, color: [189, 138, 100], //apple }, leftUpperArmFront: { id: 18, color: [128, 156, 3], //banana }, leftUpperArmBack: { id: 19, color: [128, 156, 3], //banana }, leftLowerArmBack: { id: 20, color: [189, 138, 100], //apple }, rightHand: { id: 21, color: [54, 62, 167], //sea }, rightLowerArmFront: { id: 22, color: [29, 195, 49], //grass }, leftHand: { id: 23, color: [87, 1, 33], //flower }, },};let myBtn;function preload() { video = createCapture(VIDEO); video.size(600, 400); video.hide();}function setup() { myCanvas=createCanvas(600, 400); myBodyPix = ml5.bodyPix(video, options, modelReady); myBtn = createButton('get image'); myBtn.mousePressed(getStyleImage);}function modelReady() { console.log('model ready'); myBodyPix.segmentWithParts(gotResults);}function gotResults(err, results) { if (err) console.log('err', err); if (results) { console.log('results', results) segment = results.partMask; // getStyleImage(); // console.log(segment); background(0); image(segment, 0, 0, 600, 400); // myBodyPix.segmentWithParts(options, gotResults); }}function getStyleImage() { //convert segment into base64 data // segment.loadPixels(); const imageData = myCanvas.elt.toDataURL(); //send request to runway model and get result const inputs = { "semantic_map": imageData, }; model.query(inputs).then(outputs => { const { output } = outputs; //draw image drawImage(output); //call bodypix again // myBodyPix.segmentWithParts(options, gotResults); });}function drawImage(base64Data) { background(200); var img; var raw = new Image(); raw.src = base64Data; raw.onload = function() { img = createImage(raw.width, raw.height); img.drawingContext.drawImage(raw, 0, 0); image(img, 0, 0, 600, 400); // draw the image, etc here }}