fix for the flutter build cache invalidation issue

build.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+# Script to build Flutter web app with cache busting
+
+echo "🔨 Building Flutter web app..."
+flutter build web --release
+
+# for debugging, use:
+#flutter build web --profile
+
+# Check if the build was successful
+if [ $? -ne 0 ]; then
+  echo "❌ Flutter build failed!"
+  exit 1
+fi
+
+# Generate timestamp
+TIMESTAMP=$(date +%s)
+
+# Replace BUILD_TIMESTAMP in index.html with the current timestamp
+echo "📝 Adding build timestamp ($TIMESTAMP) for cache busting..."
+sed -i.bak "s/BUILD_TIMESTAMP/$TIMESTAMP/g" build/web/index.html
+rm build/web/index.html.bak
+
+echo "✅ Flutter build complete!"
+echo "🚀 Next step: commit build/web and push to Hugging Face!"

build/web/flutter_bootstrap.js

@@ -39,6 +39,6 @@ _flutter.buildConfig = {"engineRevision":"382be0028d370607f76215a9be322e5514b263
 
 _flutter.loader.load({
   serviceWorkerSettings: {
-    serviceWorkerVersion: "1819633575"
+    serviceWorkerVersion: "3290901739"
   }
 });

build/web/flutter_service_worker.js

@@ -3,10 +3,10 @@ const MANIFEST = 'flutter-app-manifest';
 const TEMP = 'flutter-temp-cache';
 const CACHE_NAME = 'flutter-app-cache';
 
-const RESOURCES = {"flutter_bootstrap.js": "f0b6c27a0f6bac054555f105232f0c00",
+const RESOURCES = {"flutter_bootstrap.js": "686bf9adc2191f4cc346994463a17a56",
 "version.json": "b5eaae4fc120710a3c35125322173615",
-"index.html": "f34c56fffc6b38f62412a5db2315dec8",
-"/": "f34c56fffc6b38f62412a5db2315dec8",
+"index.html": "cd2094e3989e3eb0424e47d7d188c298",
+"/": "cd2094e3989e3eb0424e47d7d188c298",
 "main.dart.js": "4e26b37ccf9ca902db38fe5292263609",
 "flutter.js": "83d881c1dbb6d6bcd6b42e274605b69c",
 "aitube.svg": "26140ba0d153b213b122bc6ebcc17f6c",

build/web/index.html

@@ -18,21 +18,172 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="AI-powered video generation platform">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="aitube2">
+  <meta name="apple-mobile-web-app-title" content="AITube">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>aitube2</title>
+  <title>AITube</title>
   <link rel="manifest" href="manifest.json">
+  
+  <style>
+    html, body {
+      background-color: #1a1a1a;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+    
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+    }
+    
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #1a1a1a;
+      z-index: 1000;
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+    
+    .logo-container {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    
+    .logo {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: shake 1.2s infinite ease-in-out;
+      transform-origin: bottom center;
+    }
+    
+    .loading-text {
+      color: #ffffff;
+      font-size: 20px;
+      margin-bottom: 16px;
+      font-weight: 500;
+    }
+    
+    @keyframes shake {
+      0%, 100% {
+        transform: translateX(0) rotate(0deg);
+      }
+      10% {
+        transform: translateX(-5px) rotate(-10deg);
+      }
+      20% {
+        transform: translateX(5px) rotate(10deg);
+      }
+      30% {
+        transform: translateX(-5px) rotate(-10deg);
+      }
+      40% {
+        transform: translateX(5px) rotate(10deg);
+      }
+      50% {
+        transform: translateX(0) rotate(0deg);
+      }
+      /* Pause between 50% and 100% */
+    }
+    
+    #flutter-target {
+      display: none;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  </style>
 </head>
 <body>
-  <script src="flutter_bootstrap.js" async></script>
+  <div id="flutter-target"></div>
+  
+  <div class="loading-container" id="loading">
+    <div class="logo-container">
+      <img src="aitube.svg" alt="AITube Logo" class="logo">
+    </div>
+    <div class="loading-text">Loading AITube...</div>
+  </div>
+
+  <script>
+    // Hide loading screen once Flutter app is ready
+    window.addEventListener('flutter-first-frame', function() {
+      var loading = document.getElementById('loading');
+      var flutterTarget = document.getElementById('flutter-target');
+      
+      // Fade out loading screen
+      loading.style.opacity = '0';
+      loading.style.transition = 'opacity 0.5s ease';
+      
+      // Show Flutter app
+      flutterTarget.style.display = 'block';
+      
+      // Remove loading completely after transition
+      setTimeout(function() {
+        loading.style.display = 'none';
+      }, 500);
+    });
+  </script>
+  
+  <!-- Add version parameter for cache busting -->
+  <script src="flutter_bootstrap.js?v=1746632609" async></script>
+  
+  <!-- Add cache busting script -->
+  <script>
+    // Check for app updates on each load
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.ready.then(function(registration) {
+          // Check for updates every time the page loads
+          registration.update();
+          
+          // Listen for updates
+          registration.addEventListener('updatefound', function() {
+            // New service worker found
+            const newWorker = registration.installing;
+            
+            newWorker.addEventListener('statechange', function() {
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                // New content is available, prompt user to refresh
+                if (confirm('A new version is available. Reload now?')) {
+                  window.location.reload();
+                }
+              }
+            });
+          });
+        });
+      });
+    }
+  </script>
 </body>
 </html>

