Category: javascript

TypeError: cyclical structure in JSON object

This error is located at:
in RCTImageView (created by TextAncestorContext)
in BaseImage (created by Home)
in RCTView (created by View)
in View (created by Home)
in RCTView (created by View)
in View (created by Home)
in Home (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by MyTabs)
in MyTabs (created by Nav)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Nav)
in Nav
in Unknown (created by Route(index))
in Route (created by Route(index))
in LocationProvider (created by Route(index))
in Route(index) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator
in Unknown (created by Layout)
in Layout
in Unknown (created by Route())
in Route (created by Route())
in LocationProvider (created by Route())
in Route() (created by RootRoute)
in RootRoute (created by ContextNavigator)
in InitialRootStateProvider (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by NavigationContainer)
in NavigationContainer (created by ContextNavigator)
in RootRouteNodeProvider (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by ExpoRoot)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by GestureHandler)
in GestureHandler (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by withDevTools(App))
in withDevTools(App) (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

i don’t know why is happen, i just use react native expo. if i open in website nothing problem, but if i open in expo android error. please help me

TypeError:cyclicalstructureinJSONobject

I’m trying to make a chrome extension that will add HTML code to YouTube but when I try adding HTML code, the YouTube website just blackout. I want to add my code on top of YouTube already existing HTML code.

if(window.location.href.includes('youtube.com')) {
    document.querySelector('body').innerHTML += `<h1>Hello</h1>`;
}

I want to catch all request in my App to handle error.
In Chrome, Edge, the requests is only xhr or fetch. I can do this.
But in Safari, sometime the type is “other“. I can’t find any documentation for this.
Can anyone please advise me solution to track these request type “other” in Safari?
My app code is Javascript
Thank you.

Here is the code I have now:

index.html:

<!doctype html>
<html lang="en-au">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

<canvas id="main-canvas"></canvas>
<button id="settings-button">Settings</button>
<div id="settings-menu">
    <div class="shape-container">
        <label id="shape-size-label" for="shape-size">Shape Size: 50</label><br>
        <input type="range" min="1" max="100" value="50" class="slider" id="shape-size">
    </div>
    <div class="color-container">
        <label for="square-color">Square Color:</label>
        <input type="color" id="square-color" value="#0000ff">
    </div>
    <div class="color-container">
        <label for="circle-color">Circle Color:</label>
        <input type="color" id="circle-color" value="#0000ff">
    </div>
    <div class="color-container">
        <label for="rectangle-color">Rectangle Color:</label>
        <input type="color" id="rectangle-color" value="#0000ff">
    </div>
    <div class="color-container">
        <label for="triangle-color">Triangle Color:</label>
        <input type="color" id="triangle-color" value="#0000ff">
    </div>
    <div class="color-container">
        <label for="canvas-color">Canvas Color:</label>
        <input type="color" id="canvas-color" value="#000000">
    </div>
</div>

<script src="js/main.js"></script>
</body>
</html>

main.js:

const canvas = document.getElementById("main-canvas");
canvas.style.overflow = "hidden";
const ctx = canvas.getContext("2d");
const settingsButton = document.getElementById("settings-button");
const settingsMenu = document.getElementById("settings-menu");
let mousePos = { x: undefined, y: undefined };
let settingsState = false
let shapeSize = 50
let squareColor = "#0000ff";
let canvasColor = "#000000";

ctx.fillStyle = canvasColor;
ctx.fillRect(0, 0, screen.width, screen.height);
console.log(screen.width + " " + screen.height)

document.getElementById("settings-button").onclick = function() {
    settingsState =  !settingsState;
    if (settingsState === true) {
        settingsButton.style.backgroundColor = "gray";
        settingsMenu.style.visibility = "visible";
        
    }
    else {
        settingsButton.style.backgroundColor = "white";
        settingsMenu.style.visibility = "hidden";
    }
}

document.getElementById("shape-size").onchange = function() {
    let shapeSizeValue = document.getElementById("shape-size");
    let shapeSizeLabel = document.getElementById("shape-size-label");
    shapeSizeLabel.innerHTML = "Shape Size: " + shapeSizeValue.value;
    shapeSize = shapeSizeValue.value
}
document.getElementById("square-color").onchange = function() {
    let squareColorValue = document.getElementById("square-color");
    squareColor = squareColorValue.value
}
document.getElementById("circle-color").onchange = function() {
    let circleColorValue = document.getElementById("circle-color");
}
document.getElementById("rectangle-color").onchange = function() {
    let rectangleColorValue = document.getElementById("rectangle-color");
}
document.getElementById("triangle-color").onchange = function() {
    let triangleColorValue = document.getElementById("triangle-color");
}
document.getElementById("canvas-color").addEventListener("input", (event) => {
    let canvasColorValue = document.getElementById("canvas-color");
    ctx.fillStyle = canvasColorValue.value;
    ctx.fillRect(0, 0, screen.width, screen.height);
});

window.addEventListener('mousemove', (event) => {
    mousePos = { x: event.clientX, y: event.clientY };
    document.getElementById("settings-button").innerHTML = mousePos.x.toString() + " " + mousePos.y.toString()
});

window.onkeydown = function(event) {
    if (event.key === "q") {
        console.log("q")
        ctx.fillStyle = squareColor;
        ctx.fillRect(mousePos.x, mousePos.y, shapeSize/2, shapeSize/2);
        console.log(mousePos.x.toString() + " " + mousePos.y.toString() + " " + shapeSize.toString() + " " + shapeSize.toString());
        console.log(squareColor)
        console.log(screen.width)
    }
    if (event.key === "w") {

    }
    if (event.key === "e") {

    }
    if (event.key === "r") {

    }
}

main.css:

html, body, #main-canvas {
    margin: 0;
    height: 100vh;
    position: fixed;
    width: 100vw;
}
#settings-button {
    position: absolute;
    right: 5%;
    top: 5%;
    width:10%;
    height:5%;
    background-color: white;
    font-size: 160%;
    border-radius: 20px;
    border: 0;
}
#settings-menu {
    position: absolute;
    right: 5%;
    top: 11%;
    width: 20%;
    height: 50%;
    background-color: gray;
    border-radius: 30px;
    visibility: hidden;
    padding: 20px;
}

