added voiceid and audio url

This commit is contained in:
Pratish Ninawe 2023-10-06 14:36:33 +05:30
parent 354a375722
commit b0e04413bf
4 changed files with 35 additions and 103 deletions

1
.env
View File

@ -1,2 +1,3 @@
PORT = 3000
CHOKIDAR_USEPOLLING = true
XI_API_KEY="e327fdf320043677a512f1b0dade8403"

View File

@ -30,23 +30,37 @@
"coreui_library_short_version": "4.1"
},
"dependencies": {
"@coreui/chartjs": "^3.0.0",
"@coreui/coreui": "^4.1.0",
"@coreui/icons": "^2.1.0",
"@coreui/icons-react": "^2.0.0",
"@coreui/react": "^4.3.0",
"@coreui/react-chartjs": "^2.0.0",
"@coreui/utils": "^1.3.1",
"@material-ui/core": "^4.12.4",
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@mui/material": "^5.11.12",
"@reduxjs/toolkit": "^1.9.2",
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"country-state-city": "^3.1.2",
"prop-types": "^15.7.2",
"react": "18.0.0",
"react-bootstrap": "^2.7.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.0.0",
"react-hot-toast": "^2.4.0",
"react-qr-code": "^2.0.11",
"react-redux": "^7.2.9",
"react-router-dom": "^6.7.0",
"react-spinners": "^0.11.0",
"react-to-print": "^2.14.11",
"redux": "4.1.2",
"serve": "^13.0.2",
"styled-components": "^6.0.8"
"simplebar-react": "^2.3.6",
"styled-components": "^6.0.8",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.4.0"
},
"devDependencies": {
"auto-changelog": "~2.3.0",

View File

@ -2,38 +2,19 @@ import React from "react";
import CIcon from "@coreui/icons-react";
import {
cilAddressBook,
cilAirplaneMode,
cilAppsSettings,
cilBell,
cilBrush,
cilCalculator,
cilCalendar,
cilCart,
cilChartPie,
cilClipboard,
cilCommand,
cilCompress,
cilContact,
cilCursor,
cilDrop,
cilFace,
cilFilterSquare,
cilInfo,
cilLanguage,
cilLoopCircular,
cilMedicalCross,
cilMoney,
cilMugTea,
cilNewspaper,
cilNotes,
cilPencil,
cilPuzzle,
cilSitemap,
cilSpeedometer,
cilStar,
cilSwapHorizontal,
cilTablet,
cilTags,
cilTennisBall,
cilText,
cilUser,
@ -150,37 +131,6 @@ const _nav = [
icon: <CIcon icon={cilBrush} customClassName="nav-icon" />,
to: "/business_type",
},
// {
// component: CNavItem,
// name: 'States',
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: '/states',
// },
// {
// component: CNavItem,
// name: 'Standard Shipping',
// icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
// to: '/shipping',
// },
// {
// component: CNavItem,
// name: 'Custom Shipping',
// icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
// to: '/custom-shipping',
// },
// {
// component: CNavItem,
// name: 'Pincode',
// icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
// to: '/pincode',
// },
// {
// component: CNavItem,
// name: 'Tax Rates',
// icon: <CIcon icon={cilTags} customClassName="nav-icon" />,
// to: '/tax',
// },
{
component: CNavItem,
name: "Languages",
@ -226,40 +176,6 @@ const _nav = [
},
],
},
// {
// component: CNavItem,
// name: 'Departures',
// icon: <CIcon icon={cilAirplaneMode} customClassName="nav-icon" />,
// to: '/departures',
// },
// {
// component: CNavItem,
// name: "Testimonials",
// icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
// to: "/testimonials",
// },
// {
// component: CNavItem,
// name: "Contact Requests",
// icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
// to: "/contact/request",
// },
// {
// component: CNavItem,
// name: 'Information',
// icon: <CIcon icon={cilInfo} customClassName="nav-icon" />,
// to: '/informations',
// },
// {
// component: CNavItem,
// name: "Appointments",
// icon: <CIcon icon={cilCalendar} customClassName="nav-icon" />,
// to: "/appointments",
// },
];
export default _nav;

View File

@ -50,26 +50,27 @@ const DeleteButton = styled.button`
const VideoTemplate = ({ props }) => {
const token = isAutheticated();
const { data, setData, handleView } = props;
const [selectedFile, setSelectedFile] = useState(null);
const [selectedFile, setSelectedFile] = useState();
const [isLoading, setIsLoading] = useState(false);
const [transcribedText, setTranscribedText] = useState("");
const [audioUrl, setAudioUrl] = useState();
const [elevenLabsVoiceId, setElevenLabsVoiceId] = useState("");
const handleVideoUpload = async (e) => {
const file = e.target.files[0];
if (file) {
setData((prev) => ({
...prev,
[e.target.id]: file,
}));
}
if (!file) return;
setData((prev) => ({
...prev,
[e.target.id]: file,
}));
setSelectedFile(URL.createObjectURL(file));
setIsLoading(true);
try {
const formData = new FormData();
// console.log(data.video);
console.log(data.video);
formData.append("videoTemplate", data.video);
// console.log(Object.fromEntries(formData));
const response = await axios.post("/api/campaign/convert", formData, {
@ -80,10 +81,11 @@ const VideoTemplate = ({ props }) => {
},
});
const { success, message, text, audio } = response.data;
const { success, message, text, audio, voiceId } = response.data;
if (success) {
setAudioUrl(audio);
setTranscribedText(text);
setElevenLabsVoiceId(voiceId);
setIsLoading(false);
swal({
title: "Converted",
@ -109,7 +111,7 @@ const VideoTemplate = ({ props }) => {
button: "Close",
});
setIsLoading(false);
console.log("Network Error:", error.message);
console.log("Network Error:", error);
}
};
@ -165,14 +167,13 @@ const VideoTemplate = ({ props }) => {
</div>
<div className="row">
<div className="col-sm-12 col-md-12 col-lg-12">
<div>
<a
style={{ padding: "10px", backgroundColor: "#f5f5f5" }}
href={audioUrl}
target="_blank"
>
{audioUrl ? audioUrl : null}
<div style={{ padding: "10px" }}>
<a href={audioUrl} target="_blank">
Your audioUrl: {audioUrl ? audioUrl : null}
</a>
<p>
{elevenLabsVoiceId ? `Your VoiceId: ${elevenLabsVoiceId}` : null}
</p>
</div>
<GridContainer>
<GridItem