admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

askHermione/rephrase/summarize

Browse Source
This commit is contained in:
paola.trabucco
2024-08-28 10:38:03 +02:00
parent 450239e0b2
commit db0db95941
3 changed files with 275 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/pages/canvas/MdCanvas.vue
View File

@@ -4,7 +4,30 @@
<MdScenarioExctuotionDialog :scenario="execScenario" @add="addFromDialog"/>
</Dialog>
<ContextMenu ref="menu" :model="items" :style="{'white-space':'nowrap', 'width': 'auto'}"/>
<Dialog v-model:visible="execHermioneDialogVisible" modal :header="modalTitle" :style="{ width: '70rem' }">
<div v-if="askDialog" class="card flex flex-col gap-4 p-1">
<div class="flex flex-col gap-2">
<InputText id="question" type="text" placeholder="Write a Question" v-model="userQuestion" />
</div>
<div class="flex justify-center">
<Button label="Submit" @click="askHermione()" class=""/>
</div>
</div>
<div class="flex justify-center items-center">
<ProgressSpinner v-if="loadingData" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
animationDuration=".5s" aria-label="Custom ProgressSpinner" />
</div>
<div v-if="dataLoaded" class="card flex flex-col gap-4 p-1">
<div class="flex items-center gap-2 p-0">
<button class="p-button p-button-primary" @click="addFromDialog(response)">Add to Canvas</button>
</div>
<div class="flex mt-2">
<Editor v-model="response" editorStyle="height: 320px; width: 930px" />
</div>
</div>
</Dialog>
<MdEditor class="editor" v-model="content" language="en-US" ref="editor" @contextmenu="onRightClick" previewTheme="github" :toolbars="toolbars">
<template #defToolbars>
<Mark />
@@ -18,32 +41,36 @@
</template>
<script setup>
import { ref ,computed} from 'vue';
import { onMounted } from 'vue';
import { ScenarioService } from '@/service/ScenarioService.js';
import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecutionDialog.vue';
import { MdEditor,NormalToolbar ,ModalToolbar } from 'md-editor-v3';
import { Emoji, Mark, ExportPDF } from '@vavt/v3-extension';
import '@vavt/v3-extension/lib/asset/style.css';
import 'md-editor-v3/lib/style.css';
import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecutionDialog.vue';
import { Emoji, ExportPDF, Mark } from '@vavt/v3-extension';
import '@vavt/v3-extension/lib/asset/style.css';
import axios from 'axios';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { computed, onMounted, ref } from 'vue';
const menu = ref();
const currentSelection = ref(null);
const currentPosition = ref(null);
const content = ref('# Welcome to Olympus Canvas....');
const scenarios = ref([]);
const items = ref([]);
const execScenarioDialogVisible = ref(false);
const execScenario = ref({name:""});
const editor = ref();
const execHermioneDialogVisible = ref(false)
const modalTitle = ref('')
const askDialog = ref(false)
const loadingData = ref(false)
const dataLoaded = ref(false)
const response = ref(null)
const userQuestion = ref('')
const addFromDialog = (data) => {
console.log(data);
execScenarioDialogVisible.value = false;
execHermioneDialogVisible.value = false;
editor.value.insert((selectedText) => {
return {
targetValue: data,
@@ -57,12 +84,12 @@
const onRightClick = (event) => {
if(editor.value.getSelectedText().length > 0) {
items.value=[
{label: 'Summarize',icon: 'pi pi-language'},
{label: 'Rewrite', icon: 'pi pi-language'}
{label: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "summarize")},
{label: 'Rewrite', icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "rewrite")}
]
}else {
items.value=[
{ label: 'Ask Hermione', icon: 'pi pi-language' },
{ label: 'Ask Hermione', icon: 'pi pi-language', command:()=>openAskDialog()},
{ separator: true},
{ label: 'Execute Scenario', icon: 'pi pi-volume-up',items: scenarioMenuItems}
]
@@ -91,6 +118,84 @@
execScenarioDialogVisible.value = true;
execScenario.value = scenario;
}
const openAskDialog = () => {
execHermioneDialogVisible.value = true;
askDialog.value = true
dataLoaded.value = false
modalTitle.value = "Ask Hermione"
userQuestion.value = ''
}
const openEditorAssistant = (text, action) => {
execHermioneDialogVisible.value=true
modalTitle.value = "Editor Assistant"
askDialog.value = false
loadingData.value = true
dataLoaded.value = false
if (action === "rewrite") {
rephraseText(text)
} else {
summarizeText(text)
}
}
const rephraseText = (text) => {
const input = {
input: text
}
console.log("INPUT: ", input);
axios.post("/rephrase", input).then(resp => {
console.log("RESPONSE: ", resp.data);
response.value = resp.data.stringOutput
loadingData.value = false
dataLoaded.value = true
})
.catch(error => {
console.error('Error during the request:', error);
});
};
const summarizeText = (text) => {
const input = {
input: text
}
console.log("INPUT: ", input);
axios.post("/summarize", input).then(resp => {
console.log("RESPONSE: ", resp.data);
response.value = resp.data.stringOutput
loadingData.value = false
dataLoaded.value = true
})
.catch(error => {
console.error('Error during the request:', error);
});
};
const askHermione = () => {
const input = {
input: userQuestion.value
}
console.log("INPUT: ", input);
loadingData.value = true
askDialog.value = false
axios.post("/askHermione", input).then(resp => {
console.log("RESPONSE: ", resp.data);
response.value = resp.data.stringOutput
loadingData.value = false
dataLoaded.value = true
})
.catch(error => {
console.error('Error during the request:', error);
});
};
onMounted(() => {
ScenarioService.getScenarios().then(resp=>{
scenarios.value = resp.data