├── javascript
    ├── .npmrc
    ├── server
    │   ├── tsconfig.json
    │   └── api
    │   │   ├── models
    │   │       └── index.ts
    │   │   └── chat
    │   │       └── index.ts
    ├── public
    │   └── favicon.ico
    ├── tsconfig.json
    ├── app.vue
    ├── nuxt.config.ts
    ├── app.config.ts
    ├── components
    │   ├── Heading.vue
    │   ├── ModelsDropdown.vue
    │   ├── Download.vue
    │   ├── Chat.vue
    │   └── Models.vue
    ├── tailwind.css.ts
    ├── utils
    │   └── settings.ts
    ├── .gitignore
    ├── pages
    │   ├── index.vue
    │   ├── models
    │   │   └── index.vue
    │   └── settings
    │   │   └── index.vue
    ├── .editorconfig
    ├── package.json
    ├── layouts
    │   └── default.vue
    └── README.md
├── README.md
├── python
    ├── pyproject.toml
    └── app.py
└── LICENSE


/javascript/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ollama Python & Javascript Libraries Example
2 | 


--------------------------------------------------------------------------------
/javascript/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/javascript/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/ollama-libraries-example/main/javascript/public/favicon.ico


--------------------------------------------------------------------------------
/javascript/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/javascript/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtLayout>
4 |       <NuxtPage />
5 |     </NuxtLayout>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/javascript/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 |   devtools: { enabled: true },
4 |   modules: ['@nuxt/ui']
5 | })
6 | 


--------------------------------------------------------------------------------
/javascript/server/api/models/index.ts:
--------------------------------------------------------------------------------
1 | import ollama from 'ollama'
2 | 
3 | export default defineEventHandler(async (event) => {
4 |     const response = await ollama.list();
5 |     return response.models
6 | })
7 | 


