test

package.json

@@ -16,5 +16,9 @@
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"
+  },
+  "dependencies": {
+    "@gradio/dataframe": "^0.18.8",
+    "@xenova/transformers": "^2.17.2"
   }
 }

requirements.txt

@@ -0,0 +1,3 @@
+fastapi
+transformers
+uvicorn

src/App.svelte

@@ -1,47 +1,254 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  import Dataframe from '@gradio/dataframe';
+
+  let rawData = '';
+  let cleanedData = '';
+  let cleaningSteps: any[] = [];
+  let showSteps = false;
+  let fileInput: HTMLInputElement;
+
+
+  let inputValue: { data: string[][]; headers: string[] } = { data: [[]], headers: [] };
+  let cleanedValue: { data: string[][]; headers: string[] } = { data: [[]], headers: [] };
+
+
+  function parseCSVorTSV(text: string) {
+    if (!text) return { data: [[]], headers: [] };
+    const lines = text.trim().split(/\r?\n/);
+    if (lines.length === 0) return { data: [[]], headers: [] };
+    const sep = lines[0].includes('\t') ? '\t' : ',';
+    const headers = lines[0].split(sep).map(h => h.trim());
+    const data = lines.slice(1).map(line => line.split(sep).map(cell => cell.trim()));
+    return { data, headers };
+  }
+
+  function updateInputValueFromRaw() {
+    inputValue = parseCSVorTSV(rawData);
+  }
+
+  function updateRawFromInputValue() {
+    // Convert inputValue back to CSV string
+    if (!inputValue.headers.length) return;
+    const sep = ',';
+    const lines = [inputValue.headers.join(sep), ...inputValue.data.map(row => row.join(sep))];
+    rawData = lines.join('\n');
+  }
+
+  function handleFileUpload(event: Event) {
+    const files = (event.target as HTMLInputElement).files;
+    if (files && files.length > 0) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        rawData = e.target?.result as string;
+        updateInputValueFromRaw();
+      };
+      reader.readAsText(files[0]);
+    }
+  }
+
+  function handleInputChange(e: CustomEvent) {
+    inputValue = e.detail;
+    updateRawFromInputValue();
+  }
+
+  // In-browser AI cleaning using transformers.js (DistilGPT2 as example)
+  import { pipeline } from '@xenova/transformers';
+  let generator: any = null;
+  let loadingModel = false;
+
+  async function analyzeAndClean() {
+    showSteps = false;
+    cleaningSteps = [];
+    cleanedValue = { data: [[]], headers: [] };
+    cleanedData = '';
+    loadingModel = true;
+    try {
+      if (!generator) {
+        generator = await pipeline('text-generation', 'Xenova/gpt2');
+      }
+      loadingModel = false;
+      // Prepare a prompt for the model
+      const tableString = [inputValue.headers, ...inputValue.data].map(row => row.join(',')).join('\n');
+      const prompt = `Clean this table and suggest steps. Table:\n${tableString}\nReturn JSON with keys steps (array of strings) and cleaned (array of arrays, first row is headers).`;
+      const output = await generator(prompt, { max_new_tokens: 128 });
+      let content = output?.[0]?.generated_text || '';
+      let parsed;
+      try {
+        parsed = JSON.parse(content.match(/\{[\s\S]*\}/)?.[0] || '');
+      } catch (e) {
+        alert('AI did not return valid cleaning suggestions.');
+        return;
+      }
+      if (parsed && parsed.cleaned && parsed.steps) {
+        cleaningSteps = parsed.steps.map((step: string) => ({ step, accepted: true }));
+        cleanedValue = {
+          headers: parsed.cleaned[0],
+          data: parsed.cleaned.slice(1),
+        };
+        cleanedData = cleanedValue.data.map(row => row.join(',')).join('\n');
+        showSteps = true;
+      } else {
+        alert('AI did not return valid cleaning suggestions.');
+      }
+    } catch (err) {
+      alert('Failed to load or run the model. Please check your internet connection and model support.');
+      loadingModel = false;
+    }
+  }
+
+  function toggleStep(idx: number) {
+    cleaningSteps[idx].accepted = !cleaningSteps[idx].accepted;
+  }
+
+  function exportCleaned() {
+    // Export cleanedValue as CSV
+    if (!cleanedValue.headers.length) return;
+    const sep = ',';
+    const lines = [cleanedValue.headers.join(sep), ...cleanedValue.data.map(row => row.join(sep))];
+    const csv = lines.join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'cleaned_data.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  $: updateInputValueFromRaw();
 </script>
 
-<main>
-  <div>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-  <h1>Vite + Svelte</h1>
-
-  <div class="card">
-    <Counter />
-  </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
+<div class="df-theme">
+  <main>
+    <h1>AI Data Cleaning Playground</h1>
+    <section class="input-section">
+      <label for="data-input">Paste your tabular data (CSV/TSV):</label>
+      <textarea id="data-input" bind:value={rawData} rows="8" cols="60" placeholder="Paste CSV or TSV data here..." on:input={updateInputValueFromRaw}></textarea>
+      <div>
+        <input type="file" accept=".csv,.tsv,.txt" bind:this={fileInput} on:change={handleFileUpload} />
+      </div>
+      <div style="margin: 1rem 0; width: 100%;">
+        <Dataframe
+          bind:value={inputValue}
+          show_search="search"
+          show_row_numbers={true}
+          show_copy_button={true}
+          show_fullscreen_button={true}
+          editable={true}
+          on:change={handleInputChange}
+        />
+      </div>
+      <button on:click={analyzeAndClean}>Analyze &amp; Clean</button>
+    </section>
+
+    {#if showSteps}
+      <section class="steps-section">
+        <h2>AI-Suggested Cleaning Steps</h2>
+        <ul>
+          {#each cleaningSteps as step, idx}
+            <li>
+              <input type="checkbox" bind:checked={step.accepted} on:change={() => toggleStep(idx)} />
+              {step.step}
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+
+    <section class="dataframes-section">
+      <div class="dataframe original">
+        <h3>Original Data</h3>
+        <Dataframe
+          bind:value={inputValue}
+          show_search="search"
+          show_row_numbers={true}
+          show_copy_button={true}
+          show_fullscreen_button={true}
+          editable={true}
+          on:change={handleInputChange}
+        />
+      </div>
+      <div class="dataframe cleaned">
+        <h3>Cleaned Data (Preview)</h3>
+        <Dataframe
+          bind:value={cleanedValue}
+          show_search="search"
+          show_row_numbers={true}
+          show_copy_button={true}
+          show_fullscreen_button={true}
+          editable={false}
+        />
+      </div>
+    </section>
+
+    <button on:click={exportCleaned}>Export Cleaned Data</button>
+  </main>
+</div>
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
+  main {
+    max-width: 900px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  }
+  h1 {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  .input-section {
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+  .steps-section {
+    margin-bottom: 2rem;
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+  }
+  .dataframes-section {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    margin-bottom: 2rem;
+  }
+  .dataframe {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  textarea {
+    width: 100%;
+    font-family: monospace;
+    font-size: 1rem;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    resize: vertical;
   }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+  button {
+    margin-top: 1rem;
+    padding: 0.5rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 6px;
+    border: none;
+    background: #3f51b5;
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.2s;
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
+  button:hover {
+    background: #283593;
   }
-  .read-the-docs {
-    color: #888;
+  .df-theme {
+    --gr-df-table-text: #222 !important;
+    background: #fff;
   }
 </style>

src/app.css

@@ -11,6 +11,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: black;
 }
 
 a {