Upload 49 files

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/fonts/Ubuntu-Bold.ttf filter=lfs diff=lfs merge=lfs -text
+static/media/Image_Generators/Prodia/Counterfeit_v30.safetensors[[:space:]]\[9e2a8f19\].jpg filter=lfs diff=lfs merge=lfs -text
+static/media/loading.gif filter=lfs diff=lfs merge=lfs -text
+static/music/output000.mp3 filter=lfs diff=lfs merge=lfs -text
+static/music/output001.mp3 filter=lfs diff=lfs merge=lfs -text
+static/music/Track-1.mp3 filter=lfs diff=lfs merge=lfs -text
+static/music/Track-2.mp3 filter=lfs diff=lfs merge=lfs -text

static/css/home.css

@@ -0,0 +1,1102 @@
+        :root {
+            --primary: #4facfe;
+            --secondary: #00f2fe;
+            --dark: #0a0a0a;
+            --gray-dark: #1a1a1a;
+            --gray: #333;
+            --text-light: #aaa;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background: var(--dark);
+            color: #fff;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        /* Navbar */
+        .navbar {
+            padding: 1rem 0;
+            position: fixed;
+            width: 100%;
+            z-index: 1000;
+            transition: all 0.3s;
+        }
+
+        .navbar.scrolled {
+            background: rgba(10, 10, 10, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 0.5rem 0;
+        }
+
+        .nav-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 2rem;
+        }
+
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .logo-img {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .logo-text {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            list-style: none;
+        }
+
+        .nav-links a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+
+        .nav-links a:hover {
+            color: var(--primary);
+        }
+
+        /* Hero Section */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            padding: 8rem 0 4rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-content {
+            display: flex;
+            align-items: center;
+            gap: 4rem;
+        }
+
+        .hero-text {
+            flex: 1;
+        }
+
+        .hero-title {
+            font-size: 3.5rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
+        }
+
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--text-light);
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+
+        .hero-stats {
+            display: flex;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .stat-item {
+            text-align: center;
+        }
+
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .stat-label {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+
+        .hero-video {
+            flex: 1;
+            position: relative;
+        }
+
+        .video-preview {
+            width: 100%;
+            aspect-ratio: 16/9;
+            background: var(--gray-dark);
+            border-radius: 20px;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .preview-placeholder {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(45deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .play-button {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+
+        .play-button:hover {
+            transform: scale(1.1);
+        }
+
+        /* Features Section */
+        .features {
+            padding: 6rem 0;
+            background: var(--gray-dark);
+        }
+
+        .section-title {
+            text-align: center;
+            font-size: 2.5rem;
+            margin-bottom: 3rem;
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+
+        .feature-card {
+            background: var(--dark);
+            padding: 2rem;
+            border-radius: 20px;
+            transition: transform 0.3s;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px);
+        }
+
+        .feature-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(45deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .feature-icon i {
+            font-size: 1.5rem;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .feature-title {
+            font-size: 1.2rem;
+            margin-bottom: 1rem;
+        }
+
+        .feature-description {
+            color: var(--text-light);
+            line-height: 1.6;
+        }
+
+        /* Buttons */
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 1rem 2rem;
+            border-radius: 50px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            color: #fff;
+            border: none;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(79, 172, 254, 0.2);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 2px solid var(--primary);
+            color: #fff;
+        }
+
+        .btn-secondary:hover {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border-color: transparent;
+        }
+
+        .buttons-container {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        /* Animations */
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+
+        .floating {
+            animation: float 3s infinite ease-in-out;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 968px) {
+            .hero-content {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .hero-stats {
+                justify-content: center;
+            }
+
+            .buttons-container {
+                justify-content: center;
+            }
+
+            .hero-title {
+                font-size: 2.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+
+            .section-title {
+                font-size: 2rem;
+            }
+        }
+
+        /* Pricing Section */
+        .pricing {
+            padding: 8rem 0;
+            background: var(--dark);
+            position: relative;
+        }
+
+        .pricing-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 4rem;
+        }
+
+        .toggle-button {
+            position: relative;
+            width: 60px;
+            height: 30px;
+            background: var(--gray);
+            border-radius: 15px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .toggle-button::after {
+            content: '';
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            background: #fff;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+            transition: all 0.3s;
+        }
+
+        .toggle-button.yearly::after {
+            left: calc(100% - 28px);
+        }
+
+        .toggle-button.yearly {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+        }
+
+        .pricing-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            padding: 0 1rem;
+        }
+
+        .pricing-card {
+            background: var(--gray-dark);
+            border-radius: 20px;
+            padding: 2rem;
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .pricing-card.popular::before {
+            content: 'Most Popular';
+            position: absolute;
+            top: 20px;
+            right: -35px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            padding: 0.5rem 4rem;
+            transform: rotate(45deg);
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+
+        .pricing-card:hover {
+            transform: translateY(-10px);
+        }
+
+        .pricing-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .price {
+            font-size: 3rem;
+            font-weight: bold;
+            margin: 1rem 0;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .price-period {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+
+        .pricing-features {
+            margin: 2rem 0;
+        }
+
+        .feature-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            color: var(--text-light);
+        }
+
+        .feature-item i {
+            color: var(--primary);
+        }
+
+        /* Modal Styles */
+        .auth-modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s;
+        }
+
+        .auth-modal.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .modal-container {
+            width: 90%;
+            max-width: 400px;
+            background: var(--gray-dark);
+            border-radius: 20px;
+            padding: 2rem;
+            position: relative;
+            transform: translateY(20px);
+            transition: all 0.3s;
+        }
+
+        .auth-modal.active .modal-container {
+            transform: translateY(0);
+        }
+
+        .modal-close {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: none;
+            border: none;
+            color: var(--text-light);
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: color 0.3s;
+        }
+
+        .modal-close:hover {
+            color: #fff;
+        }
+
+        .auth-tabs {
+            display: flex;
+            margin-bottom: 2rem;
+            border-bottom: 2px solid var(--gray);
+        }
+
+        .auth-tab {
+            flex: 1;
+            padding: 1rem;
+            text-align: center;
+            cursor: pointer;
+            color: var(--text-light);
+            transition: all 0.3s;
+        }
+
+        .auth-tab.active {
+            color: #fff;
+            border-bottom: 2px solid var(--primary);
+        }
+
+        .auth-form {
+            display: none;
+        }
+
+        .auth-form.active {
+            display: block;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--text-light);
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 0.8rem;
+            background: var(--dark);
+            border: 1px solid var(--gray);
+            border-radius: 10px;
+            color: #fff;
+            transition: all 0.3s;
+        }
+
+        .form-input:focus {
+            border-color: var(--primary);
+            outline: none;
+        }
+
+        .password-input {
+            position: relative;
+        }
+
+        .toggle-password {
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-light);
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+
+        .toggle-password:hover {
+            color: #fff;
+        }
+
+        .auth-footer {
+            margin-top: 1.5rem;
+            text-align: center;
+            color: var(--text-light);
+        }
+
+        .auth-footer a {
+            color: var(--primary);
+            text-decoration: none;
+        }
+
+        .social-auth {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin: 1.5rem 0;
+        }
+
+        .social-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 0.8rem;
+            background: var(--dark);
+            border: 1px solid var(--gray);
+            border-radius: 10px;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .social-button:hover {
+            background: var(--gray);
+        }
+
+        /* Footer Styles */
+        .footer {
+            background: var(--gray-dark);
+            padding: 4rem 0 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .footer-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+
+        .footer-col h3 {
+            margin-bottom: 1.5rem;
+            position: relative;
+            display: inline-block;
+        }
+
+        .footer-col h3::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -5px;
+            width: 30px;
+            height: 2px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+        }
+
+        .footer-links {
+            list-style: none;
+        }
+
+        .footer-links li {
+            margin-bottom: 0.8rem;
+        }
+
+        .footer-links a {
+            color: var(--text-light);
+            text-decoration: none;
+            transition: color 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .footer-links a:hover {
+            color: var(--primary);
+        }
+
+        .social-auth {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin: 1.5rem 0;
+        }
+
+        .social-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 0.8rem;
+            background: var(--dark);
+            border: 1px solid var(--gray);
+            border-radius: 10px;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .social-button:hover {
+            background: var(--gray);
+        }
+
+        /* Footer Styles */
+        .footer {
+            background: var(--gray-dark);
+            padding: 4rem 0 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .footer-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+
+        .footer-col h3 {
+            margin-bottom: 1.5rem;
+            position: relative;
+            display: inline-block;
+        }
+
+        .footer-col h3::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -5px;
+            width: 30px;
+            height: 2px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+        }
+
+        .footer-links {
+            list-style: none;
+        }
+
+        .footer-links li {
+            margin-bottom: 0.8rem;
+        }
+
+        .footer-links a {
+            color: var(--text-light);
+            text-decoration: none;
+            transition: color 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .footer-links a:hover {
+            color: var(--primary);
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding-top: 2rem;
+            border-top: 1px solid var(--gray);
+            color: var(--text-light);
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .social-link {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--dark);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-light);
+            transition: all 0.3s;
+        }
+
+        .social-link:hover {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            color: #fff;
+            transform: translateY(-3px);
+        }
+
+        /* Mobile Menu */
+        .mobile-menu-button {
+            display: none;
+            background: none;
+            border: none;
+            color: #fff;
+            font-size: 1.5rem;
+            cursor: pointer;
+            z-index: 1001;
+        }
+
+        .mobile-menu {
+            position: fixed;
+            top: 0;
+            right: -100%;
+            width: 80%;
+            max-width: 300px;
+            height: 100vh;
+            background: var(--gray-dark);
+            padding: 2rem;
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+
+        .mobile-menu.active {
+            right: 0;
+        }
+
+        .mobile-nav-links {
+            list-style: none;
+            margin-top: 3rem;
+        }
+
+        .mobile-nav-links li {
+            margin-bottom: 1.5rem;
+        }
+
+        .mobile-nav-links a {
+            color: #fff;
+            text-decoration: none;
+            font-size: 1.2rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        @media (max-width: 768px) {
+            .mobile-menu-button {
+                display: block;
+            }
+
+            .nav-links {
+                display: none;
+            }
+        }
+
+        /* Showcase Section */
+        .showcase {
+            padding: 8rem 0;
+            position: relative;
+            background: var(--dark);
+        }
+
+        .showcase-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-top: 4rem;
+        }
+
+        .showcase-item {
+            position: relative;
+            border-radius: 20px;
+            overflow: hidden;
+            aspect-ratio: 9/16;
+            cursor: pointer;
+        }
+
+        .showcase-video {
+            position: absolute;
+            inset: 0;
+            background: var(--gray-dark);
+            transition: transform 0.5s;
+        }
+
+        .showcase-item:hover .showcase-video {
+            transform: scale(1.05);
+        }
+
+        .showcase-overlay {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            padding: 2rem;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .showcase-item:hover .showcase-overlay {
+            opacity: 1;
+        }
+
+        .showcase-title {
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .showcase-platform {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-light);
+        }
+
+        /* How It Works Section */
+        .how-it-works {
+            padding: 8rem 0;
+            background: var(--gray-dark);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .timeline {
+            position: relative;
+            max-width: 800px;
+            margin: 4rem auto 0;
+        }
+
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(var(--primary), var(--secondary));
+        }
+
+        .timeline-item {
+            display: flex;
+            justify-content: center;
+            padding: 2rem 0;
+            opacity: 0;
+            transform: translateY(50px);
+            transition: all 0.5s;
+        }
+
+        .timeline-item.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .timeline-content {
+            width: 40%;
+            padding: 2rem;
+            background: var(--dark);
+            border-radius: 20px;
+            position: relative;
+        }
+
+        .timeline-item:nth-child(odd) .timeline-content {
+            margin-right: 50%;
+        }
+
+        .timeline-item:nth-child(even) .timeline-content {
+            margin-left: 50%;
+        }
+
+        .timeline-number {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+        }
+
+        .timeline-item:nth-child(odd) .timeline-number {
+            right: -60px;
+            transform: translateY(-50%);
+        }
+
+        .timeline-item:nth-child(even) .timeline-number {
+            left: -60px;
+            transform: translateY(-50%);
+        }
+
+        /* Testimonials Section */
+        .testimonials {
+            padding: 8rem 0;
+            background: var(--dark);
+            position: relative;
+        }
+
+        .testimonial-container {
+            position: relative;
+            max-width: 1000px;
+            margin: 4rem auto 0;
+            height: 400px;
+        }
+
+        .testimonial-card {
+            position: absolute;
+            width: 100%;
+            padding: 2rem;
+            background: var(--gray-dark);
+            border-radius: 20px;
+            opacity: 0;
+            transform: translateX(100px);
+            transition: all 0.5s;
+        }
+
+        .testimonial-card.active {
+            opacity: 1;
+            transform: translateX(0);
+        }
+
+        .testimonial-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .testimonial-avatar {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .testimonial-info h3 {
+            margin-bottom: 0.25rem;
+        }
+
+        .testimonial-company {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+
+        .testimonial-content {
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 1.5rem;
+        }
+
+        .testimonial-rating {
+            color: var(--primary);
+        }
+
+        .testimonial-nav {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+
+        .testimonial-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--gray);
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .testimonial-dot.active {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+        }
+
+        /* Parallax Effects */
+        .parallax-bg {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .parallax-item {
+            position: absolute;
+            opacity: 0.1;
+            filter: blur(2px);
+        }
+
+        /* Floating Elements */
+        @keyframes floatAnimation {
+            0%, 100% { transform: translateY(0) rotate(0); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+        }
+
+        .floating-element {
+            animation: floatAnimation 3s infinite ease-in-out;
+        }
+
+        /* Glass Effect */
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Gradient Text */
+        .gradient-text {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        /* Hover Effects */
+        .hover-lift {
+            transition: transform 0.3s;
+        }
+
+        .hover-lift:hover {
+            transform: translateY(-5px);
+        }
+
+        /* Glow Effects */
+        .glow {
+            position: relative;
+        }
+
+        .glow::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            filter: blur(15px);
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: -1;
+        }
+
+        .glow:hover::after {
+            opacity: 0.5;
+        }
+
+

static/css/style.css

@@ -0,0 +1,684 @@
+:root {
+    --primary-color: #00ffff;
+    --background-dark: #0f1115;
+    --secondary-dark: #1a1d23;
+    --purple: #6c5dd3;
+    --text-color: #ffffff;
+    --border-color: #2a2e35;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    background-color: var(--background-dark);
+    color: var(--text-color);
+    position: relative;
+}
+
+/* Navbar Styles */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: var(--background-dark);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1001;
+}
+
+.logo {
+    color: var(--primary-color);
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    position: relative;
+}
+
+.credits {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.profile-icon {
+    width: 40px;
+    height: 40px;
+    background-color: #ff5733;
+    border-radius: 50%; /* Make it circular */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    cursor: pointer;
+    position: relative;
+}
+
+.profile-photo {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%; /* Make it circular */
+    object-fit: cover;
+}
+
+.profile-menu {
+    display: none;
+    position: absolute;
+    top: calc(100%);
+    right: 0;
+    background-color: var(--background-dark);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    z-index: 1000;
+}
+
+.profile-menu a {
+    display: block;
+    padding: 0.8rem 1rem;
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+.profile-menu a:hover {
+    background-color: var(--secondary-dark);
+}
+
+/* Main Content Styles */
+.main-content {
+    display: flex;
+    height: calc(100vh - 70px);
+}
+
+/* Sidebar Styles */
+.sidebar {
+    width: 250px;
+    background-color: var(--background-dark);
+    padding: 1rem;
+    border-right: 1px solid var(--border-color);
+}
+
+.sidebar-item {
+    padding: 0.8rem;
+    margin: 0.5rem 0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.sidebar-item:hover {
+    background-color: var(--secondary-dark);
+}
+
+.sidebar-item.active {
+    background-color: var(--secondary-dark);
+}
+
+/* Content Area Styles */
+.content-area {
+    flex: 1;
+    padding: 2rem;
+    background-color: var(--background-dark);
+    overflow-y: auto;
+}
+
+.page-title {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.page-title .search-bar {
+    width: 200px;
+    background-color: var(--secondary-dark);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    padding: 0.5rem;
+    border-radius: 8px;
+}
+
+.style-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+}
+
+.style-card {
+    aspect-ratio: 9/16;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    border: 2px solid transparent;
+    background-color: var(--secondary-dark);
+}
+
+.style-card:hover {
+    border-color: var(--purple);
+}
+
+.style-card.selected {
+    border-color: var(--purple);
+}
+
+.style-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.style-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem;
+    background: linear-gradient(transparent, rgba(0,0,0,0.7));
+    color: white;
+}
+
+/* Preview Panel Styles */
+.preview-panel {
+    width: 300px;
+    padding: 1rem;
+    background-color: var(--background-dark);
+    border-left: 1px solid var(--border-color);
+}
+
+.video-preview {
+    width: 100%;
+    aspect-ratio: 9/16;
+    background-color: var(--secondary-dark);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.video-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem;
+    background: linear-gradient(transparent, rgba(0,0,0,0.7));
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.control-button {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+}
+
+.time-display {
+    margin-left: auto;
+    font-size: 0.875rem;
+}
+
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.button {
+    padding: 0.8rem;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    font-weight: 500;
+    background-color: var(--purple);
+    color: white;
+    border: none;
+    transition: background-color 0.3s;
+    width: 100%;
+}
+
+.button:hover {
+    background-color: #5a45b2;
+}
+
+/* Caption Styles */
+.caption-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.caption-section {
+    background-color: var(--secondary-dark);
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+.input-group {
+    margin-bottom: 1rem;
+}
+
+.input-label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.select-input {
+    width: 100%;
+    padding: 0.8rem;
+    background-color: var(--background-dark);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    border-radius: 8px;
+}
+
+.toggle-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    gap: 1rem;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--border-color);
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: var(--purple);
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.lines-buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.line-button {
+    padding: 0.5rem 1rem;
+    background-color: var(--background-dark);
+    border: none;
+    color: var(--text-color);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.line-button:hover {
+    background-color: #5a45b2;
+}
+
+.line-button.active {
+    background-color: var(--purple);
+}
+
+.color-picker-group {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.color-picker {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+.slider-group {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.slider-group .toggle-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+
+.slider-group .toggle-group span {
+    font-weight: 500;
+}
+
+.slider-group .toggle-group label {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Audio Section Styles */
+.voice-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+}
+
+.voice-box {
+    background-color: var(--secondary-dark);
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    border: 2px solid transparent;
+}
+
+.voice-box:hover {
+    border-color: var(--purple);
+}
+
+.voice-box.selected {
+    border-color: var(--purple);
+}
+
+.voice-profile {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%; /* Make it circular */
+    background-color: #ff5733;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 0.5rem;
+}
+
+.voice-name {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.play-button {
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    background-color: var(--purple);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.play-button:hover {
+    background-color: #5a45b2;
+}
+
+/* Music Section Styles */
+.music-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+}
+
+.music-box {
+    background-color: var(--secondary-dark);
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    border: 2px solid transparent;
+}
+
+.music-box:hover {
+    border-color: var(--purple);
+}
+
+.music-box.selected {
+    border-color: var(--purple);
+}
+
+.music-profile {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%; /* Make it circular */
+    background-color: #ff5733;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 0.5rem;
+}
+
+.music-name {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.play-stop-button {
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    background-color: var(--purple);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.play-stop-button:hover {
+    background-color: #5a45b2;
+}
+
+/* Popup Styles */
+.popup-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popup-content {
+    background-color: var(--background-dark);
+    padding: 2rem;
+    border-radius: 12px;
+    width: 80%;
+    max-width: 500px;
+    text-align: center;
+    height: 400px;
+    overflow-y: auto;
+}
+
+.popup-options {
+    margin-top: 1rem;
+}
+
+.popup-button {
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 0 0.5rem;
+    background-color: var(--purple);
+    color: white;
+    border: none;
+    transition: background-color 0.3s;
+}
+
+.popup-button:hover {
+    background-color: #5a45b2;
+}
+
+.popup-button.no {
+    background-color: var(--secondary-dark);
+    color: white;
+    border: 1px solid var(--border-color);
+}
+
+.popup-button.no:hover {
+    background-color: #5a45b2;
+}
+
+/* Upgrade Popup Styles */
+.upgrade-popup-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1002;
+}
+
+.upgrade-popup-content {
+    background-color: var(--background-dark);
+    padding: 2rem;
+    border-radius: 12px;
+    width: 80%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.plans-grid {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.plan {
+    flex: 1;
+    background-color: var(--secondary-dark);
+    border-radius: 12px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.plan-header {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.plan-details {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.plan-upgrade-button {
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    background-color: var(--purple);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.plan-upgrade-button:hover {
+    background-color: #5a45b2;
+}
+
+/* Additional Styles for New Layout */
+.script-dropdowns {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.script-area {
+    margin-bottom: 1rem;
+}
+
+.script-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+    gap: 0.5rem;
+}
+
+.task-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+    gap: 0.5rem;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.logs {
+    margin-top: 1rem;
+    background-color: var(--secondary-dark);
+    padding: 1rem;
+    border-radius: 8px;
+    height: 150px;
+    overflow-y: auto;
+}

static/fonts/Ubuntu-Bold.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6dbcce3fdd846f3aebc7e1890b5ccca234806cbd84763785f7ced043a99e8268
+size 270164

static/js/script.js

@@ -0,0 +1,537 @@
+// Function to log messages to the logs div
+function logMessage(message) {
+    const logsDiv = document.getElementById('logs');
+    const logEntry = document.createElement('div');
+    logEntry.textContent = message;
+    logsDiv.appendChild(logEntry);
+    logsDiv.scrollTop = logsDiv.scrollHeight; // Scroll to the bottom
+}
+
+// Function to generate video
+function generateVideo() {
+    const formData = new FormData(document.getElementById('videoForm'));
+    const apiKey = document.getElementById('apiKey').value; // Get API key from hidden input
+
+    fetch('/api/generate-video', {
+        method: 'POST',
+        headers: {
+            'X-API-Key': apiKey
+        },
+        body: formData
+    })
+    .then(response => {
+        if (response.ok) {
+            return response.blob().then(blob => {
+                const url = window.URL.createObjectURL(blob);
+                const video = document.getElementById('generatedVideo');
+                video.src = url;
+                video.load(); // Load the video
+                video.play(); // Play the video
+                logMessage('Video generation successful!');
+                document.getElementById('downloadVideoButton').disabled = false; // Enable download button
+            });
+        } else {
+            return response.json().then(data => {
+                throw new Error(data.error || 'Video generation failed');
+            });
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Video generation failed: ' + error.message);
+        logMessage('Video generation failed: ' + error.message);
+        document.getElementById('downloadVideoButton').disabled = true; // Disable download button
+    });
+}
+
+// Function to show popup
+function showPopup() {
+    const textGenerator = document.getElementById('text-generator').value;
+    const textGeneratorModel = document.getElementById('text-generator-model').value;
+    const imageGenerator = document.getElementById('image-generator').value;
+    const imageGeneratorModel = document.querySelector('.style-card.selected') ? document.querySelector('.style-card.selected').querySelector('.style-label').textContent : '';
+    const speechGenerator = document.getElementById('speech-generator').value;
+    const speechGeneratorVoice = document.querySelector('.voice-box.selected') ? document.querySelector('.voice-box.selected').querySelector('.voice-name').textContent : '';
+    const disableSubtitles = document.getElementById('disable-subtitles').checked;
+    const subtitlesColor = document.getElementById('subtitles-color').value;
+    const subtitleFontName = document.getElementById('subtitle-font-name').value;
+    const maxCharacterPerLine = document.getElementById('max-character-per-line').value;
+    const subtitleFontSize = document.getElementById('subtitle-font-size').value;
+    const subtitleStrokeWidth = document.getElementById('subtitle-stroke-width').value;
+    const lines = document.querySelector('.line-button.active').textContent.replace(' Line', '');
+    const highlightColor = document.getElementById('highlight-color').value;
+    const niche = document.getElementById('niche').value;
+    const language = document.getElementById('language').value;
+
+    const selectedOptions = {
+        "text_generator": textGenerator,
+        "text_generator_model": textGeneratorModel,
+        "image_generator": imageGenerator,
+        "image_generator_model": imageGeneratorModel,
+        "speech_generator": speechGenerator,
+        "speech_generator_voice": speechGeneratorVoice,
+        "disable_subtitles": disableSubtitles,
+        "subtitles_color": subtitlesColor,
+        "subtitle_font_name": subtitleFontName,
+        "max_character_per_line": parseInt(maxCharacterPerLine),
+        "subtitle_font_size": parseInt(subtitleFontSize),
+        "subtitle_stroke_width": parseInt(subtitleStrokeWidth),
+        "max_lines": parseInt(lines),
+        "highlight_color": highlightColor,
+        "niche": niche,
+        "language": language
+    };
+
+    document.getElementById('popupOptions').textContent = JSON.stringify(selectedOptions, null, 2);
+    document.getElementById('popupOverlay').style.display = 'flex';
+
+    // Update form data
+    document.getElementById('text_generator').value = textGenerator;
+    document.getElementById('text_generator_model').value = textGeneratorModel;
+    document.getElementById('image_generator').value = imageGenerator;
+    document.getElementById('image_generator_model').value = imageGeneratorModel;
+    document.getElementById('speech_generator').value = speechGenerator;
+    document.getElementById('speech_generator_voice').value = speechGeneratorVoice;
+    document.getElementById('disable_subtitles').checked = disableSubtitles;
+    document.getElementById('subtitles_color').value = subtitlesColor;
+    document.getElementById('subtitle_font_name').value = subtitleFontName;
+    document.getElementById('subtitle_font_size').value = subtitleFontSize;
+    document.getElementById('subtitle_stroke_color').value = document.getElementById('subtitle-stroke-color').value;
+    document.getElementById('subtitle_stroke_width').value = subtitleStrokeWidth;
+    document.getElementById('max_character_per_line').value = maxCharacterPerLine;
+    document.getElementById('max_lines').value = lines;
+    document.getElementById('highlight_color').value = highlightColor;
+    document.getElementById('niche_hidden').value = niche;
+    document.getElementById('language_hidden').value = language;
+}
+
+// Function to play or pause the generated video
+function playPauseVideo() {
+    const video = document.getElementById('generatedVideo');
+    if (video) {
+        if (video.paused) {
+            video.play();
+            document.querySelector('.video-controls .control-button i').className = 'fas fa-pause';
+        } else {
+            video.pause();
+            document.querySelector('.video-controls .control-button i').className = 'fas fa-play';
+        }
+    }
+}
+
+// Function to hide popup
+function hidePopup() {
+    document.getElementById('popupOverlay').style.display = 'none';
+}
+
+// Function to show upgrade popup
+function showUpgradePopup() {
+    document.getElementById('upgradePopupOverlay').style.display = 'flex';
+}
+
+// Function to hide upgrade popup
+function hideUpgradePopup() {
+    document.getElementById('upgradePopupOverlay').style.display = 'none';
+}
+
+// Tab Switching
+document.querySelectorAll('.sidebar-item[data-tab]').forEach(item => {
+    item.addEventListener('click', () => {
+        document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        
+        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
+        
+        const tabId = item.getAttribute('data-tab') + '-content';
+        document.getElementById(tabId).style.display = 'block';
+    });
+});
+
+// Style Card Selection
+function selectImage(element) {
+    document.querySelectorAll('.style-card').forEach(card => {
+        card.classList.remove('selected');
+    });
+    element.classList.add('selected');
+
+    const imgSrc = element.querySelector('img').src;
+    document.getElementById('preview-image').src = imgSrc;
+}
+
+// Populate Models Dropdown based on TEXT GENERATOR selection
+document.getElementById('text-generator').addEventListener('change', function() {
+    const selectedTextGen = this.value;
+    const modelsDropdown = document.getElementById('text-generator-model');
+    modelsDropdown.innerHTML = '';
+    fetch(`/text-generator-models/${selectedTextGen}`)
+    .then(response => response.json())
+    .then(data => {
+        data.models.forEach(model => {
+            const option = document.createElement('option');
+            option.value = model;
+            option.textContent = model;
+            modelsDropdown.appendChild(option);
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching text generator models:', error);
+        logMessage('Error fetching text generator models: ' + error.message);
+    });
+});
+
+// Populate Style Cards based on IMAGE GENERATOR selection
+document.getElementById('image-generator').addEventListener('change', function() {
+    const selectedImageGen = this.value;
+    const styleGrid = document.getElementById('style-grid');
+    styleGrid.innerHTML = '';
+    fetch(`/image-generator-models/${selectedImageGen}`)
+    .then(response => response.json())
+    .then(data => {
+        data.models.forEach((style, index) => {
+            const styleCard = document.createElement('div');
+            styleCard.className = 'style-card';
+            styleCard.onclick = function() { selectImage(this); };
+            styleCard.innerHTML = `
+                <img alt="${style} style image" src="/static/media/Image_Generators/${selectedImageGen.toLowerCase()}/${style.replace(/[\s\(]/g, '_').replace(/\)/g, '').toLowerCase()}.jpg"/>
+                <div class="style-label">${style}</div>
+            `;
+            styleGrid.appendChild(styleCard);
+            if (index === 0) { // Default to first style
+                selectImage(styleCard);
+            }
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching image generator models:', error);
+        logMessage('Error fetching image generator models: ' + error.message);
+    });
+});
+
+// Populate Voices Grid based on SPEECH GENERATOR selection
+document.getElementById('speech-generator').addEventListener('change', function() {
+    const selectedSpeechGen = this.value;
+    const voiceGrid = document.getElementById('voice-grid');
+    voiceGrid.innerHTML = '';
+    fetch(`/speech-generator-models/${selectedSpeechGen}`)
+    .then(response => response.json())
+    .then(data => {
+        data.models.forEach((voice, index) => {
+            const voiceBox = document.createElement('div');
+            voiceBox.className = 'voice-box';
+            voiceBox.onclick = function() { selectVoice(this); };
+            voiceBox.innerHTML = `
+                <div class="voice-profile" style="background-color: ${index % 2 === 0 ? '#ff5733' : '#3399ff'};">
+                    ${index % 2 === 0 ? '♀' : '♂'}
+                </div>
+                <div class="voice-name">${voice}</div>
+                <button class="play-button" onclick="playVoice('${voice}')">Play</button>
+            `;
+            voiceGrid.appendChild(voiceBox);
+            if (index === 0) { // Default to first voice
+                selectVoice(voiceBox);
+            }
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching speech generator models:', error);
+        logMessage('Error fetching speech generator models: ' + error.message);
+    });
+});
+
+// Voice Selection
+function selectVoice(element) {
+    document.querySelectorAll('.voice-box').forEach(box => {
+        box.classList.remove('selected');
+    });
+    element.classList.add('selected');
+
+    const selectedVoiceName = element.querySelector('.voice-name').textContent;
+    document.getElementById('preview-image').alt = `Preview of the selected voice: ${selectedVoiceName}`;
+}
+
+// Function to play voice
+function playVoice(voiceName) {
+    const selectedSpeechGen = document.getElementById('speech-generator').value;
+    const voiceNameSanitized = voiceName.toLowerCase().replace(/\s+/g, '_');
+    const audioUrl = `/static/media/Speech_Generators/${selectedSpeechGen.toLowerCase()}/${voiceNameSanitized}.mp3`;
+    const audio = new Audio(audioUrl);
+    audio.play();
+}
+
+// Function to select music
+function selectMusic(element) {
+    document.querySelectorAll('.music-box').forEach(box => {
+        box.classList.remove('selected');
+    });
+    element.classList.add('selected');
+
+    const selectedMusicName = element.querySelector('.music-name').textContent;
+    document.getElementById('preview-image').alt = `Preview of the selected music: ${selectedMusicName}`;
+}
+
+// Function to play or stop music
+function playStopMusic(audioUrl, button) {
+    const audio = new Audio(audioUrl);
+    if (button.textContent === 'Play') {
+        audio.play();
+        button.textContent = 'Stop';
+    } else {
+        audio.pause();
+        button.textContent = 'Play';
+    }
+}
+
+// Set lines per caption
+function setLines(lines) {
+    document.querySelectorAll('.line-button').forEach(button => {
+        button.classList.remove('active');
+    });
+    document.querySelector(`.line-button:nth-child(${lines})`).classList.add('active');
+    document.getElementById('max_lines').value = lines;
+}
+
+// Function to generate script
+function generateScript() {
+    logMessage('Generating script...');
+    const niche = document.getElementById('niche').value;
+    const language = document.getElementById('language').value;
+    const textGenerator = document.getElementById('text-generator').value;
+    const textGeneratorModel = document.getElementById('text-generator-model').value;
+
+    const request = {
+        niche: niche,
+        language: language,
+        text_generator: textGenerator,
+        text_generator_model: textGeneratorModel
+    };
+
+    fetch('/generate-script', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(request)
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('generated-topic').value = data.topic;
+        document.getElementById('generated-script').value = data.script;
+        document.getElementById('generated-image-prompts').value = data.image_prompts.join(', ');
+        document.getElementById('generated-metadata').value = JSON.stringify(data.metadata, null, 2);
+        logMessage('Script generated successfully!');
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Script generation failed: ' + error.message);
+        logMessage('Script generation failed: ' + error.message);
+    });
+}
+
+// Function to start loading
+function startLoading() {
+    document.getElementById('popupOverlay').style.display = 'none';
+
+    // Update video limit
+    const videoLimitElement = document.getElementById('videoLimit');
+    const currentLimit = parseInt(videoLimitElement.textContent.split('/')[0], 10);
+    const maxLimit = parseInt(videoLimitElement.textContent.split('/')[1], 10);
+    if (currentLimit < maxLimit) {
+        videoLimitElement.textContent = `${currentLimit + 1}/${maxLimit}`;
+    } else {
+        alert('You have reached your daily video generation limit!');
+        return;
+    }
+
+    // Clear previous content in the video-preview div
+    const videoContainer = document.querySelector('.video-container');
+    videoContainer.innerHTML = '';
+
+    // Clear logs
+    const logsDiv = document.getElementById('logs');
+    logsDiv.innerHTML = '';
+
+    // Call the generateVideo function to trigger video generation
+    generateVideo();
+}
+
+// Function to download the generated video
+function downloadVideo() {
+    const video = document.getElementById('generatedVideo');
+    if (video && video.src) {
+        const a = document.createElement('a');
+        a.href = video.src;
+        a.download = 'generated_video.mp4';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    } else {
+        alert('No video to download.');
+    }
+}
+
+// Profile Icon Click Event
+document.getElementById('profileIcon').addEventListener('click', function(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('profileMenu');
+    if (menu.style.display === 'block') {
+        menu.style.display = 'none';
+    } else {
+        menu.style.display = 'block';
+    }
+});
+
+// Close Profile Menu when clicking outside
+document.addEventListener('click', function(event) {
+    const profileIcon = document.getElementById('profileIcon');
+    const profileMenu = document.getElementById('profileMenu');
+    if (!profileIcon.contains(event.target) && !profileMenu.contains(event.target)) {
+        profileMenu.style.display = 'none';
+    }
+});
+
+// Update slider values
+document.getElementById('max-character-per-line').addEventListener('input', function() {
+    document.getElementById('max_chars_value').textContent = this.value;
+    document.getElementById('max_character_per_line').value = this.value;
+});
+
+document.getElementById('subtitle-font-size').addEventListener('input', function() {
+    document.getElementById('subtitle-font-size-value').textContent = this.value;
+    document.getElementById('subtitle_font_size').value = this.value;
+});
+
+document.getElementById('subtitle-stroke-width').addEventListener('input', function() {
+    document.getElementById('subtitle-stroke-width-value').textContent = this.value;
+    document.getElementById('subtitle_stroke_width').value = this.value;
+});
+
+// Search functionality for Image tab
+document.getElementById('image-search').addEventListener('input', function() {
+    const query = this.value.toLowerCase();
+    const styleCards = document.querySelectorAll('.style-card');
+    styleCards.forEach(card => {
+        const label = card.querySelector('.style-label').textContent.toLowerCase();
+        if (label.includes(query)) {
+            card.style.display = 'block';
+        } else {
+            card.style.display = 'none';
+        }
+    });
+});
+
+// Search functionality for Audio tab
+document.getElementById('audio-search').addEventListener('input', function() {
+    const query = this.value.toLowerCase();
+    const voiceBoxes = document.querySelectorAll('.voice-box');
+    voiceBoxes.forEach(box => {
+        const name = box.querySelector('.voice-name').textContent.toLowerCase();
+        if (name.includes(query)) {
+            box.style.display = 'block';
+        } else {
+            box.style.display = 'none';
+        }
+    });
+});
+
+// Search functionality for Music tab
+document.getElementById('music-search').addEventListener('input', function() {
+    const query = this.value.toLowerCase();
+    const musicBoxes = document.querySelectorAll('.music-box');
+    musicBoxes.forEach(box => {
+        const name = box.querySelector('.music-name').textContent.toLowerCase();
+        if (name.includes(query)) {
+            box.style.display = 'block';
+        } else {
+            box.style.display = 'none';
+        }
+    });
+});
+
+// Initialize everything when the page loads
+document.addEventListener('DOMContentLoaded', function() {
+    fetchUserData();
+    setupSearch();
+    populateFonts();
+    populateMusics();
+});
+
+// Fetch User Data
+async function fetchUserData() {
+    try {
+        const response = await fetch('/api/user-data');
+        const userData = await response.json();
+        document.getElementById('user_id').value = userData.uuid;
+        document.getElementById('username').value = userData.username;
+        document.getElementById('profile_path').value = userData.profile_path;
+        document.getElementById('videoLimit').textContent = userData.limit;
+        document.getElementById('apiKey').value = userData.api_key; // Set API key in hidden input
+    } catch (error) {
+        console.error('Failed to fetch user data:', error);
+        logMessage('Failed to fetch user data: ' + error.message);
+    }
+}
+
+// Populate Fonts Dropdown
+async function populateFonts() {
+    try {
+        const response = await fetch('/available-fonts');
+        const fonts = await response.json();
+        const fontsDropdown = document.getElementById('subtitle-font-name');
+        fonts.fonts.forEach(font => {
+            const option = document.createElement('option');
+            option.value = font;
+            option.textContent = font;
+            fontsDropdown.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Error fetching fonts:', error);
+        logMessage('Error fetching fonts: ' + error.message);
+    }
+}
+
+// Populate Musics Grid
+async function populateMusics() {
+    try {
+        const response = await fetch('/available-musics');
+        const musics = await response.json();
+        const musicGrid = document.getElementById('music-grid');
+        musics.musics.forEach(music => {
+            const musicBox = document.createElement('div');
+            musicBox.className = 'music-box';
+            musicBox.onclick = function() { selectMusic(this); };
+            musicBox.innerHTML = `
+                <div class="music-profile" style="background-color: #ff5733;">
+                    🎶
+                </div>
+                <div class="music-name">${music}</div>
+                <button class="play-stop-button" onclick="playStopMusic('/static/music/${music}', this)">Play</button>
+            `;
+            musicGrid.appendChild(musicBox);
+        });
+    } catch (error) {
+        console.error('Error fetching musics:', error);
+        logMessage('Error fetching musics: ' + error.message);
+    }
+}
+
+// Search Functionality
+function setupSearch() {
+    const searchInput = document.getElementById('videoSearch');
+    searchInput.addEventListener('input', function() {
+        const query = this.value.toLowerCase();
+        document.querySelectorAll('.thumbnail-card').forEach(card => {
+            const title = card.querySelector('.thumbnail-label').textContent.toLowerCase();
+            card.style.display = title.includes(query) ? 'block' : 'none';
+        });
+    });
+}
+
+// Navigate to different pages
+function navigateToPage(page) {
+    window.location.href = `/${page}`;
+}
+
+// Logout
+function logout() {
+    window.location.href = '/logout';
+}

static/music/Track-1.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9bae80da9326e87d4e0c96b08f0f1ee4911c1697ef9b5237ef51351a44453e49
+size 2249517

static/music/Track-2.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bcdfed1366cfbcf146b99c9f303b8d699ff78e78b0d2b2a406ef07a0a4894741
+size 2091189

static/music/output000.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9bae80da9326e87d4e0c96b08f0f1ee4911c1697ef9b5237ef51351a44453e49
+size 2249517

static/music/output001.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bcdfed1366cfbcf146b99c9f303b8d699ff78e78b0d2b2a406ef07a0a4894741
+size 2091189