119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<template>
|
|
<Fluid>
|
|
<div class="flex mt-6">
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4">Similarity Search</h2>
|
|
</div>
|
|
<div class="flex flex-wrap">
|
|
<!--label for="address">Address</label-->
|
|
<Textarea id="query" v-model="query" rows="4" placeholder="Enter your query..." class="w-full" />
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<div class="flex flex-wrap gap-2 w-full">
|
|
<Select id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
|
|
placeholder="Select type" class="w-full"></Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-field p-col-12 p-md-2">
|
|
<Button label="Send" icon="pi pi-send" :fluid="false" @click="sendQuery" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mt-6">
|
|
<div class="results-container p-mt-4">
|
|
<Card v-for="(result, index) in messages" :key="index" class="p-mb-3">
|
|
<template #content>
|
|
<ScrollPanel style="width: 100%; max-height: 200px">
|
|
<pre class="result-content">{{ result }}</pre>
|
|
</ScrollPanel>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</Fluid>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Button from 'primevue/button';
|
|
import Card from 'primevue/card';
|
|
import ScrollPanel from 'primevue/scrollpanel';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { ref } from 'vue';
|
|
|
|
const query = ref('');
|
|
const dropdownItem = ref(null);
|
|
const messages = ref([]);
|
|
const toast = useToast();
|
|
|
|
const dropdownItems = [
|
|
{ name: 'Documentation', code: 'setup-documentation' },
|
|
{ name: 'Deploy Documentation', code: 'deploy-documentation' }
|
|
];
|
|
|
|
|
|
const sendQuery = async () => {
|
|
if (query.value.trim() !== '' && dropdownItem.value) {
|
|
try {
|
|
const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&type=${dropdownItem.value.code}`);
|
|
const data = await response.json();
|
|
console.log('API response:', data);
|
|
|
|
if (data && Array.isArray(data) && data.length > 0) {
|
|
messages.value = data;
|
|
toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
|
|
} else {
|
|
toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error sending query:', error);
|
|
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
|
|
}
|
|
query.value = '';
|
|
dropdownItem.value = null;
|
|
} else {
|
|
toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.similarity-search {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.results-container {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.result-content {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
padding: 1rem;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.p-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.p-select .p-select-label {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.p-inputtextarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
</style> |