Model Page UI Improvements

back-end/database/model.py

@@ -57,7 +57,10 @@ class Models(db.Model):
     )
 
     def as_dict(self):
-        return {c.name: getattr(self, c.name) for c in self.__table__.columns}
+        data = {c.name: getattr(self, c.name) for c in self.__table__.columns}
+        data["tags"] = [tag.name for tag in self.tags]
+        return data
+
 
 
 class Tags(db.Model):

back-end/objects/RModelWrapper.py

@@ -222,10 +222,17 @@ def update_model(self, model_id, metadata) -> Models:
         )
         model_to_update.nickname = metadata.get("nickname") or model_to_update.nickname
 
-        prev_tags = metadata.get("tags")
-        model_to_update.tags = (
-            [Tags(name=tag_name) for tag_name in prev_tags] if prev_tags else []
-        )
+        if "tags" in metadata:
+            existing_tags = {tag.name: tag for tag in Tags.query.all()}
+            updated_tags = []
+            for tag_name in metadata["tags"]:
+                if tag_name in existing_tags:
+                    updated_tags.append(existing_tags[tag_name])
+                else:
+                    new_tag = Tags(name=tag_name)
+                    db.session.add(new_tag)
+                    updated_tags.append(new_tag)
+            model_to_update.tags = updated_tags
 
         db.session.commit()
 

back-end/utils/model_utils.py

@@ -183,7 +183,7 @@ def construct_metadata_4_save(metadata, code_path, weight_path, model):
         "predefined": bool(int(metadata.get("predefined"))),
         "pretrained": bool(int(metadata.get("pretrained"))),
         "description": metadata.get("description"),
-        "tags": metadata.get("tags"),
+        "tags": metadata.get("tags", []),
         "create_time": datetime.now(),
         "code_path": code_path,
         "weight_path": weight_path,

front-end/cypress/downloads/SimpleCNN.py

@@ -0,0 +1,49 @@
+import torch
+import torch.nn as nn
+
+
+class SimpleCNN(nn.Module):
+    def __init__(self):
+        super(SimpleCNN, self).__init__()
+
+        # Convolutional layers
+        self.conv1 = nn.Conv2d(in_channels=3, out_channels=16, kernel_size=3, stride=1, padding=1)
+        self.conv2 = nn.Conv2d(in_channels=16, out_channels=32, kernel_size=3, stride=1, padding=1)
+
+        # Activation and pooling
+        self.relu = nn.ReLU()
+        self.pool = nn.MaxPool2d(kernel_size=2, stride=2, padding=0)
+
+        # Fully connected layers
+        self.fc1 = nn.Linear(32 * 8 * 8, 128)  # after two pooling operations, 32x32 becomes 8x8
+        self.fc2 = nn.Linear(128, 9)  # for 9 output classes
+
+    def forward(self, x):
+        # First convolutional layer followed by activation and pooling
+        x = self.conv1(x)
+        x = self.relu(x)
+        x = self.pool(x)
+
+        # Second convolutional layer followed by activation and pooling
+        x = self.conv2(x)
+        x = self.relu(x)
+        x = self.pool(x)
+
+        # Flatten the tensor
+        x = x.view(-1, 32 * 8 * 8)
+
+        # First fully connected layer followed by activation
+        x = self.fc1(x)
+        x = self.relu(x)
+
+        # Second fully connected layer to produce the final output
+        x = self.fc2(x)
+
+        return x
+
+
+if __name__ == "__main__":
+    model = SimpleCNN()
+
+    # Save the model checkpoint
+    torch.save(model.state_dict(), "./SimpleCNN.pth")

front-end/cypress/tests/components/train_model.spec.js

