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