upskil.dev

English

French
Hebrew

English

French
Hebrew

Appearance

Shop
CommunityJoin Our PatreonDonate

Sponsored Ads

Sponsored Ads

LLM ​

Coming Soon (PAID)

You will learn how to make your own personal LLM.

What you will need: ​

UI/UX ​

Wireframes

Requirements ​

Download ollama

https://github.com/ollama/ollama

Download a model

https://ollama.com/library

Open a terminal and run an ollama model

ollama run llama3.2

Functional Requirements ​

  • Type a prompt and get a response
  • Quick prompt menu
  • Supports deepseek R1

Create a new Tauri App ​

Create a new tauri app and run it

bash
nvm use 22.13
yarn create tauri-app
cd tauri-app
yarn
yarn tauri dev

Install dependencies ​

Yarn packages

bash
yarn run tauri add store
yarn add vue-router

Configuration ​

Set up the configuration for tailwind and the tauri store plugin.

index.html - Add the tailwind CDN

/src/main.js - Set up vue and vue-router

/src-tauri/src/lib.rs - this should be updated automatically by the yarn run tauri add store command.

The Code ​

All components live in /components/.

You will need to add your own logo to the /public/ directory and replace the logo image in Nav.vue. For example /public/logo.png.

Test the App ​

yarn tauri dev

Build the App for Release ​

bash
yarn tauri build

Notes ​

  • Building produces large files (gigs)

Adding Pinia (optional) ​

If you'd like to use Pinia, here is how you'd do that. The stores folder is in the root of the application.

Add Pinia

yarn add pinia

How to add Pinia to vue and use in a component:

javascript
import { createApp } from "vue";
import { createMemoryHistory, createRouter } from 'vue-router'
import { createPinia } from 'pinia'
import App from "./App.vue";
import Settings from './components/Component.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

const routes = [
    { path: '/component', component: Component },
]
const router = createRouter({
    history: createMemoryHistory(),
    routes,
})

app.use(router)

app.mount("#app");
javascript
import { defineStore } from "pinia";
import { Store } from "@tauri-apps/plugin-store";

export const dataStore = defineStore("dataStore", {
  state: () => {
    return {
      db: new Store("store.bin"),
      name: 'My Store',
      counter: 0,
      todos:[],
    }
  },
  getters: {
    doubleCount: (state) => state.counter * 2,
    oddOrEven: (state) => {
      if (state.counter % 2 === 0) return 'even'
      return 'odd'
    }
  },
  actions: {
    increment() {
      this.counter++
    },
    decrement() {
      if (this.counter > 0){
        this.counter--
      }
    },
    adToCart(x) {
      this.cart.push(x)
    },
  }
});
vue
<script setup>
import { ref, onMounted } from "vue";
import { dataStore } from "../../stores/store";

const store = dataStore();

const all_todos = ref([])

async function creteDatabase() {
    await store.db.set('todos', all_todos.value);
}

async function getAllTodos() {
    all_todos.value = await store.db.get('todos')
}

onMounted(() => {
    getAllTodos()
})

</script>

<template>
    {{store.name}}
    {{all_todos}}
</template>

Update Dec. 2024 ​

Below is an example Vue component using Tauri Store.

Tauri Store Example
vue
<script setup>
import { ref,computed,onMounted } from 'vue';
import { LazyStore } from '@tauri-apps/plugin-store';
const store = new LazyStore('settings.json', { autoSave: true });

const info = ref({first_name:"",last_name:""})

async function create(){
    await store.set('info', { first_name: info.value.first_name, last_name: info.value.last_name});
}

async function kill(){
    await store.delete('info');
}

async function increment() {
    count.value++;
    info.value = await store.get('info')
}

async function load_db(){
    info.value = await store.get('info');
}

onMounted(()=>{
    load_db()
})

</script>

<template>
<div>
  <div class="p-10">
    <h1 class="text-3xl">WELCOME TO THE APP!</h1>
    {{info}}
    <form>
        <input v-model="info.first_name" name="first_name"/>
        <input v-model="info.last_name" name="last_name"/>
    </form>
    <button @click="create">CREATE</button>
    <button @click="increment">GET</button>
    <button @click="kill">DELETE</button>
  </div>

</div>
</template>

Resources ​