Blancer.com Tutorials and projects

I’m trying to filter papers dynamically, either using title or using publication_date or department. Or either just a single query. For example this my URL, so it means I must filter name with test that starts from 1999 to 2020.

http://localhost:3000/api/filter-papers?title=test&yearStart=1999&yearEnd=2020&department=CAHS

this is my api.

export async function GET(req: Request, res: NextResponse) {
    try {
        const { searchParams } = new URL(req.url)
        const searchTitle = searchParams.get('title')
        const yearStart = searchParams.get('year_start')
        const yearEnd = searchParams.get('year_end')
        const department = searchParams.get('department')


        const papers = await db.publish_Papers.findMany({
            where: {
                OR: {
                    title: {
                        contains: searchTitle ?? ""
                    },
                    publication_date: {
                        gte: yearStart,
                        lte: yearEnd
                    },
                    department: department
                   
                }
            }
        })

        console.log(papers)

        return NextResponse.json(papers, { status: 200 })
    } catch (error) {
        return NextResponse.json({ error: 'failed to load data' }, { status: 500 })
    }
}

This is my Schema.

model Publish_Papers {
  id                 String   @id @default(uuid())
  title              String
  description        String
  categories         String
  publication_source String
  publication_date   DateTime
  url                String
  createdAt          DateTime @default(now())
  updatedAt          DateTime @updatedAt

  authorId String
  Authors  Authors @relation(fields: [authorId], references: [id])
}

so when I only run findMany without any filter. I get this JSON

data.json

[
 {
        "id": "4b20caba-65cd-4db6-b1e2-ecfe247b7dc4",
        "title": "publish test",
        "description": "http://localhost:3000/admin-resource/new",
        "categories": "CASE",
        "publication_source": "idk",
        "publication_date": "2016-03-10T01:37:21.562Z",
        "url": "http://localhost:3000/admin-resource/new",
        "createdAt": "2025-03-18T01:37:35.054Z",
        "updatedAt": "2025-03-18T01:37:35.054Z",
        "authorId": "d7b32e45-b25a-41b9-bc7b-178991409af0",
    },
  
]

I’m starting with dexie.js and would like to display the formatted results to the user on the screen, for example…

I try in html this result:

Josephone – 21 years

Per – 75 years

Simon – 5 years

Sara – 50 years

I don’t use frameworks, and I would like to format the results using HTML and CSS
I know how to do this with CSS, but I don’t know how to extract this information and display it to the user.

After adding this conditional statement to fix an error:

if (el.parentNode) {}

I started getting this error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

What could be the offending line?

import React, { useRef, useState, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { IconFileDescription, IconX, IconEdit } from '@tabler/icons-react';
import { Row } from '@/components/Row';
import { Col } from '@/components/Col';
import { cn } from '@/utils';
import { FileData } from '@/components/FileUpload';

type FilePreviewsProps = {
  files: FileData[];
  onRemoveFile?: (index: number) => void;
  onEditClick?: (index: number) => void;
  multiple?: boolean;
  className?: string;
};

/**
 * Create a portal <div> in document.body, remove on unmount.
 */
function usePortalContainer() {
  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(
    null,
  );

  useEffect(() => {
    const el = document.createElement('div');
    document.body.appendChild(el);
    setPortalContainer(el);

    return () => {
      if (el.parentNode) {
        document.body.removeChild(el);
      }
    };
  }, []);

  return portalContainer;
}

/**
 * RemoveButtonPortal:
 * Places the "X" in the top-right corner of the container via portal,
 * so it won't be clipped by overflow hidden or border radius.
 * We recalc on scroll/resize so it follows the container.
 */
function RemoveButtonPortal({
  index,
  onRemoveFile,
  containerRef,
  hovered,
  multiple,
}: {
  index: number;
  onRemoveFile: (index: number) => void;
  containerRef: React.RefObject<HTMLDivElement>;
  hovered: boolean;
  multiple: boolean;
}) {
  const portalContainer = usePortalContainer();
  const [coords, setCoords] = useState({ top: 0, left: 0 });

  // Tweak these values until it looks perfect for both shapes
  const borderWidth = 1;
  const offsetTop = (multiple ? 4 : 20) + borderWidth;
  const offsetRight = (multiple ? 28 : 20) + borderWidth;

  const updatePosition = useCallback(() => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();

    const top = rect.top + window.scrollY + offsetTop;
    const left = rect.right + window.scrollX - offsetRight;

    setCoords({ top, left });
  }, [containerRef, offsetTop, offsetRight]);

  useEffect(() => {
    updatePosition();
    function handleScrollResize() {
      updatePosition();
    }
    window.addEventListener('scroll', handleScrollResize);
    window.addEventListener('resize', handleScrollResize);

    return () => {
      window.removeEventListener('scroll', handleScrollResize);
      window.removeEventListener('resize', handleScrollResize);
    };
  }, [updatePosition]);

  if (!portalContainer) return null;

  return ReactDOM.createPortal(
    <div
      style={{
        position: 'absolute',
        top: coords.top,
        left: coords.left,
        zIndex: 9999,
        opacity: hovered ? 1 : 0, // fade in/out on hover
        transition: 'opacity 0.2s',
      }}
    >
      <button
        type="button"
        className="rounded-full bg-foreground p-1 text-background shadow hover:shadow-dark"
        onClick={(e) => {
          e.stopPropagation(); // Prevent triggering edit on container
          onRemoveFile(index);
        }}
      >
        <IconX size={16} />
      </button>
    </div>,
    portalContainer,
  );
}

