Skip to content
Snippets Groups Projects
Commit 805a7108 authored by Vinod Bangera's avatar Vinod Bangera
Browse files

initial commit for carro

parent efc05efb
No related branches found
No related tags found
1 merge request!1Vinod dev
...@@ -21,3 +21,5 @@ ...@@ -21,3 +21,5 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.history
\ No newline at end of file
...@@ -4,8 +4,10 @@ import Summary from "./Summary"; ...@@ -4,8 +4,10 @@ import Summary from "./Summary";
function News() { function News() {
const [text, setText] = useState(""); const [text, setText] = useState("");
const [summary, setSummary] = useState(""); const [summary, setSummary] = useState("");
const [translatedSummary, setTranslatedSummary] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [request_id, setRequestId] = useState(null); const [request_id, setRequestId] = useState(null);
const [selectedOption, setSelectedOption] = useState("");
// let random_num = Math.floor(Math.random() * 1000); // let random_num = Math.floor(Math.random() * 1000);
// let request_id = random_num; // let request_id = random_num;
...@@ -44,11 +46,14 @@ function News() { ...@@ -44,11 +46,14 @@ function News() {
} }
const handleGetSummary = async () => { const handleGetSummary = async () => {
if (text) { if (text && selectedOption) {
setLoading(true); setLoading(true);
// let request_id = 123; // let request_id = 123;
let request_id = Math.floor(Math.random() * 1000); let request_id = Math.floor(Math.random() * 1000);
setRequestId(request_id); setRequestId(request_id);
let from_language = "en_XX";
let to_language = selectedOption;
// console.log("Text>>>> ", text); // console.log("Text>>>> ", text);
processNewsText = await processNewsText(text); processNewsText = await processNewsText(text);
// console.log(processNewsText); // console.log(processNewsText);
...@@ -58,7 +63,7 @@ function News() { ...@@ -58,7 +63,7 @@ function News() {
let responseReceived = false; let responseReceived = false;
// Set a timeout of 40 seconds (40,000 milliseconds) // Set a timeout of 40 seconds (40,000 milliseconds)
const timeout = 90000; const timeout = 150000;
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
if (!responseReceived) { if (!responseReceived) {
...@@ -78,14 +83,20 @@ function News() { ...@@ -78,14 +83,20 @@ function News() {
headers: { headers: {
"Content-Type": "application/json", "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) { if (response.ok) {
clearTimeout(timeoutId); // Clear the timeout if response is received clearTimeout(timeoutId); // Clear the timeout if response is received
const data = await response.json(); const data = await response.json();
// console.log(data); console.log(data);
setSummary(data.summary); setSummary(data.summary);
setTranslatedSummary(data.translated_summary[0]);
responseReceived = true; responseReceived = true;
} else { } else {
console.error("Failed to fetch summary"); console.error("Failed to fetch summary");
...@@ -96,7 +107,7 @@ function News() { ...@@ -96,7 +107,7 @@ function News() {
setLoading(false); setLoading(false);
} }
} else { } else {
alert("Please enter news!!"); alert("Please enter news and select a language for translation!!");
} }
}; };
...@@ -121,12 +132,19 @@ function News() { ...@@ -121,12 +132,19 @@ function News() {
setText(sampleText); setText(sampleText);
}; };
const handleDropdownChange = (e) => {
setSelectedOption(e.target.value);
};
// let request_id = request_id; // let request_id = request_id;
return ( return (
<div className="container"> <div className="container">
<div className="news-container"> <div className="news-container">
<h2 className="sub-heading">News</h2> <h2 className="sub-heading">News</h2>
<p className="description">
**Enter the news article and select a language for translation**
</p>
<div className="sample-container"> <div className="sample-container">
<label className="sample"> <label className="sample">
<input <input
...@@ -146,20 +164,43 @@ function News() { ...@@ -146,20 +164,43 @@ function News() {
placeholder="Enter news text here..." placeholder="Enter news text here..."
/> />
</div> </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 ? ( {loading ? (
<div> <div>
<button className="generating-button">Generating...</button> <button className="generating-button btn-margin">
Generating...
</button>
</div> </div>
) : ( ) : (
<div> <div>
<button className="button" onClick={handleGetSummary}> <button className="button btn-margin" onClick={handleGetSummary}>
Get Summary Get Summary
</button> </button>
</div> </div>
)} )}
</div> </div>
<Summary summary={summary} requestId={request_id} /> <Summary
summary={summary}
translatedSummary={translatedSummary}
translatedSummaryLang={selectedOption}
requestId={request_id}
/>
</div> </div>
); );
} }
......
...@@ -22,6 +22,62 @@ ...@@ -22,6 +22,62 @@
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 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 { .audio-container {
margin: 2rem 8rem; margin: 2rem 8rem;
background-color: #eceef5; background-color: #eceef5;
...@@ -62,10 +118,11 @@ textarea::-webkit-scrollbar { ...@@ -62,10 +118,11 @@ textarea::-webkit-scrollbar {
} }
.summary-texarea { .summary-texarea {
min-height: 7.5rem; min-height: 9.5rem;
} }
.button { .button {
min-width: 9.7rem;
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
margin: 2rem; margin: 2rem;
border: none; border: none;
...@@ -82,6 +139,7 @@ textarea::-webkit-scrollbar { ...@@ -82,6 +139,7 @@ textarea::-webkit-scrollbar {
} }
.generating-button { .generating-button {
min-width: 9.7rem;
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
margin: 2rem; margin: 2rem;
border: none; border: none;
...@@ -93,6 +151,10 @@ textarea::-webkit-scrollbar { ...@@ -93,6 +151,10 @@ textarea::-webkit-scrollbar {
font-size: 0.98; font-size: 0.98;
} }
.btn-margin {
margin-top: 1rem;
}
/* /*
h2 { h2 {
margin: 2rem; margin: 2rem;
...@@ -104,6 +166,13 @@ h2 { ...@@ -104,6 +166,13 @@ h2 {
/* color: #412603; */ /* color: #412603; */
} }
.description {
margin-top: 0;
margin-bottom: 2rem;
color: #999;
font-size: 14px;
}
.video-load-btn { .video-load-btn {
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
margin: 2rem 2rem 0; margin: 2rem 2rem 0;
......
...@@ -3,19 +3,51 @@ import React, { useEffect, useState } from "react"; ...@@ -3,19 +3,51 @@ import React, { useEffect, useState } from "react";
import Video from "./Video"; import Video from "./Video";
import Audio from "./Audio"; import Audio from "./Audio";
function Summary({ summary, requestId }) { function Summary({
const [audioResponse, setAudioResponse] = useState(""); // State to store video response summary,
translatedSummary,
translatedSummaryLang,
requestId,
}) {
const [audioResponse, setAudioResponse] = useState("");
// const [audioDisplay, setAudioDisplay] = useState(""); // const [audioDisplay, setAudioDisplay] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [selectedSummary, setSelectedSummary] = useState(null);
// console.log(requestId); // console.log(requestId);
console.log(summary);
console.log(translatedSummary);
// summary = "hello summary";
// translatedSummary = "hello transalted summary";
const handleGetAudio = async () => { 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); setLoading(true);
let request_id = requestId; let request_id = requestId;
// console.log(summary); // console.log(summary);
// console.log(request_id); // 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 { try {
// 34.41.231.47:8000 // 34.41.231.47:8000
...@@ -26,7 +58,12 @@ function Summary({ summary, requestId }) { ...@@ -26,7 +58,12 @@ function Summary({ summary, requestId }) {
headers: { headers: {
"Content-Type": "application/json", "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) { if (response.ok) {
...@@ -53,11 +90,25 @@ function Summary({ summary, requestId }) { ...@@ -53,11 +90,25 @@ function Summary({ summary, requestId }) {
// console.log("Updated audioResponse:", audioResponse); // console.log("Updated audioResponse:", audioResponse);
}, [audioResponse]); }, [audioResponse]);
const handleCheckboxChange = (event) => {
setSelectedSummary(event.target.value);
};
return ( return (
<div className="container"> <div className="container">
<div className="summary-container"> <div className="summary-container">
<h2 className="sub-heading">Summary</h2> <h2 className="sub-heading">Summary</h2>
<div> <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 <textarea
className="summary-texarea" className="summary-texarea"
// rows="6" // rows="6"
...@@ -67,6 +118,23 @@ function Summary({ summary, requestId }) { ...@@ -67,6 +118,23 @@ function Summary({ summary, requestId }) {
placeholder="Summary will display here..." placeholder="Summary will display here..."
/> />
</div> </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 ? ( {loading ? (
<div> <div>
<button className="generating-button">Generating...</button> <button className="generating-button">Generating...</button>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment