Styling

index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

src/App.vue

@@ -38,10 +38,14 @@ async function init(){
 init();
 </script>
 <template>
-  <main class="w-screen h-screen overflow-hidden flex items-center justify-center p-10" v-if="initialized">
+  <main class="w-screen h-screen overflow-hidden flex items-center justify-center p-10 bg-black text-white" v-if="initialized">
-    <div class="w-full h-full border rounded-2xl transition-all ease-in-out duration-200 p-6 overflow-y-scroll">
+    <div class="w-full h-full border rounded-2xl transition-all ease-in-out duration-200 p-6 overflow-y-scroll border-gray-600 bg-gray-900">
+      <h1 class="text-4xl font-extrabold">Produkt zur Hausarbeit von Jonas Kuhlenkamp</h1>
+      <br>
+      <hr>
+      <br>
       <div v-if="!home_page">
-        <h1>Moin!</h1>
+        <h2 class="text-2xl font-bold">Konfiguration der Ollama API</h2>
         <p>Mit dieser App kannst du verschiedene Modelle über die Ollama API ausprobieren und vergleichen.</p>
         <form @submit="submit">
           <Input placeholder="Ollama URL (z.B. http://localhost:11434)" class="w-full" v-model="ollama_url"/> <br>
@@ -50,8 +54,40 @@ init();
           <input value="Weiter" class="w-full border" type="submit"/>
         </form>
       </div>
-      <RouterView v-else/>
+      <router-view v-slot="{ Component, route }" v-else>
+      <!-- Use a custom transition or fallback to `fade` -->
+      <transition :name="<string> route.meta.transition || 'fade'">
+        <component :is="Component" />
+      </transition>
+</router-view>
     </div>
   </main>
 
-</template>
+</template>
+<style>
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  transform: translateX(0px);
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(100px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+  transform: translateX(0px);
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-100px);
+}
+</style>

src/components/ContextView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts"></script>
 <template>
+    <div>
     <RouterLink to="/">Zurück zur Startseite</RouterLink>
     <h1>Context Window einstellen</h1>
     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>

src/components/EditView.vue

@@ -43,6 +43,7 @@ async function save(){
 }
 </script>
 <template>
+    <div>
     <RouterLink to="/">Zurück zur Startseite</RouterLink>
     <h1>Modell bearbeiten</h1>
     <p>Diese Funktion ist leider nicht für alle Modelle verfügbar.</p>