export function FilePreviews({
  files,
  onRemoveFile,
  onEditClick,
  multiple = true,
  className,
}: FilePreviewsProps) {
  // Render file name overlay if multiple
  const renderFilename = (file: FileData) =>
    multiple ? (
      <Row
        align="center"
        alignItems="center"
        className="absolute bottom-0 flex h-7 overflow-hidden border-t border-border p-2 text-xs"
        locked
      >
        <span className="truncate text-ellipsis whitespace-nowrap">
          {file.name}
        </span>
      </Row>
    ) : null;

  /**
   * Overlay:
   * - Just a semi-transparent black background (on hover).
   * - A plain IconEdit in the center (no click action).
   */
  const renderOverlay = () => (
    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
      <IconEdit size={40} className="text-background" />
    </div>
  );

  return (
    <div
      className={cn(
        'w-full gap-2 rounded bg-subtle p-3',
        { 'grid grid-cols-4 md:grid-cols-8': multiple },
        { 'flex justify-center': !multiple },
        className,
      )}
    >
      {files.map((file, index) => {
        const containerRef = useRef<HTMLDivElement>(null);
        const [hovered, setHovered] = useState(false);

        return (
          <div
            key={index}
            ref={containerRef}
            className={cn(
              'group relative cursor-pointer overflow-hidden border border-border bg-background',
              {
                // multiple => rectangular style
                'aspect-w-1 aspect-h-1 w-full rounded-md pb-7': multiple,
                // single => circle
                'flex h-32 w-32 items-center justify-center rounded-full':
                  !multiple,
              },
            )}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            onClick={() => {
              // Clicking anywhere in the container triggers edit (if provided)
              if (onEditClick) onEditClick(index);
            }}
          >
            {/* The "X" is in a portal, so not clipped */}
            {onRemoveFile && (
              <RemoveButtonPortal
                index={index}
                onRemoveFile={onRemoveFile}
                containerRef={containerRef}
                hovered={hovered}
                multiple={multiple}
              />
            )}

            {/* Plain overlay icon */}
            {renderOverlay()}

            {/* Image or fallback icon */}
            {file.url ? (
              multiple ? (
                <div className="relative box-border h-full w-full p-1">
                  <img
                    src={file.url}
                    alt={`Preview ${index + 1}`}
                    className="h-full w-full object-contain"
                  />
                </div>
              ) : (
                <img
                  src={file.url}
                  alt={`Preview ${index + 1}`}
                  className="h-full w-full object-cover"
                />
              )
            ) : (
              <Col
                align="center"
                alignItems="center"
                className={cn('h-full w-full', {
                  'rounded-md': multiple,
                  'rounded-full': !multiple,
                })}
              >
                <IconFileDescription size={60} stroke={1} />
              </Col>
            )}

            {/* Show file name overlay only if multiple */}
            {multiple && renderFilename(file)}
          </div>
        );
      })}
    </div>
  );
}

dependencies

"dependencies": {
    "@expo-google-fonts/roboto": "^0.2.3",
    "@expo/config-plugins": "~9.0.0",
    "@expo/vector-icons": "^14.0.0",
    "@gorhom/bottom-sheet": "^4.4.5",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-community/netinfo": "11.4.1",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.16",
    "@sentry/react-native": "~6.3.0",
    "@xstate/react": "^3.2.1",
    "base32.js": "^0.1.0",
    "big.js": "^5.0.3",
    "bitcoin-address-validation": "^2.1.0",
    "buffer": "^5.2.1",
    "color-alpha": "^1.1.3",
    "country-list": "^2.1.0",
    "crc": "^3.8.0",
    "deprecated-react-native-prop-types": "^4.0.0",
    "dotenv": "^16.0.3",
    "expo": "^52.0.0",
    "expo-application": "~6.0.1",
    "expo-asset": "~11.0.1",
    "expo-camera": "~16.0.10",
    "expo-clipboard": "~7.0.0",
    "expo-constants": "~17.0.3",
    "expo-contacts": "~14.0.2",
    "expo-device": "~7.0.1",
    "expo-document-picker": "~13.0.1",
    "expo-image-manipulator": "~13.0.5",
    "expo-image-picker": "~16.0.3",
    "expo-linear-gradient": "~14.0.1",
    "expo-linking": "~7.0.3",
    "expo-local-authentication": "~15.0.1",
    "expo-localization": "~16.0.0",
    "expo-location": "~18.0.4",
    "expo-notifications": "~0.29.11",
    "expo-secure-store": "~14.0.0",
    "expo-splash-screen": "~0.29.18",
    "expo-status-bar": "~2.0.0",
    "expo-system-ui": "~4.0.6",
    "expo-updates": "~0.26.10",
    "expo-web-browser": "~14.0.1",
    "formik": "^2.2.9",
    "google-libphonenumber": "^3.2.27",
    "hoist-non-react-statics": "^3.3.2",
    "i18n-js": "^3.8.0",
    "i18next": "^21.4.2",
    "is-valid-domain": "^0.1.6",
    "jssha": "^2.3.1",
    "lodash": "^4.17.21",
    "lottie-react-native": "7.1.0",
    "metro-react-native-babel-transformer": "^0.77.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "node-libs-react-native": "^1.2.1",
    "patch-package": "^6.5.1",
    "postinstall-postinstall": "^2.1.0",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-hook-form": "^7.43.9",
    "react-i18next": "^11.14.2",
    "react-native": "0.76.5",
    "react-native-animatable": "^1.3.3",
    "react-native-app-link": "^1.0.1",
    "react-native-circular-progress": "^1.3.8",
    "react-native-collapsible": "^1.6.1",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-markdown-display": "^7.0.0-alpha.2",
    "react-native-masked-text": "^1.13.0",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^14.0.1",
    "react-native-pager-view": "6.5.1",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-picker-select": "^8.0.4",
    "react-native-popover-view": "^5.1.7",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "~3.16.1",
    "react-native-round-flags": "^1.0.4",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-skeleton-placeholder": "^5.2.4",
    "react-native-snap-carousel": "4.0.0-beta.6",
    "react-native-super-grid": "^5.0.0",
    "react-native-svg": "15.8.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-tab-view": "^3.5.1",
    "react-native-web": "~0.19.10",
    "react-native-webview": "13.12.5",
    "react-query": "^3.39.3",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.2.3",
    "redux-thunk": "^2.4.2",
    "reselect": "^4.1.7",
    "rn-material-ui-textfield": "^1.0.9",
    "stellar-sdk": "^8.2.3",
    "xstate": "^4.37.1",
    "yup": "^0.26.6"
  },

metro config

const { getSentryExpoConfig } = require("@sentry/react-native/metro");

const config = getSentryExpoConfig(__dirname);

const { transformer, resolver } = config;

config.transformer = {
  ...transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
};
config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter(ext => ext !== 'svg'),
  sourceExts: [...resolver.sourceExts, 'svg'],
  extraNodeModules: require('node-libs-react-native'),
};

module.exports = config;

App.js
import App from './src';
require('node-libs-react-native/globals');
import Constants from 'expo-constants';

import * as Sentry from '@sentry/react-native';

