94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<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';
|
|
|
|
const initialized = ref(false);
|
|
const ollama_url = ref("");
|
|
const ollama_api_key = ref("");
|
|
|
|
const home_page=ref(false);
|
|
|
|
async function submit(ev){
|
|
ev.preventDefault();
|
|
await store.set("url",ollama_url.value);
|
|
await store.set("api-key",ollama_api_key.value);
|
|
await store.save();
|
|
try {
|
|
await invoke("connect_ollama",{url: ollama_url.value, apiKey: ollama_api_key.value});
|
|
} catch(e){
|
|
window.alert("Verbindung nicht möglich: "+e);
|
|
return;
|
|
}
|
|
home_page.value=true;
|
|
}
|
|
let store: Store;
|
|
|
|
async function init(){
|
|
store = await load('store.json', { autoSave: false });
|
|
if (await store.has("url")){
|
|
ollama_url.value=await store.get("url");
|
|
}
|
|
if (await store.has("api-key")){
|
|
ollama_api_key.value=await store.get("api-key");
|
|
}
|
|
initialized.value=true;
|
|
}
|
|
init();
|
|
</script>
|
|
<template>
|
|
<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">
|
|
<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>
|
|
<Input placeholder="API Key (optional)" class="w-full" type="password" v-model="ollama_api_key"/> <br>
|
|
<br>
|
|
<MyButton class="w-full" type="submit">Weiter</MyButton>
|
|
</form>
|
|
</div>
|
|
<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>
|
|
<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> |