问:
React how to render only first index in array and then filter to display different item in array
I currently have a view button set up to retrieve all the records for a patient that renders all the records in a card I am sending to a component to display them in cards. It also shows all the records for that patient in a select dropdown. I want it to only render the most recent record when I initially click the view button and then be able to re-render the card when a record is selected in the dropdown.

```<code>const onViewClick = (diag) => {
    diagnosticServices
      .getDiagByHorseId(pageData.pageIndex, pageData.pageSize, diag.id)
      .then(getDiagByIdSuccess)
      .catch(getDiagByIdError);
    setToggleDiagSearch(true);
    setRenderDiag(!renderDiag);
  };

  const getDiagByIdSuccess = (response) => {
    _logger(response);
    let diag = response.item.pagedItems;
    setDiagnostics((prevState) => {
      const pd = { ...prevState };
      pd.arrayOfDiagnostics = diag;
      pd.diagComponents = pd.arrayOfDiagnostics.map(diagMapper);
      _logger(pd.diagComponents);
      return pd;
    });
    setDateComponents((prevState) => {
      const dc = { ...prevState };
      dc.arrayOfDates = diag;
      dc.dateCreatedComponents = dc.arrayOfDates.map(dateMapper);
      _logger(dc.dateCreatedComponents);
      return dc;
    });
  };

  const diagMapper = (diag) => {
    _logger("Mapping single Diagnostic -->", diag);
    return (
      <SingleDiagnostic
        diagnostic={diag}
        key={diag.id}
        onEditClick={onEditClick}
      ></SingleDiagnostic>
    );
  };

  const dateMapper = (diag) => {
    _logger("Mapping Diagnostic Dates -->", diag);
    return (
      <option key={diag.id} value={diag.id}>
        {formatDateTime(diag.dateCreated)}
      </option>
    );
  };
</code>```

I tried to update the selected state value and then filter the state with the selected value, and then to update the render state with the result of the filter, but I am receiving an undefined in my filter. The e.target.value and diag.id are the same id, but the filteredDiag is returning undefined.

```<code>const filterDiagnostics = (e) => {
    _logger(e.target.value);
    const filterDiag = (diag) => {
      _logger(diag.id);
      let result = false;
      if (e.target.value === diag.id) {
        result = true;
      } else {
        result = false;
      }
      return result;
    };

    let filteredDiag = diagnostics.arrayOfDiagnostics.filter(filterDiag);
    _logger(filteredDiag);
    setDiagnostics((prevState) => {
      let diagnostic = { ...prevState };
      diagnostic = filteredDiag.map(diagMapper);
      return diagnostic;
    });
    setRenderDiag(!renderDiag);
  };
</code>```

In my return statement:

```<code><Col xs={8}>
                {toggleDiagSearch && (
                  <Card className="mt-4">
                    <Form onSubmit={handleSubmit}>
                      <Card.Header>
                        <strong> Diagnostics History</strong>
                        <Field
                          as="select"
                          className="form-select"
                          name="diagComponents"
                          onChange={filterDiagnostics}
                          value={values.id}
                        >
                          <option label="Select" value="select"></option>
                          {dateComponents.dateCreatedComponents}
                        </Field>
                      </Card.Header>
                    </Form>
                  </Card>
                )}
                <Card className="mt-3">
                  {renderDiag && diagnostics.diagComponents}
                </Card>
              </Col>
</code>```

I tried to set the diagComponents[0] to initially display only the first index, but I don't think that will let me display the other records when I select a new record from the dropdown. Where do I have to make adjustments to show only the first record and get my filter to function correctly?

Body:
I currently have a view button set up to retrieve all the records for a patient that renders all the records in a card I am sending to a component to display them in cards. It also shows all the records for that patient in a select dropdown. I want it to only render the most recent record when I initially click the view button and then be able to re-render the card when a record is selected in the dropdown.

const onViewClick = (diag) => {
    diagnosticServices
      .getDiagByHorseId(pageData.pageIndex, pageData.pageSize, diag.id)
      .then(getDiagByIdSuccess)
      .catch(getDiagByIdError);
    setToggleDiagSearch(true);
    setRenderDiag(!renderDiag);
  };

  const getDiagByIdSuccess = (response) => {
    _logger(response);
    let diag = response.item.pagedItems;
    setDiagnostics((prevState) => {
      const pd = { ...prevState };
      pd.arrayOfDiagnostics = diag;
      pd.diagComponents = pd.arrayOfDiagnostics.map(diagMapper);
      _logger(pd.diagComponents);
      return pd;
    });
    setDateComponents((prevState) => {
      const dc = { ...prevState };
      dc.arrayOfDates = diag;
      dc.dateCreatedComponents = dc.arrayOfDates.map(dateMapper);
      _logger(dc.dateCreatedComponents);
      return dc;
    });
  };

  const diagMapper = (diag) => {
    _logger("Mapping single Diagnostic -->", diag);
    return (
      <SingleDiagnostic
        diagnostic={diag}
        key={diag.id}
        onEditClick={onEditClick}
      ></SingleDiagnostic>
    );
  };

  const dateMapper = (diag) => {
    _logger("Mapping Diagnostic Dates -->", diag);
    return (
      <option key={diag.id} value={diag.id}>
        {formatDateTime(diag.dateCreated)}
      </option>
    );
  };

I tried to update the selected state value and then filter the state with the selected value, and then to update the render state with the result of the filter, but I am receiving an undefined in my filter. The e.target.value and diag.id are the same id, but the filteredDiag is returning undefined.

const filterDiagnostics = (e) => {
    _logger(e.target.value);
    const filterDiag = (diag) => {
      _logger(diag.id);
      let result = false;
      if (e.target.value === diag.id) {
        result = true;
      } else {
        result = false;
      }
      return result;
    };

    let filteredDiag = diagnostics.arrayOfDiagnostics.filter(filterDiag);
    _logger(filteredDiag);
    setDiagnostics((prevState) => {
      let diagnostic = { ...prevState };
      diagnostic = filteredDiag.map(diagMapper);
      return diagnostic;
    });
    setRenderDiag(!renderDiag);
  };

In my return statement:

<Col xs={8}>
                {toggleDiagSearch && (
                  <Card className="mt-4">
                    <Form onSubmit={handleSubmit}>
                      <Card.Header>
                         Diagnostics History
                        <Field
                          as="select"
                          className="form-select"
                          name="diagComponents"
                          onChange={filterDiagnostics}
                          value={values.id}
                        >
                          <option label="Select" value="select"></option>
                          {dateComponents.dateCreatedComponents}
                        </Field>
                      </Card.Header>
                    </Form>
                  </Card>
                )}
                <Card className="mt-3">
                  {renderDiag && diagnostics.diagComponents}
                </Card>
              </Col>

I tried to set the diagComponents[0] to initially display only the first index, but I don't think that will let me display the other records when I select a new record from the dropdown. Where do I have to make adjustments to show only the first record and get my filter to function correctly?


来源: stackexchange

问:
Asynchronous code causing UI to load slowly in iOS ScrollView
I have an API call that is making a request to get a list of conversations.

    func getThreads(userRequest: UserRequest) async throws -> [MessageThreadResponse] {

        var messageThreads: [MessageThreadResponse]

        guard var url = URLComponents(string: "{thread}") else {
            return []
        }

        url.queryItems = [
            URLQueryItem(name: "userId", value: userRequest.id)
        ]

        let request = URLRequest(url: url.url!)

        let session = URLSession(configuration:  .default)
        let (data, _) = try! await session.data(for: request)
        do {
            let threads = try self.parse(json: data)
            messageThreads = threads!
        } catch {
            throw ApiServiceError.unableToParse(data: data)
        }
        print(messageThreads)
        return messageThreads
    }
```
<p>and that is called by this function:</p>
<pre class="lang-swift prettyprint-override"><code>    func getThread(userId: String) async {
        Task {
            do {
                let request = createRequest(id: userId)
                guard let data = try? await ApiService.shared.getThreads(userRequest: request) else {
                    throw ApiServiceError.unableToGetUser(user: userRequest)
                }
                for thread in data {
                    let mostRecentMessage = try? await messagesManager.getMostRecentMessage(threadId: thread.uid)
                    print("Most recent message is \(mostRecentMessage)")
                    let messageThread = MessageThread(uid: thread.uid, name: thread.name, mostRecentMessage: mostRecentMessage)
                    if !messagesThreads.contains(where: {$0.uid == messageThread.uid}) {
                        self.messagesThreads.append(messageThread)
                    }
                }
            } catch {
                self.hasError = true
            }
            print(messagesThreads)
        }
</code>```

After getting the first API call, the function calls Firebase to get the thread where the messages are saved.

  func getMostRecentMessage(threadId: String) async -> String {
    print("Getting most recent message for thread \(threadId)")
    var message = ""
    let snapshot = try? await db.collection("\(threadId.lowercased())").order(by: "dateTime", descending: true).limit(to: 1).getDocuments()
    snapshot?.documents.forEach { document in
      do {
        let data = document.data()
        let messageFromData = try parseMessage(messageFromData: data)
        message = messageFromData.body
      }
      catch {
        print("Error decoding message from collection \(error)")
      }
    }
    return message
  }
```

I get the data from Firestore successfully, but because it's an async operation, the data loads in the UI. The threads are looped through in a ForEach loop within a ScrollView and the items load incrementally one-by-one. Is there a way I can make it so the UI doesn't present until the whole list is ready?

ContentLicense: CC BY-SA 4.0

Body:
I have an API call that is making a request to get a list of conversations.

    func getThreads(userRequest: UserRequest) async throws -> [MessageThreadResponse] {

        var messageThreads: [MessageThreadResponse]

        guard var url = URLComponents(string: "{thread}") else {
            return []
        }

        url.queryItems = [
            URLQueryItem(name: "userId", value: userRequest.id)
        ]

        let request = URLRequest(url: url.url!)

        let session = URLSession(configuration:  .default)
        let (data, _) = try! await session.data(for: request)
        do {
            let threads = try self.parse(json: data)
            messageThreads = threads!
        } catch {
            throw ApiServiceError.unableToParse(data: data)
        }
        print(messageThreads)
        return messageThreads
    }

and that is called by this function:

    func getThread(userId: String) async {
        Task {
            do {
                let request = createRequest(id: userId)
                guard let data = try? await ApiService.shared.getThreads(userRequest: request) else {
                    throw ApiServiceError.unableToGetUser(user: userRequest)
                }
                for thread in data {
                    let mostRecentMessage = try? await messagesManager.getMostRecentMessage(threadId: thread.uid)
                    print("Most recent message is \(mostRecentMessage)")
                    let messageThread = MessageThread(uid: thread.uid, name: thread.name, mostRecentMessage: mostRecentMessage)
                    if !messagesThreads.contains(where: {$0.uid == messageThread.uid}) {
                        self.messagesThreads.append(messageThread)
                    }
                }
            } catch {
                self.hasError = true
            }
            print(messagesThreads)
        }

After getting the first API call, the function calls Firebase to get the thread where the messages are saved.

  func getMostRecentMessage(threadId: String) async -> String {
    print("Getting most recent message for thread \(threadId)")
    var message = ""
    let snapshot = try? await db.collection("\(threadId.lowercased())").order(by: "dateTime", descending: true).limit(to: 1).getDocuments()
    snapshot?.documents.forEach { document in
      do {
        let data = document.data()
        let messageFromData = try parseMessage(messageFromData: data)
        message = messageFromData.body
      }
      catch {
        print("Error decoding message from collection \(error)")
      }
    }
    return message
  }

I get the data from Firestore successfully, but because it's an async operation, the data loads in the UI. The threads are looped through in a ForEach loop within a ScrollView and the items load incrementally one-by-one. Is there a way I can make it so the UI doesn't present until the whole list is ready?


问:
JS or other method to loop through slow loading URLs
Power Automate Desktop has died, or at least its ability to attach to Firefox,Edge and Chrome.
I have a task which loads a web page 1400 times with slightly different parameters and then invokes a webside javascript call to download a file.
My problem is that I cannot make any of the wait-for-page-to load options work due to my lack of experience. The web page can take between 5 seconds and 5 minutes to load depending on the request and
how busy the system is. the javascript call usually executes in less than 5 seconds.
The two lines of code which execute happily in Firefox console on there own are

```<code>window.location.replace("https://nnnnnnnnnn.contifico.com/sistema/reportes/cuentas/?pagina=1&cuenta=xxxxxxxxxxx&fecha_inicio=01/01/2022&fecha_fin=31/12/2022");
javascript:exportarExcel();
</code>```

nnnnnnnnnn and xxxxxxxxxxx are replaceable parameters which are passed in each iteration of the loop.
Can anyone give me a pointer in the right direction?  Tried all sorts of listener and await option

Body:
Power Automate Desktop has died, or at least its ability to attach to Firefox,Edge and Chrome.
I have a task which loads a web page 1400 times with slightly different parameters and then invokes a webside javascript call to download a file.
My problem is that I cannot make any of the wait-for-page-to load options work due to my lack of experience. The web page can take between 5 seconds and 5 minutes to load depending on the request and
how busy the system is. the javascript call usually executes in less than 5 seconds.
The two lines of code which execute happily in Firefox console on there own are

window.location.replace("https://nnnnnnnnnn.contifico.com/sistema/reportes/cuentas/?pagina=1&cuenta=xxxxxxxxxxx&fecha_inicio=01/01/2022&fecha_fin=31/12/2022");
javascript:exportarExcel();

nnnnnnnnnn and xxxxxxxxxxx are replaceable parameters which are passed in each iteration of the loop.
Can anyone give me a pointer in the right direction?  Tried all sorts of listener and await option


问:
Spark/Hadoop: Getting "Unsatisfied Link Error: NativeIO$Windows.createFileWithMode0" (with winutils.exe installed correctly)
I am using Spark version 3.0.3, and I am having trouble with an "Unsatisfied Link Error" when trying to save Spark Data Frame to my local disk on Windows.  The error originates from "NativeIO$Windows.createFileWithMode0".  I have tried searching for this error on Stack Overflow and other places, but most of the results talk about installing winutils.exe in the correct place, something I have already done.

I have HADOOP_HOME=C://Tools/winutils, and inside of C://Tools/winutils I have C://Tools/winutils/bin/winutils.exe.  I have also tried putting hadoop.dll inside of that directory, but no luck there either.  I've tried 64-bit winutils, and 32-bit winutils with various versions of each but nothing seems to work.  I am using a 64-bit 1.8 Java JDK, but I've tried 32-bit as well, and still the same error.  I have also tried upgrading Spark to 3.2.3, but that doesn't help either.

Here is the exact line of code that crashes my Spark program:

```<code>df.write()
    .option("maxRecordsPerFile", 10000)
    .option("compression", "gzip")
    .mode("overwrite")
    .format(codec)
    .save(parquetDir);
</code>```

I've tried changing where the save file directory points to, changing the codes from "parquet" to "csv", and I've tried removing each of the .option() options as well.

I'm pretty sure it isn't a permissions issue, as I've used the regular Java file API to create files in that location. Adding the line new File(parquetDir + "/test.txt").createNewFile() creates a new file in parquetDir just fine.

Does anyone have any suggestions for what I can do to fix this issue?  Other people I've spoken with have followed the same directions as me, but it's worked for them, so I can't figure out where I am going wrong.

Here is a little more from the stack trace to give more info:

```<code>java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Ljava/lang/String;JJJI)Ljava/io/FileDescriptor;
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Native Method)
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileOutputStreamWithMode(NativeIO.java:556)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:231)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:221)
    at org.apache.hadoop.fs.RawLocalFileSystem.createOutputStreamWithMode(RawLocalFileSystem.java:319)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:307)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:339)
    at org.apache.hadoop.fs.ChecksumFileSystem$ChecksumFSOutputSummer.<init>(ChecksumFileSystem.java:399)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:462)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:441)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:929)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:910)
    at org.apache.parquet.hadoop.util.HadoopOutputFile.create(HadoopOutputFile.java:74)
    at org.apache.parquet.hadoop.ParquetFileWriter.<init>(ParquetFileWriter.java:248)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:390)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:349)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetOutputWriter.<init>(ParquetOutputWriter.scala:37)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetFileFormat$$anon$1.newInstance(ParquetFileFormat.scala:150)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.newOutputWriter(FileFormatDataWriter.scala:126)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.<init>(FileFormatDataWriter.scala:111)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.executeTask(FileFormatWriter.scala:269)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.$anonfun$write$15(FileFormatWriter.scala:210)
    at org.apache.spark.scheduler.ResultTask.runTask(ResultTask.scala:90)
    at org.apache.spark.scheduler.Task.run(Task.scala:127)
    at org.apache.spark.executor.Executor$TaskRunner.$anonfun$run$3(Executor.scala:463)
    at org.apache.spark.util.Utils$.tryWithSafeFinally(Utils.scala:1377)
    at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:466)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)
2022-12-21 15:56:34 WARN  TaskSetManager:69 - Lost task 0.0 in stage 1.0 (TID 1, P23566.ieee.org, executor driver): java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Ljava/lang/String;JJJI)Ljava/io/FileDescriptor;
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Native Method)
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileOutputStreamWithMode(NativeIO.java:556)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:231)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:221)
    at org.apache.hadoop.fs.RawLocalFileSystem.createOutputStreamWithMode(RawLocalFileSystem.java:319)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:307)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:339)
    at org.apache.hadoop.fs.ChecksumFileSystem$ChecksumFSOutputSummer.<init>(ChecksumFileSystem.java:399)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:462)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:441)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:929)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:910)
    at org.apache.parquet.hadoop.util.HadoopOutputFile.create(HadoopOutputFile.java:74)
    at org.apache.parquet.hadoop.ParquetFileWriter.<init>(ParquetFileWriter.java:248)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:390)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:349)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetOutputWriter.<init>(ParquetOutputWriter.scala:37)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetFileFormat$$anon$1.newInstance(ParquetFileFormat.scala:150)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.newOutputWriter(FileFormatDataWriter.scala:126)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.<init>(FileFormatDataWriter.scala:111)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.executeTask(FileFormatWriter.scala:269)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.$anonfun$write$15(FileFormatWriter.scala:210)
    at org.apache.spark.scheduler.ResultTask.runTask(ResultTask.scala:90)
    at org.apache.spark.scheduler.Task.run(Task.scala:127)
    at org.apache.spark.executor.Executor$TaskRunner.$anonfun$run$3(Executor.scala:463)
    at org.apache.spark.util.Utils$.tryWithSafeFinally(Utils.scala:1377)
    at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:466)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)

</code>```

Body:
I am using Spark version 3.0.3, and I am having trouble with an "Unsatisfied Link Error" when trying to save Spark Data Frame to my local disk on Windows.  The error originates from "NativeIO$Windows.createFileWithMode0".  I have tried searching for this error on Stack Overflow and other places, but most of the results talk about installing winutils.exe in the correct place, something I have already done.

I have HADOOP_HOME=C://Tools/winutils, and inside of C://Tools/winutils I have C://Tools/winutils/bin/winutils.exe.  I have also tried putting hadoop.dll inside of that directory, but no luck there either.  I've tried 64-bit winutils, and 32-bit winutils with various versions of each but nothing seems to work.  I am using a 64-bit 1.8 Java JDK, but I've tried 32-bit as well, and still the same error.  I have also tried upgrading Spark to 3.2.3, but that doesn't help either.

Here is the exact line of code that crashes my Spark program:

df.write()
    .option("maxRecordsPerFile", 10000)
    .option("compression", "gzip")
    .mode("overwrite")
    .format(codec)
    .save(parquetDir);

I've tried changing where the save file directory points to, changing the codes from "parquet" to "csv", and I've tried removing each of the .option() options as well.

I'm pretty sure it isn't a permissions issue, as I've used the regular Java file API to create files in that location. Adding the line new File(parquetDir + "/test.txt").createNewFile() creates a new file in parquetDir just fine.

Does anyone have any suggestions for what I can do to fix this issue?  Other people I've spoken with have followed the same directions as me, but it's worked for them, so I can't figure out where I am going wrong.

Here is a little more from the stack trace to give more info:

java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Ljava/lang/String;JJJI)Ljava/io/FileDescriptor;
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Native Method)
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileOutputStreamWithMode(NativeIO.java:556)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:231)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:221)
    at org.apache.hadoop.fs.RawLocalFileSystem.createOutputStreamWithMode(RawLocalFileSystem.java:319)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:307)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:339)
    at org.apache.hadoop.fs.ChecksumFileSystem$ChecksumFSOutputSummer.<init>(ChecksumFileSystem.java:399)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:462)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:441)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:929)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:910)
    at org.apache.parquet.hadoop.util.HadoopOutputFile.create(HadoopOutputFile.java:74)
    at org.apache.parquet.hadoop.ParquetFileWriter.<init>(ParquetFileWriter.java:248)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:390)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:349)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetOutputWriter.<init>(ParquetOutputWriter.scala:37)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetFileFormat$$anon$1.newInstance(ParquetFileFormat.scala:150)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.newOutputWriter(FileFormatDataWriter.scala:126)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.<init>(FileFormatDataWriter.scala:111)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.executeTask(FileFormatWriter.scala:269)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.$anonfun$write$15(FileFormatWriter.scala:210)
    at org.apache.spark.scheduler.ResultTask.runTask(ResultTask.scala:90)
    at org.apache.spark.scheduler.Task.run(Task.scala:127)
    at org.apache.spark.executor.Executor$TaskRunner.$anonfun$run$3(Executor.scala:463)
    at org.apache.spark.util.Utils$.tryWithSafeFinally(Utils.scala:1377)
    at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:466)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)
2022-12-21 15:56:34 WARN  TaskSetManager:69 - Lost task 0.0 in stage 1.0 (TID 1, P23566.ieee.org, executor driver): java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Ljava/lang/String;JJJI)Ljava/io/FileDescriptor;
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Native Method)
    at org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileOutputStreamWithMode(NativeIO.java:556)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:231)
    at org.apache.hadoop.fs.RawLocalFileSystem$LocalFSFileOutputStream.<init>(RawLocalFileSystem.java:221)
    at org.apache.hadoop.fs.RawLocalFileSystem.createOutputStreamWithMode(RawLocalFileSystem.java:319)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:307)
    at org.apache.hadoop.fs.RawLocalFileSystem.create(RawLocalFileSystem.java:339)
    at org.apache.hadoop.fs.ChecksumFileSystem$ChecksumFSOutputSummer.<init>(ChecksumFileSystem.java:399)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:462)
    at org.apache.hadoop.fs.ChecksumFileSystem.create(ChecksumFileSystem.java:441)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:929)
    at org.apache.hadoop.fs.FileSystem.create(FileSystem.java:910)
    at org.apache.parquet.hadoop.util.HadoopOutputFile.create(HadoopOutputFile.java:74)
    at org.apache.parquet.hadoop.ParquetFileWriter.<init>(ParquetFileWriter.java:248)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:390)
    at org.apache.parquet.hadoop.ParquetOutputFormat.getRecordWriter(ParquetOutputFormat.java:349)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetOutputWriter.<init>(ParquetOutputWriter.scala:37)
    at org.apache.spark.sql.execution.datasources.parquet.ParquetFileFormat$$anon$1.newInstance(ParquetFileFormat.scala:150)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.newOutputWriter(FileFormatDataWriter.scala:126)
    at org.apache.spark.sql.execution.datasources.SingleDirectoryDataWriter.<init>(FileFormatDataWriter.scala:111)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.executeTask(FileFormatWriter.scala:269)
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.$anonfun$write$15(FileFormatWriter.scala:210)
    at org.apache.spark.scheduler.ResultTask.runTask(ResultTask.scala:90)
    at org.apache.spark.scheduler.Task.run(Task.scala:127)
    at org.apache.spark.executor.Executor$TaskRunner.$anonfun$run$3(Executor.scala:463)
    at org.apache.spark.util.Utils$.tryWithSafeFinally(Utils.scala:1377)
    at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:466)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
    at java.lang.Thread.run(Thread.java:748)


问:
How to make the tensor shape in decoder as mirror as encoder?
```<code># Load data set
(X_train, _), (X_test, _) = fashion_mnist.load_data()

# Define the input shape
input_shape = (28, 28, 1)
latent_dim = 16

# Define the number of kernels for each convolutional layer
encoder_conv_kernels = [64, 32, 16]
decoder_conv_kernels = [16, 32, 64]

# Define the kernel size for all convolutional layers
kernel_size = (3, 3)

# Define the pool size for all max pooling layers
pool_size = (2, 2)

# Define the up sampling factors for all up sampling layers
up_sampling_factors = (2, 2)

# Define the encoder model
inputs = Input(shape=input_shape, name='encoder_input')
x = inputs

for filters in encoder_conv_kernels:
    x = Conv2D(filters=filters,
               kernel_size=kernel_size,
               activation='relu',
               padding='same')(x)
    x = MaxPool2D(pool_size=pool_size)(x)

# Read and preserve the dimensions of the tensor
shape = backend.int_shape(x)

# Then we have a flattening layer
x = Flatten()(x)

latent_outputs = Dense(latent_dim, name='latent_vector')(x)

# Define the encoder model
encoder = Model(inputs=inputs, outputs=latent_outputs, name='encoder')
encoder.summary()

</code>```

below is what I got from summary, as you can see from 7,7 it became 3,3:

```<code>Model: "encoder"
_________________________________________________________________
 Layer (type)                Output Shape              Param #
=================================================================
 encoder_input (InputLayer)  [(None, 28, 28, 1)]       0

 conv2d_111 (Conv2D)         (None, 28, 28, 64)        640

 max_pooling2d_51 (MaxPoolin  (None, 14, 14, 64)       0
 g2D)

 conv2d_112 (Conv2D)         (None, 14, 14, 32)        18464

 max_pooling2d_52 (MaxPoolin  (None, 7, 7, 32)         0
 g2D)

 conv2d_113 (Conv2D)         (None, 7, 7, 16)          4624

 max_pooling2d_53 (MaxPoolin  (None, 3, 3, 16)         0
 g2D)

 flatten_10 (Flatten)        (None, 144)               0

 latent_vector (Dense)       (None, 16)                2320

=================================================================
Total params: 26,048
Trainable params: 26,048
Non-trainable params: 0
_________________________________________________________________

</code>```

But in decoder, from 3,3 it became 6,6 instead of 7,7

```<code># Define the decoder model
# First we have the input layer
latent_inputs = Input(shape=(latent_dim,), name='decoder_input')
x = Dense(shape[1] * shape[2] * shape[3])(latent_inputs)
x = Reshape((shape[1], shape[2], shape[3]))(x)

for filters in decoder_conv_kernels[::-1]:
    x = Conv2D(filters=filters,
               kernel_size=kernel_size,
               activation='relu',
               padding='same')(x)
    x = UpSampling2D(size=up_sampling_factors)(x)

# Define the output layer with sigmoid activation function
# then we add one more convolutional layer to control the channel dimension
x = Conv2D(filters=1,
                    kernel_size=kernel_size,
                    padding='same')(x)

# and one activation later with the sigmoid activation function
outputs = Activation('sigmoid', name='decoder_output')(x)

# Define the decoder model
decoder = Model(inputs=latent_inputs, outputs=outputs, name='decoder')
decoder.summary(line_length=110)
</code>```

below is what I got from the summary:

```<code>Model: "decoder"
______________________________________________________________________________________________________________
 Layer (type)                                    Output Shape                                Param #
==============================================================================================================
 decoder_input (InputLayer)                      [(None, 16)]                                0

 dense_11 (Dense)                                (None, 144)                                 2448

 reshape_12 (Reshape)                            (None, 3, 3, 16)                            0

 conv2d_114 (Conv2D)                             (None, 3, 3, 64)                            9280

 up_sampling2d_48 (UpSampling2D)                 (None, 6, 6, 64)                            0

 conv2d_115 (Conv2D)                             (None, 6, 6, 32)                            18464

 up_sampling2d_49 (UpSampling2D)                 (None, 12, 12, 32)                          0

 conv2d_116 (Conv2D)                             (None, 12, 12, 16)                          4624

 up_sampling2d_50 (UpSampling2D)                 (None, 24, 24, 16)                          0

 conv2d_117 (Conv2D)                             (None, 24, 24, 1)                           145

 decoder_output (Activation)                     (None, 24, 24, 1)                           0

==============================================================================================================
Total params: 34,961
Trainable params: 34,961
Non-trainable params: 0
______________________________________________________________________________________________________________

</code>```

How can I make it from 3,3 to 7,7 instead of 6,6 in decoder? Thx!

what I expected to happen is in the decoder the output will be 28,28,1 instead of 24, 24,1

Body:
# Load data set
(X_train, _), (X_test, _) = fashion_mnist.load_data()

# Define the input shape
input_shape = (28, 28, 1)
latent_dim = 16

# Define the number of kernels for each convolutional layer
encoder_conv_kernels = [64, 32, 16]
decoder_conv_kernels = [16, 32, 64]

# Define the kernel size for all convolutional layers
kernel_size = (3, 3)

# Define the pool size for all max pooling layers
pool_size = (2, 2)

# Define the up sampling factors for all up sampling layers
up_sampling_factors = (2, 2)

# Define the encoder model
inputs = Input(shape=input_shape, name='encoder_input')
x = inputs

for filters in encoder_conv_kernels:
    x = Conv2D(filters=filters,
               kernel_size=kernel_size,
               activation='relu',
               padding='same')(x)
    x = MaxPool2D(pool_size=pool_size)(x)

# Read and preserve the dimensions of the tensor
shape = backend.int_shape(x)

# Then we have a flattening layer
x = Flatten()(x)

latent_outputs = Dense(latent_dim, name='latent_vector')(x)

# Define the encoder model
encoder = Model(inputs=inputs, outputs=latent_outputs, name='encoder')
encoder.summary()

below is what I got from summary, as you can see from 7,7 it became 3,3:

Model: "encoder"
_________________________________________________________________
 Layer (type)                Output Shape              Param #
=================================================================
 encoder_input (InputLayer)  [(None, 28, 28, 1)]       0

 conv2d_111 (Conv2D)         (None, 28, 28, 64)        640

 max_pooling2d_51 (MaxPoolin  (None, 14, 14, 64)       0
 g2D)

 conv2d_112 (Conv2D)         (None, 14, 14, 32)        18464

 max_pooling2d_52 (MaxPoolin  (None, 7, 7, 32)         0
 g2D)

 conv2d_113 (Conv2D)         (None, 7, 7, 16)          4624

 max_pooling2d_53 (MaxPoolin  (None, 3, 3, 16)         0
 g2D)

 flatten_10 (Flatten)        (None, 144)               0

 latent_vector (Dense)       (None, 16)                2320

=================================================================
Total params: 26,048
Trainable params: 26,048
Non-trainable params: 0
_________________________________________________________________

But in decoder, from 3,3 it became 6,6 instead of 7,7

# Define the decoder model
# First we have the input layer
latent_inputs = Input(shape=(latent_dim,), name='decoder_input')
x = Dense(shape[1] * shape[2] * shape[3])(latent_inputs)
x = Reshape((shape[1], shape[2], shape[3]))(x)

for filters in decoder_conv_kernels[::-1]:
    x = Conv2D(filters=filters,
               kernel_size=kernel_size,
               activation='relu',
               padding='same')(x)
    x = UpSampling2D(size=up_sampling_factors)(x)

# Define the output layer with sigmoid activation function
# then we add one more convolutional layer to control the channel dimension
x = Conv2D(filters=1,
                    kernel_size=kernel_size,
                    padding='same')(x)

# and one activation later with the sigmoid activation function
outputs = Activation('sigmoid', name='decoder_output')(x)

# Define the decoder model
decoder = Model(inputs=latent_inputs, outputs=outputs, name='decoder')
decoder.summary(line_length=110)

below is what I got from the summary:

Model: "decoder"
______________________________________________________________________________________________________________
 Layer (type)                                    Output Shape                                Param #
==============================================================================================================
 decoder_input (InputLayer)                      [(None, 16)]                                0

 dense_11 (Dense)                                (None, 144)                                 2448

 reshape_12 (Reshape)                            (None, 3, 3, 16)                            0

 conv2d_114 (Conv2D)                             (None, 3, 3, 64)                            9280

 up_sampling2d_48 (UpSampling2D)                 (None, 6, 6, 64)                            0

 conv2d_115 (Conv2D)                             (None, 6, 6, 32)                            18464

 up_sampling2d_49 (UpSampling2D)                 (None, 12, 12, 32)                          0

 conv2d_116 (Conv2D)                             (None, 12, 12, 16)                          4624

 up_sampling2d_50 (UpSampling2D)                 (None, 24, 24, 16)                          0

 conv2d_117 (Conv2D)                             (None, 24, 24, 1)                           145

 decoder_output (Activation)                     (None, 24, 24, 1)                           0

==============================================================================================================
Total params: 34,961
Trainable params: 34,961
Non-trainable params: 0
______________________________________________________________________________________________________________

How can I make it from 3,3 to 7,7 instead of 6,6 in decoder? Thx!

what I expected to happen is in the decoder the output will be 28,28,1 instead of 24, 24,1


问:
Modify inner html of text in a mat input Angular
Say you have a mat input text area, the user enters some text, highlights some of that text, hits CRTL + B is it possible to do the following...

Change the markup for the text user highlighted to be bold. So it shows bold to the user.

Store that formatted text in the database, so it can later be pulled and injected using the innerHTML attribute

Just wasn't sure if this is even possible, I know you can achieve this on a bog standard html input, but I wondered if it's a bit more involved when using Angular framework?


问:
Conflict between selectable text and react-native-gesture-handler
I'm creating a bottom sheet with selectable text in it. When I want to scroll my bottom sheet, the text gets selected.
I want to know if I can fix it inside my component. I suspect it comes from how I handle the scroll.

Here is a minimal reproduction of my component on Snack, with the bug visible (use Web Version not Android/IOS)

https://snack.expo.dev/@kennyledev/conflict-between-selectable-text-and-react-native-gesture-handler


问:
Drop Animation Function for connect four game in JS and SVG
I'm new to programming and currently trying my hand at a project. My code is certainly not good, however, I would like to have a function for my game, with which I can throw a chip in each column, in which I click on the top of the respective button. Is my approach completely wrong or is it possible to work with the current state? Would be glad about tips

body {
  background-color: #cecece;
}

h1 {
  background-color: rgb(205, 169, 247);
  border: 3px solid black;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #000000;
}

h3 {
  background-color: #fabd68;
  border: 3px solid black;
  padding: 15px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  width: 400px;
}

.button {
  display: inline-block;
  padding: 10px 10px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: #e26262;
  border: 2px solid;
  border-radius: 10px;
}

.button:hover {
  background-color: #3e8e41
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

p {
  background-color: #85e4a1;
  border: 3px dotted black;
  border-radius: 8px;
  padding: 25px;
  text-align: left;
  width: 600px;
  height: 150px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  margin-left: 900px;
  margin-top: -210px;
}

h4 {
  background-color: rgb(148, 203, 240);
  border: 2px solid black;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  width: 900px;
  margin-top: 70px;
}

.A {
  offset-path: path('M 80 -10 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70');
  offset-distance: 0%;
  animation: red-ball 1s linear;
  animation-iteration-count: 1;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

.A:hover {
  fill: #68fa88;
}

.B:hover {
  fill: #68fa88;
}

.C:hover {
  fill: #68fa88;
}

.D:hover {
  fill: #68fa88;
}

.E:hover {
  fill: #68fa88;
}

.F:hover {
  fill: #68fa88;
}

.G:hover {
  fill: #68fa88;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>My first webpage</title>
  <link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
  <link rel='stylesheet' href='style.css'>
  <script src='main.js' charset="utf-8"></script>
</head>

<body>
  <svg width="550" height="500">
    <path class="line1" d="M 45 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line2" d="M 115 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line3" d="M 185 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line4" d="M 255 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line5" d="M 325 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line6" d="M 395 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line7" d="M 465 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />

    <circle class="A"cx="45" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
    <circle class="B"cx="115" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="C"cx="185" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="D"cx="255" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="E"cx="325" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="F"cx="395" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="G"cx="465" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />

    <rect class="col1 row1" x="10" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos1/1"cx="45" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col2 row1" x="80" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos2/1"cx="115" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col3 row1" x="150" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos3/1"cx="185" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col4 row1" x="220" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos4/1"cx="255" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col5 row1" x="290" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos5/1"cx="325" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col6 row1" x="360" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos6/1"cx="395" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col7 row1" x="430" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos7/1"cx="465" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col1 row2" x="10" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos1/2"cx="45" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col2 row2" x="80" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos2/2"cx="115" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col3 row2" x="150" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos3/2"cx="185" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col4 row2" x="220" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos4/2"cx="255" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col5 row2" x="290" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos5/2"cx="325" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col6 row2" x="360" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos6/2"cx="395" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col7 row2" x="430" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos7/2"cx="465" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col1 row3" x="10" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col2 row3" x="80" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col3 row3" x="150" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col4 row3" x="220" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col5 row3" x="290" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col6 row3" x="360" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col7 row3" x="430" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col1 row4" x="10" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row4" x="80" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row4" x="150" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row4" x="220" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row4" x="290" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row4" x="360" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row4" x="430" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />

    <rect class="col1 row5" x="10" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row5" x="80" y="350" width="70" height="70"70
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row5" x="150" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row5" x="220" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row5" x="290" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row5" x="360" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row5" x="430" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col1 row6" x="10" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row6" x="80" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row6" x="150" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row6" x="220" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row6" x="290" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row6" x="360" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row6" x="430" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
  </svg>
</body>

</html></code>```

