feat: support model selection

src/common/localization/en-us.ts

@@ -183,12 +183,19 @@ export const english: IAppStrings = {
     },
     predict: {
         title: "Analyze",
-        uploadFile: "Upload image and run analysis",
+        uploadFile: "Choose an image to analyze with",
         inProgress: "Analysis in progress...",
-        downloadScript: "Use script",
+        noRecentModels: "This project doesn't have any recent models. Please train or compose a new model to analyze with.",
+        selectModelHeader: "Model to analyze with",
+        modelIDPrefix: "Model ID: ",
+        modelNamePrefix: "Model name: ",
+        downloadScript: "Analyze with python script",
         defaultLocalFileInput: "Browse for a file...",
         defaultURLInput: "Paste or type URL...",
     },
+    recentModelsView:{
+        header: "Select model to analyze with",
+    },
     projectMetrics: {
         title: "Project Metrics",
         assetsSectionTitle: "Assets",

src/common/localization/es-cl.ts

@@ -184,12 +184,19 @@ export const spanish: IAppStrings = {
     },
     predict: {
         title: "Analizar",
-        uploadFile: "Cargar archivo y ejecutar análisis",
+        uploadFile: "Elija una imagen para analizar con",
         inProgress: "Análisis en curso...",
-        downloadScript: "Usar script",
+        noRecentModels: "Este proyecto no tiene modelos recientes. Entrenar o componer un nuevo modelo para analizar.",
+        selectModelHeader: "Modelo para analizar con",
+        modelIDPrefix: "ID del modelo: ",
+        modelNamePrefix: "Nombre del modelo: ",
+        downloadScript: "Analizar con script python",
         defaultLocalFileInput: "Busca un archivo...",
         defaultURLInput: "Pegar o escribir URL...",
     },
+    recentModelsView: {
+        header: "Seleccionar modelo para analizar con",
+    },
     projectMetrics: {
         title: "Métricas del proyecto",
         assetsSectionTitle: "Activos",

src/common/strings.ts

@@ -184,10 +184,17 @@ export interface IAppStrings {
         title: string;
         uploadFile: string;
         inProgress: string;
+        noRecentModels: string;
+        selectModelHeader: string;
+        modelIDPrefix: string;
+        modelNamePrefix: string;
         downloadScript: string;
         defaultLocalFileInput: string;
         defaultURLInput: string;
     };
+    recentModelsView: {
+        header: string;
+    }
     projectMetrics: {
         title: string;
         assetsSectionTitle: string

src/common/themes.ts

@@ -1,5 +1,30 @@
 import {createTheme, IPalette} from "@fluentui/react";
 
+const rightPaneDefaultButtonPalette = {
+    themePrimary: "#E9ECEF",
+    themeLighterAlt: "#ebeef1",
+    themeLighter: "#edf0f3",
+    themeLight: "#f0f2f5",
+    themeTertiary: "#f2f4f6",
+    themeSecondary: "#f5f6f8",
+    themeDarkAlt: "#f7f9fa",
+    themeDark: "#fafbfb",
+    themeDarker: "#fcfdfd",
+    neutralLighterAlt: "#35393e",
+    neutralLighter: "#3c4046",
+    neutralLight: "#484c53",
+    neutralQuaternaryAlt: "#50545b",
+    neutralQuaternary: "#565a61",
+    neutralTertiaryAlt: "#70747c",
+    neutralTertiary: "#f0f2f5",
+    neutralSecondary: "#f2f4f6",
+    neutralPrimaryAlt: "#f5f6f8",
+    neutralPrimary: "#E9ECEF",
+    neutralDark: "#fafbfb",
+    black: "#fcfdfd",
+    white: "#2D3035"
+  }
+
 const greenButtonPalette = {
     themePrimary: "#78ad0e",
     themeLighterAlt: "#050701",
@@ -279,6 +304,7 @@ const subMenuPalette = {
 }
 
 
+const rightPaneDefaultButtonTheme = createTheme({palette: rightPaneDefaultButtonPalette});
 const defaultDarkTheme = createTheme({palette: DarkDefaultPalette});
 const whiteTheme = createTheme({palette: whiteButtonPalette});
 const redTheme = createTheme({palette: redButtonPalette});
@@ -291,6 +317,10 @@ const greenWithWhiteBackgroundTheme = createTheme({palette: greenWithWhiteBackgr
 const lightGreyTheme = createTheme({palette: lightGreyPalette});
 const subMenuTheme = createTheme({palette: subMenuPalette})
 
+export function getrightPaneDefaultButtonTheme() {
+    return rightPaneDefaultButtonTheme;
+}
+
 export function getPrimaryWhiteTheme() {
     return whiteTheme;
 }

src/react/components/common/common.scss

@@ -182,3 +182,17 @@
   cursor: pointer;
   width: 100%;
 }
+
+.separator-right-pane-main {
+  margin: 0 1rem;
+  div{
+      background-color: #32363B;
+      color: #E9ECEF;
+      font-weight: 600;
+  }
+}
+
+.model-confirm {
+  width: 110px;
+  margin-right: 20px;
+}

src/react/components/pages/modelCompose/composeModelView.tsx

@@ -3,7 +3,7 @@
 
 import React from "react";
 import { Customizer, IColumn, ICustomizations, Modal, DetailsList, SelectionMode, DetailsListLayoutMode, PrimaryButton, TextField } from "@fluentui/react";
-import { getDarkGreyTheme, getPrimaryGreenTheme, getPrimaryRedTheme } from "../../../../common/themes";
+import { getDarkGreyTheme, getPrimaryGreenTheme, getPrimaryRedTheme, getPrimaryGreyTheme } from "../../../../common/themes";
 import { strings } from "../../../../common/strings";
 import { IModel } from "./modelCompose";
 
@@ -84,7 +84,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                             selectionMode={SelectionMode.none}
                             isHeaderVisible={true}
                             layoutMode={DetailsListLayoutMode.justified}
-                            />
+                        />
                     }
                     {
                         this.state.cannotBeIncludeModels.length > 0 &&
@@ -115,7 +115,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                         </PrimaryButton>
                         <PrimaryButton
                             className="modal-cancel"
-                            theme={getPrimaryRedTheme()}
+                            theme={getPrimaryGreyTheme()}
                             onClick={this.close}
                             >
                             Close

src/react/components/pages/modelCompose/modelCompose.scss

@@ -138,6 +138,7 @@ h4 {
 }
 
 .modal-alert {
+    text-align: center;
     color: #ff4040;
     font-size: small;
     margin-bottom: 1rem;
@@ -165,7 +166,8 @@ h4 {
 }
 
 .modal-buttons-container {
-    justify-content: space-between;
+    justify-content: flex-end;
+    display: flex;
     margin-top: 1.5rem;
 }
 

src/react/components/pages/predict/predictPage.scss

@@ -72,3 +72,35 @@
 .predict-button {
   margin-bottom: 20px;
 }
+
+.no-models-warning {
+  margin-top: 8px;
+}
+
+.model-selection-container {
+  padding-top: 8px; 
+  padding-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.model-selection-header {
+  margin-bottom: 4px;
+}
+
+.model-selection-info-header {
+  margin-bottom: 0px;
+}
+
+.model-selection-info-key {
+  font-size: 12px;
+  color: #d1d1d1;
+  min-width: 80px;
+  float: left;
+}
+
+.model-selection-info-value {
+  font-size: 12px;
+  color: #d1d1d1;
+  float: left;
+}