New Features & Enhancements

electron/builder.json

@@ -0,0 +1,18 @@
+{
+    "build": {
+        "icons": {
+            "src": "frontend/public/favicon/android-chrome-256x256.png",
+            "dest": "icon.icns",
+            "type": "png"
+        },
+      "directories": ["dist"],
+      "mac": {
+        "target": "darwin-x64",
+        "packageType": "msi"
+      },
+      "win32": {
+        "target": "win-x64",
+        "packageType": "msi"
+      }
+    }
+  }

electron/main.js

@@ -0,0 +1,29 @@
+const { app, BrowserWindow } = require('electron/main')
+const path = require('node:path')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    fullscreen: true,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    },
+  })
+
+  win.loadURL('http://localhost:5173')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})

electron/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ollama-gui",
+  "version": "1.0.0",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "electron .",
+    "build": "electron-builder"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/talperets/ollama-gui.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/talperets/ollama-gui/issues"
+  },
+  "homepage": "https://github.com/talperets/ollama-gui#readme",
+  "description": "",
+  "devDependencies": {
+    "electron": "^34.0.2",
+    "electron-builder": "^25.1.8"
+  }
+}

electron/preload.js

@@ -0,0 +1,10 @@
+window.addEventListener('DOMContentLoaded', () => {
+    const replaceText = (selector, text) => {
+      const element = document.getElementById(selector)
+      if (element) element.innerText = text
+    }
+
+    for (const type of ['chrome', 'node', 'electron']) {
+      replaceText(`${type}-version`, process.versions[type])
+    }
+  })

package.json

@@ -15,23 +15,27 @@
     "@types/markdown-it": "^13.0.7",
     "@vueuse/core": "^10.5.0",
     "autoprefixer": "^10.4.16",
+    "clipboard": "^2.0.11",
     "date-fns": "^3.0.1",
     "dexie": "^3.2.4",
     "gravatar-url": "^4.0.1",
     "highlight.js": "^11.9.0",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^8.6.7",
-    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-highlightjs": "^4.2.0",
     "postcss": "^8.4.31",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.15",
     "uuid": "^9.0.1",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-markdown-render": "^2.2.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.3",
     "@types/uuid": "^9.0.5",
     "@vitejs/plugin-vue": "^4.2.3",
+    "tailwind-scrollbar": "^4.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.0.10",
     "vue-tsc": "^2.1.10"

src/assets/atom-one-dark.css

@@ -0,0 +1,91 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+  code.hljs {
+    padding: 3px 5px
+  }
+  /*
+
+  Atom One Dark by Daniel Gamage
+  Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+  base:    #282c34
+  mono-1:  #abb2bf
+  mono-2:  #818896
+  mono-3:  #5c6370
+  hue-1:   #56b6c2
+  hue-2:   #61aeee
+  hue-3:   #c678dd
+  hue-4:   #98c379
+  hue-5:   #e06c75
+  hue-5-2: #be5046
+  hue-6:   #d19a66
+  hue-6-2: #e6c07b
+
+  */
+  .hljs {
+    color: #abb2bf;
+    background: #282c34;
+    border-radius: 10px;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic
+  }
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd
+  }
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75
+  }
+  .hljs-literal {
+    color: #56b6c2
+  }
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379
+  }
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66
+  }
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee
+  }
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b
+  }
+  .hljs-emphasis {
+    font-style: italic
+  }
+  .hljs-strong {
+    font-weight: bold
+  }
+  .hljs-link {
+    text-decoration: underline
+  }

src/components/ChatInput.vue

@@ -1,28 +1,47 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useTextareaAutosize } from '@vueuse/core'
 import { useChats } from '../services/chat.ts'
-import { IconPlayerStopFilled, IconSend, IconWhirl } from '@tabler/icons-vue'
+import { IconPlayerStopFilled, IconSend, IconWhirl, IconCameraUp } from '@tabler/icons-vue'
+import testConnection from '../services/testConnection.ts'
 
 const { textarea, input: userInput } = useTextareaAutosize({ input: '' })
 const { addUserMessage, abort, hasActiveChat } = useChats()
 
 const isInputValid = computed<boolean>(() => !!userInput.value.trim())
 const isAiResponding = ref(false)
 const flag = ref(true)
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFile = ref<File | null>(null)
+const base64Images = ref<string[]>([])
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+    // Convert to base64
+    const reader = new FileReader()
+    reader.onload = () => {
+      base64Images.value = [reader.result as string]
+    }
+    reader.readAsDataURL(selectedFile.value)
+  }
+}
+
 
 const onSubmit = () => {
   if (isAiResponding.value) {
     abort()
     isAiResponding.value = false
     return
   }
-
   if (isInputValid.value) {
-    addUserMessage(userInput.value.trim()).then(() => {
+    addUserMessage(userInput.value.trim(), base64Images.value).then(() => {
       isAiResponding.value = false
     })
     userInput.value = ''
+    base64Images.value = []
+    selectedFile.value = null
     isAiResponding.value = true
   }
 }
@@ -42,6 +61,12 @@ const onKeydown = (event: KeyboardEvent) => {
     onSubmit()
   }
 }
+const isConnected = ref(true)
+onMounted(async () => {
+  if (!(await testConnection())) {
+    isConnected.value = false
+  }
+})
 
 const handleCompositionStart = () => {
   flag.value = false
@@ -56,6 +81,7 @@ const handleCompositionEnd = () => {
   <form class="mt-2" @submit.prevent="onSubmit">
     <div class="relative">
       <textarea
+        :disabled="!isConnected"
         ref="textarea"
         v-model="userInput"
         class="block max-h-[500px] w-full resize-none rounded-xl border-none bg-gray-50 p-4 pl-4 pr-20 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:text-gray-50 dark:placeholder-gray-300 dark:focus:ring-blue-600 sm:text-base"
@@ -64,6 +90,26 @@ const handleCompositionEnd = () => {
         @compositionstart="handleCompositionStart"
         @compositionend="handleCompositionEnd"
       ></textarea>
+      <input
+      type="file"
+      ref="fileInput"
+      class="hidden"
+      accept="image/*"
+      @change="onFileChange"
+    />
+
+    <button
+      type="button"
+      @click="fileInput?.click()"
+      :class="{
+        'bg-green-600 hover:bg-green-700': selectedFile,
+        'bg-blue-700 hover:bg-blue-800': !selectedFile
+      }"
+      class="group absolute bottom-2 right-14 flex size-10 items-center justify-center rounded-lg text-sm font-medium text-white transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800"
+    >
+      <IconCameraUp/>
+    </button>
+
       <button
         type="submit"
         :disabled="isInputValid == false && isAiResponding == false"

src/components/ChatMessages.vue

@@ -51,9 +51,10 @@ const visibleMessages = computed(() =>
 
 <template>
   <div
-    ref="chatElement"
-    class="flex-1 overflow-y-auto scroll-smooth rounded-xl p-4 text-sm leading-6 text-gray-900 dark:text-gray-100 sm:text-base sm:leading-7"
-  >
+  ref="chatElement"
+  class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-700 dark:scrollbar-track-gray-900 scroll-smooth rounded-xl mx-auto-full p-4 text-sm leading-6 text-gray-900 dark:text-gray-100 sm:text-base sm:leading-7"
+>
+
     <ChatMessage v-for="message in visibleMessages" :message="message" />
   </div>
 </template>