@@ -62,5 +63,5 @@ async function save(){
         Rufe die Liste der Modelle bei Ollama ab...
     </div>
 
-
+</div>
 </template>

src/components/EmbeddingPrompt.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue';
 import EmbeddingVisualizer from './EmbeddingVisualizer.vue';
 import PromptInput from './PromptInput.vue';
+import MyButton from './MyButton.vue';
+import MyRouterLink from './MyRouterLink.vue';
 import { invoke } from '@tauri-apps/api/core';
 
 const dataset=ref([]);
@@ -32,14 +34,21 @@ init();
 
 </script>
 <template>
-    <RouterLink to="/">Zurück zur Startseite</RouterLink>
+    <div>
+        <h2 class="text-2xl font-bold">Embedding-Modelle</h2>
+        <br>
+        <div class="w-md">
+            <MyRouterLink :left="true" to="/">Zurück zur Startseite</MyRouterLink>
+        </div>
+    <br>
     <EmbeddingVisualizer :dataset="dataset"/>
-    <select class="w-[500px]" v-model="model">
+    <select class="w-[500px] bg-gray-900" v-model="model">
         <option value="" disabled></option>
         <option :value="m.name" v-for="m in model_options">{{ m.name }}</option>
     </select>
-    <button class="border ml-2" @click="dataset=[]">Punkte löschen</button>
+    <MyButton class="ml-2" @click="dataset=[]">Alle Punkte löschen</MyButton>
     <form @submit="execute_prompt">
         <PromptInput v-model="prompt"/>
     </form>
+    </div>
 </template>

src/components/EmbeddingVisualizer.vue

@@ -149,5 +149,5 @@ onMounted(()=>{
 </script>
 
 <template>
-    <canvas ref="canvas" class="w-[500px] h-[500px] border border-gray-200 rounded-lg bg-gray-50" width="500" height="500"></canvas>
+    <canvas ref="canvas" class="w-[500px] h-[500px] border border-gray-700 rounded-lg bg-gray-800" width="500" height="500"></canvas>
 </template>

src/components/HomeView.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import MyRouterLink from './MyRouterLink.vue';
 </script>
 <template>
-    <main>
+    <main class="w-md">
-        <h1>Home</h1>
+        <h1 class="text-2xl font-bold">Home</h1>
-        <RouterLink to="/pull">Modelle runterladen</RouterLink> <br>
+        <br>
-        <RouterLink to="/embedding">Embedding-Modelle</RouterLink> <br>
+        <MyRouterLink to="/pull" :left="false">Modelle runterladen</MyRouterLink> <br>
-        <RouterLink to="/normal">"Normale" Modelle</RouterLink> <br>
+        <MyRouterLink to="/embedding" :left="false">Embedding-Modelle</MyRouterLink> <br>
-        <RouterLink to="/context">Context Window einstellen</RouterLink> <br>
+        <MyRouterLink to="/normal" :left="false">"Normale" Modelle</MyRouterLink> <br>
-        <RouterLink to="/edit">Modell bearbeiten</RouterLink> <br>
+        <MyRouterLink to="/context" :left="false">Context Window einstellen</MyRouterLink> <br>
+        <MyRouterLink to="/edit" :left="false">Modell bearbeiten</MyRouterLink> <br>
     </main>
 </template>

src/components/Input.vue

@@ -10,5 +10,5 @@
     });
 </script>
 <template>
-    <input :placeholder="placeholder" v-model="model" :type="type" class="border rounded-md my-1"/>
+    <input :placeholder="placeholder" v-model="model" :type="type" class="border rounded-md my-1 rounded-full w-full border-2 p-4 text-xl border-gray-700"/>
 </template>

src/components/MyButton.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+</script>
+<template>
+    <button class="bg-red-800 p-2 m-1 rounded-md"><slot></slot></button>
+</template>

src/components/MyRouterLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+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 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>
+</RouterLink>
+</template>

src/components/PromptInput.vue

@@ -8,5 +8,7 @@ let {placeholder} = defineProps({
 });
 </script>
 <template>
-    <Input class="rounded-full w-full border-2 p-4 text-xl" :placeholder="placeholder"/>
+    <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>
 </template>

src/components/PromptView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import PromptInput from './PromptInput.vue';
+import MyRouterLink from './MyRouterLink.vue';
 import { invoke } from '@tauri-apps/api/core';
 
 
@@ -10,11 +11,10 @@ const thinking_response=ref("");
 const model=ref("");
 const model_options=ref([]);
 const thinking=ref(true);
-const temperature=ref(0.2);
+const temperature=ref(1);
 
 
-async function submit(ev){
+async function submit(){
-    ev.preventDefault();
     response.value="Generiere eine Antwort..."
     thinking_response.value="";
 
@@ -38,23 +38,29 @@ init();
 
 </script>
 <template>
-    <RouterLink to="/">Zurück zur Startseite</RouterLink>
+    <div class="mb-4">
+    <div class="w-xl">
+        <MyRouterLink to="/" :left="true">Zurück zur Startseite</MyRouterLink>
+    </div>
     <br>
-    <br>
+    <div class="whitespace-pre-line bg-gray-800 rounded-md p-2" v-if="thinking_response">
-    <i class="whitespace-pre-line">{{ thinking_response }}</i> <br>
+        <br>
-    <br>
+        <i v-if="thinking_response">{{ thinking_response }}</i> <br>
-    <div class="whitespace-pre-line">{{ response }}</div>
+        <br>
+    </div>
+    <div class="whitespace-pre-line bg-gray-800 rounded-md p-2" v-if="response">{{ response }}</div>
     <br>
 
-    <form @submit="submit">
+    <form @submit.prevent="submit">
 
-        <select class="w-[500px]" v-model="model">
+        <select class="w-[500px] text-black" v-model="model" required>
             <option value="" disabled></option>
             <option :value="m.name" v-for="m in model_options">{{ m.name }}</option>
         </select>
-        Thinking: <input type="checkbox" v-model="thinking">
+        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">
         <PromptInput v-model="prompt"/>
-        <input type="submit" value="Antwort generieren" class="border rounded-md p-2 cursor-pointer">
+        <input type="submit" value="Submit" class="hidden">
     </form>
+</div>
 </template>

src/components/PullModelsView.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { openUrl } from '@tauri-apps/plugin-opener';
+import MyRouterLink from './MyRouterLink.vue';
 </script>
 <template>
-    <RouterLink to="/">Zurück zur Startseite</RouterLink>
+    <div>
+
+    <h1 class="text-2xl font-bold">Modelle runterladen</h1>
+    <br>
+    <div class="w-xs">
+        <MyRouterLink to="/" :left="true">Zurück zur Startseite</MyRouterLink>
+    </div>
     <br><br>
-    Gehe auf <span class="text-blue-600 underline cursor-pointer" @click="openUrl('https://ollama.com/search')">https://ollama.com/search</span> und suche dir das Modell, was du haben möchtest, raus. <br>
+    Gehe auf <span class="text-blue-400 underline cursor-pointer" @click="openUrl('https://ollama.com/search')">https://ollama.com/search</span> und suche dir das Modell, was du haben möchtest, raus. <br>
     Dann öffne ein Terminal und führe "ollama pull {modellname}" aus.
+    </div>
 </template>

src/router/index.ts

@@ -8,12 +8,12 @@ import ContextView from '../components/ContextView.vue'
 import EditView from '../components/EditView.vue'
 
 const routes = [
-  { path: '/', component: HomeView },
+  { path: '/', component: HomeView, meta: { transition: 'slide-right' } },
-  { path: '/normal', component: PromptView },
+  { path: '/normal', component: PromptView, meta: { transition: 'slide-left' } },
-  { path: '/pull', component: PullModelsView },
+  { path: '/pull', component: PullModelsView, meta: { transition: 'slide-left' } },
-  { path: '/embedding', component: EmbeddingPrompt },
+  { path: '/embedding', component: EmbeddingPrompt, meta: { transition: 'slide-left' } },
-  { path: '/context', component: ContextView },
+  { path: '/context', component: ContextView, meta: { transition: 'slide-left' } },
-  { path: '/edit', component: EditView },
+  { path: '/edit', component: EditView,  meta: { transition: 'slide-left' } },
 ]
 
 const router = createRouter({