Upload video

.gitignore

@@ -11,6 +11,7 @@ server/.env
 server/Accounts/
 server/package-lock.json
 server/q_api/notebooks/.ipynb_checkpoints
+server/manual_save
 .env
 interface/.env
 server/toia-dm/.env

README.md

@@ -1,7 +1,11 @@
 # TOIA-2.0
 
-This is a repository for the TOIA 2.0 System.
+This is a repository for TOIA 2.0 System with Soojin's Capstone Project "Elephant in the Room". You can watch a short demo
+[here](https://www.youtube.com/watch?v=4EK19DnM4_c), and read the full documentation [here](https://meadow-oboe-807.notion.site/Elephant-in-the-Room-060a99def2bb4b8192e351aac2db52f1).
 
+# Project Specific Setup
+
+All the code that is written for the project is under the file named shhh... including ShhhPage.js ShhhPlayer.js, shhhsuggestivesearch.js and ShhhPage.css.
 
 # Developer Setup
 
@@ -13,24 +17,24 @@ There are three `.env` files. One in the root directory, one in the `/interface`
 
     EXPRESS_PORT=3001
     DM_PORT=5001
-    
+
     ENVIRONMENT=development
-    
+
     EXPRESS_HOST=http://localhost
     DM_ROUTE=http://toia-dm:5001/dialogue_manager
     Q_API_ROUTE=http://q_api:5000/generateNextQ
-    
+
     DB_CONNECTION=mysql
     DB_DATABASE=toia
-    
+
     DB_HOST=mysql
     DB_USERNAME=root
     DB_PASSWORD=
-    
+
     GC_BUCKET=
     GOOGLE_SPEECH_API_CREDENTIALS_FILE=/speech_to_text/toia-capstone-2021-b944d1cc65aa.json
     GOOGLE_CLOUD_STORE_CREDENTIALS_FILE=/toia-capstone-2021-a17d9d7dd482.json
-    
+
     OPENAI_API_KEY=
 
 1. Set the `DB_PASSWORD`
@@ -55,11 +59,11 @@ Note: It's probably a good idea to place Google cloud related environment variab
 
 ## Database Migration
 
-1. Create a folder called `Accounts` in the server folder, if it does not exist. 
+1. Create a folder called `Accounts` in the server folder, if it does not exist.
 2. Copy the video folders to the `Accounts` folder provided by admin.
 3. Navigate to [localhost:8080](localhost:8080) with the username and password provided in `.env` in the root folder.
 4. Drop all the tables in toia (if needed backup the current toia db using export).
-5. Import the database sql file into the toia table. 
+5. Import the database sql file into the toia table.
 
 ## Running the app
 
@@ -72,10 +76,10 @@ Make sure you have installed docker and the docker daemon is running.
 Making Changes Under Development Mode
 
 - The docker-compose file is setup such that react and nodejs changes are reflected as soon as you change the files in `/interface` or `/server`
-- If you change anything inside `/server/q_api` or `/server/toia-dm`, you have to restart that particular container. 
+- If you change anything inside `/server/q_api` or `/server/toia-dm`, you have to restart that particular container.
 - By default, the files and database are persistent under development mode (Check volume mounts in `docker-compose-dev.yml`). If you wish to start a fresh environment, run `docker-compose down -v` to make sure all the volumes are purged when shutting down the containers. Then start the containers using the command above.
-- If the dialogue manager (toia-dm) shuts down when running in docker, change docker settings to allow more RAM (check [this](https://stackoverflow.com/questions/44533319/how-to-assign-more-memory-to-docker-container)). 
+- If the dialogue manager (toia-dm) shuts down when running in docker, change docker settings to allow more RAM (check [this](https://stackoverflow.com/questions/44533319/how-to-assign-more-memory-to-docker-container)).
 
 #### Production mode
 
-- Change the `ENVIRONMENT` variable in .env file to production and run `docker-compose up`
+- Change the `ENVIRONMENT` variable in .env file to production and run `docker-compose up`

docker-compose-dev.yml

@@ -46,6 +46,7 @@ services:
       - ${DM_PORT}:${DM_PORT}
     volumes:
       - ./server/toia-dm:/app
+    tty: true
     depends_on:
       mysql:
         condition: service_healthy
@@ -86,7 +87,8 @@ services:
       - /app/node_modules
     env_file:
       - ./.env
-      - ./interface/.env
+    environment:
+      - CHOKIDAR_USEPOLLING=true
 
   metabase-sql-wrapper:
     build:

interface/package.json

@@ -22,6 +22,7 @@
 		"firebase": "^8.6.8",
 		"fuse.js": "^6.4.6",
 		"get-blob-duration": "^1.2.0",
+		"i18next-browser-languagedetector": "^7.0.1",
 		"id3js": "^2.1.1",
 		"install": "^0.13.0",
 		"mp3": "^0.1.0",
@@ -32,14 +33,15 @@
 		"react-bottom-scroll-listener": "^5.0.0",
 		"react-dom": "^17.0.1",
 		"react-elastic-carousel": "^0.11.5",
+		"react-flag-icon-css": "^1.0.25",
 		"react-notifications": "^1.7.3",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.1",
 		"react-select": "^4.2.1",
 		"react-speech-recognition": "^3.8.2",
 		"react-switch": "^6.0.0",
 		"react-webcam": "^5.2.4",
-		"sass": "^1.49.9",
+		"sass": "1.39.0",
 		"semantic-ui-css": "^2.4.1",
 		"semantic-ui-react": "^2.0.1",
 		"socket.io": "^4.3.2",

interface/src/App.css

@@ -116,6 +116,30 @@
 	color: white;
 	opacity: 0.8;
 }
+
+
+.nav-shhh_icon {
+	top: 0%;
+	left: 50%;
+	position: absolute;
+	font-weight: 800;
+	font-size: 20px;
+	line-height: 22px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	letter-spacing: -0.015em;
+	height: 40px;
+	width: 145px;
+	border-radius: 3px;
+	cursor: pointer;
+	color: white;
+	opacity: 0.8;
+}
+.elephant-icon{
+	width: 30px;
+}
+
 .nav-login_icon {
 	top: 0%;
 	left: 90%;
@@ -141,7 +165,11 @@
 	opacity: 0.8;
 }
 
-.nav-about_icon:hover {
+.nav-shhh_icon:hover{
+	opacity: 1;
+}
+
+.nav-about_icon:hover{
 	opacity: 1;
 }
 .nav-talk_icon:hover {
@@ -154,6 +182,55 @@
 	opacity: 1;
 }
 
+/* Dropdown Button */
+.nav-dropbtn {
+  background-color: transparent;
+  color: white;
+  width: 30px;
+  text-align: center;
+  font-size: 16px;
+  border: none;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.nav-dropdown {
+  top: 0%;
+  left: 0%;
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.nav-dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.nav-dropdown-content a {
+  color: black;
+  width: 30px;
+  height: 20px;
+  text-align: center;
+  text-decoration: none;
+  display: block;
+}
+
+.nav-dropdown-content div.header:hover::after {
+  background-color: transparent;
+}
+/* Change color of dropdown links on hover */
+.nav-dropdown-content option:hover {background-color: #ddd;}
+
+/* Show the dropdown menu on hover */
+.nav-dropdown:hover .nav-dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+/* .nav-dropdown:hover .nav-dropbtn {background-color: #3e8e41;} */
+
 /*login popup*/
 .login_popup {
 	height: 40vh;
@@ -273,3 +350,7 @@
 .fade-exit-done {
 	opacity: 0;
 }
+
+
+
+

interface/src/main.scss

@@ -11,3 +11,4 @@
 @import "pages/Player.css";
 @import "pages/SignUpPage.css";
 @import "semantic-ui-css/semantic.css";
+

interface/src/pages/AboutUsPage.css

@@ -117,7 +117,7 @@
 	font-size: 3rem;
 	text-align: left;
 	letter-spacing: -0.015em;
-	position: absolute;
+	/* position: absolute; */
 	/* left: 50%; */
 	top: 80px;
 	color: black;
@@ -129,15 +129,15 @@
 }
 .about-grid {
 	padding: 5px;
-	overflow-y: auto;
+	/* overflow-y: auto; */
 	height: 70%;
 	/* width: 84vw; */
-	width: 113.5%;
+	/* width: 113.5%; */
 	/* left: 8%;
   top: 25%; */
 	left: -6.5%;
 	top: 175px;
-	position: absolute;
+	/* position: absolute; */
 	display: flex;
 	flex-wrap: wrap;
 	flex-direction: row;
@@ -153,7 +153,7 @@
 	font-size: 20px;
 	font-weight: 500;
 	text-align: center;
-	margin-bottom: 0px;
+	margin-bottom: 30px !important;
 }
 
 .image-sizing {

interface/src/pages/AboutUsPage.js

@@ -1,25 +1,28 @@
-import React, { useState, useEffect } from "react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import {
+	NotificationContainer,
+	NotificationManager
+} from "react-notifications";
+import { Modal } from "semantic-ui-react";
 import submitButton from "../icons/submit-button.svg";
-import sampleVideo from "../icons/sample-video.svg";
 import alberto from "../images/alberto.jpeg";
-import wahib from "../images/wahib.jpg";
-import kertu from "../images/kertu.jpg";
+import armaan from "../images/armaan.jpg";
+import bishnu from "../images/bishnu.jpg";
+import camel from "../images/camel.png";
 import erin from "../images/erin.jpeg";
-import nizar from "../images/nizar.jpg";
+import gautam from "../images/gautam.jpeg";
 import goffredo from "../images/goffredo.jpeg";
-import tyeece from "../images/Tyeece.jpg";
-import armaan from "../images/armaan.jpg";
+import kertu from "../images/kertu.jpg";
+import muhammad from "../images/muhammad.jpeg";
+import nizar from "../images/nizar.jpg";
 import nyuad from "../images/nyuad-rb.png";
-import camel from "../images/camel.png";
-import history from "../services/history";
-import { Modal } from "semantic-ui-react";
-import sigDail from "../pdf/SIGDIAL_2021_TOIA_camera_ready_.pdf";
-import axios from "axios";
-import {
-	NotificationContainer,
-	NotificationManager,
-} from "react-notifications";
+import soojin from "../images/soojin.jpeg";
 import toia_logo from "../images/TOIA_Logo.png";
+import tyeece from "../images/Tyeece.jpg";
+import wahib from "../images/wahib.jpg";
+import sigDail from "../pdf/SIGDIAL_2021_TOIA_camera_ready_.pdf";
+import history from "../services/history";
 import Tracker from "../utils/tracker";
 
 function AvatarViewPage() {
@@ -61,6 +64,10 @@ function AvatarViewPage() {
 		{ still: erin, member: "Erin Collins" },
 		{ still: goffredo, member: "Goffredo Puccetti" },
 		{ still: nizar, member: "Nizar Habash" },
+		{ still: soojin, member: "Soojin Lee" },
+		{ still: muhammad, member: "Muhammad Ali" },
+		{ still: gautam, member: "Gautam Dinesh" },
+		{ still: bishnu, member: "Bishnu Dev" },
 	];
 
 	const renderTeam = (card, index) => {
@@ -205,8 +212,7 @@ function AvatarViewPage() {
 				size="large"
 				style={inlineStyle.modal}
 				open={open}
-				onClose={() => dispatch(false)}
-			>
+				onClose={() => dispatch(false)}>
 				<Modal.Header className="login_header">
 					<h1 className="login_welcome login-opensans-normal">
 						Welcome Back
@@ -243,8 +249,7 @@ function AvatarViewPage() {
 						/>
 						<div
 							className="login_text login-montserrat-black"
-							onClick={signup}
-						>
+							onClick={signup}>
 							Don't have an Account? Sign Up
 						</div>
 					</form>
@@ -253,32 +258,27 @@ function AvatarViewPage() {
 			<div className="nav-heading-bar">
 				<div
 					onClick={home}
-					className="nav-toia_icon app-opensans-normal"
-				>
+					className="nav-toia_icon app-opensans-normal">
 					TOIA
 				</div>
 				<div
 					onClick={about}
-					className="nav-about_icon app-monsterrat-black nav-selected"
-				>
+					className="nav-about_icon app-monsterrat-black nav-selected">
 					About Us
 				</div>
 				<div
 					onClick={library}
-					className="nav-talk_icon app-monsterrat-black "
-				>
+					className="nav-talk_icon app-monsterrat-black ">
 					Talk To TOIA
 				</div>
 				<div
 					onClick={garden}
-					className="nav-my_icon app-monsterrat-black "
-				>
+					className="nav-my_icon app-monsterrat-black ">
 					My TOIA
 				</div>
 				<div
 					onClick={isLoggedIn ? logout : openModal}
-					className="nav-login_icon app-monsterrat-black"
-				>
+					className="nav-login_icon app-monsterrat-black">
 					{isLoggedIn ? "Logout" : "Login"}
 				</div>
 			</div>
@@ -320,8 +320,7 @@ function AvatarViewPage() {
 					</a>
 					<a
 						href="https://github.com/wahibkamran/TOIA-2.0"
-						className="reference-item"
-					>
+						className="reference-item">
 						Github Repo
 					</a>
 				</div>