@@ -0,0 +1,96 @@
+describe('The Model Training Page', () => {
+  beforeEach(() => {
+    cy.visit('model');
+  });
+
+  it('can have current model after selecting', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    })
+      cy.getBySel('train-model-set-current-model').click();
+      cy.wait(1000);
+      cy.getBySel('train-model-current-model-create-time').should('not.be.empty');
+      cy.getBySel('train-model-current-model-achitecture').should('not.be.empty');
+
+  });
+
+  it('can go to the train page after having current model', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+    cy.get('[data-test=train-model-set-current-model]').click();
+    cy.wait(1000);
+    cy.get('[data-test=train-model-edit-model-cancel]').click();
+    cy.get('[data-test=train-model-train-model-button]').click();
+    cy.url().should('contains', 'train');
+  });
+
+  it('can edit model', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+
+    cy.get('[data-test=train-model-edit-model-description]').clear().type("test123");
+    cy.get('[data-test=train-model-edit-model-cancel]').click();
+
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+    cy.get('[data-test=train-model-edit-model-description]').invoke('val').should('not.contain', 'test123');
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+
+    cy.get('[data-test=train-model-edit-model-description]').clear().type("test");
+    cy.get('[data-test=train-model-edit-model-confirm]').click();
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+    cy.get('[data-test=train-model-edit-model-description]').invoke('val').should('contain', 'test');
+  });
+
+  it('can duplicate model', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-duplicate-model]').click();
+      cy.wait(1000);
+    });
+    cy.get('tr').should('have.length', 3);
+  });
+
+
+  it('can delete model', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-delete-model]').click();
+    });
+
+    cy.get('[data-test=train-model-delete-model-confirm]').click();
+    cy.wait(1000);
+    cy.get('tr').should('have.length', 2);
+
+  });
+
+
+
+  it('can upload model', () => {
+    cy.contains('.v-btn', 'Upload New Model').click();
+    cy.get('[data-test=model-upload-nickname]').type("SimpleCNN");
+    cy.get('[data-test=model-upload-classname]').type("SimpleCNN");
+    cy.get('[data-test=model-upload-codefile]').selectFile('cypress/downloads/SimpleCNN.py', { force: true });
+    cy.get('[data-test=model-upload-submit-button]').click();
+    cy.get('tr').should('have.length', 3);
+
+
+  });
+
+
+  it('can edit model name', () => {
+    cy.get('tr:nth-child(1)').find('td').eq(10).within(() => {
+      cy.get('[data-test=train-model-edit-model]').click({ force: true });
+    });
+
+    cy.get('[data-test=train-model-edit-model-name]').clear().type("test");
+    cy.get('[data-test=train-model-edit-model-confirm]').click();
+
+    cy.get('[data-test=train-model-edit-model-name]').invoke('val').should('contain', 'test');
+  });
+});

front-end/packages/robustar/src/components/ModelUploader.vue

@@ -14,136 +14,50 @@
 
       <v-form ref="form" lazy-validation class="pa-4">
         <div class="d-flex justify-space-between">
-          <v-text-field
-            v-model="nickname"
-            :rules="[rules.required]"
-            :loading="isSubmitting"
-            label="Nickname"
-            hint=""
-            outlined
-            clearable
-            dense
-            class="mr-4"
-          ></v-text-field>
-          <v-select
-            v-if="predefined"
-            v-model="className"
-            :rules="[rules.required]"
-            :loading="isSubmitting"
-            :items="modelClasses"
-            label="Class Name"
-            hint=""
-            outlined
-            dense
-          ></v-select>
-          <v-text-field
-            v-else
-            v-model="className"
-            :rules="[rules.required]"
-            :loading="isSubmitting"
-            label="Class Name"
-            hint=""
-            outlined
-            clearable
-            dense
-          ></v-text-field>
+          <v-text-field v-model="nickname" :rules="[rules.required]" :loading="isSubmitting" label="Nickname" hint=""
+            outlined clearable dense class="mr-4" data-test="model-upload-nickname"></v-text-field>
+          <v-select v-if="predefined" v-model="className" :rules="[rules.required]" :loading="isSubmitting"
+            :items="modelClasses" label="Class Name" hint="" outlined @change="addModelClassAsTag"></v-select>
+          <v-text-field v-else v-model="className" :rules="[rules.required]" :loading="isSubmitting" label="Class Name"
+            hint="" outlined clearable dense data-test="model-upload-classname"></v-text-field>
         </div>
