Muse Spark Open

Text Generation • Meta

meta/muse-spark-open

• Third-party

Meta's most capable open-weight model, built for agentic coding. Show it a screenshot, chart, or photo alongside your request and it reasons over both to write working code, call tools, and carry multi-step tasks across a 1M-token context.

Usage

const response = await env.AI.run(
  'meta/muse-spark-open',
  {
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image_url',
            image_url: {
              url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Figurines_from_Clay_Critters.jpg/1280px-Figurines_from_Clay_Critters.jpg',
            },
          },
          {
            type: 'text',
            text: 'Rebuild the gnome in the purple hat from this photo as a 3D scene, including whatever he is holding. Return one self-contained index.html that loads Three.js from a CDN with an import map, models him from simple primitives, matches the clay colors from the photo, uses soft studio lighting on a light grey backdrop, and slowly turns him on a turntable. Return only the HTML file in a single code block.',
          },
        ],
      },
    ],
    max_completion_tokens: 12000,
    reasoning_effort: 'medium',
  },
)
console.log(response)

curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/v1/chat/completions \
  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{
  "model": "meta/muse-spark-open",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "image_url",
          "image_url": {
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Figurines_from_Clay_Critters.jpg/1280px-Figurines_from_Clay_Critters.jpg"
          }
        },
        {
          "type": "text",
          "text": "Rebuild the gnome in the purple hat from this photo as a 3D scene, including whatever he is holding. Return one self-contained index.html that loads Three.js from a CDN with an import map, models him from simple primitives, matches the clay colors from the photo, uses soft studio lighting on a light grey backdrop, and slowly turns him on a turntable. Return only the HTML file in a single code block."
        }
      ]
    }
  ],
  "max_completion_tokens": 12000,
  "reasoning_effort": "medium"
}'