--------------------------------------------------------------------------------
/javascript/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   ui: {
 3 |     notifications: {
 4 |       position: 'top-0 bottom-auto'
 5 |     },
 6 |     primary: 'indigo',
 7 |     gray: 'cool'
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/javascript/components/Heading.vue:
--------------------------------------------------------------------------------
1 | <script setup>
2 | const { label } = defineProps({
3 |   label: String
4 | })
5 | </script>
6 | <template>
7 |   <div class="font-bold text-xl my-4">{{ label }}</div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/javascript/tailwind.css.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | export default <Partial<Config>>{
 4 |   theme: {
 5 |     extend: {
 6 |       aspectRatio: {
 7 |         auto: 'auto',
 8 |         square: '1 / 1',
 9 |         video: '16 / 9'
10 |       }
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/javascript/utils/settings.ts:
--------------------------------------------------------------------------------
 1 | const OLLAMA_HOST = 'ollama.host';
 2 | 
 3 | export const loadOllamaHost = () => {
 4 |   const host = localStorage.getItem(OLLAMA_HOST);
 5 |   return host;
 6 | }
 7 | 
 8 | export const saveOllamaHost = (host) => {
 9 |   localStorage.setItem(OLLAMA_HOST, host);
10 | }
11 | 


--------------------------------------------------------------------------------
/javascript/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/javascript/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue';
 3 | 
 4 | const model = ref(null);
 5 | const onModelChanged = (newModel) => {
 6 |   model.value = newModel;
 7 |   console.log("Model: ", model.value);
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div class="flex flex-1">
13 |     <ClientOnly>
14 |       <chat :model="model" />
15 |     </ClientOnly>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/javascript/server/api/chat/index.ts:
--------------------------------------------------------------------------------
 1 | import ollama from 'ollama';
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const { model, content } = await readBody(event);
 5 |   console.log('Model to chat with:', model)
 6 | 
 7 |   const message = { role: 'user', content: content };
 8 |   const response = await ollama.chat({ model: model, messages: [message], stream: false });
 9 | 
10 |   return response;
11 | })
12 | 


--------------------------------------------------------------------------------
/javascript/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 4
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.{yml,yaml}]
15 | indent_size = 2
16 | 
17 | [*.{vue,js,ts}]
18 | indent_style = space
19 | indent_size = 2
20 | 
21 | [docker-compose.yml]
22 | indent_size = 4
23 | 


--------------------------------------------------------------------------------
/javascript/pages/models/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue';
 3 | 
 4 | const model = ref(null);
 5 | const onModelChanged = (newModel) => {
 6 |   model.value = newModel;
 7 |   console.log("Model: ", model.value);
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div class="flex flex-col w-full">
13 |     <ClientOnly>
14 |       <models @model-changed="onModelChanged" />
15 |     </ClientOnly>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/python/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [tool.poetry]
 2 | name = "ollama-streamlit"
 3 | version = "0.1.0"
 4 | description = ""
 5 | authors = ["sugarforever <william.1022@gmail.com>"]
 6 | readme = "README.md"
 7 | 
 8 | [tool.poetry.dependencies]
 9 | python = "^3.11"
10 | streamlit = "^1.30.0"
11 | ollama = "^0.1.4"
12 | openai = "^1.10.0"
13 | langchain = "^0.1.5"
14 | langchain-community = "^0.0.17"
15 | python-dotenv = "^1.0.1"
16 | 
17 | 
18 | [build-system]
19 | requires = ["poetry-core"]
20 | build-backend = "poetry.core.masonry.api"
21 | 


--------------------------------------------------------------------------------
/javascript/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "devDependencies": {
13 |     "@types/ws": "^8.5.10",
14 |     "nuxt": "^3.10.0",
15 |     "vue": "^3.4.15",
16 |     "vue-router": "^4.2.5"
17 |   },
18 |   "dependencies": {
19 |     "@nuxt/ui": "^2.13.0",
20 |     "ai": "^2.2.33",
21 |     "ollama": "^0.4.5",
22 |     "openai": "^4.26.1",
23 |     "ws": "^8.16.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/javascript/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const route = useRoute()
 3 | 
 4 | const links = [
 5 |   [{
 6 |     label: 'Models',
 7 |     icon: 'i-heroicons-home',
 8 |     to: '/models'
 9 |   }, {
10 |     label: 'Chat',
11 |     icon: 'i-heroicons-chart-bar',
12 |     to: '/'
13 |   }, {
14 |     label: 'Settings',
15 |     icon: 'i-heroicons-chart-bar',
16 |     to: '/settings'
17 |   }], [{
18 |     label: 'ChatOllama',
19 |     labelClass: 'text-2xl font-semibold text-primary'
20 |   }]
21 | ]
22 | </script>
23 | <template>
24 |   <div class="h-screen flex flex-col w-full">
25 |     <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
26 | 
27 |     <div class="p-4 flex flex-1 overflow-y-scroll justify-center">
28 |       <slot />
29 |     </div>
30 |     <UNotifications />
31 |   </div>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/javascript/README.md:
--------------------------------------------------------------------------------
 1 | # Chat Ollama
 2 | 
 3 | This is a Nuxt 3 + Ollama web application. It's an example of Ollama Javascript library.
 4 | 
 5 | Feature list:
 6 | - Models management (list, download, delete)
 7 | - Chat with models
 8 | 
 9 | ## Setup
10 | 
11 | Make sure to install the dependencies:
12 | 
13 | ```bash
14 | # npm
15 | npm install
16 | 
17 | # pnpm
18 | pnpm install
19 | 
20 | # yarn
21 | yarn install
22 | 
23 | # bun
24 | bun install
25 | ```
26 | 
27 | ## Ollama Server
28 | 
29 | You will need an Ollama server running. You can run it in local environment following the installation guide of [Ollama](https://github.com/ollama/ollama).
30 | 
31 | By default, Ollama server is running on http://localhost:11434.
32 | 
33 | ## Development Server
34 | 
35 | Start the development server on `http://localhost:3000`:
36 | 
37 | ```bash
38 | # npm
39 | npm run dev
40 | 
41 | # pnpm
42 | pnpm run dev
43 | 
44 | # yarn
45 | yarn dev
46 | 
47 | # bun
48 | bun run dev
49 | ```
50 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 sugarforever
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/javascript/components/ModelsDropdown.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref, onMounted } from 'vue';
 3 | import { loadOllamaHost } from '../utils/settings'
 4 | import { Ollama } from 'ollama';
 5 | 
 6 | const ollama = new Ollama({ host: loadOllamaHost() });
 7 | 
 8 | const emit = defineEmits(["modelSelected"])
 9 | 
10 | const models = ref([]);
11 | const selectedModel = ref(null);
12 | const label = computed(() => selectedModel.value ? selectedModel.value : "Models");
13 | 
14 | onMounted(async () => {
15 |   const response = await ollama.list();
16 |   models.value = [
17 |     response.models.map(m => {
18 |       return {
19 |         label: m.name,
20 |         click: () => {
21 |           console.log("Model selected: ", m.name);
22 |           selectedModel.value = m.name;
23 |           emit("modelSelected", m.name);
24 |         }
25 |       }
26 |     })
27 |   ];
28 | })
29 | 
30 | </script>
31 | <template>
32 |   <ClientOnly>
33 |     <UDropdown :items="models" :popper="{ placement: 'bottom-start' }">
34 |       <UButton color="white" :label="label" trailing-icon="i-heroicons-chevron-down-20-solid" />
35 |     </UDropdown>
36 |   </ClientOnly>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/javascript/pages/settings/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { loadOllamaHost, saveOllamaHost } from '../../utils/settings';
 3 | 
 4 | const toast = useToast();
 5 | 
 6 | const load = () => {
 7 |   return loadOllamaHost();
 8 | }
 9 | 
10 | const save = (host) => {
11 |   saving.value = true;
12 |   saveOllamaHost(host);
13 |   saving.value = false;
14 | }
15 | 
16 | const state = reactive({
17 |   host: undefined
18 | });
19 | const saving = ref(false);
20 | 
21 | const validate = (state) => {
22 |   const errors = [];
23 | 
24 |   if (!/^https?:\/\//i.test(state.host)) {
25 |     errors.push({ path: 'host', message: 'Host must start with http:// or https://' });
26 |   }
27 | 
28 |   return errors
29 | };
30 | 
31 | const onSubmit = () => {
32 |   console.log("Submitting: ", state.host);
33 |   save(state.host);
34 |   toast.add({ title: `Ollama server set to ${state.host} successfully!` });
35 | };
36 | 
37 | onMounted(() => {
38 |   state.host = load();
39 | });
40 | 
41 | </script>
42 | 
43 | <template>
44 |   <div class="w-96">
45 |     <Heading label="Ollama Server Setting" />
46 |     <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
47 |       <UFormGroup label="Host" name="host">
48 |         <UInput v-model="state.host" />
49 |       </UFormGroup>
50 | 
51 |       <UButton type="submit" :loading="saving">
52 |         Save
53 |       </UButton>
54 |     </UForm>
55 |   </div>
56 | </template>
57 | 


--------------------------------------------------------------------------------
/python/app.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | import ollama
 3 | 
 4 | model_list = ollama.list()
 5 | 
 6 | if "model_name" not in st.session_state:
 7 |     st.session_state["model_name"] = "llama2:7b-chat"
 8 | 
 9 | if "messages" not in st.session_state:
10 |     st.session_state.messages = []
11 | 
12 | with st.sidebar:
13 |     st.subheader("Settings")
14 | 
15 |     option = st.selectbox(
16 |         'Select a model',
17 |         [model['name'] for model in model_list['models']])
18 |     st.write('You selected:', option)
19 |     st.session_state["model_name"] = option
20 | 
21 | st.title(f"Chat with {st.session_state['model_name']}")
22 | 
23 | for message in st.session_state.messages:
24 |     with st.chat_message(message["role"]):
25 |         st.markdown(message["content"])
26 | 
27 | if prompt := st.chat_input("What is up?"):
28 |     
29 |     st.session_state.messages.append({"role": "user", "content": prompt})
30 |     
31 |     with st.chat_message("user"):
32 |         st.markdown(prompt)
33 |     
34 |     with st.chat_message("assistant"):
35 |         message_placeholder = st.empty()
36 |         full_response = ""
37 |         for chunk in ollama.chat(
38 |             model=st.session_state["model_name"],
39 |             messages=[
40 |                 {"role": m["role"], "content": m["content"]}
41 |                 for m in st.session_state.messages
42 |             ],
43 |             stream=True,
44 |         ):
45 |             if 'message' in chunk and 'content' in chunk['message']:
46 |                 full_response += (chunk['message']['content'] or "")
47 |                 message_placeholder.markdown(full_response + "▌")
48 |         message_placeholder.markdown(full_response)
49 |     st.session_state.messages.append({"role": "assistant", "content": full_response})


--------------------------------------------------------------------------------
/javascript/components/Download.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | 
 3 | import ollama from 'ollama';
 4 | 
 5 | const emit = defineEmits(["modelDownloaded"])
 6 | 
 7 | const state = reactive({
 8 |   modelName: undefined
 9 | });
10 | const downloading = ref(false);
11 | const progresses = ref([]);
12 | 
13 | const onDownload = async () => {
14 |   downloading.value = true;
15 |   progresses.value = [];
16 |   const { modelName } = state;
17 |   console.log("Downloading model: ", modelName);
18 | 
19 |   try {
20 |     const response = await ollama.pull({ model: modelName, stream: true });
21 |     for await (const progress of response) {
22 |       const { total, completed = 0 } = progress;
23 |       if (total && completed) {
24 |         progress.percentage = `${parseInt((completed / total) * 100)}%`;
25 |       }
26 | 
27 |       const existing = progresses.value.find((p) => p.status === progress.status);
28 |       if (existing) {
29 |         Object.assign(existing, progress);
30 |       } else {
31 |         progresses.value.push(progress);
32 |       }
33 |       console.log("Progress: ", progresses.value);
34 |     }
35 | 
36 |     emit("modelDownloaded", modelName);
37 |   } catch (error) {
38 |     console.error("Error downloading model: ", error);
39 |   }
40 | 
41 |   downloading.value = false;
42 | }
43 | </script>
44 | 
45 | <template>
46 |   <UForm :state="state" @submit="onDownload">
47 |     <div class="flex flex-row w-full gap-2">
48 |       <UInput class="flex-1" size="lg" v-model="state.modelName" placeholder="Enter the model name to download" />
49 |       <UButton type="submit" :loading="downloading">
50 |         Download
51 |       </UButton>
52 |     </div>
53 |     <ul class="flex flex-col gap-2 mt-4 px-3.5 py-2.5 bg-gray-100" v-if="progresses.length > 0">
54 |       <li v-for="(progress, index) in progresses" :key="index">
55 |         <UProgress :value="parseInt(progress.percentage)" indicator v-if="progress.percentage">
56 |           <template #indicator="{ percent }">
57 |             <div class="font-light text-xs text-gray-700">
58 |               <span>{{ progress.status }}</span>
59 |               <span class="float-right">{{ `${parseInt(percent)}%` }}</span>
60 |             </div>
61 |           </template>
62 |         </UProgress>
63 |         <span class="font-light text-xs text-gray-700" v-else>{{ progress.status }}</span>
64 |       </li>
65 |     </ul>
66 |   </UForm>
67 | </template>
68 | 


--------------------------------------------------------------------------------
/javascript/components/Chat.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | 
  3 | import { Ollama } from 'ollama';
  4 | import { loadOllamaHost } from '../utils/settings';
  5 | 
  6 | const ollamaHost = ref(null);
  7 | const ollama = ref(null);
  8 | 
  9 | const model = ref(null);
 10 | const messages = ref([]);
 11 | const sending = ref(false);
 12 | const state = reactive({
 13 |   instruction: "",
 14 |   input: ""
 15 | })
 16 | 
 17 | watch(model, async (newModel) => {
 18 |   messages.value = [];
 19 | })
 20 | 
 21 | const onSend = async () => {
 22 |   if (sending.value || !state.input?.trim() || !model.value || !ollama.value) {
 23 |     return;
 24 |   }
 25 | 
 26 |   console.log("Sending message: ", state.input);
 27 |   sending.value = true;
 28 | 
 29 |   const { input } = state;
 30 |   rows.value = 1;
 31 |   setTimeout(() => {
 32 |     state.input = "";
 33 |   }, 50);
 34 |   messages.value.push({
 35 |     role: "user",
 36 |     content: input
 37 |   });
 38 | 
 39 |   const response = await ollama.value.chat({ model: model.value, messages: [...messages.value], stream: true });
 40 | 
 41 |   for await (const chunk of response) {
 42 |     const content = chunk?.message?.content;
 43 |     if (messages.value.length > 0 && messages.value[messages.value.length - 1].role === 'assistant') {
 44 |       messages.value[messages.value.length - 1].content += content;
 45 |     } else {
 46 |       messages.value.push({ role: 'assistant', content });
 47 |     }
 48 |   }
 49 | 
 50 |   sending.value = false;
 51 | }
 52 | 
 53 | const onModelSelected = (modelName) => {
 54 |   model.value = modelName;
 55 | }
 56 | 
 57 | const rows = ref(1);
 58 | 
 59 | watch(ollamaHost, async (newHost) => {
 60 |   if (newHost) {
 61 |     console.log("Switching Ollama host: ", newHost);
 62 |     ollama.value = new Ollama({ host: newHost });
 63 |   }
 64 | });
 65 | 
 66 | onMounted(() => {
 67 |   ollamaHost.value = loadOllamaHost();
 68 | });
 69 | 
 70 | </script>
 71 | <template>
 72 |   <div class="flex flex-col flex-1 p-4">
 73 |     <div class="flex flex-row items-center justify-between mb-4 pb-4 border-b border-b-gray-200">
 74 |       <div class="flex flex-row" v-if="model">
 75 |         <span>Chat with</span>
 76 |         <h1 class="font-bold pl-1">{{ model }}</h1>
 77 |       </div>
 78 |       <ModelsDropdown @modelSelected="onModelSelected" />
 79 |     </div>
 80 |     <div dir="ltr" class="relative overflow-y-scroll flex-1 space-y-4">
 81 |       <ul className="flex flex-1 flex-col">
 82 |         <li v-for="(message, index) in messages" :key="index">
 83 |           <div
 84 |             :class="`${message.role == 'assistant' ? 'bg-white' : 'bg-primary-50'} border border-slate-150 rounded my-4 px-3 py-2`">
 85 |             <h3 class="font-bold">{{ message.role }}</h3>
 86 |             <p class="mt-2">{{ message.content }}</p>
 87 |           </div>
 88 |         </li>
 89 |       </ul>
 90 |     </div>
 91 |     <div class="mt-4">
 92 |       <UForm :state="state" @submit="onSend" @keydown.shift.enter="onSend">
 93 |         <div class="flex flex-row w-full gap-2">
 94 |           <UTextarea class="flex-1" autoresize :rows="rows" v-model="state.input" />
 95 |           <UButton type="submit" :disabled="!model" :loading="sending" class="h-fit">
 96 |             Send
 97 |           </UButton>
 98 |         </div>
 99 |       </UForm>
100 |     </div>
101 |   </div>
102 | </template>
103 | 


--------------------------------------------------------------------------------
/javascript/components/Models.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { computed, ref } from 'vue';
  3 | import { loadOllamaHost } from '../utils/settings'
  4 | import { Ollama } from 'ollama';
  5 | 
  6 | const ollama = new Ollama({ host: loadOllamaHost() });
  7 | 
  8 | const emit = defineEmits(["modelChanged"])
  9 | 
 10 | const loadModels = async () => {
 11 |   const { models } = await ollama.list();
 12 |   return models;
 13 | };
 14 | 
 15 | const models = ref([]);
 16 | const modelRows = computed(() => {
 17 |   return models.value.map((model) => {
 18 |     return {
 19 |       name: model.name,
 20 |       size: model.size,
 21 |       family: model.details?.family,
 22 |       format: model.details?.format,
 23 |       parameter_size: model.details?.parameter_size,
 24 |       quantization_level: model.details?.quantization_level
 25 |     }
 26 |   });
 27 | });
 28 | const columns = [{
 29 |   key: 'name',
 30 |   label: 'Name'
 31 | }, {
 32 |   key: 'size',
 33 |   label: 'Size'
 34 | }, {
 35 |   key: 'family',
 36 |   label: 'Family'
 37 | }, {
 38 |   key: 'format',
 39 |   label: 'Format'
 40 | }, {
 41 |   key: 'parameter_size',
 42 |   label: 'Parameter Size'
 43 | },
 44 | {
 45 |   key: 'quantization_level',
 46 |   label: 'Quantization Level'
 47 | }];
 48 | 
 49 | const selectedRows = ref([]);
 50 | const select = (row) => {
 51 |   const index = selectedRows.value.findIndex((item) => item.name === row.name)
 52 |   if (index === -1) {
 53 |     selectedRows.value.push(row)
 54 |   } else {
 55 |     selectedRows.value.splice(index, 1)
 56 |   }
 57 | 
 58 |   console.log('Selected rows: ', selectedRows.value);
 59 | };
 60 | 
 61 | const actions = [
 62 |   [{
 63 |     key: 'delete',
 64 |     label: 'Delete',
 65 |     icon: 'i-heroicons-trash-20-solid',
 66 |     click: async () => {
 67 |       console.log('Deleting models: ', selectedRows.value);
 68 |       isOpen.value = true;
 69 |     }
 70 |   }]
 71 | ];
 72 | 
 73 | const selectedModelName = ref(null);
 74 | 
 75 | loadModels().then((data) => {
 76 |   models.value = data;
 77 |   selectedModelName.value = data[0]?.name;
 78 |   onModelChange();
 79 | });
 80 | 
 81 | const modelOptions = computed(() => {
 82 |   return models.value.map((model) => model.name);
 83 | });
 84 | 
 85 | const onModelChange = () => {
 86 |   emit("modelChanged", selectedModelName.value);
 87 | };
 88 | 
 89 | const onModelDownloaded = () => {
 90 |   loadModels().then((data) => {
 91 |     models.value = data;
 92 |   });
 93 | };
 94 | 
 95 | // Modal
 96 | const isOpen = ref(false);
 97 | const onDeleteModel = async () => {
 98 |   resetModal();
 99 |   selectedRows.value.forEach(async ({ name }) => {
100 |     console.log('Deleting model: ', name)
101 |     const status = await ollama.delete({ model: name })
102 |     console.log('Status: ', status);
103 | 
104 |     if (status?.status === 'success') {
105 |       models.value = models.value.filter((m) => m.name !== name);
106 |     }
107 |   });
108 | };
109 | 
110 | const onCancel = () => {
111 |   resetModal();
112 | };
113 | 
114 | const resetModal = () => {
115 |   isOpen.value = false;
116 | };
117 | </script>
118 | 
119 | <template>
120 |   <div>
121 |     <div class="my-8">
122 |       <Download @modelDownloaded="onModelDownloaded" />
123 |     </div>
124 |     <UDropdown v-if="selectedRows.length > 0" :items="actions" :ui="{ width: 'w-36' }">
125 |       <UButton icon="i-heroicons-chevron-down" trailing color="gray" size="xs">
126 |         Operations
127 |       </UButton>
128 |     </UDropdown>
129 | 
130 |     <ClientOnly>
131 |       <UTable :columns="columns" :rows="modelRows" @select="select" v-model="selectedRows">
132 |         <template #actions-data="{ row }">
133 |           <UDropdown :items="items(row)">
134 |             <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
135 |           </UDropdown>
136 |         </template>
137 |       </UTable>
138 |     </ClientOnly>
139 | 
140 |     <UModal v-model="isOpen">
141 |       <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
142 |         <template #header>
143 |           <span class="font-bold text-lg">Warning</span>
144 |         </template>
145 | 
146 |         <div>
147 |           <p class="mb-4">Are you ok to delete the following model{{ selectedRows.length > 1 ? 's' : '' }}?</p>
148 |           <ul>
149 |             <li class="font-bold" v-for="row in selectedRows" :key="row.name">{{ row.name }}</li>
150 |           </ul>
151 |         </div>
152 | 
153 |         <template #footer>
154 |           <div class="flex flex-row gap-4">
155 |             <UButton class="w-[80px] justify-center" color="primary" variant="solid" @click="onDeleteModel">Ok</UButton>
156 |             <UButton class="w-[80px] justify-center" color="white" variant="solid" @click="onCancel">Cancel</UButton>
157 |           </div>
158 |         </template>
159 |       </UCard>
160 |     </UModal>
161 |   </div>
162 | </template>
163 | 


--------------------------------------------------------------------------------