From 805a7108117b200cfc187a164fb607e193635149 Mon Sep 17 00:00:00 2001
From: Vinod Bangera <vinodbangera@niveussolutions.com>
Date: Tue, 5 Mar 2024 10:16:09 +0530
Subject: [PATCH] initial commit for carro

---
 .gitignore     |  2 ++
 src/News.js    | 57 +++++++++++++++++++++++++-----
 src/Styles.css | 71 ++++++++++++++++++++++++++++++++++++-
 src/Summary.js | 96 ++++++++++++++++++++++++++++++++++++++++++--------
 4 files changed, 203 insertions(+), 23 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4d29575..44e490e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.history
\ No newline at end of file
diff --git a/src/News.js b/src/News.js
index 102b542..bcd280a 100644
--- a/src/News.js
+++ b/src/News.js
@@ -4,8 +4,10 @@ import Summary from "./Summary";
 function News() {
   const [text, setText] = useState("");
   const [summary, setSummary] = useState("");
+  const [translatedSummary, setTranslatedSummary] = useState("");
   const [loading, setLoading] = useState(false);
   const [request_id, setRequestId] = useState(null);
+  const [selectedOption, setSelectedOption] = useState("");
 
   // let random_num = Math.floor(Math.random() * 1000);
   // let request_id = random_num;
@@ -44,11 +46,14 @@ function News() {
   }
 
   const handleGetSummary = async () => {
-    if (text) {
+    if (text && selectedOption) {
       setLoading(true);
       // let request_id = 123;
       let request_id = Math.floor(Math.random() * 1000);
       setRequestId(request_id);
+
+      let from_language = "en_XX";
+      let to_language = selectedOption;
       // console.log("Text>>>> ", text);
       processNewsText = await processNewsText(text);
       // console.log(processNewsText);
@@ -58,7 +63,7 @@ function News() {
       let responseReceived = false;
 
       // Set a timeout of 40 seconds (40,000 milliseconds)
-      const timeout = 90000;
+      const timeout = 150000;
 
       const timeoutId = setTimeout(() => {
         if (!responseReceived) {
@@ -78,14 +83,20 @@ function News() {
             headers: {
               "Content-Type": "application/json",
             },
-            body: JSON.stringify({ text: processNewsText, request_id }),
+            body: JSON.stringify({
+              text: processNewsText,
+              request_id,
+              from_language,
+              to_language,
+            }),
           }
         );
         if (response.ok) {
           clearTimeout(timeoutId); // Clear the timeout if response is received
           const data = await response.json();
-          // console.log(data);
+          console.log(data);
           setSummary(data.summary);
+          setTranslatedSummary(data.translated_summary[0]);
           responseReceived = true;
         } else {
           console.error("Failed to fetch summary");
@@ -96,7 +107,7 @@ function News() {
         setLoading(false);
       }
     } else {
-      alert("Please enter news!!");
+      alert("Please enter news and select a language for translation!!");
     }
   };
 
@@ -121,12 +132,19 @@ function News() {
     setText(sampleText);
   };
 
+  const handleDropdownChange = (e) => {
+    setSelectedOption(e.target.value);
+  };
+
   //   let request_id = request_id;
 
   return (
     <div className="container">
       <div className="news-container">
         <h2 className="sub-heading">News</h2>
+        <p className="description">
+          **Enter the news article and select a language for translation**
+        </p>
         <div className="sample-container">
           <label className="sample">
             <input
@@ -146,20 +164,43 @@ function News() {
             placeholder="Enter news text here..."
           />
         </div>
+        <div className="dropdown-container">
+          <select
+            className="custom-dropdown"
+            value={selectedOption}
+            onChange={handleDropdownChange}
+          >
+            <option value="">Select a language</option>
+            <option value="en_XX">English</option>
+            <option value="hi_IN">Hindi</option>
+            <option value="gu_IN">Gujarati</option>
+            <option value="ml_IN">Malayalam</option>
+            <option value="mr_IN">Marathi</option>
+            <option value="ta_IN">Tamil</option>
+            <option value="te_IN">Telugu</option>
+          </select>
+        </div>
         {loading ? (
           <div>
-            <button className="generating-button">Generating...</button>
+            <button className="generating-button btn-margin">
+              Generating...
+            </button>
           </div>
         ) : (
           <div>
-            <button className="button" onClick={handleGetSummary}>
+            <button className="button btn-margin" onClick={handleGetSummary}>
               Get Summary
             </button>
           </div>
         )}
       </div>
 
-      <Summary summary={summary} requestId={request_id} />
+      <Summary
+        summary={summary}
+        translatedSummary={translatedSummary}
+        translatedSummaryLang={selectedOption}
+        requestId={request_id}
+      />
     </div>
   );
 }
diff --git a/src/Styles.css b/src/Styles.css
index 45dcb9b..bced401 100644
--- a/src/Styles.css
+++ b/src/Styles.css
@@ -22,6 +22,62 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.summary-content-container {
+  display: flex;
+}
+
+.summary-content-container > div {
+  flex: 1;
+  margin-right: 10px; /* Adjust spacing between the divs */
+}
+
+.summary-sub-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* DROPDOWN */
+.dropdown-container select {
+  margin-top: 1rem;
+  /* max-width: 9.7rem; */
+  /* text-align: center; */
+  width: 92%;
+  padding: 0.8rem 10px;
+  /* border: 1px solid #ccc; */
+  border: 1px solid #7d9dc5;
+  border-radius: 5px;
+  background-color: #fff;
+  /* background-color: #08325f; */
+  /* color: white; */
+  font-size: 14px;
+  outline: none;
+  /* appearance: none; */
+}
+
+.dropdown-container select:hover {
+  border-color: #20508a;
+}
+
+.dropdown-container select:focus {
+  /* border-color: #007bff;  */
+  /* Change border color on focus */
+  /* box-shadow: 0 0 0 3px #007bff40; */
+  /* Add a focus indicator */
+}
+
+.dropdown-container option {
+  padding: 10px;
+  background-color: #fff;
+  color: black;
+  /* text-align: left; */
+  font-size: 16px;
+}
+
+.dropdown-container option:hover {
+  background-color: #f0f0f0; /* Change background color on hover */
+}
+
 .audio-container {
   margin: 2rem 8rem;
   background-color: #eceef5;
@@ -62,10 +118,11 @@ textarea::-webkit-scrollbar {
 }
 
 .summary-texarea {
-  min-height: 7.5rem;
+  min-height: 9.5rem;
 }
 
 .button {
+  min-width: 9.7rem;
   padding: 0.8rem 2rem;
   margin: 2rem;
   border: none;
@@ -82,6 +139,7 @@ textarea::-webkit-scrollbar {
 }
 
 .generating-button {
+  min-width: 9.7rem;
   padding: 0.8rem 2rem;
   margin: 2rem;
   border: none;
@@ -93,6 +151,10 @@ textarea::-webkit-scrollbar {
   font-size: 0.98;
 }
 
+.btn-margin {
+  margin-top: 1rem;
+}
+
 /* 
 h2 {
   margin: 2rem;
@@ -104,6 +166,13 @@ h2 {
   /* color: #412603; */
 }
 
+.description {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  color: #999;
+  font-size: 14px;
+}
+
 .video-load-btn {
   padding: 0.8rem 2rem;
   margin: 2rem 2rem 0;
diff --git a/src/Summary.js b/src/Summary.js
index 59f5438..72b094e 100644
--- a/src/Summary.js
+++ b/src/Summary.js
@@ -3,19 +3,51 @@ import React, { useEffect, useState } from "react";
 import Video from "./Video";
 import Audio from "./Audio";
 
-function Summary({ summary, requestId }) {
-  const [audioResponse, setAudioResponse] = useState(""); // State to store video response
+function Summary({
+  summary,
+  translatedSummary,
+  translatedSummaryLang,
+  requestId,
+}) {
+  const [audioResponse, setAudioResponse] = useState("");
   // const [audioDisplay, setAudioDisplay] = useState("");
   const [loading, setLoading] = useState(false);
+  const [selectedSummary, setSelectedSummary] = useState(null);
   // console.log(requestId);
 
+  console.log(summary);
+  console.log(translatedSummary);
+
+  // summary = "hello summary";
+  // translatedSummary = "hello transalted summary";
+
   const handleGetAudio = async () => {
-    if (summary) {
+    // if selected for audio lang = eng or default
+    // summary
+    // else
+    // translatedSummary,
+    //   translatedSummaryLang,
+    // console.log(selectedSummary);
+    if (!selectedSummary) {
+      alert("Please select a checkbox for an audio language");
+      return; // Exit the function if selectedSummary is null
+    }
+    if (selectedSummary) {
       setLoading(true);
       let request_id = requestId;
       // console.log(summary);
       // console.log(request_id);
-      let text = summary;
+      // let text = summary;
+      let text = selectedSummary;
+      // console.log(selectedSummary);
+      let audio_language = "";
+      if (selectedSummary === translatedSummary) {
+        audio_language = translatedSummaryLang;
+      } else {
+        audio_language = "en_XX";
+      }
+      let voice_gender = "M";
+      // console.log(audio_language);
       try {
         // 34.41.231.47:8000
 
@@ -26,7 +58,12 @@ function Summary({ summary, requestId }) {
             headers: {
               "Content-Type": "application/json",
             },
-            body: JSON.stringify({ text, request_id }), // Send the summary as the request
+            body: JSON.stringify({
+              text,
+              request_id,
+              audio_language,
+              voice_gender,
+            }), // Send the summary as the request
           }
         );
         if (response.ok) {
@@ -53,19 +90,50 @@ function Summary({ summary, requestId }) {
     // console.log("Updated audioResponse:", audioResponse);
   }, [audioResponse]);
 
+  const handleCheckboxChange = (event) => {
+    setSelectedSummary(event.target.value);
+  };
+
   return (
     <div className="container">
       <div className="summary-container">
         <h2 className="sub-heading">Summary</h2>
-        <div>
-          <textarea
-            className="summary-texarea"
-            // rows="6"
-            // cols="120"
-            value={summary}
-            readOnly
-            placeholder="Summary will display here..."
-          />
+        <p className="description">
+          **Select a checkbox to get the audio output in particular language**
+        </p>
+        <div className="summary-content-container">
+          <div className="summary-sub-container">
+            <input
+              type="checkbox"
+              value={summary}
+              checked={selectedSummary === summary}
+              onChange={handleCheckboxChange}
+            />
+            <textarea
+              className="summary-texarea"
+              // rows="6"
+              // cols="120"
+              value={summary}
+              readOnly
+              placeholder="Summary will display here..."
+            />
+          </div>
+          <div className="summary-sub-container">
+            <input
+              type="checkbox"
+              value={translatedSummary}
+              checked={selectedSummary === translatedSummary}
+              onChange={handleCheckboxChange}
+            />
+            <textarea
+              className="summary-texarea"
+              // rows="6"
+              // cols="120"
+              value={translatedSummary}
+              readOnly
+              placeholder="Translated Summary will display here..."
+            />
+          </div>
         </div>
         {loading ? (
           <div>
-- 
GitLab