2023 new version

README.md

@@ -1 +1,7 @@
-# Western9Hackathon
+# Western9Hackathon
+
+Krish from the future here, wanted to add a couple of notes for this project:
+
+- client is hosted on firebase
+- server is hosted on railway. Our trial runs out on about May 25th. We can't use vercel because this is repo lives in a team for which we need to pay for vercel.
+- to save time, I added all env variables to the repo, but I know that's not a good practice. Consequently I have made this repo private for now.

client/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

client/src/components/Project.js

@@ -54,7 +54,7 @@ const downsampleBuffer = (buffer, sampleRate, outSampleRate) => {
 
 const sendAudioFile = async (file, lyrics) => {
   const formData = new URLSearchParams({ recording: file, lyrics: lyrics });
-  return fetch("https://prod-ghostwriter.herokuapp.com/api/recordings", {
+  return fetch("http://ghostwriter-production.up.railway.app/api/recordings", {
     method: "POST",
     body: formData,
     headers: {
@@ -76,8 +76,7 @@ function Project() {
   const [curBeat, setCurBeat] = useState(beat1);
   const [play, { stop: stopBeat }] = useSound(curBeat);
   const [transcripts, setTranscripts] = useState(null);
-  const [outputData, setOutputData] = useState([]);
-
+  const [rhymes, setRhymes] = useState(null);
 
   useEffect(() => {
     setupSocket();
@@ -125,55 +124,45 @@ function Project() {
     }
   }, [newTranscript]);
 
-
-  async function getRhymes(lastWord) {
-    // const lastWord = transcript.split(" ").at(-1);
-    // //if the transcript has ever read in the current word
-    // console.log(rhymeSuggestions);
-    // console.log('im straight', transcript.split(" ").slice(0, -1), lastWord);
-
-    //totalTranscript but as an array but i want to remove the element
-    if (totalTranscript.slice(0, -1).includes(lastWord)) {
-      console.log("IM GAY.")
-      rhymeSuggestions[lastWord] += 5;
-    } else {
-      rhymeSuggestions[lastWord] = 0;
+  useEffect(() => {
+    async function getRhymes(lastWord) {
+      // const lastWord = transcript.split(" ").at(-1);
+      // //if the transcript has ever read in the current word
+      // console.log(rhymeSuggestions);
+      // console.log('im straight', transcript.split(" ").slice(0, -1), lastWord);
+
+      //totalTranscript but as an array but i want to remove the element
+      if (totalTranscript.slice(0, -1).includes(lastWord)) {
+        rhymeSuggestions[lastWord] += 5;
+      } else {
+        rhymeSuggestions[lastWord] = 0;
+      }
+      await fetch("https://api.datamuse.com/words?rel_rhy=" + lastWord)
+        .then((response) => response.json())
+        .then((data) =>
+          setRhymes(
+            data.slice(
+              rhymeSuggestions[lastWord],
+              rhymeSuggestions[lastWord] + 5
+            )
+          )
+        );
     }
-    fetch("https://api.datamuse.com/words?rel_rhy=" + lastWord)
-      .then((response) => response.json())
-      .then((data) =>
-        data
-          .slice(rhymeSuggestions[lastWord], rhymeSuggestions[lastWord] + 5)
-          .map((word, index) => {
-            // console.log(word.word);
-            /*
-            setOutputData([...outputData, {
-              word: lastWord,
-              suggestions: [...outputData[index].suggestions, word.word]
-            }])
-            */
-          })
-      );
-  }
 
-  /*
-  useEffect(() => {
-    getRhymes();
-    console.log('outputData', outputData);
+    getRhymes(transcript.split(" ").at(-1));
   }, [transcript]);
-   */
 
   const fetchRecordings = async () => {
     const response = await fetch(
-      "https://prod-ghostwriter.herokuapp.com/api/get/recordings"
+      "http://ghostwriter-production.up.railway.app/api/get/recordings"
     );
     const data = await response.json();
     setTranscripts(data);
     console.log(data);
   };
 
   const setupSocket = () => {
-    socket.current = io("https://prod-ghostwriter.herokuapp.com/", {
+    socket.current = io("http://ghostwriter-production.up.railway.app/", {
       reconnection: true,
       reconnectionDelay: 1000,
       reconnectionDelayMax: 5000,
@@ -287,9 +276,7 @@ function Project() {
       <Typography variant="title">Ghostwriter</Typography>
       <div style={{ marginTop: "1rem" }}>
         <Typography variant="subtitle">
-          Rapping is a form of poetry, one to ease the mind and provide clarity.
-          We are hacking the mental health space by giving literal poetic
-          justice to users around the world.
+          Your personalized AI freestyle assistant.
         </Typography>
       </div>
       <div style={{ marginTop: "2rem" }}>
@@ -301,18 +288,51 @@ function Project() {
         {totalTranscript.map((singleTranscript, index) => (
           <p key={index}>{singleTranscript}</p>
         ))}
-        {/*<h1>{transcript}</h1>*/}
-        <div style={{display: 'flex', flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto', width: 400}}>
+        <h1>{transcript}</h1>
+
+        <h3
+          style={{
+            underline: "1",
+          }}
+        >
+          Rhymes
+        </h3>
+        <div
+        // style={{
+        //   display: "flex",
+        //   flexDirection: "column",
+        //   flexWrap: "wrap",
+        //   justifyContent: "space-around",
+        //   alignItems: "center",
+        // }}
+        >
+          {rhymes &&
+            rhymes.map((rhyme) => {
+              return <p>{rhyme.word}</p>;
+            })}
+        </div>
+        {/* <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            marginLeft: "auto",
+            marginRight: "auto",
+            width: 400,
+            maxWidth: "100%",
+            overflow: "cover",
+            justifyContent: "center",
+          }}
+        >
           {transcript.split(" ").map((word) => (
-            <div style={{ marginRight: '1rem' }}>
+            <div style={{ marginRight: "1rem" }}>
               <Suggestions word={word} />
             </div>
           ))}
-        </div>
+        </div> */}
       </div>
       {blob && blobUrl ? (
         <div>
-          <div style={{marginTop: '2rem'}}>
+          <div style={{ marginTop: "2rem" }}>
             <audio src={blobUrl} controls />
           </div>
           <Button
@@ -326,8 +346,11 @@ function Project() {
         </div>
       ) : null}
 
-      <Button style={{ marginTop: "1.5rem", marginBottom: '2rem' }} onClick={fetchRecordings}>
-        Fetch Recordings
+      <Button
+        style={{ marginTop: "1.5rem", marginBottom: "2rem" }}
+        onClick={fetchRecordings}
+      >
+        See Other Freestyles
       </Button>
       {transcripts ? (
         <div>

client/src/components/header.js

@@ -1,38 +1,33 @@
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import { ColorModeContext } from "../Home.jsx";
-import {IconButton, useTheme, Link, Button, Stack} from "@mui/material";
-import {useContext} from "react";
+import { IconButton, useTheme, Link, Button, Stack } from "@mui/material";
+import { useContext } from "react";
 import { HeaderWrapper } from "./styles";
 import { AppBar, Toolbar } from "@mui/material";
 // import { Link } from "react-router-dom";
 // import Link from '@mui/material/Link';
 
-
-
-
 function Header() {
   const colorMode = useContext(ColorModeContext);
   const theme = useTheme();
 
   return (
-    <header>
-      <AppBar>
+    <header style={{ marginBottom: -50 }}>
       <Toolbar>
-      <IconButton sx={{ml: 1}} onClick={colorMode.toggleColorMode} color="inherit">
-        {theme.palette.mode === "dark" ? (
-          <Brightness7Icon/>
-        ) : (
-          <Brightness4Icon/>
-        )}
-      </IconButton>
-          <Stack>
-          <Link href="/" >HomePage</Link>
-          <Link href="/SocialPage" >SocialPage</Link>
-        </Stack>
-       </Toolbar>
-      </AppBar>
-        </ header>
+        <IconButton
+          sx={{ ml: 1 }}
+          onClick={colorMode.toggleColorMode}
+          color="inherit"
+        >
+          {theme.palette.mode === "dark" ? (
+            <Brightness7Icon />
+          ) : (
+            <Brightness4Icon />
+          )}
+        </IconButton>
+      </Toolbar>
+    </header>
   );
 }
 

server/.env

@@ -1,3 +1,4 @@
 export GOOGLE_APPLICATION_CREDENTIALS="./key.json"
 api_key=L$0JfnssHJGTks
-COHERE_API_KEY=$api_key
+COHERE_API_KEY=$api_key
+DATABASE_URL="postgresql://ghostwriter:redbullgivesyouwings@upper-calf-6800.7tt.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full"

server/index.js

@@ -1,7 +1,7 @@
 const express = require("express");
 const app = express();
 const cors = require("cors");
-const port = 3001;
+const port = process.env.PORT; // exchange this with 3001 if you are on development mode
 const server = require("http").Server(app);
 const io = require("socket.io")(server, {
   cors: {
@@ -12,6 +12,7 @@ const { Sequelize } = require("sequelize-cockroachdb");
 const bodyParser = require("body-parser");
 const speech = require("@google-cloud/speech");
 const client = new speech.SpeechClient();
+const dotenv = require("dotenv").config();
 
 // Configure Transcription Request
 const request = {
@@ -35,7 +36,9 @@ app.use(cors());
 
 app.get("/", (req, res) => res.send("Hello World!"));
 
-const sequelize = new Sequelize(process.env.DATABASE_URL);
+const sequelize = new Sequelize(process.env.DATABASE_URL, {
+  dialect: "postgres",
+});
 
 const Recording = sequelize.define("transcripts", {
   id: {

server/key.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "crested-acumen-385615",
+  "private_key_id": "d8b279e5c54d252a8f8c8c3a31531a113d8b6a2a",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDEGe67lXfAxk8Q\ntvDnBMF02VypkIo8pBnaHBmUUw+Yn7RSF8O6y5gAC9ewfgzJRzTNAzhI7BWjn45b\nozyN4JcmR9O96Jxhcsw00b0rc6wQIlt4Byx+S888orwGRVj9XKrTEI9OlyS2D6nC\na8fWZb8IA3y91jxUTmgohcfIzG/OSGqrZ+c2MQUgT0EwvQbjoeo5Jrmf3qA+ls0s\nFUzN8QxDKMfR1dX3w45p8QGc5Qp/rB8RmlYLyoC1tfuVY/TKyFNZTNvg9UT1J+So\n3YhJKsHd/kqEGrJrZzOdZPt9JtFgDWMoUhLydY5BNMGLrZDFh/A+BSi1z30Uk0Ox\nrxtFAxb/AgMBAAECggEADFRXErs4jsnJIdNmvReq9CZQcabRUjO9Hl4C67T3N5De\n/QRafY2cbnBQLNwYALW156fqq4cQazu2byOJxJ/Y0QLWGMwdvPDDTxTa0HcS2+bV\nGmxVC1HH41eV+8zzZeakJOYXJIlTOREuCrfNFjlKc/4II0VrgJ93ZAjZQVI9O1ps\n+tJ0PcqYMarB+YzjVn569yBBFSFsnV0EstmBhiAKtwbtcF8ENO+qVUwt0y+bNpAu\n8l2vd2yQMoQNX8Hu0aDmrIOIW2Jc2m1yMXJy6fMyZnk3q3oAt62jShhh+73YDWjU\nfDC6rTIaYW9N3pPE4Z6FozKmrNq9rnsGhrsa+6S5yQKBgQDypxcHsOTcKBJekAme\noNb9QfCcLo1jy3YVHl+PGh3jRMFnZdlqSo4TMZSDpoEJdG7WAkzSRHAW/SBo1BXm\nunQ2oiVIHgXMP+DkzF22nmOqKyQVvlZV9MzkVTZlLseYa/e9xiZZuAu4j4EraweM\nHdwk2grVGfztEf/O1Tijy02OlwKBgQDO41RxCorBWrbdk4HOAOLBIKMrHjhemjq3\nQQvb241GkAYd5RO2wv4rmt12g/RVpvh6Qyv50NtiSrHZOHK0uCecBZQvhcGjF7tz\nnPbVpkwuTYN/QJ184hATeAqMO85p/PH1ttaloZ9SkeFbLNErPl6VgvZD29ncQkaa\nbtQ8eBSv2QKBgGhK+NMNbNBTSNHsBrZvWvgvR0NZntutr2sUSu4uw3nTK21NkUzm\nDnqhbLvI7N0rdhf1lR8q2yKGWU+1GFS6/wgcWPnOLZ/ENN0iGYVMPnn9YN0XmfQH\n66iYF3EV0iPpA+pFKGaXfDIvO811iyDmFKCiNtWw/czHV7OGYXnE/+ixAoGBAMs/\nijWDpc1O0VfdEijPtfUFm0dA6SAHZKejv4K+rowj8d5srnFeH1W3Ttqfx+pdnr5+\nPzWtedmWiCJe0lG4mTEuSeZmAVW4eu+ZxOUf+reCby0UzaNic2itBa+/EYoOdaZv\neXA+18bGih6IaPWS0FkRz93anq1EbxhIyTiev7QBAoGBAJW0Rzngr5sXMvyXvrOo\n/wXH95JAp80ri2GUdCIK/9rxTbhUf+d3KLwtyP1YtO15DAVSwbTu2FIWNXoLbQCT\nO5QzmOgsXBk506+xTKQ7w6FIbfJb8VOaohfKaNl6YUNXJanl8ELP169B0uHyjR2T\nVah9N1AbmX72VoYNYznLXviI\n-----END PRIVATE KEY-----\n",
+  "client_email": "ghostwriter@crested-acumen-385615.iam.gserviceaccount.com",
+  "client_id": "107815173863781773666",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/ghostwriter%40crested-acumen-385615.iam.gserviceaccount.com"
+}

server/package.json

@@ -13,6 +13,7 @@
     "@google-cloud/speech": "^5.1.0",
     "body-parser": "^1.20.1",
     "cors": "^2.8.5",
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "nodemon": "^2.0.20",
     "sequelize-cockroachdb": "^6.0.5",