mache das dataset ist als datei im workspace

components/file-upload.js

@@ -0,0 +1,98 @@
+class FileUpload extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .file-upload-container {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        .drop-area {
+          border: 2px dashed #d1d5db;
+          border-radius: 0.5rem;
+          padding: 1rem;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .drop-area:hover, .drop-area.highlight {
+          border-color: #7c3aed;
+          background-color: #f5f3ff;
+        }
+        .file-input {
+          display: none;
+        }
+        .file-info {
+          font-size: 0.875rem;
+          color: #6b7280;
+          margin-top: 0.5rem;
+        }
+      </style>
+      <div class="file-upload-container">
+        <label for="file-upload" class="drop-area" id="drop-area">
+          <p>Click to select or drag & drop a text file</p>
+          <input type="file" id="file-upload" class="file-input" accept=".txt">
+        </label>
+        <div class="file-info" id="file-info">No file selected</div>
+      </div>
+    `;
+
+    const dropArea = this.shadowRoot.getElementById('drop-area');
+    const fileInput = this.shadowRoot.getElementById('file-upload');
+    const fileInfo = this.shadowRoot.getElementById('file-info');
+
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    dropArea.addEventListener('drop', handleDrop, false);
+    fileInput.addEventListener('change', handleFiles, false);
+
+    function preventDefaults(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    function highlight() {
+      dropArea.classList.add('highlight');
+    }
+
+    function unhighlight() {
+      dropArea.classList.remove('highlight');
+    }
+
+    function handleDrop(e) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      fileInput.files = files;
+      handleFiles({ target: fileInput });
+    }
+
+    function handleFiles(e) {
+      const file = e.target.files[0];
+      if (file) {
+        fileInfo.textContent = `Selected: ${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
+        const reader = new FileReader();
+        reader.onload = function(e) {
+          const textarea = document.getElementById('dataset');
+          textarea.value = e.target.result;
+        };
+        reader.readAsText(file);
+      } else {
+        fileInfo.textContent = 'No file selected';
+      }
+    }
+  }
+}
+
+customElements.define('file-upload', FileUpload);

index.html

@@ -21,8 +21,9 @@
 
         <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
             <div class="mb-6">
-                <label for="dataset" class="block text-sm font-medium text-gray-700 mb-2">Training Dataset (one sentence per line)</label>
-                <textarea id="dataset" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Enter sample sentences here...
+                <file-upload></file-upload>
+                <label for="dataset" class="block text-sm font-medium text-gray-700 mb-2">Or enter manually (one sentence per line):</label>
+<textarea id="dataset" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Enter sample sentences here...
 Example:
 hello world
 how are you
@@ -71,9 +72,9 @@ what is your name"></textarea>
             <p>The neural network will try to predict the correct word based on letter patterns.</p>
         </div>
     </div>
-
-    <script src="script.js"></script>
-    <script>feather.replace();</script>
+  <script src="components/file-upload.js"></script>
+  <script src="script.js"></script>
+  <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -51,8 +51,13 @@
 .word-badge {
     transition: all 0.2s ease;
 }
-
 .word-badge:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
+}
+
+/* File upload component styles */
+file-upload {
+  display: block;
+  margin-bottom: 1rem;
+}