Spaces:

Elias207
/

videorayegan

Running

App Files Files Community

Elias207 commited on Aug 28

Commit

4f08889

verified ·

1 Parent(s): 56d110d

Update index.html

Browse files

Files changed (1) hide show

index.html +214 -1019

index.html CHANGED Viewed

@@ -3,122 +3,60 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Video Studio - استودیو ویدیو هوش مصنوعی</title>
-    <!-- بارگذاری فونت‌ها -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
-        /* ========================================================== */
-        /* == ENHANCED UI STYLES FOR AI VIDEO STUDIO == */
-        /* ========================================================== */
-        #imageToVideoApp {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             --panel-bg: #FFFFFF;
-            --panel-border: #E8EBF7;
-            --input-bg: #F8FAFF;
-            --input-border: #DDE2F0;
             --text-primary: #1A202C;
-            --text-secondary: #4A5568;
-            --text-tertiary: #718096;
             --accent-primary: #4A6CFA;
             --accent-primary-hover: #3553D6;
             --accent-primary-glow: rgba(74, 108, 250, 0.25);
             --accent-secondary: #0FD4A8;
             --danger-color: #e53e3e;
             --danger-color-hover: #c53030;
-            --success-color: #38A169;
-            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
-            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-            --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
-            --radius-card: 28px;
-            --radius-btn: 16px;
-            --radius-input: 14px;
-            --transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-            font-family: var(--app-font);
-            color: var(--text-primary);
-            line-height: 1.6;
-            direction: rtl;
-            min-height: 100vh;
-            position: relative;
-            overflow-x: hidden;
-            background: var(--app-bg);
         }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
         body {
             margin: 0;
-            background: var(--app-bg);
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.02); }
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-        }
-        /* Glass Effect Backdrop */
-        #imageToVideoApp::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                radial-gradient(circle at 20% 50%, rgba(74, 108, 250, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(15, 212, 168, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 40% 80%, rgba(102, 126, 234, 0.2) 0%, transparent 50%);
-            z-index: -1;
-        }
-        /* Main Container */
-        #imageToVideoApp .studio-container {
-            width: 100%;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 40px 20px;
-            position: relative;
-            z-index: 1;
         }
-        /* Enhanced Header */
-        #imageToVideoApp .studio-header {
             position: relative;
             text-align: center;
-            margin-bottom: 3rem;
-            padding: 3rem 2rem;
             animation: fadeIn 0.8s 0.1s ease-out backwards;
             overflow: hidden;
-            border-radius: var(--radius-card);
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow:
-                0 20px 40px rgba(0, 0, 0, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.6);
         }
         #neural-network-canvas {
             position: absolute;
             top: 0;
@@ -126,867 +64,210 @@
             width: 100%;
             height: 100%;
             z-index: 1;
-            opacity: 0.6;
         }
-        #imageToVideoApp .studio-logo,
-        #imageToVideoApp .studio-subtitle {
             position: relative;
             z-index: 2;
         }
-        #imageToVideoApp .studio-logo {
-            display: inline-flex;
-            align-items: center;
-            gap: 1.5rem;
-            margin-bottom: 1.5rem;
-            animation: float 3s ease-in-out infinite;
-        }
-        #imageToVideoApp .logo-icon {
-            width: 80px;
-            height: 80px;
-            filter: drop-shadow(0 8px 16px rgba(74, 108, 250, 0.3));
-        }
-        #imageToVideoApp .logo-icon svg {
-            width: 100%;
-            height: 100%;
-            animation: pulse 2s ease-in-out infinite;
-        }
-        #imageToVideoApp .studio-title {
-            font-size: 3.5rem;
-            font-weight: 900;
-            letter-spacing: -2px;
-            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, #667eea 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin: 0;
-        }
-        #imageToVideoApp .studio-subtitle {
-            font-size: 1.3rem;
-            color: var(--text-secondary);
-            margin-top: 1rem;
-            font-weight: 500;
-            opacity: 0.9;
-        }
-        /* Enhanced Control Panel */
-        #imageToVideoApp .control-panel {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 2.5rem;
-            margin-bottom: 2.5rem;
-            animation: fadeIn 0.8s 0.3s ease-out backwards;
-        }
-        @media (max-width: 768px) {
-            #imageToVideoApp .control-panel {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-            }
         }
-        /* Enhanced Studio Cards */
-        #imageToVideoApp .studio-card {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: var(--radius-card);
             padding: 3rem;
-            box-shadow:
-                0 20px 40px rgba(0, 0, 0, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.6);
-            transition: var(--transition-smooth);
-            position: relative;
-            overflow: hidden;
-        }
-        #imageToVideoApp .studio-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.6s;
-        }
-        #imageToVideoApp .studio-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            box-shadow:
-                0 30px 60px rgba(0, 0, 0, 0.15),
-                inset 0 1px 0 rgba(255, 255, 255, 0.8);
-        }
-        #imageToVideoApp .studio-card:hover::before {
-            left: 100%;
-        }
-        /* General Panel Styling */
-        #imageToVideoApp .timeline-container,
-        #imageToVideoApp .video-output-container,
-        #imageToVideoApp .error-panel {
-            grid-column: 1 / -1;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: var(--radius-card);
-            padding: 3rem;
-            margin-bottom: 2.5rem;
-            box-shadow:
-                0 20px 40px rgba(0, 0, 0, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.6);
-            display: none;
-        }
-        #imageToVideoApp .timeline-container.active,
-        #imageToVideoApp .video-output-container.active,
-        #imageToVideoApp .error-panel.active {
-            display: block;
-            animation: fadeIn 0.5s ease;
-        }
-        /* Enhanced Section Headers */
-        #imageToVideoApp .section-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 2rem;
-            padding-bottom: 1.5rem;
-            border-bottom: 2px solid rgba(74, 108, 250, 0.1);
-            position: relative;
-        }
-        #imageToVideoApp .section-header::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 60px;
-            height: 2px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
-            border-radius: 1px;
-        }
-        #imageToVideoApp .section-icon {
-            width: 32px;
-            height: 32px;
-            color: var(--accent-primary);
-            filter: drop-shadow(0 2px 4px rgba(74, 108, 250, 0.3));
-        }
-        #imageToVideoApp .section-title {
-            font-size: 1.4rem;
-            font-weight: 800;
-            color: var(--text-primary);
-            background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        /* Enhanced Upload Zone */
-        #imageToVideoApp .upload-zone {
-            position: relative;
-            width: 100%;
-            aspect-ratio: 16/9;
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            border: 3px dashed var(--input-border);
-            border-radius: var(--radius-input);
             display: flex;
             align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            overflow: hidden;
