ui: new resource loading screen (#823)

* Pass loading progress and path to front end * Add new resource loading screen * Clean up and refactor start screen
mlcommons · Dec 12, 2023 · fda755f · fda755f
1 parent dea1857
commit fda755f
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 46 deletions.
diff --git a/flutter/integration_test/utils.dart b/flutter/integration_test/utils.dart
@@ -2,7 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:mlperfbench/ui/home/start_screen.dart';
+import 'package:mlperfbench/ui/home/benchmark_start_screen.dart';
 import 'package:provider/provider.dart';
 
 import 'package:mlperfbench/benchmark/state.dart';

diff --git a/flutter/lib/benchmark/state.dart b/flutter/lib/benchmark/state.dart
@@ -48,7 +48,8 @@ class BenchmarkState extends ChangeNotifier {
   bool? _doneRunning;
 
   // Only if [state] == [BenchmarkStateEnum.downloading]
-  String get downloadingProgress => resourceManager.progress;
+  String get loadingPath => resourceManager.loadingPath;
+  double get loadingProgress => resourceManager.loadingProgress;
 
   ExtendedResult? lastResult;
 

diff --git a/flutter/lib/l10n/app_en.arb b/flutter/lib/l10n/app_en.arb
@@ -21,7 +21,7 @@
   "unsupportedBackendError": "Error message",
   "unsupportedTryAnotherDevice": "Please try the app on another device",
 
-  "mainScreenLoading": "Loading content...",
+  "mainScreenLoading": "Loading Content",
   "mainScreenGo": "GO",
   "mainScreenMeasureTitle": "Measure your device performance for:",
   "mainScreenWaitFinish": "Wait for benchmark to finish",

diff --git a/flutter/lib/resources/cache_manager.dart b/flutter/lib/resources/cache_manager.dart
@@ -81,8 +81,8 @@ class CacheManager {
     return deleteLoadedResources(currentResources, atLeastDaysOld);
   }
 
-  Future<void> cache(List<String> urls, void Function(double) reportProgress,
-      bool purgeOldCache) async {
+  Future<void> cache(List<String> urls,
+      void Function(double, String) reportProgress, bool purgeOldCache) async {
     final resourcesToDownload = <String>[];
     _resourcesMap = {};
 
@@ -118,17 +118,18 @@ class CacheManager {
   }
 
   Future<void> _download(
-      List<String> urls, void Function(double) reportProgress) async {
+      List<String> urls, void Function(double, String) reportProgress) async {
     var progress = 0.0;
     for (var url in urls) {
+      progress += 0.1 / urls.length;
+      reportProgress(progress, url);
       if (isResourceAnArchive(url)) {
         _resourcesMap[url] = await archiveCacheHelper.get(url, true);
       } else {
         _resourcesMap[url] = await fileCacheHelper.get(url, true);
       }
-
-      progress += 1.0 / urls.length;
-      reportProgress(progress);
+      progress += 0.9 / urls.length;
+      reportProgress(progress, url);
     }
   }
 }
diff --git a/flutter/lib/resources/resource_manager.dart b/flutter/lib/resources/resource_manager.dart
@@ -21,7 +21,8 @@ class ResourceManager {
   final Store store;
 
   bool _done = false;
-  String _progressString = '0%';
+  String _loadingPath = '';
+  double _loadingProgress = 0.0;
 
   late final String applicationDirectory;
   late final String _loadedResourcesDir;
@@ -33,8 +34,12 @@ class ResourceManager {
 
   bool get done => _done;
 
-  String get progress {
-    return _progressString;
+  double get loadingProgress {
+    return _loadingProgress;
+  }
+
+  String get loadingPath {
+    return _loadingPath;
   }
 
   String get(String uri) {
@@ -87,7 +92,8 @@ class ResourceManager {
 
   Future<void> handleResources(
       List<Resource> resources, bool purgeOldCache) async {
-    _progressString = '0%';
+    _loadingPath = '';
+    _loadingProgress = 0.0;
     _done = false;
     _onUpdate();
 
@@ -102,8 +108,10 @@ class ResourceManager {
     }
 
     final internetPaths = internetResources.map((e) => e.path).toList();
-    await cacheManager.cache(internetPaths, (double val) {
-      _progressString = '${(val * 100).round()}%';
+    await cacheManager.cache(internetPaths,
+        (double currentProgress, String currentPath) {
+      _loadingProgress = currentProgress;
+      _loadingPath = currentPath;
       _onUpdate();
     }, purgeOldCache);
 

diff --git a/flutter/lib/ui/home/progress_screen.dart → ...lib/ui/home/benchmark_running_screen.dart b/flutter/lib/ui/home/progress_screen.dart → ...lib/ui/home/benchmark_running_screen.dart
@@ -10,17 +10,17 @@ import 'package:mlperfbench/localizations/app_localizations.dart';
 import 'package:mlperfbench/ui/home/progress_circles.dart';
 import 'package:mlperfbench/ui/time_utils.dart';
 
-class ProgressScreen extends StatefulWidget {
+class BenchmarkRunningScreen extends StatefulWidget {
   static final GlobalKey<ScaffoldState> scaffoldKey =
       GlobalKey<ScaffoldState>();
 
-  const ProgressScreen({Key? key}) : super(key: key);
+  const BenchmarkRunningScreen({Key? key}) : super(key: key);
 
   @override
-  State<ProgressScreen> createState() => _ProgressScreenState();
+  State<BenchmarkRunningScreen> createState() => _BenchmarkRunningScreenState();
 }
 
-class _ProgressScreenState extends State<ProgressScreen> {
+class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
   static const double progressCircleEdgeSize = 150;
   late final Timer _timer;
 
@@ -172,7 +172,7 @@ class _ProgressScreenState extends State<ProgressScreen> {
     );
 
     return Scaffold(
-      key: ProgressScreen.scaffoldKey,
+      key: BenchmarkRunningScreen.scaffoldKey,
       body: Container(
         decoration: backgroundGradient,
         child: Column(

diff --git a/flutter/lib/ui/home/start_screen.dart → ...r/lib/ui/home/benchmark_start_screen.dart b/flutter/lib/ui/home/start_screen.dart → ...r/lib/ui/home/benchmark_start_screen.dart
@@ -20,8 +20,8 @@ class MainKeys {
   static const String goButton = 'goButton';
 }
 
-class StartScreen extends StatelessWidget {
-  const StartScreen({Key? key}) : super(key: key);
+class BenchmarkStartScreen extends StatelessWidget {
+  const BenchmarkStartScreen({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -61,13 +61,11 @@ class StartScreen extends StatelessWidget {
   Widget _getContainer(BuildContext context, BenchmarkStateEnum state) {
     if (state == BenchmarkStateEnum.aborting) {
       return _waitContainer(context);
-    }
-
-    if (state == BenchmarkStateEnum.waiting) {
+    } else if (state == BenchmarkStateEnum.waiting) {
       return _goContainer(context);
+    } else {
+      throw 'Unknown BenchmarkState: ${state.name}';
     }
-
-    return _downloadContainer(context);
   }
 
   Widget _waitContainer(BuildContext context) {
@@ -128,15 +126,6 @@ class StartScreen extends StatelessWidget {
       }),
     );
   }
-
-  Widget _downloadContainer(BuildContext context) {
-    final stringResources = AppLocalizations.of(context);
-    final textLabel = Text(context.watch<BenchmarkState>().downloadingProgress,
-        style: const TextStyle(color: AppColors.lightText, fontSize: 40));
-
-    return _circleContainerWithContent(
-        context, textLabel, stringResources.mainScreenLoading);
-  }
 }
 
 class MyPaintBottom extends CustomPainter {

diff --git a/flutter/lib/ui/home/resource_loading_screen.dart b/flutter/lib/ui/home/resource_loading_screen.dart
@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:mlperfbench/app_constants.dart';
+import 'package:mlperfbench/benchmark/state.dart';
+import 'package:mlperfbench/localizations/app_localizations.dart';
+
+class ResourceLoadingScreen extends StatefulWidget {
+  const ResourceLoadingScreen({super.key});
+
+  @override
+  State<ResourceLoadingScreen> createState() => _ResourceLoadingScreenState();
+}
+
+class _ResourceLoadingScreenState extends State<ResourceLoadingScreen> {
+  static const double progressCircleEdgeSize = 150;
+
+  @override
+  Widget build(BuildContext context) {
+    final state = context.watch<BenchmarkState>();
+    final l10n = AppLocalizations.of(context);
+    final loadingProgressText = '${(state.loadingProgress * 100).round()}%';
+
+    final progressCircle = Stack(
+      alignment: AlignmentDirectional.center,
+      children: <Widget>[
+        Center(
+          child: Container(
+            width: progressCircleEdgeSize,
+            height: progressCircleEdgeSize,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              gradient: LinearGradient(
+                colors: AppColors.progressCircleGradient,
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+              ),
+              boxShadow: const [
+                BoxShadow(
+                  color: Colors.black12,
+                  offset: Offset(15, 15),
+                  blurRadius: 10,
+                )
+              ],
+            ),
+            child: Center(
+              child: Text(
+                loadingProgressText,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color: AppColors.lightText,
+                ),
+                textScaleFactor: 2,
+              ),
+            ),
+          ),
+        ),
+        Center(
+          child: Container(
+            width: MediaQuery.of(context).size.width * 0.35,
+            alignment: Alignment.center,
+            decoration: const BoxDecoration(
+              shape: BoxShape.circle,
+              color: AppColors.progressCircle,
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black12,
+                  offset: Offset(15, 15),
+                  blurRadius: 10,
+                )
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+
+    final statusText = Padding(
+      padding: const EdgeInsets.fromLTRB(20, 40, 20, 20),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Text(
+            l10n.mainScreenLoading,
+            style: const TextStyle(
+              color: AppColors.lightText,
+              fontSize: 16,
+            ),
+          ),
+          const SizedBox(height: 20),
+          Text(
+            state.loadingPath,
+            style: const TextStyle(
+              fontWeight: FontWeight.w300,
+              color: AppColors.lightText,
+              fontSize: 12,
+            ),
+          ),
+        ],
+      ),
+    );
+
+    final backgroundGradient = BoxDecoration(
+      gradient: LinearGradient(
+        colors: AppColors.progressScreenGradient,
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+      ),
+    );
+
+    return Scaffold(
+      body: Container(
+        decoration: backgroundGradient,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            progressCircle,
+            statusText,
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/flutter/lib/ui/home/result_screen.dart b/flutter/lib/ui/home/result_screen.dart
@@ -11,11 +11,11 @@ import 'package:mlperfbench/store.dart';
 import 'package:mlperfbench/ui/confirm_dialog.dart';
 import 'package:mlperfbench/ui/error_dialog.dart';
 import 'package:mlperfbench/ui/home/app_drawer.dart';
+import 'package:mlperfbench/ui/home/benchmark_running_screen.dart';
+import 'package:mlperfbench/ui/home/benchmark_start_screen.dart';
 import 'package:mlperfbench/ui/home/list_of_benchmark_items.dart';
-import 'package:mlperfbench/ui/home/progress_screen.dart';
 import 'package:mlperfbench/ui/home/result_circle.dart';
 import 'package:mlperfbench/ui/home/share_button.dart';
-import 'package:mlperfbench/ui/home/start_screen.dart';
 import 'package:mlperfbench/ui/icons.dart' as app_icons;
 import 'package:mlperfbench/ui/page_constraints.dart';
 
@@ -376,7 +376,8 @@ class _ResultScreenState extends State<ResultScreen>
                 print(t);
                 // current context may no longer be valid if runBenchmarks requested progress screen
                 await showErrorDialog(
-                    ProgressScreen.scaffoldKey.currentContext ?? context,
+                    BenchmarkRunningScreen.scaffoldKey.currentContext ??
+                        context,
                     ['${l10n.runFail}:', e.toString()]);
                 return;
               }

diff --git a/flutter/lib/ui/root/main_screen.dart b/flutter/lib/ui/root/main_screen.dart
@@ -3,9 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 import 'package:mlperfbench/benchmark/state.dart';
-import 'package:mlperfbench/ui/home/progress_screen.dart';
+import 'package:mlperfbench/ui/home/benchmark_running_screen.dart';
+import 'package:mlperfbench/ui/home/benchmark_start_screen.dart';
+import 'package:mlperfbench/ui/home/resource_loading_screen.dart';
 import 'package:mlperfbench/ui/home/result_screen.dart';
-import 'package:mlperfbench/ui/home/start_screen.dart';
 import 'package:mlperfbench/ui/root/resource_error_screen.dart';
 
 class MainScreen extends StatelessWidget {
@@ -21,13 +22,13 @@ class MainScreen extends StatelessWidget {
 
     switch (state.state) {
       case BenchmarkStateEnum.downloading:
-        return const StartScreen();
+        return const ResourceLoadingScreen();
       case BenchmarkStateEnum.waiting:
-        return const StartScreen();
+        return const BenchmarkStartScreen();
       case BenchmarkStateEnum.aborting:
-        return const StartScreen();
+        return const BenchmarkStartScreen();
       case BenchmarkStateEnum.running:
-        return const ProgressScreen();
+        return const BenchmarkRunningScreen();
       case BenchmarkStateEnum.done:
         return const ResultScreen();
     }

diff --git a/flutter/test/resources/cache_manager_test.dart b/flutter/test/resources/cache_manager_test.dart
@@ -15,7 +15,7 @@ void main() async {
 
     setUp(() async {
       manager = CacheManager('/tmp/resources');
-      await manager.cache(paths, (val) {}, true);
+      await manager.cache(paths, (val, str) {}, true);
     });
 
     test('get', () async {