问:
npm Bootsrap starting project for newbie
I learned about Sass and Bootstrap, and now want to put it all together in a project using npm, but I’m completely lost.

Here’s what I’ve done so far:

$ npm init
// following the intructions//
$ npm install typescript
$ npm install bootstrap@5.3.0-alpha1
$ npm install sass
```
<p>I ended up with the following <code>package.json</code>:</p>
<pre class="lang-json prettyprint-override"><code>{
  "dependencies": {
    "bootstrap": "^5.3.0-alpha1",
    "sass": "^1.57.1",
    "typescript": "^4.9.4"
  },
  "name": "mytmpvpn-frontend",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
</code>```

That’s the package-lock.json

{
  "name": "mytmpvpn-frontend",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "mytmpvpn-frontend",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "bootstrap": "^5.3.0-alpha1",
        "sass": "^1.57.1",
        "typescript": "^4.9.4"
      },
      "devDependencies": {}
    },
    "node_modules/@popperjs/core": {
      "version": "2.11.6",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
      }
    },
    "node_modules/anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
      },
      "engines": {
        "node": ">= 8"
      }
    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/bootstrap": {
      "version": "5.3.0-alpha1",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/twbs"
        },
        {
          "type": "opencollective",
          "url": "https://opencollective.com/bootstrap"
        }
      ],
      "peerDependencies": {
        "@popperjs/core": "^2.11.6"
      }
    },
    "node_modules/braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "dependencies": {
        "fill-range": "^7.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "funding": [
        {
          "type": "individual",
          "url": "https://paulmillr.com/funding/"
        }
      ],
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
        "glob-parent": "~5.1.2",
        "is-binary-path": "~2.1.0",
        "is-glob": "~4.0.1",
        "normalize-path": "~3.0.0",
        "readdirp": "~3.6.0"
      },
      "engines": {
        "node": ">= 8.10.0"
      },
      "optionalDependencies": {
        "fsevents": "~2.3.2"
      }
    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
      "hasInstallScript": true,
      "optional": true,
      "os": [
        "darwin"
      ],
      "engines": {
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "dependencies": {
        "is-glob": "^4.0.1"
      },
      "engines": {
        "node": ">= 6"
      }
    },
    "node_modules/immutable": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "engines": {
        "node": ">=0.12.0"
      }
    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
      "engines": {
        "node": ">=8.6"
      },
      "funding": {
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dependencies": {
        "picomatch": "^2.2.1"
      },
      "engines": {
        "node": ">=8.10.0"
      }
    },
    "node_modules/sass": {
      "version": "1.57.1",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      },
      "bin": {
        "sass": "sass.js"
      },
      "engines": {
        "node": ">=12.0.0"
      }
    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "dependencies": {
        "is-number": "^7.0.0"
      },
      "engines": {
        "node": ">=8.0"
      }
    },
    "node_modules/typescript": {
      "version": "4.9.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
      },
      "engines": {
        "node": ">=4.2.0"
      }
    }
  },
  "dependencies": {
    "@popperjs/core": {
      "version": "2.11.6",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "peer": true
    },
    "anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
      }
    },
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
    },
    "bootstrap": {
      "version": "5.3.0-alpha1",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "requires": {}
    },
    "braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "requires": {
        "fill-range": "^7.0.1"
      }
    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
        "fsevents": "~2.3.2",
        "glob-parent": "~5.1.2",
        "is-binary-path": "~2.1.0",
        "is-glob": "~4.0.1",
        "normalize-path": "~3.0.0",
        "readdirp": "~3.6.0"
      }
    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "requires": {
        "to-regex-range": "^5.0.1"
      }
    },
    "fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
      "optional": true
    },
    "glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "requires": {
        "is-glob": "^4.0.1"
      }
    },
    "immutable": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
    },
    "is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "requires": {
        "binary-extensions": "^2.0.0"
      }
    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
    },
    "is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "requires": {
        "is-extglob": "^2.1.1"
      }
    },
    "is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
    },
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
    },
    "picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "requires": {
        "picomatch": "^2.2.1"
      }
    },
    "sass": {
      "version": "1.57.1",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "requires": {
        "is-number": "^7.0.0"
      }
    },
    "typescript": {
      "version": "4.9.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
    }
  }
}
```
<p>That’s the structure of my project folder:</p>
<pre class="lang-bash prettyprint-override"><code>$ npm ll
mytmpvpn-frontend@1.0.0
│ /home/user/local/dev/mytmpvpn-global/mytmpvpn-frontend
│
├── bootstrap@5.3.0-alpha1
│
├── sass@1.57.1
│
└── typescript@4.9.4
</code>```

My questions are the following:

Where do I start editing my custom.scss file for customizing Boostrap?

How can I make sure that Sass is "wathcing" my custom.scss file and compiling in the correct .css file?

More generally, what’s the best practice in terms of architecture for a front-end project like that? Do I create a folder my-edits for example and then do other folders for html, scss, ts, etc.

Body:
I learned about Sass and Bootstrap, and now want to put it all together in a project using npm, but I’m completely lost.

Here’s what I’ve done so far:

$ npm init
// following the intructions//
$ npm install typescript
$ npm install bootstrap@5.3.0-alpha1
$ npm install sass

I ended up with the following package.json:

{
  "dependencies": {
    "bootstrap": "^5.3.0-alpha1",
    "sass": "^1.57.1",
    "typescript": "^4.9.4"
  },
  "name": "mytmpvpn-frontend",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

That’s the package-lock.json

{
  "name": "mytmpvpn-frontend",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "mytmpvpn-frontend",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "bootstrap": "^5.3.0-alpha1",
        "sass": "^1.57.1",
        "typescript": "^4.9.4"
      },
      "devDependencies": {}
    },
    "node_modules/@popperjs/core": {
      "version": "2.11.6",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
      }
    },
    "node_modules/anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
      },
      "engines": {
        "node": ">= 8"
      }
    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/bootstrap": {
      "version": "5.3.0-alpha1",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/twbs"
        },
        {
          "type": "opencollective",
          "url": "https://opencollective.com/bootstrap"
        }
      ],
      "peerDependencies": {
        "@popperjs/core": "^2.11.6"
      }
    },
    "node_modules/braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "dependencies": {
        "fill-range": "^7.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "funding": [
        {
          "type": "individual",
          "url": "https://paulmillr.com/funding/"
        }
      ],
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
        "glob-parent": "~5.1.2",
        "is-binary-path": "~2.1.0",
        "is-glob": "~4.0.1",
        "normalize-path": "~3.0.0",
        "readdirp": "~3.6.0"
      },
      "engines": {
        "node": ">= 8.10.0"
      },
      "optionalDependencies": {
        "fsevents": "~2.3.2"
      }
    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
      "hasInstallScript": true,
      "optional": true,
      "os": [
        "darwin"
      ],
      "engines": {
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "dependencies": {
        "is-glob": "^4.0.1"
      },
      "engines": {
        "node": ">= 6"
      }
    },
    "node_modules/immutable": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "engines": {
        "node": ">=0.12.0"
      }
    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
      "engines": {
        "node": ">=8.6"
      },
      "funding": {
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dependencies": {
        "picomatch": "^2.2.1"
      },
      "engines": {
        "node": ">=8.10.0"
      }
    },
    "node_modules/sass": {
      "version": "1.57.1",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      },
      "bin": {
        "sass": "sass.js"
      },
      "engines": {
        "node": ">=12.0.0"
      }
    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "dependencies": {
        "is-number": "^7.0.0"
      },
      "engines": {
        "node": ">=8.0"
      }
    },
    "node_modules/typescript": {
      "version": "4.9.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
      },
      "engines": {
        "node": ">=4.2.0"
      }
    }
  },
  "dependencies": {
    "@popperjs/core": {
      "version": "2.11.6",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "peer": true
    },
    "anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
      }
    },
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
    },
    "bootstrap": {
      "version": "5.3.0-alpha1",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "requires": {}
    },
    "braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "requires": {
        "fill-range": "^7.0.1"
      }
    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
        "fsevents": "~2.3.2",
        "glob-parent": "~5.1.2",
        "is-binary-path": "~2.1.0",
        "is-glob": "~4.0.1",
        "normalize-path": "~3.0.0",
        "readdirp": "~3.6.0"
      }
    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "requires": {
        "to-regex-range": "^5.0.1"
      }
    },
    "fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
      "optional": true
    },
    "glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "requires": {
        "is-glob": "^4.0.1"
      }
    },
    "immutable": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
    },
    "is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "requires": {
        "binary-extensions": "^2.0.0"
      }
    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
    },
    "is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "requires": {
        "is-extglob": "^2.1.1"
      }
    },
    "is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
    },
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
    },
    "picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "requires": {
        "picomatch": "^2.2.1"
      }
    },
    "sass": {
      "version": "1.57.1",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "requires": {
        "is-number": "^7.0.0"
      }
    },
    "typescript": {
      "version": "4.9.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
    }
  }
}

That’s the structure of my project folder:

$ npm ll
mytmpvpn-frontend@1.0.0
│ /home/user/local/dev/mytmpvpn-global/mytmpvpn-frontend
│
├── bootstrap@5.3.0-alpha1
│
├── sass@1.57.1
│
└── typescript@4.9.4

My questions are the following:

Where do I start editing my custom.scss file for customizing Boostrap?

How can I make sure that Sass is "wathcing" my custom.scss file and compiling in the correct .css file?

More generally, what’s the best practice in terms of architecture for a front-end project like that? Do I create a folder my-edits for example and then do other folders for html, scss, ts, etc.


来源: stackexchange

问:
ROC and AUC for Machine learning models without threshold
The thing I don't really understand is.. Why is it not possible/does it not make sense to use ROC and AUC for non-probabilistic machine learning models (or is this assumption wrong, although I have read this on several sites)?

Because.. I would say, suppose I use KNN (where there is no threshold), then, based on the number of K, you can train the model (although KNN doesn't really have a model, as it is instance-based), but still, for example: K = 1 --> 3 TP and 5 FP , K = 2 --> 4 TP and 4 FP and so on. So on this basis you could create a ROC curve, I would say..? is this also true for other machine learning models: for decision trees you could try a different number of nodes and so on, for support vector machines you could reposition the hyperplane, and in all these cases you could collect the FP/TP/TN/FN and process them into ROC curves, which would allow you to compare several ML models.

I use a binary classification, multiple supervised machine learning models (with only two classes), but I'm not sure if ROC and AUC are still applicable in such a case?

ContentLicense: CC BY-SA 4.0


问:
How to Combine Excel files that contain valid tables and Remap column Names - Power Query Function
I’m making a Power Query (M Code) that combines all Sheets in Workbooks stored in a folder. The logic is the following

Read folder content

Form a list of Workbooks(Sheets) within

Invoke a Function to “Format” content of each Sheet to append the records in a consolidated table

The invoked Function on every Sheet should:

Identify where the “Titles" Row is located

Remove “n” records until “Titles" Row

Remap “Titles" to a standard Name from HeaderMap table

Reorder the columns according to HeaderMap table

Promote the “Titles” Row to Columns Headers

Change column types according to HeaderMap table

Remove “Blank” records

The caveat is that I may encounter Sheets that have no useful information. I need to peek inside the Sheet to verify if valid content and then execute the function to format. How can I Skip the Sheet when consolidating all tables? Something like

Identify indexed row where the “Titles” are located

If (no valid “Titles” found) then Skip Sheet

else (continue with remaining steps)

Thank you in advance


问:
Redux-toolkit useMutation hook isUninitialized:true
I am developing an application but I have an proble. When I click on the submit button of the form in react js I send the post request through useMutation hook in redux-toolkit in the response the useMutation hook return the following response

```<code>{status: 'uninitialized', isUninitialized: true, isLoading: false, isSuccess: false, isError: false, …}
isError: false
isLoading: false
isSuccess: false
isUninitialized: true
originalArgs: undefined
reset: ƒ ()
status: "uninitialized"
[[Prototype]]: Object
</code>```

Here in response the isuninitilize is true and the isError and the isSuccess is false why its happning?

Body:
I am developing an application but I have an proble. When I click on the submit button of the form in react js I send the post request through useMutation hook in redux-toolkit in the response the useMutation hook return the following response

{status: 'uninitialized', isUninitialized: true, isLoading: false, isSuccess: false, isError: false, …}
isError: false
isLoading: false
isSuccess: false
isUninitialized: true
originalArgs: undefined
reset: ƒ ()
status: "uninitialized"
[[Prototype]]: Object

Here in response the isuninitilize is true and the isError and the isSuccess is false why its happning?


问:
"RuntimeError: Expected target size" error for the nn.CrossEntropyLoss() function
I am trying to train a GPT-2 model to take in a tokenized/padded input and predict the output. My batch size is 32. My max length is 343. I believe that the 768 comes from the model. I cannot get the loss function to work properly though. The training loop keeps throwing me errors like this:
RuntimeError: Expected target size [32, 768], got [32, 343]

# Create a TensorDataset from input_ids and output_ids
dataset = TensorDataset(input_tensors, output_tensors)

#Constants
batch_size = 32
num_epochs = 20
# Create a DataLoader from the dataset
dataloader = DataLoader(dataset, batch_size=batch_size, shuffle=True)

# Set the device to run on
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")

# Define the model architecture
model = transformers.GPT2Model.from_pretrained('gpt2').to(device)

# Define the loss function
loss_function = nn.CrossEntropyLoss(ignore_index=0, reduction='mean')

# Define the optimizer
optimizer = torch.optim.Adam(model.parameters(), lr=0.001)

# Set the model to training mode
model.train()
print(f"input_tensors.shape before the loop: {input_tensors.shape}")
print(f"output_tensors.shape before the loop: {output_tensors.shape}")

# Loop over the number of epochs
for epoch in range(num_epochs):
    # Initialize the epoch loss
    epoch_loss = 0

    # Loop over the data in the dataloader
    for input_tensors, output_tensors in dataloader:
        # Send the input and target tensors to the device
        input_tensors = input_tensors.to(device)
        output_tensors = output_tensors.type(torch.LongTensor)
        output_tensors = output_tensors.to(device)
        # Zero gradients
        optimizer.zero_grad()

        # Begin Forward pass
        logits = model(input_tensors)[0]

        print(f"logits.shape: {logits.shape}")
        print(f"input_tensors.shape: {input_tensors.shape}")
        print(f"output_tensors.shape: {output_tensors.shape}")

        # Compute the loss
        loss = loss_function(logits, output_tensors)

        # Backward pass
        loss.backward()

        # Update the model parameters
        optimizer.step()

        # Add the loss to the epoch loss
        epoch_loss += loss.item()
        # Print the epoch loss
    print(f'Epoch {epoch+1}: Loss = {epoch_loss}')
```

And the sizes of the tensors:

input_tensors.shape == torch.Size([2625, 343]) before the loop

output_tensors.shape == torch.Size([2625, 343]) before the loop

logits.shape == torch.Size([32, 343, 768])

input_tensors.shape == torch.Size([32, 343])

output_tensors.shape == torch.Size([32, 343])

I have tried squeezing/unsqueezing and changing the shape of the logits/output_tensors shape. I think that's the right next step but I can't figure out what to change exactly.

Body:
I am trying to train a GPT-2 model to take in a tokenized/padded input and predict the output. My batch size is 32. My max length is 343. I believe that the 768 comes from the model. I cannot get the loss function to work properly though. The training loop keeps throwing me errors like this:
RuntimeError: Expected target size [32, 768], got [32, 343]

# Create a TensorDataset from input_ids and output_ids
dataset = TensorDataset(input_tensors, output_tensors)

#Constants
batch_size = 32
num_epochs = 20
# Create a DataLoader from the dataset
dataloader = DataLoader(dataset, batch_size=batch_size, shuffle=True)

# Set the device to run on
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")

# Define the model architecture
model = transformers.GPT2Model.from_pretrained('gpt2').to(device)

# Define the loss function
loss_function = nn.CrossEntropyLoss(ignore_index=0, reduction='mean')

# Define the optimizer
optimizer = torch.optim.Adam(model.parameters(), lr=0.001)

# Set the model to training mode
model.train()
print(f"input_tensors.shape before the loop: {input_tensors.shape}")
print(f"output_tensors.shape before the loop: {output_tensors.shape}")

# Loop over the number of epochs
for epoch in range(num_epochs):
    # Initialize the epoch loss
    epoch_loss = 0

    # Loop over the data in the dataloader
    for input_tensors, output_tensors in dataloader:
        # Send the input and target tensors to the device
        input_tensors = input_tensors.to(device)
        output_tensors = output_tensors.type(torch.LongTensor)
        output_tensors = output_tensors.to(device)
        # Zero gradients
        optimizer.zero_grad()

        # Begin Forward pass
        logits = model(input_tensors)[0]

        print(f"logits.shape: {logits.shape}")
        print(f"input_tensors.shape: {input_tensors.shape}")
        print(f"output_tensors.shape: {output_tensors.shape}")

        # Compute the loss
        loss = loss_function(logits, output_tensors)

        # Backward pass
        loss.backward()

        # Update the model parameters
        optimizer.step()

        # Add the loss to the epoch loss
        epoch_loss += loss.item()
        # Print the epoch loss
    print(f'Epoch {epoch+1}: Loss = {epoch_loss}')

And the sizes of the tensors:

input_tensors.shape == torch.Size([2625, 343]) before the loop

output_tensors.shape == torch.Size([2625, 343]) before the loop

logits.shape == torch.Size([32, 343, 768])

input_tensors.shape == torch.Size([32, 343])

output_tensors.shape == torch.Size([32, 343])

I have tried squeezing/unsqueezing and changing the shape of the logits/output_tensors shape. I think that's the right next step but I can't figure out what to change exactly.


问:
Pulsar MongoDB Debezium source connection to Mongo Atlas not working
I set up a pulsar container with docker compose, and a Mongo DB Debezium source container configuration file. I am attempting to connect to  MongoDb Cluster on Atlas without success. Your help is needed.

Below is the Pulsar Docker compose

```<code>version: '3.9'

services:

  pulsar-server:
    command: bin/pulsar standalone
    build:
      context: ./pulsar/
    container_name: pulsar-server
    hostname: pulsar-server
    volumes:
      # (!) CA certificate in the '.pem' format.
      - "./certs/elasticsearch-ca.pem:/pulsar/certs/elasticsearch-ca.pem"
      - "./certs/ca/truststore.jks:/pulsar/certs/ca/truststore.jks"
      - "./certs/ca/keystore.jks:/pulsar/certs/ca/keystore.jks"
      # Copy Debezium - Pulsar Source Connector Files
      - "./util/mongodb-source-config.yaml:/pulsar/connectors/mongodb-source-config.yaml"
      - "./target/pulsar-io-mongodb-source-2.10.1.nar:/pulsar/connectors/pulsar-io-mongodb-source-2.10.1.nar"
      # Copy Pulsar - Elasticsearch Sink Connector files
      - "./util/elasticsearch-sink.yml:/pulsar/connectors/elasticsearch-sink.yml"
      - "./target/pulsar-io-elk-sink-2.10.1.nar:/pulsar/connectors/pulsar-io-elk-sink-2.10.1.nar"
      # Pulsar TLS and JKS trustore files
      - "./certs/mongodb-atlas.pem:/pulsar/certs/tls/mongodb-atlas.pem"
      - "./certs/isrgrootx1.pem:/pulsar/certs/isrgrootx1.pem"
      - "./certs/bundle.p12:/pulsar/certs/bundle.p12"
      - "./certs/certs/ca.cert.pem:/pulsar/certs/ca.cert.pem"
      - "./certs/broker.cert.pem:/pulsar/certs/broker.cert.pem"
      - "./certs/broker.csr.pem:/pulsar/certs/broker.csr.pem"
      - "./certs/broker.key.pem:/pulsar/certs/broker.key.pem"
      - "./certs/broker.key-pk8.pem:/pulsar/certs/broker.key-pk8.pem"
      - "./certs/pulsar-admin.cert.pem:/pulsar/certs/pulsar-admin.cert.pem"
      - "./certs/pulsar-admin.csr.pem:/pulsar/certs/pulsar-admin.csr.pem"
      - "./certs/pulsar-admin.key.pem:/pulsar/certs/pulsar-admin.key.pem"
      - "./certs/pulsar-admin.key-pk8.pem:/pulsar/certs/pulsar-admin.key-pk8.pem"
      - "./certs/client.truststore.jks:/pulsar/certs/client.truststore.jks"
      - "./certs/client.keystore.jks:/pulsar/certs/client.keystore.jks"
      - "./certs/broker.truststore.jks:/pulsar/certs/broker.truststore.jks"
      - "./certs/broker.keystore.jks:/pulsar/certs/broker.keystore.jks"
      #Configuration files
      - "./conf/websocket.conf:/pulsar/conf/websocket.conf"
      - "./conf/proxy.conf:/pulsar/conf/proxy.conf"
      - "./conf/broker.conf:/pulsar/conf/broker.conf"
      - "./conf/client.conf:/pulsar/conf/client.conf"
    expose:
      - 8080
      - 8081
      - 8443
      - 6650
      - 6651
    ports:
    - 8080:8080
    - 8081:8081
    - 8443:8443
    - 6650:6650
    - 6651:6651
    networks:
    - custom-sink-connector
    cap_add:
    - NET_ADMIN
    - NET_RAW
    - SYS_ADMIN
    privileged: true
    # command: >
    #   /bin/bash -c
    #   'bin/pulsar standalone'
    environment:
      - tlsEnabled=true
    healthcheck:
      interval: 10s
      retries: 20
      test: curl --write-out 'HTTP %{http_code}' --fail --silent --output /dev/null http://localhost:8080/admin/v2/clusters/standalone

volumes:
  pulsar-io-data:
    driver: local

networks:
  custom-sink-connector:
    driver: bridgeversion: '3.9'

</code>```

Here is the MongoDB Debezium configuration file to connect to MongoDB Atlas Cluster :

```<code>tenant: "public"
namespace: "default"
name: "debezium-mongodb-source"
topicName: "debezium-mongodb-topic"
archive: "connectors/pulsar-io-mongodb-source-2.10.1.nar"
parallelism: 1
use-tls: false

configs:
    # config for pg, docker image: debezium/example-mongodb:latest
    #mongodb.hosts: "atlas-vdt3wg-shard-0/ramses-shard-00-00.gcd45.mongodb.net:27017,ramses-shard-00-01.gcd22.mongodb.net:27017,ramses-shard-00-02.gcd45.mongodb.net:27017"
    #mongodb.hosts: "atlas-vdt3wg-shard-0/ramses-shard-00-01.gcd45.mongodb.net:27017"
    mongodb.name: "dbserver3"
    mongodb.connection.string: "mongodb+srv://pulsaradmin:45896633@ramses.gcd22.mongodb.net/?tls=true&serverSelectionTimeoutMS=60000&retryWrites=true&w=majority"
    # Remember to comment the user and password if the user/password authentication is not enabled for your MongoDB server
    mongodb.members.auto.discover: false
    mongodb.ssl.enabled: false
    mongodb.authsource: "admin"
    mongodb.user: "pulsaradmin"
    mongodb.password: " 45896633  "
    mongodb.task.id: "1"
    database.whitelist: "ramses"
    # PULSAR_SERVICE_URL_CONFIG
    #pulsar.service.url: "pulsar://127.0.0.1:6650"
    pulsar.service.url: "pulsar+ssl://127.0.0.1:6651"
    offset.storage.topic: "offset-topic"

</code>```

Below is the command that I use to  start Pulsar Mongo DB Debezium connection to MongoDB Atlas :

```<code>export PULSAR_HOME=/workspaces/pulsar-elk-sink
export PATH=${PATH}:$PULSAR_HOME/bin
export PULSAR_CLASSPATH=${PULSAR_HOME}/lib/jars/*:${PULSAR_HOME}/target/classes

#Start MongoDb - Pulsar Source Connector
$PULSAR_HOME/bin/pulsar-admin  source localrun --archive ${PWD}/../connectors/pulsar-io-debezium-mongodb-2.10.1.nar  --source-config-file ${PWD}/../util/mongodb-source-config.yaml  --tls-trust-cert-path ${PWD}/../certs/certs/ca.cert.pem  --use-tls --parallelism 1  --broker-service-url "pulsar+ssl://localhost:6651/"
</code>```

Here is the error message I get after launching the connection script:

```<code>d4672ef, L:/127.0.0.1:38370 ! R:localhost/127.0.0.1:6650] Disconnected
2022-12-29T15:16:15,345+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xdd4672ef, L:/127.0.0.1:38370 ! R:localhost/127.0.0.1:6650]] Connection handshake failed: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
2022-12-29T15:16:43,679+0000 [function-timer-thread-9-1] ERROR org.apache.pulsar.functions.runtime.RuntimeSpawner - public/default/debezium-mongodb-source Function Container is dead with following exception. Restarting.
java.util.concurrent.CompletionException: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
        at java.util.concurrent.CompletableFuture.encodeThrowable(CompletableFuture.java:292) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeThrowable(CompletableFuture.java:308) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.uniRun(CompletableFuture.java:714) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture$UniRun.tryFire(CompletableFuture.java:701) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.postComplete(CompletableFuture.java:488) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeExceptionally(CompletableFuture.java:1990) ~[?:1.8.0_345]
        at org.apache.pulsar.client.impl.ClientCnx.channelInactive(ClientCnx.java:267) ~[pulsar-client-original-2.10.1.jar:2.10.1]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.fireChannelInactive(AbstractChannelHandlerContext.java:241) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.handler.codec.ByteToMessageDecoder.channelInputClosed(ByteToMessageDecoder.java:392) ~[netty-codec-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.handler.codec.ByteToMessageDecoder.channelInactive(ByteToMessageDecoder.java:357) ~[netty-codec-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]

</code>```

I also tried another option on  https with the service url on port 6651, and I get the error below:

```<code>2022-12-29T15:30:19,126+0000 [main] INFO  org.apache.pulsar.functions.runtime.thread.ThreadRuntime - ThreadContainer starting function with instanceId 0 functionId 90dc9a02-6776-4ea9-a91d-f2cec73bce6a namespace default
2022-12-29T15:30:20,512+0000 [pulsar-client-io-1-2] INFO  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xd457af27, L:/127.0.0.1:48866 - R:localhost/127.0.0.1:6651]] Connected to server
2022-12-29T15:30:20,590+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ClientCnx - Error during handshake
java.nio.channels.ClosedChannelException: null
        at io.netty.handler.ssl.SslHandler.channelInactive(SslHandler.java:1076) ~[netty-handler-4.1.48.Final.jar:4.1.48.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.fireChannelInactive(AbstractChannelHandlerContext.java:241) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.DefaultChannelPipeline$HeadContext.channelInactive(DefaultChannelPipeline.java:1405) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.DefaultChannelPipeline.fireChannelInactive(DefaultChannelPipeline.java:901) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannel$AbstractUnsafe$7.run(AbstractChannel.java:813) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.AbstractEventExecutor.runTask(AbstractEventExecutor.java:174) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:167) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:470) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.epoll.EpollEventLoop.run(EpollEventLoop.java:384) ~[netty-transport-native-epoll-4.1.48.Final-linux-x86_64.jar:4.1.48.Final]
        at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:995) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at java.lang.Thread.run(Thread.java:750) ~[?:1.8.0_345]
2022-12-29T15:30:20,663+0000 [pulsar-client-io-1-2] INFO  org.apache.pulsar.client.impl.ClientCnx - [id: 0xd457af27, L:/127.0.0.1:48866 ! R:localhost/127.0.0.1:6651] Disconnected
2022-12-29T15:30:20,691+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xd457af27, L:/127.0.0.1:48866 ! R:localhost/127.0.0.1:6651]] Connection handshake failed: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
2022-12-29T15:30:49,134+0000 [function-timer-thread-9-1] ERROR org.apache.pulsar.functions.runtime.RuntimeSpawner - public/default/debezium-mongodb-source Function Container is dead with following exception. Restarting.
java.util.concurrent.CompletionException: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
        at java.util.concurrent.CompletableFuture.encodeThrowable(CompletableFuture.java:292) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeThrowable(CompletableFuture.java:308) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.uniRun(CompletableFuture.java:714) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture$UniRun.tryFire(CompletableFuture.java:701) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.postComplete(CompletableFuture.java:488) ~[?:1.8.0_345]
</code>```

I configured Pulsar MongoDB Debezium as per the documentation and I contacted both Pulsar and the Debezium communities. So far, no satisfactory answer was provided.

Body:
I set up a pulsar container with docker compose, and a Mongo DB Debezium source container configuration file. I am attempting to connect to  MongoDb Cluster on Atlas without success. Your help is needed.

Below is the Pulsar Docker compose

version: '3.9'

services:

  pulsar-server:
    command: bin/pulsar standalone
    build:
      context: ./pulsar/
    container_name: pulsar-server
    hostname: pulsar-server
    volumes:
      # (!) CA certificate in the '.pem' format.
      - "./certs/elasticsearch-ca.pem:/pulsar/certs/elasticsearch-ca.pem"
      - "./certs/ca/truststore.jks:/pulsar/certs/ca/truststore.jks"
      - "./certs/ca/keystore.jks:/pulsar/certs/ca/keystore.jks"
      # Copy Debezium - Pulsar Source Connector Files
      - "./util/mongodb-source-config.yaml:/pulsar/connectors/mongodb-source-config.yaml"
      - "./target/pulsar-io-mongodb-source-2.10.1.nar:/pulsar/connectors/pulsar-io-mongodb-source-2.10.1.nar"
      # Copy Pulsar - Elasticsearch Sink Connector files
      - "./util/elasticsearch-sink.yml:/pulsar/connectors/elasticsearch-sink.yml"
      - "./target/pulsar-io-elk-sink-2.10.1.nar:/pulsar/connectors/pulsar-io-elk-sink-2.10.1.nar"
      # Pulsar TLS and JKS trustore files
      - "./certs/mongodb-atlas.pem:/pulsar/certs/tls/mongodb-atlas.pem"
      - "./certs/isrgrootx1.pem:/pulsar/certs/isrgrootx1.pem"
      - "./certs/bundle.p12:/pulsar/certs/bundle.p12"
      - "./certs/certs/ca.cert.pem:/pulsar/certs/ca.cert.pem"
      - "./certs/broker.cert.pem:/pulsar/certs/broker.cert.pem"
      - "./certs/broker.csr.pem:/pulsar/certs/broker.csr.pem"
      - "./certs/broker.key.pem:/pulsar/certs/broker.key.pem"
      - "./certs/broker.key-pk8.pem:/pulsar/certs/broker.key-pk8.pem"
      - "./certs/pulsar-admin.cert.pem:/pulsar/certs/pulsar-admin.cert.pem"
      - "./certs/pulsar-admin.csr.pem:/pulsar/certs/pulsar-admin.csr.pem"
      - "./certs/pulsar-admin.key.pem:/pulsar/certs/pulsar-admin.key.pem"
      - "./certs/pulsar-admin.key-pk8.pem:/pulsar/certs/pulsar-admin.key-pk8.pem"
      - "./certs/client.truststore.jks:/pulsar/certs/client.truststore.jks"
      - "./certs/client.keystore.jks:/pulsar/certs/client.keystore.jks"
      - "./certs/broker.truststore.jks:/pulsar/certs/broker.truststore.jks"
      - "./certs/broker.keystore.jks:/pulsar/certs/broker.keystore.jks"
      #Configuration files
      - "./conf/websocket.conf:/pulsar/conf/websocket.conf"
      - "./conf/proxy.conf:/pulsar/conf/proxy.conf"
      - "./conf/broker.conf:/pulsar/conf/broker.conf"
      - "./conf/client.conf:/pulsar/conf/client.conf"
    expose:
      - 8080
      - 8081
      - 8443
      - 6650
      - 6651
    ports:
    - 8080:8080
    - 8081:8081
    - 8443:8443
    - 6650:6650
    - 6651:6651
    networks:
    - custom-sink-connector
    cap_add:
    - NET_ADMIN
    - NET_RAW
    - SYS_ADMIN
    privileged: true
    # command: >
    #   /bin/bash -c
    #   'bin/pulsar standalone'
    environment:
      - tlsEnabled=true
    healthcheck:
      interval: 10s
      retries: 20
      test: curl --write-out 'HTTP %{http_code}' --fail --silent --output /dev/null http://localhost:8080/admin/v2/clusters/standalone

volumes:
  pulsar-io-data:
    driver: local

networks:
  custom-sink-connector:
    driver: bridgeversion: '3.9'

Here is the MongoDB Debezium configuration file to connect to MongoDB Atlas Cluster :

tenant: "public"
namespace: "default"
name: "debezium-mongodb-source"
topicName: "debezium-mongodb-topic"
archive: "connectors/pulsar-io-mongodb-source-2.10.1.nar"
parallelism: 1
use-tls: false

configs:
    # config for pg, docker image: debezium/example-mongodb:latest
    #mongodb.hosts: "atlas-vdt3wg-shard-0/ramses-shard-00-00.gcd45.mongodb.net:27017,ramses-shard-00-01.gcd22.mongodb.net:27017,ramses-shard-00-02.gcd45.mongodb.net:27017"
    #mongodb.hosts: "atlas-vdt3wg-shard-0/ramses-shard-00-01.gcd45.mongodb.net:27017"
    mongodb.name: "dbserver3"
    mongodb.connection.string: "mongodb+srv://pulsaradmin:45896633@ramses.gcd22.mongodb.net/?tls=true&serverSelectionTimeoutMS=60000&retryWrites=true&w=majority"
    # Remember to comment the user and password if the user/password authentication is not enabled for your MongoDB server
    mongodb.members.auto.discover: false
    mongodb.ssl.enabled: false
    mongodb.authsource: "admin"
    mongodb.user: "pulsaradmin"
    mongodb.password: " 45896633  "
    mongodb.task.id: "1"
    database.whitelist: "ramses"
    # PULSAR_SERVICE_URL_CONFIG
    #pulsar.service.url: "pulsar://127.0.0.1:6650"
    pulsar.service.url: "pulsar+ssl://127.0.0.1:6651"
    offset.storage.topic: "offset-topic"

Below is the command that I use to  start Pulsar Mongo DB Debezium connection to MongoDB Atlas :

export PULSAR_HOME=/workspaces/pulsar-elk-sink
export PATH=${PATH}:$PULSAR_HOME/bin
export PULSAR_CLASSPATH=${PULSAR_HOME}/lib/jars/*:${PULSAR_HOME}/target/classes

#Start MongoDb - Pulsar Source Connector
$PULSAR_HOME/bin/pulsar-admin  source localrun --archive ${PWD}/../connectors/pulsar-io-debezium-mongodb-2.10.1.nar  --source-config-file ${PWD}/../util/mongodb-source-config.yaml  --tls-trust-cert-path ${PWD}/../certs/certs/ca.cert.pem  --use-tls --parallelism 1  --broker-service-url "pulsar+ssl://localhost:6651/"

Here is the error message I get after launching the connection script:

d4672ef, L:/127.0.0.1:38370 ! R:localhost/127.0.0.1:6650] Disconnected
2022-12-29T15:16:15,345+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xdd4672ef, L:/127.0.0.1:38370 ! R:localhost/127.0.0.1:6650]] Connection handshake failed: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
2022-12-29T15:16:43,679+0000 [function-timer-thread-9-1] ERROR org.apache.pulsar.functions.runtime.RuntimeSpawner - public/default/debezium-mongodb-source Function Container is dead with following exception. Restarting.
java.util.concurrent.CompletionException: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
        at java.util.concurrent.CompletableFuture.encodeThrowable(CompletableFuture.java:292) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeThrowable(CompletableFuture.java:308) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.uniRun(CompletableFuture.java:714) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture$UniRun.tryFire(CompletableFuture.java:701) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.postComplete(CompletableFuture.java:488) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeExceptionally(CompletableFuture.java:1990) ~[?:1.8.0_345]
        at org.apache.pulsar.client.impl.ClientCnx.channelInactive(ClientCnx.java:267) ~[pulsar-client-original-2.10.1.jar:2.10.1]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.fireChannelInactive(AbstractChannelHandlerContext.java:241) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.handler.codec.ByteToMessageDecoder.channelInputClosed(ByteToMessageDecoder.java:392) ~[netty-codec-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.handler.codec.ByteToMessageDecoder.channelInactive(ByteToMessageDecoder.java:357) ~[netty-codec-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]

I also tried another option on  https with the service url on port 6651, and I get the error below:

2022-12-29T15:30:19,126+0000 [main] INFO  org.apache.pulsar.functions.runtime.thread.ThreadRuntime - ThreadContainer starting function with instanceId 0 functionId 90dc9a02-6776-4ea9-a91d-f2cec73bce6a namespace default
2022-12-29T15:30:20,512+0000 [pulsar-client-io-1-2] INFO  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xd457af27, L:/127.0.0.1:48866 - R:localhost/127.0.0.1:6651]] Connected to server
2022-12-29T15:30:20,590+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ClientCnx - Error during handshake
java.nio.channels.ClosedChannelException: null
        at io.netty.handler.ssl.SslHandler.channelInactive(SslHandler.java:1076) ~[netty-handler-4.1.48.Final.jar:4.1.48.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.fireChannelInactive(AbstractChannelHandlerContext.java:241) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.DefaultChannelPipeline$HeadContext.channelInactive(DefaultChannelPipeline.java:1405) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:262) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:248) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.DefaultChannelPipeline.fireChannelInactive(DefaultChannelPipeline.java:901) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.AbstractChannel$AbstractUnsafe$7.run(AbstractChannel.java:813) ~[netty-transport-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.AbstractEventExecutor.runTask(AbstractEventExecutor.java:174) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:167) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:470) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.channel.epoll.EpollEventLoop.run(EpollEventLoop.java:384) ~[netty-transport-native-epoll-4.1.48.Final-linux-x86_64.jar:4.1.48.Final]
        at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:995) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30) ~[netty-common-4.1.77.Final.jar:4.1.77.Final]
        at java.lang.Thread.run(Thread.java:750) ~[?:1.8.0_345]
2022-12-29T15:30:20,663+0000 [pulsar-client-io-1-2] INFO  org.apache.pulsar.client.impl.ClientCnx - [id: 0xd457af27, L:/127.0.0.1:48866 ! R:localhost/127.0.0.1:6651] Disconnected
2022-12-29T15:30:20,691+0000 [pulsar-client-io-1-2] WARN  org.apache.pulsar.client.impl.ConnectionPool - [[id: 0xd457af27, L:/127.0.0.1:48866 ! R:localhost/127.0.0.1:6651]] Connection handshake failed: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
2022-12-29T15:30:49,134+0000 [function-timer-thread-9-1] ERROR org.apache.pulsar.functions.runtime.RuntimeSpawner - public/default/debezium-mongodb-source Function Container is dead with following exception. Restarting.
java.util.concurrent.CompletionException: org.apache.pulsar.client.api.PulsarClientException: Connection already closed
        at java.util.concurrent.CompletableFuture.encodeThrowable(CompletableFuture.java:292) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.completeThrowable(CompletableFuture.java:308) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.uniRun(CompletableFuture.java:714) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture$UniRun.tryFire(CompletableFuture.java:701) ~[?:1.8.0_345]
        at java.util.concurrent.CompletableFuture.postComplete(CompletableFuture.java:488) ~[?:1.8.0_345]

I configured Pulsar MongoDB Debezium as per the documentation and I contacted both Pulsar and the Debezium communities. So far, no satisfactory answer was provided.


问:
~FIREFOX~ Selenium Instagram Bot is unable to locate Follow button to follow profiles despite trying By. XPATH, LINK_TEXT, CLASS_NAME etc
I am on VS Code and my Selenium Instagram Bot's intentional design is to read from a list of profiles from a .txt file, visit those profiles, follow and like a specified number of their posts(if they are private, it just follows them) then goes on to the next profile in the list, all the while using different pre-made bot accounts who's usernames are also on a list, so the code may iterate over them once a number of profiles have been engaged with by a single bot.
I am able to iterate over target profiles, but right now I am just having problems with locating elements and having them to be clicked by the bot. I got it to work on 1 profile, after going to the next profile, it simply didn't do anything and seems to can't find the follow button to click again(I can't recreate this, after some changes were made lol, just getting back into Python after briefly touching on it in school). I still haven't even seen the bot like a post too. Although, the XPATHS on the Log In and the Pop Ups seems to work. It's now just not interacting with the profiles.
~
Any insights would be highly appreciated!

Source Code:

```<code>from selenium import webdriver
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.firefox.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import time, random
from selenium.webdriver.common.keys import Keys

profilePath = (r'C:\Users\****\AppData\Roaming\Mozilla\Firefox\Profiles\75d4lwz2.3rd')
options = Options()
service = Service('geckodrivere.exe')
firefox = webdriver.Firefox(options=options, service=service)
wait = WebDriverWait(firefox, 20)

file = open('scrape_archivepages.txt', 'r')
data = file.read()
igUsers = data.split('\n')
file.close()

file2 = open('botlist.txt', 'r')
data2 = file2.read()
bots = data2.split('\n')
file2.close()

def startLogIn(user_, pass_,):
    firefox.get('https://www.instagram.com/')

    while True:
        try:
            cookiesAccept = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[2]/div/div/div[1]/div/div[2]/div/div/div/div/div[2]/div/button[2]')
            time.sleep(4)
            cookiesAccept.click()
            time.sleep(4)
            break
        except:
            pass

    username = firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[1]/div/label/input')
    password = firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[2]/div/label/input')

    username.click()
    username.send_keys(user_)
    time.sleep(random.randint(1, 2))

    password.click()
    password.send_keys(pass_)
    time.sleep(random.randint(1, 2))

    log_in=firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[3]')
    log_in.click()
    time.sleep(5)

#    while True:
 #       try:
  #          credentials= firefox.find_element(By.XPATH, '//button[text()="Not Now"]')
   #         time.sleep(3)
    #        credentials.click()
     #       break
      #  except:
       #     pass

#    while True:
 #       try:
  #          notifications = firefox.find_element(By.XPATH, '//button[text()="Not Now"]')
   #         time.sleep(3)
    #        notifications.click()
     #       break
      #  except:
       #     pass

def interact(igUserLink, n):
    firefox.get(igUserLink)
    time.sleep(2)

    #while True:
     #   try:
    follow = firefox.find_element(By.CSS_SELECTOR, '#mount_0_0_0I > div > div > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div > div.x78zum5.xdt5ytf.x10cihs4.x1t2pt76.x1n2onr6.x1ja2u2z > div.x9f619.xnz67gz.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.x1q0g3np.xqjyukv.x1qjc9v5.x1oa3qoh.x1qughib > div.xh8yej3.x1gryazu.x10o80wk.x14k21rp.x1porb0y.x17snn68.x6osk4m > section > main > div > header > section > div.x6s0dn4.x78zum5.x1q0g3np.xs83m0k.xeuugli.x1n2onr6 > div._ab8w._ab94._ab99._ab9f._ab9k._ab9p._abb3._abcm > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._abb0._abcm > button > div > div')
    time.sleep(2)
    private = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/section/main/div/div/article/div[1]/div/h2')
    if(bool(private)):
        print('lol')
        follow.click()
        time.sleep(2)
##xpath of header from IG saying profile is private
    if (not(bool(private))):
        print('here')
        follow.click()
        time.sleep(2)
        time.sleep(2)
        c = 0
        numPosts = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/main/div/header/section/ul/li[1]/div/span/span')
        numPosts = int(numPosts.text)

        if n == 0:
                #do nothing
            if n <= numPosts:
                media = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/main/div/div[2]/article/div/div/div[1]/div[1]')
                media.click()
                time.sleep(1)
                like = firefox.find_element(By.NAME, 'Like')
                next = firefox.find_element(By.NAME, 'Next')
                while(c<n):
                    like.click()
                    time.sleep(3)
                    c=c+1
                    next.click()
            #break
        #except:
            #pass

def VibeFinderInteract(listOfBots, passw, userLink):

    for userbot in listOfBots:
        startLogIn(userbot, passw)

        for u in userLink:
            interact(u, 2)
            print('')

VibeFinderInteract(bots, 'samepasswordforallthebots', igUsers)
</code>```

Body:
I am on VS Code and my Selenium Instagram Bot's intentional design is to read from a list of profiles from a .txt file, visit those profiles, follow and like a specified number of their posts(if they are private, it just follows them) then goes on to the next profile in the list, all the while using different pre-made bot accounts who's usernames are also on a list, so the code may iterate over them once a number of profiles have been engaged with by a single bot.
I am able to iterate over target profiles, but right now I am just having problems with locating elements and having them to be clicked by the bot. I got it to work on 1 profile, after going to the next profile, it simply didn't do anything and seems to can't find the follow button to click again(I can't recreate this, after some changes were made lol, just getting back into Python after briefly touching on it in school). I still haven't even seen the bot like a post too. Although, the XPATHS on the Log In and the Pop Ups seems to work. It's now just not interacting with the profiles.
~
Any insights would be highly appreciated!

Source Code:

from selenium import webdriver
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.firefox.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import time, random
from selenium.webdriver.common.keys import Keys

profilePath = (r'C:\Users\****\AppData\Roaming\Mozilla\Firefox\Profiles\75d4lwz2.3rd')
options = Options()
service = Service('geckodrivere.exe')
firefox = webdriver.Firefox(options=options, service=service)
wait = WebDriverWait(firefox, 20)

file = open('scrape_archivepages.txt', 'r')
data = file.read()
igUsers = data.split('\n')
file.close()

file2 = open('botlist.txt', 'r')
data2 = file2.read()
bots = data2.split('\n')
file2.close()

def startLogIn(user_, pass_,):
    firefox.get('https://www.instagram.com/')

    while True:
        try:
            cookiesAccept = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[2]/div/div/div[1]/div/div[2]/div/div/div/div/div[2]/div/button[2]')
            time.sleep(4)
            cookiesAccept.click()
            time.sleep(4)
            break
        except:
            pass

    username = firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[1]/div/label/input')
    password = firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[2]/div/label/input')

    username.click()
    username.send_keys(user_)
    time.sleep(random.randint(1, 2))

    password.click()
    password.send_keys(pass_)
    time.sleep(random.randint(1, 2))

    log_in=firefox.find_element(By.XPATH, '//*[@id="loginForm"]/div/div[3]')
    log_in.click()
    time.sleep(5)

#    while True:
 #       try:
  #          credentials= firefox.find_element(By.XPATH, '//button[text()="Not Now"]')
   #         time.sleep(3)
    #        credentials.click()
     #       break
      #  except:
       #     pass

#    while True:
 #       try:
  #          notifications = firefox.find_element(By.XPATH, '//button[text()="Not Now"]')
   #         time.sleep(3)
    #        notifications.click()
     #       break
      #  except:
       #     pass

def interact(igUserLink, n):
    firefox.get(igUserLink)
    time.sleep(2)

    #while True:
     #   try:
    follow = firefox.find_element(By.CSS_SELECTOR, '#mount_0_0_0I > div > div > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div > div.x78zum5.xdt5ytf.x10cihs4.x1t2pt76.x1n2onr6.x1ja2u2z > div.x9f619.xnz67gz.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.x1q0g3np.xqjyukv.x1qjc9v5.x1oa3qoh.x1qughib > div.xh8yej3.x1gryazu.x10o80wk.x14k21rp.x1porb0y.x17snn68.x6osk4m > section > main > div > header > section > div.x6s0dn4.x78zum5.x1q0g3np.xs83m0k.xeuugli.x1n2onr6 > div._ab8w._ab94._ab99._ab9f._ab9k._ab9p._abb3._abcm > div > div._ab8w._ab94._ab99._ab9f._ab9m._ab9o._abb0._abcm > button > div > div')
    time.sleep(2)
    private = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/section/main/div/div/article/div[1]/div/h2')
    if(bool(private)):
        print('lol')
        follow.click()
        time.sleep(2)
##xpath of header from IG saying profile is private
    if (not(bool(private))):
        print('here')
        follow.click()
        time.sleep(2)
        time.sleep(2)
        c = 0
        numPosts = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/main/div/header/section/ul/li[1]/div/span/span')
        numPosts = int(numPosts.text)

        if n == 0:
                #do nothing
            if n <= numPosts:
                media = firefox.find_element(By.XPATH, '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/main/div/div[2]/article/div/div/div[1]/div[1]')
                media.click()
                time.sleep(1)
                like = firefox.find_element(By.NAME, 'Like')
                next = firefox.find_element(By.NAME, 'Next')
                while(c<n):
                    like.click()
                    time.sleep(3)
                    c=c+1
                    next.click()
            #break
        #except:
            #pass

def VibeFinderInteract(listOfBots, passw, userLink):

    for userbot in listOfBots:
        startLogIn(userbot, passw)

        for u in userLink:
            interact(u, 2)
            print('')

VibeFinderInteract(bots, 'samepasswordforallthebots', igUsers)


问:
Unable to load from AssetManifest.json
Need to load assets using String

```<code> Future<void> uploadData() async {
    final assetsManifest = await DefaultAssetBundle.of(Get.context!)
        .loadString('AssetManifest.json');
    final assets = json.decode(assetsManifest).keys;

    final manifestContent = await DefaultAssetBundle.of(Get.context!)
        .loadString("AssetManifest.json");
    final Map<String, dynamic> manifestMap = json.decode(manifestContent);
    final papersInAssets = manifestMap.keys
        .where((path) =>
            path.startsWith("assets/DB/paper") && path.contains(".json"))
        .toList();
    print(papersInAssets);
  }
</code>```

Project structure
enter image description here

This is the output
expected to print a list of assets

```<code>estarted application in 2,750ms.
[GETX] Instance "DataUploader" has been created
[GETX] Instance "DataUploader" has been initialized
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
I/flutter (12563): []
</code>```

Title: Unable to load from AssetManifest.json

Body:
Need to load assets using String

 Future<void> uploadData() async {
    final assetsManifest = await DefaultAssetBundle.of(Get.context!)
        .loadString('AssetManifest.json');
    final assets = json.decode(assetsManifest).keys;

    final manifestContent = await DefaultAssetBundle.of(Get.context!)
        .loadString("AssetManifest.json");
    final Map<String, dynamic> manifestMap = json.decode(manifestContent);
    final papersInAssets = manifestMap.keys
        .where((path) =>
            path.startsWith("assets/DB/paper") && path.contains(".json"))
        .toList();
    print(papersInAssets);
  }

Project structure
enter image description here

This is the output
expected to print a list of assets

estarted application in 2,750ms.
[GETX] Instance "DataUploader" has been created
[GETX] Instance "DataUploader" has been initialized
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
I/flutter (12563): []


问:
How to manage a set of data filters on the frontend before querying the backend
I have a Vue app with an express backend that lets users manage lists of Movies, TV Shows, Books etc.

Users are able to filter and sort their libraries by a wide variety of options (release dates, critic scores, genres, etc)

I have an API endpoint that accepts filter and sort options but I'm struggling to come up with a scalable way to set, store, and manage filters on the frontend before sending them off the backend.

Currently I store the filter settings like so:

```<code>filters: {
  genre: "",
  complete: false,
  orderBy: "userRecordCreatedAt",
  orderDirection: "DESC NULLS LAST",
  releaseYearAfter: null,
  releaseYearBefore: null,
  title: "",
};
</code>```

setFilter and applyFilters functions are used to prepare the filters and query the backend

```<code>setFilter(filterName, filterValue) {
      this.filters[filterName] = filterValue
      this.applyFilters()
    },

applyFilters() {
      LibraryApiService.applyFilters(this.filters)
        .then((response) => {
          this.items = response.data
        })
    },
</code>```

In the UI filter I currently handle things like this:

```<code><MenuItem v-for="genre in store.genres">
<a
  class="filter-item-link"
  @click="store.setFilter('genre', genre.name)"
  >
    {{ genre.name }}
  </a>
</MenuItem>
</code>```

This approach feels awkward and error prone to me. For more complex filters like "Movies after 2000", setting the query params directly in the UI starts to get messy. I also want to keep track of which filters are currently active which I might have to track separately in my current setup?

What is the recommended approach for managing complex filter settings and their state in the frontend? Apologies if this is a vague question.

Body:
I have a Vue app with an express backend that lets users manage lists of Movies, TV Shows, Books etc.

Users are able to filter and sort their libraries by a wide variety of options (release dates, critic scores, genres, etc)

I have an API endpoint that accepts filter and sort options but I'm struggling to come up with a scalable way to set, store, and manage filters on the frontend before sending them off the backend.

Currently I store the filter settings like so:

filters: {
  genre: "",
  complete: false,
  orderBy: "userRecordCreatedAt",
  orderDirection: "DESC NULLS LAST",
  releaseYearAfter: null,
  releaseYearBefore: null,
  title: "",
};

setFilter and applyFilters functions are used to prepare the filters and query the backend

setFilter(filterName, filterValue) {
      this.filters[filterName] = filterValue
      this.applyFilters()
    },

applyFilters() {
      LibraryApiService.applyFilters(this.filters)
        .then((response) => {
          this.items = response.data
        })
    },

In the UI filter I currently handle things like this:

<MenuItem v-for="genre in store.genres">

    {{ genre.name }}

</MenuItem>

This approach feels awkward and error prone to me. For more complex filters like "Movies after 2000", setting the query params directly in the UI starts to get messy. I also want to keep track of which filters are currently active which I might have to track separately in my current setup?

What is the recommended approach for managing complex filter settings and their state in the frontend? Apologies if this is a vague question.


问:
How to associate form with a `bootstrap_field` outside that form?
Given this field {% bootstrap_field form.photo %} which is a forms.ImageField and the form after, I need to associate the field with the form in a way that when the form is submitted, I get the value in form.photo.

```<code><div class="row container h-100">
    <div class="col-xl-4">
        <div class="card mb-4 mb-xl-0">
            <div class="card-body text-center">
                <img style="max-width: 50%" alt="Avatar" class="img-account-profile rounded-circle mb-2"
                     src={{ request.user.profile.photo.url }}>
                {% bootstrap_field form.photo %}
            </div>
        </div>
    </div>
    <div class="col h-100">
        <div class="card shadow-lg">
            <div class="card-body p-5">
                <form enctype="multipart/form-data" method="post">
                    {% csrf_token %}
                    <div class="row">
                 <span class="col">
                 {% bootstrap_field form.first_name %}
                 </span>
                        <span class="col">
                 {% bootstrap_field form.last_name %}
                 </span>
                        <button class="btn btn-success col">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</code>```

Currently if a photo is uploaded, it won't show up in the form response because it's not included within <form></form>. I need it to be outside the form because the locations of the form fields and the photo are different.

One way to do so is to wrap both cards inside the form tags. Is this the best way to do it or is there a simpler way like specifying {% bootstrap_field my_field form=my_form %}

Body:
Given this field {% bootstrap_field form.photo %} which is a forms.ImageField and the form after, I need to associate the field with the form in a way that when the form is submitted, I get the value in form.photo.

                {% bootstrap_field form.photo %}

                <form enctype="multipart/form-data" method="post">
                    {% csrf_token %}

                 {% bootstrap_field form.first_name %}

                 {% bootstrap_field form.last_name %}

                        <button class="btn btn-success col">Update</button>

                </form>

Currently if a photo is uploaded, it won't show up in the form response because it's not included within <form></form>. I need it to be outside the form because the locations of the form fields and the photo are different.

One way to do so is to wrap both cards inside the form tags. Is this the best way to do it or is there a simpler way like specifying {% bootstrap_field my_field form=my_form %}


问:
How do I move labels to each bar horizontally to the left and move values to the top of Sankey graph using ggplot in R
I want to have my label each of my bars (horizontally) from my legend.

I also want to move my value labels to the top of the graph instead of the bottom.

below is my code and a picture of the plot.

```<code>ggplot(data= AZD.melt,
        aes(x = variable, y = value,
        stratum = id,
        alluvium = risk_factors_for_stroke_in_blacks
        fill = risk_factors_for_stroke_in_blacks,
        colour = id,
        label = value)) +

geom_flow(stat = "alluvium", lode.guidance = "frontback",
         color= "white")+
geom_stratum(color = "white", width 0.7) +
geom_text(position = position_stack(vjust= 0.5), colour = "white")

</code>```

Body:
I want to have my label each of my bars (horizontally) from my legend.

I also want to move my value labels to the top of the graph instead of the bottom.

below is my code and a picture of the plot.

ggplot(data= AZD.melt,
        aes(x = variable, y = value,
        stratum = id,
        alluvium = risk_factors_for_stroke_in_blacks
        fill = risk_factors_for_stroke_in_blacks,
        colour = id,
        label = value)) +

geom_flow(stat = "alluvium", lode.guidance = "frontback",
         color= "white")+
geom_stratum(color = "white", width 0.7) +
geom_text(position = position_stack(vjust= 0.5), colour = "white")


问:
Unzip latest zip file with php
Can someone help me to unzip the newest zip file in a directory.

I can unzip a file using the specific file name, but unfortunately, the file name changes daily. So unzipping the latest file is my best option.

Or

Can someone show me how to unzip a zip file using the *.zip wildcard and then delete the zip file.

I have tried using the wildcard to unzip, but the wildcard doesn't work for the initial unzip.

```<code>$zip = new ZipArchive;
$res = $zip->open('/home/*.zip');
if ($res === TRUE) {
  $zip->extractTo('/home/');
  $zip->close();
  echo 'woot!';
} else {
  echo 'doh!';
}
</code>```

Title: Unzip latest zip file with php

Body:
Can someone help me to unzip the newest zip file in a directory.

I can unzip a file using the specific file name, but unfortunately, the file name changes daily. So unzipping the latest file is my best option.

Or

Can someone show me how to unzip a zip file using the *.zip wildcard and then delete the zip file.

I have tried using the wildcard to unzip, but the wildcard doesn't work for the initial unzip.

$zip = new ZipArchive;
$res = $zip->open('/home/*.zip');
if ($res === TRUE) {
  $zip->extractTo('/home/');
  $zip->close();
  echo 'woot!';
} else {
  echo 'doh!';
}


问:
Webpack does not remove boilerplate from HtmlWebpackPLugin under development
I own the following pages:

about

contact

home

portfolio

And these pages are "templates", where nothing more, nothing less, I inject the head with index.js and index.scss in them, along with title, goals etc that are the same for all.

But in development mode, it still leaves the <%= htmlWebpackPlugin.tags.headTags %>

HTML TEMPLATE PAGE EXAMPLE:

```<code><html lang="en">

<head>
    <%= htmlWebpackPlugin.tags.headTags %>
</head>

<body>
    X
</body>

</html>
</code>```

WEBPACK CONFIG:

```<code>const path = require('path');
const AutoPrefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const HTML_WEBPACK_PLUGIN = {
    minify: true,
    cache: true,
    favicon: '',
    meta: {
        viewport: 'width=device-width, initial-scale=1',
    },
};

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'HOME PAGE', filename: 'index.html', template: 'src/pages/home.html' }),
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'ABOUT PAGE', filename: 'about.html', template: 'src/pages/about.html' }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'PORTFOLIO PAGE',
            filename: 'portfolio.html',
            template: 'src/pages/portfolio.html',
        }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'CONTACT PAGE',
            filename: 'contact.html',
            template: 'src/pages/contact.html',
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
        }),
    ],
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        port: 8080,
        hot: false,
        liveReload: true,
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            new CssMinimizerPlugin({
                minify: CssMinimizerPlugin.cleanCssMinify,
                parallel: true,
            }),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
                minify: TerserPlugin.uglifyJsMinify,
            }),
        ],
    },
    output: {
        clean: true,
        filename: '[name].[contenthash].js',
        chunkFilename: '[id].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        cacheCompression: true,
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime'],
                    },
                },
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                mimetype: 'image/svg+xml',
                scheme: 'data',
                type: 'asset/resource',
                generator: {
                    filename: 'icons/[hash].svg',
                },
            },
            {
                test: /\.(sa|sc|c)ss$/, // SASS AND CSS
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [AutoPrefixer()],
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
        ],
    },
};
</code>```

Body:
I own the following pages:

about

contact

home

portfolio

And these pages are "templates", where nothing more, nothing less, I inject the head with index.js and index.scss in them, along with title, goals etc that are the same for all.

But in development mode, it still leaves the <%= htmlWebpackPlugin.tags.headTags %>

HTML TEMPLATE PAGE EXAMPLE:

    <%= htmlWebpackPlugin.tags.headTags %>

    X

WEBPACK CONFIG:

const path = require('path');
const AutoPrefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const HTML_WEBPACK_PLUGIN = {
    minify: true,
    cache: true,
    favicon: '',
    meta: {
        viewport: 'width=device-width, initial-scale=1',
    },
};

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'HOME PAGE', filename: 'index.html', template: 'src/pages/home.html' }),
        new HtmlWebpackPlugin({ ...HTML_WEBPACK_PLUGIN, title: 'ABOUT PAGE', filename: 'about.html', template: 'src/pages/about.html' }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'PORTFOLIO PAGE',
            filename: 'portfolio.html',
            template: 'src/pages/portfolio.html',
        }),
        new HtmlWebpackPlugin({
            ...HTML_WEBPACK_PLUGIN,
            title: 'CONTACT PAGE',
            filename: 'contact.html',
            template: 'src/pages/contact.html',
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
        }),
    ],
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        port: 8080,
        hot: false,
        liveReload: true,
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            new CssMinimizerPlugin({
                minify: CssMinimizerPlugin.cleanCssMinify,
                parallel: true,
            }),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
                minify: TerserPlugin.uglifyJsMinify,
            }),
        ],
    },
    output: {
        clean: true,
        filename: '[name].[contenthash].js',
        chunkFilename: '[id].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        cacheCompression: true,
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime'],
                    },
                },
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                mimetype: 'image/svg+xml',
                scheme: 'data',
                type: 'asset/resource',
                generator: {
                    filename: 'icons/[hash].svg',
                },
            },
            {
                test: /\.(sa|sc|c)ss$/, // SASS AND CSS
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [AutoPrefixer()],
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
        ],
    },
};