-            transition: var(--transition-smooth);
-            text-align: center;
-            position: relative;
-        }
-        #imageToVideoApp .upload-zone::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                radial-gradient(circle at 30% 30%, rgba(74, 108, 250, 0.05) 0%, transparent 50%),
-                radial-gradient(circle at 70% 70%, rgba(15, 212, 168, 0.05) 0%, transparent 50%);
-            z-index: 1;
-        }
-        #imageToVideoApp .upload-zone:hover:not(.has-image),
-        #imageToVideoApp .upload-zone.drag-over {
-            border-color: var(--accent-primary);
-            background: linear-gradient(135deg, #fff 0%, rgba(74, 108, 250, 0.05) 100%);
-            box-shadow:
-                0 0 30px var(--accent-primary-glow),
-                inset 0 1px 0 rgba(255, 255, 255, 0.8);
-            transform: scale(1.02);
-        }
-        #imageToVideoApp .upload-content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 1.5rem;
-            position: relative;
-            z-index: 2;
-        }
-        #imageToVideoApp .upload-icon-wrapper {
-            padding: 1.5rem;
-            background: linear-gradient(135deg, rgba(74, 108, 250, 0.1) 0%, rgba(15, 212, 168, 0.1) 100%);
-            border-radius: 50%;
-            animation: pulse 2s ease-in-out infinite;
-        }
-        #imageToVideoApp .upload-icon-wrapper svg {
-            width: 60px;
-            height: 60px;
-            color: var(--accent-primary);
-            stroke-width: 1.5;
-            filter: drop-shadow(0 4px 8px rgba(74, 108, 250, 0.3));
-        }
-        #imageToVideoApp .upload-title {
-            font-size: 1.3rem;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 0;
-        }
-        #imageToVideoApp .upload-subtitle {
-            font-size: 1rem;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-        #imageToVideoApp #imageFile { display: none; }
-        #imageToVideoApp #imagePreview {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            border-radius: var(--radius-input);
-        }
-        #imageToVideoApp .upload-zone.has-image {
-            border-style: solid;
-            border-color: var(--success-color);
-            padding: 0;
-            box-shadow: 0 0 20px rgba(56, 161, 105, 0.3);
-        }
-        #imageToVideoApp .upload-zone.has-image .upload-content { display: none; }
-        /* Enhanced Prompt Input */
-        #imageToVideoApp .prompt-textarea {
-            width: 100%;
-            min-height: 140px;
-            padding: 1.5rem;
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            border: 2px solid var(--input-border);
-            border-radius: var(--radius-input);
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 1.1rem;
-            resize: vertical;
-            transition: var(--transition-smooth);
-            box-shadow:
-                var(--shadow-sm) inset,
-                0 4px 12px rgba(0, 0, 0, 0.05);
-            line-height: 1.6;
-        }
-        #imageToVideoApp .prompt-textarea:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            background: #fff;
-            box-shadow:
-                0 0 0 4px var(--accent-primary-glow),
-                var(--shadow-md) inset;
-            transform: scale(1.01);
-        }
-        #imageToVideoApp .prompt-textarea::placeholder {
-            color: var(--text-tertiary);
-            font-style: italic;
-        }
-        /* Enhanced Generate Button */
-        #imageToVideoApp .generate-button {
-            width: 100%;
-            padding: 1.5rem 2rem;
-            background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 50%, #667eea 100%);
-            border: none;
-            border-radius: var(--radius-btn);
-            color: white;
-            font-size: 1.4rem;
-            font-weight: 800;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1rem;
-            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-            box-shadow:
-                0 8px 24px rgba(74, 108, 250, 0.4),
-                0 4px 12px rgba(15, 212, 168, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.3);
-            margin-top: 2rem;
-            position: relative;
-            overflow: hidden;
-        }
-        #imageToVideoApp .generate-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-            transition: left 0.6s;
-        }
-        #imageToVideoApp .generate-button:hover:not(:disabled) {
-            transform: translateY(-6px) scale(1.03);
-            box-shadow:
-                0 12px 32px rgba(74, 108, 250, 0.5),
-                0 6px 16px rgba(15, 212, 168, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.4);
-        }
-        #imageToVideoApp .generate-button:hover:not(:disabled)::before {
-            left: 100%;
-        }
-        #imageToVideoApp .generate-button:disabled {
-            background: linear-gradient(135deg, var(--text-tertiary), #A0AEC0);
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: var(--shadow-md);
-            opacity: 0.7;
-        }
-        #imageToVideoApp .generate-button svg {
-            width: 28px;
-            height: 28px;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-        }
-        /* Enhanced Progress Section */
-        #imageToVideoApp .timeline-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 2.5rem;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        #imageToVideoApp .timeline-title {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            font-size: 1.4rem;
-            font-weight: 800;
-            color: var(--text-primary);
-        }
-        #imageToVideoApp .timeline-status {
-            padding: 8px 20px;
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            border: 2px solid var(--input-border);
-            border-radius: 25px;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
             font-weight: 700;
