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/.gitlab-ci.yml
+++ b/.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
--- a/5
+++ b/5
@@ -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;"]
--- a/default.conf
+++ b/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;
+    }
+
+    
+}
--- 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);