chore: moved model page to svelte

logic/models/classes/list.go

@@ -38,10 +38,10 @@ func models_data_list_json(w http.ResponseWriter, r *http.Request, c *Context) *
 	}
 
 	type baserow struct {
-		Id         string
+		Id         string `json:"id"`
-		File_Path  string
+		File_Path  string `json:"file_path"`
-		Model_Mode int
+		Model_Mode int    `json:"model_mode"`
-		Status     int
+		Status     int    `json:"status"`
 	}
 
 	rows, err := utils.GetDbMultitple[baserow](c, "model_data_point where class_id=$1 limit 11 offset $2", id, page*10)

logic/models/edit.go

@@ -43,141 +43,9 @@ func handleJson(w http.ResponseWriter, r *http.Request, c *Context) *Error {
 
 	/*
 
-		// Handle errors
-		// All errors will be negative
-		if model.Status < 0 {
-			LoadBasedOnAnswer(c.Mode, w, "/models/edit.html", c.AddMap(AnyMap{
-				"Model": model,
-			}))
-			return nil
-		}
-
 		switch model.Status {
-		case READY:
-			LoadBasedOnAnswer(c.Mode, w, "/models/edit.html", c.AddMap(AnyMap{
-				"Model": model,
-			}))
 		case TRAINING:
-
-			type defrow struct {
-				Id            string
-				Status        int
-				EpochProgress int
-				Epoch         int
-				Accuracy      float64
 		}
-
-			defs := []defrow{}
-
-			if model.Type == 2 {
-				def_rows, err := c.Db.Query("select md.id, md.status, md.epoch, h.epoch_progress, h.accuracy from model_definition as md inner join exp_model_head as h on h.def_id = md.id where md.model_id=$1 order by md.created_on asc", model.Id)
-				if err != nil {
-					return c.Error500(err)
-				}
-				defer def_rows.Close()
-
-				for def_rows.Next() {
-					var def defrow
-					err = def_rows.Scan(&def.Id, &def.Status, &def.Epoch, &def.EpochProgress, &def.Accuracy)
-					if err != nil {
-						return c.Error500(err)
-					}
-					defs = append(defs, def)
-				}
-			} else {
-				def_rows, err := c.Db.Query("select id, status, epoch, epoch_progress, accuracy from model_definition where model_id=$1 order by created_on asc", model.Id)
-				if err != nil {
-					return c.Error500(err)
-				}
-				defer def_rows.Close()
-
-				for def_rows.Next() {
-					var def defrow
-					err = def_rows.Scan(&def.Id, &def.Status, &def.Epoch, &def.EpochProgress, &def.Accuracy)
-					if err != nil {
-						return c.Error500(err)
-					}
-					defs = append(defs, def)
-				}
-			}
-
-			type layerdef struct {
-				id        string
-				LayerType int
-				Shape     string
-			}
-
-			layers := []layerdef{}
-
-			for _, def := range defs {
-				if def.Status == MODEL_DEFINITION_STATUS_TRAINING {
-					rows, err := c.Db.Query("select id, layer_type, shape from model_definition_layer where def_id=$1 order by layer_order asc;", def.Id)
-					if err != nil {
-						return c.Error500(err)
-					}
-					defer rows.Close()
-
-					for rows.Next() {
-						var layerdef layerdef
-						err = rows.Scan(&layerdef.id, &layerdef.LayerType, &layerdef.Shape)
-						if err != nil {
-							return c.Error500(err)
-						}
-						layers = append(layers, layerdef)
-					}
-
-					if model.Type == 2 {
-
-						type lastLayerType struct {
-							Id          string
-							Range_start int
-							Range_end   int
-						}
-
-						var lastLayer lastLayerType
-
-						err := GetDBOnce(c, &lastLayer, "exp_model_head where def_id=$1 and status=3;", def.Id)
-						if err != nil {
-							return c.Error500(err)
-						}
-
-						layers = append(layers, layerdef{
-							id:        lastLayer.Id,
-							LayerType: LAYER_DENSE,
-							Shape:     fmt.Sprintf("%d, 1", lastLayer.Range_end-lastLayer.Range_start+1),
-						})
-					}
-
-					break
-				}
-			}
-
-			sep_mod := 100
-			if len(layers) > 8 {
-				sep_mod = 100 - (len(layers)-8)*10
-			}
-
-			if sep_mod < 10 {
-				sep_mod = 10
-			}
-
-			LoadBasedOnAnswer(c.Mode, w, "/models/edit.html", c.AddMap(AnyMap{
-				"Model":  model,
-				"Defs":   defs,
-				"Layers": layers,
-				"SepMod": sep_mod,
-			}))
-		case PREPARING_ZIP_FILE:
-			LoadBasedOnAnswer(c.Mode, w, "/models/edit.html", c.AddMap(AnyMap{
-				"Model": model,
-			}))
-		default:
-			fmt.Printf("Unkown Status: %d\n", model.Status)
-			return Error500(nil)
-		}
-
-
-		return nil
 	*/
 }
 
@@ -230,6 +98,151 @@ func handleEdit(handle *Handle) {
 		})
 	})
 