-            box-shadow: var(--shadow-sm);
-        }
-        #imageToVideoApp .film-timeline {
-            height: 12px;
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            border-radius: 6px;
-            overflow: hidden;
-            margin-bottom: 2rem;
-            box-shadow: var(--shadow-sm) inset;
-            border: 1px solid var(--input-border);
-        }
-        #imageToVideoApp .timeline-progress {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-primary) 50%, #667eea 100%);
-            transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-            border-radius: 6px;
-            box-shadow: 0 0 20px rgba(74, 108, 250, 0.4);
-            position: relative;
-        }
-        #imageToVideoApp .timeline-progress::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-            animation: progress-shine 2s ease-in-out infinite;
-        }
-        @keyframes progress-shine {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-        }
-        /* Enhanced Status Messages */
-        #imageToVideoApp .status-container {
-            max-height: 250px;
-            overflow-y: auto;
-            padding-left: 10px;
-        }
-        #imageToVideoApp .status-message {
-            padding: 16px 20px;
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            border-radius: var(--radius-input);
-            margin-bottom: 12px;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            animation: fadeIn 0.4s ease-out;
-            border-left: 4px solid var(--accent-primary);
-            box-shadow: var(--shadow-sm);
-            transition: var(--transition-smooth);
-        }
-        #imageToVideoApp .status-message:hover {
-            transform: translateX(-5px);
-            box-shadow: var(--shadow-md);
-        }
-        #imageToVideoApp .status-message.success {
-            border-left-color: var(--success-color);
-            background: linear-gradient(135deg, rgba(56, 161, 105, 0.1) 0%, rgba(56, 161, 105, 0.05) 100%);
-        }
-        #imageToVideoApp .status-message.error {
-            border-left-color: var(--danger-color);
-            background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.05) 100%);
-        }
-        #imageToVideoApp .status-icon {
-            width: 24px;
-            height: 24px;
-            flex-shrink: 0;
-        }
-        #imageToVideoApp .status-text {
-            font-size: 1rem;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-        /* Enhanced Video Output */
-        #imageToVideoApp .video-player {
-            position: relative;
-            width: 100%;
-            max-width: 900px;
-            margin: 0 auto;
-            border-radius: var(--radius-input);
-            overflow: hidden;
-            box-shadow:
-                0 20px 40px rgba(0, 0, 0, 0.2),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2);
-            border: 3px solid rgba(255, 255, 255, 0.3);
-        }
-        #imageToVideoApp #outputVideo {
-            width: 100%;
-            display: block;
-            background: #000;
-        }
-        #imageToVideoApp .video-controls {
-            display: flex;
-            justify-content: center;
-            gap: 2rem;
-            margin-top: 2.5rem;
-            flex-wrap: wrap;
-        }
-        #imageToVideoApp .video-button {
-            padding: 1rem 2rem;
-            border: none;
-            border-radius: var(--radius-btn);
-            font-size: 1.1rem;
-            font-weight: 700;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            transition: var(--transition-smooth);
-            font-family: var(--app-font);
-            position: relative;
-            overflow: hidden;
-        }
-        #imageToVideoApp .video-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.6s;
-        }
-        #imageToVideoApp .video-button:hover {
-            transform: translateY(-4px) scale(1.05);
-        }
-        #imageToVideoApp .video-button:hover::before {
-            left: 100%;
-        }
-        #imageToVideoApp .video-button.primary {
-            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
-            color: white;
-            box-shadow:
-                0 8px 20px rgba(74, 108, 250, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.3);
-        }
-        #imageToVideoApp .video-button.primary:hover {
-            box-shadow:
-                0 12px 28px rgba(74, 108, 250, 0.5),
-                inset 0 1px 0 rgba(255, 255, 255, 0.4);
-        }
-        #imageToVideoApp .video-button:not(.primary) {
-            background: linear-gradient(135deg, var(--input-bg) 0%, rgba(248, 250, 255, 0.8) 100%);
-            color: var(--text-secondary);
-            border: 2px solid var(--input-border);
-            box-shadow: var(--shadow-sm);
-        }
-        #imageToVideoApp .video-button:not(.primary):hover {
-            background: linear-gradient(135deg, #fff 0%, var(--input-bg) 100%);
             color: var(--text-primary);
-            box-shadow: var(--shadow-md);
-        }
-        /* Enhanced Error Panel */
-        #imageToVideoApp .error-panel {
-            background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.05) 100%);
-            border-color: rgba(229, 62, 62, 0.3);
-        }
-        #imageToVideoApp .error-header {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 2rem;
-            color: var(--danger-color);
-            font-size: 1.4rem;
-            font-weight: 800;
-        }
-        #imageToVideoApp .error-content {
-            color: var(--text-secondary);
-            line-height: 1.7;
-            margin-bottom: 2.5rem;
-            font-size: 1.1rem;
-        }
-        #imageToVideoApp .error-actions {
-            display: flex;
-            gap: 1.5rem;
-            flex-wrap: wrap;
-        }
-        /* Enhanced Loading Spinner */
-        #imageToVideoApp .spinner-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 3rem;
-        }
-        #imageToVideoApp .spinner {
-            width: 50px;
-            height: 50px;
-            margin-bottom: 2rem;
-        }
-        #imageToVideoApp .spinner-ring {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-            border: 4px solid var(--input-border);
-            border-top: 4px solid var(--accent-primary);
-            border-right: 4px solid var(--accent-secondary);
-            animation: spin 1s linear infinite;
-            box-shadow: 0 0 20px rgba(74, 108, 250, 0.3);
-        }
-        #imageToVideoApp .spinner-text {
-            color: var(--text-secondary);
-            font-size: 1.1rem;
-            text-align: center;
-            font-weight: 600;
-        }
-        /* Enhanced Responsive Design */
         @media (max-width: 768px) {
-            #imageToVideoApp .studio-title { font-size: 2.8rem; }
-            #imageToVideoApp .studio-container { padding: 20px 15px; }
-            #imageToVideoApp .studio-card,
-            #imageToVideoApp .timeline-container,
-            #imageToVideoApp .video-output-container,
-            #imageToVideoApp .error-panel { padding: 2rem; }
-            #imageToVideoApp .logo-icon { width: 60px; height: 60px; }
-            #imageToVideoApp .video-controls { gap: 1rem; }
-            #imageToVideoApp .video-button { padding: 0.8rem 1.5rem; font-size: 1rem; }
-        }
-        /* Additional Enhancements */
-        #imageToVideoApp .control-panel .studio-card:nth-child(1) {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(74, 108, 250, 0.02) 100%);
-        }
-        #imageToVideoApp .control-panel .studio-card:nth-child(2) {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(15, 212, 168, 0.02) 100%);
-        }
-        /* Scroll animations */
-        @media (prefers-reduced-motion: no-preference) {
-            #imageToVideoApp .studio-card {
-                animation: fadeIn 0.6s ease-out backwards;
-            }
-            #imageToVideoApp .control-panel .studio-card:nth-child(1) {
-                animation-delay: 0.2s;
-            }
-            #imageToVideoApp .control-panel .studio-card:nth-child(2) {
-                animation-delay: 0.4s;
-            }
         }
     </style>
 </head>
 <body>
