From a24949a2f7fafa8bc5b342ab67666ec65d3068fe Mon Sep 17 00:00:00 2001
From: Jonas <kuhlenkampjonas@gmail.com>
Date: Wed, 7 Oct 2026 20:57:46 +0200
Subject: [PATCH] final styling

---
 package-lock.json                      | 123 -------------------------
 package.json                           |   4 -
 src/App.vue                            |   3 +-
 src/components/ContextView.vue         |  13 ++-
 src/components/EditView.vue            |  21 +++--
 src/components/EmbeddingPrompt.vue     |   6 +-
 src/components/EmbeddingVisualizer.vue |   7 +-
 src/components/MyButton.vue            |   2 +-
 src/components/MyRouterLink.vue        |   6 +-
 src/components/PromptInput.vue         |   7 +-
 src/components/PromptView.vue          |   1 +
 11 files changed, 45 insertions(+), 148 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e6ddf5d..fc9ce56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,7 @@
         "@tauri-apps/plugin-http": "^2.6.1",
         "@tauri-apps/plugin-opener": "^2.6.0",
         "@tauri-apps/plugin-store": "^2.4.5",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "tailwind-merge": "^3.7.0",
         "tailwindcss": "^4.3.3",
-        "umap-js": "^1.4.0",
         "vue": "^3.5.13",
         "vue-router": "^5.3.1"
       },
@@ -1436,27 +1432,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/class-variance-authority": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
-      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "funding": {
-        "url": "https://polar.sh/cva"
-      }
-    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
@@ -1558,12 +1533,6 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
-    "node_modules/is-any-array": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-0.1.1.tgz",
-      "integrity": "sha512-qTiELO+kpTKqPgxPYbshMERlzaFu29JDnpB8s3bjg+JkxBpw29/qqSaOdKv2pCdaG92rLGeG/zG2GauX58hfoA==",
-      "license": "MIT"
-    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -1863,79 +1832,6 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
-    "node_modules/ml-array-max": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ml-array-max/-/ml-array-max-2.0.0.tgz",
-      "integrity": "sha512-QQZ4kENwpWmyNb98UXRDFXrmtIXuXtt1+bSbda/2KA85+F+rrJP8hZk6QOkCQXM2Th9mUDYdq/PNByPdT9ID4A==",
-      "license": "MIT",
-      "dependencies": {
-        "is-any-array": "^3.0.0"
-      }
-    },
-    "node_modules/ml-array-max/node_modules/is-any-array": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-3.0.0.tgz",
-      "integrity": "sha512-o4h+tylWykC4BD1vaejp6gDxoM13bwW8FGuNs4yIKpj8xbBJcRxJx8vZpq0dCr7ZDEfeKjmsi/euolKhX6f/ww==",
-      "license": "MIT"
-    },
-    "node_modules/ml-array-min": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ml-array-min/-/ml-array-min-2.0.0.tgz",
-      "integrity": "sha512-GRj6Ky6sW9vGL6yIjgsHmXZ9YgrdmcQ8nCxPqEGeKc6dkfYg1XDYxGFxADUjNuZyoCd5PUscWAS4N+cFaX6hFg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-any-array": "^3.0.0"
-      }
-    },
-    "node_modules/ml-array-min/node_modules/is-any-array": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-3.0.0.tgz",
-      "integrity": "sha512-o4h+tylWykC4BD1vaejp6gDxoM13bwW8FGuNs4yIKpj8xbBJcRxJx8vZpq0dCr7ZDEfeKjmsi/euolKhX6f/ww==",
-      "license": "MIT"
-    },
-    "node_modules/ml-array-rescale": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ml-array-rescale/-/ml-array-rescale-2.0.0.tgz",
-      "integrity": "sha512-2GGtKfSno94/kIloWGvpp/U5Q5vLvLrza+SAaGsLeo6Xj4mEbA6Gqx+oTfZFkxnd1grT2X007HfJNs3T5BsiVg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-any-array": "^3.0.0",
-        "ml-array-max": "^2.0.0",
-        "ml-array-min": "^2.0.0"
-      }
-    },
-    "node_modules/ml-array-rescale/node_modules/is-any-array": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-3.0.0.tgz",
-      "integrity": "sha512-o4h+tylWykC4BD1vaejp6gDxoM13bwW8FGuNs4yIKpj8xbBJcRxJx8vZpq0dCr7ZDEfeKjmsi/euolKhX6f/ww==",
-      "license": "MIT"
-    },
-    "node_modules/ml-levenberg-marquardt": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ml-levenberg-marquardt/-/ml-levenberg-marquardt-2.1.1.tgz",
-      "integrity": "sha512-2+HwUqew4qFFFYujYlQtmFUrxCB4iJAPqnUYro3P831wj70eJZcANwcRaIMGUVaH9NDKzfYuA4N5u67KExmaRA==",
-      "license": "MIT",
-      "dependencies": {
-        "is-any-array": "^0.1.0",
-        "ml-matrix": "^6.4.1"
-      }
-    },
-    "node_modules/ml-matrix": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/ml-matrix/-/ml-matrix-6.15.0.tgz",
-      "integrity": "sha512-wFa1v6KP8bKp+fj0nYmRs1Pb5K4zRkXGKsOvLinvILENFIADncm4XlOI+S1M7yuACMGfI6cfk0IifDgd4j5xmw==",
-      "license": "MIT",
-      "dependencies": {
-        "is-any-array": "^3.0.0",
-        "ml-array-rescale": "^2.0.0"
-      }
-    },
-    "node_modules/ml-matrix/node_modules/is-any-array": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-3.0.0.tgz",
-      "integrity": "sha512-o4h+tylWykC4BD1vaejp6gDxoM13bwW8FGuNs4yIKpj8xbBJcRxJx8vZpq0dCr7ZDEfeKjmsi/euolKhX6f/ww==",
-      "license": "MIT"
-    },
     "node_modules/mlly": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
