:sparkles: Update frontend configurations and components

frontend/Dockerfile

@@ -1,23 +1,4 @@
-# Specify the base image
-FROM node:alpine
-
-# Set the working directory in the container
+FROM node:16-alpine3.14
 WORKDIR /app
-
-# Copy package.json and package-lock.json
 COPY package*.json ./
-
-# Install dependencies
-RUN npm install
-
-# Copy the rest of your application code
-COPY . .
-
-# Build your Next.js application
-RUN npm run build
-
-# Expose the port your app runs on
-EXPOSE 3000
-
-# Command to run your app
-CMD ["npm", "start"]
+RUN npm install

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chat-n-face",
+  "name": "gradio-board",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -12,7 +12,6 @@
     "@types/react-dom": "^18.0.6",
     "@use-gesture/react": "^10.2.20",
     "axios": "^0.27.2",
-    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.8",
@@ -22,13 +21,11 @@
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.3",
     "typescript": "^4.8.2",
-    "web-vitals": "^2.1.4",
-    "next-images": "^1.8.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

frontend/pages/_app.js

@@ -1,16 +0,0 @@
-import '../src/css/index.css'
-import '../src/css/dist/output.css'; // Example of a global CSS file
-import '../src/css/counter.css';
-import 'semantic-ui-css/semantic.min.css'; // Assuming you're using Semantic UI
-
-// Your _app.js content;
-import ReactEnviorment from '../components/ReactFlow/ReactFlowEnv'
-
-export default function App() {
-  return(
-      <>
-        <ReactEnviorment/>
-      </>
-      
-  )
-};

frontend/pages/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './_app';
+import App from '../src/App';
 import reportWebVitals from '../src/reportWebVitals';
 
 // Function to render the app only on the client-side

frontend/src/App.js

@@ -0,0 +1,10 @@
+import ReactEnviorment from './components/ReactFlow/ReactFlowEnv'
+
+export default function App() {
+  return(
+      <>
+        <ReactEnviorment/>
+      </>
+      
+  )
+};

frontend/{components → src/components}/ReactFlow/ReactFlowEnv.js

@@ -1,4 +1,5 @@
 import CustomNodeIframe from "../Nodes/Custom.js";
+import '../../css/dist/output.css'
 import ReactFlow, { Background,
                     applyNodeChanges,
                     ReactFlowProvider,
@@ -12,7 +13,7 @@ import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
 import CustomEdge from '../Edges/Custom'
 import CustomLine from "../Edges/CustomLine.js";
-import { useThemeDetector } from '../../src/helper/visual'
+import { useThemeDetector } from '../../helper/visual'
 import {CgMoreVerticalAlt} from 'react-icons/cg'
 import {BsFillEraserFill} from 'react-icons/bs' 
 import {FaRegSave} from 'react-icons/fa'
@@ -179,4 +180,3 @@ export default function ReactEnviorment() {
       </div>
     );
   }
-

frontend/src/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './css/index.css';
+import App from './App';
+//import Navbar from './Components/Navagation/navbar';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('Gradio-Flow'));
+root.render(
+  <React.StrictMode>
+    < App/>
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();