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
Show whitespace changes
Inline Side-by-side
.gitignore
+ 2
− 0
View file @ 805a7108
......@@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.history
\ No newline at end of file
src/News.js
+ 49
− 8
View file @ 805a7108
......@@ -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>
);
}
......
src/Styles.css
+ 70
− 1
View file @ 805a7108
......@@ -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;
......
src/Summary.js
+ 82
− 14
View file @ 805a7108
......@@ -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,11 +90,25 @@ 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>
<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"
......@@ -67,6 +118,23 @@ function Summary({ summary, requestId }) {
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>
<button className="generating-button">Generating...</button>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment