let's promote hugging face projects

.gitattributes

@@ -7,3 +7,4 @@
 *.wav filter=lfs diff=lfs merge=lfs -text
 *.ico filter=lfs diff=lfs merge=lfs -text
 *.wasm filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

assets/ads/README.md

@@ -0,0 +1 @@
+Tikslop is a free and open-source project, so the "ads" are used to promote Hugging Face projects, people or spaces.

assets/config/default.yaml

@@ -12,6 +12,14 @@ ui:
   # start playback as soon as we have 1 video over 4 (25%)
   minimum_buffer_percent_to_start_playback: 25
 
+advertising:
+  enable_ads: false
+  ad_banners:
+    - image: assets/ads/lerobot.gif
+      link: https://huggingface.co/lerobot
+    - image: assets/ads/smolagents.gif
+      link: https://huggingface.co/docs/smolagents/index
+
 simulation:
   # how often the description should evolve (in seconds)
   # setting to 0 disables description evolution

assets/config/tikslop.yaml

@@ -0,0 +1,69 @@
+ui:
+  product_name: "#tikslop"
+  showChatInVideoView: false
+
+render_queue:
+  # how many clips should be stored in advance
+  buffer_size: 3
+
+  # how many requests for clips can be run in parallel
+  max_concurrent_generations: 2
+
+  # start playback as soon as we have 1 video over 3 (25%)
+  minimum_buffer_percent_to_start_playback: 5
+
+advertising:
+  enable_ads: true
+  ad_banners:
+    - image: assets/ads/lerobot.gif
+      link: https://huggingface.co/lerobot
+    - image: assets/ads/smolagents.gif
+      link: https://huggingface.co/docs/smolagents/index
+
+simulation:
+  # how often the description should evolve (in seconds)
+  # setting to 0 disables description evolution
+  sim_loop_frequency_in_sec: 10
+
+# it's OK to use high values here,
+# because some of those values are limited by the backend config,
+# such as the resoltuion or number of frames
+video:
+  default_negative_prompt: ""
+
+  # transition time between each clip
+  # the exit (older) clip will see its playback time reduced by this amount
+  transition_buffer_duration_ms: 300
+
+  # how long a generated clip should be, in Duration
+  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).
+  # 
+  # In case the resolution or number of frames are not divisible
+  # by 32 or 8 + 1, the input will be padded with -1 and then
+  # cropped to the desired resolution and number of frames.
+  # 
+  # The model works best on resolutions under 720 x 1280 and
+  # number of frames below 257.
+
+  # number of inference steps
+  # (this is capped by the backend API)
+  num_inference_steps: 8
+
+  guidance_scale: 1.0
+
+  # original frame-rate of each clip (before we slow them down)
+  # in frames per second (so an integer)
+  original_clip_frame_rate: 25
+
+  # (this is capped by the backend API)
+  original_clip_width: 1216
+
+  # (this is capped by the backend API)
+  original_clip_height: 672
+
+  # to do more with less, we slow down the videos (a 3s video will become a 4s video)
+  # but if you are GPU rich feel feel to play them back at 100% of their speed!
+  clip_playback_speed: 0.7

build/web/assets/AssetManifest.bin

@@ -1 +1 @@
-
+

build/web/assets/AssetManifest.bin.json

@@ -1 +1 @@
-"DQUHF2Fzc2V0cy9jb25maWcvUkVBRE1FLm1kDAENAQcFYXNzZXQHF2Fzc2V0cy9jb25maWcvUkVBRE1FLm1kBxlhc3NldHMvY29uZmlnL2N1c3RvbS55YW1sDAENAQcFYXNzZXQHGWFzc2V0cy9jb25maWcvY3VzdG9tLnlhbWwHGmFzc2V0cy9jb25maWcvZGVmYXVsdC55YW1sDAENAQcFYXNzZXQHGmFzc2V0cy9jb25maWcvZGVmYXVsdC55YW1sBxphc3NldHMvY29uZmlnL3Rpa3Nsb3AueWFtbAwBDQEHBWFzc2V0Bxphc3NldHMvY29uZmlnL3Rpa3Nsb3AueWFtbAcycGFja2FnZXMvY3VwZXJ0aW5vX2ljb25zL2Fzc2V0cy9DdXBlcnRpbm9JY29ucy50dGYMAQ0BBwVhc3NldAcycGFja2FnZXMvY3VwZXJ0aW5vX2ljb25zL2Fzc2V0cy9DdXBlcnRpbm9JY29ucy50dGY="
+"DQgHFGFzc2V0cy9hZHMvUkVBRE1FLm1kDAENAQcFYXNzZXQHFGFzc2V0cy9hZHMvUkVBRE1FLm1kBxZhc3NldHMvYWRzL2xlcm9ib3QuZ2lmDAENAQcFYXNzZXQHFmFzc2V0cy9hZHMvbGVyb2JvdC5naWYHGWFzc2V0cy9hZHMvc21vbGFnZW50cy5naWYMAQ0BBwVhc3NldAcZYXNzZXRzL2Fkcy9zbW9sYWdlbnRzLmdpZgcXYXNzZXRzL2NvbmZpZy9SRUFETUUubWQMAQ0BBwVhc3NldAcXYXNzZXRzL2NvbmZpZy9SRUFETUUubWQHGWFzc2V0cy9jb25maWcvY3VzdG9tLnlhbWwMAQ0BBwVhc3NldAcZYXNzZXRzL2NvbmZpZy9jdXN0b20ueWFtbAcaYXNzZXRzL2NvbmZpZy9kZWZhdWx0LnlhbWwMAQ0BBwVhc3NldAcaYXNzZXRzL2NvbmZpZy9kZWZhdWx0LnlhbWwHGmFzc2V0cy9jb25maWcvdGlrc2xvcC55YW1sDAENAQcFYXNzZXQHGmFzc2V0cy9jb25maWcvdGlrc2xvcC55YW1sBzJwYWNrYWdlcy9jdXBlcnRpbm9faWNvbnMvYXNzZXRzL0N1cGVydGlub0ljb25zLnR0ZgwBDQEHBWFzc2V0BzJwYWNrYWdlcy9jdXBlcnRpbm9faWNvbnMvYXNzZXRzL0N1cGVydGlub0ljb25zLnR0Zg=="

build/web/assets/AssetManifest.json

@@ -1 +1 @@
-{"assets/config/README.md":["assets/config/README.md"],"assets/config/custom.yaml":["assets/config/custom.yaml"],"assets/config/default.yaml":["assets/config/default.yaml"],"assets/config/tikslop.yaml":["assets/config/tikslop.yaml"],"packages/cupertino_icons/assets/CupertinoIcons.ttf":["packages/cupertino_icons/assets/CupertinoIcons.ttf"]}
+{"assets/ads/README.md":["assets/ads/README.md"],"assets/ads/lerobot.gif":["assets/ads/lerobot.gif"],"assets/ads/smolagents.gif":["assets/ads/smolagents.gif"],"assets/config/README.md":["assets/config/README.md"],"assets/config/custom.yaml":["assets/config/custom.yaml"],"assets/config/default.yaml":["assets/config/default.yaml"],"assets/config/tikslop.yaml":["assets/config/tikslop.yaml"],"packages/cupertino_icons/assets/CupertinoIcons.ttf":["packages/cupertino_icons/assets/CupertinoIcons.ttf"]}

build/web/assets/assets/ads/README.md

@@ -0,0 +1 @@
+Tikslop is a free and open-source project, so the "ads" are used to promote Hugging Face projects, people or spaces.

build/web/assets/assets/config/custom.yaml

@@ -12,6 +12,14 @@ playback:
   # start playback as soon as we have 1 video over 3
   minimum_buffer_percent_to_start_playback: 5
 