@@ -2154,16 +2050,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
-      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
@@ -2229,15 +2115,6 @@
       "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
       "license": "MIT"
     },
-    "node_modules/umap-js": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/umap-js/-/umap-js-1.4.0.tgz",
-      "integrity": "sha512-xxpviF9wUO6Nxrx+C58SoDgea+h2PnVaRPKDelWv0HotmY6BeWeh0kAPJoumfqUkzUvowGsYfMbnsWI0b9do+A==",
-      "license": "MIT",
-      "dependencies": {
-        "ml-levenberg-marquardt": "^2.0.0"
-      }
-    },
     "node_modules/unplugin": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.4.0.tgz",
diff --git a/package.json b/package.json
index 4dbecdb..dbdaedb 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,7 @@
     "@tauri-apps/plugin-http": "^2.6.1",
     "@tauri-apps/plugin-opener": "^2.6.0",
     "@tauri-apps/plugin-store": "^2.4.5",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
-    "umap-js": "^1.4.0",
     "vue": "^3.5.13",
     "vue-router": "^5.3.1"
   },
diff --git a/src/App.vue b/src/App.vue
index 8bc6695..f38ce73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Input from './components/Input.vue';
+import MyButton from './components/MyButton.vue';
 import {load, Store} from "@tauri-apps/plugin-store";
 import { invoke } from '@tauri-apps/api/core';
 
@@ -51,7 +52,7 @@ init();
           <Input placeholder="Ollama URL (z.B. http://localhost:11434)" class="w-full" v-model="ollama_url"/> <br>
           <Input placeholder="API Key (optional)" class="w-full" type="password" v-model="ollama_api_key"/> <br>
           <br>
-          <input value="Weiter" class="w-full border" type="submit"/>
+          <MyButton class="w-full" type="submit">Weiter</MyButton>
         </form>
       </div>
       <router-view v-slot="{ Component, route }" v-else>
diff --git a/src/components/ContextView.vue b/src/components/ContextView.vue
index d1942c3..7545719 100644
--- a/src/components/ContextView.vue
+++ b/src/components/ContextView.vue
@@ -1,8 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import MyRouterLink from './MyRouterLink.vue';
+
+</script>
 <template>
     <div>
-    <RouterLink to="/">Zurück zur Startseite</RouterLink>
-    <h1>Context Window einstellen</h1>
+        <h1 class="text-2xl font-bold">Context Window einstellen</h1>
+        <br>
+    <div class="w-xs">
+        <MyRouterLink to="/" :left="true">Zurück zur Startseite</MyRouterLink>
+    </div>
+    <br><br>
     Das Context Window muss beim Start des Ollama Servers als Environment-Variable gesetzt werden. Mehr Informationen <a href="https://docs.ollama.com/context-length" target="_blank" class="underline text-blue-700">hier.</a>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/components/EditView.vue b/src/components/EditView.vue
index a2d15dc..c84e77f 100644
--- a/src/components/EditView.vue
+++ b/src/components/EditView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
 import { ref } from 'vue';
+import MyRouterLink from './MyRouterLink.vue';
+import MyButton from './MyButton.vue';
 
 const initialized=ref(false);
 const models=ref([]);
@@ -44,17 +46,24 @@ async function save(){
 </script>
 <template>
     <div>
-    <RouterLink to="/">Zurück zur Startseite</RouterLink>
-    <h1>Modell bearbeiten</h1>
+    <h1 class="text-2xl font-bold">Modell bearbeiten</h1> 
+    <br>
+    <div class="w-xs">
+        <MyRouterLink to="/" :left="true">Zurück zur Startseite</MyRouterLink> <br><br>
+    </div>
     <p>Diese Funktion ist leider nicht für alle Modelle verfügbar.</p>
+    <br>
     <div v-if="initialized">
         <ul v-if="information==undefined">
-            <li @click="load_model(model.name)" v-for="model in models">{{ model.name }}</li>
+            <MyButton class="my-1" @click="load_model(model.name)" v-for="model in models">{{ model.name }}</MyButton>
         </ul>
         <form v-else @submit.prevent="save">
-            <button @click="information=undefined">Zurück zur Modellauswahl</button>
-            <textarea v-model="information.template" placeholder="Prompt Template" class="w-full"></textarea>
-            <textarea v-model="system_prompt" placeholder="System Prompt" class="w-full"></textarea>
+            <MyButton @click="information=undefined">Zurück zur Modellauswahl</MyButton>
+            <br><br><hr><br>
+            <textarea v-model="information.template" placeholder="Prompt Template" class="w-full" rows="20"></textarea>
+            <br><br><hr><br>
+            <textarea v-model="system_prompt" placeholder="System Prompt" class="w-full" rows="20"></textarea>
+            <br><br><hr><br>
             <input type="text" placeholder="Neuer Modellname" v-model="new_model">
             <input type="submit" value="Speichern"/>
         </form>
diff --git a/src/components/EmbeddingPrompt.vue b/src/components/EmbeddingPrompt.vue
index aa5fbac..0e27dcb 100644
--- a/src/components/EmbeddingPrompt.vue
+++ b/src/components/EmbeddingPrompt.vue
@@ -20,6 +20,7 @@ async function execute_prompt(ev){
     }catch(e){
         window.alert("Fehler beim Ausführen des Prompts: "+e);
     }
+    console.log(embedding);
     if(embedding!=undefined){
         dataset.value.push({vector: embedding, label: prompt.value});
         prompt.value="";
@@ -42,12 +43,13 @@ init();
         </div>
     <br>
     <EmbeddingVisualizer :dataset="dataset"/>
-    <select class="w-[500px] bg-gray-900" v-model="model">
+    <select class="w-[500px] text-black" v-model="model">
         <option value="" disabled></option>
         <option :value="m.name" v-for="m in model_options">{{ m.name }}</option>
     </select>
-    <MyButton class="ml-2" @click="dataset=[]">Alle Punkte löschen</MyButton>
+    <MyButton class="ml-2 bg-red-800 hover:bg-red-700" @click="dataset=[]">Alle Punkte löschen</MyButton>
     <form @submit="execute_prompt">
+        <br><br>
         <PromptInput v-model="prompt"/>
     </form>
     </div>
diff --git a/src/components/EmbeddingVisualizer.vue b/src/components/EmbeddingVisualizer.vue
index 00c819b..c0d1703 100644
--- a/src/components/EmbeddingVisualizer.vue
+++ b/src/components/EmbeddingVisualizer.vue
@@ -1,6 +1,5 @@
 
 <script setup lang="ts">
-import { UMAP } from 'umap-js';
 import { onMounted, ref, useTemplateRef, watch } from "vue";
 const canvas = useTemplateRef("canvas");
 
@@ -78,6 +77,7 @@ function draw(ctx, width, height, pointSize, showConnections, showLabels, points
     ctx.stroke();
   }
 
+  ctx.strokeStyle = "#94a3b8";
   // Draw connections to nearest neighbors
   if (showConnections && projected.length > 1) {
     ctx.strokeStyle = "#94a3b8";
@@ -110,6 +110,7 @@ function draw(ctx, width, height, pointSize, showConnections, showLabels, points
     });
   }
 
+  ctx.fillStyle = "#e5e7eb"
   // Draw points
   projected.forEach((p, i) => {
     const x = padding + p[0] * (width - 2 * padding);
@@ -121,9 +122,7 @@ function draw(ctx, width, height, pointSize, showConnections, showLabels, points
 
     // Draw labels
     if (showLabels) {
-      ctx.fillStyle = document.documentElement.classList.contains("dark")
-        ? "#e5e7eb"
-        : "#374151";
+      ctx.fillStyle = "#e5e7eb"
       ctx.font = "12px Inter, sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(points[i].label, x, y - pointSize - 5);
diff --git a/src/components/MyButton.vue b/src/components/MyButton.vue
index 2f75d4d..dcde5ec 100644
--- a/src/components/MyButton.vue
+++ b/src/components/MyButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
 </script>
 <template>
-    <button class="bg-red-800 p-2 m-1 rounded-md"><slot></slot></button>
+    <button class="p-2 m-1 rounded-md cursor-pointertext-white bg-green-900 hover:bg-green-700 transition-all ease-in-out duration-300 transform hover:scale-101"><slot></slot></button>
 </template>
\ No newline at end of file
diff --git a/src/components/MyRouterLink.vue b/src/components/MyRouterLink.vue
index 0ae177d..472ba28 100644
--- a/src/components/MyRouterLink.vue
+++ b/src/components/MyRouterLink.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { MoveLeft, MoveRight } from '@lucide/vue';
+
 const {to, left} = defineProps(["to","left"]);
 </script>
 <template>
 <RouterLink :to="to">
     <div class="text-xl p-6 rounded-xl text-white bg-green-900 hover:bg-green-700 transition-all ease-in-out duration-300 transform hover:scale-101 relative flex items-center">
-        <div class="absolute left-4 h-full flex items-center justify-center" v-if="left">Pfeil</div>
+        <div class="absolute left-4 h-full flex items-center justify-center" v-if="left"><MoveLeft/></div>
         <div v-if="left" class="absolute right-4"><slot></slot></div>
         <div v-if="!left" class="absolute left-4"><slot></slot></div>
-        <div class="absolute right-4 h-full flex items-center justify-center" v-if="!left">Pfeil</div>
+        <div class="absolute right-4 h-full flex items-center justify-center" v-if="!left"><MoveRight/></div>
     </div>
 </RouterLink>
 </template>
\ No newline at end of file
diff --git a/src/components/PromptInput.vue b/src/components/PromptInput.vue
index 47a3c1d..32b5700 100644
--- a/src/components/PromptInput.vue
+++ b/src/components/PromptInput.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { MoveUp } from '@lucide/vue';
 import Input from './Input.vue';
 let {placeholder} = defineProps({
     placeholder: {
@@ -6,9 +7,11 @@ let {placeholder} = defineProps({
         default: "Prompt"
     }
 });
+const model=defineModel();
 </script>
 <template>
-    <div class="relative">
-        <Input :placeholder="placeholder" class="absolute w-full h-full top-0 bottom-0 left-0 right-0 p-6 my-4"/>
+    <div class="relative flex align-center justify-center flex-col">
+        <Input v-model="model" :placeholder="placeholder" class="absolute w-full h-full p-6 my-4"/>
+        <button type="submit" class="absolute right-2 bg-green-800 hover:bg-green-700 transition-all ease-in-out duration-300 cursor-pointer rounded-full p-2"><MoveUp/></button>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/components/PromptView.vue b/src/components/PromptView.vue
index 8cb1229..388cb4b 100644
--- a/src/components/PromptView.vue
+++ b/src/components/PromptView.vue
@@ -59,6 +59,7 @@ init();
         </select>
         Thinking: <input type="checkbox" v-model="thinking" checked>
         Temperature: <input type="number" v-model="temperature" max="1" min="0" step="0.01" class="w-16 border">
+        <br><br><br>
         <PromptInput v-model="prompt"/>
         <input type="submit" value="Submit" class="hidden">
     </form>