-    <div id="imageToVideoApp">
-        <div class="studio-container">
-            <header class="studio-header">
-                <canvas id="neural-network-canvas"></canvas>
-                <div class="studio-logo">
-                    <div class="logo-icon">
-                        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <!-- Enhanced Video Camera Icon -->
-                            <circle cx="50" cy="50" r="48" stroke="url(#grad1)" stroke-width="2" fill="url(#radialGrad)" opacity="0.1"/>
-                            <circle cx="50" cy="50" r="38" stroke="url(#grad1)" stroke-width="2" opacity="0.2"/>
-                            <circle cx="50" cy="50" r="28" stroke="url(#grad1)" stroke-width="2" opacity="0.3"/>
-                            <!-- Camera Body -->
-                            <rect x="25" y="35" width="35" height="30" rx="4" fill="url(#grad1)" opacity="0.8"/>
-                            <!-- Lens -->
-                            <circle cx="42.5" cy="50" r="12" fill="url(#grad2)" opacity="0.9"/>
-                            <circle cx="42.5" cy="50" r="8" stroke="white" stroke-width="2" fill="none"/>
-                            <circle cx="42.5" cy="50" r="4" fill="white" opacity="0.8"/>
-                            <!-- Viewfinder -->
-                            <rect x="58" y="42" width="8" height="16" rx="2" fill="url(#grad1)" opacity="0.7"/>
-                            <!-- Film strip elements -->
-                            <rect x="68" y="30" width="4" height="6" rx="1" fill="url(#grad1)" opacity="0.6"/>
-                            <rect x="68" y="40" width="4" height="6" rx="1" fill="url(#grad1)" opacity="0.6"/>
-                            <rect x="68" y="50" width="4" height="6" rx="1" fill="url(#grad1)" opacity="0.6"/>
-                            <rect x="68" y="60" width="4" height="6" rx="1" fill="url(#grad1)" opacity="0.6"/>
-                            <rect x="68" y="70" width="4" height="6" rx="1" fill="url(#grad1)" opacity="0.6"/>
-                            <!-- Play button overlay -->
-                            <polygon points="75,45 85,50 75,55" fill="white" opacity="0.9"/>
-                            <defs>
-                                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" style="stop-color:#4A6CFA;stop-opacity:1" />
-                                    <stop offset="50%" style="stop-color:#667eea;stop-opacity:1" />
-                                    <stop offset="100%" style="stop-color:#0FD4A8;stop-opacity:1" />
-                                </linearGradient>
-                                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
-                                    <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
-                                </linearGradient>
-                                <radialGradient id="radialGrad" cx="50%" cy="50%" r="50%">
-                                    <stop offset="0%" style="stop-color:#4A6CFA;stop-opacity:0.3" />
-                                    <stop offset="100%" style="stop-color:#0FD4A8;stop-opacity:0.1" />
-                                </radialGradient>
-                            </defs>
-                        </svg>
                     </div>
-                    <h1 class="studio-title">AI Video Studio ✨</h1>
                 </div>
-                <p class="studio-subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
-            </header>
-            <div class="control-panel">
-                <div class="studio-card">
-                    <div class="section-header">
-                        <!-- Enhanced Image Upload Icon -->
-                        <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
-                            <polyline points="21,15 16,10 5,21"/>
-                            <path d="M14 8l4 4"/>
-                            <path d="M10 12l6-6"/>
-                        </svg>
-                        <span class="section-title">۱. تصویر ورودی</span>
-                    </div>
-                    <div class="upload-zone" id="image-drop-zone">
-                        <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" />
-                        <div class="upload-content">
-                             <div class="upload-icon-wrapper">
-                                <!-- Enhanced Upload Icon -->
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                                    <polyline points="17 8 12 3 7 8"></polyline>
-                                    <line x1="12" y1="3" x2="12" y2="15"></line>
-                                    <circle cx="12" cy="12" r="1" fill="currentColor"/>
-                                </svg>
-                            </div>
-                            <h3 class="upload-title">بارگذاری تصویر</h3>
-                            <p class="upload-subtitle">تصویر را بکشید یا برای انتخاب کلیک کنید<br>فرمت‌های پشتیبانی شده: JPG, PNG, WebP</p>
-                        </div>
-                        <img id="imagePreview" src="" alt="Preview" />
-                    </div>
                 </div>
-                <div class="studio-card">
-                    <div class="section-header">
-                        <!-- Enhanced Magic Wand Icon -->
-                        <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M15 4V2m0 20v-2m-4-11V7m0 14v-2m8-8h2M1 12h2m18.5-6.5-1.5 1.5M3.5 18.5 5 17m12.5 1.5L16 17M5 7l1.5 1.5"/>
-                            <circle cx="12" cy="12" r="3"/>
-                            <path d="m8 21 8-11-8-2-2 8z"/>
-                        </svg>
-                        <span class="section-title">۲. دستور جادویی ساخت</span>
                     </div>
-                    <div class="prompt-container">
-                        <textarea
-                            id="prompt"
-                            class="prompt-textarea"
-                            placeholder="نحوه حرکت دوربین، جزئیات انیمیشن و افکت‌های مورد نظر را توصیف کنید...
-مثال‌هایی از دستورات جذاب:
-• زوم آهسته به بیرون در حالی که برگ‌ها در باد می‌رقصند
-• حرکت سینمایی دوربین از چپ به راست با افکت پارالکس
-• نورپردازی طلایی غروب با سایه‌های نرم در حال تغییر
-• حرکت ملایم آب یا دود در پس‌زمینه"
-                        ></textarea>
                     </div>
-                    <button id="generateButton" class="generate-button">
-                        <!-- Enhanced Magic/Video Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polygon points="23 7 16 12 23 17 23 7"></polygon>
-                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
-                            <path d="M8 9l3 3-3 3"/>
-                        </svg>
-                        ساخت ویدیو جادویی ✨
-                    </button>
-                </div>
-            </div>
-            <div id="statusSection" class="timeline-container">
-                <div class="timeline-header">
-                    <div class="timeline-title">
-                        <!-- Enhanced Processing Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="3"/>
-                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-                        </svg>
-                        پردازش هوشمند ویدیو
                     </div>
