Vinod dev

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>
   );
 }