+	handle.Get("/models/edit/definitions", func(w http.ResponseWriter, r *http.Request, c *Context) *Error {
+		if !CheckAuthLevel(1, w, r, c) {
+			return nil
+		}
+		if c.Mode != JSON {
+			return c.ErrorCode(nil, 400, AnyMap{})
+		}
+
+		id, err := GetIdFromUrl(r, "id")
+		if err != nil {
+			return c.SendJSONStatus(http.StatusNotFound, "Model not found")
+		}
+
+		model, err := GetBaseModel(c.Db, id)
+		if err == ModelNotFoundError {
+			return c.SendJSONStatus(http.StatusNotFound, "Model not found")
+		} else if err != nil {
+			return c.Error500(err)
+		}
+
+		type defrow struct {
+			Id            string
+			Status        int
+			EpochProgress int
+			Epoch         int
+			Accuracy      float64
+		}
+
+		defs := []defrow{}
+
+		if model.ModelType == 2 {
+			def_rows, err := c.Db.Query("select md.id, md.status, md.epoch, h.epoch_progress, h.accuracy from model_definition as md inner join exp_model_head as h on h.def_id = md.id where md.model_id=$1 order by md.created_on asc", model.Id)
+			if err != nil {
+				return c.Error500(err)
+			}
+			defer def_rows.Close()
+
+			for def_rows.Next() {
+				var def defrow
+				err = def_rows.Scan(&def.Id, &def.Status, &def.Epoch, &def.EpochProgress, &def.Accuracy)
+				if err != nil {
+					return c.Error500(err)
+				}
+				defs = append(defs, def)
+			}
+		} else {
+			def_rows, err := c.Db.Query("select id, status, epoch, epoch_progress, accuracy from model_definition where model_id=$1 order by created_on asc", model.Id)
+			if err != nil {
+				return c.Error500(err)
+			}
+			defer def_rows.Close()
+
+			for def_rows.Next() {
+				var def defrow
+				err = def_rows.Scan(&def.Id, &def.Status, &def.Epoch, &def.EpochProgress, &def.Accuracy)
+				if err != nil {
+					return c.Error500(err)
+				}
+				defs = append(defs, def)
+			}
+		}
+
+		type layerdef struct {
+			id        string
+			LayerType int    `json:"layer_type"`
+			Shape     string `json:"shape"`
+		}
+
+		layers := []layerdef{}
+
+		for _, def := range defs {
+			if def.Status == MODEL_DEFINITION_STATUS_TRAINING {
+				rows, err := c.Db.Query("select id, layer_type, shape from model_definition_layer where def_id=$1 order by layer_order asc;", def.Id)
+				if err != nil {
+					return c.Error500(err)
+				}
+				defer rows.Close()
+
+				for rows.Next() {
+					var layerdef layerdef
+					err = rows.Scan(&layerdef.id, &layerdef.LayerType, &layerdef.Shape)
+					if err != nil {
+						return c.Error500(err)
+					}
+					layers = append(layers, layerdef)
+				}
+
+				if model.ModelType == 2 {
+
+					type lastLayerType struct {
+						Id          string
+						Range_start int
+						Range_end   int
+					}
+
+					var lastLayer lastLayerType
+
+					err := GetDBOnce(c, &lastLayer, "exp_model_head where def_id=$1 and status=3;", def.Id)
+					if err != nil {
+						return c.Error500(err)
+					}
+
+					layers = append(layers, layerdef{
+						id:        lastLayer.Id,
+						LayerType: LAYER_DENSE,
+						Shape:     fmt.Sprintf("%d, 1", lastLayer.Range_end-lastLayer.Range_start+1),
+					})
+				}
+
+				break
+			}
+		}
+
+		type Definitions struct {
+			Id            string      `json:"id"`
+			Status        int         `json:"status"`
+			EpochProgress int         `json:"epoch_progress"`
+			Epoch         int         `json:"epoch"`
+			Accuracy      float64     `json:"accuracy"`
+			Layers        *[]layerdef `json:"layers"`
+		}
+
+		defsToReturn := make([]Definitions, len(defs), len(defs))
+
+		setLayers := false
+
+		for i, def := range defs {
+			var lay *[]layerdef = nil
+			if def.Status == MODEL_DEFINITION_STATUS_TRAINING && !setLayers {
+				lay = &layers
+				setLayers = true
+			}
+			defsToReturn[i] = Definitions{
+				Id:            def.Id,
+				Status:        def.Status,
+				EpochProgress: def.EpochProgress,
+				Epoch:         def.Epoch,
+				Accuracy:      def.Accuracy,
+				Layers:        lay,
+			}
+		}
+
+		return c.SendJSON(defsToReturn)
+	})
+
 	handle.Get("/models/edit", func(w http.ResponseWriter, r *http.Request, c *Context) *Error {
 		if !CheckAuthLevel(1, w, r, c) {
 			return nil

logic/models/run.go

@@ -120,10 +120,125 @@ func handleRun(handle *Handle) {
 			return nil
 		}
 		if c.Mode == JSON {
+
+			read_form, err := r.MultipartReader()
+			if err != nil {
 				// TODO improve message
 				return ErrorCode(nil, 400, nil)
 			}
 
+			var id string
+			var file []byte
+
+			for {
+				part, err_part := read_form.NextPart()
+				if err_part == io.EOF {
+					break
+				} else if err_part != nil {
+                    return c.JsonBadRequest("Invalid multipart data")
+				}
+				if part.FormName() == "id" {
+					buf := new(bytes.Buffer)
+					buf.ReadFrom(part)
+					id = buf.String()
+				}
+				if part.FormName() == "file" {
+					buf := new(bytes.Buffer)
+					buf.ReadFrom(part)
+					file = buf.Bytes()
+				}
+			}
+
+			model, err := GetBaseModel(handle.Db, id)
+			if err == ModelNotFoundError {
+                return c.JsonBadRequest("Models not found");
+			} else if err != nil {
+				return c.Error500(err)
+			}
+
+			if model.Status != READY {
+                return c.JsonBadRequest("Model not ready to run images")
+			}
+
+			def := JustId{}
+			err = GetDBOnce(c, &def, "model_definition where model_id=$1", model.Id)
+			if err == NotFoundError {
+				return c.JsonBadRequest("Could not find definition")
+			} else if err != nil {
+				return c.Error500(err)
+			}
+
+			def_id := def.Id
+
+			// TODO create a database table with tasks
+			run_path := path.Join("/tmp", model.Id, "runs")
+			os.MkdirAll(run_path, os.ModePerm)
+			img_path := path.Join(run_path, "img."+model.Format)
+
+			img_file, err := os.Create(img_path)
+			if err != nil {
+				return c.Error500(err)
+			}
+			defer img_file.Close()
+			img_file.Write(file)
+
+			if !testImgForModel(c, model, img_path) {
+                return c.JsonBadRequest("Provided image does not match the model")
+			}
+
+			root := tg.NewRoot()
+
+			var tf_img *image.Image = nil
+
+			switch model.Format {
+			case "png":
+				tf_img = ReadPNG(root, img_path, int64(model.ImageMode))
+			case "jpeg":
+				tf_img = ReadJPG(root, img_path, int64(model.ImageMode))
+			default:
+				panic("Not sure what to do with '" + model.Format + "'")
+			}
+
+			exec_results := tg.Exec(root, []tf.Output{tf_img.Value()}, nil, &tf.SessionOptions{})
+			inputImage, err := tf.NewTensor(exec_results[0].Value())
+			if err != nil {
+				return c.Error500(err)
+			}
+
+			vi := -1
+
+			if model.ModelType == 2 {
+				c.Logger.Info("Running model normal", "model", model.Id, "def", def_id)
+				vi, err = runModelExp(c, model, def_id, inputImage)
+				if err != nil {
+					return c.Error500(err)
+				}
+			} else {
+				c.Logger.Info("Running model normal", "model", model.Id, "def", def_id)
+				vi, err = runModelNormal(c, model, def_id, inputImage)
+				if err != nil {
+					return c.Error500(err)
+				}
+			}
+
+			os.RemoveAll(run_path)
+
+			rows, err := handle.Db.Query("select name from model_classes where model_id=$1 and class_order=$2;", model.Id, vi)
+			if err != nil {
+				return c.Error500(err)
+			}
+			if !rows.Next() {
+                return c.SendJSON(nil)
+			}
+
+			var name string
+			if err = rows.Scan(&name); err != nil {
+				return c.Error500(err)
+			}
+
+            return c.SendJSON(name)
+		}
+
 		read_form, err := r.MultipartReader()
 		if err != nil {
 			// TODO improve message
@@ -226,13 +341,13 @@ func handleRun(handle *Handle) {
 			c.Logger.Info("Running model normal", "model", model.Id, "def", def_id)
 			vi, err = runModelExp(c, model, def_id, inputImage)
 			if err != nil {
-                return c.Error500(err);
+				return c.Error500(err)
 			}
 		} else {
 			c.Logger.Info("Running model normal", "model", model.Id, "def", def_id)
 			vi, err = runModelNormal(c, model, def_id, inputImage)
 			if err != nil {
-                return c.Error500(err);
+				return c.Error500(err)
 			}
 		}
 

logic/models/train/reset.go

@@ -15,7 +15,36 @@ func handleRest(handle *Handle) {
 			return nil
 		}
 		if c.Mode == JSON {
-            panic("handle JSON /models/train/reset")
+            var dat struct {
+                Id string `json:"id"`
+            }
+            
+            if err := c.ToJSON(r, &dat); err != nil {
+                return err;
+            }
+
+			model, err := GetBaseModel(c.Db, dat.Id)
+			if err == ModelNotFoundError {
+                return c.JsonBadRequest("Model not found");
+			} else if err != nil {
+				// TODO improve response
+				return c.Error500(err)
+			}
+
+			if model.Status != FAILED_PREPARING_TRAINING && model.Status != FAILED_TRAINING {
+                return c.JsonBadRequest("Model is not in status that be reset")
+			}
+
+			os.RemoveAll(path.Join("savedData", model.Id, "defs"))
+
+			_, err = c.Db.Exec("delete from model_definition where model_id=$1", model.Id)
+			if err != nil {
+				// TODO improve response
+				return c.Error500(err)
+			}
+
+			ModelUpdateStatus(c, model.Id, CONFIRM_PRE_TRAINING)
+            return c.SendJSON(model.Id)
 		}
 
 		f, err := MyParseForm(r)

logic/models/train/train.go

@@ -1190,6 +1190,7 @@ func generateExpandableDefinition(c *Context, model *BaseModel, target_accuracy
 	return nil
 }
 
+// TODO make this json friendy
 func generateExpandableDefinitions(c *Context, model *BaseModel, target_accuracy int, number_of_models int) *Error {
 	cls, err := model_classes.ListClasses(c.Db, model.Id)
 	if err != nil {
@@ -1225,13 +1226,77 @@ func generateExpandableDefinitions(c *Context, model *BaseModel, target_accuracy
 	return nil
 }
 
+func handle_models_train_json(w http.ResponseWriter, r *http.Request, c *Context) *Error {
+	var dat struct {
+		Id             string `json:"id"`
+		ModelType      string `json:"model_type"`
+		NumberOfModels int    `json:"number_of_models"`
+		Accuracy       int    `json:"accuracy"`
+	}
+
+	if err_ := c.ToJSON(r, &dat); err_ != nil {
+		return err_
+	}
+
+	if dat.Id == "" {
+		return c.JsonBadRequest("Please provide a id")
+	}
+
+	modelTypeId := 1
+	if dat.ModelType == "expandable" {
+		modelTypeId = 2
+	} else if dat.ModelType != "simple" {
+		return c.JsonBadRequest("Invalid model type!")
+	}
+
+	model, err := GetBaseModel(c.Db, dat.Id)
+	if err == ModelNotFoundError {
+		return c.JsonBadRequest("Model not found")
+	} else if err != nil {
+		return c.Error500(err)
+	}
+
+	if model.Status != CONFIRM_PRE_TRAINING {
+		return c.JsonBadRequest("Model in invalid status for training")
+	}
+
+	if modelTypeId == 2 {
+		full_error := generateExpandableDefinitions(c, model, dat.Accuracy, dat.NumberOfModels)
+		if full_error != nil {
+			return full_error
+		}
+	} else {
+		full_error := generateDefinitions(c, model, dat.Accuracy, dat.NumberOfModels)
+		if full_error != nil {
+			return full_error
+		}
+	}
+
+	if modelTypeId == 2 {
+		go trainModelExp(c, model)
+	} else {
+		go trainModel(c, model)
+	}
+
+	_, err = c.Db.Exec("update models set status = $1, model_type = $2 where id = $3", TRAINING, modelTypeId, model.Id)
+	if err != nil {
+		fmt.Println("Failed to update model status")
+		fmt.Println(err)
+		// TODO improve this response
+		return Error500(err)
+	}
+
+    return c.SendJSON(model.Id)
+}
+
 func handleTrain(handle *Handle) {
 	handle.Post("/models/train", func(w http.ResponseWriter, r *http.Request, c *Context) *Error {
 		if !CheckAuthLevel(1, w, r, c) {
 			return nil
 		}
+
 		if c.Mode == JSON {
-			panic("TODO /models/train JSON")
+			return handle_models_train_json(w, r, c)
 		}
 
 		r.ParseForm()

logic/utils/handler.go

@@ -387,6 +387,7 @@ func (c Context) SendJSONStatus(status int, dat any) *Error {
 }
 
 func (c Context) JsonBadRequest(dat any) *Error {
+    c.Logger.Warn("Request failed with a bad request", "dat", dat)
     return c.SendJSONStatus(http.StatusBadRequest, dat)
 }
 
@@ -620,6 +621,7 @@ func (x Handle) ReadFiles(pathTest string, baseFilePath string, fileType string,
 	})
 }
 
+// TODO remove this
 func (x Handle) ReadTypesFiles(pathTest string, baseFilePath string, fileTypes []string, contentTypes []string) {
 	http.HandleFunc(pathTest, func(w http.ResponseWriter, r *http.Request) {
 		user_path := r.URL.Path[len(pathTest):]
@@ -656,6 +658,42 @@ func (x Handle) ReadTypesFiles(pathTest string, baseFilePath string, fileTypes [
 	})
 }
 
+func (x Handle) ReadTypesFilesApi(pathTest string, baseFilePath string, fileTypes []string, contentTypes []string) {
+	http.HandleFunc("/api" + pathTest, func(w http.ResponseWriter, r *http.Request) {
+        r.URL.Path = strings.Replace(r.URL.Path, "/api", "", 1)
+        
+		user_path := r.URL.Path[len(pathTest):]
+
+		found := false
+		index := -1
+
+		for i, fileType := range fileTypes {
+			if strings.HasSuffix(user_path, fileType) {
+				found = true
+				index = i
+				break
+			}
+		}
+
+		if !found {
+			w.WriteHeader(http.StatusNotFound)
+			w.Write([]byte("File not found"))
+			return
+		}
+
+		bytes, err := os.ReadFile(path.Join(baseFilePath, pathTest, user_path))
+		if err != nil {
+			fmt.Println(err)
+			w.WriteHeader(http.StatusInternalServerError)
+			w.Write([]byte("Failed to load file"))
+			return
+		}
+
+		w.Header().Set("Content-Type", contentTypes[index])
+		w.Write(bytes)
+	})
+}
+
 func NewHandler(db *sql.DB) *Handle {
 
 	var gets []HandleFunc

main.go

@@ -48,7 +48,7 @@ func main() {
 	handle.StaticFiles("/js/", ".js", "text/javascript")
 	handle.ReadFiles("/imgs/", "views", ".png", "image/png;")
 	handle.ReadTypesFiles("/savedData/", ".", []string{".png", ".jpeg"}, []string{"image/png", "image/jpeg"})
-	handle.ReadTypesFiles("/api/savedData/", ".", []string{".png", ".jpeg"}, []string{"image/png", "image/jpeg"})
+	handle.ReadTypesFilesApi("/savedData/", ".", []string{".png", ".jpeg"}, []string{"image/png", "image/jpeg"})
 
 	handle.GetHTML("/", AnswerTemplate("index.html", nil, 0))
 

webpage/src/app.html

@@ -4,6 +4,8 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

webpage/src/lib/MessageSimple.svelte

@@ -14,6 +14,11 @@
 
 	let timeout: number | undefined = undefined;
 
+    export function clear() {
+        if (timeout) clearTimeout(timeout);
+        message = undefined;
+    }
+
 	export function display(
 		msg: string,
 		options?: {

webpage/src/lib/requests.svelte.ts

@@ -16,7 +16,10 @@ export async function get(url: string) {
 		headers: headers,
 	});
 
-    if (r.status !== 200) {
+    if (r.status === 401) {
+        userStore.user = undefined;
+        goto("/login")
+    } else if (r.status !== 200) {
         throw r;
     }
 
@@ -36,7 +39,10 @@ export async function post(url: string, body: any) {
         body: JSON.stringify(body),
 	});
     
-    if (r.status !== 200) {
+    if (r.status === 401) {
+        userStore.user = undefined;
+        goto("/login")
+    } else if (r.status !== 200) {
         throw r;
     }
 
@@ -56,7 +62,10 @@ export async function rdelete(url: string, body: any) {
         body: JSON.stringify(body),
 	});
 
-    if (r.status !== 200) {
+    if (r.status === 401) {
+        userStore.user = undefined;
+        goto("/login")
+    } else if (r.status !== 200) {
         throw r;
     }
 

webpage/src/routes/models/edit/+page.svelte

@@ -6,12 +6,12 @@
 		width: number;
 		height: number;
 		status: number;
-    }
+	};
 
 	export type Layer = {
 		layer_type: number;
 		shape: string;
-    }
+	};
 
 	export type Definitions = {
 		epoch: number;
@@ -19,7 +19,7 @@
 		status: number;
 		accuracy: number;
 		layers?: Layer[];
-    }
+	};
 </script>
 
 <script lang="ts">
@@ -28,12 +28,14 @@
 	import BaseModelInfo from "./BaseModelInfo.svelte";
 	import DeleteModel from "./DeleteModel.svelte";
 	import { goto } from "$app/navigation";
-	import { get } from "src/lib/requests.svelte";
+	import { get, rdelete } from "src/lib/requests.svelte";
+    import MessageSimple from "$lib/MessageSimple.svelte"
 
-    import 'src/styles/forms.css'
 	import ModelData from "./ModelData.svelte";
 	import DeleteZip from "./DeleteZip.svelte";
 
+    import 'src/styles/forms.css'
+	import RunModel from "./RunModel.svelte";
     let model: Promise<Model> = $state(new Promise(() => {}));
     let definitions: Promise<Definitions[]> = $state(new Promise(() => {}));
 
@@ -43,10 +45,18 @@
         try {
             let temp_model: Model = await get(`models/edit?id=${id}`);
 
+            console.log(temp_model)
+
             if (temp_model.status == 3) {
                 setTimeout(getModel, 2000);
             }
 
+            if (temp_model.status == 4) {
+                setTimeout(getModel, 5000);
+
+                definitions = await get(`models/edit/definitions?id=${id}`);
+            }
+
             model = Promise.resolve(temp_model);
         } catch (e) {
             if (e instanceof Response) {
@@ -69,8 +79,26 @@
         getModel();
     });     
 
+    let resetMessages: MessageSimple;
+
     async function resetModel() {
-        throw new Error("TODO");
+        resetMessages.display("");
+        
+        let _model = await model;
+
+        try {
+            await rdelete('models/train/reset', {
+                "id": _model.id
+            });
+
+            getModel();
+        } catch (e) {
+            if (e instanceof Response) {
+                resetMessages.display(await e.json())
+            } else {
+                resetMessages.display("Could not reset model!")
+            }
+        }
     }
 
     // Auto reload after 2s when model.status 3,4
@@ -78,256 +106,20 @@
 
 <svelte:head>
 	{#await model}
-        <title>
+		<title>Model</title>
-            Model
-        </title>
 	{:then m}
 		{#if m}
 			<title>
 				Model: {m.name}
 			</title>
 		{:else}
-            <title>
+			<title>Model</title>
-                Model
-            </title>
 		{/if}
 	{/await}
 </svelte:head>
 
-<!-- {{/* Is called from a diffrent endpoint so that it does not matter where this is from :) which means that . can mean what ever I want */}}
-{{ define "data-model-create-class-table-table" }}
-<div>
-    <table>
-        <thead>
-            <tr>
-                <th>
-                    File Path
-                </th>
-                <th>
-                    Mode
-                </th>
-                <th>
-                    <!-- Img -- >
-                </th>
-                <th>
-                    <!-- Status -- >
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            {{range .List}}
-                <tr>
-                    <td>
-                        {{ if eq .FilePath "id://" }}
-                            Managed
-                        {{ else }}
-                            {{.FilePath}}
-                        {{ end }}
-                    </td>
-                    <td>
-                        {{ if (eq .Mode 2) }}
-                            Testing
-                        {{ else }}
-                            Training
-                        {{ end }}
-                    </td>
-                    <td class="text-center">
-                        {{ if startsWith .FilePath "id://" }}
-                            <img src="/savedData/{{ $.Model.Id }}/data/{{ .Id }}.{{ $.Model.Format }}" height="30px" width="30px" style="object-fit: contain;" />
-                        {{ else }}
-                            TODO
-                            img {{ .FilePath }}
-                        {{ end }}
-                    </td>
-                    <td class="text-center">
-                        {{ if eq .Status 1 }}
-                            <span class="bi bi-check-circle-fill" style="color: green"></span>
-                        {{ else }}
-                            <span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
-                        {{ end }}
-                    </td>
-                </tr>
-            {{end}}
-        </tbody>
-    </table>
-    <div class="flex justify-center align-center">
-        <div class="grow-1 flex justify-end align-center ">
-            {{ if gt .Page 0 }}
-                <button 
-                    hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page -1 }}"
-                    hx-target=".content[data-tab='{{ .Name }}']"
-                    hx-swap="innerHTML"
-                    hx-headers='{"REQUEST-TYPE": "html"}'
-                    data-tab="{{ .Name }}">
-                    Prev
-                </button>
-            {{ end }}
-        </div>
-        
-        <div style="padding: 10px;">
-            {{ .Page }}
-        </div>
-
-        <div class="grow-1 flex justify-start align-center">
-            {{ if .ShowNext }}
-                <button 
-                    hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page 1 }}"
-                    hx-target=".content[data-tab='{{ .Name }}']"
-                    hx-swap="innerHTML"
-                    hx-headers='{"REQUEST-TYPE": "html"}'
-                    data-tab="{{ .Name }}">
-                    Next
-                </button>
-            {{ end }}
-        </div>
-    </div>
-</div>
-{{ end }}
-
--->
-
-<!--
-{{ define "data-model-create-class-table" }}
-    {{ if eq (len .Classes) 0 }}
-        TODO CREATE TABLE
-    {{else}}
-        <div class="tabs-header">
-            {{/* Handle the case where there are to many buttons */}}
-            <div class="header">
-                {{ range .Classes }}
-                    {{/* TODO Auto Load 1st */}}
-                    <button 
-                        hx-get="/models/data/list?id={{ .Id }}"
-                        hx-target=".content[data-tab='{{ .Name }}']"
-                        hx-swap="innerHTML"
-                        hx-headers='{"REQUEST-TYPE": "html"}'
-                        hx-trigger="click"
-                        class="tab" 
-                        data-tab="{{ .Name }}">
-                        {{ .Name }}
-                    </button>
-                {{ end }}
-            </div>
-            {{ range $i, $a := .Classes }}
-                {{ if eq $i 0}}
-                    <div 
-                        hx-get="/models/data/list?id={{ .Id }}"
-                        hx-target=".content[data-tab='{{ $a.Name }}']"
-                        hx-swap="innerHTML"
-                        hx-headers='{"REQUEST-TYPE": "html"}'
-                        hx-trigger="load"
-                        class="content" 
-                        data-tab="{{ $a.Name }}">
-                    </div>
-                {{ else }}
-                    <div 
-                        class="content" 
-                        data-tab="{{ $a.Name }}" >
-                    </div>
-                {{ end }}
-            {{ end }}
-        </div>
-    {{end}}
-{{ end }}
--->
-
-<!--
-{{ define "train-model-card" }}
-    <form hx-post="/models/train" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML" {{ if .Error }} class="submitted" {{end}} >
-        {{ if .HasData }}
-            {{ if .NumberOfInvalidImages }}
-                {{ if gt .NumberOfInvalidImages 0 }}
-                    <p class="danger">
-                        There are images {{ .NumberOfInvalidImages }} that were loaded that do not have the correct format. These images will be delete when the model trains.
-                    </p>
-                    <input type="hidden" value="{{ .NumberOfInvalidImages }}" name="id" />
-                {{ end }}
-            {{ end }}
-            {{ if .ErrorMessage }}
-                <p class="danger">
-                    {{ .ErrorMessage }}
-                </p>
-            {{ end }}
-            {{/* TODO expading mode */}}
-            <input type="hidden" value="{{ .Model.Id }}" name="id" />
-            <fieldset>
-                <legend>
-                    Model Type
-                </legend>
-                <div class="input-radial">
-                    <input id="model_type_simple" value="simple" name="model_type" type="radio" checked  />
-                    <label for="model_type_simple">Simple</label><br/>
-                    <input id="model_type_expandable" value="expandable" name="model_type" type="radio" />
-                    <label for="model_type_expandable">Expandable</label>
-                </div>
-            </fieldset>
-            {{/* TODO allow more models to be created */}}
-            <fieldset>
-                <label for="number_of_models">Number of Models</label>
-                <input id="number_of_models" type="number" name="number_of_models" value="1" />
-            </fieldset>
-            {{/* TODO to Change the acc */}}
-            <fieldset>
-                <label for="accuracy">Target accuracy</label>
-                <input id="accuracy" type="number" name="accuracy" value="95" />
-            </fieldset>
-            {{/* TODO allow to chose the base of the model */}}
-            {{/* TODO allow to change the shape of the model */}}
-            <button>
-                Train
-            </button>
-        {{ else }}
-            <h2>
-                To train the model please provide data to the model first
-            </h2>
-        {{ end }}
-    </form>
-{{ end }}
-
--->
-
 <!--
 {{ define "run-model-card" }}
-    <form hx-headers='{"REQUEST-TYPE": "html"}' enctype="multipart/form-data" hx-post="/models/run" hx-swap="outerHTML">
-        <input type="hidden" name="id" value={{.Model.Id}} />
-        <fieldset class="file-upload" >
-            <label for="file">Image</label>
-            <div class="form-msg">
-                Run image through them model and get the result
-            </div>
-            <div class="icon-holder">
-                <button class="icon">
-                    <img replace="icon" src="/imgs/upload-icon.png" />
-                    <span replace="File Selected">
-                        Image File
-                    </span>
-                </button>
-                {{ if .ImageError }}
-                    <span class="form-msg error">
-                        The provided image was not valid for this model
-                    </span>
-                {{ end }}
-                <input id="file" name="file" type="file" required accept="image/png" />
-            </div>
-        </fieldset>
-        <button>
-            Run
-        </button>
-        {{ if .NotFound }}
-            <div class="result">
-                <h1>
-                    The class was not found
-                </h1>
-            </div>
-        {{ else if .Result }}
-            <div>
-                <h1>
-                    Result
-                </h1>
-                The image was classified as {{.Result}}
-            </div>
-        {{ end }}
-    </form>
 {{ end }}
 
 -->
@@ -342,9 +134,7 @@
 					{m.name}
 				</h1>
 				<!-- TODO add cool animation -->
-              <h2 class="text-center">
+				<h2 class="text-center">Preparing the model</h2>
-                  Preparing the model
-              </h2>
 			</div>
 		{:else if m.status == -1}
 			<div>
@@ -352,13 +142,9 @@
 					{m.name}
 				</h1>
 				<!-- TODO improve message -->
-              <h2 class="text-center">
+				<h2 class="text-center">Failed to prepare model</h2>
-                  Failed to prepare model
-              </h2>
 
-              <div>
+				<div>TODO button delete</div>
-                TODO button delete
-              </div>
 
 				<!--form hx-delete="/models/delete">
                   <input type="hidden" name="id" value="{{ .Model.Id }}" />
@@ -388,9 +174,8 @@
 			<form on:submit={resetModel}>
 				Failed Prepare for training.<br />
 				<div class="spacer"></div>
-                <button class="danger">
+				<MessageSimple bind:this={resetMessages} />
-                    Try Again
+				<button class="danger"> Try Again </button>
-                <button>
 			</form>
 			<DeleteModel model={m} />
 		{:else if m.status == 4}
@@ -406,18 +191,10 @@
 					<table>
 						<thead>
 							<tr>
-                                <th>
+								<th> Done Progress </th>
-                                    Done Progress
+								<th> Training Round Progress </th>
-                                </th>
+								<th> Accuracy </th>
-                                <th>
+								<th> Status </th>
-                                    Training Round Progress
-                                </th>
-                                <th>
-                                    Accuracy
-                                </th>
-                                <th>
-                                    Status
-                                </th>
 							</tr>
 						</thead>
 						<tbody>
@@ -436,11 +213,14 @@
 										{#if def.status == 2}
 											<span class="bi bi-book" style="color: green;"></span>
 										{:else if [3, 6, -3].includes(def.status)}
-                                            <span class="bi bi-book-half" style="color: {{
+											<span
+												class="bi bi-book-half"
+												style="color: {{
 													'3': 'green',
 													'-3': 'red',
-                                                '6': 'orange',
+													'6': 'orange'
-                                            }[String(def.status)]};"></span>
+												}[String(def.status)]};"
+											></span>
 										{:else}
 											{def.status}
 										{/if}
@@ -451,33 +231,43 @@
 										<td colspan="4">
 											<svg viewBox="0 200 1000 600">
 												{#each def.layers as layer, i}
-                                                    {@const sep_mod = def.layers.length > 8 ? Math.max(10, 100 - (def.layers.length - 8) * 10) : 100}
+													{@const sep_mod =
+														def.layers.length > 8
+															? Math.max(10, 100 - (def.layers.length - 8) * 10)
+															: 100}
 													{#if layer.layer_type == 1}
 														<polygon
 															points="50,450 200,250 200,550 50,750"
 															stroke="black"
 															stroke-width="2"
-                                                            fill="green"></polygon>
+															fill="green"
+														></polygon>
 													{:else if layer.layer_type == 4}
 														<polygon
-                                                            points="{50 + (i * sep_mod)},450 {200 + (i * sep_mod)},250 {200 + (i * sep_mod)},550 {50 + (i * sep_mod)},750" 
+															points="{50 + i * sep_mod},450 {200 + i * sep_mod},250 {200 +
+																i * sep_mod},550 {50 + i * sep_mod},750"
 															stroke="black"
 															stroke-width="2"
-                                                            fill="orange">
+															fill="orange"
+														>
 														</polygon>
 													{:else if layer.layer_type == 3}
 														<polygon
-                                                            points="{50 + (i * sep_mod)},450 {200 + (i * sep_mod)},250 {200 + (i * sep_mod)}},550 {50 + (i * sep_mod)},750" 
+															points="{50 + i * sep_mod},450 {200 + i * sep_mod},250 {200 +
+																i * sep_mod},550 {50 + i * sep_mod},750"
 															stroke="black"
 															stroke-width="2"
-                                                            fill="red">
+															fill="red"
+														>
 														</polygon>
-                                                    {:else if layer.layer_type == 3}
+													{:else if layer.layer_type == 2}
 														<polygon
-                                                            points="{50 + (i * sep_mod)},550 {200 + (i * sep_mod)},350 {200 + (i * sep_mod)},450 {50 + (i * sep_mod)},650" 
+															points="{50 + i * sep_mod},550 {200 + i * sep_mod},350 {200 +
+																i * sep_mod},450 {50 + i * sep_mod},650"
 															stroke="black"
 															stroke-width="2"
-                                                            fill="blue">
+															fill="blue"
+														>
 														</polygon>
 													{:else}
 														<div>
@@ -494,26 +284,14 @@
 						</tbody>
 					</table>
 				{/await}
-                {{/* TODO Add ability to stop training */}}
+				<!-- TODO Add ability to stop training -->
 			</div>
 		{:else if m.status == 5}
 			<BaseModelInfo model={m} />
-            TODO run model
+            <RunModel model={m} />
-            <!--
-            <form hx-delete="/models/train/reset" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML">
-                Failed Prepare for training.<br/>
-                <div class="spacer" ></div>
-                <input type="hidden" name="id" value="{{ .Model.Id }}" />
-                <button class="danger">
-                    Try Again
-                </button>
-            </form>
-            -->
 			<DeleteModel model={m} />
 		{:else}
-            <h1>
+			<h1>Unknown Status of the model.</h1>
-                Unknown Status of the model.
-            </h1>
 		{/if}
 	{/await}
 </main>
@@ -522,4 +300,32 @@
 	main {
 		padding: 20px 15vw;
 	}
+	table {
+		width: 100%;
+		box-shadow: 0 2px 8px 1px #66666622;
+		border-radius: 10px;
+		border-collapse: collapse;
+		overflow: hidden;
+	}
+
+	table thead {
+		background: #60606022;
+	}
+
+	table tr td,
+	table tr th {
+		border-left: 1px solid #22222244;
+		padding: 15px;
+	}
+
+	table tr td:first-child,
+	table tr th:first-child {
+		border-left: none;
+	}
+
+	table tr td button,
+	table tr td .button {
+		padding: 5px 10px;
+		box-shadow: 0 2px 5px 1px #66666655;
+	}
 </style>

webpage/src/routes/models/edit/ModelData.svelte

@@ -12,10 +12,12 @@
 	import MessageSimple from "src/lib/MessageSimple.svelte";
 	import { createEventDispatcher } from "svelte";
 	import ModelTable from "./ModelTable.svelte";
+    import TrainModel from "./TrainModel.svelte";
 
     let { model } = $props<{model: Model}>();
 
     let classes: Class[] = $state([]);
+    let has_data: boolean = $state(false);
 
     let file: File | undefined = $state();
 
@@ -61,6 +63,7 @@
             let data = await get(`models/edit/classes?id=${model.id}`);
             classes = data.classes
             numberOfInvalidImages = data.number_of_invalid_images;
+            has_data = data.has_data;
         } catch {
             return;
         }
@@ -150,7 +153,7 @@
                 </form>
             </div>
             <div class="content" class:selected={isActive("create-class")}>
-                <ModelTable classes={classes} />
+                <ModelTable {classes} {model} />
             </div>
             <div class="content" class:selected={isActive("api")}>
                 TODO
@@ -177,7 +180,7 @@
                 </button>
             </div>
             <div class="content" class:selected={isActive("create-class")}>
-                <ModelTable classes={classes} />
+                <ModelTable {classes} {model} />
             </div>
             <div class="content" class:selected={isActive("api")}>
                 TODO
@@ -185,3 +188,5 @@
         </Tabs>
     {/if}
 </div>
+
+<TrainModel number_of_invalid_images={numberOfInvalidImages} {model} {has_data} on:reload={() => dispatch('reload')} />

webpage/src/routes/models/edit/ModelTable.svelte

@@ -1,15 +1,28 @@
+<script lang="ts" context="module">
+	export type Image = {
+		file_path: string;
+		mode: number;
+        status: number;
+	};
+</script>
+
 <script lang="ts">
 	import Tabs from 'src/lib/Tabs.svelte';
 	import type { Class } from './ModelData.svelte';
 	import { get } from 'src/lib/requests.svelte';
+	import type { Model } from './+page.svelte';
 
 	let selected_class: Class | undefined = $state();
 
-	let { classes } = $props<{ classes: Class[] }>();
+	let { classes, model } = $props<{ classes: Class[]; model: Model }>();
 
-	function setActiveClass(c: Class, tb_fn: (name: string) => (() => void)) {
+	let page = $state(0);
+	let showNext = $state(false);
+	let image_list = $state<Image[]>([]);
+
+	function setActiveClass(c: Class, tb_fn: (name: string) => () => void) {
 		selected_class = c;
-        console.log("test", c, classes, c.name)
+		console.log('test', c, classes, c.name);
 		tb_fn(c.name)();
 	}
 
@@ -21,23 +34,31 @@
 		console.log(selected_class);
 
 		try {
-            
 			let url = new URLSearchParams();
 			url.append('id', selected_class?.id ?? '');
+			url.append('page', `${page}`);
 
 			let res = await get('models/data/list?' + url.toString());
-            console.log(res);
+			showNext = res.showNext;
+			image_list = res.image_list;
+
+			console.log(image_list);
 		} catch (e) {
-            console.error("TODO notify user", e);
+			console.error('TODO notify user', e);
 		}
 	}
 
+	$effect(() => {
+		if (selected_class) {
+			page = 0;
+		}
+	});
+
 	$effect(() => {
 		if (selected_class) {
 			getList();
 		}
-    })
+	});
-
 </script>
 
 {#if classes.length == 0}
@@ -56,8 +77,109 @@
 				</button>
 			{/each}
 		</div>
+		<div class="content selected">
+			<table>
+				<thead>
+					<tr>
+						<th> File Path </th>
+						<th> Mode </th>
+						<th>
+							<!-- Img -->
+						</th>
+						<th>
+							<!-- Status -->
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each image_list as image}
+						<tr>
+							<td>
+								{#if image.file_path == 'id://'}
+									Managed
+								{:else}
+									{image.file_path}
+								{/if}
+							</td>
+							<td>
+								{#if image.mode == 2}
+									Testing
+								{:else}
+									Training
+								{/if}
+							</td>
+							<td class="text-center">
+								{#if image.file_path == 'id://'}
+									<img
+                                        alt=""
+										src="/api/savedData/{model.id}/data/{image.id}.{model.format}"
+										height="30px"
+										width="30px"
+										style="object-fit: contain;"
+									/>
+								{:else}
+									TODO img {image.file_path}
+								{/if}
+							</td>
+							<td class="text-center">
+								{#if image.status == 1}
+									<span class="bi bi-check-circle-fill" style="color: green"></span>
+								{:else}
+									<span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+			<div class="flex justify-center align-center">
+				<div class="grow-1 flex justify-end align-center">
+					{#if page > 0}
+						<button on:click={() => (page -= 1)}> Prev </button>
+					{/if}
+				</div>
+
+				<div style="padding: 10px;">
+					{page}
+				</div>
+
+				<div class="grow-1 flex justify-start align-center">
+					{#if showNext}
+						<button on:click={() => (page += 1)}> Next </button>
+					{/if}
+				</div>
+			</div>
+		</div>
 	</Tabs>
 {/if}
 
 <style lang="scss">
+	table {
+		width: 100%;
+		box-shadow: 0 2px 8px 1px #66666622;
+		border-radius: 10px;
+		border-collapse: collapse;
+		overflow: hidden;
+	}
+
+	table thead {
+		background: #60606022;
+	}
+
+	table tr td,
+	table tr th {
+		border-left: 1px solid #22222244;
+		padding: 15px;
+	}
+
+	table tr td:first-child,
+	table tr th:first-child {
+		border-left: none;
+	}
+
+	table tr td button,
+	table tr td .button {
+		padding: 5px 10px;
+		box-shadow: 0 2px 5px 1px #66666655;
+	}
 </style>

webpage/src/routes/models/edit/RunModel.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { postFormData } from "src/lib/requests.svelte";
+	import type { Model } from "./+page.svelte";
+    import FileUpload from "src/lib/FileUpload.svelte";
+	import MessageSimple from "src/lib/MessageSimple.svelte";
+
+    let {model} = $props<{model: Model}>();
+
+    let file: File | undefined = $state();
+
+    let result: string | undefined = $state();
+    let run = $state(false);
+
+    let messages: MessageSimple;
+
+    async function submit() {
+        console.log("here", file);
+        if (!file) return;
+        messages.clear();
+
+        let form = new FormData();
+        form.append("id", model.id);
+        form.append("file", file, "file");
+
+        run = true;
+
+        try {
+            result = await postFormData('models/run', form);
+        } catch (e) {
+            if (e instanceof Response) {
+                messages.display(await e.json());
+            } else {
+                messages.display("Could not run the model");
+            }
+        }
+        
+    }
+</script>
+    <form on:submit|preventDefault={submit}>
+        <fieldset class="file-upload" >
+            <label for="file">Image</label>
+            <div class="form-msg">
+                Run image through them model and get the result
+            </div>
+
+            <FileUpload replace_slot bind:file accept="image/*" >
+                <img src="/imgs/upload-icon.png" alt="" />
+                <span>
+                    Upload image
+                </span>
+                <div slot="replaced-name">
+                    <span>
+                        Image selected
+                    </span>
+                </div>
+            </FileUpload>
+        </fieldset>
+        <MessageSimple bind:this={messages} />
+        <button>
+            Run
+        </button>
+        {#if run}
+            {#if !result}
+                <div class="result">
+                    <h1>
+                        The class was not found
+                    </h1>
+                </div>
+            {:else}
+                <div>
+                    <h1>
+                        Result
+                    </h1>
+                    The image was classified as {result}
+                </div>
+            {/if}
+        {/if}
+    </form>

webpage/src/routes/models/edit/TrainModel.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import MessageSimple from 'src/lib/MessageSimple.svelte';
+	import type { Model } from './+page.svelte';
+	import { post } from 'src/lib/requests.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	let { number_of_invalid_images, has_data, model } = $props<{
+		number_of_invalid_images: number;
+		has_data: boolean;
+		model: Model;
+	}>();
+
+	let data = $state({
+		model_type: 'simple',
+		number_of_models: 1,
+		accuracy: 95
+	});
+
+	let submitted = $state(false);
+
+	let dispatch = createEventDispatcher<{ reload: void }>();
+
+	let messages: MessageSimple;
+
+	async function submit() {
+		submitted = true;
+		try {
+			await post('models/train', {
+				id: model.id,
+				...data
+			});
+			dispatch('reload');
+		} catch (e) {
+			if (e instanceof Response) {
+				messages.display(await e.json());
+			} else {
+				messages.display("Could not start the training of the model");
+			}
+		}
+	}
+</script>
+
+<form class:submitted on:submit|preventDefault={submit}>
+	{#if has_data}
+		{#if number_of_invalid_images > 0}
+			<p class="danger">
+				There are images {number_of_invalid_images} that were loaded that do not have the correct format.DeleteZip
+				These images will be delete when the model trains.
+			</p>
+		{/if}
+		<MessageSimple bind:this={messages} />
+		<!-- TODO expading mode -->
+		<fieldset>
+			<legend> Model Type </legend>
+			<div class="input-radial">
+				<input
+					id="model_type_simple"
+					value="simple"
+					name="model_type"
+					type="radio"
+					bind:group={data.model_type}
+				/>
+				<label for="model_type_simple">Simple</label><br />
+				<input
+					id="model_type_expandable"
+					value="expandable"
+					name="model_type"
+					bind:group={data.model_type}
+					type="radio"
+				/>
+				<label for="model_type_expandable">Expandable</label>
+			</div>
+		</fieldset>
+		<!-- TODO allow more models to be created -->
+		<fieldset>
+			<label for="number_of_models">Number of Models</label>
+			<input
+				id="number_of_models"
+				type="number"
+				name="number_of_models"
+				bind:value={data.number_of_models}
+			/>
+		</fieldset>
+		<!-- TODO to Change the acc -->
+		<fieldset>
+			<label for="accuracy">Target accuracy</label>
+			<input id="accuracy" type="number" name="accuracy" bind:value={data.accuracy} />
+		</fieldset>
+		<!-- TODO allow to chose the base of the model -->
+		<!-- TODO allow to change the shape of the model -->
+		<button> Train </button>
+	{:else}
+		<h2>To train the model please provide data to the model first</h2>
+	{/if}
+</form>