Project Version V1

m-a-y-a-n-k · Jan 21, 2023 · 9d7cc18 · 9d7cc18
1 parent fdc0f77
commit 9d7cc18
Show file tree

Hide file tree

Showing 19 changed files with 548 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "impression",
+  "version": "1.0.0",
+  "description": "Make your impression better",
+  "keywords": [
+    "semantic-analysis",
+    "nlp",
+    "speech-recognition",
+    "productivity",
+    "career"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "@fluentui/react-components": "9.11.0",
+    "compendium-js": "0.0.31",
+    "compromise": "14.7.1",
+    "detectrtc": "1.4.1",
+    "framer-motion": "8.2.4",
+    "lodash": "4.17.21",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-scripts": "4.0.0",
+    "react-speech-recognition": "3.9.1",
+    "typewriter-effect": "2.19.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/src/components/AnimatedMic.jsx b/src/components/AnimatedMic.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import "../styles/AnimatedMic.css";
+import SpeechRecognition, {
+  useSpeechRecognition
+} from "react-speech-recognition";
+import _debounce from "lodash/debounce";
+import { micMotionConfig } from "../config/micMotion";
+import MicNotSupport from "./MicNotSupport";
+
+const AnimatedMic = ({ updateUserFeedback }) => {
+  const [listen, setListen] = useState(false);
+
+  const {
+    listening,
+    finalTranscript,
+    interimTranscript,
+    isMicrophoneAvailable,
+    browserSupportsSpeechRecognition,
+    resetTranscript
+  } = useSpeechRecognition();
+
+  const handleToggleListen = (on) => {
+    if (on) {
+      SpeechRecognition.startListening();
+    } else {
+      SpeechRecognition.stopListening();
+    }
+  };
+
+  const toggleListen = () => {
+    setListen((off) => {
+      const on = !off;
+      handleToggleListen(on);
+      return on;
+    });
+  };
+
+  useEffect(() => {
+    if (!listening) {
+      setListen(false);
+    }
+  }, [listening]);
+
+  const transcriptFinished =
+    finalTranscript.length > 0 && interimTranscript === "";
+
+  if (transcriptFinished) {
+    const onTranscriptFinished = _debounce(() => {
+      updateUserFeedback(finalTranscript);
+      resetTranscript();
+    }, 500);
+    onTranscriptFinished();
+  }
+
+  const micNotSupported =
+    !browserSupportsSpeechRecognition || !isMicrophoneAvailable;
+
+  if (micNotSupported) {
+    return <MicNotSupport updateUserFeedback={updateUserFeedback} />;
+  }
+
+  return (
+    <div className="speech-input-banner">
+      <motion.div
+        layout
+        className={"wrap"}
+        data-listen={listen}
+        onClick={toggleListen}
+        initial={micMotionConfig.initial}
+        animate={micMotionConfig.animate}
+        transition={micMotionConfig.transition}
+      >
+        <div className={"mic"} data-listen={listen}></div>
+      </motion.div>
+      {!listen && <p>Tap Mic</p>}
+    </div>
+  );
+};
+export default AnimatedMic;
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,26 @@
+import "../styles/index.css";
+import { useEffect, useState } from "react";
+import Intro from "./Intro";
+import { INTRO_DURATION } from "../constants";
+import Landing from "./Landing";
+
+export default function App() {
+  const fetchIntroStatus = () =>
+    sessionStorage.getItem("intro-done") ? false : true;
+
+  const [showIntro, setShowIntro] = useState(fetchIntroStatus);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowIntro(false);
+      sessionStorage.setItem("intro-done", "1");
+    }, INTRO_DURATION);
+  }, []);
+
+  return (
+    <div className="App">
+      {showIntro && <Intro />}
+      {!showIntro && <Landing />}
+    </div>
+  );
+}
diff --git a/src/components/Feedback.jsx b/src/components/Feedback.jsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import { feebackTextConfig } from "../config/feedbackText";
+import { feedbackCTAMotionConfig } from "../config/feedbackCTAMotion";
+import "../styles/Feedback.css";
+
+export default function FeedBack({ userFeedback, resetFeedback }) {
+  const customFeedback = feebackTextConfig[userFeedback].feedback;
+  const customCTAText = feebackTextConfig[userFeedback].ctaText;
+
+  return (
+    <>
+      {customFeedback}
+      <motion.div
+        className="feedback-btn"
+        data-user-feedback={userFeedback}
+        onClick={() => {
+          resetFeedback();
+        }}
+        initial={feedbackCTAMotionConfig.initial}
+        animate={feedbackCTAMotionConfig.animate}
+        transition={feedbackCTAMotionConfig.transition}
+      >
+        <p>{customCTAText}</p>
+      </motion.div>
+    </>
+  );
+}
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Typewriter from "typewriter-effect";
+
+const Intro = () => {
+  return (
+    <Typewriter
+      onInit={(typewriter) => {
+        typewriter
+          .typeString("Hi ,")
+          .pauseFor(500)
+          .deleteAll()
+          .typeString("Let's help you sound impressive")
+          .deleteAll()
+          .pauseFor(250)
+          .typeString("Try it out")
+          .start();
+      }}
+    />
+  );
+};
+
+export default Intro;
diff --git a/src/components/Landing.jsx b/src/components/Landing.jsx
@@ -0,0 +1,37 @@
+import "../styles/Landing.css";
+import { useState } from "react";
+import AnimatedMic from "./AnimatedMic";
+import FeedBack from "./Feedback";
+import compendium from "compendium-js";
+
+const Landing = () => {
+  const [userFeedback, setUserFeedback] = useState("");
+
+  const updateUserFeedback = (transcript) => {
+    let analysis = compendium.analyse(transcript, null, [
+      "entities",
+      "negation",
+      "type",
+      "numeric"
+    ]);
+
+    const sentiment = analysis[0].profile.label;
+    setUserFeedback(sentiment);
+  };
+
+  const resetFeedback = () => {
+    setUserFeedback("");
+  };
+
+  return (
+    <div className="Landing" data-user-feedback={userFeedback}>
+      {/* <Locale />   */}
+      {!userFeedback && <AnimatedMic updateUserFeedback={updateUserFeedback} />}
+      {userFeedback && (
+        <FeedBack userFeedback={userFeedback} resetFeedback={resetFeedback} />
+      )}
+    </div>
+  );
+};
+
+export default Landing;
diff --git a/src/components/MicNotSupport.jsx b/src/components/MicNotSupport.jsx
@@ -0,0 +1,67 @@
+import "../styles/MicNotSupport.css";
+import { micSupportConfig } from "../config/micSupport";
+import { useEffect, useState } from "react";
+import DetectRTC from "detectrtc";
+import { Textarea } from "@fluentui/react-components";
+import { feedbackCTAMotionConfig } from "../config/feedbackCTAMotion";
+import { motion } from "framer-motion";
+
+const MicNotSupport = ({ updateUserFeedback }) => {
+  const [rtcIssue, setRtcIssue] = useState("device");
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    const getRTCProblem = () => {
+      if (!DetectRTC.isWebRTCSupported) {
+        setRtcIssue("browser");
+      } else if (!DetectRTC.isWebsiteHasMicrophonePermissions) {
+        setRtcIssue("permission");
+      } else if (!DetectRTC.hasMicrophone) {
+        setRtcIssue("device");
+      }
+    };
+
+    getRTCProblem();
+  }, []);
+
+  const { feedback, hint } = micSupportConfig[rtcIssue] || {};
+
+  return (
+    <div className="mic-support-container">
+      {feedback && <h3 className="feedback">{feedback}</h3>}
+      {hint && <p className="hint">{hint}</p>}
+      <Textarea
+        value={text}
+        onChange={(event) => {
+          setText(event.target.value);
+        }}
+        placeholder="Resize for more space"
+        size="large"
+        resize="both"
+        style={{
+          backgroundColor: "rgb(4, 3, 31)",
+          color: text ? "white" : "rgb(175, 173, 209)",
+          fontSize: "0.6em",
+          padding: "12px 0 0 12px",
+          border: "none"
+        }}
+      />
+      <motion.div
+        className="mic-support-submit-btn"
+        onClick={() => {
+          if (text) {
+            updateUserFeedback(text);
+          }
+        }}
+        data-enabled={text ? "true" : "false"}
+        initial={feedbackCTAMotionConfig.initial}
+        animate={feedbackCTAMotionConfig.animate}
+        transition={feedbackCTAMotionConfig.transition}
+      >
+        <p>Submit</p>
+      </motion.div>
+    </div>
+  );
+};
+
+export default MicNotSupport;
diff --git a/src/config/feedbackCTAMotion.js b/src/config/feedbackCTAMotion.js
@@ -0,0 +1,16 @@
+export const feedbackCTAMotionConfig = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  transition: {
+    default: {
+      duration: 1,
+      ease: [0, 0.3, 0.7, 1]
+    },
+    scale: {
+      type: "spring",
+      damping: 5,
+      stiffness: 100,
+      restDelta: 0.001
+    }
+  }
+};
diff --git a/src/config/feedbackText.js b/src/config/feedbackText.js
@@ -0,0 +1,14 @@
+export const feebackTextConfig = {
+  positive: {
+    feedback: "That sounds nice",
+    ctaText: "Have more fun"
+  },
+  negative: {
+    feedback: "Ah ! That's bleak",
+    ctaText: "Do Better"
+  },
+  neutral: {
+    feedback: "Your point is taken",
+    ctaText: "Start Fresh"
+  }
+};
diff --git a/src/config/micMotion.js b/src/config/micMotion.js
@@ -0,0 +1,16 @@
+export const micMotionConfig = {
+  initial: { opacity: 0, scale: 0.5 },
+  animate: { opacity: 1, scale: 1 },
+  transition: {
+    default: {
+      duration: 0.3,
+      ease: [0, 0.71, 0.2, 1.01]
+    },
+    scale: {
+      type: "spring",
+      damping: 5,
+      stiffness: 100,
+      restDelta: 0.001
+    }
+  }
+};