implement redux functionality and update the "predict" page UI

Frontend/app/store.js

@@ -0,0 +1,6 @@
+import { configureStore } from '@reduxjs/toolkit'
+import feedbackReducer from '../features/feedback/feedbackSlice'
+
+export const store = configureStore({
+    reducer: feedbackReducer,
+})

Frontend/features/feedback/feedbackSlice.js

@@ -0,0 +1,21 @@
+import { createSlice} from '@reduxjs/toolkit'
+
+// Initial state
+const initialState = {
+    feedbacks: '',
+}
+
+export const feedbackSlice = createSlice({
+    name: 'feedback',
+    initialState,
+    reducers: {
+        feedbackState:(state,action) => {
+            state.feedbacks = action.payload;
+        }
+    }
+})
+
+
+export const {feedbackState} = feedbackSlice.actions;
+
+export default feedbackSlice.reducer;

Frontend/package.json

@@ -14,11 +14,13 @@
     "@material-tailwind/react": "^2.1.9",
     "@react-three/drei": "^9.105.6",
     "@react-three/fiber": "^8.16.5",
+    "@reduxjs/toolkit": "^2.2.7",
     "@types/regenerator-runtime": "^0.13.6",
     "framer-motion": "^11.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.0",
     "react-speech-recognition": "^3.10.0",
     "react-type-animation": "^3.2.0",

Frontend/src/components/feedbackForm/Feedback.jsx

@@ -1,8 +1,12 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { feedbackState } from "../../features/feedback/feedbackSlice";
+import { TypeAnimation } from "react-type-animation";
 
 const FeedbackForm = () => {
   const [feedback, setFeedback] = useState("");
   const [sentiment, setSentiment] = useState(null);
+  const dispatch = useDispatch();
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -13,9 +17,12 @@ const FeedbackForm = () => {
       },
       body: JSON.stringify({ text: feedback }),
     });
+
     const data = await response.json();
-    console.log(data);
+
     setSentiment(data.prediction);
+
+    dispatch(feedbackState(sentiment));
   };
 
   return (
@@ -39,16 +46,38 @@ const FeedbackForm = () => {
       </div>
 
       {sentiment == 1 ? (
-        <p className="mt-4 text-center font-semibold text-2xl">
-          It seems like you are satisfied with the prediction. <br /> If you
-          want more clarifications?<br/> Please get help from our personal Assistants.
-        </p>
-      ) : sentiment == 0 ? (
+        <div>
+          <TypeAnimation
+            sequence={[
+              "It seems like you are satisfied with the prediction.If you want more clarifications? Please get help from our personal Assistants.",
+            ]}
+            speed={50}
+            repeat={0}
+            className="mt-4 text-center font-semibold text-2xl bg-slate-500"
+            style={{
+              height: 'auto',
+              width: '700px',
+              display: 'block',
+
+            }}
+          />
+        </div>
+      ) : 
+      sentiment == 0 ? (
         <div className="items-center">
-          <p className="mt-4 text-center font-semibold text-2xl">
-            It seems like you are not  satisfied with the prediction. <br/>Plz Get 
-            help from our personal Assistants.
-          </p>
+          <TypeAnimation
+            sequence={[
+              "It seems like you are not satisfied with the prediction.Plz Get help from our personal Assistants.",
+            ]}
+            speed={50}
+            repeat={0}
+            className="mt-4 text-center font-semibold text-2xl bg-slate-500"
+            style={{
+              height: 'auto',
+              width: '700px',
+              display: 'block',
+            }}
+          />
         </div>
       ) : (
         <div></div>