Merge pull request #17 from kghandour/16-ui-improvements

16 UI improvements

Ollama Swift/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,61 +1,61 @@
 {
   "images" : [
     {
-      "filename" : "Ollama16.png",
+      "filename" : "16.png",
       "idiom" : "mac",
       "scale" : "1x",
       "size" : "16x16"
     },
     {
-      "filename" : "Ollama32 1.png",
+      "filename" : "32 1.png",
       "idiom" : "mac",
       "scale" : "2x",
       "size" : "16x16"
     },
     {
-      "filename" : "Ollama32.png",
+      "filename" : "32.png",
       "idiom" : "mac",
       "scale" : "1x",
       "size" : "32x32"
     },
     {
-      "filename" : "Ollama64.png",
+      "filename" : "64.png",
       "idiom" : "mac",
       "scale" : "2x",
       "size" : "32x32"
     },
     {
-      "filename" : "Ollama128.png",
+      "filename" : "128.png",
       "idiom" : "mac",
       "scale" : "1x",
       "size" : "128x128"
     },
     {
-      "filename" : "Ollama256 1.png",
+      "filename" : "256 1.png",
       "idiom" : "mac",
       "scale" : "2x",
       "size" : "128x128"
     },
     {
-      "filename" : "Ollama256.png",
+      "filename" : "256.png",
       "idiom" : "mac",
       "scale" : "1x",
       "size" : "256x256"
     },
     {
-      "filename" : "OllamaSwift512.png",
+      "filename" : "512 1.png",
       "idiom" : "mac",
       "scale" : "2x",
       "size" : "256x256"
     },
     {
-      "filename" : "OllamaSwift512 1.png",
+      "filename" : "512.png",
       "idiom" : "mac",
       "scale" : "1x",
       "size" : "512x512"
     },
     {
-      "filename" : "OllamaSwift.png",
+      "filename" : "1024.png",
       "idiom" : "mac",
       "scale" : "2x",
       "size" : "512x512"

Ollama Swift/Localizable.xcstrings

@@ -4,7 +4,7 @@
     " Enter prompt..." : {
 
     },
-    "%lld MB" : {
+    "%.3f GB" : {
 
     },
     "%lld/ %lld MB" : {
@@ -16,6 +16,9 @@
           }
         }
       }
+    },
+    "A good starting model is llama2. Simply write the model name in the field above" : {
+
     },
     "Add model:" : {
       "localizations" : {

Ollama Swift/Utils/ErrorMessages.swift

@@ -15,6 +15,10 @@ func invalidDataError(error: Error?) -> ErrorModel{
     return ErrorModel(showError: true, errorTitle: "Invalid Data received", errorMessage: "Looks like there is a problem retrieving the data. \(String(describing: error?.localizedDescription)))")
 }
 
+func invalidTagsDataError(error: Error?) -> ErrorModel{
+    return ErrorModel(showError: true, errorTitle: "No models have been detected!", errorMessage: "To download your first model, click on 'Manage Models', and enter a model name in the 'Add Model' field and click download. \(String(describing: error?.localizedDescription))")
+}
+
 func invalidResponseError(error: Error?) -> ErrorModel{
     return ErrorModel(showError: true, errorTitle: "Invalid Response", errorMessage: "Looks like you are receiving a response other than 200! \(String(describing: error?.localizedDescription)))")
 }

Ollama Swift/Views/ChatView.swift

@@ -27,7 +27,7 @@ struct ChatView: View {
                 if(errorModel.showError){
                     VStack (alignment: .leading) {
                         Text(errorModel.errorTitle)
-                            .bold()
+                            .font(.title2)
                             .textSelection(.enabled)
                         Text(errorModel.errorMessage)
                             .textSelection(.enabled)
@@ -147,7 +147,7 @@ struct ChatView: View {
             } catch NetError.invalidURL (let error){
                 errorModel = invalidURLError(error: error)
             } catch NetError.invalidData (let error){
-                errorModel = invalidDataError(error: error)
+                errorModel = invalidTagsDataError(error: error)
             } catch NetError.invalidResponse (let error){
                 errorModel = invalidResponseError(error: error)
             } catch NetError.unreachable (let error){

Ollama Swift/Views/ManageModelsView.swift

@@ -26,8 +26,8 @@ struct ManageModelsView: View {
                 if(errorModel.showError){
                     VStack (alignment: .leading) {
                         Text(errorModel.errorTitle)
-                            .bold()
                             .textSelection(.enabled)
+                            .font(.title2)
                         Text(errorModel.errorMessage)
                             .textSelection(.enabled)
                     }
@@ -54,9 +54,10 @@ struct ManageModelsView: View {
             Text("Local Models: ")
             List(tags?.models ?? [], id: \.self){ model in
                 HStack{
-                    Text(model.name)
-                    Spacer()
-                    Text("\(Int(model.size / 1024 / 1024)) MB")
+                    VStack(alignment: .leading){
+                        Text(model.name)
+                        Text("\(model.size / 1024 / 1024 / 1024, specifier: "%.3f") GB")
+                    }
                     Spacer()
 
                     Button{
@@ -66,7 +67,7 @@ struct ManageModelsView: View {
                             .frame(width: 20, height: 30, alignment: .center)
                     }
                 }            }
-            .frame(height: 150)
+            .frame(height: 200)
             HStack{
                 Picker("Duplicate Model:", selection: $toDuplicate) {
                     ForEach(tags?.models ?? [], id: \.self) {model in
@@ -98,13 +99,15 @@ struct ManageModelsView: View {
                     Text("\(Int(completedSoFar / 1024 / 1024 ))/ \(Int(totalSize / 1024 / 1024)) MB")
                 }
             }
-            VStack{
+            VStack(alignment: .leading){
                 Text("To find the model names to download, checkout: https://ollama.ai/library")
-                    .selectionDisabled(false)
+                    .textSelection(.enabled)
+                Text("A good starting model is llama2. Simply write the model name in the field above")
             }
+            Spacer()
         }
         .padding()
-        .frame(minWidth: 400, idealWidth: 700, minHeight: 600, idealHeight: 800)
+        .frame(minWidth: 400, idealWidth: 500, minHeight: 600, idealHeight: 800)
         .task {
             getTags()
         }
@@ -118,7 +121,7 @@ struct ManageModelsView: View {
             } catch NetError.invalidURL (let error){
                 errorModel = invalidURLError(error: error)
             } catch NetError.invalidData (let error){
-                errorModel = invalidDataError(error: error)
+                errorModel = invalidTagsDataError(error: error)
             } catch NetError.invalidResponse (let error){
                 errorModel = invalidResponseError(error: error)
             } catch NetError.unreachable (let error){

README.md

@@ -1,10 +1,14 @@
 # Ollama-SwiftUI
-A user-friendly interface for [Ollama AI](https://ollama.ai) created in Swift. This application is not directly affiliated with Ollama.ai
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 
-![Ollama SwiftUI](assets/images/OllamaNoBG256.png)
+<p align="center">
+    <img src="assets/images/OllamaSwift.svg" width="128">
+</p>
+A user-friendly interface for [Ollama AI](https://ollama.ai) created in Swift. This application is not directly affiliated with Ollama.ai
 
 **This app requires Ollama to be installed and online to function.** Install Ollama: https://ollama.ai
-![Chat dialogue example](assets/images/Example1.png)
+![Chat dialogue example](assets/images/LightMode1.png)
 
 ## Features
 1. Chatting with local Large Language Models.
@@ -17,7 +21,7 @@ A user-friendly interface for [Ollama AI](https://ollama.ai) created in Swift. T
 8. Light and Dark Mode
 9. Localizable interface. Currently Localized in: English and Arabic
 
-![Manage Models example](assets/images/Example2.png)
+![Manage Models example](assets/images/LightMode2.png)
 
 ## Getting Started:
 1. Install Ollama ( https://ollama.ai )
@@ -28,3 +32,11 @@ A user-friendly interface for [Ollama AI](https://ollama.ai) created in Swift. T
     - Copy and paste the name and press on the download button
 5. Select the model from the dropdown in the main page to start your conversation
 6. Write your prompt and start the conversation!
+
+## Dark Mode also available!
+![Chat dialogue example darkmode](assets/images/DarkMode1.png)
+![Chat dialogue example darkmode](assets/images/DarkMode2.png)
+
+## Feedback and Contributions:
+For bugs and feedback, please create a new issue or email [email protected] 
+Feel free to contribute by creating a Pull request and the best effort will be done to review and merge.