// TODO: This constants format will change when we upgrade to the new Expo SDK.
// https://docs.expo.dev/guides/environment-variables/#reading-environment-variables
Sentry.init({
  dsn:
    Constants.expoConfig?.extra?.eas?.sentryDSN ??
    Constants.manifest2?.extra?.expoClient?.extra?.eas?.sentryDSN,
  debug: true,
});

export default Sentry.wrap(App);

Node version

v18.18.2

Expo SDK

52

in package.json

  "engines": {
    "node": ">=18"
  },

After building the project this error is showing
iOS Bundling failed 2276ms index.js (4106 modules)
Unable to resolve “@sentry-internal/replay” from “node_modules/@sentry/browser/build/npm/cjs/index.js”

@sentry/react-native internally import as this
const replay = require(‘@sentry-internal/replay’);

I tried to find the issue googling it, using GPT and stack-overflow as well.
But no solution found.

Please help me with this.

I am using pdfjs-dist to extract text from a PDF. I need to extract both the color of the text and any hyperlinks present in the document.

What I Have Tried
I am currently processing the PDF using pdfjs-dist and working with the operator list. Here’s my approach so far:

Extract text content using getOperatorList().
Analyze the extracted data to identify text fragments.
Check for text color and links, but I am not sure how to properly extract them.
Issues:
How can I reliably extract text color from the operator list?
How can I detect and extract hyperlinks in the document?

const loadingTask = pdfjsLib.getDocument("example.pdf");
loadingTask.promise.then(async (pdf) => {
const page = await pdf.getPage(1);
const opList = await page.getOperatorList();

   console.log(opList);
  // How do I extract text color and links from this?
});

How can I achieve this using pdfjs-dist? Any guidance or alternative approaches would be appreciated!

I am using pdfjs-dist to extract text from a PDF. I have obtained the OperatorList using getOperatorList(), which contains various drawing operations. My goal is to extract both:

Text color – I checked setFillColor and setStrokeColor operations in the operator list. However, I am not sure how to map these colors to specific text fragments.
Hyperlinks – I inspected annotations using getAnnotations(), which returns link metadata, but I am unsure how to correctly associate the links with specific text.

I started learning semi-recently, I want to make the Korean translation appear when I click the corresponding English word. I’m unfamiliar with JQuery and => notation so please keep any solution relatively basic (if there is a basic one) Thank you!

html:

    <div class="Words-container">
        <div id="Verbs">
            <div><h2 class="Word-title">Verbs</h2></div>
            <div><ul id="List-words">
                <li class = "english">To fall--<span class = "answer hideMe">넘어지다</span></li>
                <li class = "english">To be young--<span class = "answer hideMe">젊다</span></li>
                <li class = "english">To be anxious--<span class = "answer hideMe">불안하다</span></li>
                <li class = "english">To be sensitive--<span class = "answer hideMe">예민하다</span></li>
                <li class = "english">To translate--<span class = "answer hideMe">번역하다</span></li>
                <li class = "english">To give an example--<span class = "answer hideMe">예를 들어 주다</span></li>
                <li class = "english">To be perfect--<span class = "answer hideMe">완벽하다</span></li>
                <li class = "english">To be efficient--<span class = "answer hideMe">효율적이다</span></li>
            </ul></div>
        </div>

Javascript:

//add hover event listener to english word
for(x = 0; x < document.querySelectorAll(".english").length; x++){
    document.querySelectorAll(".english")[x].addEventListener("click", function(){//fn to show answer when click english word

//this function is wrong but I'm unsure of how to target the Korean when clicking the English
        this.closest("span").classlist.toggle(".hideMe");//toggle hideMe class when english clicked
    })
}

CSS

.hideMe{
    visibility: hidden;
}

is there anyway i can detect if a player has any spawn egg not a specific one i’m making a security script and i’m trying to add tag “ban” to players with a egg in their inv

I’m encountering an error when running dfx deploy. After executing the command, an error appears. I’m new to this and still learning. I’d appreciate any help!