-                    <div id="statusText" class="timeline-status">در حال پردازش جادویی...</div>
-                </div>
-                <div class="film-timeline">
-                    <div class="timeline-progress" id="progressBar" style="width: 0%"></div>
-                </div>
-                <div id="aiLoader" class="spinner-container" style="display: none;">
-                    <div class="spinner"><div class="spinner-ring"></div></div>
-                    <div id="aiLoaderText" class="spinner-text">هوش مصنوعی در حال ساخت شاهکار شما...</div>
-                </div>
-                <div id="statusMessages" class="status-container"></div>
-            </div>
-            <div id="outputSection" class="video-output-container">
-                 <div class="section-header" style="border-bottom:none; margin-bottom: 2rem;">
-                    <!-- Enhanced Result Icon -->
-                    <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
-                        <path d="M19 12H5"/>
-                        <circle cx="19" cy="12" r="2"/>
-                        <path d="M5 12V3l14 9"/>
-                    </svg>
-                     <span class="section-title">۳. شاهکار نهایی شما 🎬</span>
-                </div>
-                <div class="video-player">
-                    <video id="outputVideo" controls preload="metadata" playsinline></video>
-                </div>
-                <p id="finalSeed" style="text-align: center; color: var(--text-tertiary); margin-top: 2rem; font-weight: 500;"></p>
-                <div id="downloadLinkStatus" style="text-align: center; color: var(--text-secondary); margin-top: 1rem; font-weight: 500;"></div>
-                <div class="video-controls">
-                    <button id="btnDownloadVideo" class="video-button primary" style="display: none;">
-                        <!-- Enhanced Download Icon -->
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-                            <circle cx="12" cy="11" r="1" fill="white" opacity="0.8"/>
-                        </svg>
-                        دانلود شاهکار 🎬
-                    </button>
-                    <button id="btnRestart" class="video-button">
-                        <!-- Enhanced Restart Icon -->
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
-                        </svg>
-                        ساخت ویدیو جدید ✨
-                    </button>
-                </div>
-            </div>
-            <div id="criticalErrorSection" class="error-panel">
-                <div class="error-header">
-                    <!-- Enhanced Error Icon -->
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-                        <line x1="12" y1="9" x2="12" y2="13"/>
-                        <line x1="12" y1="17" x2="12.01" y2="17"/>
-                    </svg>
-                    <span>خطا در پردازش</span>
-                </div>
-                <div id="criticalErrorMessage" class="error-content"></div>
-                <div class="error-actions">
-                    <button id="btnCriticalErrorGoBack" class="video-button">بازگشت</button>
-                    <button id="btnCriticalErrorRetry" class="video-button primary">تلاش مجدد</button>
                 </div>
             </div>
-        </div>
     </div>
     <script>
         // Main Application Logic (Unchanged)
         (function() {
             // DOM Elements
-            const formContainer = document.querySelector('#imageToVideoApp .control-panel');
             const imageFileInput = document.getElementById('imageFile');
             const imagePreview = document.getElementById('imagePreview');
             const imageDropZone = document.getElementById('image-drop-zone');
@@ -1002,12 +283,10 @@
             const statusMessagesDiv = document.getElementById('statusMessages');
             const aiLoader = document.getElementById('aiLoader');
             const aiLoaderText = document.getElementById('aiLoaderText');
-            const progressBarContainer = document.getElementById('progressBarContainer');
             const progressBar = document.getElementById('progressBar');
             const outputSection = document.getElementById('outputSection');
             const btnRestart = document.getElementById('btnRestart');
             const btnDownloadVideo = document.getElementById('btnDownloadVideo');
-            const downloadLinkStatus = document.getElementById('downloadLinkStatus');
             // Constants
             const VIDEO_SPACE_URL_BASE = "https://lightricks-ltx-video-distilled.hf.space/gradio_api";
@@ -1038,22 +317,17 @@
             }
             function showCriticalError(message, isTranslationError = false) {
-                const titleElement = criticalErrorSection.querySelector('.error-header span');
                 lastErrorWasGpuQuota = false;
                 const lowerCaseMessage = message.toLowerCase();
                 if (lowerCaseMessage.includes("gpu") || lowerCaseMessage.includes("quota") || lowerCaseMessage.includes("exceeded") || lowerCaseMessage.includes("limit")) {
-                    criticalErrorMessage.innerHTML = `<strong>راهنمای رفع محدودیت GPU</strong><p>برای رفع محدودیت:</p><ul><li>فیلترشکن را خاموش کنید</li><li>حالت هواپیما را فعال و غیرفعال کنید</li><li>دکمه تلاش مجدد را بزنید</li></ul>`;
-                    if (titleElement) titleElement.textContent = 'محدودیت GPU';
                     lastErrorWasGpuQuota = true;
                 } else {
                     criticalErrorMessage.innerHTML = `<p>${message}</p>`;
-                    if (titleElement) {
-                        titleElement.textContent = isTranslationError ? 'خطای ترجمه' : 'خطای پردازش';
-                    }
                 }
                 criticalErrorSection.classList.add('active');
                 statusSection.classList.remove('active');
                 outputSection.classList.remove('active');
@@ -1075,6 +349,7 @@
                 }
                 if (type === 'error' && !isPersistent) isPersistent = true;
                 statusSection.classList.add('active');
                 const messageDiv = document.createElement('div');
                 messageDiv.className = `status-message ${type}`;
@@ -1089,7 +364,6 @@
                 statusMessagesDiv.insertBefore(messageDiv, statusMessagesDiv.firstChild);
                 statusMessagesDiv.scrollTop = 0;
             }
             function clearStatusMessages() {
@@ -1102,7 +376,6 @@
                 }
                 outputVideo.src = '';
                 finalSeedElement.textContent = '';
-                downloadLinkStatus.textContent = '';
                 btnDownloadVideo.style.display = 'none';
             }
@@ -1121,8 +394,8 @@
             }
             function initializeForm() {
-                formContainer.style.opacity = '1';
                 hideCriticalError();
                 statusSection.classList.remove('active');
                 outputSection.classList.remove('active');
                 clearStatusMessages();
@@ -1153,7 +426,7 @@
                 };
                 if (aiLoader.style.display !== 'none') {
-                    setAiLoaderText("در حال ترجمه پرامپت شما...");
                 }
                 try {
@@ -1162,7 +435,7 @@
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(payload)
                     });
-                    if (!joinResponse.ok) throw new Error(`خطای اتصال به صف مترجم: ${joinResponse.status}`);
                     const joinData = await joinResponse.json();
                     if (!joinData.event_id) throw new Error("پاسخ نامعتبر از سرور مترجم.");
