R40fendt/hausarbeit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Styling

Browse Source
This commit is contained in:
R40fendt
2026-10-06 22:14:38 +02:00
parent e9a3144f00
commit 133fe52a64
14 changed files with 124 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+41 -5
View File
@@ -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">
<div class="w-full h-full border rounded-2xl transition-all ease-in-out duration-200 p-6 overflow-y-scroll">
<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 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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+12 -3
View File
@@ -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
+1 -1
View File
@@ -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
+9 -7
View File
@@ -1,12 +1,14 @@
<script setup lang="ts">
import MyRouterLink from './MyRouterLink.vue';
</script>
<template>
<main>
<h1>Home</h1>
<RouterLink to="/pull">Modelle runterladen</RouterLink> <br>
<RouterLink to="/embedding">Embedding-Modelle</RouterLink> <br>
<RouterLink to="/normal">"Normale" Modelle</RouterLink> <br>
<RouterLink to="/context">Context Window einstellen</RouterLink> <br>
<RouterLink to="/edit">Modell bearbeiten</RouterLink> <br>
<main class="w-md">
<h1 class="text-2xl font-bold">Home</h1>
<br>
<MyRouterLink to="/pull" :left="false">Modelle runterladen</MyRouterLink> <br>
<MyRouterLink to="/embedding" :left="false">Embedding-Modelle</MyRouterLink> <br>
<MyRouterLink to="/normal" :left="false">"Normale" Modelle</MyRouterLink> <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
+1 -1
View File
@@ -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
+5
View File
@@ -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
+13
View File
@@ -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
+3 -1
View File
@@ -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
+18 -12
View File
@@ -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){
ev.preventDefault();
async function submit(){
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>
<i class="whitespace-pre-line">{{ thinking_response }}</i> <br>
<br>
<div class="whitespace-pre-line">{{ response }}</div>
<div class="whitespace-pre-line bg-gray-800 rounded-md p-2" v-if="thinking_response">
<br>
<i v-if="thinking_response">{{ thinking_response }}</i> <br>
<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
+10 -2
View File
@@ -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
+6 -6
View File
@@ -8,12 +8,12 @@ import ContextView from '../components/ContextView.vue'
import EditView from '../components/EditView.vue'
const routes = [
{ path: '/', component: HomeView },
{ path: '/normal', component: PromptView },
{ path: '/pull', component: PullModelsView },
{ path: '/embedding', component: EmbeddingPrompt },
{ path: '/context', component: ContextView },
{ path: '/edit', component: EditView },
{ path: '/', component: HomeView, meta: { transition: 'slide-right' } },
{ path: '/normal', component: PromptView, meta: { transition: 'slide-left' } },
{ path: '/pull', component: PullModelsView, meta: { transition: 'slide-left' } },
{ path: '/embedding', component: EmbeddingPrompt, meta: { transition: 'slide-left' } },
{ path: '/context', component: ContextView, meta: { transition: 'slide-left' } },
{ path: '/edit', component: EditView, meta: { transition: 'slide-left' } },
]
const router = createRouter({