- AI
- Aggiornamento QUASAR
This commit is contained in:
Surya Paolo
@@ -1,78 +1,10 @@
|
||||
.colmodif {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coldate {
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.tdclass, .trclass{
|
||||
min-height: 20px !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.q-table td {
|
||||
padding-left: 1px;
|
||||
padding-right: 2px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
&__title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.q-table {
|
||||
&__col {
|
||||
font-size: 1rem;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.newrec_fields{
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.riduci_pad {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px !important;
|
||||
}
|
||||
|
||||
|
||||
.q-table__top{
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.barselection {
|
||||
padding: 0;
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.myitem {
|
||||
padding: 0px 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
.myitem-0 {
|
||||
flex-grow: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.myitem-1 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.myitem-2 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.myitem-3 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.response-content {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -11,6 +11,8 @@ import { useQuasar } from 'quasar'
|
||||
import { costanti } from '@costanti'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { serv_constants } from '@store/Modules/serv_constants'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CAITools',
|
||||
props: {
|
||||
@@ -26,14 +28,144 @@ export default defineComponent({
|
||||
|
||||
const $router = useRouter()
|
||||
|
||||
const options = ref(<any>{})
|
||||
|
||||
const querySel = ref('')
|
||||
|
||||
const contestSysteList = [
|
||||
{ label: 'Standard', value: '' },
|
||||
{ label: 'Matematica', value: 'Sei un esperto in Matematica' },
|
||||
{ label: 'Editoriale', value: 'Sei un esperto in Editoria e scrittura di articoli e blog' },
|
||||
{ label: 'Programmazione', value: 'Sei un esperto in programmazione' },
|
||||
]
|
||||
const modelList = [
|
||||
{ label: 'DeepSeek', value: 'deepseek-chat' },
|
||||
]
|
||||
|
||||
const outputTypeList = [
|
||||
{ label: 'Formato Testo', value: 'Ritornami l\'output in formato testo' },
|
||||
{ label: 'Per Telegram', value: 'Ritornami l\'output formattato per incollarlo sulla chat Telegram, usando delle emoticons in punti chiave e il grassetto (**) nelle parole chiave.' },
|
||||
{ label: 'Formato JSON', value: 'Ritornami l\'output in formato JSON' },
|
||||
{ label: 'Formato CSV (campi separati da \'|\')', value: 'Ritornami l\'output in formato CSV, con i campi separati da \'|\'' },
|
||||
]
|
||||
|
||||
const tempList = [{ label: 'Temperatura a 0.3', value: 0.3 },
|
||||
{ label: 'Temperatura a 0.5', value: 0.5 },
|
||||
{ label: 'Temperatura a 1', value: 1 },
|
||||
{ label: 'Temperatura a 1.2', value: 1.2 },
|
||||
{ label: 'Temperatura a 1.5', value: 1.5 },
|
||||
]
|
||||
|
||||
const tokenList = [
|
||||
{ label: '50 Token', value: 50 },
|
||||
{ label: '100 Token', value: 100 },
|
||||
{ label: '200 Token', value: 200 },
|
||||
{ label: '500 Token', value: 500 },
|
||||
{ label: '1000 Token', value: 1000 },
|
||||
{ label: '2500 Token', value: 2500 },
|
||||
{ label: '4000 Token', value: 4000 },
|
||||
{ label: '5000 Token', value: 5000 },
|
||||
{ label: '10000 Token', value: 10000 },
|
||||
]
|
||||
|
||||
const model = ref('deepseek-chat')
|
||||
const max_tokens = ref(100)
|
||||
const outputType = ref('')
|
||||
const temp = ref(0.3)
|
||||
const stream = ref(false)
|
||||
const contestsystem = ref('')
|
||||
|
||||
const inputPrompt = ref('');
|
||||
const result = ref('');
|
||||
const isLoading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const finish_reason = ref('');
|
||||
const withexplain = ref(false);
|
||||
|
||||
const querylist = ref(<any[]>[])
|
||||
|
||||
|
||||
const modelLabel = computed(() => {
|
||||
const foundModel = modelList.find((item: any) => item.value === model.value);
|
||||
return foundModel ? foundModel.label : null;
|
||||
})
|
||||
|
||||
function mount() {
|
||||
// Mount
|
||||
|
||||
querylist.value = globalStore.getQueryAI()
|
||||
|
||||
outputType.value = outputTypeList[0].value
|
||||
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
isLoading.value = true;
|
||||
errorMessage.value = '';
|
||||
result.value = '';
|
||||
|
||||
options.value = {
|
||||
model: model.value,
|
||||
max_tokens: max_tokens.value,
|
||||
temp: temp.value,
|
||||
stream: stream.value,
|
||||
withexplain: withexplain.value,
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
const resdata = await globalStore.getQueryDS(inputPrompt.value, options.value)
|
||||
|
||||
if (resdata.code === serv_constants.RIS_CODE_OK) {
|
||||
if (resdata.choice) {
|
||||
finish_reason.value = resdata.choice.finish_reason || ''
|
||||
}
|
||||
if (resdata.choice.message) {
|
||||
result.value = resdata.choice.message.content || ''
|
||||
}
|
||||
} else if (resdata.code === serv_constants.RIS_CODE_ERR) {
|
||||
errorMessage.value = resdata.error.message || resdata.error;
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
icon: 'error',
|
||||
message: 'Errore durante la richiesta',
|
||||
caption: errorMessage.value
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.response?.data?.error || error.message;
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
icon: 'error',
|
||||
message: 'Errore durante la richiesta',
|
||||
caption: errorMessage.value
|
||||
});
|
||||
}
|
||||
|
||||
isLoading.value = false;
|
||||
|
||||
}
|
||||
|
||||
const copyToClipboard = () => {
|
||||
if (!result.value) return;
|
||||
|
||||
navigator.clipboard.writeText(result.value).then(() => {
|
||||
$q.notify({
|
||||
message: 'Copiato negli appunti!',
|
||||
color: 'positive',
|
||||
icon: 'check',
|
||||
});
|
||||
}).catch(err => {
|
||||
console.error('Errore nella copia:', err);
|
||||
$q.notify({
|
||||
message: 'Errore nella copia!',
|
||||
color: 'negative',
|
||||
icon: 'error',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(mount)
|
||||
|
||||
return {
|
||||
@@ -41,6 +173,26 @@ export default defineComponent({
|
||||
querySel,
|
||||
$q,
|
||||
globalStore,
|
||||
inputPrompt,
|
||||
result,
|
||||
isLoading,
|
||||
errorMessage,
|
||||
handleSubmit,
|
||||
querylist,
|
||||
copyToClipboard,
|
||||
max_tokens,
|
||||
tokenList,
|
||||
modelList,
|
||||
tempList,
|
||||
stream,
|
||||
model,
|
||||
contestSysteList,
|
||||
contestsystem,
|
||||
finish_reason,
|
||||
modelLabel,
|
||||
withexplain,
|
||||
outputType,
|
||||
outputTypeList,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,15 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="querySel"
|
||||
:options="globalStore.getQueryAI()"
|
||||
:label="t('ai.selectquery') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="column text-center">
|
||||
<div class="row justify-center">
|
||||
<q-select
|
||||
v-if="queryList"
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="querySel"
|
||||
:options="queryList"
|
||||
:label="t('queryai.selectquery') + `:`"
|
||||
emit-value
|
||||
style="min-width: 200px"
|
||||
map-options
|
||||
option-value="_id"
|
||||
option-label="descr"
|
||||
>
|
||||
</q-select>
|
||||
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="modelList"
|
||||
style="min-width: 200px"
|
||||
:label="t('queryai.model') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="contestsystem"
|
||||
:options="contestSysteList"
|
||||
style="min-width: 200px"
|
||||
:label="t('queryai.contestsystem') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="max_tokens"
|
||||
style="min-width: 200px"
|
||||
:options="tokenList"
|
||||
:label="t('queryai.numtoken') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="temp"
|
||||
style="min-width: 200px"
|
||||
:options="tempList"
|
||||
:label="t('queryai.temp') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
outlined
|
||||
v-model="outputType"
|
||||
style="min-width: 200px"
|
||||
:options="outputTypeList"
|
||||
:label="t('queryai.numtoken') + `:`"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="row justify-center">
|
||||
<q-toggle
|
||||
label="Stream"
|
||||
v-model="stream"
|
||||
color="green"
|
||||
icon="fas fa-stream"
|
||||
keep-color
|
||||
>
|
||||
</q-toggle>
|
||||
<q-toggle
|
||||
:label="t('queryai.withexplain')"
|
||||
v-model="withexplain"
|
||||
color="green"
|
||||
icon="fas fa-comment"
|
||||
keep-color
|
||||
>
|
||||
</q-toggle>
|
||||
</div>
|
||||
<q-separator></q-separator>
|
||||
</div>
|
||||
|
||||
<div class="q-mt-md q-gutter-y-md">
|
||||
<q-form @submit.prevent="handleSubmit">
|
||||
<q-input
|
||||
v-model="inputPrompt"
|
||||
filled
|
||||
autogrow
|
||||
type="textarea"
|
||||
label="Inserisci la tua richiesta"
|
||||
hint="Scrivi qui il tuo prompt"
|
||||
class="q-mb-md"
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<div class="text-center">
|
||||
<q-btn
|
||||
:label="`Invia a ` + modelLabel"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isLoading"
|
||||
icon="send"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
MARKDOWN:
|
||||
<q-markdown :content="`L'altezza \( h \) di un triangolo isoscele con base 10 è \( h = \sqrt{l^2 - 25} \), dove \( l \) è la lunghezza dei lati congruenti.`" />
|
||||
|
||||
<q-card v-if="result" class="q-mt-md">
|
||||
<q-card-section>
|
||||
<div class="text-h6 row items-center justify-between">
|
||||
<span>Risposta</span>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="content_copy"
|
||||
@click="copyToClipboard"
|
||||
v-tooltip="'Copia negli appunti'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-markdown :content="result" />
|
||||
<q-scroll-area style="height: 300px">
|
||||
<pre class="response-content">{{ result }}</pre>
|
||||
</q-scroll-area>
|
||||
<pre class="response-reason">Esito: {{ finish_reason }}</pre>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-banner
|
||||
v-if="errorMessage"
|
||||
class="q-mt-md bg-negative text-white"
|
||||
rounded
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</q-banner>
|
||||
|
||||
<q-inner-loading :showing="isLoading">
|
||||
<q-spinner-gears size="50px" color="primary" />
|
||||
<div class="q-mt-sm">Elaborazione richiesta...</div>
|
||||
</q-inner-loading>
|
||||
</div>
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./CAITools.ts">
|
||||
|
||||
Reference in New Issue
Block a user