`html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gnome Purple Hat - Clay 3D</title> <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script> <style> html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#d6d6d6;} canvas{display:block;} </style> </head> <body> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene(); scene.background = new THREE.Color(0xd4d4d4); scene.fog = new THREE.Fog(0xd4d4d4, 8, 20);

const renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(35, innerWidth/innerHeight, 0.1, 100); camera.position.set(0, 1.6, 4.5);

const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 0.75, 0); controls.enableDamping = true; controls.minDistance = 2; controls.maxDistance = 10; controls.update();

// lighting - soft studio const ambient = new THREE.HemisphereLight(0xffffff, 0xcccccc, 1.1); scene.add(ambient);

const dir1 = new THREE.DirectionalLight(0xfffaf0, 1.2); dir1.position.set(3, 5, 3); dir1.castShadow = true; dir1.shadow.mapSize.set(2048,2048); dir1.shadow.radius = 4; scene.add(dir1);

const dir2 = new THREE.DirectionalLight(0xffffff, 0.6); dir2.position.set(-3, 4, -2); scene.add(dir2);

const fill = new THREE.DirectionalLight(0xffffff, 0.4); fill.position.set(0, 2, -4); scene.add(fill);

// backdrop + turntable const groundGeo = new THREE.CircleGeometry(4, 64); const groundMat = new THREE.MeshStandardMaterial({color:0xededed, roughness:0.9, metalness:0}); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI/2; ground.receiveShadow = true; scene.add(ground);

const turntableGeo = new THREE.CylinderGeometry(1.35, 1.35, 0.06, 64); const turntableMat = new THREE.MeshStandardMaterial({color:0xe8e8e8, roughness:0.6}); const turntable = new THREE.Mesh(turntableGeo, turntableMat); turntable.position.y = 0.03; turntable.receiveShadow = true; turntable.castShadow = true; scene.add(turntable);

// materials - clay colors matched to photo const matSkin = new THREE.MeshStandardMaterial({color:0xf2b8a0, roughness:0.5, metalness:0}); const matSkinDark = new THREE.MeshStandardMaterial({color:0xe9a995, roughness:0.6}); const matHat = new THREE.MeshStandardMaterial({color:0x7b6bc2, roughness:0.6}); // purple hat const matJacket = new THREE.MeshStandardMaterial({color:0x4fb3b0, roughness:0.65}); // teal jacket const matPants = new THREE.MeshStandardMaterial({color:0x8e2f4a, roughness:0.7}); // maroon pants const matShoes = new THREE.MeshStandardMaterial({color:0x8a7ac0, roughness:0.6}); const matButton = new THREE.MeshStandardMaterial({color:0xf2d83a, roughness:0.4}); const matLizard = new THREE.MeshStandardMaterial({color:0x7ed321, roughness:0.6}); const matLizardBelly = new THREE.MeshStandardMaterial({color:0xbde67a, roughness:0.7}); const matNose = new THREE.MeshStandardMaterial({color:0xe8a090}); const matMouth = new THREE.MeshStandardMaterial({color:0x6b3a3a});

const gnome = new THREE.Group();

// body helper to make clay look function clay(mesh){ mesh.castShadow=true; mesh.receiveShadow=true; return mesh; }

const bodyGroup = new THREE.Group();

// torso - teal jacket (box with rounded feel using capsule-like) const torsoGeo = new THREE.CapsuleGeometry(0.38, 0.45, 8, 16); const torso = clay(new THREE.Mesh(torsoGeo, matJacket)); torso.position.y = 0.95; torso.scale.set(1,1,0.75); bodyGroup.add(torso);

// jacket bottom edge const hemGeo = new THREE.CylinderGeometry(0.4, 0.43, 0.12, 16); const hem = clay(new THREE.Mesh(hemGeo, matJacket)); hem.position.y = 0.68; bodyGroup.add(hem);

// buttons 3 yellow for(let i=0;i<3;i++){ const b = clay(new THREE.Mesh(new THREE.CylinderGeometry(0.055,0.055,0.02,16), matButton)); b.rotation.x = Math.PI/2; b.position.set(0, 1.05 - i0.18, 0.33); // button holes const holeMat = new THREE.MeshStandardMaterial({color:0x5a4a00}); bodyGroup.add(b); // add 2 dots for button detail const dot1 = new THREE.Mesh(new THREE.SphereGeometry(0.012,6,6), holeMat); dot1.position.set(0.015, 1.05 - i0.18, 0.345); bodyGroup.add(dot1); const dot2 = new THREE.Mesh(new THREE.SphereGeometry(0.012,6,6), holeMat); dot2.position.set(-0.015, 1.05 - i*0.18, 0.345); bodyGroup.add(dot2); }

// collar const collarGeo = new THREE.TorusGeometry(0.22, 0.04, 8, 16, Math.PI); const collar = clay(new THREE.Mesh(collarGeo, matJacket)); collar.position.set(0,1.22,0.05); collar.rotation.x = Math.PI/2; collar.rotation.z = Math.PI; bodyGroup.add(collar);

// head const headGeo = new THREE.SphereGeometry(0.34, 32, 32); const head = clay(new THREE.Mesh(headGeo, matSkin)); head.position.y = 1.42; head.scale.set(1,0.9,0.95); bodyGroup.add(head);

// ears - pointed elf ears const earGeo = new THREE.ConeGeometry(0.07, 0.14, 12); const earL = clay(new THREE.Mesh(earGeo, matSkin)); earL.position.set(-0.32, 1.42, 0); earL.rotation.z = -0.6; earL.rotation.x = 0.2; bodyGroup.add(earL); const earR = clay(new THREE.Mesh(earGeo, matSkin)); earR.position.set(0.32, 1.42, 0); earR.rotation.z = 0.6; bodyGroup.add(earR);

// nose const noseGeo = new THREE.SphereGeometry(0.05, 16, 16); const nose = clay(new THREE.Mesh(noseGeo, matNose)); nose.position.set(0,1.38,0.30); nose.scale.set(1,0.8,1.2); bodyGroup.add(nose);

// eyes - two dots const eyeGeo = new THREE.SphereGeometry(0.032, 12, 12); const eyeMat = new THREE.MeshStandardMaterial({color:0x8a5a4a}); const eyeL = clay(new THREE.Mesh(eyeGeo, eyeMat)); eyeL.position.set(-0.12,1.46,0.28); bodyGroup.add(eyeL); const eyeR = clay(new THREE.Mesh(eyeGeo, eyeMat)); eyeR.position.set(0.12,1.46,0.28); bodyGroup.add(eyeR); const highlightGeo = new THREE.SphereGeometry(0.012,8,8); const hlMat = new THREE.MeshStandardMaterial({color:0xffffff}); const hlL = new THREE.Mesh(highlightGeo, hlMat); hlL.position.set(-0.11,1.48,0.30); bodyGroup.add(hlL); const hlR = hlL.clone(); hlR.position.set(0.13,1.48,0.30); bodyGroup.add(hlR);

// mouth - small O const mouthGeo = new THREE.TorusGeometry(0.035, 0.01, 8, 16); const mouth = clay(new THREE.Mesh(mouthGeo, matMouth)); mouth.position.set(0,1.30,0.30); mouth.rotation.x = 0.2; bodyGroup.add(mouth); const mouthHole = new THREE.Mesh(new THREE.CircleGeometry(0.025,12), new THREE.MeshBasicMaterial({color:0x4a2222})); mouthHole.position.set(0,1.30,0.312); mouthHole.rotation.x = -0.2; bodyGroup.add(mouthHole);

// hat - tall purple with bent tip const hatBaseGeo = new THREE.CylinderGeometry(0.36,0.38,0.15,32); const hatBase = clay(new THREE.Mesh(hatBaseGeo, matHat)); hatBase.position.y = 1.62; bodyGroup.add(hatBase);

const hatConeGeo = new THREE.ConeGeometry(0.36, 0.9, 32); const hatCone = clay(new THREE.Mesh(hatConeGeo, matHat)); hatCone.position.y = 2.1; bodyGroup.add(hatCone);

// bent tip - sphere + small cone bent const tipStemGeo = new THREE.CylinderGeometry(0.08,0.12,0.35,16); const tipStem = clay(new THREE.Mesh(tipStemGeo, matHat)); tipStem.position.set(0.12, 2.55, 0); tipStem.rotation.z = -0.6; bodyGroup.add(tipStem);

const tipGeo = new THREE.SphereGeometry(0.09,16,16); const tip = clay(new THREE.Mesh(tipGeo, matHat)); tip.position.set(0.28, 2.68, 0); bodyGroup.add(tip);

// arms const armGeo = new THREE.CapsuleGeometry(0.09, 0.38, 8, 12); // left arm (our right) holding lizard const armL = clay(new THREE.Mesh(armGeo, matJacket)); armL.position.set(-0.42, 0.95, 0.12); armL.rotation.z = 0.4; armL.rotation.x = 0.5; bodyGroup.add(armL); // right arm const armR = clay(new THREE.Mesh(armGeo, matJacket)); armR.position.set(0.42, 0.95, 0.05); armR.rotation.z = -0.3; bodyGroup.add(armR);

// hands const handGeo = new THREE.SphereGeometry(0.09,16,16); const handL = clay(new THREE.Mesh(handGeo, matSkin)); handL.position.set(-0.52, 0.72, 0.22); handL.scale.set(1,0.8,1); bodyGroup.add(handL); const handR = clay(new THREE.Mesh(handGeo, matSkin)); handR.position.set(0.48, 0.70, 0.12); bodyGroup.add(handR);

// legs / pants const legGeo = new THREE.CapsuleGeometry(0.16, 0.35, 8, 12); const legL = clay(new THREE.Mesh(legGeo, matPants)); legL.position.set(-0.20, 0.45, 0); bodyGroup.add(legL); const legR = clay(new THREE.Mesh(legGeo, matPants)); legR.position.set(0.20, 0.45, 0); bodyGroup.add(legR);

// shoes const shoeGeo = new THREE.CapsuleGeometry(0.14, 0.15, 8, 12); const shoeL = clay(new THREE.Mesh(shoeGeo, matShoes)); shoeL.position.set(-0.20, 0.14, 0.06); shoeL.rotation.x = Math.PI/2; shoeL.scale.set(1,1,0.7); bodyGroup.add(shoeL); const shoeR = clay(new THREE.Mesh(shoeGeo, matShoes)); shoeR.position.set(0.20, 0.14, 0.06); shoeR.rotation.x = Math.PI/2; shoeR.scale.set(1,1,0.7); bodyGroup.add(shoeR);

// LIZARD - bright green on left arm const lizardGroup = new THREE.Group(); lizardGroup.position.set(-0.52, 0.82, 0.18); lizardGroup.rotation.y = 0.8; lizardGroup.rotation.z = 0.2;

const lBodyGeo = new THREE.CapsuleGeometry(0.07, 0.28, 8, 12); const lBody = clay(new THREE.Mesh(lBodyGeo, matLizard)); lBody.rotation.x = Math.PI/2; lBody.rotation.z = 0.3; lizardGroup.add(lBody);

const lBelly = clay(new THREE.Mesh(new THREE.CapsuleGeometry(0.05,0.20,8,8), matLizardBelly)); lBelly.position.set(0,-0.04,0); lBelly.rotation.x = Math.PI/2; lizardGroup.add(lBelly);

const lHeadGeo = new THREE.SphereGeometry(0.08,16,16); const lHead = clay(new THREE.Mesh(lHeadGeo, matLizard)); lHead.position.set(0.16,0.04,0.02); lHead.scale.set(1.1,0.9,1); lizardGroup.add(lHead); const lSnout = clay(new THREE.Mesh(new THREE.SphereGeometry(0.045,12,12), matLizard)); lSnout.position.set(0.21,0.02,0.02); lSnout.scale.set(1,0.7,0.8); lizardGroup.add(lSnout); const lEyeGeo = new THREE.SphereGeometry(0.018,8,8); const lEyeMat = new THREE.MeshStandardMaterial({color:0x222222}); const lEye = new THREE.Mesh(lEyeGeo,lEyeMat); lEye.position.set(0.17,0.07,0.05); lizardGroup.add(lEye); const lEye2 = lEye.clone(); lEye2.position.set(0.17,0.07,-0.05); lizardGroup.add(lEye2);