Llm search

.github/workflows/build_and_upload_on_push_to_dev.yaml

@@ -40,7 +40,7 @@ jobs:
           VER=$(cat ./VERSION)
           if [ $BRANCH != "release" ]
           then
-            VER=$VER-SNAPSHOT
+            VER=$VER-snapshot
           fi
 
           echo "fairspace_version=$VER" >> "$GITHUB_OUTPUT"

.github/workflows/deploy_helm_chart.yaml

@@ -45,7 +45,7 @@ jobs:
 
       - name: Define Helm Chart version (taken from input or latest snapshot)
         run: |
-          VERSION=$(cat ./VERSION)-SNAPSHOT
+          VERSION=$(cat ./VERSION)-snapshot
           if [ -n "${{ github.event.inputs.version }}" ]; then
             VERSION=${{ github.event.inputs.version }}
           fi
@@ -90,7 +90,7 @@ jobs:
             echo "StatefulSet fairspace deleted."
           else
             echo "StatefulSet fairspace does not exist."
-          fi 
+          fi
 
       - name: Deploy Helm chart
         run: |

.github/workflows/package_and_push_helm_chart.yaml

@@ -34,7 +34,7 @@ jobs:
           BRANCH=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
           echo "Building images from the branch: $BRANCH"
           if [ $BRANCH != "release" ]; then
-            VERSION=$VERSION-SNAPSHOT
+            VERSION=$VERSION-snapshot
           fi
           # override version of custom input is provided
           if [[ -n "${{ github.event.inputs.version }}" ]]; then

README.adoc

@@ -200,6 +200,15 @@ test.txt,Subject 1,https://institut-curie.org/analysis#O6-12,,
 |===
 ====
 
+=== Ask AI
+
+Ask AI is a feature that allows users to interact with an artificial intelligence model to get answers to their questions related to the metadata that is uploaded to Fairspace.
+To use Ask AI, simply type your query into the input field and press enter or click the looking glass. The AI will process the query and provide a response in the chat interface. The user can ask follow-up questions based on the responses, and the AI will maintain the context of the conversation.
+Ask AI also provides functionality to view and continue history conversations, and to delete them.
+Please note that while Ask AI is a powerful tool, it is not infallible. It is designed to assist with information retrieval and decision-making, but it should not be used as the sole source of information for critical decisions. For such purposes, please refer to the Metadata section described below.
+
+Ask AI implementations for Fairspace are not generic functionality. Both the cloud provider as well as the training data are customer specific. Here, a demo package is used as proof of concept. For custom implementations, please reach out to link:https://www.thehyve.nl/services/fairspace[The Hyve].
+
 ==== Metadata
 
 Explore metadata and find associated collections and files.

charts/fairspace/templates/project/stateful-set.yaml

@@ -79,6 +79,11 @@ spec:
                 secretKeyRef:
                   name: "{{ .Release.Name }}-oauth-client"
                   key: clientSecret
+            - name: LLM_API_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: "{{ .Release.Name }}-llm-api"
+                  key: llmApiKey
             - name: AUDIT_LOG_ROOT
               value: /data/saturn/audit
 {{- if .Values.saturn.loglevel }}

charts/fairspace/templates/secrets/llmapi-secret.yaml

@@ -0,0 +1,7 @@
+kind: Secret
+apiVersion: v1
+metadata:
+  name: {{ .Release.Name }}-llm-api
+type: Opaque
+data:
+  llmApiKey: {{ .Values.external.llmprovider.apiKey | default uuidv4 | b64enc | quote }}

projects/mercury/src/App.theme.js

@@ -1,10 +1,65 @@
 import {createTheme} from '@mui/material';
-import {blue, indigo, pink} from '@mui/material/colors';
+import {pink} from '@mui/material/colors';
 
-export default createTheme({
+export const COLORS = {
+    fsBlueLight: 'rgba(106,134,232,1)',
+    fsBlueLightTransp25: 'rgba(106,134,232,0.25)',
+    fsBlueMedium: 'rgba(63,102,177,1)',
+    fsBlueDark: 'rgba(7, 59, 82, 1)'
+};
+
+const globalTheme = createTheme({
     palette: {
-        primary: process.env.NODE_ENV === 'development' ? blue : indigo,
-        secondary: pink
+        primary: {
+            main: COLORS.fsBlueMedium,
+            light: COLORS.fsBlueLight,
+            dark: COLORS.fsBlueDark,
+            contrastText: 'white'
+        },
+        secondary: {
+            main: '#758bfd'
+        },
+        error: pink,
+        success: {
+            main: '#08a045'
+        },
+        background: {
+            default: '#eef0eb'
+        },
+        text: {
+            primary: COLORS.fsBlueDark,
+            secondary: COLORS.fsBlueMedium
+        }
+    },
+    shape: {
+        borderRadius: 15
+    }
+});
+
+export const scrollbarStyles = {
+    '&::-webkit-scrollbar': {
+        width: '0.3em',
+        height: '0.3em'
+    },
+    '&::-webkit-scrollbar-track': {
+        boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+        webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: globalTheme.palette.primary.light,
+        outline: `1px solid ${globalTheme.palette.primary.light}`,
+        borderRadius: 5
+    }
+};
+
+export default createTheme({
+    ...globalTheme,
+    typography: {
+        fontFamily: ['Sora', 'Palanquin'].join(','),
+        fontSize: 13,
+        button: {
+            textTransform: 'none'
+        }
     },
     components: {
         MuiMenu: {
@@ -88,12 +143,46 @@ export default createTheme({
                 }
             }
         },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    background: globalTheme.palette.primary.dark,
+                    '&:hover': {
+                        background: globalTheme.palette.primary.light
+                    },
+                    borderRadius: globalTheme.shape.borderRadius,
+                    borderColor: globalTheme.palette.primary.light,
+                    paddingBottom: 0,
+                    paddingTop: 0,
+                    minHeight: 35
+                },
+                text: {
+                    color: globalTheme.palette.primary.contrastText
+                }
+            }
+        },
         MuiCardHeader: {
             styleOverrides: {
                 root: {
-                    backgroundColor: 'whitesmoke',
+                    backgroundColor: globalTheme.palette.primary.dark,
                     marginBottom: 0,
                     padding: 5
+                },
+                title: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                avatar: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                subheader: {
+                    color: globalTheme.palette.primary.contrastText
+                }
+            }
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: globalTheme.shape.borderRadius
                 }
             }
         },
@@ -117,6 +206,37 @@ export default createTheme({
                     }
                 }
             }
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: globalTheme.palette.background.default,
+                    border: '1px solid',
+                    borderColor: globalTheme.palette.primary.dark,
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiGrid: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTableContainer: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTablePagination: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
         }
     }
 });

projects/mercury/src/collections/CollectionDetails.js

@@ -18,6 +18,7 @@ import {
 } from '@mui/material';
 import {CloudDownload, Folder, MoreVert} from '@mui/icons-material';
 import {useHistory, withRouter} from 'react-router-dom';
+import withStyles from '@mui/styles/withStyles';
 
 import CollectionEditor from './CollectionEditor';
 import type {Collection, Resource, Status} from './CollectionAPI';
@@ -75,6 +76,14 @@ type CollectionDetailsState = {
     anchorEl: any
 };
 
+const styles = theme => ({
+    card: {
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
+    }
+});
+
 class CollectionDetails extends React.Component<CollectionDetailsProps, CollectionDetailsState> {
     static defaultProps = {
         onChangeOwner: () => {},
@@ -351,7 +360,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
 
         return (
             <>
-                <Card>
+                <Card className={this.props.classes.card}>
                     <CardHeader
                         action={
                             menuItems &&
@@ -363,6 +372,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
                                             aria-owns={anchorEl ? 'long-menu' : undefined}
                                             aria-haspopup="true"
                                             onClick={this.handleMenuClick}
+                                            styles={{color: 'white'}}
                                         >
                                             <MoreVert />
                                         </IconButton>
@@ -540,4 +550,4 @@ const ContextualCollectionDetails = props => {
     );
 };
 
-export default withRouter(ContextualCollectionDetails);
+export default withRouter(withStyles(styles)(ContextualCollectionDetails));

projects/mercury/src/collections/CollectionInformationDrawer.js

@@ -50,7 +50,10 @@ const useStyles = makeStyles(theme => ({
         flexDirection: 'column',
         outline: 'none',
         transitionBorder: '.24s',
-        easeInOut: true
+        easeInOut: true,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     },
     activeStyle: {
         borderColor: theme.palette.info.main,

projects/mercury/src/collections/CollectionsPage.js

@@ -98,7 +98,7 @@ const CollectionsPage = (props: CollectionsPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button variant="text" color="primary" href={getMetadataViewsPath(RESOURCES_VIEW)}>
                                         Collection metadata search
                                     </Button>

projects/mercury/src/collections/CollectionsPage.styles.js

@@ -6,12 +6,17 @@ const styles = () => ({
         width: consts.MAIN_CONTENT_WIDTH
     },
     topBarSwitch: {
+        paddingLeft: 8,
         textAlign: 'right',
         whiteSpace: 'nowrap'
     },
+    metadataButton: {
+        paddingRight: 8
+    },
     centralPanel: {
         width: consts.MAIN_CONTENT_WIDTH,
-        maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT
+        maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT,
+        paddingLeft: 0
     },
     sidePanel: {
         width: consts.SIDE_PANEL_WIDTH

projects/mercury/src/common/components/ColumnFilterInput.js

@@ -11,18 +11,21 @@ const useStyles = makeStyles(theme => ({
         position: 'relative',
         flex: 0.8,
         borderRadius: theme.shape.borderRadius,
-        backgroundColor: alpha(theme.palette.common.white, 0.15),
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.common.white, 0.25)
-        },
         marginLeft: 0,
         width: '100%',
         [theme.breakpoints.up('sm')]: {
             width: 'auto'
         }
     },
     inputRoot: {
-        color: 'inherit',
+        borderRadius: theme.shape.borderRadius,
+        borderColor: theme.palette.primary.main,
+        backgroundColor: alpha(theme.palette.primary.main, 0.15),
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.25),
+            borderColor: theme.palette.primary.main
+        },
         width: '100%',
         fontSize: '0.9rem',
         minWidth: 180,

projects/mercury/src/common/contexts/FeaturesContext.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {extractJsonData, handleHttpError} from '../utils/httpUtils';
 import useAsync from '../hooks/UseAsync';
 
-export type Feature = 'ExtraStorage' | any; // more to come
+export type Feature = 'ExtraStorage' | 'LlmSearch' | any; // more to come
 
 const FeaturesContext = React.createContext({});
 

projects/mercury/src/dashboard/DomainInfo.styles.js

@@ -4,6 +4,7 @@ const styles = theme => ({
         height: '100px',
         borderStyle: 'solid',
         borderColor: theme.palette.primary.light,
+        background: theme.palette.primary.dark,
         borderWidth: 2,
         textAlign: 'center'
     },
@@ -25,7 +26,7 @@ const styles = theme => ({
         width: 'inherit'
     },
     domainText: {
-        color: theme.palette.grey[700]
+        color: theme.palette.primary.contrastText
     },
     link: {
         textDecoration: 'none'

projects/mercury/src/external-storage/ExternalStorageInformationDrawer.js

@@ -27,7 +27,7 @@ import LinkedDataLink from '../metadata/common/LinkedDataLink';
 import type {DisplayProperty} from './UseExternalStorageMetadata';
 import useExternalStorageMetadata from './UseExternalStorageMetadata';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
     expandOpen: {
         transform: 'rotate(180deg)'
     },
@@ -38,7 +38,10 @@ const useStyles = makeStyles(() => ({
         flexDirection: 'column',
         outline: 'none',
         transitionBorder: '.24s',
-        easeInOut: true
+        easeInOut: true,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     }
 }));
 

projects/mercury/src/file/FilesPage.js

@@ -150,7 +150,7 @@ export const FilesPage = (props: FilesPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button
                                         variant="text"
                                         color="primary"