binding to: 127.0.0.1:34643
Mar 18 00:15:44.563 INFO ic-starter. Configuration: ValidatedConfig { replica_path: Some("/home/johnk/.cache/dfinity/versions/0.9.3/replica"), replica_version: "0.8.0", log_level: Warning, cargo_bin: "cargo", cargo_opts: "", state_dir: "/home/johnk/ic-project/hello5/.dfx/state/replicated_state", http_listen_addr: 127.0.0.1:0, http_port_file: Some("/home/johnk/ic-project/hello5/.dfx/replica-configuration/replica-1.port"), metrics_addr: None, provisional_whitelist: Some(All), artifact_pool_dir: "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/node-100/ic_consensus_pool", crypto_root: "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/node-100/crypto", state_manager_root: "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/node-100/state", registry_local_store_path: "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/ic_registry_local_store", unit_delay: None, initial_notary_delay: Some(600ms), dkg_interval_length: None, detect_consensus_starvation: None, consensus_pool_backend: Some("rocksdb"), subnet_features: SubnetFeatures { ecdsa_signatures: false, canister_sandboxing: false, http_requests: false, bitcoin_testnet_feature: None }, subnet_type: System, _state_dir_holder: None }, Application: starter
Mar 18 00:15:44.564 INFO Initialize replica configuration "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/ic.json5", Application: starter
Mar 18 00:15:45.294 INFO Executing "/home/johnk/.cache/dfinity/versions/0.9.3/replica" "--replica-version" "0.8.0" "--config-file" "/home/johnk/ic-project/hello5/.dfx/state/replicated_state/ic.json5", Application: starter
Mar 18 00:15:47.537 WARN s:xbfln-jtge2-khab4-a2frw-ng7it-h6l44-gczgl-tn5yh-wynzi-ieqif-oae/n:ikgwu-bhrdw-c33x7-7sbrw-dvrv7-k2euw-gahmb-sxcvr-3r4b5-t2rks-yqe/ic_p2p/advert_utils AdvertRequestBuilder::new(): advert_config = Some(GossipAdvertConfig { best_effort_percentage: 20 })
version: 0.8.1
 Mar 18 08:15:47.589 INFO Log Level: INFO
 Mar 18 08:15:47.589 INFO Starting server. Listening on http://127.0.0.1:8002/
 Mar 18 08:15:48.627 WARN Internal Error during request:
hyper::Error(
    Connect,
    ConnectError(
        "tcp connect error",
        Os {
            code: 111,
            kind: ConnectionRefused,
            message: "Connection refused",
        },
    ),
)

I tried running dfx start --clean, changing the port, and checking if it’s in use, but the error still persists. I also attempted to unblock it through the firewall, but it’s still not working. I’m not sure what else to do—can anyone help me

I am running Docker 27.4.0 under Windows. The Windows version is 11 (24H2 OS Build 26100.3476). The solutions in question 24319662 don’t seem to work for me (maybe). What does work is connecting to 192.168.4.198. 192.168.4.198 just happens to be the IP address of host.docker.internal. I tried using net/network host in my run command and with docker compose. Those approaches did not work. Maybe they only work under Linux? Am I using the best solution? Is connecting to 192.168.4.198 the best solution?

I have a service running on my Windows machine that listens on port 443 (WebSockets). I created the service by running some Java code under Eclipse. I would like to use that service from inside a Docker container. If I try to connect to 127.0.0.1:443 from inside a Docker container to my service, I get the container’s 127.0.0.1:443 (which is not listening). I would like to have the code inside the Docket container use the “real” 127.0.0.1:443, not the one inside the Docker container. How do I do this? What should be in the compose file? What should the run command specify?

I am building a calendar using Full calendar. I have a specific background that I want for each month. The color changes according to the current day correctly. If it is currently march 17, it will show the march background.

I cannot figure out how to make the background change whenever I browse to look at future/past months. It stays the same. I want the background to change when I look at a different month.

Thanks in advance! I’m scratching my head at this one!

My code correctly sets the current months background initially.

Today’s date with the correct background color

When I browse to another month it doesn’t change.

Browsing to new months keeps the same color when it should be changing

If i change my PC’s time to another month, the background is different, so that part works.

Image when i change my computer time to a different time

My Current Code:

<script>
  $(document).ready(function() {
    var monthColors = [
            "#FF5733",   // January - Red-Orange
            "#33B5E5",   // February - Blue
            "#A569BD",   // March - Purple
            "#58D68D",   // April - Green
            "#F4D03F",   // May - Yellow
            "#FF8C00",   // June - Orange
            "#4682B4",   // July - Steel Blue
            "#DC143C",   // August - Crimson
            "#20B2AA",   // September - Light Sea Green
            "#FF6347",   // October - Tomato
            "#2E8B57",  // November - Sea Green
            "#B22222"   // December - Fire Brick
        ];       
        function updateBackground(date) {
            var month = date.getMonth(); // Get displayed month
            console.log("Updating background for month:", month + 1); // Debugging log
            $("body").css("background-color", monthColors[month]);
        }

  $('#calendar').fullCalendar(
    {
      header:
      {
        left: '',
        center: 'title'
      },
      events:
      [
        {
          title: 'Marriage',
          start: '2025-03-17',
          color: 'transparent',
          textColor: 'black',
          imageurl: 'birthday.png'
          },
          {
          title: 'Marriage',
          start: '2025-03-19',
          end: '2025-03-20',
          color: '#8E9A75',
          textColor: 'white',
          imageurl: 'birthday.png'
          }
      ],
      eventRender: function(event, eventElement) {
      if (event.imageurl) {
        eventElement.prepend("<img src='" + event.imageurl + "' width='80' height='80' >");
      }  return ['all', event.tags].indexOf($('#event_selector option:selected').val()) >= 0;
      },
      datesSet: function(info) {
        var currentMonth = calendar.getDate().getMonth() + 1;
            console.log("Currently viewed month:", currentMonth);
      },

      
  }); 

  setTimeout(function() {
            updateBackground(new Date());
        }, 100);

});


</script>

I am working on a project and can’t seem to fix this GET 404 error. In the console it looks like there it is messing up somewhere in between the javascript and html file, but I haven’t been able to pinpoint the issue. If anyone has any advice it’d be super appreciated.