@@ -1281,7 +554,6 @@
                                     outputSection.classList.add('active');
                                     outputVideo.src = ltxVideoUrl;
                                     outputVideo.load();
-                                    outputVideo.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                     finalSeedElement.textContent = data.output.data[1] ? `Seed: ${data.output.data[1]}` : '';
                                     prepareCustomDownloadLink(ltxVideoUrl);
                                 }, 300);
@@ -1303,7 +575,6 @@
             }
             async function prepareCustomDownloadLink(ltxVideoUrl) {
-                downloadLinkStatus.textContent = 'آماده‌سازی لینک دانلود...';
                 btnDownloadVideo.style.display = 'none';
                 btnDownloadVideo.onclick = null;
                 try {
@@ -1320,7 +591,6 @@
                     }
                     const uploadData = await uploadResponse.json();
                     if (uploadData.success && uploadData.url) {
-                        downloadLinkStatus.textContent = '';
                         btnDownloadVideo.style.display = 'flex';
                         btnDownloadVideo.onclick = () => window.open(uploadData.url, '_blank');
                     } else {
@@ -1328,15 +598,13 @@
                     }
                 } catch (error) {
                     console.error("خطا در تهیه لینک دانلود:", error);
-                    downloadLinkStatus.textContent = `خطا در ساخت لینک دانلود.`;
-                    btnDownloadVideo.style.display = 'none';
                 }
             }
             // Event Listeners
             document.addEventListener('DOMContentLoaded', initializeForm);
-            // *** FIX: UPLOAD FUNCTIONALITY ***
             imageDropZone.addEventListener('click', () => imageFileInput.click());
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 imageDropZone.addEventListener(eventName, e => {
@@ -1364,15 +632,8 @@
                 }
             });