lib/models/video_orientation.dart

@@ -0,0 +1,37 @@
+// lib/models/video_orientation.dart
+
+/// Enum representing the orientation of a video clip.
+enum VideoOrientation {
+  /// Landscape orientation (horizontal, typically 16:9)
+  landscape,
+  
+  /// Portrait orientation (vertical, typically 9:16)
+  portrait
+}
+
+/// Extension methods for VideoOrientation enum
+extension VideoOrientationExtension on VideoOrientation {
+  /// Get the string representation of the orientation
+  String get name {
+    switch (this) {
+      case VideoOrientation.landscape:
+        return 'landscape';
+      case VideoOrientation.portrait:
+        return 'portrait';
+    }
+  }
+  
+  /// Get the orientation from a string
+  static VideoOrientation fromString(String? str) {
+    if (str?.toLowerCase() == 'portrait') {
+      return VideoOrientation.portrait;
+    }
+    return VideoOrientation.landscape; // Default to landscape
+  }
+  
+  /// Whether this orientation is portrait
+  bool get isPortrait => this == VideoOrientation.portrait;
+  
+  /// Whether this orientation is landscape
+  bool get isLandscape => this == VideoOrientation.landscape;
+}

web/index.html

@@ -18,21 +18,172 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="AI-powered video generation platform">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="aitube2">
+  <meta name="apple-mobile-web-app-title" content="AITube">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>aitube2</title>
+  <title>AITube</title>
   <link rel="manifest" href="manifest.json">
+  
+  <style>
+    html, body {
+      background-color: #1a1a1a;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+    
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+    }
+    
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #1a1a1a;
+      z-index: 1000;
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+    
+    .logo-container {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    
+    .logo {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: shake 1.2s infinite ease-in-out;
+      transform-origin: bottom center;
+    }
+    
+    .loading-text {
+      color: #ffffff;
+      font-size: 20px;
+      margin-bottom: 16px;
+      font-weight: 500;
+    }
+    
+    @keyframes shake {
+      0%, 100% {
+        transform: translateX(0) rotate(0deg);
+      }
+      10% {
+        transform: translateX(-5px) rotate(-10deg);
+      }
+      20% {
+        transform: translateX(5px) rotate(10deg);
+      }
+      30% {
+        transform: translateX(-5px) rotate(-10deg);
+      }
+      40% {
+        transform: translateX(5px) rotate(10deg);
+      }
+      50% {
+        transform: translateX(0) rotate(0deg);
+      }
+      /* Pause between 50% and 100% */
+    }
+    
+    #flutter-target {
+      display: none;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  </style>
 </head>
 <body>
-  <script src="flutter_bootstrap.js" async></script>
+  <div id="flutter-target"></div>
+  
+  <div class="loading-container" id="loading">
+    <div class="logo-container">
+      <img src="aitube.svg" alt="AITube Logo" class="logo">
+    </div>
+    <div class="loading-text">Loading AITube...</div>
+  </div>
+
+  <script>
+    // Hide loading screen once Flutter app is ready
+    window.addEventListener('flutter-first-frame', function() {
+      var loading = document.getElementById('loading');
+      var flutterTarget = document.getElementById('flutter-target');
+      
+      // Fade out loading screen
+      loading.style.opacity = '0';
+      loading.style.transition = 'opacity 0.5s ease';
+      
+      // Show Flutter app
+      flutterTarget.style.display = 'block';
+      
+      // Remove loading completely after transition
+      setTimeout(function() {
+        loading.style.display = 'none';
+      }, 500);
+    });
+  </script>
+  
+  <!-- Add version parameter for cache busting -->
+  <script src="flutter_bootstrap.js?v=BUILD_TIMESTAMP" async></script>
+  
+  <!-- Add cache busting script -->
+  <script>
+    // Check for app updates on each load
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.ready.then(function(registration) {
+          // Check for updates every time the page loads
+          registration.update();
+          
+          // Listen for updates
+          registration.addEventListener('updatefound', function() {
+            // New service worker found
+            const newWorker = registration.installing;
+            
+            newWorker.addEventListener('statechange', function() {
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                // New content is available, prompt user to refresh
+                if (confirm('A new version is available. Reload now?')) {
+                  window.location.reload();
+                }
+              }
+            });
+          });
+        });
+      });
+    }
+  </script>
 </body>
 </html>