If you were to run that you’ll find that when you press q, depending on where the mouse is that it will either be outside the viewport or so out that it’s just stupid. 0,0 seems to be in the right place but the further you go from 0,0 the worse it gets. Everyone I’ve talked to is completely clueless as to what is causing this so help would be much appreciated

I have a list of users that is loaded in batches from server. How can I show suggestions as the email id is being typed without the data fully loaded.

I’m trying to draw a simple canvas on an html page and allow the user to modify the dimensions. i also have a rotate button which switches swaps the value of the width and height to rotate the canvas. I do not intend to rotate the elements on the canvas, I just want the canvas size to change. I have this working but am not getting the outcome I expected. I am starting with the dimensions 530 x 310 and when i flip to 310 x 530 the canvas looks stretched vertically, much more narrow than it should.

I believe this has something to do with the css value of the aspect-ratio maybe? not exactly sure. Any help would be really appreciated. Here’s i simple version of my issue.

const canvas = document.getElementById("canvas");
const widthInput = document.getElementById("widthInput");
const heightInput = document.getElementById("heightInput");
const rotateCanvasBtn = document.getElementById('rotateCanvasBtn');


function updateCanvasSize() {
  const width = parseInt(widthInput.value);
  const height = parseInt(heightInput.value);

  // Calculate the ratio of width to height
  const ratio = width / height;

  // Determine the maximum physical size (in pixels)
  const maxSize = Math.max(width, height);

  // Calculate the scaled width and height based on the maximum size
  let scaledWidth, scaledHeight;
  if (width > height) {
    scaledWidth = maxSize;
    scaledHeight = maxSize / ratio;
  } else {
    scaledWidth = maxSize * ratio;
    scaledHeight = maxSize;
  }

  // Set the canvas width and height attributes
  canvas.width = scaledWidth;
  canvas.height = scaledHeight;
}

