Merge branch 'master' of https://gitlab.gcp.windtre.it/olympus_ai/hermione-fe

2024-09-27 09:34:29 +02:00
parent cd485a0475 db0db95941
commit 1255792539
6 changed files with 308 additions and 35 deletions
--- a/src/views/pages/canvas/Canvas.vue
+++ b/src/views/pages/canvas/Canvas.vue
@@ -3,16 +3,40 @@
        <Dialog v-model:visible="execScenarioDialogVisible" modal :header="execScenario.name" :style="{ width: '70rem' }">
            <ScenarioExctuotionDialog :scenario="execScenario" @add="addFromDialog"/>
        </Dialog>
+        <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()">Add to Canvas</button>
+                </div>     
+                <div class="flex mt-2">
+                    <Editor v-model="response" editorStyle="height: 320px" />
+                </div>
+            </div> 
+        </Dialog>
        <Editor  v-model="content"  editorStyle="height: 600px" @contextmenu="onRightClick" @selection-change="onSelectionChange" />
        <ContextMenu ref="menu" :model="items"  :style="{'white-space':'nowrap', 'width': 'auto'}" />
    </div>
 </template>

 <script setup>
-    import { ref ,computed} from 'vue';
-    import { onMounted } from 'vue';
    import { ScenarioService } from '@/service/ScenarioService.js';
-    import ScenarioExctuotionDialog from '@/views/pages/canvas/ScenarioExecutionDialog.vue';
+import ScenarioExctuotionDialog from '@/views/pages/canvas/ScenarioExecutionDialog.vue';
+import axios from 'axios';
+import { computed, onMounted, ref } from 'vue';

    const menu = ref();
    const currentSelection = ref(null);
@@ -22,31 +46,44 @@
    const items = ref([]);
    const execScenarioDialogVisible = ref(false);
    const execScenario = ref({name:""});
+    const userQuestion = ref(null)
+    const execHermioneDialogVisible = ref(false)
+    const response = ref('')
+    const dataLoaded = ref(false)
+    const loadingData = ref(false)
+    const askDialog = ref(false)
+    const modalTitle = ref(null)

-    const addFromDialog = (data) => {
-        console.log(data);
+    const addFromDialog = () => {
+        console.log(response);
        execScenarioDialogVisible.value = false;
-        content.value = content.value.substring(0, currentPosition.value) + data + content.value.substring(currentPosition.value);
-        
-    }
+        execHermioneDialogVisible.value = false;

+        if (currentSelection.value != null) {
+            content.value = content.value.substring(0, currentPosition.value) + response.value + content.value.substring(currentPosition.value + currentSelection.value.length);
+        } else {
+            content.value = content.value.substring(0, currentPosition.value) + response.value + content.value.substring(currentPosition.value);
+        }
+    }
+    
    const onRightClick = (event) => {
        if(currentSelection.value && currentSelection.value.length > 0) {
            items.value=[
-                {label: 'Summarize',icon: 'pi pi-language'},
-                {label: 'Rewrite', icon: 'pi pi-language'}
+                {label: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(currentSelection.value, "summarize")},
+                {label: 'Rewrite', icon: 'pi pi-language', command:()=>openEditorAssistant(currentSelection.value, "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}
            ]
        }
        menu.value.show(event);
    };
-
+/*
    const onSelectionChange = (event) => {
+        console.log("Testo selezionato", event)
        if(event.range.length === 0){
            currentSelection.value = null;
        } else{
@@ -54,6 +91,26 @@
        }
        currentPosition.value = event.range.index;
    };
+*/
+    const onSelectionChange = (event) => {
+      const { range, textValue } = event;
+        console.log(range, textValue)
+
+      if (range && textValue && range.length != 0) {
+        const start = range.index
+        const end = range.index + range.length
+
+        if (start != null && end != null && start <= end) {        
+            currentSelection.value = textValue.substring(start, end);
+            console.log(currentSelection.value)
+        } else {
+          currentSelection.value = null
+        }
+        currentPosition.value = event.range.index;
+
+        console.log("Testo selezionato", currentSelection.value)
+      }
+    };

    const scenarioMenuItems = computed(() => { 
        const scenario_items = [];
@@ -75,6 +132,83 @@
        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
+        
+        axios.post("/askHermione", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+            askDialog.value = false
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
    onMounted(() => {
        ScenarioService.getScenarios().then(resp=>{
            scenarios.value = resp.data
--- a/src/views/pages/canvas/MdCanvas.vue
+++ b/src/views/pages/canvas/MdCanvas.vue
@@ -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
--- a/src/views/pages/canvas/ScenarioExecutionDialog.vue
+++ b/src/views/pages/canvas/ScenarioExecutionDialog.vue
@@ -15,8 +15,10 @@
            </div>
            
        </div>
-        <ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
-            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+        <div class="flex justify-center items-center">
+            <ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+                animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+        </div>
        <div v-if="data_loaded" class="card flex flex-col gap-4 p-1">
                
            <div class="flex items-center gap-2 p-0">
@@ -32,12 +34,12 @@
 </template>

 <script setup>
-    import { ref ,defineEmits} from 'vue';
-    import InputText from 'primevue/inputtext';
-    import ProgressSpinner from 'primevue/progressspinner';
-    import Select from 'primevue/select';
-    import Textarea from 'primevue/textarea';
    import axios from 'axios';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import Select from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import { defineEmits, ref } from 'vue';

    import showdown from 'showdown';
    const loading_data = ref(false);