Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
carro-summary-fe
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Jira
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Vinod Bangera
carro-summary-fe
Commits
805a7108
Commit
805a7108
authored
Mar 5, 2024
by
Vinod Bangera
Browse files
Options
Downloads
Patches
Plain Diff
initial commit for carro
parent
efc05efb
No related branches found
No related tags found
1 merge request
!1
Vinod dev
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
.gitignore
+2
-0
2 additions, 0 deletions
.gitignore
src/News.js
+49
-8
49 additions, 8 deletions
src/News.js
src/Styles.css
+70
-1
70 additions, 1 deletion
src/Styles.css
src/Summary.js
+82
-14
82 additions, 14 deletions
src/Summary.js
with
203 additions
and
23 deletions
.gitignore
+
2
−
0
View file @
805a7108
...
@@ -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
This diff is collapsed.
Click to expand it.
src/News.js
+
49
−
8
View file @
805a7108
...
@@ -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
=
9
0000
;
const
timeout
=
15
0000
;
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
>
);
);
}
}
...
...
This diff is collapsed.
Click to expand it.
src/Styles.css
+
70
−
1
View file @
805a7108
...
@@ -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
;
...
...
This diff is collapsed.
Click to expand it.
src/Summary.js
+
82
−
14
View file @
805a7108
...
@@ -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
>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment