问:
Change mask from white to black
I've found a cool codepen that has a text hover effect using a background image and a mask on top. I'm trying to change the mask on this Codepen from white to black but if you set is to black it doesn't work at all. I assume there is a reason for this but I have no idea why that is.

Is it possible to make the white mask black?

var vertex = `
        attribute vec2 uv;
        attribute vec2 position;
        varying vec2 vUv;
        void main() {
                vUv = uv;
                gl_Position = vec4(position, 0, 1);
        }
`;
var fragment = `
        precision highp float;
        precision highp int;
        uniform sampler2D tWater;
        uniform sampler2D tFlow;
        uniform float uTime;
        varying vec2 vUv;
        uniform vec4 res;
        uniform vec2 img;

        vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
                return uvs * factor - factor /2. + 0.5;
        }

        void main() {

            // R and G values are velocity in the x and y direction
            // B value is the velocity length
            vec3 flow = texture2D(tFlow, vUv).rgb;

            vec2 uv = .5 * gl_FragCoord.xy / res.xy ;

            // vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
            vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV -= flow.xy * (0.15 * 1.2);

            vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV2 -= flow.xy * (0.125 * 1.2);

            vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV3 -= flow.xy * (0.10 * 1.4);

            vec3 tex = texture2D(tWater, myUV).rgb;
            vec3 tex2 = texture2D(tWater, myUV2).rgb;
            vec3 tex3 = texture2D(tWater, myUV3).rgb;

            gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
        }
`;
{
    var _size = [2048, 1638];
    var renderer = new ogl.Renderer({ dpr: 2 });
    var gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    // Variable inputs to control flowmap
    var aspect = 1;
    var mouse = new ogl.Vec2(-1);
    var velocity = new ogl.Vec2();
    function resize() {
        gl.canvas.width = window.innerWidth * 2.0;
        gl.canvas.height = window.innerHeight * 2.0;
        gl.canvas.style.width = window.innerWidth + "px";
        gl.canvas.style.height = window.innerHeight + "px";

        var a1, a2;
        var imageAspect = _size[1] / _size[0];
        if (window.innerHeight / window.innerWidth < imageAspect) {
            a1 = 1;
            a2 = window.innerHeight / window.innerWidth / imageAspect;
        } else {
            a1 = window.innerWidth / window.innerHeight * imageAspect;
            a2 = 1;
        }
        mesh.program.uniforms.res.value = new ogl.Vec4(
            window.innerWidth,
            window.innerHeight,
            a1,
            a2
        );

        renderer.setSize(window.innerWidth, window.innerHeight);
        aspect = window.innerWidth / window.innerHeight;
    }
    var flowmap = new ogl.Flowmap(gl, {
        falloff: 0.3,
        dissipation: 0.92,
        alpha: 0.5
    });
    // Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
    var geometry = new ogl.Geometry(gl, {
        position: {
            size: 2,
            data: new Float32Array([-1, -1, 3, -1, -1, 3])
        },
        uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
    });
    var texture = new ogl.Texture(gl, {
        minFilter: gl.LINEAR,
        magFilter: gl.LINEAR
    });
    var img = new Image();
    img.onload = () => (texture.image = img);
    img.crossOrigin = "Anonymous";
    img.src = "https://robindelaporte.fr/codepen/bg3.jpg";

    var a1, a2;
    var imageAspect = _size[1] / _size[0];
    if (window.innerHeight / window.innerWidth < imageAspect) {
        a1 = 1;
        a2 = window.innerHeight / window.innerWidth / imageAspect;
    } else {
        a1 = window.innerWidth / window.innerHeight * imageAspect;
        a2 = 1;
    }

    var program = new ogl.Program(gl, {
        vertex,
        fragment,
        uniforms: {
            uTime: { value: 0 },
            tWater: { value: texture },
            res: {
                value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2)
            },
            img: { value: new ogl.Vec2(_size[1], _size[0]) },
            // Note that the uniform is applied without using an object and value property
            // This is because the class alternates this texture between two render targets
            // and updates the value property after each render.
            tFlow: flowmap.uniform
        }
    });
    var mesh = new ogl.Mesh(gl, { geometry, program });

    window.addEventListener("resize", resize, false);
    resize();

    // Create handlers to get mouse position and velocity
    var isTouchCapable = "ontouchstart" in window;
    if (isTouchCapable) {
        window.addEventListener("touchstart", updateMouse, false);
        window.addEventListener("touchmove", updateMouse, { passive: false });
    } else {
        window.addEventListener("mousemove", updateMouse, false);
    }
    var lastTime;
    var lastMouse = new ogl.Vec2();
    function updateMouse(e) {
        e.preventDefault();

        if (e.changedTouches && e.changedTouches.length) {
            e.x = e.changedTouches[0].pageX;
            e.y = e.changedTouches[0].pageY;
        }
        if (e.x === undefined) {
            e.x = e.pageX;
            e.y = e.pageY;
        }
        // Get mouse value in 0 to 1 range, with y flipped
        mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
        // Calculate velocity
        if (!lastTime) {
            // First frame
            lastTime = performance.now();
            lastMouse.set(e.x, e.y);
        }

        var deltaX = e.x - lastMouse.x;
        var deltaY = e.y - lastMouse.y;

        lastMouse.set(e.x, e.y);

        var time = performance.now();

        // Avoid dividing by 0
        var delta = Math.max(10.4, time - lastTime);
        lastTime = time;
        velocity.x = deltaX / delta;
        velocity.y = deltaY / delta;
        // Flag update to prevent hanging velocity values when not moving
        velocity.needsUpdate = true;
    }
    requestAnimationFrame(update);
    function update(t) {
        requestAnimationFrame(update);
        // Reset velocity when mouse not moving
        if (!velocity.needsUpdate) {
            mouse.set(-1);
            velocity.set(0);
        }
        velocity.needsUpdate = false;
        // Update flowmap inputs
        flowmap.aspect = aspect;
        flowmap.mouse.copy(mouse);
        // Ease velocity input, slower when fading out
        flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
        flowmap.update();
        program.uniforms.uTime.value = t * 0.01;
        renderer.render({ scene: mesh });
    }
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position: fixed;
    height: 100%;
  overflow: hidden;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.mask {
    position: absolute;
    z-index: 2;
    background: white;
    height: 100vh;
    width: 100vw;
    mix-blend-mode: screen;
    /* display: none; */
}

svg {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}</code>```

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1040 205.1" style="enable-background:new 0 0 1040 205.1;" xml:space="preserve">

        <g>
          <g>
            <path
              class="st0"
              d="M108.7,155.2l24.8,23.3c-2.1,3.1-4.9,6.2-8.3,9.2c-10.2,8.8-26.2,16.4-48.5,16.4C33.4,204.1,1,174.8,1,131.2
                c0-43.3,32.4-72.6,75.7-72.6c29.8,0,48.4,13.2,56.8,25.5l-28.7,26.7c-5.5-8-14.3-13.2-26.1-13.2c-18.3,0-32.4,12.6-32.4,33.6
                c0,3.7,0.4,7.2,1.3,10.4c1.5,5.9,4.4,10.8,8.2,14.5c5,4.9,11.6,8,19.1,8.7c1.2,0.1,2.5,0.2,3.8,0.2c10.5,0,18.7-4.6,24.2-11.1
                c0.7-0.8,1.3-1.6,1.8-2.4L108.7,155.2z"
            />
            <path
              class="st0"
              d="M239.9,59.4v42.5c-2.6-0.6-6.3-1.2-10.9-1.2c-11.5,0-26.7,4.9-32.4,12.6v88.3h-44.2V63.1h44.2V80
                C205.8,68.8,223.3,59.4,239.9,59.4z"
            />
            <path
              class="st0"
              d="M381.7,181.7c-9.3,9.7-21.1,16.9-34.5,20.4l0.7-0.1L381.7,181.7z"
            />
            <path
              class="st0"
              d="M539.8,92.8c-8.7-26-34.4-34.1-61.4-34.1c-21.2,0-45,6.3-62.8,21.5l7.2,12.6l8.6,15.2
                c11.2-9.5,25.5-14.6,39.3-14.6c17.8,0,28.1,8,28.1,20.1v16.6c-8.3-10.3-24.7-16.1-43-16.1c-7.1,0-14.8,1.2-21.9,4.1
                c-14,5.7-25.7,18-25.7,40.3c0,24.8,16.7,39,34.1,43.8c0.7,0.2,1.4,0.4,2.1,0.5c3.8,0.9,7.7,1.3,11.4,1.3c4.3,0,8.5-0.4,12.5-1.2
                c1.8-0.3,3.5-0.7,5.2-1.2c10.6-2.8,19.6-8.1,25.2-14.9v13.8h44.1V114C542.9,105.9,541.8,98.8,539.8,92.8z M498.8,165.1
                c-4.6,6.6-14.9,10-24.7,10c-11.8,0-22.1-5.2-22.1-16.1c0-10.9,10.3-16.1,22.1-16.1c9.8,0,20.1,3.4,24.7,9.8V165.1z"
            />
            <path
              class="st0"
              d="M605.3,201.1c-5.9-2.5-10.7-6.2-14.1-11.1C595.1,194.7,599.9,198.5,605.3,201.1z"
            />
            <path
              class="st0"
              d="M656.2,101.5h-28.1v19.6c-1.4-0.1-2.8-0.2-4.2-0.2c-18.2,0-33.7,11.5-39.6,27.5v-46.9h-22.9V63.1h22.9V25.2
                h43.9v37.9h28.1V101.5z"
            />
            <path
              class="st0"
              d="M660.2,195.9c-2.8,2.6-6.9,4.9-12.4,6.6c-5.1,1.5-11.3,2.5-18.7,2.6c12-1.5,22.4-7.9,29.1-17.2L660.2,195.9z"
            />
            <path
              class="st0"
              d="M725.5,26.2c0,14-11.2,25.5-25.2,25.5s-25.2-11.5-25.2-25.5S686.3,1,700.3,1S725.5,12.2,725.5,26.2z"
            />
            <polygon
              class="st0"
              points="891.5,63.1 879.4,93.8 873.7,108.5 837,201.6 790,201.6 760.2,125.9 747.6,93.8 735.6,63.1 782,63.1
                792.9,93.8 802.1,119.5 813.2,150.9 825.8,115.8 833.8,93.8 844.8,63.1        "
            />
            <path
              class="st0"
              d="M939.8,116.6c1.4-8,6.3-18.3,18-22.2c3-1,6.5-1.6,10.4-1.6c20.3,0,27.5,14.1,28.7,23.8H939.8z M968.2,204l2,0
                c21.2,0,44.1-6,57.9-18.4l-18.6-27.5c-7.7,7.5-24.6,11.8-34.4,11.8c-20.1,0-32.1-11.8-34.7-24.7h98.6v-9.5
                c0-47-29.8-77.2-70.8-77.2c-28.1,0-50.7,13.6-63.2,34.1c-2,3.3-3.8,6.8-5.2,10.5c-3.4,8.6-5.3,18-5.3,27.9
                c0,44.3,31.8,71.9,73.5,72.8L968.2,204z"
            />
          </g>
        </g>
        <polyline
          class="st0"
          points="678.2,201.4 678.2,63.1 722.3,63.1 722.3,201.4 "
        />
        <path
          class="st0"
          d="M395.3,135.8c0-10-1.3-19.2-3.8-27.5c-1.7-5.6-3.9-10.8-6.6-15.5c-12.1-21.6-33.9-34.1-60.4-34.1
        c-9.1,0-17.7,1.4-25.5,4.1c-25.9,11.5-43.9,37.5-43.9,67.8c0,37.8,28.1,69,64.5,73.5c3,0.4,6,0.5,9,0.5c6.4,0,12.7-0.8,18.6-2.4
        c13.3-3.5,25.2-10.7,34.5-20.4l-15.9-23.5c-7.7,7.5-24.7,11.8-34.4,11.8c-20.1,0-32.1-11.8-34.7-24.7h98.6V135.8z M296.1,116.6
        c1.7-10,9.2-23.8,28.4-23.8c6.4,0,11.5,1.4,15.5,3.6c8.7,4.8,12.4,13.5,13.1,20.2H296.1z"
        />
        <path
          class="st0"
          d="M658.1,187.8c-6.7,9.3-17.1,15.8-29.1,17.2h0c-1.7,0.2-3.4,0.3-5.2,0.3c-6.6,0-12.9-1.5-18.5-4.2
        c-5.5-2.7-10.3-6.5-14.1-11.1c0,0,0,0,0-0.1c-4.6-6.5-7-15.1-7-25.6v-15.9c6-16.1,21.4-27.5,39.6-27.5c1.4,0,2.8,0.1,4.2,0.2V152
        c0,7.1,3.6,12.6,9.8,13.8c0.8,0.1,1.6,0.2,2.5,0.2c4.9,0,9.7-1.7,11.2-3.4l1.9,7.4L658.1,187.8z"
        />
      </svg>

```

