Tweak docs (#5)

Updated instructions, onboarding error handling, version and readme ahead of 0.2 release.

README.md

@@ -7,15 +7,16 @@ Checkout the [latest WebAssembly version](https://otacon.github.io/olpaka/) of t
 ## Roadmap
 Below you'll find a rough plan of action. This list of feature is subject to change at any point
 in time for whatever reason.
+
 ### V0.1 - Getting started
 - [x] Connect to local Ollama instance
 - [x] Implement basic chat
 
 ### v0.2 - Onboarding
-- [ ] Create onboarding screen
-- [ ] Check Ollama install
-- [ ] Check Models
-- [ ] Check CORS
+- [x] Create onboarding screen
+- [x] Check Ollama install
+- [x] Check Models
+- [x] Check CORS
 
 ### v1.0 - Models galore
 - [ ] Manage models (list, pull, remove)

docs/setup_cors.md

@@ -54,15 +54,28 @@ systemctl restart ollama
 ### Windows
 On Windows, Ollama uses the environment variables set for the user or the system:
 
-- Ensure Ollama is not running by quitting the application from the taskbar.
-- Open the Control Panel and navigate to “Edit system environment variables.”
-- Choose to edit or create a new variable named `OLLAMA_ORIGINS`. 
+Ensure Ollama is not running by quitting the application from the taskbar.
 
-To allow Olpaka to access your Ollama service set:
+![Control Panel](images/windows_tutorial_1.png)
 
-```
-OLLAMA_ORIGINS=https://otacon.github.io
-```
+Open the Control Panel and navigate to "Edit system environment variables.".
+
+Alternatively search for "environment variables" in the Windows search bar and select
+"Edit system environment variables".
+
+![Environment Variables](images/windows_tutorial_2.png)
+
+Select "Environment variables..."
+
+![Environment Variables](images/windows_tutorial_3.png)
+
+Choose to edit or create a new variable.
+
+![Environment Variables](images/windows_tutorial_4.png)
+Set the "variable name" to `OLLAMA_ORIGINS`.
+Set the "variable value" to `https://otacon.github.io`
+
+Apply the changes and close the control panel. 
 
-Apply the changes and close the control panel. Run OLLAMA from a new terminal window to ensure it 
-picks up the updated environment variables.
+Now you can run again Ollama. If it's already running, please restart it to pick up the environment
+variables.

lib/l10n/intl_en.arb

@@ -30,13 +30,15 @@
   "onboarding_configure_cors_intro": "Now that Ollama is up and running on your local machine, it's time to ensure seamless communication between Olpaka and Ollama.\n\nYou might have encountered the term \"CORS\" (Cross-Origin Resource Sharing) before.\nEssentially, CORS is a security feature implemented by web browsers to restrict resources (e.g., data or services) from being requested from another domain.\n\nSince this is hosted on GitHub Pages is a different domain from your local machine, CORS needs to be configured to allow communication between them.",
   "onboarding_configure_cors_action": "Configure CORS",
   "onboarding_configure_cors_outro": "By setting up CORS correctly, you'll allow Olpaka to seamlessly interact with Ollama running on your local machine.\n\nLet's ensure a smooth sailing for your AI journey!",
+  "onboarding_configure_cors_error": "Can't connect to the Ollama Service. Please make sure you've setup CORS and Ollama is running. Alternatively, try to restart it.",
 
   "onboarding_install_model_title": "Install Model",
   "onboarding_install_model_subtitle": "Power Up with AI",
   "onboarding_install_model_intro": "Now, it's time to infuse your life with the magic of AI by installing a model of your choice into Ollama.\n\nWith Ollama, you have access to a diverse range of AI models provided by renowned entities like Meta, Google, Microsoft, OpenAI, and more.\nEach model boasts unique capabilities, skills, and characteristics, allowing you to tailor your AI experience to your preferences and needs.\n\nTo get started, pick a model from the ollama models library",
   "onboarding_install_model_action": "Featured Models",
   "onboarding_install_model_outro_1": "Once you've chosen a model that resonates with you, simply open your shell or command prompt and run the following command:",
   "onboarding_install_model_outro_2": "Not sure which one to choose? Just use llama3!",
+  "onboarding_install_model_error": "Can't find any model installed. Please install one before you proceed.",
 
   "error_generic_title": "Error",
   "error_generic_message": "Whoops...Something didn't work. Maybe try to restart Olpaka.",

lib/onboarding/view.dart

@@ -39,14 +39,17 @@ class OnboardingScreen extends StatelessWidget {
             OnboardingStateLoading() => _Loading(),
             OnboardingStateInstallOllama() => _Loaded(
                 step: _Step.installOllama,
+                error: null,
                 onNextClicked: viewModel.onCompleteInstallOllamaClicked,
               ),
             OnboardingStateSetupCors() => _Loaded(
                 step: _Step.setupCors,
+                error: state.error,
                 onNextClicked: viewModel.onCompleteSetupCorsClicked,
               ),
             OnboardingStateInstallModel() => _Loaded(
                 step: _Step.installModel,
+                error: state.error,
                 onNextClicked: viewModel.onCompleteInstallModelClicked,
               ),
           },
@@ -74,9 +77,10 @@ class _Loading extends StatelessWidget {
 
 class _Loaded extends StatelessWidget {
   final _Step step;
+  final String? error;
   final Function() onNextClicked;
 
-  const _Loaded({required this.step, required this.onNextClicked});
+  const _Loaded({required this.step, required this.onNextClicked, this.error});
 
   @override
   Widget build(BuildContext context) {
@@ -127,14 +131,14 @@ class _Loaded extends StatelessWidget {
         Step(
           title: Text(S.current.onboarding_configure_cors_title),
           subtitle: Text(S.current.onboarding_configure_cors_subtitle),
-          content: _StepConfigureCors(),
+          content: _StepConfigureCors(error: error),
           state: setupCorsState,
           isActive: currentStep >= 1,
         ),
         Step(
           title: Text(S.current.onboarding_install_model_title),
           subtitle: Text(S.current.onboarding_install_model_subtitle),
-          content: _StepInstallModel(),
+          content: _StepInstallModel(error: error),
           state: installModelState,
           isActive: currentStep >= 2,
         ),
@@ -165,8 +169,13 @@ class _StepInstallOllama extends StatelessWidget {
 }
 
 class _StepConfigureCors extends StatelessWidget {
+  final String? error;
+
+  const _StepConfigureCors({this.error});
+
   @override
   Widget build(BuildContext context) {
+    final errorMessage = error;
     return Align(
       alignment: Alignment.topLeft,
       child: Column(
@@ -181,15 +190,27 @@ class _StepConfigureCors extends StatelessWidget {
           ),
           const SizedBox(height: 16),
           Text(S.current.onboarding_configure_cors_outro),
+          if (errorMessage != null)
+            Card.filled(
+                color: Theme.of(context).colorScheme.errorContainer,
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text(errorMessage),
+                ))
         ],
       ),
     );
   }
 }
 
 class _StepInstallModel extends StatelessWidget {
+  final String? error;
+
+  const _StepInstallModel({this.error});
+
   @override
   Widget build(BuildContext context) {
+    final errorMessage = error;
     return Align(
       alignment: Alignment.topLeft,
       child: Column(
@@ -211,6 +232,13 @@ class _StepInstallModel extends StatelessWidget {
           ),
           const SizedBox(height: 16),
           Text(S.current.onboarding_install_model_outro_2),
+          if (errorMessage != null)
+          Card.filled(
+              color: Theme.of(context).colorScheme.errorContainer,
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Text(errorMessage),
+              ))
         ],
       ),
     );

lib/onboarding/view_model.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/foundation.dart';
+import 'package:olpaka/generated/l10n.dart';
 import 'package:olpaka/ollama/repository.dart';
 
 class OnboardingViewModel extends ChangeNotifier {
@@ -31,12 +32,18 @@ class OnboardingViewModel extends ChangeNotifier {
   }
 
   onCompleteInstallOllamaClicked() async {
-    state = OnboardingStateSetupCors();
-    notifyListeners();
-  }
-
-  onBackInstallCorsClicked() async {
-    state = OnboardingStateInstallOllama();
+    final result = await _repository.listModels();
+    switch (result) {
+      case ListModelsResultSuccess():
+        if (result.models.isEmpty) {
+          state = OnboardingStateInstallModel();
+        } else {
+          _events.add(OnboardingEventNavigateToChat());
+        }
+      case ListModelResultError():
+      case ListModelResultConnectionError():
+        state = OnboardingStateSetupCors();
+    }
     notifyListeners();
   }
 
@@ -46,25 +53,29 @@ class OnboardingViewModel extends ChangeNotifier {
       case ListModelsResultSuccess():
         if (result.models.isEmpty) {
           state = OnboardingStateInstallModel();
-          notifyListeners();
         } else {
           _events.add(OnboardingEventNavigateToChat());
         }
       case ListModelResultError():
       case ListModelResultConnectionError():
+        state = OnboardingStateSetupCors(error: S.current.onboarding_configure_cors_error);
     }
+    notifyListeners();
   }
 
   onCompleteInstallModelClicked() async {
     final result = await _repository.listModels();
     switch (result) {
       case ListModelsResultSuccess():
-        if (result.models.isNotEmpty) {
+        if (result.models.isEmpty) {
+          state = OnboardingStateInstallModel(error: S.current.onboarding_install_model_error);
+        } else {
           _events.add(OnboardingEventNavigateToChat());
         }
       case ListModelResultError():
       case ListModelResultConnectionError():
     }
+    notifyListeners();
   }
 
 }
@@ -79,6 +90,14 @@ class OnboardingStateLoading extends OnboardingState {}
 
 class OnboardingStateInstallOllama extends OnboardingState {}
 
-class OnboardingStateSetupCors extends OnboardingState {}
+class OnboardingStateSetupCors extends OnboardingState {
+  final String? error;
+
+  OnboardingStateSetupCors({this.error});
+}
 
-class OnboardingStateInstallModel extends OnboardingState {}
+class OnboardingStateInstallModel extends OnboardingState {
+  final String? error;
+
+  OnboardingStateInstallModel({this.error});
+}

pubspec.lock

@@ -124,10 +124,10 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      sha256: "466425a64508ca00983882f523400d9169365cb9b464e2e2419f3b6545ff9c51"
+      sha256: "9e0f7d1a3e7dc5010903e330fbc5497872c4c3cf6626381d69083cc1d5113c1e"
       url: "https://pub.dev"
     source: hosted
-    version: "14.0.1"
+    version: "14.0.2"
   google_fonts:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -1,7 +1,7 @@
 name: olpaka
 description: "A Flutter frontend app for Ollama"
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
-version: 1.0.0+1
+version: 0.0.2+1
 
 environment:
   sdk: '>=3.3.4 <4.0.0'
@@ -17,7 +17,7 @@ dependencies:
   get_it: ^7.6.7
 
   # Navigation
-  go_router: ^14.0.1
+  go_router: ^14.0.2
 
   # Google Fonts
   google_fonts: ^6.2.1