It's the first time I use StackOverflow, I hope it's right.
I've tried to create a path and run the animation and for the first 2 rows I have invisible circles where I thought that these should then become visible so that a circle remains inside. After several hours I am just completely stumped.

Body:
I'm new to programming and currently trying my hand at a project. My code is certainly not good, however, I would like to have a function for my game, with which I can throw a chip in each column, in which I click on the top of the respective button. Is my approach completely wrong or is it possible to work with the current state? Would be glad about tips

body {
  background-color: #cecece;
}

h1 {
  background-color: rgb(205, 169, 247);
  border: 3px solid black;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #000000;
}

h3 {
  background-color: #fabd68;
  border: 3px solid black;
  padding: 15px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  width: 400px;
}

.button {
  display: inline-block;
  padding: 10px 10px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: #e26262;
  border: 2px solid;
  border-radius: 10px;
}

.button:hover {
  background-color: #3e8e41
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

p {
  background-color: #85e4a1;
  border: 3px dotted black;
  border-radius: 8px;
  padding: 25px;
  text-align: left;
  width: 600px;
  height: 150px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  margin-left: 900px;
  margin-top: -210px;
}

h4 {
  background-color: rgb(148, 203, 240);
  border: 2px solid black;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  width: 900px;
  margin-top: 70px;
}

.A {
  offset-path: path('M 80 -10 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70');
  offset-distance: 0%;
  animation: red-ball 1s linear;
  animation-iteration-count: 1;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

.A:hover {
  fill: #68fa88;
}

.B:hover {
  fill: #68fa88;
}

.C:hover {
  fill: #68fa88;
}

.D:hover {
  fill: #68fa88;
}

.E:hover {
  fill: #68fa88;
}

.F:hover {
  fill: #68fa88;
}

.G:hover {
  fill: #68fa88;
}

<!DOCTYPE html>

  <meta charset='utf-8' />
  <title>My first webpage</title>
  <link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
  <link rel='stylesheet' href='style.css'>

  <svg width="550" height="500">
    <path class="line1" d="M 45 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line2" d="M 115 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line3" d="M 185 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line4" d="M 255 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line5" d="M 325 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line6" d="M 395 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
    <path class="line7" d="M 465 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />

    <circle class="A"cx="45" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
    <circle class="B"cx="115" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="C"cx="185" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="D"cx="255" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="E"cx="325" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="F"cx="395" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
    <circle class="G"cx="465" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />

    <rect class="col1 row1" x="10" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos1/1"cx="45" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col2 row1" x="80" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos2/1"cx="115" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col3 row1" x="150" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos3/1"cx="185" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col4 row1" x="220" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos4/1"cx="255" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col5 row1" x="290" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos5/1"cx="325" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col6 row1" x="360" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos6/1"cx="395" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col7 row1" x="430" y="70" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos7/1"cx="465" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col1 row2" x="10" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos1/2"cx="45" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col2 row2" x="80" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos2/2"cx="115" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col3 row2" x="150" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos3/2"cx="185" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col4 row2" x="220" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos4/2"cx="255" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col5 row2" x="290" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos5/2"cx="325" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col6 row2" x="360" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos6/2"cx="395" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col7 row2" x="430" y="140" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <circle style="visibility:hidden" class="Pos7/2"cx="465" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>

    <rect class="col1 row3" x="10" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col2 row3" x="80" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col3 row3" x="150" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col4 row3" x="220" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col5 row3" x="290" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col6 row3" x="360" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect  class="col7 row3" x="430" y="210" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col1 row4" x="10" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row4" x="80" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row4" x="150" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row4" x="220" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row4" x="290" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row4" x="360" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row4" x="430" y="280" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />

    <rect class="col1 row5" x="10" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row5" x="80" y="350" width="70" height="70"70
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row5" x="150" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row5" x="220" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row5" x="290" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row5" x="360" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row5" x="430" y="350" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col1 row6" x="10" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col2 row6" x="80" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col3 row6" x="150" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col4 row6" x="220" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col5 row6" x="290" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col6 row6" x="360" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
    <rect class="col7 row6" x="430" y="420" width="70" height="70"
    style="fill:none;stroke:black;stroke-width:5;opacity:1" />
  </svg>

It's the first time I use StackOverflow, I hope it's right.
I've tried to create a path and run the animation and for the first 2 rows I have invisible circles where I thought that these should then become visible so that a circle remains inside. After several hours I am just completely stumped.


问:
GitHub mark my separate add and delete files as moved
I added some new files in the first commit. Later I deleted some other files in another commit. When I check all my changes in the Files changed section, I find that Github mistakenly consider I renamed the deleted files. How can I fix this?


问:
Google signIn is ignoring authorized Redirect URI's
I created a Google Cloud project to use the new Google sign in functionality, I added http://localhost:5000 as the only authorized redirect URI under the Oauth 2.0 credentials manager (for testing purposes obviously), however when I write the HTML for the button, I can put any data-login_uri an it will redirect to that URI after a succesfull login.

I was expecting a redirect_uri_mismatch error when I tried to change that URI but its not happening, it will redirect to any URI i put there. I'm not sure if I'm misunderstanding the functionality of the "Authorized redirect URIs", if its something that doesn's get evaluated when the origin is a localhost, or if I'm missing something else. Thanks.

[EDIT]
This is the code snippet to display the button

```<code><div class="form-row">
    <script src="https://accounts.google.com/gsi/client"></script>
    <div id="g_id_onload"
        data-client_id="xxxxx"
        data-login_uri="https://www.example.com"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
</code>```

localhost:5000 is the only URI on my project "Authorized redirect URIs
" configuration, so, if I'm redirecting to any place but localhost:5000 I should get a redirect_uri_mismatch error right?

Body:
I created a Google Cloud project to use the new Google sign in functionality, I added http://localhost:5000 as the only authorized redirect URI under the Oauth 2.0 credentials manager (for testing purposes obviously), however when I write the HTML for the button, I can put any data-login_uri an it will redirect to that URI after a succesfull login.

I was expecting a redirect_uri_mismatch error when I tried to change that URI but its not happening, it will redirect to any URI i put there. I'm not sure if I'm misunderstanding the functionality of the "Authorized redirect URIs", if its something that doesn's get evaluated when the origin is a localhost, or if I'm missing something else. Thanks.

[EDIT]
This is the code snippet to display the button

localhost:5000 is the only URI on my project "Authorized redirect URIs
" configuration, so, if I'm redirecting to any place but localhost:5000 I should get a redirect_uri_mismatch error right?


问:
failed to resolve import error while compiling
I upgraded my version of vaadin from 23.0.2 to 23.3.1, my code always worked fine with vaadin 23.0.2. After upgrading, i cannot compile my project any more. While building the frontend I get the following error:

Rollup failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js".

The complete stacktrace:

```<code>[ERROR] error during build:
[ERROR] Error: [vite]: Rollup failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js".
[ERROR] This is most likely unintended because it can break your application at runtime.
[ERROR] If you do want to externalize this module explicitly add it to
[ERROR] `build.rollupOptions.external`
[ERROR]     at onRollupWarning (file:///C:/bosa/workspaces/my-app/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45526:19)
[ERROR]     at onwarn (file:///C:/bosa/workspaces/my-app/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45297:13)
[ERROR]     at Object.onwarn (file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
[ERROR]     at ModuleLoader.handleResolveId (file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
[ERROR]     at file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:22119:26
[ERROR] ': Unexpected exit value: 1, allowed exit values: [0], executed command [C:\Program Files\nodejs\node.exe, C:\bosa\workspaces\my-app\node_modules\vite\bin\vite.js, build] in directory C:\bosa\workspaces\my-app with environment {USERDOMAIN_ROAMINGPROFILE=DESKTOP-ETHGK19, PROCESSOR_LEVEL=6, SESSIONNAME=Console, ALLUSERSPROFILE=C:\ProgramData, PROCESSOR_ARCHITECTURE=AMD64,
</code>```

I checked my node_modules folder and vaadin-combo-box-dropdown.js is missing. I cleaned everything, my target folder and my node_modules folder, but the error keeps on occuring. Could anyone help me?

Body:
I upgraded my version of vaadin from 23.0.2 to 23.3.1, my code always worked fine with vaadin 23.0.2. After upgrading, i cannot compile my project any more. While building the frontend I get the following error:

Rollup failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js".

The complete stacktrace:

[ERROR] error during build:
[ERROR] Error: [vite]: Rollup failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js".
[ERROR] This is most likely unintended because it can break your application at runtime.
[ERROR] If you do want to externalize this module explicitly add it to
[ERROR] `build.rollupOptions.external`
[ERROR]     at onRollupWarning (file:///C:/bosa/workspaces/my-app/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45526:19)
[ERROR]     at onwarn (file:///C:/bosa/workspaces/my-app/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45297:13)
[ERROR]     at Object.onwarn (file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
[ERROR]     at ModuleLoader.handleResolveId (file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
[ERROR]     at file:///C:/bosa/workspaces/my-app/node_modules/rollup/dist/es/shared/rollup.js:22119:26
[ERROR] ': Unexpected exit value: 1, allowed exit values: [0], executed command [C:\Program Files\nodejs\node.exe, C:\bosa\workspaces\my-app\node_modules\vite\bin\vite.js, build] in directory C:\bosa\workspaces\my-app with environment {USERDOMAIN_ROAMINGPROFILE=DESKTOP-ETHGK19, PROCESSOR_LEVEL=6, SESSIONNAME=Console, ALLUSERSPROFILE=C:\ProgramData, PROCESSOR_ARCHITECTURE=AMD64,

I checked my node_modules folder and vaadin-combo-box-dropdown.js is missing. I cleaned everything, my target folder and my node_modules folder, but the error keeps on occuring. Could anyone help me?


问:
How do I enable autocompletion in jupyterlab?
I need to enable jupyterlab autocompletion. But when trying to install via command "pip install jupyter_contrib_nbextensions", it seems to be incompatible with Python 3.11.</p>


问:
How to sync Outlook Calendar with OneNote?
I found VBA code to sync my Outlook calendar with OneNote.

On line 7, I get

User-defined type not defined.

I have One Note 15 and Outlook 16 selected in references.

Sub SyncCalendarWithOneNote()
  Dim olApp As Outlook.Application
  Dim olCalendar As Outlook.Folder
  Dim olItems As Outlook.Items
  Dim olItem As Object
  Dim onApp As OneNote.Application
  Dim onNotebook As OneNote.Notebook
  Dim onSection As OneNote.Section
  Dim onPage As OneNote.Page
  Dim onPageContent As String
  Dim onPageID As String

  ' Connect to Outlook and OneNote
  Set olApp = Outlook.Application
  Set onApp = OneNote.Application

  ' Get the calendar folder and its items
  Set olCalendar = olApp.Session.GetDefaultFolder(olFolderCalendar)
  Set olItems = olCalendar.Items

  ' Loop through the calendar items
  For Each olItem In olItems
    ' Check if the item is an appointment
    If TypeOf olItem Is Outlook.AppointmentItem Then
      ' Get the appointment information
      Dim olSubject As String
      Dim olStart As Date
      Dim olEnd As Date
      olSubject = olItem.Subject
      olStart = olItem.Start
      olEnd = olItem.End

      ' Create a OneNote page for the appointment
      Set onNotebook = onApp.ActiveNotebook
      Set onSection = onNotebook.Sections("Calendar")
      onApp.CreateNewPage Onenote.nsHierarchyScopeSection, onSection.ID, onPageID
      Set onPage = onApp.GetPageContent(onPageID)
      onPageContent = "Subject: " & olSubject & vbCrLf & _
                      "Start: " & olStart & vbCrLf & _
                      "End: " & olEnd
      onApp.UpdatePageContent onPage.ID, onPageContent
    End If
  Next

  ' Clean up
  Set olCalendar = Nothing
  Set olItems = Nothing
  Set olItem = Nothing
  Set onApp = Nothing
  Set onNotebook = Nothing
  Set onSection = Nothing
  Set onPage = Nothing
End Sub
```

I want to sync Outlook Calendar with OneNote where a new note will be created for each calendar event.

Body:
I found VBA code to sync my Outlook calendar with OneNote.

On line 7, I get

User-defined type not defined.

I have One Note 15 and Outlook 16 selected in references.

Sub SyncCalendarWithOneNote()
  Dim olApp As Outlook.Application
  Dim olCalendar As Outlook.Folder
  Dim olItems As Outlook.Items
  Dim olItem As Object
  Dim onApp As OneNote.Application
  Dim onNotebook As OneNote.Notebook
  Dim onSection As OneNote.Section
  Dim onPage As OneNote.Page
  Dim onPageContent As String
  Dim onPageID As String

  ' Connect to Outlook and OneNote
  Set olApp = Outlook.Application
  Set onApp = OneNote.Application

  ' Get the calendar folder and its items
  Set olCalendar = olApp.Session.GetDefaultFolder(olFolderCalendar)
  Set olItems = olCalendar.Items

  ' Loop through the calendar items
  For Each olItem In olItems
    ' Check if the item is an appointment
    If TypeOf olItem Is Outlook.AppointmentItem Then
      ' Get the appointment information
      Dim olSubject As String
      Dim olStart As Date
      Dim olEnd As Date
      olSubject = olItem.Subject
      olStart = olItem.Start
      olEnd = olItem.End

      ' Create a OneNote page for the appointment
      Set onNotebook = onApp.ActiveNotebook
      Set onSection = onNotebook.Sections("Calendar")
      onApp.CreateNewPage Onenote.nsHierarchyScopeSection, onSection.ID, onPageID
      Set onPage = onApp.GetPageContent(onPageID)
      onPageContent = "Subject: " & olSubject & vbCrLf & _
                      "Start: " & olStart & vbCrLf & _
                      "End: " & olEnd
      onApp.UpdatePageContent onPage.ID, onPageContent
    End If
  Next

  ' Clean up
  Set olCalendar = Nothing
  Set olItems = Nothing
  Set olItem = Nothing
  Set onApp = Nothing
  Set onNotebook = Nothing
  Set onSection = Nothing
  Set onPage = Nothing
End Sub

I want to sync Outlook Calendar with OneNote where a new note will be created for each calendar event.


问:
TypeError: 'filter' object is not iterable when using lambda function with yield
I'm trying to use a lambda function with yield inside a generator function to filter a sequence of numbers and return only the even ones. However, I'm getting a TypeError when I try to yield from the result of the filter function. Here is my current code:

```<code>def generate_even_numbers(n):
    even_numbers = filter(lambda x: x % 2 == 0, range(n))
    yield from even_numbers

for num in generate_even_numbers(10):
    print(num)
</code>```

I'm getting this error message:

```<code>TypeError: 'filter' object is not iterable
</code>```

I've tried converting the filter object to a list using the list function, but that didn't fix the issue. Can someone explain what is wrong and how can I fix it?

Body:
I'm trying to use a lambda function with yield inside a generator function to filter a sequence of numbers and return only the even ones. However, I'm getting a TypeError when I try to yield from the result of the filter function. Here is my current code:

def generate_even_numbers(n):
    even_numbers = filter(lambda x: x % 2 == 0, range(n))
    yield from even_numbers

for num in generate_even_numbers(10):
    print(num)

I'm getting this error message:

TypeError: 'filter' object is not iterable

I've tried converting the filter object to a list using the list function, but that didn't fix the issue. Can someone explain what is wrong and how can I fix it?


问:
Error trying to execute react frontend (linked to backend)
I have recently tried to deploy a app consisting of react frontend and node backend on a linux machine.
While executing the frontend i got the following error:
(I used the command npm start)

```<code>node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:3000' ]
}

Node.js v18.12.1

</code>```

Body:
I have recently tried to deploy a app consisting of react frontend and node backend on a linux machine.
While executing the frontend i got the following error:
(I used the command npm start)

node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:3000' ]
}

Node.js v18.12.1


问:
Selected Value of Select2
I have an option where I can select an option from a select2 dropdown and when I click save it saves to the database and also display as an editable dropdown as a list below where I could update it if required. How can I show the already selected value of this editable dropdown?

This is what I tried. So within this td tag is the 2nd select2 which should show the selected value from above select2 dropdown. The select2 dropdown option is called via an api function.

```<code>       $display .= '<td>';

       $display .= "<span class='printonly'>" . htmlentities($cell) . "</span>

      <select class='select2' name='select2' placeholder = 'SELECT a $column' onchange='updateData(this)'>";

      $display .= "<option value='' selected disabled></option>";

     // $display .= "<option value = $('.select2').find(':selected')> </option>";
      $display .= "</select>";
      $display .= '</td>';
</code>```

Title: Selected Value of Select2

Body:
I have an option where I can select an option from a select2 dropdown and when I click save it saves to the database and also display as an editable dropdown as a list below where I could update it if required. How can I show the already selected value of this editable dropdown?

This is what I tried. So within this td tag is the 2nd select2 which should show the selected value from above select2 dropdown. The select2 dropdown option is called via an api function.

       $display .= '';

       $display .= "" . htmlentities($cell) . "

      <select class='select2' name='select2' placeholder = 'SELECT a $column' onchange='updateData(this)'>";

      $display .= "<option value='' selected disabled></option>";

     // $display .= "<option value = $('.select2').find(':selected')> </option>";
      $display .= "</select>";
      $display .= '	';


问:
Inconsistent default logarithm base in sqlite3
I've been experiencing an issue where SQLite's log function returns inconsistent results between PyCharm's Query console and when running the same query in python environments. The code where I first spotted this used SQLAlchemy, but it can also be seen using sqlite3 module here:

```<code>>>> from sqlite3 import connect
>>> cur = connect("data/db.sqlite3").cursor()
>>> print(cur.execute("select log(10);").fetchall())
[(0.9999999999999999,)]
</code>```

When executed in python, log(x) is always evaluated as base 10 logarithm, as specified in SQLite documentation:

Return the base-10 logarithm for X. Or, for the two-argument version, return the base-B logarithm of X.

However, when I run the same query in PyCharm's query console, it returns the natural log.

```<code>+-----------------+
|log(10)          |
+-----------------+
|2.302585092994046|
+-----------------+
</code>```

Why is this happening, and how do I ensure that my queries are evaluated consistently across all environments?

Body:
I've been experiencing an issue where SQLite's log function returns inconsistent results between PyCharm's Query console and when running the same query in python environments. The code where I first spotted this used SQLAlchemy, but it can also be seen using sqlite3 module here:

>>> from sqlite3 import connect
>>> cur = connect("data/db.sqlite3").cursor()
>>> print(cur.execute("select log(10);").fetchall())
[(0.9999999999999999,)]

When executed in python, log(x) is always evaluated as base 10 logarithm, as specified in SQLite documentation:

Return the base-10 logarithm for X. Or, for the two-argument version, return the base-B logarithm of X.

However, when I run the same query in PyCharm's query console, it returns the natural log.

+-----------------+
|log(10)          |
+-----------------+
|2.302585092994046|
+-----------------+

Why is this happening, and how do I ensure that my queries are evaluated consistently across all environments?


问:
Captive portal URL voucher submission with JQUERY MOBILE custom portal page
I've custom portal in pfSense CP. If try to access via URL (eg. http://pfsense.com/index.php?zone=myzone&voucher=XXXXX&accept=continue ) nothing goes as expect, is only showed the login page (customized with jquery mobile), this is my custom page html:

```<code><!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Accesso alla rete ANM</title>
  <link rel="stylesheet" href="captiveportal-jquery.mobile-1.4.5.min.css" />
  <script src="captiveportal-jquery-1.11.1.min.js"></script>
  <script src="captiveportal-jquery.mobile-1.4.5.min.js"></script>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<style>
  .mainDiv{
    margin: auto;
    padding: 5px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-radius: 10px;

  }
  .login-p{
    margin: auto;
    padding: 5px;
    text-align: center;
  }
  .login-error{
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <div class="mainDiv">
  <form method="post" action="$PORTAL_ACTION$" class="login" data-ajax="false">
    <table><tr><td><img src="captiveportal-LogoFirma.png" width="50%"/></td><td><b>Autenticazione</b></td></tr></table>

    <p class="login-p">Inserire Utente/ Password o Voucher</p>
    <input type="text" data-role="input" name="auth_user"  placeholder="Username" >
    <input type="password" data-role="input" name="auth_pass"  placeholder="Password">
    <p class="login-p">Oppure</p>
    <input type="text" data-role="input" name="auth_voucher"  placeholder="Codice Voucher" >
    <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
    <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    <input type="submit" name="accept" value="Continua" class="login-submit">
    <p class="footer">2023 A.N.M. Azienda Napoletana MobilitÃ  </p>
   </form>
  </div>
</body>
</html>
</code>```

but if I resume defaul login portal page, all works as expect.

What i'm wrong?

I expecting that captive portal login page URL submit voucher code and grant access to user

Body:
I've custom portal in pfSense CP. If try to access via URL (eg. http://pfsense.com/index.php?zone=myzone&voucher=XXXXX&accept=continue ) nothing goes as expect, is only showed the login page (customized with jquery mobile), this is my custom page html:

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Accesso alla rete ANM</title>
  <link rel="stylesheet" href="captiveportal-jquery.mobile-1.4.5.min.css" />

  <form method="post" action="$PORTAL_ACTION$" class="login" data-ajax="false">

	Autenticazione

Inserire Utente/ Password o Voucher

    <input type="text" data-role="input" name="auth_user"  placeholder="Username" >
    <input type="password" data-role="input" name="auth_pass"  placeholder="Password">

Oppure

    <input type="text" data-role="input" name="auth_voucher"  placeholder="Codice Voucher" >
    <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
    <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    <input type="submit" name="accept" value="Continua" class="login-submit">

2023 A.N.M. Azienda Napoletana MobilitÃ

   </form>

but if I resume defaul login portal page, all works as expect.

What i'm wrong?

I expecting that captive portal login page URL submit voucher code and grant access to user


问:
Invalid device error while recording sound with Port audio
I am using port audio 19 to record sound on my Windows 10 system.

Now the issue is that one of my devices (Jabra headphone) is shown as compatible for 2 different host API types (MME and Windows WDM-KS) but when I try to record sound through the device for host API Windows WDM-KS, the Pa_Openstream call fails with error Invalid Device (-9996).
Am I missing something while checking for compatibility? Ideally if the device is shown twice then it should also be able to record with both the options.
Also I would like to display the device only once in drop down. I can just check if the name is already present in the drop down but I would prefer if I could filter at the time of populating the deviceList itself. Is there any method other than just checking the name already present in the list?

I am using this code to populate the audio input devices in a drop down.

```<code>struct DeviceInfo
{
    QString name;
    int index;
}

QList<DeviceInfo> deviceList;

const PaDeviceIndex deviceCount = Pa_GetDeviceCount();
for (int i = 0; i < deviceCount; ++i)
{
    const PaDeviceInfo* device = Pa_GetDeviceInfo((PaDeviceIndex)i);

    if (device && device->maxInputChannels > 0)
    {
        if (IsInputDeviceCompatible(i))
        {
            DeviceInfo info;
            info.index = i;
            info.name = device->name;

            deviceList.push_back(info);
        }
    }
}

bool IsInputDeviceCompatible(int index)
{
    PaStreamParameters inputParam;
    inputParam.device = index;
    inputParam.channelCount = 1;
    inputParam.sampleFormat = paInt16;
    inputParam.hostApiSpecificStreamInfo = 0;
    inputParam.suggestedLatency = 0;

    PaError err = Pa_IsFormatSupported(&inputParam, nullptr, 22050);

    return err == paNoError;
}
</code>```

Body:
I am using port audio 19 to record sound on my Windows 10 system.

Now the issue is that one of my devices (Jabra headphone) is shown as compatible for 2 different host API types (MME and Windows WDM-KS) but when I try to record sound through the device for host API Windows WDM-KS, the Pa_Openstream call fails with error Invalid Device (-9996).
Am I missing something while checking for compatibility? Ideally if the device is shown twice then it should also be able to record with both the options.
Also I would like to display the device only once in drop down. I can just check if the name is already present in the drop down but I would prefer if I could filter at the time of populating the deviceList itself. Is there any method other than just checking the name already present in the list?

I am using this code to populate the audio input devices in a drop down.

struct DeviceInfo
{
    QString name;
    int index;
}

QList<DeviceInfo> deviceList;

const PaDeviceIndex deviceCount = Pa_GetDeviceCount();
for (int i = 0; i < deviceCount; ++i)
{
    const PaDeviceInfo* device = Pa_GetDeviceInfo((PaDeviceIndex)i);

    if (device && device->maxInputChannels > 0)
    {
        if (IsInputDeviceCompatible(i))
        {
            DeviceInfo info;
            info.index = i;
            info.name = device->name;

            deviceList.push_back(info);
        }
    }
}

bool IsInputDeviceCompatible(int index)
{
    PaStreamParameters inputParam;
    inputParam.device = index;
    inputParam.channelCount = 1;
    inputParam.sampleFormat = paInt16;
    inputParam.hostApiSpecificStreamInfo = 0;
    inputParam.suggestedLatency = 0;

    PaError err = Pa_IsFormatSupported(&inputParam, nullptr, 22050);

    return err == paNoError;
}


问:
How to seamlessly play a bunch of mp3 using AudioContext API?
I need to play an array of mp3 files one after another. What I tried for now is using AudioContext API.

Here I'm preparing audio buffers from local files (audio_buffer_array is just an array of path strings):

```<code>const audio_buffer_array = await Promise.all(
  audio_array.map(async src => {
    const data = await fetch(src)
    return audio_ctx.decodeAudioData(await data.arrayBuffer())
  })
)
</code>```

Then I try to play it:

```<code>function startSession() {
let time = audio_ctx.currentTime

for (let audio_buffer of audio_buffer_array) {
    const source = audio_ctx.createBufferSource()
    source.buffer = audio_buffer
    source.connect(audio_ctx.destination)

    source.start(time)

    time += audio_buffer.duration - .03
}
}
</code>```

And it working absolutely fine, but I have to use that magic .03 number, which is not reliable and still not sound seamless to me, but it is the best I can get for now. Audio files just overlaps a little and it makes gap between them (which would be there if I don't subtract the magic number) becomes less noticeable. But it still there and I am pretty sure it could be done much better and clearer.

UPD: I am not sure if AudioContext is required here, just tried more low-level approach. But the result is exact the same as if I use regular approach with const audio = new Audio(path) with ended listener.

Body:
I need to play an array of mp3 files one after another. What I tried for now is using AudioContext API.

Here I'm preparing audio buffers from local files (audio_buffer_array is just an array of path strings):

const audio_buffer_array = await Promise.all(
  audio_array.map(async src => {
    const data = await fetch(src)
    return audio_ctx.decodeAudioData(await data.arrayBuffer())
  })
)

Then I try to play it:

function startSession() {
let time = audio_ctx.currentTime

for (let audio_buffer of audio_buffer_array) {
    const source = audio_ctx.createBufferSource()
    source.buffer = audio_buffer
    source.connect(audio_ctx.destination)

    source.start(time)

    time += audio_buffer.duration - .03
}
}

And it working absolutely fine, but I have to use that magic .03 number, which is not reliable and still not sound seamless to me, but it is the best I can get for now. Audio files just overlaps a little and it makes gap between them (which would be there if I don't subtract the magic number) becomes less noticeable. But it still there and I am pretty sure it could be done much better and clearer.

UPD: I am not sure if AudioContext is required here, just tried more low-level approach. But the result is exact the same as if I use regular approach with const audio = new Audio(path) with ended listener.


问:
Mask-RCNN, Tensorflow 2.11.0, TypeError - TypeSpec
I am trying to get the TF2 mask-rcnn from here: https://github.com/ahmedfgad/Mask-RCNN-TF2 to function with Tensorflow==2.11.0 and Keras==2.11.0.

I am unable to get past an error with rekards to KL.Lambda in the def build(self, mode, config) function around line 1873 in models.py.

Exact error:

```<code>Traceback (most recent call last):
  File "/mnt/gluster-vol1/Source/d2/./d2.py", line 43, in <module>
    d2.train()
  File "/mnt/gluster-vol1/Source/d2/autoAnnotate.py", line 387, in train
    model = MaskRCNN(mode='training',model_dir='./training_results/',config=config)
  File "/mnt/gluster-vol1/Source/d2/mrcnn/model.py", line 1837, in __init__
    self.keras_model = self.build(mode=mode, config=config)
  File "/mnt/gluster-vol1/Source/d2/mrcnn/model.py", line 1873, in build
    gt_boxes = KL.Lambda(lambda x: norm_boxes_graph(x, K.shape(input_image)[1:3]))(input_gt_boxes)
  File "/home/user/env/py31/lib/python3.10/site-packages/keras/utils/traceback_utils.py", line 70, in error_handler
    raise e.with_traceback(filtered_tb) from None
  File "/home/user/env/py31/lib/python3.10/site-packages/tensorflow/python/framework/type_spec.py", line 925, in type_spec_from_value
    raise TypeError(f"Could not build a TypeSpec for {value} of "
TypeError: Could not build a TypeSpec for KerasTensor(type_spec=TensorSpec(shape=(None, None, 4), dtype=tf.float32, name=None), name='tf.math.truediv/truediv:0', description="created by layer 'tf.math.truediv'") of unsupported type <class 'keras.engine.keras_tensor.KerasTensor'>.
</code>```

I have tried to use tf.convert_to_tensor on the function in the KL.Lambda layer, I have tried it on the input_gt_boxes layer and several other places, nothing works. If I build just the KL.Lambda layer it builds just fine, its when its connected to input_gt_boxes that Tensorflow errors out.

Any direction in how to fix this would be great.

NOTE: I do NOT want to downgrade my TF or Keras version, I want to get this Mask-RCNN implementation working with the latest version of TF and Keras.

Body:
I am trying to get the TF2 mask-rcnn from here: https://github.com/ahmedfgad/Mask-RCNN-TF2 to function with Tensorflow==2.11.0 and Keras==2.11.0.

I am unable to get past an error with rekards to KL.Lambda in the def build(self, mode, config) function around line 1873 in models.py.

Exact error:

Traceback (most recent call last):
  File "/mnt/gluster-vol1/Source/d2/./d2.py", line 43, in <module>
    d2.train()
  File "/mnt/gluster-vol1/Source/d2/autoAnnotate.py", line 387, in train
    model = MaskRCNN(mode='training',model_dir='./training_results/',config=config)
  File "/mnt/gluster-vol1/Source/d2/mrcnn/model.py", line 1837, in __init__
    self.keras_model = self.build(mode=mode, config=config)
  File "/mnt/gluster-vol1/Source/d2/mrcnn/model.py", line 1873, in build
    gt_boxes = KL.Lambda(lambda x: norm_boxes_graph(x, K.shape(input_image)[1:3]))(input_gt_boxes)
  File "/home/user/env/py31/lib/python3.10/site-packages/keras/utils/traceback_utils.py", line 70, in error_handler
    raise e.with_traceback(filtered_tb) from None
  File "/home/user/env/py31/lib/python3.10/site-packages/tensorflow/python/framework/type_spec.py", line 925, in type_spec_from_value
    raise TypeError(f"Could not build a TypeSpec for {value} of "
TypeError: Could not build a TypeSpec for KerasTensor(type_spec=TensorSpec(shape=(None, None, 4), dtype=tf.float32, name=None), name='tf.math.truediv/truediv:0', description="created by layer 'tf.math.truediv'") of unsupported type <class 'keras.engine.keras_tensor.KerasTensor'>.

I have tried to use tf.convert_to_tensor on the function in the KL.Lambda layer, I have tried it on the input_gt_boxes layer and several other places, nothing works. If I build just the KL.Lambda layer it builds just fine, its when its connected to input_gt_boxes that Tensorflow errors out.

Any direction in how to fix this would be great.

NOTE: I do NOT want to downgrade my TF or Keras version, I want to get this Mask-RCNN implementation working with the latest version of TF and Keras.