Title: Change mask from white to black

Body:
I've found a cool codepen that has a text hover effect using a background image and a mask on top. I'm trying to change the mask on this Codepen from white to black but if you set is to black it doesn't work at all. I assume there is a reason for this but I have no idea why that is.

Is it possible to make the white mask black?

var vertex = `
        attribute vec2 uv;
        attribute vec2 position;
        varying vec2 vUv;
        void main() {
                vUv = uv;
                gl_Position = vec4(position, 0, 1);
        }
`;
var fragment = `
        precision highp float;
        precision highp int;
        uniform sampler2D tWater;
        uniform sampler2D tFlow;
        uniform float uTime;
        varying vec2 vUv;
        uniform vec4 res;
        uniform vec2 img;

        vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
                return uvs * factor - factor /2. + 0.5;
        }

        void main() {

            // R and G values are velocity in the x and y direction
            // B value is the velocity length
            vec3 flow = texture2D(tFlow, vUv).rgb;

            vec2 uv = .5 * gl_FragCoord.xy / res.xy ;

            // vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
            vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV -= flow.xy * (0.15 * 1.2);

            vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV2 -= flow.xy * (0.125 * 1.2);

            vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
            myUV3 -= flow.xy * (0.10 * 1.4);

            vec3 tex = texture2D(tWater, myUV).rgb;
            vec3 tex2 = texture2D(tWater, myUV2).rgb;
            vec3 tex3 = texture2D(tWater, myUV3).rgb;

            gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
        }
`;
{
    var _size = [2048, 1638];
    var renderer = new ogl.Renderer({ dpr: 2 });
    var gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    // Variable inputs to control flowmap
    var aspect = 1;
    var mouse = new ogl.Vec2(-1);
    var velocity = new ogl.Vec2();
    function resize() {
        gl.canvas.width = window.innerWidth * 2.0;
        gl.canvas.height = window.innerHeight * 2.0;
        gl.canvas.style.width = window.innerWidth + "px";
        gl.canvas.style.height = window.innerHeight + "px";

        var a1, a2;
        var imageAspect = _size[1] / _size[0];
        if (window.innerHeight / window.innerWidth < imageAspect) {
            a1 = 1;
            a2 = window.innerHeight / window.innerWidth / imageAspect;
        } else {
            a1 = window.innerWidth / window.innerHeight * imageAspect;
            a2 = 1;
        }
        mesh.program.uniforms.res.value = new ogl.Vec4(
            window.innerWidth,
            window.innerHeight,
            a1,
            a2
        );

        renderer.setSize(window.innerWidth, window.innerHeight);
        aspect = window.innerWidth / window.innerHeight;
    }
    var flowmap = new ogl.Flowmap(gl, {
        falloff: 0.3,
        dissipation: 0.92,
        alpha: 0.5
    });
    // Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
    var geometry = new ogl.Geometry(gl, {
        position: {
            size: 2,
            data: new Float32Array([-1, -1, 3, -1, -1, 3])
        },
        uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
    });
    var texture = new ogl.Texture(gl, {
        minFilter: gl.LINEAR,
        magFilter: gl.LINEAR
    });
    var img = new Image();
    img.onload = () => (texture.image = img);
    img.crossOrigin = "Anonymous";
    img.src = "https://robindelaporte.fr/codepen/bg3.jpg";

    var a1, a2;
    var imageAspect = _size[1] / _size[0];
    if (window.innerHeight / window.innerWidth < imageAspect) {
        a1 = 1;
        a2 = window.innerHeight / window.innerWidth / imageAspect;
    } else {
        a1 = window.innerWidth / window.innerHeight * imageAspect;
        a2 = 1;
    }

    var program = new ogl.Program(gl, {
        vertex,
        fragment,
        uniforms: {
            uTime: { value: 0 },
            tWater: { value: texture },
            res: {
                value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2)
            },
            img: { value: new ogl.Vec2(_size[1], _size[0]) },
            // Note that the uniform is applied without using an object and value property
            // This is because the class alternates this texture between two render targets
            // and updates the value property after each render.
            tFlow: flowmap.uniform
        }
    });
    var mesh = new ogl.Mesh(gl, { geometry, program });

    window.addEventListener("resize", resize, false);
    resize();

    // Create handlers to get mouse position and velocity
    var isTouchCapable = "ontouchstart" in window;
    if (isTouchCapable) {
        window.addEventListener("touchstart", updateMouse, false);
        window.addEventListener("touchmove", updateMouse, { passive: false });
    } else {
        window.addEventListener("mousemove", updateMouse, false);
    }
    var lastTime;
    var lastMouse = new ogl.Vec2();
    function updateMouse(e) {
        e.preventDefault();

        if (e.changedTouches && e.changedTouches.length) {
            e.x = e.changedTouches[0].pageX;
            e.y = e.changedTouches[0].pageY;
        }
        if (e.x === undefined) {
            e.x = e.pageX;
            e.y = e.pageY;
        }
        // Get mouse value in 0 to 1 range, with y flipped
        mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
        // Calculate velocity
        if (!lastTime) {
            // First frame
            lastTime = performance.now();
            lastMouse.set(e.x, e.y);
        }

        var deltaX = e.x - lastMouse.x;
        var deltaY = e.y - lastMouse.y;

        lastMouse.set(e.x, e.y);

        var time = performance.now();

        // Avoid dividing by 0
        var delta = Math.max(10.4, time - lastTime);
        lastTime = time;
        velocity.x = deltaX / delta;
        velocity.y = deltaY / delta;
        // Flag update to prevent hanging velocity values when not moving
        velocity.needsUpdate = true;
    }
    requestAnimationFrame(update);
    function update(t) {
        requestAnimationFrame(update);
        // Reset velocity when mouse not moving
        if (!velocity.needsUpdate) {
            mouse.set(-1);
            velocity.set(0);
        }
        velocity.needsUpdate = false;
        // Update flowmap inputs
        flowmap.aspect = aspect;
        flowmap.mouse.copy(mouse);
        // Ease velocity input, slower when fading out
        flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
        flowmap.update();
        program.uniforms.uTime.value = t * 0.01;
        renderer.render({ scene: mesh });
    }
}

