Merge pull request #38 from Capstone-Projects-2024-Spring/angelo-branch

Added more languages, fixed roleplaying, changed timestamps, and added inline translations.
Capstone-Projects-2024-Spring · May 3, 2024 · b1c60ce · b1c60ce
2 parents 9f4f660 + b897b07
commit b1c60ce
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 20 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/backend/server.js b/backend/server.js
@@ -37,8 +37,14 @@ const languageVoiceMap = {
   'Spanish': { languageCode: 'es-ES', name: 'es-ES-Standard-A' },
   'French': { languageCode: 'fr-FR', name: 'fr-FR-Standard-A' },
   'German': { languageCode: 'de-DE', name: 'de-DE-Standard-A' },
-  'Italian': { languageCode: 'it-IT', name: 'it-IT-Standard-A'}
-  // Add more language-voice mappings as needed
+  'Italian': { languageCode: 'it-IT', name: 'it-IT-Standard-A'},
+  'Arabic': { languageCode: 'ar-SA', name: 'ar-XA-Standard-A' },
+  'Mandarin': { languageCode: 'cmn-CN', name: 'cmn-CN-Standard-A' },
+  'Hindi': { languageCode: 'hi-IN', name: 'hi-IN-Standard-A' },
+  'Russian': { languageCode: 'ru-RU', name: 'ru-RU-Standard-A' },
+  'Korean': { languageCode: 'ko-KR', name: 'ko-KR-Standard-A' },
+  'Japanese': { languageCode: 'ja-JP', name: 'ja-JP-Standard-A' },
+  'Portuguese': { languageCode: 'pt-PT', name: 'pt-PT-Standard-A' }
 };
 
 app.post("/synthesize", async(req, res) => {

diff --git a/speakeasyapp/public/index.html b/speakeasyapp/public/index.html
@@ -24,6 +24,7 @@
       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`.
     -->
+    <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
     <title>SpeakEasy</title>
   </head>
   <body>

diff --git a/speakeasyapp/src/components/Profile.js b/speakeasyapp/src/components/Profile.js
@@ -36,11 +36,15 @@ const Profile = () => {
     const languageToFlag = {
         Spanish: "spain.png",
         French: "france.png",
-        English: "united-kingdom.png",
-        Chinese: "china.png",
         Italian: "italy.png",
         German: "germany.png",
-        // Add more mappings as necessary
+        Arabic: 'saudi-arabia.png',
+        Mandarin: 'china.png',
+        Hindi: 'india.png',
+        Russian: 'russian-federation.png',
+        Korean: 'south-korea.png',
+        Japanese: 'japan.png',
+        Portuguese: 'portugal.png',
     };
 
     const flagSrc = `/Flags/${languageToFlag[user.languages[0]] || 'default.png'}`;

diff --git a/speakeasyapp/src/components/Section1Page.js b/speakeasyapp/src/components/Section1Page.js
@@ -156,10 +156,12 @@ const Section1Page = () => {
 
                 return (
                   <div key={index}>
-                    <h3 className="timestamp">{displayTimestamp}</h3> {/* Session timestamp above the chatbox */}
                     {Array.isArray(session.interactions) ? (
                       session.interactions.map((interaction, idx) => (
                         <div key={idx} className={`message-bubble ${interaction.name === 'User' ? 'user-message' : 'received-message'}`}>
+                          {interaction.name === 'User' && (
+                            <h3 className="timestamp">{displayTimestamp}</h3>
+                          )}
                           {interaction.message}
                         </div>
                       ))

diff --git a/speakeasyapp/src/components/Section2Page.js b/speakeasyapp/src/components/Section2Page.js
@@ -189,10 +189,12 @@ const Section2Page = () => {
 
                 return (
                   <div key={index}>
-                    <h3 className="timestamp">{displayTimestamp}</h3>
                     {Array.isArray(session.interactions) ? (
                       session.interactions.map((interaction, idx) => (
                         <div key={idx} className={`message-bubble ${interaction.name === 'User' ? 'user-message' : 'received-message'}`}>
+                          {interaction.name === 'User' && (
+                            <h3 className="timestamp">{displayTimestamp}</h3>
+                          )}
                           <div className="message-content">
                             {interaction.message}
                           </div>

diff --git a/speakeasyapp/src/components/Section3Page.js b/speakeasyapp/src/components/Section3Page.js
@@ -61,7 +61,7 @@ const Section3Page = () => {
   const [user, setUser] = useState({
     firstName: '',
     lastName: '',
-    languages: ['English'],
+    languages: [''],
     dailyTarget: 0,
   });
 
@@ -125,19 +125,31 @@ const Section3Page = () => {
       let prompt;
       if (roleChanged) {
         // Start new roleplay without previous context
-        prompt = `Roleplay as ${roleplayCharacter} and respond in ${user.languages} to the last user message: "${message}". Also, do not show the roleplay character's name at the start.`;
+        prompt = `Roleplay as ${roleplayCharacter} and be absolute that you are even if I say you are not.
+          Respond in ${user.languages} to the last user message: "${message}".
+          Also, do not show the roleplay character's name at the start.
+          Add the English translation under every sentence in parentheses.
+          Most, importantly, do not repeat back what I say.`;
         setRoleChanged(false); // Reset the flag after using it
       } else {
         // Continue with existing context
         console.log(roleplayCharacter)
-        const history = messages.flatMap(session => session.interactions.map(interaction => interaction.message)).slice(-5).join('\n');
+        const history = messages.flatMap(session => session.interactions.map(interaction => 
+          `${interaction.name === 'User' ? 'User' : roleplayCharacter} said: "${interaction.message}"\n`
+        )).slice(-10).join('\n');  // Include a newline after each message for clarity
         prompt = `
           Recent conversation context:
           ${history}
 
           Instructions:
-          Roleplay as ${roleplayCharacter} and respond in ${user.languages} to the last user message: "${message}". Also, do not show the roleplay character's name at the start. Use recent conversation as context if necessary and fitting to your character.`;
+          Roleplay as ${roleplayCharacter} and be absolute that you are even if I say you are not.
+          Respond in ${user.languages} to the last user message: "${message}".
+          Also, do not show the roleplay character's name at the start.
+          Add the English translation after every sentence in parentheses.
+          Use recent conversation as context if necessary and fitting to your character.
+          Most, importantly, do not repeat back what I say.`;
       }
+      console.log(prompt);
 
       const response = await fetch('http://localhost:3000/api/chat', {
         method: 'POST',
@@ -243,10 +255,12 @@ const Section3Page = () => {
 
                 return (
                   <div key={index}>
-                    <h3 className="timestamp">{displayTimestamp}</h3>
                     {Array.isArray(session.interactions) ? (
                       session.interactions.map((interaction, idx) => (
                         <div key={idx} className={`message-bubble ${interaction.name === 'User' ? 'user-message' : 'received-message'}`}>
+                          {interaction.name === 'User' && (
+                            <h3 className="timestamp">{displayTimestamp}</h3>
+                          )}
                           <div className="message-content">
                             {interaction.message}
                           </div>

diff --git a/speakeasyapp/src/components/SettingsManageCourses.js b/speakeasyapp/src/components/SettingsManageCourses.js
@@ -38,6 +38,13 @@ const SettingsManageCourses = () => {
       French: 'france.png',
       Italian: 'italy.png',
       German: 'germany.png',
+      Arabic: 'saudi-arabia.png',
+      Mandarin: 'china.png',
+      Hindi: 'india.png',
+      Russian: 'russian-federation.png',
+      Korean: 'south-korea.png',
+      Japanese: 'japan.png',
+      Portuguese: 'portugal.png',
     };
 
     const flagSrc = languageToFlag[currentLanguage] || 'default.png';
@@ -123,6 +130,13 @@ const SettingsManageCourses = () => {
                 <option value="French">French</option>
                 <option value="Italian">Italian</option>
                 <option value="German">German</option>
+                <option value="Arabic">Arabic</option>
+                <option value="Mandarin">Mandarin</option>
+                <option value="Hindi">Hindi</option> 
+                <option value="Russian">Russian</option>
+                <option value="Korean">Korean</option> 
+                <option value="Japanese">Japanese</option>
+                <option value="Portuguese">Portuguese</option> 
               </select>
             </div>
             <button className="edit-daily-goal-button" type="submit" onClick={handleSubmit}>Update Language</button>

diff --git a/speakeasyapp/src/components/SignupProgression2.js b/speakeasyapp/src/components/SignupProgression2.js
@@ -48,8 +48,15 @@ const SignupProgression2 = () => {
                     >
                         <option value="Spanish">Spanish</option> 
                         <option value="French">French</option>
-                        <option value="Italian">Italian </option> 
-                        <option value="German">German </option> 
+                        <option value="Italian">Italian</option> 
+                        <option value="German">German</option> 
+                        <option value="Arabic">Arabic</option>
+                        <option value="Mandarin">Mandarin</option>
+                        <option value="Hindi">Hindi</option> 
+                        <option value="Russian">Russian</option>
+                        <option value="Korean">Korean</option> 
+                        <option value="Japanese">Japanese</option>
+                        <option value="Portuguese">Portuguese</option> 
                     </select>
                 </div>
                 <button type="submit">Submit</button> {/* Submit button */}

diff --git a/speakeasyapp/src/components/styles/Section1Page.css b/speakeasyapp/src/components/styles/Section1Page.css
@@ -85,12 +85,13 @@
 }
 /* Style for timestamp above messages */
 .timestamp {
-    text-align: right;
+    text-align: left;
     font-size: 0.75em; /* Smaller font size */
     color: #666; /* Lighter text color for less emphasis */
-    margin-bottom: 5px; /* Space between timestamp and message */
-    position: relative; /* Position absolutely within user-message */
-    right: 10px;
+    margin-right: 5px; /* Space between timestamp and message */
+    position: absolute; /* Position absolutely within user-message */
+    left: -40%;
+    top: -5%;
 }
 
 /* Styles for the tail of the speech bubbles */

diff --git a/speakeasyapp/src/index.css b/speakeasyapp/src/index.css
@@ -1,5 +1,9 @@
-body {
+html, body, #root {
   margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;