-            btnRestart.addEventListener('click', () => {
-                outputSection.classList.remove('active');
-                hideCriticalError();
-                initializeForm();
-            });
-            btnCriticalErrorGoBack.addEventListener('click', () => {
-                hideCriticalError();
-            });
             btnCriticalErrorRetry.addEventListener('click', async () => {
                 if (lastAttemptedVideoPayload) {
@@ -1480,12 +741,11 @@
                 clearStatusMessages();
                 hideCriticalError();
                 generateButton.disabled = true;
                 statusSection.classList.add('active');
                 aiLoader.style.display = 'flex';
                 outputSection.classList.remove('active');
-                // Calculate dimensions
                 const [ratioW_str, ratioH_str] = autoSelectedAspectRatio.split(':');
                 const ratioW = parseFloat(ratioW_str);
                 const ratioH = parseFloat(ratioH_str);
@@ -1529,87 +789,22 @@
     </script>
     <script>
-        // Enhanced Header Animation Script
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
-            if (!canvas) return;
             const header = canvas.parentElement;
             const ctx = canvas.getContext('2d');
             let particles = [];
-            const particleCount = 25;
-            const maxDistance = 120;
             const computedStyles = getComputedStyle(document.documentElement);
-            const particleColor = '#4A6CFA';
-            const lineColor = '#667eea';
-            function resizeCanvas() {
-                canvas.width = header.clientWidth;
-                canvas.height = header.clientHeight;
-                init();
-            }
-            class Particle {
-                constructor() {
-                    this.x = Math.random() * canvas.width;
-                    this.y = Math.random() * canvas.height;
-                    this.vx = (Math.random() - 0.5) * 0.4;
-                    this.vy = (Math.random() - 0.5) * 0.4;
-                    this.radius = Math.random() * 2 + 1;
-                    this.opacity = Math.random() * 0.6 + 0.4;
-                }
-                update() {
-                    this.x += this.vx;
-                    this.y += this.vy;
-                    if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
-                    if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
-                }
-                draw() {
-                    ctx.beginPath();
-                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                    ctx.fillStyle = `rgba(74, 108, 250, ${this.opacity})`;
-                    ctx.fill();
-                }
-            }
-            function init() {
-                particles = [];
-                for (let i = 0; i < particleCount; i++) {
-                    particles.push(new Particle());
-                }
-            }
-            function connectParticles() {
-                for (let i = 0; i < particles.length; i++) {
-                    for (let j = i + 1; j < particles.length; j++) {
-                        const dx = particles[i].x - particles[j].x;
-                        const dy = particles[i].y - particles[j].y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-                        if (distance < maxDistance) {
-                            ctx.beginPath();
-                            ctx.moveTo(particles[i].x, particles[i].y);
-                            ctx.lineTo(particles[j].x, particles[j].y);
-                            const opacity = (1 - distance / maxDistance) * 0.3;
-                            ctx.strokeStyle = `rgba(102, 126, 234, ${opacity})`;
-                            ctx.lineWidth = 0.5;
-                            ctx.stroke();
-                        }
-                    }
-                }
-            }
-            function animate() {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                particles.forEach(particle => {
-                    particle.update();
-                    particle.draw();
-                });
-                connectParticles();
-                requestAnimationFrame(animate);
-            }
-            window.addEventListener('resize', resizeCanvas);
-            resizeCanvas();
-            animate();
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Video Studio ✨</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
+        :root {
             --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #F8F9FC;
             --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
             --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --text-tertiary: #8A94A6;
             --accent-primary: #4A6CFA;
             --accent-primary-hover: #3553D6;
             --accent-primary-glow: rgba(74, 108, 250, 0.25);
             --accent-secondary: #0FD4A8;
+            --success-color: #38A169;
             --danger-color: #e53e3e;
             --danger-color-hover: #c53030;
+            --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+            --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            --radius-card: 24px;
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         body {
+            font-family: var(--app-font);
+            background-color: var(--app-bg);
+            color: var(--text-primary);
             margin: 0;
+            padding: 2.5rem 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
         }
+        .container { max-width: 820px; width: 100%; }
+        header {
             position: relative;
             text-align: center;
+            margin-bottom: 2.5rem;
+            padding: 2rem 0;
             animation: fadeIn 0.8s 0.1s ease-out backwards;
             overflow: hidden;
         }
         #neural-network-canvas {
             position: absolute;
             top: 0;
             width: 100%;
             height: 100%;
             z-index: 1;
         }
+        h1, .subtitle {
             position: relative;
             z-index: 2;
         }
+        h1 {
+            font-size: 2.8rem;
+            font-weight: 800;
+            margin: 0 0 0.8rem 0;
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
         }
+        .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; }
+        main {
             padding: 3rem;
+            background-color: var(--panel-bg);
             border-radius: var(--radius-card);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--panel-border);
+            animation: fadeIn 0.8s 0.3s ease-out backwards;
         }
+        .form-group { margin-bottom: 2.5rem; }
+        .form-group:last-child { margin-bottom: 0; }
+        .form-label {
             display: flex;
             align-items: center;
+            gap: 0.75rem;
             font-weight: 700;
             color: var(--text-primary);
+            font-size: 1.2em;
+            margin-bottom: 1.2rem;
+        }
+        .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
+        #image-drop-zone {
+            position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2.5rem; text-align: center;
+            cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); min-height: 200px; display: flex;
+            flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
+        }
+        #image-drop-zone.drag-over, #image-drop-zone:hover:not(.has-image) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); }
+        #image-drop-zone.has-image { border-style: solid; border-color: var(--success-color); padding: 0; cursor: default; }
+        .upload-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+        .upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
+        #image-drop-zone p { margin: 0; color: var(--text-secondary); font-weight: 500; }
+        #imagePreview { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; }
+        #image-drop-zone.has-image .upload-content { display: none; }
+        #image-drop-zone.has-image #imagePreview { display: block; }
+        textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; }
+        textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
+        #generateButton {
+            display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.1rem;
+            font-size: 1.2rem; font-weight: 700; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease;
+            box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px rgba(15, 212, 168, 0.25); margin-top: 1.5rem;
+        }
+        #generateButton svg { width: 24px; height: 24px; margin-left: 4px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
+        #generateButton:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px rgba(15, 212, 168, 0.3); }
+        #generateButton:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; }
+        /* Result Container & Children */
+        #result-container { min-height: 250px; position: relative; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        #result-container.active { border-style: solid; border-color: var(--panel-border); }
+        #statusSection, #outputSection, #criticalErrorSection { display: none; width: 100%; }
+        #statusSection.active, #outputSection.active, #criticalErrorSection.active { display: block; animation: fadeIn 0.5s; }
+        /* Progress Bar Styling */
+        .film-timeline { height: 8px; background: var(--panel-border); border-radius: 4px; overflow: hidden; margin: 1rem 0; }
+        #progressBar { height: 100%; background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); transition: width 0.4s ease; border-radius: 4px; }
+        /* Status Messages Styling */
+        #statusMessages { max-height: 150px; overflow-y: auto; width: 100%; padding: 0.5rem; }
+        .status-message {
+            display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem;
+            margin-bottom: 0.5rem; border-radius: var(--radius-input); font-size: 0.9rem;
+            background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-secondary);
+        }
+        .status-message.success { border-left: 4px solid var(--success-color); color: var(--success-color); }
+        .status-message.error { border-left: 4px solid var(--danger-color); color: var(--danger-color); }
+        .status-icon { width: 18px; height: 18px; }
+        /* AI Loader Spinner */
+        #aiLoader { align-items: center; justify-content: center; padding: 2rem 0; }
+        #aiLoader .spinner { width: 32px; height: 32px; border: 4px solid var(--input-border); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; }
+        #aiLoaderText { margin-top: 1rem; color: var(--text-secondary); font-weight: 500; }
+        /* Video Output Styling */
+        #outputVideo { width: 100%; max-width: 500px; border-radius: var(--radius-input); margin: 1rem auto; display: block; background-color: #000; box-shadow: var(--shadow-md); }
+        #finalSeed { text-align: center; color: var(--text-tertiary); font-size: 0.85rem; margin-top: 1rem; }
+        .video-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
+        .video-button {
+            padding: 0.7rem 1.5rem; border-radius: var(--radius-btn); border: none; cursor: pointer; font-family: var(--app-font);
+            font-weight: 600; font-size: 1rem; transition: var(--transition-smooth); display: flex; align-items: center; gap: 0.5rem;
+        }
+        .video-button.primary { background-color: var(--accent-primary); color: white; }
+        .video-button.primary:hover { background-color: var(--accent-primary-hover); transform: translateY(-2px); }
+        .video-button:not(.primary) { background-color: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
+        .video-button:not(.primary):hover { background-color: var(--panel-border); color: var(--text-primary); }
+        /* Error Panel Styling */
+        #criticalErrorSection { text-align: center; padding: 1.5rem; }
+        #criticalErrorMessage { color: var(--danger-color); font-weight: 500; margin-bottom: 1.5rem; line-height: 1.6; }
         @media (max-width: 768px) {
+            main { padding: 1.5rem; } h1 { font-size: 2.2rem; }
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <header>
+            <canvas id="neural-network-canvas"></canvas>
+            <h1>استودیو ویدیو هوش مصنوعی ✨</h1>
+            <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
+        </header>
+        <main>
+             <div class="form-group">
+                <div class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
+                    ۱. تصویر خود را انتخاب کنید
+                </div>
+                <div id="image-drop-zone">
+                    <div class="upload-content">
+                        <div class="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
+                        <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p>
                     </div>
+                    <img id="imagePreview" src="" alt="Preview">
                 </div>
+                <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" hidden>
+            </div>
+            <div class="form-group">
+                <label for="prompt" class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                    ۲. دستور ساخت ویدیو را بنویسید
+                </label>
+                <textarea id="prompt" rows="4" placeholder="مثال: زوم آهسته به بیرون در حالی که برگ‌ها در باد می‌رقصند و نور خورشید از بین درختان می‌تابد"></textarea>
+                <button id="generateButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg>
+                    <span>ساخت ویدیو جادویی</span>
+                </button>
+            </div>
+            <div class="form-group">
+                 <div class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
+                     ۳. نتیجه را ببینید
                 </div>
+                <div id="result-container">
+                    <div id="statusSection">
+                        <div id="statusMessages"></div>
+                        <div class="film-timeline">
+                            <div id="progressBar" style="width: 0%"></div>
+                        </div>
+                        <div id="aiLoader" style="display: none;">
+                            <div class="spinner"></div>
+                            <div id="aiLoaderText">هوش مصنوعی در حال ساخت شاهکار شما...</div>
+                        </div>
                     </div>
+                    <div id="outputSection">
+                        <video id="outputVideo" controls preload="metadata" playsinline></video>
+                        <p id="finalSeed"></p>
+                        <div class="video-controls">
+                             <button id="btnDownloadVideo" class="video-button primary" style="display: none;">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+                                دانلود شاهکار
+                            </button>
+                            <button id="btnRestart" class="video-button">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+                                ساخت ویدیو جدید
+                            </button>
+                        </div>
                     </div>
+                    <div id="criticalErrorSection">
+                        <div id="criticalErrorMessage"></div>
+                        <div class="video-controls">
+                            <button id="btnCriticalErrorGoBack" class="video-button">بازگشت</button>
+                            <button id="btnCriticalErrorRetry" class="video-button primary">تلاش مجدد</button>
+                        </div>
                     </div>
                 </div>
             </div>
+        </main>
     </div>
     <script>
         // Main Application Logic (Unchanged)
         (function() {
             // DOM Elements
+            const resultContainer = document.getElementById('result-container');
             const imageFileInput = document.getElementById('imageFile');
             const imagePreview = document.getElementById('imagePreview');
             const imageDropZone = document.getElementById('image-drop-zone');
             const statusMessagesDiv = document.getElementById('statusMessages');
             const aiLoader = document.getElementById('aiLoader');
             const aiLoaderText = document.getElementById('aiLoaderText');
             const progressBar = document.getElementById('progressBar');
             const outputSection = document.getElementById('outputSection');
             const btnRestart = document.getElementById('btnRestart');
             const btnDownloadVideo = document.getElementById('btnDownloadVideo');
             // Constants
             const VIDEO_SPACE_URL_BASE = "https://lightricks-ltx-video-distilled.hf.space/gradio_api";
             }
             function showCriticalError(message, isTranslationError = false) {
                 lastErrorWasGpuQuota = false;
                 const lowerCaseMessage = message.toLowerCase();
                 if (lowerCaseMessage.includes("gpu") || lowerCaseMessage.includes("quota") || lowerCaseMessage.includes("exceeded") || lowerCaseMessage.includes("limit")) {
+                    criticalErrorMessage.innerHTML = `<strong>ظرفیت سرور تکمیل است.</strong><p>برای رفع مشکل، فیلترشکن را خاموش و روشن کرده و دوباره تلاش کنید.</p>`;
                     lastErrorWasGpuQuota = true;
                 } else {
                     criticalErrorMessage.innerHTML = `<p>${message}</p>`;
                 }
+                resultContainer.classList.add('active');
                 criticalErrorSection.classList.add('active');
                 statusSection.classList.remove('active');
                 outputSection.classList.remove('active');
                 }
                 if (type === 'error' && !isPersistent) isPersistent = true;
+                resultContainer.classList.add('active');
                 statusSection.classList.add('active');
                 const messageDiv = document.createElement('div');
                 messageDiv.className = `status-message ${type}`;
                 statusMessagesDiv.insertBefore(messageDiv, statusMessagesDiv.firstChild);
                 statusMessagesDiv.scrollTop = 0;
             }
             function clearStatusMessages() {
                 }
                 outputVideo.src = '';
                 finalSeedElement.textContent = '';
                 btnDownloadVideo.style.display = 'none';
             }
             }
             function initializeForm() {
                 hideCriticalError();
+                resultContainer.classList.remove('active');
                 statusSection.classList.remove('active');
                 outputSection.classList.remove('active');
                 clearStatusMessages();
                 };
                 if (aiLoader.style.display !== 'none') {
+                    setAiLoaderText("در حال ترجمه دستور شما...");
                 }
                 try {
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(payload)
                     });