body {
    position: fixed;
    height: 100%;
  overflow: hidden;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.mask {
    position: absolute;
    z-index: 2;
    background: white;
    height: 100vh;
    width: 100vw;
    mix-blend-mode: screen;
    /* display: none; */
}

svg {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1040 205.1" style="enable-background:new 0 0 1040 205.1;" xml:space="preserve">

        <g>
          <g>
            <path
              class="st0"
              d="M108.7,155.2l24.8,23.3c-2.1,3.1-4.9,6.2-8.3,9.2c-10.2,8.8-26.2,16.4-48.5,16.4C33.4,204.1,1,174.8,1,131.2
                c0-43.3,32.4-72.6,75.7-72.6c29.8,0,48.4,13.2,56.8,25.5l-28.7,26.7c-5.5-8-14.3-13.2-26.1-13.2c-18.3,0-32.4,12.6-32.4,33.6
                c0,3.7,0.4,7.2,1.3,10.4c1.5,5.9,4.4,10.8,8.2,14.5c5,4.9,11.6,8,19.1,8.7c1.2,0.1,2.5,0.2,3.8,0.2c10.5,0,18.7-4.6,24.2-11.1
                c0.7-0.8,1.3-1.6,1.8-2.4L108.7,155.2z"
            />
            <path
              class="st0"
              d="M239.9,59.4v42.5c-2.6-0.6-6.3-1.2-10.9-1.2c-11.5,0-26.7,4.9-32.4,12.6v88.3h-44.2V63.1h44.2V80
                C205.8,68.8,223.3,59.4,239.9,59.4z"
            />
            <path
              class="st0"
              d="M381.7,181.7c-9.3,9.7-21.1,16.9-34.5,20.4l0.7-0.1L381.7,181.7z"
            />
            <path
              class="st0"
              d="M539.8,92.8c-8.7-26-34.4-34.1-61.4-34.1c-21.2,0-45,6.3-62.8,21.5l7.2,12.6l8.6,15.2
                c11.2-9.5,25.5-14.6,39.3-14.6c17.8,0,28.1,8,28.1,20.1v16.6c-8.3-10.3-24.7-16.1-43-16.1c-7.1,0-14.8,1.2-21.9,4.1
                c-14,5.7-25.7,18-25.7,40.3c0,24.8,16.7,39,34.1,43.8c0.7,0.2,1.4,0.4,2.1,0.5c3.8,0.9,7.7,1.3,11.4,1.3c4.3,0,8.5-0.4,12.5-1.2
                c1.8-0.3,3.5-0.7,5.2-1.2c10.6-2.8,19.6-8.1,25.2-14.9v13.8h44.1V114C542.9,105.9,541.8,98.8,539.8,92.8z M498.8,165.1
                c-4.6,6.6-14.9,10-24.7,10c-11.8,0-22.1-5.2-22.1-16.1c0-10.9,10.3-16.1,22.1-16.1c9.8,0,20.1,3.4,24.7,9.8V165.1z"
            />
            <path
              class="st0"
              d="M605.3,201.1c-5.9-2.5-10.7-6.2-14.1-11.1C595.1,194.7,599.9,198.5,605.3,201.1z"
            />
            <path
              class="st0"
              d="M656.2,101.5h-28.1v19.6c-1.4-0.1-2.8-0.2-4.2-0.2c-18.2,0-33.7,11.5-39.6,27.5v-46.9h-22.9V63.1h22.9V25.2
                h43.9v37.9h28.1V101.5z"
            />
            <path
              class="st0"
              d="M660.2,195.9c-2.8,2.6-6.9,4.9-12.4,6.6c-5.1,1.5-11.3,2.5-18.7,2.6c12-1.5,22.4-7.9,29.1-17.2L660.2,195.9z"
            />
            <path
              class="st0"
              d="M725.5,26.2c0,14-11.2,25.5-25.2,25.5s-25.2-11.5-25.2-25.5S686.3,1,700.3,1S725.5,12.2,725.5,26.2z"
            />
            <polygon
              class="st0"
              points="891.5,63.1 879.4,93.8 873.7,108.5 837,201.6 790,201.6 760.2,125.9 747.6,93.8 735.6,63.1 782,63.1
                792.9,93.8 802.1,119.5 813.2,150.9 825.8,115.8 833.8,93.8 844.8,63.1        "
            />
            <path
              class="st0"
              d="M939.8,116.6c1.4-8,6.3-18.3,18-22.2c3-1,6.5-1.6,10.4-1.6c20.3,0,27.5,14.1,28.7,23.8H939.8z M968.2,204l2,0
                c21.2,0,44.1-6,57.9-18.4l-18.6-27.5c-7.7,7.5-24.6,11.8-34.4,11.8c-20.1,0-32.1-11.8-34.7-24.7h98.6v-9.5
                c0-47-29.8-77.2-70.8-77.2c-28.1,0-50.7,13.6-63.2,34.1c-2,3.3-3.8,6.8-5.2,10.5c-3.4,8.6-5.3,18-5.3,27.9
                c0,44.3,31.8,71.9,73.5,72.8L968.2,204z"
            />
          </g>
        </g>
        <polyline
          class="st0"
          points="678.2,201.4 678.2,63.1 722.3,63.1 722.3,201.4 "
        />
        <path
          class="st0"
          d="M395.3,135.8c0-10-1.3-19.2-3.8-27.5c-1.7-5.6-3.9-10.8-6.6-15.5c-12.1-21.6-33.9-34.1-60.4-34.1
        c-9.1,0-17.7,1.4-25.5,4.1c-25.9,11.5-43.9,37.5-43.9,67.8c0,37.8,28.1,69,64.5,73.5c3,0.4,6,0.5,9,0.5c6.4,0,12.7-0.8,18.6-2.4
        c13.3-3.5,25.2-10.7,34.5-20.4l-15.9-23.5c-7.7,7.5-24.7,11.8-34.4,11.8c-20.1,0-32.1-11.8-34.7-24.7h98.6V135.8z M296.1,116.6
        c1.7-10,9.2-23.8,28.4-23.8c6.4,0,11.5,1.4,15.5,3.6c8.7,4.8,12.4,13.5,13.1,20.2H296.1z"
        />
        <path
          class="st0"
          d="M658.1,187.8c-6.7,9.3-17.1,15.8-29.1,17.2h0c-1.7,0.2-3.4,0.3-5.2,0.3c-6.6,0-12.9-1.5-18.5-4.2
        c-5.5-2.7-10.3-6.5-14.1-11.1c0,0,0,0,0-0.1c-4.6-6.5-7-15.1-7-25.6v-15.9c6-16.1,21.4-27.5,39.6-27.5c1.4,0,2.8,0.1,4.2,0.2V152
        c0,7.1,3.6,12.6,9.8,13.8c0.8,0.1,1.6,0.2,2.5,0.2c4.9,0,9.7-1.7,11.2-3.4l1.9,7.4L658.1,187.8z"
        />
      </svg>


来源: stackexchange

问:
Normalize the 3D skeleton data for deep learning
I have some 3D motion capture data for training a deep learning model, but the loss is too high so I need to apply normalization to adjust the input data.

The list below is the steps I am planning to do for the normalization:

Set the skeleton's left sole to be the origin point (0, 0, 0)

All joint points (x, y, z) minus the left sole point(xls, yls, zls)

Set the skeleton's height as 1

Divide all the joint point y-axis values by the y-value of the head point

Calculate the angle between the waist-line and x-axis line

Calculate the angle between the two lines, the waist-line (The line connected by the Left-waist point and Right-waist point), and the line parallel to the X-axis extending from the midpoint of the waist-line.

Every joint point multiply with the rotation matrix

Multiply the rotation matrix with the y-axis(height axis) as the rotation axis (right-handed coordinate system: the value on the X-axis is greater on the right than on the left)
The rotation matrix is obtained as follows:
[[cos_theta, 0, neg_sin_theta],

[0, 1, 0],

[sin_theta, 0, cos_theta]]

From a mathematical perspective, I drew an image as shown below to depict the normalization by multiplying with a rotation matrix, hoping the skeleton can rotate with the waist and let the waist-line always be parallel with the x-axis :

Now I want to normalize the 3D skeleton coordinates by multiplying the rotation matrix:
(I tested 3 different rotation matrixes. The above mentioned rotation matrix produced very high distortion, so I tested with the matrix below and got a more reasonable rotation, which I don't know why...)

```<code>rotate_matrix =[[cos_theta, neg_sin_theta, 0],
               [sin_theta, cos_theta, 0],
               [0, 0, 1]]

</code>```

Got the result of normalization:

The normalization using this rotation matrix still produces weird result, but at least it seems to rotate with the height-axis as desired.

The original skeleton movement:

Hope someone give some advice of this normalization, or provide other ideas to deal with 3D skeleton normalization.

Thank you in advance for your input.

ContentLicense: CC BY-SA 4.0

Body:
I have some 3D motion capture data for training a deep learning model, but the loss is too high so I need to apply normalization to adjust the input data.

The list below is the steps I am planning to do for the normalization:

Set the skeleton's left sole to be the origin point (0, 0, 0)

All joint points (x, y, z) minus the left sole point(xls, yls, zls)

Set the skeleton's height as 1

Divide all the joint point y-axis values by the y-value of the head point

Calculate the angle between the waist-line and x-axis line

Calculate the angle between the two lines, the waist-line (The line connected by the Left-waist point and Right-waist point), and the line parallel to the X-axis extending from the midpoint of the waist-line.

Every joint point multiply with the rotation matrix

Multiply the rotation matrix with the y-axis(height axis) as the rotation axis (right-handed coordinate system: the value on the X-axis is greater on the right than on the left)
The rotation matrix is obtained as follows:
[[cos_theta, 0, neg_sin_theta],

[0, 1, 0],

[sin_theta, 0, cos_theta]]

From a mathematical perspective, I drew an image as shown below to depict the normalization by multiplying with a rotation matrix, hoping the skeleton can rotate with the waist and let the waist-line always be parallel with the x-axis :

Now I want to normalize the 3D skeleton coordinates by multiplying the rotation matrix:
(I tested 3 different rotation matrixes. The above mentioned rotation matrix produced very high distortion, so I tested with the matrix below and got a more reasonable rotation, which I don't know why...)

rotate_matrix =[[cos_theta, neg_sin_theta, 0],
               [sin_theta, cos_theta, 0],
               [0, 0, 1]]

Got the result of normalization:

The normalization using this rotation matrix still produces weird result, but at least it seems to rotate with the height-axis as desired.

The original skeleton movement:

Hope someone give some advice of this normalization, or provide other ideas to deal with 3D skeleton normalization.

Thank you in advance for your input.


问:
Angular Use Template to Set Environment Variable
I have several Angular applications which will connect to an API. the API service and applications will all run in several different locations with the API base URL base on the location. Also, these applications will be running inside docker containers

I've read through How to use the environment for specific HTTP services and I understand using the environment files to set different API base URLs by environment. However, what I would like to do would be to set the URL as a variable in the docker-compose file and use that value to set the API base URL.

So my thought process would be this

docker-compose.yml

```<code>version '3.7'
services:
    app1:
        image: app_image1:1.0.0
        ports:
            - "80:80"
        environment:
            API_BASE_URL: http://0.0.0.0/data
</code>```

and then somewhere in the app be able to read and use that value. Maybe in the environment file doing some sort of substitution...

```<code>export const environment = {
  production: true
  baseUrl: ${API_BASE_URL}
}
</code>```

Is something like that possible? Or do I have to setup an environment file for each location
environment.prod.loca.ts, environment.prod.locb.ts, etc.?

What is the best approach to handling this?

EDIT

For clarity both the application and API will be deployed to several different locations. The API will be site specific with the root URL based on the IP address of the server it is deployed to.

This is what I am trying to talk, how can I supply the base URL to the angular application so as to not have to rebuild the application several times just to switch out the API URL?

Body:
I have several Angular applications which will connect to an API. the API service and applications will all run in several different locations with the API base URL base on the location. Also, these applications will be running inside docker containers

I've read through How to use the environment for specific HTTP services and I understand using the environment files to set different API base URLs by environment. However, what I would like to do would be to set the URL as a variable in the docker-compose file and use that value to set the API base URL.

So my thought process would be this

docker-compose.yml

version '3.7'
services:
    app1:
        image: app_image1:1.0.0
        ports:
            - "80:80"
        environment:
            API_BASE_URL: http://0.0.0.0/data

and then somewhere in the app be able to read and use that value. Maybe in the environment file doing some sort of substitution...

export const environment = {
  production: true
  baseUrl: ${API_BASE_URL}
}

Is something like that possible? Or do I have to setup an environment file for each location
environment.prod.loca.ts, environment.prod.locb.ts, etc.?

What is the best approach to handling this?

EDIT

For clarity both the application and API will be deployed to several different locations. The API will be site specific with the root URL based on the IP address of the server it is deployed to.

This is what I am trying to talk, how can I supply the base URL to the angular application so as to not have to rebuild the application several times just to switch out the API URL?


问:
Flask pybabel with SubmitField not allowing spaces in string
I have a pretty complex Flask site using Babel for multilanguage support in templates using {{_('sometext')} It all works well except the buttons which truncate with any spaces in the string.

Example

```<code>         <h2>{{ _("Hello World") }}</h2>

         <input type="submit" name="h"  value={{ _("Hello World") }}>
</code>```

This displays with the button text truncated at the space. Looking at rendered page source, I see the HTML below is malformed.

```<code><input type="submit" name="h" value="Hello" world="">
</code>```

Any idea how to allow spaces in Babel computed button values?

Body:
I have a pretty complex Flask site using Babel for multilanguage support in templates using {{_('sometext')} It all works well except the buttons which truncate with any spaces in the string.

Example

{{ _("Hello World") }}

         <input type="submit" name="h"  value={{ _("Hello World") }}>

This displays with the button text truncated at the space. Looking at rendered page source, I see the HTML below is malformed.

<input type="submit" name="h" value="Hello" world="">

Any idea how to allow spaces in Babel computed button values?


问:
How to optimize resource usage when drawing image in a QWidget?
I'm subclassing the scrollAreaWidgetContents (which is literally a QWidget) of a QScrollArea and drawing an image on its background.

While resizing the widget, it was using too much CPU (tested with the QScrollArea containing no other widgets) so I tried to find a way to 'optimize' the drawing of the image, and I have written this class:

```<code>   class ScrollChild : public QWidget
    {
        Q_OBJECT

    public:

        QTimer* m_resizeTimer;
        int width;
        int height;

        QPixmap pixmap = QPixmap("...");
        QPixmap pixmapScaled;
        int pixWidth, prevpixWidth;
        int pixHeight, prevpixHeight;
        int pixmapPosX;
        int pixmapPosY;

        // getPos: a dynamic property set in Qt Designer to
        // the widget that will be used as base to where the
        // pixmap should be drawn.
        QWidget* getPos;
        QWidget* widget;

        ScrollChild(QWidget* parent = 0) : QWidget(parent)
        {
            initTimer();
        };

        void resizeEvent(QResizeEvent* event)
        {
            QWidget::resizeEvent(event);
            width = event->size().width();
            height = event->size().height();
            m_resizeTimer->start();
        }

        bool runtime = true;
        void showEvent(QShowEvent* event)
        {
            if (runtime)
            {
                runtime = false;

                // Looking for the property inside showEvent because
                // when searched in the constructor its not found.
                for (auto wdgt : this->findChildren<QWidget*>())
                {
                    if (!wdgt->property("getPos").isNull())
                    {
                        getPos = wdgt;
                        break;
                    }
                }
            }
        }

        void initTimer()
        {
            m_resizeTimer = new QTimer(this);
            m_resizeTimer->setInterval(100);
            m_resizeTimer->setSingleShot(true);
            connect(m_resizeTimer, &QTimer::timeout, this, &ScrollChild::resizePicture);
        }

        void resizePicture()
        {
            pixWidth = width;
            pixHeight = height;

            if (pixWidth > 600)
                pixWidth = 600;
            if (pixHeight > 400)
                pixHeight = 400;

            if ( (pixWidth != prevpixWidth) && (pixHeight != prevpixHeight) )
                pixmapScaled = pixmap.scaled(pixWidth, pixHeight, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);

            prevpixWidth = pixWidth;
            prevpixHeight = pixHeight;

            //qDebug() << "w: " << width << " h: " << height;
            //qDebug() << "pixmap:\nw: " << pixmap.width() << "h: " << pixmap.height() << "\n";

            repaint();
        }

        void paintEvent(QPaintEvent *e)
        {
            if (pixmapScaled.isNull())
                return;

            QPainter painter(this);
            painter.setRenderHint(QPainter::Antialiasing);
            painter.setRenderHint(QPainter::SmoothPixmapTransform);

            widget = getPos;
            pixmapPosX = 0;
            pixmapPosY = 0;

            // Search the position of the widget marked in
            // the Qt Designer.
            // As the widget is inside a container we must
            // iterate trought her parent adding the x pos
            // relative to the scrollAreaWidgetContent.
            while (widget != this)
            {
                pixmapPosX += widget->pos().x();
                pixmapPosY += widget->pos().y();
                widget = widget->parentWidget();
            }

            painter.drawPixmap(pixmapPosX, pixmapPosY,
                               pixmapScaled.width(), pixmapScaled.height(),
                               pixmapScaled);
        }
    };
</code>```

It reduced the CPU usage by 60%~ while keeping the same looking/quality.

Its possible to improve on something else? or write it in a most efficient way?

Body:
I'm subclassing the scrollAreaWidgetContents (which is literally a QWidget) of a QScrollArea and drawing an image on its background.

While resizing the widget, it was using too much CPU (tested with the QScrollArea containing no other widgets) so I tried to find a way to 'optimize' the drawing of the image, and I have written this class:

   class ScrollChild : public QWidget
    {
        Q_OBJECT

    public:

        QTimer* m_resizeTimer;
        int width;
        int height;

        QPixmap pixmap = QPixmap("...");
        QPixmap pixmapScaled;
        int pixWidth, prevpixWidth;
        int pixHeight, prevpixHeight;
        int pixmapPosX;
        int pixmapPosY;

        // getPos: a dynamic property set in Qt Designer to
        // the widget that will be used as base to where the
        // pixmap should be drawn.
        QWidget* getPos;
        QWidget* widget;

        ScrollChild(QWidget* parent = 0) : QWidget(parent)
        {
            initTimer();
        };

        void resizeEvent(QResizeEvent* event)
        {
            QWidget::resizeEvent(event);
            width = event->size().width();
            height = event->size().height();
            m_resizeTimer->start();
        }

        bool runtime = true;
        void showEvent(QShowEvent* event)
        {
            if (runtime)
            {
                runtime = false;

                // Looking for the property inside showEvent because
                // when searched in the constructor its not found.
                for (auto wdgt : this->findChildren<QWidget*>())
                {
                    if (!wdgt->property("getPos").isNull())
                    {
                        getPos = wdgt;
                        break;
                    }
                }
            }
        }

        void initTimer()
        {
            m_resizeTimer = new QTimer(this);
            m_resizeTimer->setInterval(100);
            m_resizeTimer->setSingleShot(true);
            connect(m_resizeTimer, &QTimer::timeout, this, &ScrollChild::resizePicture);
        }

        void resizePicture()
        {
            pixWidth = width;
            pixHeight = height;

            if (pixWidth > 600)
                pixWidth = 600;
            if (pixHeight > 400)
                pixHeight = 400;

            if ( (pixWidth != prevpixWidth) && (pixHeight != prevpixHeight) )
                pixmapScaled = pixmap.scaled(pixWidth, pixHeight, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);

            prevpixWidth = pixWidth;
            prevpixHeight = pixHeight;

            //qDebug() << "w: " << width << " h: " << height;
            //qDebug() << "pixmap:\nw: " << pixmap.width() << "h: " << pixmap.height() << "\n";

            repaint();
        }

        void paintEvent(QPaintEvent *e)
        {
            if (pixmapScaled.isNull())
                return;

            QPainter painter(this);
            painter.setRenderHint(QPainter::Antialiasing);
            painter.setRenderHint(QPainter::SmoothPixmapTransform);

            widget = getPos;
            pixmapPosX = 0;
            pixmapPosY = 0;

            // Search the position of the widget marked in
            // the Qt Designer.
            // As the widget is inside a container we must
            // iterate trought her parent adding the x pos
            // relative to the scrollAreaWidgetContent.
            while (widget != this)
            {
                pixmapPosX += widget->pos().x();
                pixmapPosY += widget->pos().y();
                widget = widget->parentWidget();
            }

            painter.drawPixmap(pixmapPosX, pixmapPosY,
                               pixmapScaled.width(), pixmapScaled.height(),
                               pixmapScaled);
        }
    };

It reduced the CPU usage by 60%~ while keeping the same looking/quality.

Its possible to improve on something else? or write it in a most efficient way?


问:
Typescript generics nested objects - Error type can't be used as an index type
I have been having massive headaches trying to resolve a typescript issue that involves generics in a nested object.

The problem occurs when I am processing this object in a reducer and accessing a deeply nested object within a generic type causes the types not to be satisfied (X can't be used as an index type error)

Full error message is: TS7053: Element implicitly has an 'any' type because expression of type 'GarmentSubTypes' can't be used to index type 'UserFitMeasurements<TopSubType> | UserFitMeasurements<KnitSubType> | UserFitMeasurements<JacketSubTypes> | ... 5 more ... | UserFitMeasurements<...>'.   Property '[TopSubType.shirt]' does not exist on type 'UserFitMeasurements<TopSubType> | UserFitMeasurements<KnitSubType> | UserFitMeasurements<JacketSubTypes> | ... 5 more ... | UserFitMeasurements<...>'.

Below is a code a small code snippet as well as a TS playground link to demonstrate the issue.

I have captured and reproduced the error on TS playground link below with the comment lines on where I need help.

TS Playground

export const enum TopSubType {
  shirt = 'shirt',
  tee = 'tee',
}

export const enum TrouserSubTypes {
  denim_jeans = 'denim_jeans',
  chinos = 'chinos',
}

export type GarmentSubTypes =
  | TopSubType
  | TrouserSubTypes;

export type GarmentMeasurements = {
  chest?: number;
  waist?: number;
};

export enum FitType {
  fitted = 'fitted',
  loose = 'loose',
}

export type FitMeasurements = { [key in FitType]?: GarmentMeasurements };
export type GarmentFitMeasurements = {
  measurements: FitMeasurements;
};

export type UserFitMeasurements<T extends GarmentSubTypes> = Record<T, GarmentFitMeasurements>;

export type UserFitModel = {
  user_id: string;
  tops_ease: UserFitMeasurements<TopSubType>;
  trousers_ease: UserFitMeasurements<TrouserSubTypes>;
};

export type FitModelChangeActions = Partial<
  Pick<
    UserFitModel,
    | 'tops_ease'
    | 'trousers_ease'
  >
>;

export type FitModelEaseKeys = keyof FitModelChangeActions;

export type FeedbackSummary = {
  itemSubType: GarmentSubTypes;
  easeGroup: FitModelEaseKeys | null;
};

function getFitModelChanges(feedback: FeedbackSummary[], fitModel: UserFitModel): FitModelChangeActions {
  return feedback.reduce((acc, curr) => {
    if (!curr.itemSubType || !curr.easeGroup) return acc;

    const measureKeys = ['chest'];

    const modifyFitValues = () => {
      const result = {} as Partial<FitMeasurements>;

      if (curr.easeGroup) {
        if (!acc[curr.easeGroup]) {
          acc[curr.easeGroup] = fitModel[curr.easeGroup]; // HELP WITH THIS TS ISSUE!
        }

        // HELP WITH THIS TS ISSUE!
        // How can I tell TS that itemSubType is a valid key?
        if (!acc[curr.easeGroup][curr.itemSubType]) {
          acc[curr.easeGroup][curr.itemSubType] = fitModel[curr.easeGroup][curr.itemSubType];
        }

        acc = {
          ...acc,
          [curr.easeGroup]: {
            ...acc[curr.easeGroup],
            [curr.itemSubType]: {
              ...acc[curr.easeGroup][curr.itemSubType], // HELP WITH THIS TS ISSUE!
              ...result,
            },
          },
        };
      }
    };

    measureKeys.forEach(() => {
      if (!curr.easeGroup) return acc;

      const easeGroup = fitModel[curr.easeGroup];

      // HELP WITH THIS TS ISSUE!
      const easeMeasurements = easeGroup[curr.itemSubType].measurements;
      modifyFitValues();

      return acc;
    });

    return acc;
  }, {} as FitModelChangeActions);
}
```

Basically I need a way to say for an access pattern of acc[curr.easeGroup][curr.itemSubType] that curr.itemSubType is definitely a key that belongs to the object acc[curr.easeGroup] (which is a typed generic).

The error can be seen more easily in TS playground with the complaint of curr.itemSubType can't be used as an index type

I feel like this must be a fairly common logic so there has to be solution that I just haven't figured out or know about.

Body:
I have been having massive headaches trying to resolve a typescript issue that involves generics in a nested object.

The problem occurs when I am processing this object in a reducer and accessing a deeply nested object within a generic type causes the types not to be satisfied (X can't be used as an index type error)

Full error message is: TS7053: Element implicitly has an 'any' type because expression of type 'GarmentSubTypes' can't be used to index type 'UserFitMeasurements<TopSubType> | UserFitMeasurements<KnitSubType> | UserFitMeasurements<JacketSubTypes> | ... 5 more ... | UserFitMeasurements<...>'.   Property '[TopSubType.shirt]' does not exist on type 'UserFitMeasurements<TopSubType> | UserFitMeasurements<KnitSubType> | UserFitMeasurements<JacketSubTypes> | ... 5 more ... | UserFitMeasurements<...>'.

Below is a code a small code snippet as well as a TS playground link to demonstrate the issue.

I have captured and reproduced the error on TS playground link below with the comment lines on where I need help.

<a href="https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBAYwgOwM72MgrgWzgFQjAGUsAjfATzGDgG8AoOOVACwEtY4BeOAcjacYfADRM4MYLV59JwUQwC+DBqEhckaDNjz4oELKmBRSFasFT1xAE0zscAfQBWwAIZoe-W8nvO3aBWYEDmQISxlg9lDUBWVVcGh4GHM4AHFXKBxMGFMqGnDxAB8CIlzzIoJ9Q2My-IBuFTVEiRT0zOyAWTdULChgLOQYcKsg1gsYAH4ALjgdMmMG5gB3V3Z0adnceagGxQb49W1cOAAxdhg82kZmADNzyWtPPjuYB8C4ABsIMOl+L5-Yo0ElxkjRTucuq4en0BkNPHQ4ABtADWwEocCi4Iu5gAuhs2rDIdD+tlLHsDs1QbQCdkzjAib0SYNhtc4FkoYzYagZnSGTDSbt9k0QSkAKpGKC87qc0kAHnwcFAkmQ1ksNMGtQsAD5PAAlYBIKDWeUiNIZWFSjn85laoXApJiiW8iC2D7w8TVKAOdjWGboKBRADmiwkRFQDm6wBm4uMluJXPlpXIl1t4hgVQl4cj0adEOl1qG8ozNWT5lQqfJFJFYOdroAwqx3IHgABBBAwdgoYYABQyHdcH1l4m77AQyKHzGYMclEJdwA+YkncGKsjDEah8nEzBX6YMmfXRj44i1DFTVYdNdnroAohuANJo4aoygQG5Yjpzj4Nput9udtB2ocLQ1lI1hkK4Y6kDgOAZOivCsuc-SajM6o5KW9TiJGqRVGAPJXvOt5GA+lCWMU2AfB8goqAwNxYMgf4oHAzYwLW87fsgzaoAAFDcoHgWOPJ8RByJQTBUCUIiOKmi8H6ujmsb4R8ACUeH0p+7HNm2HZdiMcB9DAvTIHAvHAGBwkAHR9NYWAIMAXFcRBCCmggvRQEpPA6qyzDsG+XEAIQuVAUDmYhOCasuxQBa55lYTh7n6YZcCOfsS6aOgbL5sAxHDIifDBOMfA4ilk5pfAOAuj5lB0gAagOWAWJ4XHudwnlbiVXbwH0PQfPA8GKElli9rA7ADrKcYyjaxVLj5cBcYFwWxQYYDuV5S4Yr5fmOYi80xRu2FLTiK1tWtSUIAg23RYtWBgDingyZ+F1BbtRj7ddRVwAA9B9cAABLXgAMt2cAAOoAJL4D9BA-aDxAELDMPEKK15+cdk5xCdzBfb9ANA2DENQzDcNwAjSMoxjn3fT9EBLIg7jExI85uvgsMwI28CheFaxJXAABuA4+nAz4TKj3kbVtO1XTdj3BRz6HAIdunk+Ll17ThOLSyFkhhXLt28Pdroa5L6s7bLZg0EVItwOjGOOe65PMOZjuOYu9uG6rB0zKt5OO+ZytPUbLv20iJta5qOKe5bJ0+37C3u29Gum5cUkU9jgMg+DkMQ4TzPE8QiPI5Ha0+11WA9YH9uKOXJ2V5b5LV21lZLuyxLZeZNzQLewT2c1rUnTN-kS3Hy16cABlQEZyUqCdpWKkPd2KW7L1q1Nk5Y39ad45n0OwznJMF9PHWz0YfJMnCvCSwnoc6+ZzcTUMIZNxVNxVectUfPV3FKSvzAJePp0IA-K2X8p6Tl-hPM6IZK70H6lCd86lGwcV-NpNAwDFBAA" rel="nofollow noreferrer">TS Playground

export const enum TopSubType {
  shirt = 'shirt',
  tee = 'tee',
}

export const enum TrouserSubTypes {
  denim_jeans = 'denim_jeans',
  chinos = 'chinos',
}

export type GarmentSubTypes =
  | TopSubType
  | TrouserSubTypes;

export type GarmentMeasurements = {
  chest?: number;
  waist?: number;
};

export enum FitType {
  fitted = 'fitted',
  loose = 'loose',
}

export type FitMeasurements = { [key in FitType]?: GarmentMeasurements };
export type GarmentFitMeasurements = {
  measurements: FitMeasurements;
};

export type UserFitMeasurements<T extends GarmentSubTypes> = Record<T, GarmentFitMeasurements>;

export type UserFitModel = {
  user_id: string;
  tops_ease: UserFitMeasurements<TopSubType>;
  trousers_ease: UserFitMeasurements<TrouserSubTypes>;
};

export type FitModelChangeActions = Partial<
  Pick<
    UserFitModel,
    | 'tops_ease'
    | 'trousers_ease'
  >
>;

export type FitModelEaseKeys = keyof FitModelChangeActions;

export type FeedbackSummary = {
  itemSubType: GarmentSubTypes;
  easeGroup: FitModelEaseKeys | null;
};

function getFitModelChanges(feedback: FeedbackSummary[], fitModel: UserFitModel): FitModelChangeActions {
  return feedback.reduce((acc, curr) => {
    if (!curr.itemSubType || !curr.easeGroup) return acc;

    const measureKeys = ['chest'];

    const modifyFitValues = () => {
      const result = {} as Partial<FitMeasurements>;

      if (curr.easeGroup) {
        if (!acc[curr.easeGroup]) {
          acc[curr.easeGroup] = fitModel[curr.easeGroup]; // HELP WITH THIS TS ISSUE!
        }

        // HELP WITH THIS TS ISSUE!
        // How can I tell TS that itemSubType is a valid key?
        if (!acc[curr.easeGroup][curr.itemSubType]) {
          acc[curr.easeGroup][curr.itemSubType] = fitModel[curr.easeGroup][curr.itemSubType];
        }

        acc = {
          ...acc,
          [curr.easeGroup]: {
            ...acc[curr.easeGroup],
            [curr.itemSubType]: {
              ...acc[curr.easeGroup][curr.itemSubType], // HELP WITH THIS TS ISSUE!
              ...result,
            },
          },
        };
      }
    };

    measureKeys.forEach(() => {
      if (!curr.easeGroup) return acc;

      const easeGroup = fitModel[curr.easeGroup];

      // HELP WITH THIS TS ISSUE!
      const easeMeasurements = easeGroup[curr.itemSubType].measurements;
      modifyFitValues();

      return acc;
    });

    return acc;
  }, {} as FitModelChangeActions);
}

Basically I need a way to say for an access pattern of acc[curr.easeGroup][curr.itemSubType] that curr.itemSubType is definitely a key that belongs to the object acc[curr.easeGroup] (which is a typed generic).

The error can be seen more easily in TS playground with the complaint of curr.itemSubType can't be used as an index type

I feel like this must be a fairly common logic so there has to be solution that I just haven't figured out or know about.


问:
Setting up Basic Apache Authentication through .htpasswrd... Not working?
So I am trying to run just a basic demonstration website using apache. I'm very new to the whole schema of how it works so I'm just testing basic authentication using both .htaccess and .htpasswrd  to see if it will actually prompt. So far it has not. My current directory for my site on my pc (Centos 7) is /var/www/html/index.html is where my site is. and my conf files are located in /etc/httpd/(sites-available)/(sites-enabled) to where both files have this configuration :

```<code>#Basic Appache Config file for Demo site
Listen 127.0.0.1:80

    <VirtualHost 127.0.0.1:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/
        <Directory "/var/www/html">
            Options Indexes FollowSymLinks
            AllowOverride ALL
            Require all granted
        </Directory>
    </VirtualHost>
</code>```

I figured this using .htaccess would yield the result I wanted.. and have also tried to do this method:

```<code><Directory "/var/www/your_domain">
      AuthType Basic
      AuthName "Restricted Content"
      AuthUserFile /etc/httpd/.htpasswd
      Require valid-user
  </Directory>
</VirtualHost>
</code>```

Neither of these has prompted my website for authentication whenever I go on firefox/chrome and go to local host. I have reset appache (httpd), multiple times, as well as disabled and re-enabled it to see if it was just that but also no luck. Any other recommendations I could try here? Or is it an error of syntax/httpd? Thanks to anyone with advice!

Body:
So I am trying to run just a basic demonstration website using apache. I'm very new to the whole schema of how it works so I'm just testing basic authentication using both .htaccess and .htpasswrd  to see if it will actually prompt. So far it has not. My current directory for my site on my pc (Centos 7) is /var/www/html/index.html is where my site is. and my conf files are located in /etc/httpd/(sites-available)/(sites-enabled) to where both files have this configuration :

#Basic Appache Config file for Demo site
Listen 127.0.0.1:80

    <VirtualHost 127.0.0.1:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/
        <Directory "/var/www/html">
            Options Indexes FollowSymLinks
            AllowOverride ALL
            Require all granted
        </Directory>
    </VirtualHost>

I figured this using .htaccess would yield the result I wanted.. and have also tried to do this method:

<Directory "/var/www/your_domain">
      AuthType Basic
      AuthName "Restricted Content"
      AuthUserFile /etc/httpd/.htpasswd
      Require valid-user
  </Directory>
</VirtualHost>

Neither of these has prompted my website for authentication whenever I go on firefox/chrome and go to local host. I have reset appache (httpd), multiple times, as well as disabled and re-enabled it to see if it was just that but also no luck. Any other recommendations I could try here? Or is it an error of syntax/httpd? Thanks to anyone with advice!


问:
Fixing rlang access denied
Can't seem to find a viable solution getting rlang to install after updating rstudio.
I tried using --no lock on builder tools https://work.sparktseung.com/pages/2021-09-06-R-build-package-permission/
Also tried uninstalling it and reinstalling w/ remove.packages this hasn't worked for me either after restarting.

```<code>> library(rlang)
Error in library(rlang) : there is no package called ‘rlang’
> remove.packages("rlang")
Removing package from ‘C:/Users/user/AppData/Local/R/win-library/4.2’
(as ‘lib’ is unspecified)
Error in remove.packages : there is no package called ‘rlang’
Restarting R session...
> library(rlang)
Error in library(rlang) : there is no package called ‘rlang’
</code>```

Here's the error when trying to install via url

```<code>Warning in file.rename(instdir, final_instdir) :
  cannot rename file 'C:/Users/user/AppData/Local/R/win-library/4.2/00LOCK-rlang/00new/rlang' to 'C:/Users/user/AppData/Local/R/win-library/4.2/rlang', reason 'Access is denied'
ERROR:    moving to final location failed
* removing 'C:/Users/user/AppData/Local/R/win-library/4.2/rlang'
Warning in install.packages :
  installation of package ‘C:/Users/user/AppData/Local/Temp/Rtmp8sB5rS/downloaded_packages/rlang_1.0.5.tar.gz’ had non-zero exit status
</code>```

Install Line

```<code>install.packages("https://cran.r-project.org/src/contrib/Archive/rlang/rlang_1.0.5.tar.gz", repo=NULL, type="source")
</code>```

Session Info

```<code>R version 4.2.0 (2022-04-22 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.utf8  LC_CTYPE=English_United States.utf8
[3] LC_MONETARY=English_United States.utf8 LC_NUMERIC=C
[5] LC_TIME=English_United States.utf8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base

loaded via a namespace (and not attached):
[1] compiler_4.2.0 tools_4.2.0
</code>```

Really need to run some scripts, any help would be appreciated.

Title: Fixing rlang access denied

Body:
Can't seem to find a viable solution getting rlang to install after updating rstudio.
I tried using --no lock on builder tools https://work.sparktseung.com/pages/2021-09-06-R-build-package-permission/
Also tried uninstalling it and reinstalling w/ remove.packages this hasn't worked for me either after restarting.

> library(rlang)
Error in library(rlang) : there is no package called ‘rlang’
> remove.packages("rlang")
Removing package from ‘C:/Users/user/AppData/Local/R/win-library/4.2’
(as ‘lib’ is unspecified)
Error in remove.packages : there is no package called ‘rlang’
Restarting R session...
> library(rlang)
Error in library(rlang) : there is no package called ‘rlang’

Here's the error when trying to install via url

Warning in file.rename(instdir, final_instdir) :
  cannot rename file 'C:/Users/user/AppData/Local/R/win-library/4.2/00LOCK-rlang/00new/rlang' to 'C:/Users/user/AppData/Local/R/win-library/4.2/rlang', reason 'Access is denied'
ERROR:    moving to final location failed
* removing 'C:/Users/user/AppData/Local/R/win-library/4.2/rlang'
Warning in install.packages :
  installation of package ‘C:/Users/user/AppData/Local/Temp/Rtmp8sB5rS/downloaded_packages/rlang_1.0.5.tar.gz’ had non-zero exit status

Install Line

install.packages("https://cran.r-project.org/src/contrib/Archive/rlang/rlang_1.0.5.tar.gz", repo=NULL, type="source")

Session Info

R version 4.2.0 (2022-04-22 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.utf8  LC_CTYPE=English_United States.utf8
[3] LC_MONETARY=English_United States.utf8 LC_NUMERIC=C
[5] LC_TIME=English_United States.utf8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base

loaded via a namespace (and not attached):
[1] compiler_4.2.0 tools_4.2.0

Really need to run some scripts, any help would be appreciated.


问:
Read file as the same Byte Array across operating systems
I have a Spring Boot app that runs from a WAR file, and I test it in different Operating Systems.
It reads a file from the "resources" directory (this is the path within the WAR: "/WEB-INF/classes/file-name") by performing the following steps:

1. Get the InputStream:

```<code>InputStream fileAsInputStream = new ClassPathResource("file-name").getInputStream();
</code>```

2. Convert the InputStream to ByteArray:

```<code>byte[] fileAsByteArray = IOUtils.toByteArray(fileAsInputStream );
</code>```

The issue is that the content of the obtained Byte Array is different between Operating Systems, causing inconsistencies in further operations. The reason for this is that the file contains newline characters ("\n" = 0x0A = 10 in Linux, and "\r\n" = 0x0A 0x0D = 10 13 in Windows). The differences across Operating Systems are explained for example in this thread: What are the differences between char literals '\n' and '\r' in Java?

This is an example where the Byte Arrays have different contents:

When app runs on Linux: [114, 115, 97, 10, 69, 110] => 10 is the "\n"

When app runs on Windows: [114, 115, 97, 13, 10, 69, 110] => 13 10 is the "\r\n"

So between these two OSs, the 10 is the same with 13 10. The file is always the same (because it is a Private Key used for establishing the SFTP communication). Differs only the Operating System from which the code is being run.

Is there a solution to obtain the same Byte Array, regardless of the Operating System from which the code is being run?

One working workaround would be to map the newline character to the same byte. So to iterate through the array, and to replace each 10 (for example) with 13 10.

Another solution that was tried is using StandardCharsets.UTF_8, but the elements of the arrays are still different:

IOUtils.toByteArray(new BufferedReader(new InputStreamReader(new ClassPathResource("file-name").getInputStream())), StandardCharsets.UTF_8)
```

Body:
I have a Spring Boot app that runs from a WAR file, and I test it in different Operating Systems.
It reads a file from the "resources" directory (this is the path within the WAR: "/WEB-INF/classes/file-name") by performing the following steps:

1. Get the InputStream:

InputStream fileAsInputStream = new ClassPathResource("file-name").getInputStream();

2. Convert the InputStream to ByteArray:

byte[] fileAsByteArray = IOUtils.toByteArray(fileAsInputStream );

The issue is that the content of the obtained Byte Array is different between Operating Systems, causing inconsistencies in further operations. The reason for this is that the file contains newline characters ("\n" = 0x0A = 10 in Linux, and "\r\n" = 0x0A 0x0D = 10 13 in Windows). The differences across Operating Systems are explained for example in this thread: What are the differences between char literals '\n' and '\r' in Java?

This is an example where the Byte Arrays have different contents:

When app runs on Linux: [114, 115, 97, 10, 69, 110] => 10 is the "\n"

When app runs on Windows: [114, 115, 97, 13, 10, 69, 110] => 13 10 is the "\r\n"

So between these two OSs, the 10 is the same with 13 10. The file is always the same (because it is a Private Key used for establishing the SFTP communication). Differs only the Operating System from which the code is being run.

Is there a solution to obtain the same Byte Array, regardless of the Operating System from which the code is being run?

One working workaround would be to map the newline character to the same byte. So to iterate through the array, and to replace each 10 (for example) with 13 10.

Another solution that was tried is using StandardCharsets.UTF_8, but the elements of the arrays are still different:

IOUtils.toByteArray(new BufferedReader(new InputStreamReader(new ClassPathResource("file-name").getInputStream())), StandardCharsets.UTF_8)


问:
Install Python3.8 on Ubuntu 22 server and got an error
I have a Ubuntu 22.04 server and I need to install Python3.8 on it.

Here is what I did:

```<code>sudo apt update
sudo apt upgrade
sudo apt install python3.8 -y
</code>```

The last command gave me this error:

```<code>Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Package python3.8 is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source

E: Package 'python3.8' has no installation candidate
</code>```

The server I am working on is a GCP instance, and it has Python3.10 installed before:

```<code>root@ansible-3:/usr/bin# ll python*
lrwxrwxrwx 1 root root       7 Jan  5 23:39 python -> python3*
lrwxrwxrwx 1 root root      10 Aug 18 10:39 python3 -> python3.10*
lrwxrwxrwx 1 root root      17 Aug 18 10:39 python3-config -> python3.10-config*
-rwxr-xr-x 1 root root 5921160 Nov 14 16:10 python3.10*
lrwxrwxrwx 1 root root      34 Nov 14 16:10 python3.10-config -> x86_64-linux-gnu-python3.10-config*
</code>```

Any idea what is going on?

Thanks!

Body:
I have a Ubuntu 22.04 server and I need to install Python3.8 on it.

Here is what I did:

sudo apt update
sudo apt upgrade
sudo apt install python3.8 -y

The last command gave me this error:

Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Package python3.8 is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source

E: Package 'python3.8' has no installation candidate

The server I am working on is a GCP instance, and it has Python3.10 installed before:

root@ansible-3:/usr/bin# ll python*
lrwxrwxrwx 1 root root       7 Jan  5 23:39 python -> python3*
lrwxrwxrwx 1 root root      10 Aug 18 10:39 python3 -> python3.10*
lrwxrwxrwx 1 root root      17 Aug 18 10:39 python3-config -> python3.10-config*
-rwxr-xr-x 1 root root 5921160 Nov 14 16:10 python3.10*
lrwxrwxrwx 1 root root      34 Nov 14 16:10 python3.10-config -> x86_64-linux-gnu-python3.10-config*

Any idea what is going on?

Thanks!


问:
Get the same font size in overleaf figures as overleaf text
I am writing a report in Overleaf where I use a font-size of 12px. I have some SVG figures that I have created in python where I use figure size

```<code>plt.Figure(figsize=(16, 14))
</code>```

and I set the font size using seaborn to be

```<code>seaborn.set(font_scale=12/10)
</code>```

to include the figures in overleaf I use

```<code>\begin{figure}[H]
    \centering
    \centerline{\includesvg[inkscapelatex=false,width=0.75\columnwidth]{Figures/fig1.svg}}
    \caption{figure caption}
    \label{fig:fig1}
    \end{figure}
</code>```

But the text does not become the same size as the text in overleaf. How can I make the text (labels, legends, ticks) in the python figures to be the same size as the text in overleaf? I do not want the figures to be to big in overleaf.

EDIT:
this is the document setup:

```<code>\documentclass[pdftex,10pt,b5paper,twoside]{book}
\usepackage[lmargin=25mm,rmargin=25mm,tmargin=27mm,bmargin=30mm]{geometry}
</code>```

Body:
I am writing a report in Overleaf where I use a font-size of 12px. I have some SVG figures that I have created in python where I use figure size

plt.Figure(figsize=(16, 14))

and I set the font size using seaborn to be

seaborn.set(font_scale=12/10)

to include the figures in overleaf I use

\begin{figure}[H]
    \centering
    \centerline{\includesvg[inkscapelatex=false,width=0.75\columnwidth]{Figures/fig1.svg}}
    \caption{figure caption}
    \label{fig:fig1}
    \end{figure}

But the text does not become the same size as the text in overleaf. How can I make the text (labels, legends, ticks) in the python figures to be the same size as the text in overleaf? I do not want the figures to be to big in overleaf.

EDIT:
this is the document setup:

\documentclass[pdftex,10pt,b5paper,twoside]{book}
\usepackage[lmargin=25mm,rmargin=25mm,tmargin=27mm,bmargin=30mm]{geometry}


问:
asymptotic complexity of post traversal + deletion
I wanna ask what the time complexity of post traversal in BST if I removed some specific nodes in it while doing the traversal, for example: A dictionary BST that has a word, and a meaning. We want to delete all words with data equal to an empty string, the tree could be unbalanced.

this is my algorithim:

```<code>void delete_nodes(Node*& node) {
if (node == nullptr) {
return;
}

delete_nodes(node->left);
delete_nodes(node->right);

if (node->data == "") {
// Node to be deleted has 0 or 1 child
if (node->left == nullptr) {
  Node* temp = node->right;
  delete node;
  node = temp;
} else if (node->right == nullptr) {
  Node* temp = node->left;
  delete node;
  node = temp;
} else {
  // Node to be deleted has 2 children
  // Swap the values of the node and the leftmost node in its right subtree
  Node* temp = node->right;
  while (temp->left != nullptr) {
    temp = temp->left;
  }
  node->data = temp->data;

  // Set the data of the leftmost node in the right subtree to an empty string
  temp->data = "";

  // Delete the leftmost node in the right subtree
  delete_nodes(node->right);
}
 }
}
</code>```

Body:
I wanna ask what the time complexity of post traversal in BST if I removed some specific nodes in it while doing the traversal, for example: A dictionary BST that has a word, and a meaning. We want to delete all words with data equal to an empty string, the tree could be unbalanced.

this is my algorithim:

void delete_nodes(Node*& node) {
if (node == nullptr) {
return;
}

delete_nodes(node->left);
delete_nodes(node->right);

if (node->data == "") {
// Node to be deleted has 0 or 1 child
if (node->left == nullptr) {
  Node* temp = node->right;
  delete node;
  node = temp;
} else if (node->right == nullptr) {
  Node* temp = node->left;
  delete node;
  node = temp;
} else {
  // Node to be deleted has 2 children
  // Swap the values of the node and the leftmost node in its right subtree
  Node* temp = node->right;
  while (temp->left != nullptr) {
    temp = temp->left;
  }
  node->data = temp->data;

  // Set the data of the leftmost node in the right subtree to an empty string
  temp->data = "";

  // Delete the leftmost node in the right subtree
  delete_nodes(node->right);
}
 }
}


问:
Mermaid - Styling two diagram in markdown
I'm using Hugo framework and I've setup Mermaid to create diagrams.
In a Hugo post I've two sequence diagrams. I would like to style them the same way.
However, when I style the first one, the diagram breaks and shows me only the syntax. When I style the second diagram it works well, but if I try to style the first one again, both of them breaks.

Below is my code:

first diagram

```<code>{{< mermaid align="center">}}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#512163',
      'primaryTextColor': '#fff',
    }
  }
}%%

sequenceDiagram
  Service ->> User: Enter username and password
  User ->> Service: Send credentials
{{< /mermaid >}}
</code>```

second diagram:

```<code>{{< mermaid align="center">}}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#512163',
      'primaryTextColor': '#fff',
    }
  }
}%%

sequenceDiagram
  Service ->> User: Enter username and password
  User ->> Service: Send credentials
{{< /mermaid >}}
</code>```

This is my shortcode in the Hugo themes folder:
layouts/shortcodes/mermaid.html

  1
  2 {{ $align := .Get "align" }}
  3

  4   {{ .Inner | safeHTML }}
  5

```

I've tried to see if I'm missing some tags, removing the entire script and setting it at the header level.
I'm expecting to style all my mermaid graphs the same way.

Like this:

mermaid.live

Body:
I'm using Hugo framework and I've setup Mermaid to create diagrams.
In a Hugo post I've two sequence diagrams. I would like to style them the same way.
However, when I style the first one, the diagram breaks and shows me only the syntax. When I style the second diagram it works well, but if I try to style the first one again, both of them breaks.

Below is my code:

first diagram

{{< mermaid align="center">}}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#512163',
      'primaryTextColor': '#fff',
    }
  }
}%%

sequenceDiagram
  Service ->> User: Enter username and password
  User ->> Service: Send credentials
{{< /mermaid >}}

second diagram:

{{< mermaid align="center">}}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#512163',
      'primaryTextColor': '#fff',
    }
  }
}%%

sequenceDiagram
  Service ->> User: Enter username and password
  User ->> Service: Send credentials
{{< /mermaid >}}

This is my shortcode in the Hugo themes folder:
layouts/shortcodes/mermaid.html

  1
  2 {{ $align := .Get "align" }}
  3

  4   {{ .Inner | safeHTML }}
  5

I've tried to see if I'm missing some tags, removing the entire script and setting it at the header level.
I'm expecting to style all my mermaid graphs the same way.

Like this:

mermaid.live


问:
In gstreamer-1.0, is there an environment variable that can be used to exclude specific elements by name from being resolved by the plugin registry?
I am aware of using GST_PLUGIN_PATH to list the search paths used by the plugin registry in resolving plugins. In my specific case, I want to exclude a particular element by name that happens to reside in a plugin containing other elements that I don't want to exclude. I.e., I don't want to exclude an entire plugin, just some of it's provided elements.

(Luckily, the provider of this plugin makes their source available, and I can rebuild it with some modifications to remove certain elements, but I'd rather not rebuild the plugin.)

An environment variable is preferable, but any configuration-based method could potentially help. Specifically, something that is honored by the gst-launch-1.0 and gst-inspect-1.0 cli tools.


问:
How to merge two datasets with multiple conditions - R, dplyr
help me figure out how to Merge these two date sets using R, I need to combine with the condition that the price of the car must be equal to the budget or lower from the declared budget up to 30%

```<code>UserBudget <- data.frame(user = c("Jon", "Bill", "Maria", "Ben", "Tina"),
                         budget = c(5000, 10000, 20000, 40000, 60000))

AutoMarket <- data.frame(
    car = c("Toyota Corolla (2000)", "Ford Focus (2002)", "Hyundai Elantra (2012)",
            "Kia Forte (2014)", "Mercedes-Benz c250 (2014)","BMW 320I (2016)",
            "Tesla 3 (2018)", "Audi A6 (2019)", "Porsche Macan S (2019)",
            "Mercedes-Benz c63 AMG (2017)", "Lexus RX 450L (2020)","BMW 740 (2020)","JAGUAR I-Place (2019)"),
    price = c(2500, 5000, 9900, 9999, 18500, 20000, 37000, 41000, 50000, 54000,55000,59000,60000)
)
</code>```

The ideal result looks like this:

```<code>HappyDriver <- data.frame(
  user = c("Jon", "Bill","Bill", "Maria", "Maria","Ben","Tina","Tina","Tina","Tina","Tina"),
  budget = c(5000,10000,10000,20000,20000,40000,60000,60000,60000,60000,60000),
  car = c("Ford Focus (2002)","Hyundai Elantra (2012)", "Kia Forte (2014)","Mercedes-Benz c250 (2014)","BMW 320I (2016)","Tesla 3 (2018)",
          "Porsche Macan S (2019)", "Mercedes-Benz c63 AMG (2017)", "Lexus RX 450L (2020)","BMW 740 (2020)","JAGUAR I-Place (2019)"),
  price =c(5000,9900, 9999, 18500, 20000, 37000,50000, 54000,55000,59000,60000)
)
</code>```

Body:
help me figure out how to Merge these two date sets using R, I need to combine with the condition that the price of the car must be equal to the budget or lower from the declared budget up to 30%

UserBudget <- data.frame(user = c("Jon", "Bill", "Maria", "Ben", "Tina"),
                         budget = c(5000, 10000, 20000, 40000, 60000))

AutoMarket <- data.frame(
    car = c("Toyota Corolla (2000)", "Ford Focus (2002)", "Hyundai Elantra (2012)",
            "Kia Forte (2014)", "Mercedes-Benz c250 (2014)","BMW 320I (2016)",
            "Tesla 3 (2018)", "Audi A6 (2019)", "Porsche Macan S (2019)",
            "Mercedes-Benz c63 AMG (2017)", "Lexus RX 450L (2020)","BMW 740 (2020)","JAGUAR I-Place (2019)"),
    price = c(2500, 5000, 9900, 9999, 18500, 20000, 37000, 41000, 50000, 54000,55000,59000,60000)
)

The ideal result looks like this:

HappyDriver <- data.frame(
  user = c("Jon", "Bill","Bill", "Maria", "Maria","Ben","Tina","Tina","Tina","Tina","Tina"),
  budget = c(5000,10000,10000,20000,20000,40000,60000,60000,60000,60000,60000),
  car = c("Ford Focus (2002)","Hyundai Elantra (2012)", "Kia Forte (2014)","Mercedes-Benz c250 (2014)","BMW 320I (2016)","Tesla 3 (2018)",
          "Porsche Macan S (2019)", "Mercedes-Benz c63 AMG (2017)", "Lexus RX 450L (2020)","BMW 740 (2020)","JAGUAR I-Place (2019)"),
  price =c(5000,9900, 9999, 18500, 20000, 37000,50000, 54000,55000,59000,60000)
)


问:
Changing playback speed using gstreamer
I am currently working on the gstreamer tutorials, in particular the one about playback speed adjustments. I pasted the example code into a file which I compiled with the flags pkg-config --cflags --libs gstreamer-1.0 (my gstreamer version is 1.20.5)

I tried to change the playback rates using the keys S / s, got the corresponding prints (Current rate: 0.5 etc.) but the playback speed stayed constant at 1. I thought that the failure to change the playback speed was due to the source being a remote file, so I changed the code to use local files (as command line arguments) instead:

```<code>gchar buffer[4096];

g_snprintf(buffer, 4096, "playbin uri=file://%s", argv[1]);

/* Build the pipeline */
data.pipeline = gst_parse_launch(buffer, &error);
</code>```

I also switched from the video sink to an audio sink (audio is sufficient for my cases).

I then noticed that whether or not the rate changed works is (apparently) up to the type of the file I am opening: When I open a local ogg file, the playback speed changes, when I open an mp3 instead, nothing happens.

Is this a bug in gstreamer, or do I need a more sophisticated pipeline in order to get the approach to work with different media types (local files would be sufficient for my needs)?

Edit: Complete code, sample mp3

Title: Changing playback speed using gstreamer

Body:
I am currently working on the gstreamer tutorials, in particular the one about playback speed adjustments. I pasted the example code into a file which I compiled with the flags pkg-config --cflags --libs gstreamer-1.0 (my gstreamer version is 1.20.5)

I tried to change the playback rates using the keys S / s, got the corresponding prints (Current rate: 0.5 etc.) but the playback speed stayed constant at 1. I thought that the failure to change the playback speed was due to the source being a remote file, so I changed the code to use local files (as command line arguments) instead:

gchar buffer[4096];

g_snprintf(buffer, 4096, "playbin uri=file://%s", argv[1]);

/* Build the pipeline */
data.pipeline = gst_parse_launch(buffer, &error);

I also switched from the video sink to an audio sink (audio is sufficient for my cases).

I then noticed that whether or not the rate changed works is (apparently) up to the type of the file I am opening: When I open a local ogg file, the playback speed changes, when I open an mp3 instead, nothing happens.

Is this a bug in gstreamer, or do I need a more sophisticated pipeline in order to get the approach to work with different media types (local files would be sufficient for my needs)?

Edit: Complete code, sample mp3


问:
OutputCache .Net 7 with Blazor and AuthenticationStateProvider
I am trying to cache a Blazor component using .Net 7 and AuthenticationStateProvider as my means of authorization.
I have followed the tips on this page: https://learn.microsoft.com/en-us/aspnet/core/performance/caching/output?view=aspnetcore-7.0 when it comes to registering the services and looked at this page: OutputCache attribute not working on .NET 7 API endpoint as far as creating your custom caching when using the "[Authorize]" attribute. However, in my case I am using the AuthenticationStateProvider. Therefore, I am just wondering how get that going using this method.
Here's how I had in my Program.cs:

```<code>//Cache
builder.Services.AddOutputCache(options =>
{
    options.AddBasePolicy(builder => builder.Expire(TimeSpan.FromMinutes(2)).Cache());
});

app.UseStaticFiles();
app.UseRouting();
app.UseOutputCache();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
</code>```

And here's I had applied to my partial class in the component:

```<code>    [OutputCache]
    public partial class MyClass
    {

    }
</code>```

Thanks in advance!

Body:
I am trying to cache a Blazor component using .Net 7 and AuthenticationStateProvider as my means of authorization.
I have followed the tips on this page: https://learn.microsoft.com/en-us/aspnet/core/performance/caching/output?view=aspnetcore-7.0 when it comes to registering the services and looked at this page: OutputCache attribute not working on .NET 7 API endpoint as far as creating your custom caching when using the "[Authorize]" attribute. However, in my case I am using the AuthenticationStateProvider. Therefore, I am just wondering how get that going using this method.
Here's how I had in my Program.cs:

//Cache
builder.Services.AddOutputCache(options =>
{
    options.AddBasePolicy(builder => builder.Expire(TimeSpan.FromMinutes(2)).Cache());
});

app.UseStaticFiles();
app.UseRouting();
app.UseOutputCache();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();

And here's I had applied to my partial class in the component:

    [OutputCache]
    public partial class MyClass
    {

    }

Thanks in advance!


问:
Use CXF Wsdl2Java.bat with Java 11 and beyond
I have a WebService Project running under TomEE 7, and Java 8.
I have to move it to TomEE 9 and Java 16.
The java8 wsimport command does not exist anymore in java11 and beyond, so I have to generate my Stubs from the CXF tool WSDL2Java.
The command line I use (with ant) is :

```<code>    <property name="cxf.home" location ="D:/dev/tools/apache-cxf-3.5.5" />
    <path id="cxf.classpath">
        <fileset dir="${cxf.home}/lib">
            <include name="*.jar"/>
        </fileset>
    </path>

    <target name="wsImport${ant.project.name}">
        <delete quiet="true" dir="build3" />
        <mkdir dir="build3" />
        <echo message="Produit les proxy JAX-WS ${ant.project.name} ..." />
        <java classname="org.apache.cxf.tools.wsdlto.WSDLToJava" fork="true">
            <arg value="-client"/>
            <arg value="-d"/>
            <arg value="build3"/>
            <arg value="-p"/>
            <arg value="fr.csf.${projectNameLower}.proxy"/>
            <arg value="-compile"/>
            <arg value="utilitaires\wsdl\${ant.project.name}.wsdl"/>
            <classpath>
                <path refid="cxf.classpath"/>
            </classpath>
      </java>
    </target>

</code>```

My problem is that the generated code is not JDK16 compatible: some javax pakages should be replaced by jakarta. It would be automatic if WSDL2Java used JAXB 3.0, but it seems it doesn't.
I have not found how to tell WSDL2Java to use JAXB 3.0 instead of 2.*.

I have found many posts about this subject, but the solution is always based on Maven dependencies. But I don't use Maven yet. All my scripts are based on Ant.
So I search for how to run WSDL2Java with Java 11 (and beyond) without Maven.

Body:
I have a WebService Project running under TomEE 7, and Java 8.
I have to move it to TomEE 9 and Java 16.
The java8 wsimport command does not exist anymore in java11 and beyond, so I have to generate my Stubs from the CXF tool WSDL2Java.
The command line I use (with ant) is :

    <property name="cxf.home" location ="D:/dev/tools/apache-cxf-3.5.5" />
    <path id="cxf.classpath">
        <fileset dir="${cxf.home}/lib">
            <include name="*.jar"/>
        </fileset>
    </path>

    <target name="wsImport${ant.project.name}">
        <delete quiet="true" dir="build3" />
        <mkdir dir="build3" />
        <echo message="Produit les proxy JAX-WS ${ant.project.name} ..." />
        <java classname="org.apache.cxf.tools.wsdlto.WSDLToJava" fork="true">
            <arg value="-client"/>
            <arg value="-d"/>
            <arg value="build3"/>
            <arg value="-p"/>
            <arg value="fr.csf.${projectNameLower}.proxy"/>
            <arg value="-compile"/>
            <arg value="utilitaires\wsdl\${ant.project.name}.wsdl"/>
            <classpath>
                <path refid="cxf.classpath"/>
            </classpath>
      </java>
    </target>

My problem is that the generated code is not JDK16 compatible: some javax pakages should be replaced by jakarta. It would be automatic if WSDL2Java used JAXB 3.0, but it seems it doesn't.
I have not found how to tell WSDL2Java to use JAXB 3.0 instead of 2.*.

I have found many posts about this subject, but the solution is always based on Maven dependencies. But I don't use Maven yet. All my scripts are based on Ant.
So I search for how to run WSDL2Java with Java 11 (and beyond) without Maven.


问:
How to disable button after it is clicked once in a day and reenable the button on 24 house later?
A.setEnable(false);

I want to disable the button once it is clicked for the day, then enable the button the next day in android. In other words, if the button is clicked once today, it will become disabled until tomorrow. Any ideas?


问:
Shift elements in numpy array independently according to values in another array
This is an expansion of some previous questions. I will start out with the problem description and then reference what has already been created in response to other questions.

Say you have an array of arbitrary shape and 3 dimensions or greater (e.g. (10, 20, 30)) and you would like to shift the index of the values in the last dimension. To do this, you create a 10x20 map of how each (30,) array should shift.

Here is the way I implemented this with dummy values:

```<code>import numba
import numpy as np

@numba.njit
def shift4_numba(arr, num, fill_value=np.nan):
    #print("The num is: ", num)
    if num > 0:
        return np.concatenate((np.full(num, fill_value), arr[:-num]))
    else:
        return np.concatenate((arr[-num:], np.full(-num, fill_value)))

if __name__ == "__main__":
    d = np.random.randn(10, 20, 30)

    new_idx_loc = np.random.randint(0, 10, size=(10, 20))
    nda = np.empty((10, 20, 30))

    for i in range(10):
        for j in range(20):
            a = shift4_numba(d[i, j, :], new_idx_loc[i, j])
            nda[i, j, :] = a
            #print(a, d[i, j, :])
</code>```

Here are some references to what has already been done:

The function shift4_numba in the code above is slightly altered from a response on the question here by np8. It just needed to have num = 0 in the else statement not in the if statement. I selected this function because the actual data I am working with is significantly larger than the example I created.

A similar question was asked here and here. I thought that what TomNorway and Yann Dubois posted would do what I wanted it to do but it doesn't appear to. I am not sure if I am just thinking about this differently, because I am not fully sure in what case you would use those functions. Is there some way to adapt what I have above to work with their function definitions? Is there a way to write this with better performance?

Body:
This is an expansion of some previous questions. I will start out with the problem description and then reference what has already been created in response to other questions.

Say you have an array of arbitrary shape and 3 dimensions or greater (e.g. (10, 20, 30)) and you would like to shift the index of the values in the last dimension. To do this, you create a 10x20 map of how each (30,) array should shift.

Here is the way I implemented this with dummy values:

import numba
import numpy as np

@numba.njit
def shift4_numba(arr, num, fill_value=np.nan):
    #print("The num is: ", num)
    if num > 0:
        return np.concatenate((np.full(num, fill_value), arr[:-num]))
    else:
        return np.concatenate((arr[-num:], np.full(-num, fill_value)))

if __name__ == "__main__":
    d = np.random.randn(10, 20, 30)

    new_idx_loc = np.random.randint(0, 10, size=(10, 20))
    nda = np.empty((10, 20, 30))

    for i in range(10):
        for j in range(20):
            a = shift4_numba(d[i, j, :], new_idx_loc[i, j])
            nda[i, j, :] = a
            #print(a, d[i, j, :])

Here are some references to what has already been done:

The function shift4_numba in the code above is slightly altered from a response on the question here by np8. It just needed to have num = 0 in the else statement not in the if statement. I selected this function because the actual data I am working with is significantly larger than the example I created.

A similar question was asked here and here. I thought that what TomNorway and Yann Dubois posted would do what I wanted it to do but it doesn't appear to. I am not sure if I am just thinking about this differently, because I am not fully sure in what case you would use those functions. Is there some way to adapt what I have above to work with their function definitions? Is there a way to write this with better performance?


问:
iOS application with several auto-renewable subscriptions
I'm going to create an iOS application with several monthly auto-renewable subscriptions.

Unfortunately, I don't have any experience with subscription implementation in iOS applications.

An application will contain a list of items. Every item could be, for example, an organization or foundation.
Every item has its own bank account.

In my iOS application, I would like to have the following subscription plan, for example, 1$, 3$, or 5$ per month.

This subscription plan should be shared or the same for all items.

Thus, the list of items will have the following structure of subscriptions:

```<code>item0:
        -> 1$
        -> 3$
        -> 5$
item1:
        -> 1$
        -> 3$
        -> 5$
item2:
        -> 1$
        -> 3$
        -> 5$
</code>```

And users should have the ability to support (or subscribe) to these items as they want, for example, user A could have a subscription for an item0 for 1$ and another subscription for an item2 for 5$.

I've read several articles and tutorials about auto-renewable subscriptions for iOS applications but unfortunately didn't find any information about the possibility how implementing my feature.

Is it possible to implement this for iOS? If so which tools should I use for this (in the iOS and back-end applications)?

I would appreciate any help: links, suggestions, examples, etc.

Body:
I'm going to create an iOS application with several monthly auto-renewable subscriptions.

Unfortunately, I don't have any experience with subscription implementation in iOS applications.

An application will contain a list of items. Every item could be, for example, an organization or foundation.
Every item has its own bank account.

In my iOS application, I would like to have the following subscription plan, for example, 1$, 3$, or 5$ per month.

This subscription plan should be shared or the same for all items.

Thus, the list of items will have the following structure of subscriptions:

item0:
        -> 1$
        -> 3$
        -> 5$
item1:
        -> 1$
        -> 3$
        -> 5$
item2:
        -> 1$
        -> 3$
        -> 5$

And users should have the ability to support (or subscribe) to these items as they want, for example, user A could have a subscription for an item0 for 1$ and another subscription for an item2 for 5$.

I've read several articles and tutorials about auto-renewable subscriptions for iOS applications but unfortunately didn't find any information about the possibility how implementing my feature.

Is it possible to implement this for iOS? If so which tools should I use for this (in the iOS and back-end applications)?

I would appreciate any help: links, suggestions, examples, etc.


问:
Different algorithm for same task , with same number and type of variables used but different memory usage?
```<code>class Solution1 {
  public int removeElement(int[] nums, int val) {
    int length = nums.length-1;
    for(int i=length; i>=0 ; --i){
      if(nums[i] == val){
        nums[i] = nums[length];
        --length;
      }
    }return length + 1;
  }
}
</code>```
```<code>class Solution2 {
  public int removeElement(int[] nums, int val) {
    int index = 0;
    for(int i = 0; i < nums.length; i++){
      if(nums[i] != val){
        nums[index++] = nums[i];
      }
    }
    return index;
  }
}
</code>```

/* -- both solutions perform same task (of removing all occurrences of "int val" in "int nums[]" in-place), but solution 1 uses abot 10 percent more memory than solution 2 , i am not sure why? please help */

I am not sure why is there difference in memory usage.

Body:
class Solution1 {
  public int removeElement(int[] nums, int val) {
    int length = nums.length-1;
    for(int i=length; i>=0 ; --i){
      if(nums[i] == val){
        nums[i] = nums[length];
        --length;
      }
    }return length + 1;
  }
}

class Solution2 {
  public int removeElement(int[] nums, int val) {
    int index = 0;
    for(int i = 0; i < nums.length; i++){
      if(nums[i] != val){
        nums[index++] = nums[i];
      }
    }
    return index;
  }
}

/* -- both solutions perform same task (of removing all occurrences of "int val" in "int nums[]" in-place), but solution 1 uses abot 10 percent more memory than solution 2 , i am not sure why? please help */

I am not sure why is there difference in memory usage.


问:
PIL image save causes FFMPEG to fail
I have been attempting to convert some videos using FFMPEG with image2pipe using PIL. I have found that when the frame is particularly simple (such as all one colour), it causes FFMPEG to fail with the following message:

```<code>[image2pipe @ 000001785b599bc0] Could not find codec parameters for stream 0 (Video: none, none): unknown codec
Consider increasing the value for the 'analyzeduration' and 'probesize' options
Input #0, image2pipe, from 'pipe:':
  Duration: N/A, bitrate: N/A
    Stream #0:0: Video: none, none, 24 tbr, 24 tbn, 24 tbc
Output #0, mp4, to '<YOUR FILEPATH HERE>/test.mp4':
Output file #0 does not contain any stream
</code>```

The minimum code I have found to reproduce this is as follows:

```<code>import numpy as np
from subprocess import Popen, PIPE
from PIL import Image

output_file = "<YOUR FILEPATH HERE>/test.mp4"

p = Popen(['ffmpeg',
           '-y',  # Overwrite files
           '-f', 'image2pipe',  # Input format
           '-r', '24',  # Framerate
           '-i', '-',  # stdin
           '-c:v', 'libx264',  # Codec
           '-preset', 'slow',
           '-crf', f'18',  # H264 Constant Rate Factor (quality, lower is better)
           output_file], stdin=PIPE)

# This one works
# vid = np.random.randint(0, 255, (10, 64, 64))  # Create a 64x64 'video' with 10 frames of random noise

# This one does not
vid = np.full((10, 64, 64), 129)  # Create a 64x64 'video' with 10 frames of pure grey

for frame in vid:
    im = Image.fromarray(np.uint8(frame))
    im.save(p.stdin, 'JPEG')

p.stdin.close()
p.wait()
</code>```

Notably, if I do the same thing with a randomly generated series of frames (commented as "This one works" in the script above), it will output fine.

One workaround I have found so far is to replace 'JPEG' with 'PNG' in the im.save(...) call. However, I would be interested in understanding what causes it to fail with JPEG.

Title: PIL image save causes FFMPEG to fail

Body:
I have been attempting to convert some videos using FFMPEG with image2pipe using PIL. I have found that when the frame is particularly simple (such as all one colour), it causes FFMPEG to fail with the following message:

[image2pipe @ 000001785b599bc0] Could not find codec parameters for stream 0 (Video: none, none): unknown codec
Consider increasing the value for the 'analyzeduration' and 'probesize' options
Input #0, image2pipe, from 'pipe:':
  Duration: N/A, bitrate: N/A
    Stream #0:0: Video: none, none, 24 tbr, 24 tbn, 24 tbc
Output #0, mp4, to '<YOUR FILEPATH HERE>/test.mp4':
Output file #0 does not contain any stream

The minimum code I have found to reproduce this is as follows:

import numpy as np
from subprocess import Popen, PIPE
from PIL import Image

output_file = "<YOUR FILEPATH HERE>/test.mp4"

p = Popen(['ffmpeg',
           '-y',  # Overwrite files
           '-f', 'image2pipe',  # Input format
           '-r', '24',  # Framerate
           '-i', '-',  # stdin
           '-c:v', 'libx264',  # Codec
           '-preset', 'slow',
           '-crf', f'18',  # H264 Constant Rate Factor (quality, lower is better)
           output_file], stdin=PIPE)

# This one works
# vid = np.random.randint(0, 255, (10, 64, 64))  # Create a 64x64 'video' with 10 frames of random noise

# This one does not
vid = np.full((10, 64, 64), 129)  # Create a 64x64 'video' with 10 frames of pure grey

for frame in vid:
    im = Image.fromarray(np.uint8(frame))
    im.save(p.stdin, 'JPEG')

p.stdin.close()
p.wait()

Notably, if I do the same thing with a randomly generated series of frames (commented as "This one works" in the script above), it will output fine.

One workaround I have found so far is to replace 'JPEG' with 'PNG' in the im.save(...) call. However, I would be interested in understanding what causes it to fail with JPEG.


问:
Why do I have to restart server on every style change?
I'm working on a NextJS application with PurgeCSS. I have to restart the server every single time I change the classname of a component.

Here are my postcss.config.js:

```<code>  plugins: [
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
          './src/pages/**/*.{js,jsx,ts,tsx}',
          './src/pages/*.{js,jsx,ts,tsx}',
          './src/components/**/*.{js,jsx,ts,tsx}',
          './src/containers/**/*.{js,jsx,ts,tsx}',
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ['html', 'body'],
        enableDevPurge: false,
      },
    ],
    'postcss-preset-env',
  ],
};
</code>```

My package.json dependencies:

```<code>"dependencies": {
    "date-fns": "^2.29.3",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.7.1",
    "sass": "^1.57.1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "@typescript-eslint/eslint-plugin": "5.48.0",
    "@typescript-eslint/parser": "5.48.0",
    "autoprefixer": "^10.4.13",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-next": "^0.0.0",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "lint-staged": "13.1.0",
    "next-purge-css-modules": "1.1.0",
    "postcss": "^8.4.20",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.8.3",
    "prettier": "^2.8.1",
    "typescript": "4.9.4"
  }
</code>```

I'm using global styles, not module styles, and scss instead of css.

This is my _app.tsx:

```<code>import '../styles/Global.scss';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
</code>```

Say I have these two styles:

```<code>.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
</code>```

If I had bg-blue used on a div's className, and I change it to bg-red, its ruleset is missing from the stylesheet.

I'm assuming purgecss doesn't update the stylesheet and does only one purge on server start.

It's definitely not ideal, but I don't care if I can just disable the whole purge functionality. However, can't find a way for that either.

Any tips?

Body:
I'm working on a NextJS application with PurgeCSS. I have to restart the server every single time I change the classname of a component.

Here are my postcss.config.js:

  plugins: [
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
          './src/pages/**/*.{js,jsx,ts,tsx}',
          './src/pages/*.{js,jsx,ts,tsx}',
          './src/components/**/*.{js,jsx,ts,tsx}',
          './src/containers/**/*.{js,jsx,ts,tsx}',
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ['html', 'body'],
        enableDevPurge: false,
      },
    ],
    'postcss-preset-env',
  ],
};

My package.json dependencies:

"dependencies": {
    "date-fns": "^2.29.3",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.7.1",
    "sass": "^1.57.1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "@typescript-eslint/eslint-plugin": "5.48.0",
    "@typescript-eslint/parser": "5.48.0",
    "autoprefixer": "^10.4.13",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-next": "^0.0.0",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "lint-staged": "13.1.0",
    "next-purge-css-modules": "1.1.0",
    "postcss": "^8.4.20",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.8.3",
    "prettier": "^2.8.1",
    "typescript": "4.9.4"
  }

I'm using global styles, not module styles, and scss instead of css.

This is my _app.tsx:

import '../styles/Global.scss';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Say I have these two styles:

.bg-blue { background-color: blue; }
.bg-red { background-color: red; }

If I had bg-blue used on a div's className, and I change it to bg-red, its ruleset is missing from the stylesheet.

I'm assuming purgecss doesn't update the stylesheet and does only one purge on server start.

It's definitely not ideal, but I don't care if I can just disable the whole purge functionality. However, can't find a way for that either.

Any tips?