HTML code:
file name > index.html

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="../static/mywebscript.js"></script>
    <style>
        .center-heading {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <h1 class="center-heading">NLP - Emotion Detection</h1> 
            <div style="padding: 25px 25px 25px 25px;">
            <h2 class="mb-3">
                <label class="form-label">Please enter the text to be analyzed</label>
                <input type="textarea" class="form-control" id="textToAnalyze">
            </h2>

            <div style="padding: 25px 25px 25px 25px;">
                <button onclick="RunSentimentAnalysis()" class="btn btn-secondary">Run Sentiment Analysis</button>
            </div>
            <div style="padding: 25px 25px 25px 25px;"></div>
            <h2 class="mb-3">
                <label class="form-label">Result of Emotion Detection</label>
            </h2>

            <div id="system_response" style="padding: 25px 25px 25px 25px;"></div>
        </div>
    </div>
</body>
</html>

JavaScript code:
file name > mywebscript.js

let RunSentimentAnalysis = ()=>{
    textToAnalyze = document.getElementById("textToAnalyze").value;

    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("system_response").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", "emotionDetector?textToAnalyze"+"="+textToAnalyze, true);
    xhttp.send();
}

Python code:
file name > emotion_detection.py

import requests
import json

def emotion_detector(text_to_analyze):
    url ='https://sn-watson-emotion.labs.skills.network/v1/watson.runtime.nlp.v1/NlpService/EmotionPredict'
    header = {"grpc-metadata-mm-model-id": "emotion_aggregated-workflow_lang_en_stock"}
    input_json = { "raw_document": { "text": text_to_analyze } }
    response = requests.post(url, json=input_json, headers=header)
    status_code = response.status_code

    emotions = {}

    if status_code == 200:
        formatted_response = json.loads(response.text)
        emotions = formatted_response['emotionPredictions'][0]['emotion']
        dominant_emotion = max(emotions.items(), key=lambda x: x[1])
        emotions['dominant_emotion'] = dominant_emotion[0]
    elif status_code == 400:
        emotions['anger'] = None
        emotions['disgust'] = None
        emotions['fear'] = None
        emotions['joy'] = None
        emotions['sadness'] = None
        emotions['dominant_emotion'] = None
    return emotions

and
file name > server.py

from flask import Flask, request, render_template
from EmotionDetection.emotion_detection import emotion_detector

app = Flask("Emotion Detector")

@app.route("/emotionDetector")
def emotion_analyzer():
    text_to_analyse = request.args.get('textToAnalyze')
    emotion_result = emotion_detector(text_to_analyse)
    anger = emotion_result['anger']
    disgust = emotion_result['disgust']
    fear = emotion_result['fear']
    joy = emotion_result['joy']
    sadness = emotion_result['sadness']
    dominant_emotion = emotion_result['dominant_emotion']

    if dominant_emotion is None:
        return "Invalid text! Please try again"

    response_str = f"""For the given statement, the system response is
    'anger': {anger}, 'disgust': {disgust}, 'fear': {fear}, 'joy': {joy}, 'sadness': {sadness}.
    The dominant emotion is <strong>{dominant_emotion}</strong>."""
    return response_str

@app.route("/")
def render_index_page():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

In a specific section of my code, the animation for a sprite stops at frame 1 when I run this.sprite.anims.play("key", true).

I have ran animations in other sections of my code and they have ran perfectly fine. However, for some reason, in this section, it is stopping at frame one. Here is the section:

In the update() function:

if (this.TIMER_DONE) {
  this.zeph.anims.play("walk_zeph-left", true)
  this.zeph.x += this.zeph_x_vel
  this.zeph_speech.visible = false
  this.t.setText("")
  if (this.zeph.x == 352) {
    this.zeph_x_vel = 0
    this.zeph.anims.play("walk_zeph-front", true)
    }
  }  

Basically, I have a timer. When the timer is done, I want the sprite to walk until it hits a specific coordinate. That part works perfectly fine. And then, when it does hit that coordinate, I want it to stop walking by setting the this.zeph_x_vel equal to 0. That part works fine too.

The only part that isn’t working is the this.zeph.anims.play() part. It is playing the animation, but only the first frame. I have checked this with the other animations (ie, with the other keys), and the same thing is happening.

Here is my animation set_up:

this.anims.create({
            key: 'walk_zeph-front',
            frames: this.anims.generateFrameNumbers('zeph-front', {start: 0, end: 3}),
            frameRate: 8,
            repeat: -1
        })

I don’t get any errors in the console, so, I’m not exactly sure what’s happening. Any help would be greatly appreciated.

Just started this project, used create-next-app@latest and installed prisma, nextauth and prisma adapter according to latest docs. DB is properly configured and tested, next secret is set, middleware.ts, auth.ts, and prisma.ts copied from official docs, Google oauth creds are set correctly. Here is the error output

Runtime Error


TypeError: Cannot read properties of undefined (reading 'exec')

Call Stack
10

Hide 10 ignore-listed frame(s)
[project]/node_modules/@prisma/client/runtime/library.js [middleware-edge] (ecmascript)
node_modules/@prisma/client/runtime/library.js (4:6678)
<unknown>
[turbopack]/browser/runtime/base/dev-base.ts (205:21)
runModuleExecutionHooks
[turbopack]/browser/runtime/base/dev-base.ts (265:5)
instantiateModule
[turbopack]/browser/runtime/base/dev-base.ts (203:5)
getOrInstantiateModuleFromParent
[turbopack]/browser/runtime/base/dev-base.ts (132:10)
esmImport
[turbopack]/shared/runtime-utils.ts (214:18)
[project]/node_modules/@auth/prisma-adapter/index.js [middleware-edge] (ecmascript)
node_modules/@auth/prisma-adapter/index.js (1:1)
<unknown>
[turbopack]/browser/runtime/base/dev-base.ts (205:21)
runModuleExecutionHooks
[turbopack]/browser/runtime/base/dev-base.ts (265:5)
instantiateModule
[turbopack]/browser/runtime/base/dev-base.ts (203:5)

Current dependency list:

 "dependencies": {
    "@auth/prisma-adapter": "^2.8.0",
    "@prisma/client": "^6.5.0",
    "next": "^15.2.2",
    "next-auth": "^5.0.0-beta.25",
    "react": "^19",
    "react-dom": "^19"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "prisma": "^6.5.0",
    "typescript": "^5"
  }

Been digging around searching, chatting with Cursor, changing lots of stuff around, deleted node_modules and reinstalled, generated prisma client again. Nothing is working.

Can anyone illustrate how to resolve the following errors and allow me to authenticate through the oAuth client ID to return 6 videos from our youtube channel using a search term?

POST https://accounts.google.com/_/IdpIFrameHttp/cspreport/fine-allowlist 400 (Bad Request)Understand this errorAI
cb=gapi.loaded_0?le=scs:169

GET https://content.googleapis.com/discovery/v1/apis/youtube/v3/search?pp=0&fields=kind%2Cname%2Cversion%2CrootUrl%2CservicePath%2Cresources%2Cparameters%2Cmethods%2CbatchPath%2Cid&key=API-KEY 404 (Not Found)

cb=gapi.loaded_0?le=scs:153 Uncaught
{error: ‘idpiframe_initialization_failed’, details: ‘You have created a new client application that use…i/web/guides/gis-migration) for more information.’}
details:”You have created a new client application that uses libraries for user authentication or authorization that are deprecated. New clients must use the new libraries instead. See the Migration Guide for more information.”
error: “idpiframe_initialization_failed”