+                    if (!joinResponse.ok) throw new Error(`خطای اتصال به سرور مترجم: ${joinResponse.status}`);
                     const joinData = await joinResponse.json();
                     if (!joinData.event_id) throw new Error("پاسخ نامعتبر از سرور مترجم.");
                                     outputSection.classList.add('active');
                                     outputVideo.src = ltxVideoUrl;
                                     outputVideo.load();
                                     finalSeedElement.textContent = data.output.data[1] ? `Seed: ${data.output.data[1]}` : '';
                                     prepareCustomDownloadLink(ltxVideoUrl);
                                 }, 300);
             }
             async function prepareCustomDownloadLink(ltxVideoUrl) {
                 btnDownloadVideo.style.display = 'none';
                 btnDownloadVideo.onclick = null;
                 try {
                     }
                     const uploadData = await uploadResponse.json();
                     if (uploadData.success && uploadData.url) {
                         btnDownloadVideo.style.display = 'flex';
                         btnDownloadVideo.onclick = () => window.open(uploadData.url, '_blank');
                     } else {
                     }
                 } catch (error) {
                     console.error("خطا در تهیه لینک دانلود:", error);
+                    addStatusMessage('خطا در ساخت لینک دانلود.', 'error');
                 }
             }
             // Event Listeners
             document.addEventListener('DOMContentLoaded', initializeForm);
             imageDropZone.addEventListener('click', () => imageFileInput.click());
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 imageDropZone.addEventListener(eventName, e => {
                 }
             });
+            btnRestart.addEventListener('click', initializeForm);
+            btnCriticalErrorGoBack.addEventListener('click', hideCriticalError);
             btnCriticalErrorRetry.addEventListener('click', async () => {
                 if (lastAttemptedVideoPayload) {
                 clearStatusMessages();
                 hideCriticalError();
                 generateButton.disabled = true;
+                resultContainer.classList.add('active');
                 statusSection.classList.add('active');
                 aiLoader.style.display = 'flex';
                 outputSection.classList.remove('active');
                 const [ratioW_str, ratioH_str] = autoSelectedAspectRatio.split(':');
                 const ratioW = parseFloat(ratioW_str);
                 const ratioH = parseFloat(ratioH_str);
     </script>
     <script>
+        // --- Header Animation Script (From Photoshop Template) ---
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
             const header = canvas.parentElement;
             const ctx = canvas.getContext('2d');
             let particles = [];
+            const particleCount = 20; const maxDistance = 100;
             const computedStyles = getComputedStyle(document.documentElement);
+            const particleColor = computedStyles.getPropertyValue('--accent-primary').trim();
+            const lineColor = computedStyles.getPropertyValue('--text-tertiary').trim();
+            function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); }
+            class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
+            function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } }
+            function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
+            function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); }
+            window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate();
         });
     </script>
 </body>