diff --git a/Components.md b/Components.md new file mode 100644 index 0000000..da01a1f --- /dev/null +++ b/Components.md @@ -0,0 +1,165 @@ +This document will give a detailed documentation for every component of function Ollama App has to offer. + +## Chat View + +This is the main view of the app, simple and, most importantly, working. + +> [!NOTE] +> To start chatting, you first have to select a model in the [Model Selector](#model-selector). Do that first, then come back here. + +The chat mode is straightforward. Just write a message, wait a few moments, and the answer will get sent into the chat. + +The chat view hides a few useful features already included by default. Messages can be deleted by double-tapping the message you desire to wipe from the earth, and all messages sent since then, including the message itself, will get deleted. + +Editing a message is almost as simple. After enabling message editing in [Interface Settings](#interface), simply long press on a message and a popup will open and ask for the new content. + +| message editing dialog | +|-| + +> [!TIP] +> Messages (almost) fully support markdown syntax. That means the AI will be able to recieve and send back the message in markdown. + +### Multimodal Input + +Ollama App supports multimodal models, models that support input via an image. Models supporting the technology are marked with an image icon next to their name in the [Model Selector](#model-selector). + +After selecting a multimodal model, a new icon appears at the bottom left of the message bar; a camera icon. Clicking on it reveals the following bottom sheet: + +| ![new attachment button](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_32.png) | ![attachment dialog](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_28.png) | ![attachment dialog](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_31.png) | +|-|-|-| + +Select one of them, take or select your photo, and it'll get added to the chat. Adding multiple images is allowed, just repeat the steps. + +Even though the images will appear in the chat already after sending, they won't be submitted to the AI until a new text message is sent. When you send a message, the AI will answer the message in consideration of the image. + +## Model Selector + +You can access the model selector by tapping on the `` text in the top middle, or the name of the currently selected model in the same spot. Then you'll get the following popup dialog: + +| model selector | +|-| + +This will display all the models currently installed on your Ollama server instance. + +The models with a star next to them are recommended models. They have been selected by me (hehe) to be listed as that. Read more under [Custom Builds](#custom-builds). + +The `Add` button does nothing at the moment, it just opens a snack bar listing steps on how to add a model to an instance. For safety reasons, I didn't add the ability to add a model directly via name in the app. + +Models supporting [Multimodal Input](#multimodal-input) are marked with an image icon next to their name, like `llava` in the image above. + +## Side Menu + +The button on the top left opens the menu. In it, you have two options: `New Chat` and `Settings`. The first option creates a new chat, and the second one opens the [Settings,](#settings) where you can change how everything works. + +Below that are all the chats. To delete one, swipe it from left to right. To rename the chat tab and hold it until a popup dialog appears. In it, you can change the title or tab the sparkle icon to let AI find one for you. This is not affected by the "generate title" setting. + +| ![side menu](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_26.png)| ![https://github.com/JHubi1/ollama-app/raw/main/side menu with chat](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_33.png) | ![https://github.com/JHubi1/ollama-app/raw/main/rename dialog of chat](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_20.png) | +|-|-|-| + +> [!NOTE] +> The button on the top right corner deletes the chat. It has the same effect as swiping the chat in the sidebar. + +## Settings + +Ollama App offers a lot of configuration options. We'll go through every option one by one. + +### Host + +The host is the main address of your Ollama server. It may include a port, a protocol and a hostname. Paths are not recommended. + +| ![false host](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_03.png) | ![looking for host](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_04.png) | ![right host](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_05.png) | +|-|-|-| + +The port is required unless the port number matches the protocol (443 for HTTPS or 80 for HTTP). After that, click the save icon right next to the text field to set the host. + +The host address will be checked, so no worry about entering the wrong one. If you set the host once, and your server is offline, the requests will fail, but the host will stay saved if you don't change it yourself. To do that, just go into the side menu and open settings to do so. + +#### Custom headers + +| settings screen | +|-| + +Ollama App supports adding custom headers. This can be useful in case you want to secure your instance with authentication or something similar. Simply press the plus icon next to the host input and set one as a JSON object. This could be, for example: + +```json +{ + "Authorization": "Bearer " +} +``` + +### Behavior + +| settings screen | +|-| + +The behavior settings include settings connected to the system prompt. They won't be applied until you create a new chat. + +The system prompt is sent to the assistant at the start of the conversation. It leads the assistant in a direction, and it'll talk like you told him to in this message. To reset the system prompt to default, empty its value, click the save icon and close the screen. + +The option to disable markdown is not safe, and the assistant can still potentially add markdown to its response. + +### Interface + +| settings screen | +|-| + +The interface settings are focused, as the name might imply, on the interface of the Ollama App. The following list will document all options + +1. Targeted at the [Model Selector](#model-selector). + 1. Show model tags in the model selector. This can be useful if you have multiple versions of the same model installed + 2. Clear the chat if the model is changed. This is highly recommended, disabling this option could lead to unintended behavior +2. Used in the [Chat View](#chat-view) + 1. Set the request mode. Streaming is recommended, but sometimes it's not available, then select "Request" + 2. Whether to generate titles of chats with the Ollama AI or not. Could higher potential quota costs + 3. Whether long-pressing messages opens the edit dialog or not + 4. Whether to ask before deletion of chats. Useful if important data is potentially stored in chats or not + 5. Whether to show tips in the main sidebar +3. Backend loading options + 1. Keep model always loaded (`keep_alive` to `-1`) + 2. Never keep model (`keep_alive` to `0`) + 3. Time to keep models alive +4. Appearance settings + 1. Whether to enable haptic feedback or not + 2. Whether to start windows maximized (only desktop) + 3. Theme of app + 4. Follow the device theme/color + +### Voice + +> [!WARNING] +> This is still an experimental feature! Some functions may not work as intended. The documentation will be extended once this feature leaves experimental stage. + +| ![no permissions](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_09.png) | ![enabled](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_11.png) | ![language dialog](https://github.com/JHubi1/ollama-app/raw/main/assets/screenshots/flutter_12.png) | +|-|-|-| + +Tap the "Permissions not granted" button to allow the needed permissions. They're needed to allow Speech To Text to function. + +After that, enable Voice Mode by switching the toggle. To bring it to work, you now have to press "No language selected" and select a language in the language dialog. That's it. + +Then, press the button on the spot where the attachment icon would be with a multimodal model, or press the photo icon and the "Voice" button. + +| settings screen | +|-| + +If the model is multimodal, so it could get images as input, the normal button will appear, and the Voice Mode button will be moved in the multimodal drawer. + +### Export + +> [!WARNING] +> The import functionallity deletes all currently saved chats from disk and replaces them with the ones from the file. This cannot be undone. + +| settings screen | +|-| + +The export function allows you to export and save all chats to a file. This can be very useful if you want to back up your data or want to sync it between devices. + +### About (and Updates) + +| settings screen | +|-| + +The About screen holds a lot of useful information. + +You can access the GitHub repository or the issue page of the app directly from this screen. + +One more useful thing is the update checker. It looks for updates in the repo and will prompt you to download them directly from GitHub. Be careful, though, the used GitHub API has a rate limit. You can only send a few requests before the rate limit kicks in. \ No newline at end of file