-        <v-combobox
-          v-model="tags"
-          :loading="isSubmitting"
-          label="Tags"
-          multiple
-          chips
-          clearable
-          dense
-          small-chips
-          outlined
-        ></v-combobox>
-        <v-textarea
-          v-model="description"
-          :loading="isSubmitting"
-          rows="1"
-          label="Description"
-          hint=""
-          auto-grow
-          outlined
-          clearable
-          dense
-        ></v-textarea>
-        <v-checkbox
-          v-model="predefined"
-          label="use predefined"
-          dense
-          class="d-inline-block mr-8"
-        ></v-checkbox>
-        <v-checkbox
-          v-if="predefined"
-          v-model="pretrained"
-          label="is model pretrained"
-          dense
-          class="d-inline-block"
-        ></v-checkbox>
+        <v-combobox v-model="tags" :loading="isSubmitting" label="Tags" multiple chips clearable dense small-chips
+          outlined></v-combobox>
+        <v-textarea v-model="description" :loading="isSubmitting" rows="1" label="Description" hint="" auto-grow outlined
+          clearable dense></v-textarea>
+        <v-checkbox v-model="predefined" label="use predefined" dense class="d-inline-block mr-8"></v-checkbox>
+        <v-checkbox v-if="predefined" v-model="pretrained" label="is model pretrained" dense
+          class="d-inline-block"></v-checkbox>
         <div v-if="!predefined">
-          <v-file-input
-            v-model="weightFile"
-            :loading="isSubmitting"
-            prepend-icon="mdi-file-outline"
-            chips
-            clearable
-            dense
-            filled
-            show-size
-            label="Weight File (optional)"
-            hint="choose file"
-          ></v-file-input>
-          <v-file-input
-            v-model="codeFile"
-            :rules="[rules.required]"
-            :loading="isSubmitting"
-            @change="handleCodeFileUpload"
-            prepend-icon="mdi-file-outline"
-            chips
-            clearable
-            dense
-            filled
-            show-size
-            label="Code File"
-            hint="choose file"
-          ></v-file-input>
-          <v-textarea
-            v-model="code"
-            :rules="[rules.required]"
-            :loading="isSubmitting"
-            prepend-icon="mdi-xml"
-            label="Code"
-            hint="The final code uploaded will be based on the content in this code editor."
-            rows="5"
-            filled
-            clearable
-            dense
-            style="font-family: monospace"
-          ></v-textarea>
+          <v-file-input v-model="weightFile" :loading="isSubmitting" prepend-icon="mdi-file-outline" chips clearable dense
+            filled show-size label="Weight File (optional)" hint="choose file"></v-file-input>
+          <v-file-input v-model="codeFile" :rules="[rules.required]" :loading="isSubmitting"
+            @change="handleCodeFileUpload" prepend-icon="mdi-file-outline" chips clearable dense filled show-size
+            label="Code File" hint="choose file" data-test="model-upload-codefile"></v-file-input>
+          <v-textarea v-model="code" :rules="[rules.required]" :loading="isSubmitting" prepend-icon="mdi-xml" label="Code"
+            hint="The final code uploaded will be based on the content in this code editor." rows="5" filled clearable
+            dense style="font-family: monospace"></v-textarea>
         </div>
       </v-form>
 
       <v-divider></v-divider>
 
       <v-card-actions class="d-flex flex-column align-start py-8">
         <div>
-          <v-btn :loading="isSubmitting" depressed color="primary" class="mr-4" @click="submit">
+          <v-btn :loading="isSubmitting" depressed color="primary" class="mr-4" @click="submit"
+            data-test="model-upload-submit-button">
             Submit
           </v-btn>
           <v-btn :loading="isSubmitting" depressed @click="reset"> Reset </v-btn>
         </div>
         <div v-if="status">
           <div class="mb-2 mt-4">
-            Status: <span class="orange--text">validating</span
-            ><span class="green--text">success</span><span class="red--text">fail</span>
+            Status: <span class="orange--text">validating</span><span class="green--text">success</span><span
+              class="red--text">fail</span>
           </div>
           <div>Feedback</div>
-          <code class="d-block overflow-auto pa-3" style="max-height: 200px"
-            >print("hello world")
-          </code>
+          <code class="d-block overflow-auto pa-3" style="max-height: 200px">print("hello world")
+                  </code>
         </div>
       </v-card-actions>
     </v-card>
@@ -215,6 +129,11 @@ export default {
         this.$root.alert('error', 'Failed to read file');
       };
     },
+    addModelClassAsTag() {
+      if (this.predefined && this.className && !this.tags.includes(this.className)) {
+        this.tags.push("predefined-"+this.className);
+      }
+    },
     async submit() {
       if (this.$refs.form.validate()) {
         this.isSubmitting = true;