Added sending file options and enhanced commands

web/src/views/QuantizingView.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-2 bg-bg-light-tone dark:bg-bg-dark-tone">
+      <form @submit.prevent="submitForm" class="max-w-md mx-auto">
+        <!-- Model/Tokenizer -->
+        <div class="mb-4">
+          <label for="model_name" class="text-sm">Model Name:</label>
+          <input
+            type="text"
+            id="model_name"
+            v-model="model_name"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+        <div class="mb-4">
+          <label for="tokenizer_name" class="text-sm">Tokenizer Name:</label>
+          <input
+            type="text"
+            id="tokenizer_name"
+            v-model="tokenizer_name"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+  
+        <!-- Dataset -->
+        <div class="mb-4">
+          <label for="dataset_path" class="text-sm">Dataset:</label>
+          <input
+            type="file"
+            id="dataset_path"
+            ref="dataset_path"
+            accept=".parquet"
+            v-on:change="selectDatasetPath"
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+          <p class="mt-2 text-xs">Selected File: {{ selectedDatasetPath }}</p>
+        </div>
+        <div class="mb-4">
+          <label for="max_length" class="text-sm">Max Length:</label>
+          <input
+            type="number"
+            id="max_length"
+            v-model.number="max_length"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+        <div class="mb-4">
+          <label for="batch_size" class="text-sm">Batch Size:</label>
+          <input
+            type="number"
+            id="batch_size"
+            v-model.number="batch_size"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+  
+        <!-- Train Dynamics -->
+        <div class="mb-4">
+          <label for="lr" class="text-sm">Learning Rate:</label>
+          <input
+            type="number"
+            id="lr"
+            v-model.number="lr"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+        <div class="mb-4">
+          <label for="num_epochs" class="text-sm">Number of Epochs:</label>
+          <input
+            type="number"
+            id="num_epochs"
+            v-model.number="num_epochs"
+            required
+            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          >
+        </div>
+  
+        <!-- Logging -->
+        <div class="mb-4">
+        <label for="output_dir" class="text-sm">Output Directory:</label>
+        <input
+          type="text"
+          id="output_dir"
+          v-model="selectedFolder"
+          class="w-full mt-1 px-2 py-1 border border-gray-300 rounded"
+          placeholder="Enter or select the output folder"
+        >
+        <input
+          type="file"
+          id="folder_selector"
+          ref="folder_selector"
+          style="display: none"
+          webkitdirectory
+          v-on:change="selectOutputDirectory"
+        >
+        <button type="button" @click="openFolderSelector" class="bg-blue-500 text-white px-4 py-2 rounded">Select Folder</button>
+      </div>
+  
+        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Train LLM</button>
+      </form>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+        return {
+            model_name: 'jondurbin/airoboros-7b-gpt4',
+            tokenizer_name: 'jondurbin/airoboros-7b-gpt4',
+            dataset_path: '',
+            max_length: 1024,
+            batch_size: 4,
+            lr: 5.0e-5,
+            num_epochs: 2,
+            selectedFolder: '',
+            selectedDatasetPath: '',
+        };
+    },
+    methods: {
+      submitForm() {
+        const formData = {
+          model_name: this.model_name,
+          tokenizer_name: this.tokenizer_name,
+          dataset_path: this.selectedDatasetPath,
+          max_length: this.max_length,
+          batch_size: this.batch_size,
+          lr: this.lr,
+          num_epochs: this.num_epochs,
+          output_dir: this.selectedFolder,
+        };
+  
+        // Send the form data to the backend
+        // ...
+      },
+      openFolderSelector() {
+      this.$refs.folder_selector.click();
+      },
+      selectOutputDirectory(event) {
+        console.log("here")
+        const folderPath = event.target.files[0]?.path;
+        console.log(folderPath)
+        if (folderPath) {
+            this.selectedFolder = folderPath;
+        }
+      },
+      selectDatasetPath(event) {
+        const files = event.target.files;
+        if (files.length > 0) {
+            this.selectedDatasetPath = files[0].webkitRelativePath;
+        }
+      },
+    },
+  };
+  </script>
+