// Load the Google API client library
function loadClient() {
    import("https://apis.google.com/js/api.js").then(() => {
    gapi.load('client', initialize);
    }
)}

// Initialize the API client
function initialize() {
    gapi.client.init({
        'apiKey': 'API-KEY',
        'clientId': 'CLIENT-ID.apps.googleusercontent.com',
        'scope': 'https://www.googleapis.com/auth/youtube.readonly',
        'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/search']
    }).then(function () {
        // Call the API to search for videos
        searchVideos('SEARCH-TERM');
    });
}

// Search for videos using the YouTube API
function searchVideos(searchTerm) {
    return gapi.client.youtube.search.list({
        'part': 'snippet',
        'q': searchTerm,
        'type': 'video',
        'maxResults': 6
    }).then(function(response) {
        displayVideos(response.result.items);
    }, function(error) {
        console.error('Error: ' + error);
    });
}

// Display videos on the WordPress page
function displayVideos(videos) {
    const videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = '';
    videos.forEach(video => {
        const videoElement = document.createElement('iframe');
        videoElement.src = 'https://www.youtube.com/embed/' + video.id.videoId;
        videoElement.width = '300';
        videoElement.height = '200';
        videoElement.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        videoElement.allowFullscreen = true;
        videoContainer.appendChild(videoElement);
    });
}

// Load the Google API client library on page load
window.onload = loadClient;// JavaScript Document

<div id="video-container"> </div>

There have been several posts on this, but I think this is a new twist. Using Mocha, my test case code is getting hit before the before block even starts.

The before block is looping through a list of test cases, and creating test accounts and making purchases for that account, for each test case. The test itself is checking the database to ensure the purchase is recorded correctly, in the correct currency, etc.

Part of the unique aspect is that each test case is being updated with some additional properties during setup that are then used during validation.

The pseudo-code looks like this:

describe('Validate purchasing product shows up in db', function () {

    let testCases = [ 
        { testCaseId: 'T1234', country: 'United States', currency: 'USD', purchase: [camera: 'Canon EOS 90D', accessory: 'Leica Table Tripod'}]},
        { testCaseId: 'T56786', country: 'Japan', currency: 'Yen', purchase: [camera: 'Sony A7RV', accessory: 'Leica Table Tripod'}]},

    ];
    
    before(async function() {
        testCases = await setUpAccountsAndPlaceOrders(testCases).then((tests) => { return tests;});
    });

    let testCaseOrder = 0;

    testCases.forEach(function(tc) {
        let description = createTestDescription(tc);
        console.log(description);

        it(description, async() => 
        {
            // Look up user by email: tc.email
            // Validate users orders shows up in database
        });
    });
});

async function setUpAccountsAndPlaceOrders(testCases)
{
    return new Promise(function (resolve) {
        setTimeout(async function () {
            await browser.deleteCookies();
            await browser.navigateTo('https://beta.cameramarketplace.com');
            await Cart.plans.navigateTo();

            for(let i = 0; i < testCases.length; i++)
            {
                // create an account
                // place the order
                testCases[i].email = // new account's email
                testCases[i].uiPrice = //value shown in UI invoice
            }
            resolve(testCases);
        }, 30000)
    });
}

The test always fails. If I put a breakpoint inside the setUpAccountsAndPlaceOrders function and then one on the it statement, the it statement always hits first.
Any idea what I am missing here?