protection against gpu skimmers, free-compute scammers and other grifters

api.py

@@ -296,6 +296,10 @@ async def status_handler(request: web.Request) -> web.Response:
         'active_endpoints': sum(1 for ep in endpoint_statuses if not ep['busy'] and ('error_until' not in ep or ep['error_until'] < time.time()))
     })
 
+# Dictionary to track connected anonymous clients by IP address
+anon_connections = {}
+anon_connection_lock = asyncio.Lock()
+
 async def websocket_handler(request: web.Request) -> web.WebSocketResponse:
     # Check if maintenance mode is enabled
     if MAINTENANCE_MODE:
@@ -321,6 +325,32 @@ async def websocket_handler(request: web.Request) -> web.WebSocketResponse:
     user_role = await api.validate_user_token(hf_token)
     logger.info(f"User connected with role: {user_role}")
     
+    # Get client IP address
+    peername = request.transport.get_extra_info('peername')
+    if peername is not None:
+        client_ip = peername[0]
+    else:
+        client_ip = request.headers.get('X-Forwarded-For', 'unknown').split(',')[0].strip()
+    
+    logger.info(f"Client connecting from IP: {client_ip} with role: {user_role}")
+    
+    # Check for anonymous user connection limits
+    if user_role == 'anon':
+        async with anon_connection_lock:
+            # Check if this IP already has a connection
+            if client_ip in anon_connections and anon_connections[client_ip] > 0:
+                # Return an error for anonymous users with multiple connections
+                return web.json_response({
+                    'error': 'Anonymous user limit exceeded',
+                    'message': 'Anonymous users can enjoy 1 stream per IP address. If you are on a shared IP please enter your HF token, thank you!',
+                    'errorType': 'anon_limit_exceeded'
+                }, status=429)  # 429 Too Many Requests
+            
+            # Track this connection
+            anon_connections[client_ip] = anon_connections.get(client_ip, 0) + 1
+            # Store the IP so we can clean up later
+            ws.client_ip = client_ip
+    
     # Store the user role in the websocket
     ws.user_role = user_role
 
@@ -372,6 +402,16 @@ async def websocket_handler(request: web.Request) -> web.WebSocketResponse:
             await asyncio.gather(*background_tasks, return_exceptions=True)
         except asyncio.CancelledError:
             pass
+        
+        # Cleanup anonymous connection tracking
+        if getattr(ws, 'user_role', None) == 'anon' and hasattr(ws, 'client_ip'):
+            client_ip = ws.client_ip
+            async with anon_connection_lock:
+                if client_ip in anon_connections:
+                    anon_connections[client_ip] = max(0, anon_connections[client_ip] - 1)
+                    if anon_connections[client_ip] == 0:
+                        del anon_connections[client_ip]
+                    logger.info(f"Anonymous connection from {client_ip} closed. Remaining: {anon_connections.get(client_ip, 0)}")
     
     return ws
 

api_config.py

@@ -56,12 +56,9 @@ CONFIG_FOR_ANONYMOUS_USERS = {
     # anons can only watch 2 minutes per video
     "max_rendering_time_per_client_per_video_in_sec": 2 * 60,
 
-    "max_buffer_size": 2,
-    "max_concurrent_generations": 2,
-
     "min_num_inference_steps": 2,
     "default_num_inference_steps": 3,
-    "max_num_inference_steps": 4,
+    "max_num_inference_steps": 3,
 
     "min_num_frames": 9, # 8 + 1
     "default_max_num_frames": 65, # 8*8 + 1
@@ -92,81 +89,73 @@ CONFIG_FOR_ANONYMOUS_USERS = {
 CONFIG_FOR_STANDARD_HF_USERS = {
     "max_rendering_time_per_client_per_video_in_sec": 15 * 60,
 
-    "max_buffer_size": 2,
-    "max_concurrent_generations": 2,
-
     "min_num_inference_steps": 2,
     "default_num_inference_steps": 4,
-    "max_num_inference_steps": 6,
+    "max_num_inference_steps": 4,
     
     "min_num_frames": 9, # 8 + 1
     "default_num_frames": 65, # 8*8 + 1
-    "max_num_frames": 65, # 8*8 + 1
+    "max_num_frames": 65,
 
     "min_clip_duration_seconds": 1,
     "default_clip_duration_seconds": 2,
     "max_clip_duration_seconds": 2,
 
-    "min_clip_playback_speed": 0.7,
-    "default_clip_playback_speed": 0.8,
-    "max_clip_playback_speed": 0.8,
+    "min_clip_playback_speed": 0.65,
+    "default_clip_playback_speed": 0.65,
+    "max_clip_playback_speed": 0.65,
 
     "min_clip_framerate": 8,
     "default_clip_framerate": 25,
     "max_clip_framerate": 25,
 
     "min_clip_width": 544,
-    "default_clip_width": 640,
-    "max_clip_width": 640,
+    "default_clip_width": 768, # 640,
+    "max_clip_width": 768, # 640,
 
     "min_clip_height": 320,
-    "default_clip_height": 416,
-    "max_clip_height": 416,
+    "default_clip_height": 480, # 416,
+    "max_clip_height": 480, # 416,
 }
 
 # Hugging Face users with a Pro may enjoy an improved experience
 CONFIG_FOR_PRO_HF_USERS = {
     "max_rendering_time_per_client_per_video_in_sec": 20 * 60,
 
-    "max_buffer_size": 2,
-    "max_concurrent_generations": 2,
-    
     "min_num_inference_steps": 2,
-    "max_num_inference_steps": 8,
-
+    "default_num_inference_steps": 4,
+    "max_num_inference_steps": 4,
+    
     "min_num_frames": 9, # 8 + 1
-    "default_num_frames": 97, # (8*12) + 1
-    "max_num_frames": 97, # (8*12) + 1
+    "default_num_frames": 65, # 8*8 + 1
+    "max_num_frames": 65,
 
-    "min_clip_duration_seconds": 1, 
+    "min_clip_duration_seconds": 1,
     "default_clip_duration_seconds": 2,
-    "max_clip_duration_seconds": 3,
+    "max_clip_duration_seconds": 2,
 
-    "min_clip_playback_speed": 0.7,
-    "default_clip_playback_speed": 0.8,
-    "max_clip_playback_speed": 0.8,
+    "min_clip_playback_speed": 0.65,
+    "default_clip_playback_speed": 0.65,
+    "max_clip_playback_speed": 0.65,
 
     "min_clip_framerate": 8,
     "default_clip_framerate": 25,
-    "max_clip_framerate": 30,
+    "max_clip_framerate": 25,
 
     "min_clip_width": 544,
-    "default_clip_width": 768,
-    "max_clip_width": 768,
+    "default_clip_width": 768, # 640,
+    "max_clip_width": 768, # 640,
 
     "min_clip_height": 320,
-    "default_clip_height": 480,
-    "max_clip_height": 480,
+    "default_clip_height": 480, # 416,
+    "max_clip_height": 480, # 416,
 }
 
 CONFIG_FOR_ADMIN_HF_USERS = {
     "max_rendering_time_per_client_per_video_in_sec": 60 * 60,
 
-    "max_buffer_size": 2,
-    "max_concurrent_generations": 2,
-    
     "min_num_inference_steps": 2,
-    "default_num_inference_steps": 4,
+    "default_num_inference_steps": 6,
     "max_num_inference_steps": 8,
 
     "min_num_frames": 9, # 8 + 1

api_core.py

@@ -296,14 +296,21 @@ class VideoGenerationAPI:
 
     async def search_video(self, query: str, search_count: int = 0, attempt_count: int = 0) -> Optional[dict]:
         """Generate a single search result using HF text generation"""
-        prompt = f"""# Instruction
-Your response MUST be a YAML object containing a title, description, and tags, consistent with what we can find on a video sharing platform.
-Format your YAML response with only those fields: "title" (a short string), "description" (string caption of the scene), and "tags" (array of 3 to 4 strings). Do not add any other field.
-In the description field, describe in a very synthetic way the visuals of the first shot (first scene), eg "<STYLE>, medium close-up shot, high angle view of a <AGE>yo <GENDER> <CHARACTERS> <ACTIONS>, <LOCATION> <LIGHTING> <WEATHER>". Keep it minimalist but still descriptive, don't use bullets points, use simple words, go to the essential to describe style (cinematic, documentary footage, 3D rendering..), camera modes and angles, characters, age, gender, action, location, lighting, country, costume, time, weather, textures, color palette.. etc. 
+        # Maximum number of attempts to generate a description without placeholder tags
+        max_attempts = 2
+        current_attempt = attempt_count
+        temperature = 0.75  # Initial temperature
+
+        while current_attempt <= max_attempts:
+            prompt = f"""# Instruction
+Your response MUST be a YAML object containing a title and description, consistent with what we can find on a video sharing platform.
+Format your YAML response with only those fields: "title" (a short string) and "description" (string caption of the scene). Do not add any other field.
+In the description field, describe in a very synthetic way the visuals of the first shot (first scene), eg "<STYLE>, medium close-up shot, high angle view of a <AGE>yo <GENDER> <CHARACTERS> <ACTIONS>, <LOCATION> <LIGHTING> <WEATHER>". This is just an example! you MUST replace the <TAGS>!!. Don't forget to replace <STYLE> etc, by the actual fields!! Keep it minimalist but still descriptive, don't use bullets points, use simple words, go to the essential to describe style (cinematic, documentary footage, 3D rendering..), camera modes and angles, characters, age, gender, action, location, lighting, country, costume, time, weather, textures, color palette.. etc.
+The most import part is to describe the actions and movements in the scene, so don't forget that!
 Make the result unique and different from previous search results. ONLY RETURN YAML AND WITH ENGLISH CONTENT, NOT CHINESE - DO NOT ADD ANY OTHER COMMENT!
 
 # Context
-This is attempt {attempt_count} at generating search result number {search_count}.
+This is attempt {current_attempt} at generating search result number {search_count}.
 
 # Input
 Describe the first scene/shot for: "{query}".
@@ -313,74 +320,102 @@ Describe the first scene/shot for: "{query}".
 ```yaml
 title: \""""
 
-        try:
-            print(f"search_video(): calling self.inference_client.text_generation({prompt}, model={TEXT_MODEL}, max_new_tokens=300, temperature=0.65)")
-            response = await asyncio.get_event_loop().run_in_executor(
-                None,
-                lambda: self.inference_client.text_generation(
-                    prompt,
-                    model=TEXT_MODEL,
-                    max_new_tokens=330,
-                    temperature=0.6
+            try:
+                print(f"search_video(): calling self.inference_client.text_generation({prompt}, model={TEXT_MODEL}, max_new_tokens=150, temperature={temperature})")
+                response = await asyncio.get_event_loop().run_in_executor(
+                    None,
+                    lambda: self.inference_client.text_generation(
+                        prompt,
+                        model=TEXT_MODEL,
+                        max_new_tokens=150,
+                        temperature=temperature
+                    )
                 )
-            )
 
-            #print("response: ", response)
-
-            response_text = re.sub(r'^\s*\.\s*\n', '', f"title: \"{response.strip()}")
-            sanitized_yaml = sanitize_yaml_response(response_text)
-            
-            try:
-                result = yaml.safe_load(sanitized_yaml)
-            except yaml.YAMLError as e:
-                logger.error(f"YAML parsing failed: {str(e)}")
-                result = None
-            
-            if not result or not isinstance(result, dict):
-                logger.error(f"Invalid result format: {result}")
-                return None
-
-            # Extract fields with defaults
-            title = str(result.get('title', '')).strip() or 'Untitled Video'
-            description = str(result.get('description', '')).strip() or 'No description available'
-            tags = result.get('tags', [])
-            
-            # Ensure tags is a list of strings
-            if not isinstance(tags, list):
-                tags = []
-            tags = [str(t).strip() for t in tags if t and isinstance(t, (str, int, float))]
+                response_text = re.sub(r'^\s*\.\s*\n', '', f"title: \"{response.strip()}")
+                sanitized_yaml = sanitize_yaml_response(response_text)
+                
+                try:
+                    result = yaml.safe_load(sanitized_yaml)
+                except yaml.YAMLError as e:
+                    logger.error(f"YAML parsing failed: {str(e)}")
+                    result = None
+                
+                if not result or not isinstance(result, dict):
+                    logger.error(f"Invalid result format: {result}")
+                    current_attempt += 1
+                    temperature = 0.7  # Try with different temperature on next attempt
+                    continue
+
+                # Extract fields with defaults
+                title = str(result.get('title', '')).strip() or 'Untitled Video'
+                description = str(result.get('description', '')).strip() or 'No description available'
+                
+                # Check if the description still contains placeholder tags like <LOCATION>, <GENDER>, etc.
+                if re.search(r'<[A-Z_]+>', description):
+                    logger.warning(f"Description still contains placeholder tags: {description}")
+                    if current_attempt < max_attempts:
+                        # Try again with a higher temperature
+                        current_attempt += 1
+                        temperature = 0.7
+                        continue
+                    else:
+                        # If we've reached max attempts, use the title as description
+                        description = title
+                
+                # legacy system of tags -- I've decided to to generate them anymore to save some speed
+                tags = result.get('tags', [])
+                
+                # Ensure tags is a list of strings
+                if not isinstance(tags, list):
+                    tags = []
+                tags = [str(t).strip() for t in tags if t and isinstance(t, (str, int, float))]
 
-            # Generate thumbnail
-            #print(f"calling self.generate_thumbnail({title}, {description})")
-            try:
-                #thumbnail = await self.generate_thumbnail(title, description)
-                raise ValueError("thumbnail generation is too buggy and slow right now")
-            except Exception as e:
-                logger.error(f"Thumbnail generation failed: {str(e)}")
-                thumbnail = ""
+                # Generate thumbnail
+                try:
+                    #thumbnail = await self.generate_thumbnail(title, description)
+                    raise ValueError("thumbnail generation is too buggy and slow right now")
+                except Exception as e:
+                    logger.error(f"Thumbnail generation failed: {str(e)}")
+                    thumbnail = ""
 
-            print("got response thumbnail")
-            # Return valid result with all required fields
-            return {
-                'id': str(uuid.uuid4()),
-                'title': title,
-                'description': description,
-                'thumbnailUrl': thumbnail,
-                'videoUrl': '',
+                print("got response thumbnail")
+                # Return valid result with all required fields
+                return {
+                    'id': str(uuid.uuid4()),
+                    'title': title,
+                    'description': description,
+                    'thumbnailUrl': thumbnail,
+                    'videoUrl': '',
 
-                # not really used yet, maybe one day if we pre-generate or store content
-                'isLatent': True,
+                    # not really used yet, maybe one day if we pre-generate or store content
+                    'isLatent': True,
 
-                'useFixedSeed': "webcam" in description.lower(),
+                    'useFixedSeed': "webcam" in description.lower(),
 
-                'seed': generate_seed(),
-                'views': 0,
-                'tags': tags
-            }
+                    'seed': generate_seed(),
+                    'views': 0,
+                    'tags': tags
+                }
 
-        except Exception as e:
-            logger.error(f"Search video generation failed: {str(e)}")
-            return None
+            except Exception as e:
+                logger.error(f"Search video generation failed: {str(e)}")
+                current_attempt += 1
+                temperature = 0.7  # Try with different temperature on next attempt
+        
+        # If all attempts failed, return a simple result with title only
+        return {
+            'id': str(uuid.uuid4()),
+            'title': f"Video about {query}",
+            'description': f"Video about {query}",
+            'thumbnailUrl': "",
+            'videoUrl': '',
+            'isLatent': True,
+            'useFixedSeed': False,
+            'seed': generate_seed(),
+            'views': 0,
+            'tags': []
+        }
 
     async def generate_thumbnail(self, title: str, description: str) -> str:
         """Generate thumbnail using HF image generation"""
@@ -652,7 +687,7 @@ Your caption:"""
                 # Consider 17 or 18 to be visually lossless or nearly so;
                 # it should look the same or nearly the same as the input but it isn't technically lossless.
                 # The range is exponential, so increasing the CRF value +6 results in roughly half the bitrate / file size, while -6 leads to roughly twice the bitrate.
-                #"quality": 18,
+                "quality": 23,
 
             }
         }

build/web/assets/assets/config/aitube_low.yaml

@@ -7,10 +7,10 @@ render_queue:
   buffer_size: 3
 
   # how many requests for clips can be run in parallel
-  max_concurrent_generations: 2
+  max_concurrent_generations: 3
 
   # start playback as soon as we have 1 video over 3 (25%)
-  minimum_buffer_percent_to_start_playback: 20
+  minimum_buffer_percent_to_start_playback: 5
 
 video:
 
@@ -19,7 +19,7 @@ video:
   transition_buffer_duration_ms: 300
 
   # how long a generated clip should be, in Duration
-  original_clip_duration_seconds: 4
+  original_clip_duration_seconds: 3
 
   # The model works on resolutions that are divisible by 32
   # and number of frames that are divisible by 8 + 1 (e.g. 257).

build/web/flutter_bootstrap.js

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

build/web/flutter_service_worker.js

@@ -3,11 +3,11 @@ const MANIFEST = 'flutter-app-manifest';
 const TEMP = 'flutter-temp-cache';
 const CACHE_NAME = 'flutter-app-cache';
 
-const RESOURCES = {"flutter_bootstrap.js": "87126968851498701a21880e28da0cfc",
+const RESOURCES = {"flutter_bootstrap.js": "c93f6411e1218a720bdf1a024b693aa2",
 "version.json": "b5eaae4fc120710a3c35125322173615",
 "index.html": "f34c56fffc6b38f62412a5db2315dec8",
 "/": "f34c56fffc6b38f62412a5db2315dec8",
-"main.dart.js": "6906a64b0fc86e1254324745be115bab",
+"main.dart.js": "006fa064c19ba19242dda13fb6745d69",
 "flutter.js": "83d881c1dbb6d6bcd6b42e274605b69c",
 "favicon.png": "5dcef449791fa27946b3d35ad8803796",
 "icons/Icon-192.png": "ac9a721a12bbc803b44f645561ecb1e1",
@@ -22,12 +22,12 @@ const RESOURCES = {"flutter_bootstrap.js": "87126968851498701a21880e28da0cfc",
 "assets/packages/cupertino_icons/assets/CupertinoIcons.ttf": "33b7d9392238c04c131b6ce224e13711",
 "assets/shaders/ink_sparkle.frag": "ecc85a2e95f5e9f53123dcaf8cb9b6ce",
 "assets/AssetManifest.bin": "5894fe5676e62dc22403a833f2313e43",
-"assets/fonts/MaterialIcons-Regular.otf": "f7c7cc97f118137db94cf3e17143bf62",
+"assets/fonts/MaterialIcons-Regular.otf": "5dbbac66f1ff997124c876ea5f0a049d",
 "assets/assets/config/private.yaml": "97a9ec367206bea5dce64faf94b66332",
 "assets/assets/config/README.md": "07a87720dd00dd1ca98c9d6884440e31",
 "assets/assets/config/aitube_high.yaml": "c030f221344557ecf05aeef30f224502",
 "assets/assets/config/default.yaml": "e98187e5a53a8b0d8bf2c5cd9dd0a365",
-"assets/assets/config/aitube_low.yaml": "45750c9b2982d06eff21bd302ed0f8c4",
+"assets/assets/config/aitube_low.yaml": "c8f3c74fd45676ea6402c9fcfc1292f3",
 "canvaskit/skwasm.js": "ea559890a088fe28b4ddf70e17e60052",
 "canvaskit/skwasm.js.symbols": "9fe690d47b904d72c7d020bd303adf16",
 "canvaskit/canvaskit.js.symbols": "27361387bc24144b46a745f1afe92b50",

lib/screens/home_screen.dart

@@ -10,6 +10,7 @@ import 'package:aitube2/screens/settings_screen.dart';
 import 'package:aitube2/models/video_result.dart';
 import 'package:aitube2/services/websocket_api_service.dart';
 import 'package:aitube2/services/cache_service.dart';
+import 'package:aitube2/services/settings_service.dart';
 import 'package:aitube2/widgets/video_card.dart';
 import 'package:aitube2/widgets/search_box.dart';
 import 'package:aitube2/theme/colors.dart';
@@ -36,9 +37,28 @@ class _HomeScreenState extends State<HomeScreen> {
   StreamSubscription? _searchSubscription;
   static const int maxResults = 4;
 
+  // Subscription for limit status
+  StreamSubscription? _anonLimitSubscription;
+  StreamSubscription? _deviceLimitSubscription;
+
   @override
   void initState() {
     super.initState();
+    
+    // Listen for changes to anonymous limit status
+    _anonLimitSubscription = _websocketService.anonLimitStream.listen((exceeded) {
+      if (exceeded && mounted) {
+        _showAnonLimitExceededDialog();
+      }
+    });
+    
+    // Listen for changes to device limit status (for VIP users on web)
+    _deviceLimitSubscription = _websocketService.deviceLimitStream.listen((exceeded) {
+      if (exceeded && mounted) {
+        _showDeviceLimitExceededDialog();
+      }
+    });
+    
     _initializeWebSocket();
     _setupSearchListener();
     
@@ -107,6 +127,14 @@ class _HomeScreenState extends State<HomeScreen> {
   Future<void> _initializeWebSocket() async {
     try {
       await _websocketService.connect();
+      
+      // Check if anonymous limit is exceeded
+      if (_websocketService.isAnonLimitExceeded) {
+        if (mounted) {
+          _showAnonLimitExceededDialog();
+        }
+        return;
+      }
     } catch (e) {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
@@ -122,6 +150,155 @@ class _HomeScreenState extends State<HomeScreen> {
       }
     }
   }
+  
+  void _showAnonLimitExceededDialog() async {
+    // Create a controller outside the dialog for easier access
+    final TextEditingController controller = TextEditingController();
+    
+    final settings = await showDialog<String>(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext dialogContext) {
+        bool obscureText = true;
+        
+        return StatefulBuilder(
+          builder: (context, setState) {
+            return AlertDialog(
+              title: const Text(
+                'Connection Limit Reached',
+                style: TextStyle(
+                  color: AiTubeColors.onBackground,
+                  fontSize: 20,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              content: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    _websocketService.anonLimitMessage.isNotEmpty
+                      ? _websocketService.anonLimitMessage
+                      : 'Anonymous users can enjoy 1 stream per IP address. If you are on a shared IP please enter your HF token, thank you!',
+                    style: const TextStyle(color: AiTubeColors.onSurface),
+                  ),
+                  const SizedBox(height: 16),
+                  const Text(
+                    'Enter your HuggingFace API token to continue:',
+                    style: TextStyle(color: AiTubeColors.onSurface),
+                  ),
+                  const SizedBox(height: 8),
+                  TextField(
+                    controller: controller,
+                    obscureText: obscureText,
+                    decoration: InputDecoration(
+                      labelText: 'API Key',
+                      labelStyle: const TextStyle(color: AiTubeColors.onSurfaceVariant),
+                      suffixIcon: IconButton(
+                        icon: Icon(
+                          obscureText ? Icons.visibility : Icons.visibility_off,
+                          color: AiTubeColors.onSurfaceVariant,
+                        ),
+                        onPressed: () => setState(() => obscureText = !obscureText),
+                      ),
+                    ),
+                    onSubmitted: (value) {
+                      Navigator.pop(dialogContext, value);
+                    },
+                  ),
+                ],
+              ),
+              backgroundColor: AiTubeColors.surface,
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.pop(dialogContext),
+                  child: const Text(
+                    'Cancel',
+                    style: TextStyle(color: AiTubeColors.onSurfaceVariant),
+                  ),
+                ),
+                FilledButton(
+                  onPressed: () => Navigator.pop(dialogContext, controller.text),
+                  style: FilledButton.styleFrom(
+                    backgroundColor: AiTubeColors.primary,
+                  ),
+                  child: const Text('Save'),
+                ),
+              ],
+            );
+          }
+        );
+      },
+    );
+    
+    // Clean up the controller
+    controller.dispose();
+    
+    // If user provided an API key, save it and retry connection
+    if (settings != null && settings.isNotEmpty) {
+      // Save the API key
+      final settingsService = SettingsService();
+      await settingsService.setHuggingfaceApiKey(settings);
+      
+      // Retry connection
+      if (mounted) {
+        _initializeWebSocket();
+      }
+    }
+  }
+  
+  void _showDeviceLimitExceededDialog() async {
+    await showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext dialogContext) {
+        return AlertDialog(
+          title: const Text(
+            'Too Many Connections',
+            style: TextStyle(
+              color: AiTubeColors.onBackground,
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          content: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                _websocketService.deviceLimitMessage,
+                style: const TextStyle(color: AiTubeColors.onSurface),
+              ),
+              const SizedBox(height: 16),
+              const Text(
+                'Please close some of your other browser tabs running AiTube to continue.',
+                style: TextStyle(color: AiTubeColors.onSurface),
+              ),
+            ],
+          ),
+          backgroundColor: AiTubeColors.surface,
+          actions: [
+            FilledButton(
+              onPressed: () {
+                Navigator.pop(dialogContext);
+                
+                // Try to reconnect after dialog is closed
+                if (mounted) {
+                  Future.delayed(const Duration(seconds: 1), () {
+                    _initializeWebSocket();
+                  });
+                }
+              },
+              style: FilledButton.styleFrom(
+                backgroundColor: AiTubeColors.primary,
+              ),
+              child: const Text('Try Again'),
+            ),
+          ],
+        );
+      },
+    );
+  }
 
   Widget _buildConnectionStatus() {
     return StreamBuilder<ConnectionStatus>(
@@ -357,6 +534,8 @@ class _HomeScreenState extends State<HomeScreen> {
   @override
   void dispose() {
     _searchSubscription?.cancel();
+    _anonLimitSubscription?.cancel();
+    _deviceLimitSubscription?.cancel();
     _searchController.dispose();
     _websocketService.dispose();
     super.dispose();

lib/screens/video_screen.dart

@@ -1,4 +1,6 @@
 // lib/screens/video_screen.dart
+import 'dart:async';
+
 import 'package:aitube2/widgets/chat_widget.dart';
 import 'package:aitube2/widgets/search_box.dart';
 import 'package:aitube2/widgets/web_utils.dart';
@@ -8,6 +10,7 @@ import '../config/config.dart';
 import '../models/video_result.dart';
 import '../services/websocket_api_service.dart';
 import '../services/cache_service.dart';
+import '../services/settings_service.dart';
 import '../theme/colors.dart';
 import '../widgets/video_player_widget.dart';
 
@@ -32,12 +35,31 @@ class _VideoScreenState extends State<VideoScreen> {
   final _searchController = TextEditingController();
   bool _isSearching = false;
 
+  // Subscription for limit statuses
+  StreamSubscription? _anonLimitSubscription;
+  StreamSubscription? _deviceLimitSubscription;
+
   @override
   void initState() {
     super.initState();
     _videoData = widget.video;
     _searchController.text = _videoData.title;
     _websocketService.addSubscriber(widget.video.id);
+    
+    // Listen for changes to anonymous limit status
+    _anonLimitSubscription = _websocketService.anonLimitStream.listen((exceeded) {
+      if (exceeded && mounted) {
+        _showAnonLimitExceededDialog();
+      }
+    });
+    
+    // Listen for changes to device limit status (for VIP users on web)
+    _deviceLimitSubscription = _websocketService.deviceLimitStream.listen((exceeded) {
+      if (exceeded && mounted) {
+        _showDeviceLimitExceededDialog();
+      }
+    });
+    
     _initializeConnection();
     _loadCachedThumbnail();
   }
@@ -54,6 +76,15 @@ class _VideoScreenState extends State<VideoScreen> {
   Future<void> _initializeConnection() async {
     try {
       await _websocketService.connect();
+      
+      // Check if anonymous limit is exceeded
+      if (_websocketService.isAnonLimitExceeded) {
+        if (mounted) {
+          _showAnonLimitExceededDialog();
+        }
+        return;
+      }
+      
       if (mounted) {
         setState(() {
           _isConnected = true;
@@ -75,6 +106,155 @@ class _VideoScreenState extends State<VideoScreen> {
       }
     }
   }
+  
+  void _showAnonLimitExceededDialog() async {
+    // Create a controller outside the dialog for easier access
+    final TextEditingController controller = TextEditingController();
+    
+    final settings = await showDialog<String>(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext dialogContext) {
+        bool obscureText = true;
+        
+        return StatefulBuilder(
+          builder: (context, setState) {
+            return AlertDialog(
+              title: const Text(
+                'Connection Limit Reached',
+                style: TextStyle(
+                  color: AiTubeColors.onBackground,
+                  fontSize: 20,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              content: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    _websocketService.anonLimitMessage.isNotEmpty
+                      ? _websocketService.anonLimitMessage
+                      : 'Anonymous users can enjoy 1 stream per IP address. If you are on a shared IP please enter your HF token, thank you!',
+                    style: const TextStyle(color: AiTubeColors.onSurface),
+                  ),
+                  const SizedBox(height: 16),
+                  const Text(
+                    'Enter your HuggingFace API token to continue:',
+                    style: TextStyle(color: AiTubeColors.onSurface),
+                  ),
+                  const SizedBox(height: 8),
+                  TextField(
+                    controller: controller,
+                    obscureText: obscureText,
+                    decoration: InputDecoration(
+                      labelText: 'API Key',
+                      labelStyle: const TextStyle(color: AiTubeColors.onSurfaceVariant),
+                      suffixIcon: IconButton(
+                        icon: Icon(
+                          obscureText ? Icons.visibility : Icons.visibility_off,
+                          color: AiTubeColors.onSurfaceVariant,
+                        ),
+                        onPressed: () => setState(() => obscureText = !obscureText),
+                      ),
+                    ),
+                    onSubmitted: (value) {
+                      Navigator.pop(dialogContext, value);
+                    },
+                  ),
+                ],
+              ),
+              backgroundColor: AiTubeColors.surface,
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.pop(dialogContext),
+                  child: const Text(
+                    'Cancel',
+                    style: TextStyle(color: AiTubeColors.onSurfaceVariant),
+                  ),
+                ),
+                FilledButton(
+                  onPressed: () => Navigator.pop(dialogContext, controller.text),
+                  style: FilledButton.styleFrom(
+                    backgroundColor: AiTubeColors.primary,
+                  ),
+                  child: const Text('Save'),
+                ),
+              ],
+            );
+          }
+        );
+      },
+    );
+    
+    // Clean up the controller
+    controller.dispose();
+    
+    // If user provided an API key, save it and retry connection
+    if (settings != null && settings.isNotEmpty) {
+      // Save the API key
+      final settingsService = SettingsService();
+      await settingsService.setHuggingfaceApiKey(settings);
+      
+      // Retry connection
+      if (mounted) {
+        _initializeConnection();
+      }
+    }
+  }
+  
+  void _showDeviceLimitExceededDialog() async {
+    await showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext dialogContext) {
+        return AlertDialog(
+          title: const Text(
+            'Too Many Connections',
+            style: TextStyle(
+              color: AiTubeColors.onBackground,
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          content: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                _websocketService.deviceLimitMessage,
+                style: const TextStyle(color: AiTubeColors.onSurface),
+              ),
+              const SizedBox(height: 16),
+              const Text(
+                'Please close some of your other browser tabs running AiTube to continue.',
+                style: TextStyle(color: AiTubeColors.onSurface),
+              ),
+            ],
+          ),
+          backgroundColor: AiTubeColors.surface,
+          actions: [
+            FilledButton(
+              onPressed: () {
+                Navigator.pop(dialogContext);
+                
+                // Try to reconnect after dialog is closed
+                if (mounted) {
+                  Future.delayed(const Duration(seconds: 1), () {
+                    _initializeConnection();
+                  });
+                }
+              },
+              style: FilledButton.styleFrom(
+                backgroundColor: AiTubeColors.primary,
+              ),
+              child: const Text('Try Again'),
+            ),
+          ],
+        );
+      },
+    );
+  }
 
   Future<String> _generateCaption() async {
     if (!_isConnected) {
@@ -146,7 +326,7 @@ class _VideoScreenState extends State<VideoScreen> {
           appBar: AppBar(
             titleSpacing: 0,
             title: Padding(
-              padding: const EdgeInsets.only(right: 8),
+              padding: const EdgeInsets.all(8),
               child: SearchBox(
                 controller: _searchController,
                 isSearching: _isSearching,
@@ -293,6 +473,8 @@ class _VideoScreenState extends State<VideoScreen> {
     
     // Cleanup other resources
     _searchController.dispose();
+    _anonLimitSubscription?.cancel();
+    _deviceLimitSubscription?.cancel();
     super.dispose();
   }
 

lib/services/{null_html.dart → html_stub.dart}

@@ -1,15 +1,47 @@
-/// Null implementation for html when not on web platform
-/// This file is imported conditionally when not running on web
+/// Stub implementation for dart:html when not on web platform
+/// This file is imported when dart.library.html is not available
 
 class Window {
   final Document document = Document();
   final History history = History();
   final Location location = Location();
+  final Storage localStorage = Storage();
   
   Stream<dynamic> get onBeforeUnload => 
       Stream.fromIterable([]).asBroadcastStream();
 }
 
+class Storage {
+  final Map<String, String> _storage = {};
+  
+  String? operator [](String key) => _storage[key];
+  
+  void operator []=(String key, String value) {
+    _storage[key] = value;
+  }
+  
+  void clear() {
+    _storage.clear();
+  }
+  
+  void removeItem(String key) {
+    _storage.remove(key);
+  }
+  
+  String? getItem(String key) => _storage[key];
+  
+  void setItem(String key, String value) {
+    _storage[key] = value;
+  }
+  
+  int get length => _storage.length;
+  
+  String key(int index) {
+    if (index < 0 || index >= _storage.length) return '';
+    return _storage.keys.elementAt(index);
+  }
+}
+
 class Document {
   String get visibilityState => 'visible';
   
@@ -25,8 +57,12 @@ class History {
 
 class Location {
   String get href => '';
+  String get host => '';
+  String get hostname => '';
+  String get protocol => '';
+  String get search => '';
+  String get pathname => '';
 }
 
 // Exported instances
-final Window window = Window();
-final Document document = Document();
+final Window window = Window();

lib/services/websocket_api_service.dart

@@ -5,6 +5,8 @@ import 'package:http/http.dart' as http;
 import 'package:aitube2/services/settings_service.dart';
 import 'package:synchronized/synchronized.dart';
 import 'dart:convert';
+// Conditionally import html for web platform with proper handling
+import 'html_stub.dart' if (dart.library.html) 'dart:html' as html;
 import 'package:aitube2/config/config.dart';
 import 'package:aitube2/models/chat_message.dart';
 import 'package:flutter/foundation.dart';
@@ -142,8 +144,20 @@ class WebSocketApiService {
     
     try {
       await connect();
-      // Request user role after connection
-      await _requestUserRole();
+      
+      try {
+        // Request user role after connection
+        await _requestUserRole();
+      } catch (e) {
+        // Handle the case where we fail to get user role due to device connection limit
+        if (e.toString().contains('Device connection limit exceeded')) {
+          // We've already set the appropriate status, just return
+          return;
+        }
+        // Otherwise rethrow
+        rethrow;
+      }
+      
       _initialized = true;
     } catch (e) {
       debugPrint('Failed to initialize WebSocketApiService: $e');
@@ -165,17 +179,201 @@ class WebSocketApiService {
         _userRole = response['user_role'] as String;
         _userRoleController.add(_userRole);
         debugPrint('WebSocketApiService: User role set to $_userRole');
+        
+        // Now that we know the role, check device connection limit for non-anonymous users
+        if (kIsWeb && _userRole != 'anon') {
+          final connectionAllowed = _checkAndRegisterDeviceConnection();
+          if (!connectionAllowed) {
+            _isDeviceLimitExceeded = true;
+            _deviceLimitController.add(true);
+            _setStatus(ConnectionStatus.error);
+            throw Exception('Device connection limit exceeded');
+          }
+        }
       }
     } catch (e) {
       debugPrint('WebSocketApiService: Failed to get user role: $e');
+      rethrow;
     }
   }
 
+  // New status for anonymous users exceeding connection limit
+  bool _isAnonLimitExceeded = false;
+  bool get isAnonLimitExceeded => _isAnonLimitExceeded;
+  
+  // Status for VIP users exceeding device connection limit (web only)
+  bool _isDeviceLimitExceeded = false;
+  bool get isDeviceLimitExceeded => _isDeviceLimitExceeded;
+  
+  // Message to display when anonymous limit is exceeded
+  String _anonLimitMessage = '';
+  String get anonLimitMessage => _anonLimitMessage;
+  
+  // Message to display when device limit is exceeded
+  String _deviceLimitMessage = 'Too many connections from this device. Please close other tabs running AiTube.';
+  String get deviceLimitMessage => _deviceLimitMessage;
+  
+  // Stream to notify listeners when anonymous limit status changes
+  final _anonLimitController = StreamController<bool>.broadcast();
+  Stream<bool> get anonLimitStream => _anonLimitController.stream;
+  
+  // Stream to notify listeners when device limit status changes
+  final _deviceLimitController = StreamController<bool>.broadcast();
+  Stream<bool> get deviceLimitStream => _deviceLimitController.stream;
+  
+  // Constants for device connection limits
+  static const String _connectionCountKey = 'aitube_connection_count';
+  static const String _connectionIdKey = 'aitube_connection_id';
+  static const int _maxDeviceConnections = 3; // Maximum number of tabs/connections per device
+  static const Duration _connectionHeartbeatInterval = Duration(seconds: 10);
+  Timer? _connectionHeartbeatTimer;
+  String? _connectionId;
+  
+  // Function to check and register device connection (web only)
+  bool _checkAndRegisterDeviceConnection() {
+    if (!kIsWeb) return true; // Only apply on web platform
+    
+    try {
+      // Generate a unique ID for this connection instance
+      if (_connectionId == null) {
+        _connectionId = const Uuid().v4();
+        
+        // Store connection ID in localStorage
+        html.window.localStorage[_connectionIdKey] = _connectionId!;
+      }
+      
+      // Get current connection count from localStorage
+      final countJson = html.window.localStorage[_connectionCountKey];
+      Map<String, dynamic> connections = {};
+      
+      if (countJson != null && countJson.isNotEmpty) {
+        try {
+          connections = json.decode(countJson) as Map<String, dynamic>;
+        } catch (e) {
+          debugPrint('Error parsing connection count: $e');
+          connections = {};
+        }
+      }
+      
+      // Clean up stale connections (older than 30 seconds)
+      final now = DateTime.now().millisecondsSinceEpoch;
+      connections.removeWhere((key, value) {
+        if (value is! int) return true;
+        return now - value > 30000; // 30 seconds timeout
+      });
+      
+      // Add/update this connection
+      connections[_connectionId!] = now;
+      
+      // Store back to localStorage
+      html.window.localStorage[_connectionCountKey] = json.encode(connections);
+      
+      // Check if we're exceeding the limit, but only for non-anonymous users
+      // For anonymous users, we rely on the server-side IP check
+      if (_userRole != 'anon' && connections.length > _maxDeviceConnections) {
+        debugPrint('Device connection limit exceeded: ${connections.length} connections for ${_userRole} user');
+        return false;
+      }
+      
+      return true;
+    } catch (e) {
+      debugPrint('Error checking device connections: $e');
+      return true; // Default to allowing connection on error
+    }
+  }
+  
+  // Function to update the connection heartbeat
+  void _updateConnectionHeartbeat() {
+    if (!kIsWeb || _connectionId == null) return;
+    
+    try {
+      // Get current connection count
+      final countJson = html.window.localStorage[_connectionCountKey];
+      Map<String, dynamic> connections = {};
+      
+      if (countJson != null && countJson.isNotEmpty) {
+        try {
+          connections = json.decode(countJson) as Map<String, dynamic>;
+        } catch (e) {
+          debugPrint('Error parsing connection count: $e');
+          connections = {};
+        }
+      }
+      
+      // Update timestamp for this connection
+      final now = DateTime.now().millisecondsSinceEpoch;
+      connections[_connectionId!] = now;
+      
+      // Store back to localStorage
+      html.window.localStorage[_connectionCountKey] = json.encode(connections);
+    } catch (e) {
+      debugPrint('Error updating connection heartbeat: $e');
+    }
+  }
+  
+  // Function to unregister this connection
+  void _unregisterDeviceConnection() {
+    if (!kIsWeb || _connectionId == null) return;
+    
+    try {
+      // Get current connection count
+      final countJson = html.window.localStorage[_connectionCountKey];
+      Map<String, dynamic> connections = {};
+      
+      if (countJson != null && countJson.isNotEmpty) {
+        try {
+          connections = json.decode(countJson) as Map<String, dynamic>;
+        } catch (e) {
+          debugPrint('Error parsing connection count: $e');
+          connections = {};
+        }
+      }
+      
+      // Remove this connection
+      connections.remove(_connectionId);
+      
+      // Store back to localStorage
+      html.window.localStorage[_connectionCountKey] = json.encode(connections);
+      
+      // Stop the heartbeat timer
+      _connectionHeartbeatTimer?.cancel();
+      _connectionHeartbeatTimer = null;
+    } catch (e) {
+      debugPrint('Error unregistering device connection: $e');
+    }
+  }
+  
+  // Start the connection heartbeat timer
+  void _startConnectionHeartbeat() {
+    if (!kIsWeb) return;
+    
+    _connectionHeartbeatTimer?.cancel();
+    _connectionHeartbeatTimer = Timer.periodic(_connectionHeartbeatInterval, (timer) {
+      _updateConnectionHeartbeat();
+    });
+  }
+
   Future<void> connect() async {
     if (_disposed) {
       throw Exception('WebSocketApiService has been disposed');
     }
 
+    // Reset limit exceeded statuses on connection attempt
+    _isAnonLimitExceeded = false;
+    _isDeviceLimitExceeded = false;
+    
+    // Check device connection limit (for web only, but only after determining user role)
+    // We'll check again after getting the actual role, this is just to prevent excessive connections
+    if (kIsWeb) {
+      final connectionAllowed = _checkAndRegisterDeviceConnection();
+      if (!connectionAllowed) {
+        _isDeviceLimitExceeded = true;
+        _deviceLimitController.add(true);
+        _setStatus(ConnectionStatus.error);
+        throw Exception('Device connection limit exceeded');
+      }
+    }
+
     // Prevent multiple simultaneous connection attempts
     return _connectionLock.synchronized(() async {
       if (_status == ConnectionStatus.connecting || 
@@ -288,8 +486,43 @@ class WebSocketApiService {
         } catch (e) {
           debugPrint('WebSocketApiService: Connection failed: $e');
           
+          String errorMessage = e.toString();
+          
+          // Check for anonymous user connection limit exceeded
+          if (errorMessage.contains('429') && (errorMessage.contains('anon_limit_exceeded') || 
+              errorMessage.contains('Anonymous user limit exceeded'))) {
+            debugPrint('WebSocketApiService: Anonymous user connection limit exceeded');
+            
+            // Try to extract the error message from the response
+            String errorMsg = 'Anonymous users can enjoy 1 stream per IP address. If you are on a shared IP please enter your HF token, thank you!';
+            
+            try {
+              // Extract JSON content from the error message if available
+              final match = RegExp(r'\{.*\}').firstMatch(errorMessage);
+              if (match != null) {
+                final jsonStr = match.group(0);
+                if (jsonStr != null) {
+                  final errorData = json.decode(jsonStr);
+                  if (errorData['message'] != null) {
+                    errorMsg = errorData['message'];
+                  }
+                }
+              }
+            } catch (_) {
+              // If parsing fails, use the default message
+            }
+            
+            _setStatus(ConnectionStatus.error);
+            _isAnonLimitExceeded = true;
+            _anonLimitMessage = errorMsg;
+            _anonLimitController.add(true);
+            
+            // We don't rethrow here - we want to handle this specific error differently
+            return;
+          }
+          
           // If server sent a 503 response with maintenance mode indication
-          if (e.toString().contains('503') && e.toString().contains('maintenance')) {
+          if (errorMessage.contains('503') && errorMessage.contains('maintenance')) {
             debugPrint('WebSocketApiService: Server is in maintenance mode');
             _setStatus(ConnectionStatus.maintenance);
             return;
@@ -314,9 +547,41 @@ class WebSocketApiService {
                 },
               );
             } catch (retryError) {
-              // Check again for maintenance mode
-              if (retryError.toString().contains('503') && retryError.toString().contains('maintenance')) {
-                debugPrint('WebSocketApiService: Server is in maintenance mode');
+              // Check again for maintenance mode or anonymous limit
+              final retryErrorMsg = retryError.toString();
+              
+              if (retryErrorMsg.contains('429') && (retryErrorMsg.contains('anon_limit_exceeded') || 
+                  retryErrorMsg.contains('Anonymous user limit exceeded'))) {
+                debugPrint('WebSocketApiService: Anonymous user connection limit exceeded on retry');
+                
+                // Try to extract the error message from the response
+                String errorMsg = 'Anonymous users can enjoy 1 stream per IP address. If you are on a shared IP please enter your HF token, thank you!';
+                
+                try {
+                  // Extract JSON content from the error message if available
+                  final match = RegExp(r'\{.*\}').firstMatch(retryErrorMsg);
+                  if (match != null) {
+                    final jsonStr = match.group(0);
+                    if (jsonStr != null) {
+                      final errorData = json.decode(jsonStr);
+                      if (errorData['message'] != null) {
+                        errorMsg = errorData['message'];
+                      }
+                    }
+                  }
+                } catch (_) {
+                  // If parsing fails, use the default message
+                }
+                
+                _setStatus(ConnectionStatus.error);
+                _isAnonLimitExceeded = true;
+                _anonLimitMessage = errorMsg;
+                _anonLimitController.add(true);
+                return;
+              }
+              
+              if (retryErrorMsg.contains('503') && retryErrorMsg.contains('maintenance')) {
+                debugPrint('WebSocketApiService: Server is in maintenance mode on retry');
                 _setStatus(ConnectionStatus.maintenance);
                 return;
               }
@@ -338,8 +603,24 @@ class WebSocketApiService {
         );
 
         _startHeartbeat();
+        // Start the device connection heartbeat for web (we'll only apply limits to VIP users)
+        if (kIsWeb) {
+          _startConnectionHeartbeat();
+        }
+        
         _setStatus(ConnectionStatus.connected);
         _reconnectAttempts = 0;
+        
+        // Clear limit flags if we successfully connected
+        if (_isAnonLimitExceeded) {
+          _isAnonLimitExceeded = false;
+          _anonLimitController.add(false);
+        }
+        
+        if (_isDeviceLimitExceeded) {
+          _isDeviceLimitExceeded = false;
+          _deviceLimitController.add(false);
+        }
       } catch (e) {
         // Check if the error indicates maintenance mode
         if (e.toString().contains('maintenance')) {
@@ -948,9 +1229,13 @@ class WebSocketApiService {
       _disposed = true;
       _initialized = false;
       
+      // Unregister device connection (web only)
+      _unregisterDeviceConnection();
+      
       // Cancel timers
       _heartbeatTimer?.cancel();
       _reconnectTimer?.cancel();
+      _connectionHeartbeatTimer?.cancel();
       
       // Clear all pending requests
       _cancelPendingRequests('Service is being disposed');
@@ -970,6 +1255,8 @@ class WebSocketApiService {
       await _searchController.close();
       await _chatController.close();
       await _userRoleController.close();
+      await _anonLimitController.close();
+      await _deviceLimitController.close();
       
       _activeSearches.clear();
       _channel = null;

lib/widgets/null_html.dart

@@ -1,31 +0,0 @@
-// Mock implementations for non-web platforms
-
-class Window {
-  final document = Document();
-  final history = History();
-  final location = Location();
-  
-  Stream<dynamic> get onBeforeUnload => 
-      Stream.fromIterable([]).asBroadcastStream();
-}
-
-class Document {
-  String get visibilityState => 'visible';
-  
-  Stream<dynamic> get onVisibilityChange => 
-      Stream.fromIterable([]).asBroadcastStream();
-}
-
-class History {
-  void pushState(dynamic data, String title, String url) {
-    // No-op for non-web platforms
-  }
-}
-
-class Location {
-  String get href => '';
-}
-
-// Exported instances
-final window = Window();
-final document = Document();

lib/widgets/web_utils.dart

@@ -2,7 +2,7 @@ import 'dart:async';
 import 'package:flutter/foundation.dart';
 
 // Platform-specific imports handling
-import 'package:universal_html/html.dart' if (dart.library.io) 'package:aitube2/widgets/null_html.dart' as html;
+import 'package:universal_html/html.dart' if (dart.library.io) 'package:aitube2/services/html_stub.dart' as html;
 
 /// Get URL parameters from the current URL (web only)
 Map<String, String> getUrlParameters() {
@@ -46,35 +46,5 @@ void removeUrlParameter(String key) {
   html.window.history.pushState(null, '', newUri.toString());
 }
 
-/// Fallback implementation for non-web platforms
-class NullHtml {
-  // Mock objects to prevent build errors
-  final window = Window();
-  final document = Document();
-}
-
-// Mock implementation for html.window
-class Window {
-  final document = Document();
-  final History history = History();
-  
-  Stream<dynamic> get onBeforeUnload => 
-      Stream.fromIterable([]).asBroadcastStream();
-  
-  String get location => '';
-}
-
-// Mock implementation for html.History
-class History {
-  void pushState(dynamic data, String title, String url) {
-    // No-op for non-web platforms
-  }
-}
-
-// Mock implementation for html.document
-class Document {
-  String get visibilityState => 'visible';
-  
-  Stream<dynamic> get onVisibilityChange => 
-      Stream.fromIterable([]).asBroadcastStream();
-}
+// We now use the comprehensive html_stub.dart for non-web platforms
+// All mock classes are now consolidated there