move desktop -> app

app/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/electron",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser"
+}

app/.gitignore

@@ -0,0 +1,92 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Webpack
+.webpack/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/

app/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "avoid"
+}

app/README.md

@@ -0,0 +1,27 @@
+# Desktop
+
+_Note: the Ollama desktop app is a work in progress and is not ready yet for general use._
+
+This app builds upon Ollama to provide a desktop experience for running models.
+
+## Developing
+
+In the background run the ollama server `ollama.py`:
+
+```
+poetry -C .. run ollama serve
+```
+
+Then run the desktop app with `npm start`:
+
+```
+npm install
+npm start
+```
+
+## Coming soon
+
+- Browse the latest available models on Hugging Face and other sources
+- Keep track of previous conversations with models
+- Switch quickly between models
+- Connect to remote Ollama servers to run models

app/forge.config.ts

@@ -0,0 +1,67 @@
+import type { ForgeConfig } from '@electron-forge/shared-types'
+import { MakerSquirrel } from '@electron-forge/maker-squirrel'
+import { MakerZIP } from '@electron-forge/maker-zip'
+import { MakerDeb } from '@electron-forge/maker-deb'
+import { MakerRpm } from '@electron-forge/maker-rpm'
+import { PublisherGithub } from '@electron-forge/publisher-github'
+import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-natives'
+import { WebpackPlugin } from '@electron-forge/plugin-webpack'
+
+import { mainConfig } from './webpack.main.config'
+import { rendererConfig } from './webpack.renderer.config'
+
+const config: ForgeConfig = {
+  packagerConfig: {
+    asar: true,
+    icon: './images/icon',
+    extraResource: ['../dist/ollama'],
+    ...(process.env.SIGN
+      ? {
+          osxSign: {
+            identity: process.env.APPLE_IDENTITY,
+          },
+          osxNotarize: {
+            tool: 'notarytool',
+            appleId: process.env.APPLE_ID || '',
+            appleIdPassword: process.env.APPLE_PASSWORD || '',
+            teamId: process.env.APPLE_TEAM_ID || '',
+          },
+        }
+      : {}),
+  },
+  rebuildConfig: {},
+  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
+  publishers: [
+    new PublisherGithub({
+      repository: {
+        name: 'ollama',
+        owner: 'jmorganca',
+      },
+      draft: false,
+      prerelease: true,
+    }),
+  ],
+  plugins: [
+    new AutoUnpackNativesPlugin({}),
+    new WebpackPlugin({
+      mainConfig,
+      devContentSecurityPolicy: `default-src * 'unsafe-eval' 'unsafe-inline'`,
+      renderer: {
+        config: rendererConfig,
+        nodeIntegration: true,
+        entryPoints: [
+          {
+            html: './src/index.html',
+            js: './src/renderer.tsx',
+            name: 'main_window',
+            preload: {
+              js: './src/preload.ts',
+            },
+          },
+        ],
+      },
+    }),
+  ],
+}
+
+export default config

app/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "ollama",
+  "productName": "Ollama",
+  "version": "0.0.2",
+  "description": "ollama",
+  "main": ".webpack/main",
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "package:sign": "SIGN=1 electron-forge package",
+    "make": "electron-forge make",
+    "make:sign": "SIGN=1 electron-forge package",
+    "publish": "SIGN=1 electron-forge publish",
+    "lint": "eslint --ext .ts,.tsx ."
+  },
+  "keywords": [],
+  "author": {
+    "name": "Jeffrey Morgan",
+    "email": "jmorganca@gmail.com"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@electron-forge/cli": "^6.2.1",
+    "@electron-forge/maker-deb": "^6.2.1",
+    "@electron-forge/maker-rpm": "^6.2.1",
+    "@electron-forge/maker-squirrel": "^6.2.1",
+    "@electron-forge/maker-zip": "^6.2.1",
+    "@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
+    "@electron-forge/plugin-webpack": "^6.2.1",
+    "@electron-forge/publisher-github": "^6.2.1",
+    "@types/chmodr": "^1.0.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "@vercel/webpack-asset-relocator-loader": "^1.7.3",
+    "babel-loader": "^9.1.2",
+    "chmodr": "^1.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "electron": "25.2.0",
+    "eslint": "^8.43.0",
+    "eslint-plugin-import": "^2.27.5",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
+    "node-loader": "^2.0.0",
+    "postcss": "^8.4.24",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^8.5.1",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "style-loader": "^3.3.3",
+    "tailwindcss": "^3.3.2",
+    "ts-loader": "^9.4.3",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.5.4",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "dependencies": {
+    "@electron/remote": "^2.0.10",
+    "@types/node": "^20.3.1",
+    "electron-squirrel-startup": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

app/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

app/src/app.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  background: transparent;
+}
+
+.drag {
+  -webkit-app-region: drag;
+}
+
+.blink {
+  -webkit-animation: 1s blink step-end infinite;
+  -moz-animation: 1s blink step-end infinite;
+  -ms-animation: 1s blink step-end infinite;
+  -o-animation: 1s blink step-end infinite;
+  animation: 1s blink step-end infinite;
+}
+
+@keyframes blink {
+  from,
+  to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}

app/src/app.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import path from 'path'
+import os from 'os'
+import { dialog, getCurrentWindow } from '@electron/remote'
+
+const API_URL = 'http://127.0.0.1:7734'
+
+type Message = {
+  sender: 'bot' | 'human'
+  content: string
+}
+
+const userInfo = os.userInfo()
+
+async function generate(prompt: string, model: string, callback: (res: string) => void) {
+  const result = await fetch(`${API_URL}/generate`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      prompt,
+      model,
+    }),
+  })
+
+  if (!result.ok) {
+    return
+  }
+
+  let reader = result.body.getReader()
+
+  while (true) {
+    const { done, value } = await reader.read()
+
+    if (done) {
+      break
+    }
+
+    let decoder = new TextDecoder()
+    let str = decoder.decode(value)
+
+    let re = /}\s*{/g
+    str = '[' + str.replace(re, '},{') + ']'
+    let messages = JSON.parse(str)
+
+    for (const message of messages) {
+      const choice = message.choices[0]
+
+      callback(choice.text)
+
+      if (choice.finish_reason === 'stop') {
+        break
+      }
+    }
+  }
+
+  return
+}
+
+export default function () {
+  const [prompt, setPrompt] = useState('')
+  const [messages, setMessages] = useState<Message[]>([])
+  const [model, setModel] = useState('')
+  const [generating, setGenerating] = useState(false)
+
+  return (
+    <div className='flex min-h-screen flex-1 flex-col justify-between bg-white'>
+      <header className='drag sticky top-0 z-50 flex h-14 w-full flex-row items-center border-b border-black/10 bg-white/75 backdrop-blur-md'>
+        <div className='mx-auto w-full max-w-xl leading-none'>
+          <h1 className='text-sm font-medium'>{path.basename(model).replace('.bin', '')}</h1>
+        </div>
+      </header>
+      {model ? (
+        <section className='mx-auto mb-10 w-full max-w-xl flex-1 break-words'>
+          {messages.map((m, i) => (
+            <div className='my-4 flex gap-4' key={i}>
+              <div className='flex-none pr-1 text-lg'>
+                {m.sender === 'human' ? (
+                  <div className='mt-px flex h-6 w-6 items-center justify-center rounded-md bg-neutral-200 text-sm text-neutral-700'>
+                    {userInfo.username[0].toUpperCase()}
+                  </div>
+                ) : (
+                  <div className='mt-0.5 flex h-6 w-6 items-center justify-center rounded-md bg-blue-600 text-sm text-white'>
+                    {path.basename(model)[0].toUpperCase()}
+                  </div>
+                )}
+              </div>
+              <div className='flex-1 text-gray-800'>
+                {m.content}
+                {m.sender === 'bot' && generating && i === messages.length - 1 && (
+                  <span className='blink relative -top-[3px] left-1 text-[10px]'>█</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </section>
+      ) : (
+        <section className='flex flex-1 select-none flex-col items-center justify-center pb-20'>
+          <h2 className='text-3xl font-light text-neutral-400'>No model selected</h2>
+          <button
+            onClick={async () => {
+              const res = await dialog.showOpenDialog(getCurrentWindow(), {
+                properties: ['openFile', 'multiSelections'],
+              })
+              if (res.canceled) {
+                return
+              }
+
+              setModel(res.filePaths[0])
+            }}
+            className='rounded-dm my-8 rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:brightness-110'
+          >
+            Open file...
+          </button>
+        </section>
+      )}
+      <div className='sticky bottom-0 bg-gradient-to-b from-transparent to-white'>
+        {model && (
+          <textarea
+            autoFocus
+            rows={1}
+            value={prompt}
+            placeholder='Send a message...'
+            onChange={e => setPrompt(e.target.value)}
+            className='mx-auto my-4 block w-full max-w-xl resize-none rounded-xl border border-gray-200 px-5 py-3.5 text-[15px] shadow-lg shadow-black/5 focus:outline-none'
+            onKeyDownCapture={async e => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+
+                if (generating) {
+                  return
+                }
+
+                if (!prompt) {
+                  return
+                }
+
+                await setMessages(messages => {
+                  return [...messages, { sender: 'human', content: prompt }, { sender: 'bot', content: '' }]
+                })
+
+                setPrompt('')
+
+                setGenerating(true)
+                await generate(prompt, model, res => {
+                  setMessages(messages => {
+                    let last = messages[messages.length - 1]
+                    return [...messages.slice(0, messages.length - 1), { ...last, content: last.content + res }]
+                  })
+                })
+                setGenerating(false)
+              }
+            }}
+          ></textarea>
+        )}
+      </div>
+    </div>
+  )
+}

app/src/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

app/src/index.ts

@@ -0,0 +1,104 @@
+import { app, BrowserWindow, autoUpdater, dialog } from 'electron'
+import { spawn } from 'child_process'
+import * as path from 'path'
+
+require('@electron/remote/main').initialize()
+
+// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
+// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
+// whether you're running in development or production).
+declare const MAIN_WINDOW_WEBPACK_ENTRY: string
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string
+
+// Handle creating/removing shortcuts on Windows when installing/uninstalling.
+if (require('electron-squirrel-startup')) {
+  app.quit()
+}
+
+const createWindow = (): void => {
+  // Create the browser window.
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    minWidth: 400,
+    minHeight: 300,
+    titleBarStyle: 'hiddenInset',
+    webPreferences: {
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  })
+
+  require('@electron/remote/main').enable(mainWindow.webContents)
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
+}
+
+// if the app is packaged then run the server
+if (app.isPackaged) {
+  const resources = process.resourcesPath
+  console.log(resources)
+
+  // Start the executable
+  const exec = path.join(resources, 'ollama', 'ollama')
+  console.log(`Starting ${exec}`)
+  const proc = spawn(exec, ['serve', '--port', '7734'])
+  proc.stdout.on('data', data => {
+    console.log(`server: ${data}`)
+  })
+  proc.stderr.on('data', data => {
+    console.error(`server: ${data}`)
+  })
+
+  process.on('exit', () => {
+    proc.kill()
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.
+autoUpdater.setFeedURL({ url: `https://updates.ollama.ai/update/${process.platform}/${app.getVersion()}` })
+
+autoUpdater.checkForUpdates()
+setInterval(() => {
+  autoUpdater.checkForUpdates()
+}, 60000)
+
+autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
+  dialog
+    .showMessageBox({
+      type: 'info',
+      buttons: ['Restart Now', 'Later'],
+      title: 'New update available',
+      message: process.platform === 'win32' ? releaseNotes : releaseName,
+      detail: 'A new version of Ollama is available. Restart to apply the update.',
+    })
+    .then(returnValue => {
+      if (returnValue.response === 0) autoUpdater.quitAndInstall()
+    })
+})

app/src/renderer.tsx

@@ -0,0 +1,7 @@
+import App from './app'
+import './app.css'
+import { createRoot } from 'react-dom/client'
+
+const container = document.getElementById('app')
+const root = createRoot(container)
+root.render(<App />)

app/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {},
+  plugins: [],
+}

app/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "allowJs": true,
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "paths": {
+      "*": ["node_modules/*"]
+    },
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"]
+}

app/webpack.main.config.ts

@@ -0,0 +1,18 @@
+import type { Configuration } from 'webpack'
+
+import { rules } from './webpack.rules'
+
+export const mainConfig: Configuration = {
+  /**
+   * This is the main entry point for your application, it's the first file
+   * that runs in the main process.
+   */
+  entry: './src/index.ts',
+  // Put your normal webpack config below here
+  module: {
+    rules,
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
+  },
+}

app/webpack.plugins.ts

@@ -0,0 +1,10 @@
+import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+
+export const plugins = [
+  new ForkTsCheckerWebpackPlugin({
+    logger: 'webpack-infrastructure',
+  }),
+]

app/webpack.renderer.config.ts

@@ -0,0 +1,19 @@
+import type { Configuration } from 'webpack'
+
+import { rules } from './webpack.rules'
+import { plugins } from './webpack.plugins'
+
+rules.push({
+  test: /\.css$/,
+  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
+})
+
+export const rendererConfig: Configuration = {
+  module: {
+    rules,
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
+  },
+}

app/webpack.rules.ts

@@ -0,0 +1,31 @@
+import type { ModuleOptions } from 'webpack'
+
+export const rules: Required<ModuleOptions>['rules'] = [
+  // Add support for native node modules
+  {
+    // We're specifying native_modules in the test because the asset relocator loader generates a
+    // "fake" .node file which is really a cjs file.
+    test: /native_modules[/\\].+\.node$/,
+    use: 'node-loader',
+  },
+  {
+    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
+    parser: { amd: false },
+    use: {
+      loader: '@vercel/webpack-asset-relocator-loader',
+      options: {
+        outputAssetBase: 'native_modules',
+      },
+    },
+  },
+  {
+    test: /\.tsx?$/,
+    exclude: /(node_modules|\.webpack)/,
+    use: {
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true,
+      },
+    },
+  },
+]