+advertising:
+  enable_ads: false
+  ad_banners:
+    - image: assets/ads/lerobot.gif
+      link: https://huggingface.co/lerobot
+    - image: assets/ads/smolagents.gif
+      link: https://huggingface.co/docs/smolagents/index
+
 video:
   # default negative prompt to filter harmful content
   default_negative_prompt: "pixelated, deformed, distorted, disfigured, blurry, text, watermark, low quality, gore, sex, blood, nudity, nude, porn, erotic"

build/web/assets/assets/config/default.yaml

@@ -12,6 +12,14 @@ ui:
   # start playback as soon as we have 1 video over 4 (25%)
   minimum_buffer_percent_to_start_playback: 25
 
+advertising:
+  enable_ads: false
+  ad_banners:
+    - image: assets/ads/lerobot.gif
+      link: https://huggingface.co/lerobot
+    - image: assets/ads/smolagents.gif
+      link: https://huggingface.co/docs/smolagents/index
+
 simulation:
   # how often the description should evolve (in seconds)
   # setting to 0 disables description evolution

build/web/assets/assets/config/tikslop.yaml

@@ -1,5 +1,5 @@
 ui:
-  product_name: "#aitube2"
+  product_name: "#tikslop"
   showChatInVideoView: false
 
 render_queue:
@@ -12,6 +12,14 @@ render_queue:
   # start playback as soon as we have 1 video over 3 (25%)
   minimum_buffer_percent_to_start_playback: 5
 
+advertising:
+  enable_ads: true
+  ad_banners:
+    - image: assets/ads/lerobot.gif
+      link: https://huggingface.co/lerobot
+    - image: assets/ads/smolagents.gif
+      link: https://huggingface.co/docs/smolagents/index
+
 simulation:
   # how often the description should evolve (in seconds)
   # setting to 0 disables description evolution

build/web/flutter_bootstrap.js

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

build/web/flutter_service_worker.js

@@ -3,12 +3,12 @@ const MANIFEST = 'flutter-app-manifest';
 const TEMP = 'flutter-temp-cache';
 const CACHE_NAME = 'flutter-app-cache';
 
-const RESOURCES = {"flutter_bootstrap.js": "fe329212ac2ce1ff4ecff384592b5d14",
+const RESOURCES = {"flutter_bootstrap.js": "04ff3a8576d911a2f01466a30986bd48",
 "version.json": "68350cac7987de2728345c72918dd067",
 "tikslop.png": "570e1db759046e2d224fef729983634e",
 "index.html": "3a7029b3672560e7938aab6fa4d30a46",
 "/": "3a7029b3672560e7938aab6fa4d30a46",
-"main.dart.js": "21ebc8127c44833620cc95fd08158166",
+"main.dart.js": "44d4476ea7e6f9159320973c3d29cbc3",
 "tikslop.svg": "26140ba0d153b213b122bc6ebcc17f6c",
 "flutter.js": "83d881c1dbb6d6bcd6b42e274605b69c",
 "favicon.png": "c8a183c516004e648a7bac7497c89b97",
@@ -17,18 +17,21 @@ const RESOURCES = {"flutter_bootstrap.js": "fe329212ac2ce1ff4ecff384592b5d14",
 "icons/Icon-maskable-512.png": "8682b581a7dab984ef4f9b7f21976a64",
 "icons/Icon-512.png": "8682b581a7dab984ef4f9b7f21976a64",
 "manifest.json": "c0904388ddaba6a9bd572a80f79a8dcc",
-"assets/AssetManifest.json": "bf40bd52b84d1c4e4f27946b18178ffc",
+"assets/AssetManifest.json": "7c3f24a308a466794e1c04bd7b46567e",
 "assets/NOTICES": "f0cfae681e209e19b2b144a9f062a96f",
 "assets/FontManifest.json": "dc3d03800ccca4601324923c0b1d6d57",
-"assets/AssetManifest.bin.json": "f7cde9e4f9fb8303a6858e8ce1b573db",
+"assets/AssetManifest.bin.json": "b4f8d70a60cc7fe6916c636377e8d4bc",
 "assets/packages/cupertino_icons/assets/CupertinoIcons.ttf": "33b7d9392238c04c131b6ce224e13711",
 "assets/shaders/ink_sparkle.frag": "ecc85a2e95f5e9f53123dcaf8cb9b6ce",
-"assets/AssetManifest.bin": "87dcd71e038a4b45c095cccdab2777d4",
+"assets/AssetManifest.bin": "afdc174fb4cb8a6401bd2328a67e184c",
 "assets/fonts/MaterialIcons-Regular.otf": "06b86454c633cc9510ad85ddc0523a91",
+"assets/assets/ads/smolagents.gif": "45338af5a4d440b707d02f364be8195c",
+"assets/assets/ads/README.md": "1959fb6b85a966348396f2f0f9c3f32a",
+"assets/assets/ads/lerobot.gif": "0f90b2fc4d15eefb5572363724d6d925",
 "assets/assets/config/README.md": "07a87720dd00dd1ca98c9d6884440e31",
-"assets/assets/config/custom.yaml": "e5c0b238b6f217f1215fbc813f093656",
-"assets/assets/config/default.yaml": "d1304586fd15839a754f53dda3dd8a44",
-"assets/assets/config/tikslop.yaml": "7df9de77da965c3bea94f2c6d33a4b5f",
+"assets/assets/config/custom.yaml": "52bd30aa4d8b980626a5eb02d0871c01",
+"assets/assets/config/default.yaml": "9ca1d05d06721c2b6f6382a1ba40af48",
+"assets/assets/config/tikslop.yaml": "1165218a000aa0c9841e88b072e40756",
 "canvaskit/skwasm.js": "ea559890a088fe28b4ddf70e17e60052",
 "canvaskit/skwasm.js.symbols": "9fe690d47b904d72c7d020bd303adf16",
 "canvaskit/canvaskit.js.symbols": "27361387bc24144b46a745f1afe92b50",

build/web/index.html

@@ -156,7 +156,7 @@
   </script>
   
   <!-- Add version parameter for cache busting -->
-  <script src="flutter_bootstrap.js?v=1747151738" async></script>
+  <script src="flutter_bootstrap.js?v=1747155709" async></script>
   
   <!-- Add cache busting script -->
   <script>

lib/config/config.dart

@@ -164,4 +164,23 @@ class Configuration {
 
   Duration get actualClipPlaybackDuration => 
       actualClipDuration - transitionBufferDuration;
+      
+  // Advertising settings
+  bool get enableAds => 
+      _config['advertising']?['enable_ads'] ?? false;
+      
+  List<Map<String, String>> get adBanners {
+    final adsList = _config['advertising']?['ad_banners'] as List<dynamic>?;
+    if (adsList == null) return [];
+    
+    return adsList.map<Map<String, String>>((ad) {
+      if (ad is Map) {
+        return {
+          'image': ad['image'].toString(),
+          'link': ad['link'].toString(),
+        };
+      }
+      return {};
+    }).toList();
+  }
 }

lib/screens/home_screen.dart

@@ -12,6 +12,7 @@ import 'package:tikslop/services/websocket_api_service.dart';
 import 'package:tikslop/services/settings_service.dart';
 import 'package:tikslop/widgets/video_card.dart';
 import 'package:tikslop/widgets/search_box.dart';
+import 'package:tikslop/widgets/ad_banner.dart';
 import 'package:tikslop/theme/colors.dart';
 
 class HomeScreen extends StatefulWidget {
@@ -446,17 +447,22 @@ class _HomeScreenState extends State<HomeScreen> {
           // Results Grid
           Expanded(
             child: _results.isEmpty
-                ? Center(
-                    child: Text(
-                      _isSearching
-                          ? 'Hallucinating search results using AI...'
-                          : 'Results are generated on demand, videos rendered on the fly.',
-                      style: const TextStyle(
-                        color: TikSlopColors.onSurfaceVariant,
-                        fontSize: 20
+                ? Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _isSearching
+                            ? 'Hallucinating search results using AI...'
+                            : 'Results are generated on demand, videos rendered on the fly.',
+                        style: const TextStyle(
+                          color: TikSlopColors.onSurfaceVariant,
+                          fontSize: 20
+                        ),
+                        textAlign: TextAlign.center,
                       ),
-                      textAlign: TextAlign.center,
-                    ),
+                      if (_isSearching) const SizedBox(height: 16),
+                      if (_isSearching) const AdBanner(showAd: true),
+                    ],
                   )
                   : MasonryGridView.count(
                   padding: const EdgeInsets.all(16),

lib/widgets/ad_banner.dart

@@ -0,0 +1,120 @@
+// lib/widgets/ad_banner.dart
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:tikslop/config/config.dart';
+import 'package:tikslop/theme/colors.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:universal_html/html.dart' if (dart.library.io) 'package:tikslop/services/html_stub.dart' as html;
+
+class AdBanner extends StatefulWidget {
+  final bool showAd;
+  
+  const AdBanner({
+    super.key, 
+    this.showAd = true,
+  });
+
+  @override
+  State<AdBanner> createState() => _AdBannerState();
+}
+
+class _AdBannerState extends State<AdBanner> {
+  Map<String, String>? _currentAd;
+  Timer? _rotationTimer;
+  
+  @override
+  void initState() {
+    super.initState();
+    // Initialize with a random ad
+    _selectRandomAd();
+    // Start the rotation timer
+    _startRotationTimer();
+  }
+  
+  @override
+  void dispose() {
+    // Cancel the timer when the widget is disposed
+    _rotationTimer?.cancel();
+    super.dispose();
+  }
+  
+  /// Starts the ad rotation timer
+  void _startRotationTimer() {
+    // Rotate every 30 seconds
+    _rotationTimer = Timer.periodic(const Duration(seconds: 30), (timer) {
+      _selectRandomAd();
+    });
+  }
+  
+  /// Selects a new random ad and updates the state
+  void _selectRandomAd() {
+    if (!mounted) return;
+    
+    final ads = Configuration.instance.adBanners;
+    if (ads.isEmpty) {
+      setState(() => _currentAd = null);
+      return;
+    }
+    
+    final random = Random();
+    setState(() => _currentAd = ads[random.nextInt(ads.length)]);
+  }
+
+  /// Opens a URL in a new tab or browser
+  Future<void> _launchURL(String url) async {
+    final Uri uri = Uri.parse(url);
+    if (kIsWeb) {
+      // Use HTML for web platform
+      html.window.open(url, '_blank');
+    } else {
+      // Use url_launcher for other platforms
+      if (!await launchUrl(uri, mode: LaunchMode.externalApplication)) {
+        throw Exception('Could not launch $url');
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Only show ads if enabled in config and showAd is true
+    if (!Configuration.instance.enableAds || !widget.showAd) {
+      return const SizedBox.shrink();
+    }
+
+    if (_currentAd == null || _currentAd!.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        // Divider above ad
+        const Divider(color: TikSlopColors.surfaceVariant),
+        
+        // Ad banner
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 4.0),
+          child: InkWell(
+            onTap: () => _launchURL(_currentAd!['link'] ?? ''),
+            child: Image.asset(
+              _currentAd!['image'] ?? '',
+              height: 64,
+              fit: BoxFit.contain,
+              errorBuilder: (context, error, stackTrace) {
+                // If image fails to load, show a placeholder
+                print('Error loading ad image: $error');
+                return Container(
+                  height: 64,
+                  color: Colors.grey.withOpacity(0.1),
+                  child: const Center(child: Text('Ad')),
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

pubspec.yaml

@@ -79,6 +79,7 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/config/
+    - assets/ads/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/to/resolution-aware-images