UI implementation of experiments form

lumigator/frontend/src/App.vue

@@ -79,6 +79,7 @@ const { showSlidingPanel } = useSlidePanel();
 
   .sliding-panel.open {
     width: $l-sliding-panel-size;
+    overflow-y: auto;
   }
 
   .l-main-container {

lumigator/frontend/src/components/molecules/LExperimentForm.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="l-experiment-form">
-    <div class="l-experiment-form__header">
+    <div
+      class="l-experiment-form__header"
+      style="position: sticky; top: 0;z-index:100"
+    >
       <h3>Create Experiment</h3>
       <Button
         icon="pi pi-times"
@@ -73,16 +76,26 @@
           v-model="maxSamples"
           variant="filled"
           disabled
+          style="background-color: #363636"
         />
-        <label
-          for="max_samples"
-          class="disabled"
-        >Maximul samples (optional)</label>
+        <label for="max_samples">Maximum samples (optional)</label>
       </FloatLabel>
     </div>
-    <div class="l-experiment-form__model-container">
+    <div class="l-experiment-form__models-container">
       <h3>Model Selection</h3>
       <h4>Hugging Face Model Hub & Mistral</h4>
+      <div class="l-experiment-form__models">
+        <l-model-cards  />
+      </div>
+    </div>
+    <div class="l-experiment-form__submit-container">
+      <Button
+        rounded
+        size="small"
+        label="Run experiment"
+        class="l-page-header__action-btn"
+        @click="triggerExperiment"
+      />
     </div>
   </div>
 </template>
@@ -96,6 +109,7 @@ import FloatLabel from 'primevue/floatlabel';
 import Select from 'primevue/select';
 import Textarea from 'primevue/textarea';
 import InputText from 'primevue/inputtext';
+import LModelCards from '@/components/molecules/LModelCards.vue';
 
 const emit = defineEmits([
   'l-close-form',
@@ -118,15 +132,16 @@ const maxSamples = ref(null)
   display: flex;
   flex-direction: column;
 
-  &__header, &__model-container{
-    color: $l-grey-100;
+  &__header, &__models-container{
     padding-bottom: $l-spacing-1;
     display: flex;
     justify-content: space-between;
+    background-color: $l-main-bg;
 
     h3 {
       font-weight: $l-font-weight-normal;
       font-size: $l-font-size-md;
+      color: $l-grey-150;
     }
 
     button {
@@ -138,6 +153,7 @@ const maxSamples = ref(null)
   }
 
   &__fields {
+    z-index: 1;
     display: flex;
     flex-direction: column;
   }
@@ -158,19 +174,24 @@ const maxSamples = ref(null)
     }
 
     .disabled {
-      color: #4D4D4D;
-      cursor: not-allowed!important;
+
     }
   }
 
-  &__model-container {
+  &__models-container {
     flex-direction: column;
     h4 {
       font-size: $l-font-size-sm;
+      color: $l-grey-150;
       font-weight:$l-font-weight-bold ;
     }
   }
 
+  &__submit-container {
+    display: flex;
+    justify-content: center;
+  }
+
 }
 </style>
 

lumigator/frontend/src/components/molecules/LModelCards.vue

@@ -0,0 +1,81 @@
+
+<template>
+  <div class="l-models-list">
+    <div class="l-models-list__options-container">
+      <div
+        v-for="model in modelOptions"
+        :key="model.name"
+        class="l-models-list__options-container--option"
+      >
+        <RadioButton
+          v-model="selectedModel"
+          :inputId="model.link"
+          name="dynamic"
+          :value="model"
+        />
+        <label :for="model.link">{{ model.link }}</label>
+        <Button
+          icon="pi pi-external-link"
+          severity="secondary"
+          variant="text"
+          rounded
+          class="l-models__external-link"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Button from 'primevue/button';
+import RadioButton from 'primevue/radiobutton';
+
+const selectedModel = ref('')
+
+defineProps({
+  modelLink: String
+})
+
+const modelOptions = ref([
+    { name: 'Accounting', link: 'hf://facebook/bart-large-cnn' },
+    { name: 'Marketing', link: 'mikeadimech/longformer-qmsum-meeting-summarization' },
+    { name: 'Production', link: 'mrm8488/t5-base-finetuned-summarize-news' },
+    { name: 'Research', link: 'mrm8488/t5-base-finetuned-summarize-news' }
+]);
+
+
+</script>
+
+<style scoped lang="scss">
+.l-models-list {
+  width: 100%;
+
+  &__options-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: $l-spacing-1;
+    gap: $l-spacing-1;
+
+
+     &--option {
+      display: grid;
+      grid-template-columns: 30px 80% 1fr;
+      grid-gap: 5px;
+      background-color: $l-grey-300;
+      padding: $l-spacing-1;
+      border-radius: $l-main-radius;
+
+      label {
+        font-size: $l-font-size-sm;
+        color: $l-grey-150;
+      }
+     }
+
+     &__external-link, button {
+        background-color: $l-grey-300!important;
+        border: none;
+     }
+  }
+}
+</style>

lumigator/frontend/src/styles/_components.scss

@@ -110,3 +110,18 @@
   }
 
 }
+
+.p-radiobutton-box {
+  border: 1px solid white!important;
+  background-color: $l-grey-300!important;
+  height: 18px!important;
+  width: 18px!important;
+}
+
+.p-radiobutton-checked .p-radiobutton-box {
+  border-color: var(--l-radiobutton-checked-border-color)!important;
+
+  .p-radiobutton-icon {
+    background: $l-primary-color!important;
+  }
+}

lumigator/frontend/src/styles/_variables.scss

@@ -3,6 +3,7 @@ $l-primary-color: #e0c414; // Main brand color (gold/yellow)
 $l-primary-color-text: #ffffff;
 $white: #ffffff;
 $l-grey-100: #A4A4A4;
+$l-grey-150: #B8B8B8;
 $l-grey-200: #7F7F7F;
 $l-grey-300: #3F3F46;
 $l-grey-400: #323232;
@@ -15,6 +16,7 @@ $l-overlay-color: rgba(0, 0, 0, 0.6);
 $l-text-color: #eaeaea;
 $l-text-secondary-color: #b3b3b3;
 $l-disabled-input-color: #363636;
+$-zinc-800: red;
 
 // Typography
 $l-font-family: 'Inter', sans-serif;