-
+ const features = [
+ {
+ title: 'Instant Cloning',
+ titleAr: 'استنساخ فوري',
+ description: 'Clone any voice with just 30 seconds of audio sample.',
+ descriptionAr: 'استنسخ أي صوت بعينة صوتية مدتها 30 ثانية فقط.',
+ icon: mdiLightningBolt,
+ color: 'text-yellow-500'
+ },
+ {
+ title: 'Crystal Clear',
+ titleAr: 'وضوح فائق',
+ description: 'High-fidelity audio generation that sounds indistinguishable from the original.',
+ descriptionAr: 'توليد صوت عالي الدقة لا يمكن تمييزه عن الأصلي.',
+ icon: mdiMicrophone,
+ color: 'text-purple-500'
+ },
+ {
+ title: 'Global Languages',
+ titleAr: 'لغات عالمية',
+ description: 'Support for English, Arabic, and over 50 other languages.',
+ descriptionAr: 'دعم للغات الإنجليزية والعربية وأكثر من 50 لغة أخرى.',
+ icon: mdiEarth,
+ color: 'text-blue-500'
+ }
+ ];
+
+ return (
+
+
+
{getPageTitle('VocalClone AI - Instant Voice Cloning')}
+
+
+ {/* Navigation */}
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+ New: Instant Arabic Cloning Available
+
+
+
+ Clone any voice Instantly.
+
+
+
+ استنسخ أي صوت في ثوانٍ. فوراً.
+
+
+
+ The world's most advanced instant voice cloning platform. Create perfect digital replicas of any voice for content creation, localization, and accessibility.
+
+
+
+
+ Start Cloning Free
+
+
+
+
+
+ {/* Features Section */}
+
+
+
+
Powerful Features
+
Everything you need to create realistic voice clones
+
+
+
+ {features.map((feature, idx) => (
+
+
+
+
{feature.title}
+
{feature.titleAr}
+
{feature.description}
+
{feature.descriptionAr}
+
+ ))}
+
+
+
+ {/* Simple CTA */}
+
+
+
+
+
+
+
Ready to give it a try?
+
+ Join thousands of creators using VocalClone AI to power their stories.
+
+
+
+
+
+ {/* Footer */}
+
);
-
- const videoBlock = (video) => {
- if (video?.video_files?.length > 0) {
- return (
-
-
-
-
-
)
- }
- };
-
- return (
-
-
-
{getPageTitle('Starter Page')}
-
-
-
-
- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
© 2026 {title} . All rights reserved
-
- Privacy Policy
-
-
-
-
- );
}
-Starter.getLayout = function getLayout(page: ReactElement) {
- return
{page} ;
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+ return
{page} ;
};
-
diff --git a/frontend/src/pages/instant-cloning.tsx b/frontend/src/pages/instant-cloning.tsx
new file mode 100644
index 0000000..0e9f210
--- /dev/null
+++ b/frontend/src/pages/instant-cloning.tsx
@@ -0,0 +1,295 @@
+import {
+ mdiMicrophone,
+ mdiPlay,
+ mdiStop,
+ mdiCheckCircle,
+ mdiLightningBolt,
+ mdiRefresh,
+} from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useState, useRef, useEffect } from 'react'
+import CardBox from '../components/CardBox'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../config'
+import BaseButton from '../components/BaseButton'
+import BaseButtons from '../components/BaseButtons'
+import BaseIcon from '../components/BaseIcon'
+import FormField from '../components/FormField'
+import axios from 'axios'
+import NotificationBar from '../components/NotificationBar'
+
+const InstantCloningPage = () => {
+ const [isRecording, setIsRecording] = useState(false)
+ const [audioUrl, setAudioUrl] = useState
(null)
+ const [audioBlob, setAudioBlob] = useState(null)
+ const [recordingTime, setRecordingTime] = useState(0)
+ const [isCloning, setIsCloning] = useState(false)
+ const [clonedModel, setClonedModel] = useState(null)
+ const [error, setError] = useState(null)
+ const [voiceTitle, setVoiceTitle] = useState('')
+
+ const mediaRecorderRef = useRef(null)
+ const timerRef = useRef(null)
+ const chunksRef = useRef([])
+
+ useEffect(() => {
+ return () => {
+ if (timerRef.current) clearInterval(timerRef.current)
+ }
+ }, [])
+
+ const startRecording = async () => {
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+ const mediaRecorder = new MediaRecorder(stream)
+ mediaRecorderRef.current = mediaRecorder
+ chunksRef.current = []
+
+ mediaRecorder.ondataavailable = (e) => {
+ if (e.data.size > 0) {
+ chunksRef.current.push(e.data)
+ }
+ }
+
+ mediaRecorder.onstop = () => {
+ const blob = new Blob(chunksRef.current, { type: 'audio/wav' })
+ const url = URL.createObjectURL(blob)
+ setAudioUrl(url)
+ setAudioBlob(blob)
+ stream.getTracks().forEach((track) => track.stop())
+ }
+
+ mediaRecorder.start()
+ setIsRecording(true)
+ setRecordingTime(0)
+ timerRef.current = setInterval(() => {
+ setRecordingTime((prev) => prev + 1)
+ }, 1000)
+ } catch (err) {
+ console.error('Error accessing microphone:', err)
+ setError('Could not access microphone. Please check permissions.')
+ }
+ }
+
+ const stopRecording = () => {
+ if (mediaRecorderRef.current && isRecording) {
+ mediaRecorderRef.current.stop()
+ setIsRecording(false)
+ if (timerRef.current) clearInterval(timerRef.current)
+ }
+ }
+
+ const resetRecording = () => {
+ setAudioUrl(null)
+ setAudioBlob(null)
+ setRecordingTime(0)
+ setClonedModel(null)
+ setError(null)
+ }
+
+ const handleClone = async () => {
+ if (!audioBlob || !voiceTitle) {
+ setError('Please provide a title and record your voice first.')
+ return
+ }
+
+ setIsCloning(true)
+ setError(null)
+
+ try {
+ // 1. Upload the recording
+ const formData = new FormData()
+ formData.append('file', audioBlob, 'recording.wav')
+
+ const uploadRes = await axios.post('/file/upload/recordings/file', formData, {
+ headers: { 'Content-Type': 'multipart/form-data' }
+ })
+
+ const fileId = uploadRes.data[0].id
+
+ // 2. Create recording entry
+ const recordingRes = await axios.post('/recordings', {
+ data: {
+ filename: `Instant Record ${new Date().toLocaleString()}`,
+ duration_seconds: recordingTime,
+ format: 'wav',
+ file: [uploadRes.data[0]]
+ }
+ })
+
+ // 3. Trigger Instant Clone (backend logic)
+ // We'll call a new endpoint we're about to create
+ const cloneRes = await axios.post('/voice_models/instant-clone', {
+ title: voiceTitle,
+ recordingId: recordingRes.data.id, // This depends on how the backend returns data
+ fileId: fileId
+ })
+
+ setClonedModel(cloneRes.data)
+ setIsCloning(false)
+ } catch (err: any) {
+ console.error('Cloning failed:', err)
+ setError(err.response?.data?.message || 'Failed to clone voice. Please try again.')
+ setIsCloning(false)
+ }
+ }
+
+ const formatTime = (seconds: number) => {
+ const mins = Math.floor(seconds / 60)
+ const secs = seconds % 60
+ return `${mins}:${secs.toString().padStart(2, '0')}`
+ }
+
+ return (
+ <>
+
+ {getPageTitle('Instant Voice Cloning')}
+
+
+
+
+ {''}
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
Step 1: Record Your Voice
+
+ Speak clearly for at least 10 seconds to get the best results.
+
+
+ {isRecording ? (
+
+
+
+
{formatTime(recordingTime)}
+
+
+ ) : audioUrl ? (
+
+
+
+
Recording Captured!
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
Step 2: Generate Clone
+
+ Give your voice a name and start the AI cloning process.
+
+
+
+
+
+ {!clonedModel ? (
+
+ ) : (
+
+
+
Success! Voice Cloned
+
+
+ Your voice model {clonedModel.title} is ready to use.
+
+
+
+
+ )}
+
+
+ Processing Audio...
+ 65%
+
+
+
+
+
+ )
+}
+
+InstantCloningPage.getLayout = function getLayout(page: ReactElement) {
+ return {page}
+}
+
+export default InstantCloningPage