Skip to content

Commit a043df3

Browse files
committed
feat: add multilingual support for models session tour with English and Spanish translations
1 parent f8689e7 commit a043df3

4 files changed

Lines changed: 140 additions & 133 deletions

File tree

DashAI/front/src/constants/tours/modelsSessionTour.js

Lines changed: 113 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
11
import { maxWidth } from "@mui/system";
2-
import React from "react";
2+
import { Trans } from "react-i18next";
33

44
export const modelsSessionTourSteps = [
55
{
66
target: "body",
77
content: (
8-
<div>
9-
<h3>Session Visualization</h3>
10-
<p>
11-
Welcome to the Session Visualization! This is where you can compare
12-
different models, train them, and analyze their performance.
13-
</p>
14-
<p>Let's start by adding some models to compare in this session.</p>
15-
</div>
8+
<Trans i18nKey="modelsSessionTour:sessionVisualization">
9+
<div>
10+
<h3></h3>
11+
<p></p>
12+
<p></p>
13+
</div>
14+
</Trans>
1615
),
1716
placement: "center",
1817
disableBeacon: true,
1918
},
2019
{
2120
target: '[data-tour="models-right-panel"]',
2221
content: (
23-
<div>
24-
<h3>Available Models</h3>
25-
<p>
26-
On the right panel, you'll see all the machine learning models
27-
compatible with your selected task.
28-
</p>
29-
<p>
30-
Each model has different algorithms and approaches. Click on any model
31-
to add it to your session!
32-
</p>
33-
</div>
22+
<Trans i18nKey="modelsSessionTour:availableModels">
23+
<div>
24+
<h3></h3>
25+
<p></p>
26+
<p></p>
27+
</div>
28+
</Trans>
3429
),
3530
placement: "left",
3631
disableBeacon: true,
3732
},
3833
{
3934
target: '[data-tour="first-model"]',
4035
content: (
41-
<div>
42-
<h3>Add Your First Model</h3>
43-
<p>
44-
Click on this model to add it to your session. This will create a
45-
"run" that you can configure and train.
46-
</p>
47-
<p>
48-
<strong>Click on the model to continue!</strong>
49-
</p>
50-
</div>
36+
<Trans i18nKey="modelsSessionTour:addFirstModel">
37+
<div>
38+
<h3></h3>
39+
<p></p>
40+
<p>
41+
<strong></strong>
42+
</p>
43+
</div>
44+
</Trans>
5145
),
5246
placement: "left",
5347
disableBeacon: true,
@@ -57,24 +51,23 @@ export const modelsSessionTourSteps = [
5751
{
5852
target: '[data-tour="model-config"]',
5953
content: (
60-
<div>
61-
<h3>Model Configuration</h3>
62-
<p>Here you can configure your model before training:</p>
63-
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
64-
<li>
65-
<strong>Run Name:</strong> Give this run a meaningful name to
66-
identify it later
67-
</li>
68-
<li>
69-
<strong>Model Parameters:</strong> Configure the hyperparameters for
70-
your selected model
71-
</li>
72-
</ul>
73-
<p>
74-
Once you're happy with the configuration, click{" "}
75-
<strong>Add Model</strong> to add this model to your session.
76-
</p>
77-
</div>
54+
<Trans i18nKey="modelsSessionTour:modelConfig">
55+
<div>
56+
<h3></h3>
57+
<p></p>
58+
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
59+
<li>
60+
<strong></strong>
61+
</li>
62+
<li>
63+
<strong></strong>
64+
</li>
65+
</ul>
66+
<p>
67+
<strong></strong>
68+
</p>
69+
</div>
70+
</Trans>
7871
),
7972
placement: "right",
8073
disableBeacon: true,
@@ -88,32 +81,27 @@ export const modelsSessionTourSteps = [
8881
{
8982
target: '[data-tour="first-run-card"]',
9083
content: (
91-
<div>
92-
<h3>Your Model Run Card</h3>
93-
<p>
94-
Perfect! This card contains everything about your model run. Here you
95-
can:
96-
</p>
97-
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
98-
<li>
99-
<strong>Train:</strong> Start the training process with your
100-
configured parameters
101-
</li>
102-
<li>
103-
<strong>View Metrics:</strong> See performance scores once training
104-
is complete
105-
</li>
106-
<li>
107-
<strong>Make Predictions:</strong> Use your trained model on new
108-
data
109-
</li>
110-
<li>
111-
<strong>Create Explainers:</strong> Understand how your model makes
112-
decisions
113-
</li>
114-
</ul>
115-
<p>Let's train this model to see how it performs!</p>
116-
</div>
84+
<Trans i18nKey="modelsSessionTour:modelRunCard">
85+
<div>
86+
<h3></h3>
87+
<p></p>
88+
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
89+
<li>
90+
<strong></strong>
91+
</li>
92+
<li>
93+
<strong></strong>
94+
</li>
95+
<li>
96+
<strong></strong>
97+
</li>
98+
<li>
99+
<strong></strong>
100+
</li>
101+
</ul>
102+
<p></p>
103+
</div>
104+
</Trans>
117105
),
118106
placement: "top",
119107
disableBeacon: true,
@@ -123,20 +111,18 @@ export const modelsSessionTourSteps = [
123111
{
124112
target: '[data-tour="train-button"]',
125113
content: (
126-
<div>
127-
<h3>Train Your Model</h3>
128-
<p>
129-
Click the <strong>Train</strong> button to start training your model
130-
with the configured parameters.
131-
</p>
132-
<p>
133-
The training process will run in the background, and you'll be able to
134-
see the progress and results here.
135-
</p>
136-
<p>
137-
<strong>Click "Train" to continue!</strong>
138-
</p>
139-
</div>
114+
<Trans i18nKey="modelsSessionTour:trainModel">
115+
<div>
116+
<h3></h3>
117+
<p>
118+
<strong></strong>
119+
</p>
120+
<p></p>
121+
<p>
122+
<strong></strong>
123+
</p>
124+
</div>
125+
</Trans>
140126
),
141127
placement: "top",
142128
disableBeacon: true,
@@ -147,46 +133,43 @@ export const modelsSessionTourSteps = [
147133
{
148134
target: '[data-tour="model-comparison-panel"]',
149135
content: (
150-
<div>
151-
<h3>Model Comparison</h3>
152-
<p>
153-
Once you have trained multiple models, this comparison panel will show
154-
you a side-by-side view of all your models' performance.
155-
</p>
156-
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
157-
<li>
158-
<strong>Metrics Comparison:</strong> Compare accuracy, precision,
159-
recall, and other metrics
160-
</li>
161-
<li>
162-
<strong>Parameter Analysis:</strong> See which hyperparameters
163-
worked best
164-
</li>
165-
<li>
166-
<strong>Best Model:</strong> Quickly identify your top-performing
167-
model
168-
</li>
169-
</ul>
170-
<p>This makes it easy to choose the best model for your task!</p>
171-
</div>
136+
<Trans i18nKey="modelsSessionTour:modelComparison">
137+
<div>
138+
<h3></h3>
139+
<p></p>
140+
<ul style={{ marginLeft: "20px", lineHeight: "1.6" }}>
141+
<li>
142+
<strong></strong>
143+
</li>
144+
<li>
145+
<strong></strong>
146+
</li>
147+
<li>
148+
<strong></strong>
149+
</li>
150+
</ul>
151+
<p></p>
152+
</div>
153+
</Trans>
172154
),
173155
placement: "bottom",
174156
disableBeacon: true,
157+
maxWidth: "420px",
175158
},
176159
{
177160
target: '[data-tour="graphs-button"]',
178161
content: (
179-
<div>
180-
<h3>Visualize Results</h3>
181-
<p>
182-
Want to see your results in a more visual way? Click the{" "}
183-
<strong>Graphs</strong> button to switch from the table view to
184-
interactive charts.
185-
</p>
186-
<p>
187-
<strong>Click "Graphs" to continue!</strong>
188-
</p>
189-
</div>
162+
<Trans i18nKey="modelsSessionTour:visualizeResults">
163+
<div>
164+
<h3></h3>
165+
<p>
166+
<strong></strong>
167+
</p>
168+
<p>
169+
<strong></strong>
170+
</p>
171+
</div>
172+
</Trans>
190173
),
191174
placement: "bottom",
192175
disableBeacon: true,
@@ -197,18 +180,15 @@ export const modelsSessionTourSteps = [
197180
{
198181
target: '[data-tour="model-comparison-panel"]',
199182
content: (
200-
<div>
201-
<h3>Performance Visualizations</h3>
202-
<p>
203-
The graphs view shows performance metrics, confusion matrices, and
204-
other visualizations to help you better understand your models'
205-
performance.
206-
</p>
207-
<p style={{ marginTop: "12px" }}>
208-
🎉 <strong>Great job!</strong> You can now add more models and
209-
experiment with different parameters!
210-
</p>
211-
</div>
183+
<Trans i18nKey="modelsSessionTour:performanceVisualizations">
184+
<div>
185+
<h3></h3>
186+
<p></p>
187+
<p style={{ marginTop: "12px" }}>
188+
🎉 <strong></strong>
189+
</p>
190+
</div>
191+
</Trans>
212192
),
213193
placement: "right",
214194
disableBeacon: true,

DashAI/front/src/utils/i18n/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import notebookTourEN from "./locales/en/notebookTour.json";
2626
import notebookTourES from "./locales/es/notebookTour.json";
2727
import modelsTourEN from "./locales/en/modelsTour.json";
2828
import modelsTourES from "./locales/es/modelsTour.json";
29+
import modelsSessionTourEN from "./locales/en/modelsSessionTour.json";
30+
import modelsSessionTourES from "./locales/es/modelsSessionTour.json";
2931

3032
// the translations
3133
// (tip move them in a JSON file and import them,
@@ -45,6 +47,7 @@ const resources = {
4547
datasetsTour: datasetsTourEN,
4648
notebookTour: notebookTourEN,
4749
modelsTour: modelsTourEN,
50+
modelsSessionTour: modelsSessionTourEN,
4851
},
4952
es: {
5053
configurableObject: configurableObjectES,
@@ -60,6 +63,7 @@ const resources = {
6063
datasetsTour: datasetsTourES,
6164
notebookTour: notebookTourES,
6265
modelsTour: modelsTourES,
66+
modelsSessionTour: modelsSessionTourES,
6367
},
6468
};
6569

@@ -83,6 +87,7 @@ i18n.use(initReactI18next).init({
8387
"datasetsTour",
8488
"notebookTour",
8589
"modelsTour",
90+
"modelsSessionTour",
8691
],
8792
defaultNS: "common",
8893

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"addFirstModel": "<0><0>Add Your First Model</0><1>Click on this model to add it to your session. This will create a \"run\" that you can configure and train.</1><2><0>Click on the model to continue!</0></2></0>",
3+
"availableModels": "<0><0>Available Models</0><1>On the right panel, you'll see all the machine learning models compatible with your selected task.</1><2>Each model has different algorithms and approaches.</2></0>",
4+
"modelComparison": "<0><0>Model Comparison</0><1>Once you have trained multiple models, this comparison panel will show you a side-by-side view of all your models' performance.</1><2><0><0>Metrics Comparison:</0> Compare accuracy, precision, recall, and other metrics</0><1><0>Parameter Analysis:</0> See which hyperparameters worked best</1><2><0>Best Model:</0> Quickly identify your top-performing model</2></2><3>This makes it easy to choose the best model for your task!</3></0>",
5+
"modelConfig": "<0><0>Model Configuration</0><1>Here you can configure your model before training:</1><2><0><0>Run Name:</0> Give this run a meaningful name to identify it later</0><1><0>Model Parameters:</0> Configure the hyperparameters for your selected model</1></2><3>Once you're happy with the configuration, click <0>Add Model</0> to add this model to your session.</3></0>",
6+
"modelRunCard": "<0><0>Your Model Run Card</0><1>Perfect! This card contains everything about your model run. Here you can:</1><2><0><0>Train:</0> Start the training process with your configured parameters</0><1><0>View Metrics:</0> See performance scores once training is complete</1><2><0>Make Predictions:</0> Use your trained model on new data</2><3><0>Create Explainers:</0> Understand how your model makes decisions</3></2><3>Let's train this model to see how it performs!</3></0>",
7+
"performanceVisualizations": "<0><0>Performance Visualizations</0><1>The graphs view shows performance metrics and other visualizations to help you better understand your models' performance.</1><2>🎉 <0>Great job!</0> You can now add more models and experiment with different parameters!</2></0>",
8+
"sessionVisualization": "<0><0>Session Visualization</0><1>Welcome to the Session Visualization! This is where you can compare different models, train them, and analyze their performance.</1><2>Let's start by adding some models to compare in this session.</2></0>",
9+
"trainModel": "<0><0>Train Your Model</0><1>Click the <0>Train</0> button to start training your model with the configured parameters.</1><2>The training process will run in the background, and you'll be able to see the progress and results here.</2><3><0>Click \"Train\" to continue!</0></3></0>",
10+
"visualizeResults": "<0><0>Visualize Results</0><1>Want to see your results in a more visual way? Click the <0>Graphs</0> button to switch from the table view to interactive charts.</1><2><0>Click \"Graphs\" to continue!</0></2></0>"
11+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"addFirstModel": "<0><0>Agrega tu Primer Modelo</0><1>Haz clic en este modelo para agregarlo a tu sesión. Esto creará una \"ejecución\" que puedes configurar y entrenar.</1><2><0>¡Haz clic en el modelo para continuar!</0></2></0>",
3+
"availableModels": "<0><0>Modelos Disponibles</0><1>En el panel derecho, verás todos los modelos de aprendizaje automático compatibles con la tarea seleccionada.</1><2>Cada modelo tiene diferentes algoritmos y enfoques.</2></0>",
4+
"modelComparison": "<0><0>Comparación de Modelos</0><1>Una vez que hayas entrenado múltiples modelos, este panel de comparación te mostrará una vista lado a lado del rendimiento de todos tus modelos.</1><2><0><0>Comparación de Métricas:</0> Compara precisión, exactitud, recall y otras métricas</0><1><0>Análisis de Parámetros:</0> Ve qué hiperparámetros funcionaron mejor</1><2><0>Mejor Modelo:</0> Identifica rápidamente tu modelo de mejor rendimiento</2></2><3>¡Esto facilita elegir el mejor modelo para tu tarea!</3></0>",
5+
"modelConfig": "<0><0>Configuración del Modelo</0><1>Aquí puedes configurar tu modelo antes de entrenarlo:</1><2><0><0>Nombre de la Ejecución:</0> Dale un nombre significativo a esta ejecución para identificarla más tarde</0><1><0>Parámetros del Modelo:</0> Configura los hiperparámetros para tu modelo seleccionado</1></2><3>Una vez que estés satisfecho(a) con la configuración, haz clic en <0>Agregar Modelo</0> para agregar este modelo a tu sesión.</3></0>",
6+
"modelRunCard": "<0><0>Tarjeta de Ejecución del Modelo</0><1>¡Perfecto! Esta tarjeta contiene todo sobre la ejecución de tu modelo. Aquí puedes:</1><2><0><0>Entrenar:</0> Iniciar el proceso de entrenamiento con tus parámetros configurados</0><1><0>Ver Métricas:</0> Ver las puntuaciones de rendimiento una vez completado el entrenamiento</1><2><0>Hacer Predicciones:</0> Usar tu modelo entrenado con datos nuevos</2><3><0>Crear Explicadores:</0> Entender cómo tu modelo toma decisiones</3></2><3>¡Entrenemos este modelo para ver cómo funciona!</3></0>",
7+
"performanceVisualizations": "<0><0>Visualizaciones de Rendimiento</0><1>La vista de gráficos muestra métricas de rendimiento y otras visualizaciones para ayudarte a entender mejor el rendimiento de tus modelos.</1><2>🎉 <0>¡Excelente trabajo!</0> ¡Ahora puedes agregar más modelos y experimentar con diferentes parámetros!</2></0>",
8+
"sessionVisualization": "<0><0>Visualización de Sesión</0><1>¡Bienvenido/a a la Visualización de Sesión! Aquí es donde puedes comparar diferentes modelos, entrenarlos y analizar su rendimiento.</1><2>Comencemos agregando algunos modelos para comparar en esta sesión.</2></0>",
9+
"trainModel": "<0><0>Entrena tu Modelo</0><1>Haz clic en el botón <0>Entrenar</0> para comenzar a entrenar tu modelo con los parámetros configurados.</1><2>El proceso de entrenamiento se ejecutará en segundo plano, y podrás ver el progreso y los resultados aquí.</2><3><0>¡Haz clic en \"Entrenar\" para continuar!</0></3></0>",
10+
"visualizeResults": "<0><0>Visualizar Resultados</0><1>¿Quieres ver tus resultados de una manera más visual? Haz clic en el botón <0>Gráficos</0> para cambiar de la vista de tabla a gráficos interactivos.</1><2><0>¡Haz clic en \"Gráficos\" para continuar!</0></2></0>"
11+
}

0 commit comments

Comments
 (0)