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

.gitlab-ci.yml

@@ -3,6 +3,7 @@ docker-build:
   stage: build
   variables:
     DOCKER_IMAGE_NAME: olytest/hermione-fe:$CI_COMMIT_SHORT_SHA
+    VITE_BACKEND_URL: http://olympus-api-gateway.olympusai.live/hermione
   before_script:
     - >
       echo  '{
@@ -17,7 +18,7 @@ docker-build:
       --context "${CI_PROJECT_DIR}"
       --dockerfile "${CI_PROJECT_DIR}/Dockerfile"
       --destination "${DOCKER_IMAGE_NAME}"
-      --build-arg "VITE_BACKEND_URL=https://hermione-nu6mvqujsq-ey.a.run.app"
+      --build-arg "VITE_BACKEND_URL=${VITE_BACKEND_URL}"
   # Run this job in a branch where a Dockerfile exists
   rules:
     - if: $CI_COMMIT_BRANCH

Dockerfile

@@ -4,10 +4,13 @@ WORKDIR /usr/src/app
 # this will allow us to run vite and other tools directly
 ENV PATH /usr/src/node_modules/.bin:$PATH
 
+
 # inject all environment vars we'll need
 ARG VITE_BACKEND_URL
 ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
 
+RUN echo $VITE_BACKEND_URL
+
 COPY package.json ./
 
 RUN npm install
@@ -20,5 +23,7 @@ RUN npm run build
 FROM nginx:latest as prod
 
 COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+ADD default.conf /etc/nginx/conf.d/default.conf
+
 
 CMD ["nginx", "-g", "daemon off;"]

default.conf

@@ -0,0 +1,26 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+
+    server_name _;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    
+}

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 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) => {
+    const addFromDialog = () => {
-        console.log(data);
+        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: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(currentSelection.value, "summarize")},
-                {label: 'Rewrite', icon: 'pi pi-language'}
+                {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

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 { Emoji, ExportPDF, Mark } from '@vavt/v3-extension';
-    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 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: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "summarize")},
-                {label: 'Rewrite', icon: 'pi pi-language'}
+                {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

src/views/pages/canvas/ScenarioExecutionDialog.vue

@@ -15,8 +15,10 @@
             </div>
             
         </div>
+        <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 axios from 'axios';
 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 { defineEmits, ref } from 'vue';
 
     import showdown from 'showdown';
     const loading_data = ref(false);