widthInput.addEventListener("input", updateCanvasSize);
heightInput.addEventListener("input", updateCanvasSize);

rotateCanvasBtn.addEventListener('click', function(){
        let oldWidth = widthInput.value;
        let oldHeight = heightInput.value;
        
        widthInput.value = oldHeight;
        heightInput.value = oldWidth;
        
        updateCanvasSize();
    
    });

body {
  text-align: center;
}

canvas {
  border: 1px solid black;
  margin: 20px auto;
}

div {
  margin-bottom: 10px;
}

label {
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<canvas id="canvas" width="530" height="310"></canvas>
  <div>
    <label for="widthInput">Width:</label>
    <input type="number" id="widthInput" value="530">
  
    <label for="heightInput">Height:</label>
    <input type="number" id="heightInput" value="310">
        <button class="btn-square">
                    <i id="rotateCanvasBtn" class="fas fa-rotate"></i>
                </button>
  </div>

Thanks.

I have a list of athlete names in JSON format from a fetch. Using for loop, I want to grab all the names under roster > athlete > name and then inserting them into dropdown menu.

But for some reason the loop is not working. If I take out the loop and just grab a single athlete, it worked. Maybe I got confused about arrays and objects?

JSON code

{
    "team": {
        "color": "000000",
        "country": "USA",
        "roster": [
            {
                "athlete": {
                    "name": "John Doe",
                    "age": 20
                }
            },
            {
                "athlete": {
                    "name": "Jane Doe",
                    "age": 21
                }
            },
            {
                "athlete": {
                    "name": "Jack Doe",
                    "age": 22
                }
            },
            {
                "athlete": {
                    "name": "Joe Doe",
                    "age": 23
                }
            }
        ]
    }
}

I have a list of athlete names in JSON format from a fetch. Using for loop, I want to grab all the names under roster > athlete > name and then inserting them into dropdown menu.

But for some reason the loop is not working. If I take out the loop and just grab a single athlete, it worked. Maybe I got confused about arrays and objects?

JSON code

{
“team”: {
“color”: “000000”,
“country”: “USA”,
“roster”: [
{
“athlete”: {
“name”: “John Doe”,
“age”: 20
}
},
{
“athlete”: {
“name”: “Jane Doe”,
“age”: 21
}
},
{
“athlete”: {
“name”: “Jack Doe”,
“age”: 22
}
},
{
“athlete”: {
“name”: “Joe Doe”,
“age”: 23
}
}
]
}
}
JS code

async function getAthletes() {

    const getPlayers = document.getElementById('getPlayers')

    await fetch('athlete.json', {
        method: 'GET'
    })
    .then((response) => response.json())
    .then(data => {

        const athletes = data.team.roster[0].athlete

        for(let i = 0; i < athletes.length; i++) {
            getPlayers.innerHTML += `<option value="${athletes[i].name}">${athletes[i].name}</option>`
        }
    }) 
}

HTML

<select id="getPlayers" data-category="Vote" data-action="click" data-label="Select Player">
    <option value="">Select player</option>
</select>

Hoping to get like this after the loop

<select id="getPlayers" data-category="pick" data-action="click" data-label="Select Player">
    <option value>Select player</option>
    <option value="John Doe">John Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="Jack Doe">Jack Doe</option>
    <option value="Joe Doe">Joe Doe</option>
</select>

I was wondering where the default node.js modules are stored on a mac, such as fs, stream, path, etc. I tried looking into my /usr folder, but I couldn’t find anything. Any help is welcome.

so someone that i can’t find who, did this wonderfull and helpfull app for an online game the grepolis,

however it only works to english server and i want to jnow if someone know hot to make it work at portuguese server

https://grepolislivemap.com/en154/2023_07_13

at the moment nothing ahah

I have the following codes:

HTML

<header class="hero">
  <section class="hero-text-container">
    <!--Content Here-->
  </section>

  <figure class="hero-figure">
    <!--Image Here-->
  </figure>
</header>

CSS

.hero {
  background-image: radial-gradient(ellipse 30% 100% at -4% 5%, #ce0058, transparent),
    radial-gradient(ellipse 100% 75% at 0% 0%, #cf4520, #460702, transparent),
    radial-gradient(ellipse 100% 100% at 100% 100%, black, black);

  display: flex;
  width: 100%;
  max-width: 100vw;
  justify-content: center;
  align-items: stretch;
  text-align: justify;
  flex-wrap: wrap;
  margin: 0 auto;
  border-bottom: 2px solid #eee;

  animation-name: colors-circulating;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

I deleted HTML code for shortening but it’s implemented.

The CSS above is styling the div with a black bg, and a 2 radial gradients of brick brown & hot pink. The gradients are located originally near the div’s top left corner. See the full Implementation here:Hero Banner of a website I’m working on

I want to animate the gradients to move clockwise from the top left => top right => bottom right => bottom left, so I wrote this code:

@keyframes colors-circulating {
  0%, 100% {
    background: radial-gradient(
        ellipse 30% 100% at -4% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  25% {
    background: radial-gradient(
        ellipse 30% 100% at 96% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  50% {
    background-image: radial-gradient(
        ellipse 30% 100% at 96% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  75% {
    background-image: radial-gradient(
        ellipse 30% 100% at -4% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }
  }

Now the problem is, this code is showing 4 sharp images without any smooth animation. How can I make the gradients move smoothly?

I saw the following solutions, but unfortunately none of them worked for me:

• How to apply multiple css radial gradients to a single element
• Animate a div background image
• How to animate a radial-gradient using CSS?
• CSS animation not smooth with radial-gradient background
• CSS-Animation with two radial gradients moving/spinning inside the clipped mask png

I know maybe my implementation is not so correct, I am really doing my best.

How can I implement the idea I explained above using CSS &/or vanilla JS?

I have tried to create a node.js app that fetches data from an api, this data is then fetched by my main webpage to be used. This worked when i was creating it and testing it on my local computer using the hostname localhost however, when I tried to upload code to my cpanel for my website and then fecth it from there it doesn’t work. new-node-app.info.taymiyyah.info is the subdomain name, the subdomain is where I have put the node.js code and am serving the app.

This is what it is supposed to look like, run on localhost

This is my app.js:

const express = require('express');
const axios = require('axios');
const app = express();
const hostname =    "31.22.7.102";
const cors = require('cors');
const PORT = process.env.PORT || 3002;



const API_KEY = "$2y$10$OJaOQ1PpJsXclWRHcoH3jE330eD1MP3ZYA1eTxXcjp1XxJY31u";

// Enable CORS for all routes
app.use(cors());


app.get('/api/chapters', async (req, res) => {
  try {
    const response = await axios.get(`https://www.hadithapi.com/api/sahih-bukhari/chapters?apiKey=${API_KEY}`);
    res.json(response.data);
  } catch (error) {
    console.error(`Error: ${error}`);
    res.status(500).json({ message: "Server error" });
  }
});

app.get('/api/hadiths', async (req, res) => {
  try {
    const bookSlug = req.query.book;
    const chapterNumber = req.query.chapter;
    const hadiths = await fetchAllHadiths(bookSlug, chapterNumber);
    res.json({status: 200, message: "Hadiths has been found.", hadiths});
  } catch (error) {
    console.error(`Error: ${error}`);
    res.status(500).json({ message: "Server error" });
  }
});

async function fetchAllHadiths(bookSlug, chapterNumber, page = 1, hadiths = []) {
  const response = await axios.get(`https://www.hadithapi.com/api/hadiths?apiKey=${API_KEY}&book=${bookSlug}&chapter=${chapterNumber}&page=${page}`);
  const newHadiths = hadiths.concat(response.data.hadiths.data);
  if (response.data.hadiths.current_page < response.data.hadiths.last_page) {
    return await fetchAllHadiths(bookSlug, chapterNumber, page + 1, newHadiths);
  } else {
    return newHadiths;
  }
}

app.listen(PORT, () => {
  console.log(`Server running at http://${hostname}:${PORT}/`);
});

When you try to treat it like localhost it gives this

“bukhari:1116 Mixed Content: The page at ‘https://taymiyyah.info/bukhari’ was loaded over HTTPS, but requested an insecure resource ‘http://new-node-app.info.taymiyyah.info:3002/api/chapters’. This request has been blocked; the content must be served over HTTPS.”

I am wondering if the problem is in the actual node.js sercer code, perhaps the hostname?

So I have a table , I used 3 table (a way to implement Table with sticky columns) and the left and right tables are fixed column and the center table should have a vertical scroll but currently the scroll is not appearing or working and in lower screens the columns are way too close to each other and the text are merging.

The left and right table are working fine , the issue is only in the center table that it should be scrollable. Anyone has an idea will be much appreciated. Thank you.

This is the goal

desire ouput

current output

#css code

`.table-container {
    position: relative;
    display: flex;
    overflow: hidden;
}

.table-center {
    overflow-x: auto;
}

.table-left {
    top: 0;
    left: 0;
    z-index: 999;
}

/* Add this style to each column in the center table */
.table-center th,
.table-center td {
  min-width: 50px; /* Adjust the minimum width as needed */
}


.main-table {
    margin-top: 60px;
    width: 100%; /* Set the width to 100% */
    table-layout: fixed; /* Add this line to ensure fixed column widths */
  }

.table-right {
    width: 100px;
    top: 0;
    right: 0;
    z-index: 999;
}

.table-container th {
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.15000000596046448px;
    text-align: left;
    
}
.table-container td {
    padding-left: 10px
}
.left-table-td-value {
    font-weight: 500;
    font-size: 12px;
    min-width: 200px;
}
.td-value-name {
    padding-left: 8px;
    min-width: 200px;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.15000000596046448px;
    text-align: left;

}
.td-value-email {
    padding-left: 8px;
    min-width: 200px; 
    font-family: 'Inter';
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4000000059604645px;
    text-align: left;
}

`

#html code

`<div style="padding: 20px">
                <div class="table-container">
                  <div class="table-left mat-elevation-z8">
                    <table mat-table [dataSource]="dataSource" style="margin-top: 60px">
                      <ng-container matColumnDef="region">
                        <th mat-header-cell *matHeaderCellDef>Region</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.region }}
                          </div>
                        </td>
                      </ng-container>
              
                      <ng-container matColumnDef="area">
                        <th mat-header-cell *matHeaderCellDef>Area</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.area }}
                          </div>
                        </td>
                      </ng-container>
              
                      <tr mat-header-row *matHeaderRowDef="displayedColumnsTableLeft"></tr>
                      <tr
                        mat-row
                        *matRowDef="let row; columns: displayedColumnsTableLeft"
                      ></tr>
                    </table>
                  </div>
                  <div class="table-center">
                    <table
                      mat-table
                      [dataSource]="dataSource"
                      class="main-table"
                    >
                      <ng-container matColumnDef="repmEmail">
                        <th mat-header-cell *matHeaderCellDef>REPM</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.repmFirstName }} {{ element.repmLastName }}
                          </div>
                          <div class="td-value-email">{{ element.repmEmail }}</div>
                        </td>
                      </ng-container>
              
                      <ng-container matColumnDef="mprDirectorEmail">
                        <th mat-header-cell *matHeaderCellDef>MP&R Director</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.mprDirectorFirstName }}
                            {{ element.mprDirectorLastName }}
                          </div>
                          <div class="td-value-email">{{ element.mprDirectorEmail }}</div>
                        </td>
                      </ng-container>
              
                      <ng-container matColumnDef="mprManagermail">
                        <th mat-header-cell *matHeaderCellDef>MP&R Manager</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.mprManagerFirstName }} {{ element.mprManagerLastName }}
                          </div>
              
                          <div class="td-value-email">{{ element.mprManagermail }}</div>
                        </td>
                      </ng-container>
              
                      <ng-container matColumnDef="reGeoDirectorEmail">
                        <th mat-header-cell *matHeaderCellDef>RE GEO Director</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.reGeoDirectorFirstName }}
                            {{ element.reGeoDirectorLastName }}
                          </div>
                          <div class="td-value-email">{{ element.reGeoDirectorEmail }}</div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="reLeadEmail">
                        <th mat-header-cell *matHeaderCellDef>RE Lead</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.reLeadFirstName }} {{ element.reLeadLastName }}
                          </div>
                          <div class="td-value-email">{{ element.reLeadEmail }}</div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="coVpEmail">
                        <th mat-header-cell *matHeaderCellDef>CoVP</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name">
                            {{ element.coVpFirstName }} {{ element.coVpLastName }}
                          </div>
                          <div class="td-value-email">{{ element.coVpEmail }}</div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="constructionProjectDirector">
                        <th mat-header-cell *matHeaderCellDef>
                          Construction Project Director
                        </th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name"></div>
                          <div class="td-value-email"></div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="storePlanner">
                        <th mat-header-cell *matHeaderCellDef>Store Planner</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name"></div>
                          <div class="td-value-email"></div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="regionRVP">
                        <th mat-header-cell *matHeaderCellDef>Region RVP</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="td-value-name"></div>
                          <div class="td-value-email"></div>
                        </td>
                      </ng-container>
                      <tr mat-header-row *matHeaderRowDef="displayedColumnsTableCenter"></tr>
                      <tr
                        mat-row
                        *matRowDef="let row; columns: displayedColumnsTableCenter"
                      ></tr>
                    </table>
                  </div>
                  <div class="table-right mat-elevation-z8">
                    <table mat-table [dataSource]="dataSource" style="margin-top: 60px">
                      <ng-container matColumnDef="actions">
                        <th mat-header-cell *matHeaderCellDef>Actions</th>
                        <td mat-cell *matCellDef="let element" style="text-align: center">
                          <mat-icon style="color: #284b9b; font-size: 1.3em">edit</mat-icon>
                        </td>
                      </ng-container>
              
                      <tr mat-header-row *matHeaderRowDef="displayedColumnsTableRight"></tr>
                      <tr
                        mat-row
                        *matRowDef="let row; columns: displayedColumnsTableRight"
                      ></tr>
                    </table>
                  </div>
                </div>
                <mat-paginator
                  class="table-paginator"
                  [length]="100"
                  [pageSize]="10"
                  style="font-size: 12px"
                  [pageSizeOptions]="[5, 10, 25, 100]"
                  aria-label="Select page"
                >
                </mat-paginator>
              </div>`

#ts code snippet (the columns)`

  displayedColumnsTableCenter: string[] = ['repmEmail', 'mprDirectorEmail', 'mprManagermail', 'reGeoDirectorEmail', 'reLeadEmail', 'coVpEmail','constructionProjectDirector','storePlanner'];
  displayedColumnsTableLeft: string[] = ['region', 'area'];
  displayedColumnsTableRight: string[] = ['actions'];

I want to realize the earth with glow, but it is always a little different from the design drawing, because it is my first contact with three.js, so I do not know how to completely follow the design drawing to achieve, the following is my design drawing.enter image description here

After modifying the map, I added a earth with glow through the shader, but the overall color was still different from the design drawing. A small part of the glow of the design drawing was covered on the earth instead of close to the edge of the earth. I do not know how to achieve this effect. As well as my implementation of the screenshot, a friend can help me modify the code?

This is my main code

var scene, camera, renderer;
var WIDTH, HEIGHT, sphere, mesh_cloud, mesh_glow; // Added mesh_glow variable
function initRender() {
  WIDTH = 1280;
  HEIGHT = 700;
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
  });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.setPixelRatio(WIDTH / HEIGHT);

  document.getElementById("box").appendChild(renderer.domElement);
}
function initScene() {
  scene = new THREE.Scene();
}
function initCamera() {`your text`
  camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 1, 10000);
  camera.position.set(0, 0, 300);
}
function initLight() {
  var light = new THREE.AmbientLight("#d1d1d1", 0.6);
  scene.add(light);
  var directionalLight = new THREE.DirectionalLight("#fff", 1);
  directionalLight.position.set(-300, 300, 200);
  directionalLight.castShadow = true; // Enable shadow casting
  directionalLight.shadow.mapSize.width = 1200;
  directionalLight.shadow.mapSize.height = 1200;
  directionalLight.shadow.camera.near = 500;
  directionalLight.shadow.camera.far = 4000;
  directionalLight.shadow.camera.left = -500;
  directionalLight.shadow.camera.right = 500;
  directionalLight.shadow.camera.top = 500;
  directionalLight.shadow.camera.bottom = -500;
  scene.add(directionalLight);
}
function initObject() {
  var tmap = new THREE.TextureLoader().load(
    "/resource/images/index/earth-test.svg"
  );
  var tlarmap = new THREE.TextureLoader().load(
    "/resource/images/index/earth_spec.jpg"
  );
  var geometry = new THREE.SphereGeometry(95, 95, 95);
  var material = new THREE.MeshPhongMaterial();
  sphere = new THREE.Mesh(geometry, material);
  sphere.castShadow = true; // Enable shadow casting

  const ambientLight = new THREE.AmbientLight(0x0000, 0.5);
  scene.add(ambientLight);
  material.map = tmap;
  material.emissiveMap = tmap;
  material.emissive = new THREE.Color(0x00ffff);
  material.emissiveIntensity = 0.15;
  material.specular = new THREE.Color(0xffffff);
  material.shininess = 3.5;

  // Add the larger circle (glow effect)
  var glowGeometry = new THREE.CircleGeometry(95 * 1.6, 95, 95);
  var glowMaterial = new THREE.ShaderMaterial({
    uniforms: {
      time: { value: 0.0 },
      innerColor: { value: new THREE.Color(0x00ffff) },
      outerColor: { value: new THREE.Color(0x00ffff) },
    },
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent,
    transparent: true,
  });

  mesh_glow = new THREE.Mesh(glowGeometry, glowMaterial);
  mesh_glow.position.set(0, 0, -5);
  scene.add(mesh_glow);
  scene.add(sphere);
}

function animation() {
  requestAnimationFrame(animation);
  renderer.setClearColor(0x000000, 0);
  renderer.render(scene, camera);
  sphere.rotation.y += 0.004;
  // controls.update();
  mesh_glow.material.uniforms.time.value += 0.003;
}
function initStatr() {
  initRender();
  initScene();
  initCamera();
  initLight();
  initObject();
  animation();
}
document.addEventListener("DOMContentLoaded", function () {
  initStatr();
});

This is the shader code that I wrote on the html

    <script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
    uniform float time;
    uniform vec3 innerColor;
    uniform vec3 outerColor;
    varying vec2 vUv;
    void main() {
      float distance = length(vUv - 0.5);
      float intensity = 1.0 - smoothstep(0.3, 0.51, distance);
      vec3 color = vec3(0.4, 0.6, 1.0) * 0.98;
      gl_FragColor = vec4(color * 0.43, intensity);
    }
  </script>

This is my most self-achieved effect
enter image description here
This is the design effect
enter image description here
How can I achieve the effect of the design drawing？

I recently tried to upload some of my svelte-kit code to a cPanel node.js app, but got an error saying that “??=” was an unexpected token. I was looking through the code, and found the line causing the error const component = async () => component_cache ??= (await import('./layout.svelte-32c85b96.mjs')).default;. I was wondering how to replace this as the node.js version I can use is 14. I tried looking up “??=” on Google but found literally nothing.

I recently integrated a chatbot into my website, which involves both Python and JavaScript code. Initially, I had built the chatbot in a separate file, but I decided to merge it with my website code in a new file. However, I encountered an issue while trying to implement the app.py code (Python) into App.js (JavaScript) for the website.

In App.js, I tried to import the chatbot code using the file path ./components/layout/chatbot-solicitors-website/chatbot-deployment/standalone-frontend/app with the following import statement:

import { Routes, Route } from "react-router-dom";
import appcss from "./App.module.css";

import AboutUs from "./pages/AboutUs";
import BookOnline from "./pages/BookOnline";
import Firm from "./pages/Firm";
import Home from "./pages/Home";
import LogIn from "./pages/LogIn";
import Publications from "./pages/Publications";
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import ContactUs from "./components/layout/ContactUs";
import ChatWithUsButton from "./components/layout/ChatWithUsButton";
import ChatBot from "./components/layout/chatbot-solicitors-website/chatbot-deployment/standalone-frontend/app";

function App() {
  return (
    <div className={appcss.pagecontainer}>
      <div className={appcss.contentwrap}>
        <Navbar />
        <Routes>
          <Route path="/about-us" element={<AboutUs />} />
          <Route path="/book-online" element={<BookOnline />} />
          <Route path="/firm" element={<Firm />} />
          <Route path="/home" element={<Home />} />
          <Route path="/login" element={<LogIn />} />
          <Route path="/publications" element={<Publications />} />
        </Routes>
      </div>
      <ChatBot />
      <ChatWithUsButton />
      <ContactUs />
      <Footer />
    </div>
  );
}

export default App;

However, I realized that it is not possible to directly run app.py (Python) within app.js (JavaScript). The issue arises because I need app.js to be executed through app.py first in order for the chatbot to function properly.

Here is the code snippet for app.py in my chatbot code:

from flask import Flask, render_template, request, jsonify

from chat import get_response

app = Flask(__name__)

@app.get("/")
def index_get():
    return render_template("base.html")

@app.post("/predict")                   
def predict():
   text = request.get_json().get("message")
   # TO-DO: check if text is valid
   response = get_response(text)
   message = {"answer": response}
   return jsonify(message)

if __name__ == "__main__":
    app.run(debug=True, port=5001)

and here is the app.js code for my chatbot for more context:

class Chatbox {
    constructor() {
        this.args = {
            openButton: document.querySelector('.chatbox__button'),
            chatBox: document.querySelector('.chatbox__support'),
            sendButton: document.querySelector('.send__button')
        }

        this.state = false;
        this.messages = [];
    }

    display() {
        const {openButton, chatBox, sendButton} = this.args;

        openButton.addEventListener('click', () => this.toggleState(chatBox))

        sendButton.addEventListener('click', () => this.onSendButton(chatBox))

        const node = chatBox.querySelector('input');
        node.addEventListener("keyup", ({key}) => {
            if (key === "Enter") {
                this.onSendButton(chatBox)
            }
        })
    }

    toggleState(chatbox) {
        this.state = !this.state;

        // show or hides the box
        if(this.state) {
            chatbox.classList.add('chatbox--active')
        } else {
            chatbox.classList.remove('chatbox--active')
        }
    }

    onSendButton(chatbox) {
        var textField = chatbox.querySelector('input');
        let text1 = textField.value
        if (text1 === "") {
            return;
        }

        let msg1 = { name: "User", message: text1 }
        this.messages.push(msg1);

        fetch('http://127.0.0.1:5000/predict', {
            method: 'POST',
            body: JSON.stringify({ message: text1 }),
            mode: 'cors',
            headers: {
              'Content-Type': 'application/json'
            },
          })
          .then(r => r.json())
          .then(r => {
            let msg2 = { name: "Sam", message: r.answer };
            this.messages.push(msg2);
            this.updateChatText(chatbox)
            textField.value = ''

        }).catch((error) => {
            console.error('Error:', error);
            this.updateChatText(chatbox)
            textField.value = ''
          });
    }

    updateChatText(chatbox) {
        var html = '';
        this.messages.slice().reverse().forEach(function(item, index) {
            if (item.name === "Sam")
            {
                html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>'
            }
            else
            {
                html += '<div class="messages__item messages__item--operator">' + item.message + '</div>'
            }
          });

        const chatmessage = chatbox.querySelector('.chatbox__messages');
        chatmessage.innerHTML = html;
    }
}


const chatbox = new Chatbox();
chatbox.display();

I would greatly appreciate any guidance on how to seamlessly integrate my Flask backend (app.py) with my React frontend (App.js) to make the chatbot fully functional within my website. Specifically, I need to understand how to ensure that app.js runs through app.py first.

Thank you in advance for your help!