Upload folder using huggingface_hub

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "svelte",
+  "name": "gradio-dataframe-demo",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -7,14 +7,18 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^5.28.1",
-    "svelte-check": "^4.1.6",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5"
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tsconfig/svelte": "^5.0.0",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.6.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@gradio/dataframe": "^0.19.1"
   }
 }

src/App.svelte

@@ -1,47 +1,308 @@
 <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";
+  import ConfigPanel from "./components/ConfigPanel.svelte";
+  import EventLog from "./components/EventLog.svelte";
+  import { dataframeConfig, eventLog } from "./stores/config";
+
+  // Sample data
+  let value = {
+    data: [
+      ["Alice Johnson", 28, true, "2024-01-15", "**Senior** Developer", "<em>Tech Corp</em>"],
+      ["Bob Smith", 35, false, "2023-11-20", "*Team Lead*", "<strong>Data Inc</strong>"],
+      ["Charlie Brown", 42, true, "2023-08-10", "Product Manager", "StartUp Co"],
+      ["Diana Prince", 31, true, "2024-02-28", "**UX Designer**", "<span style='color: blue;'>Design Studio</span>"],
+      ["Eve Wilson", 26, false, "2023-12-05", "Junior Developer", "Web Solutions"],
+      ["Frank Miller", 39, true, "2023-09-15", "*DevOps* Engineer", "<code>Cloud Systems</code>"],
+      ["Grace Lee", 33, true, "2024-01-10", "Data Scientist", "AI Labs"],
+      ["Henry Chen", 29, false, "2023-10-22", "**Backend** Developer", "<mark>Mobile Apps</mark>"],
+      ["Iris Taylor", 37, true, "2023-07-18", "Project Manager", "Enterprise Solutions"],
+      ["Jack Davis", 45, true, "2024-03-01", "*CTO*", "<strong>Innovation Hub</strong>"]
+    ],
+    headers: ["Name", "Age", "Active", "Join Date", "Role (Markdown)", "Company (HTML)"],
+    metadata: { last_updated: new Date().toISOString() }
+  };
+
+  // Configure datatypes for columns
+  $: datatype = [
+    "str",      // Name
+    "number",   // Age
+    "bool",     // Active
+    "date",     // Join Date
+    "markdown", // Role
+    "html"      // Company
+  ];
+
+  // Column widths configuration
+  $: columnWidths = $dataframeConfig.useCustomWidths 
+    ? ["200px", "80px", "100px", "150px", "180px", "200px"]
+    : undefined;
+
+  function handleChange(e: CustomEvent) {
+    $eventLog = [
+      {
+        type: "change",
+        detail: e.detail,
+        timestamp: new Date().toLocaleTimeString()
+      },
+      ...$eventLog.slice(0, 9)
+    ];
+    value = { ...e.detail };
+  }
+
+  function handleSelect(e: CustomEvent) {
+    $eventLog = [
+      {
+        type: "select",
+        detail: e.detail,
+        timestamp: new Date().toLocaleTimeString()
+      },
+      ...$eventLog.slice(0, 9)
+    ];
+  }
+
+  function handleInput(e: CustomEvent) {
+    $eventLog = [
+      {
+        type: "input",
+        detail: e.detail,
+        timestamp: new Date().toLocaleTimeString()
+      },
+      ...$eventLog.slice(0, 9)
+    ];
+  }
+
+  // Sample data sets for quick switching
+  function loadSampleData(type: string) {
+    switch(type) {
+      case 'small':
+        value = {
+          data: [
+            ["Item A", 10, true],
+            ["Item B", 20, false],
+            ["Item C", 30, true]
+          ],
+          headers: ["Name", "Value", "Enabled"],
+          metadata: { dataset: "small" }
+        };
+        break;
+      case 'large':
+        const largeData = [];
+        for (let i = 1; i <= 100; i++) {
+          largeData.push([
+            `User ${i}`,
+            Math.floor(Math.random() * 50) + 20,
+            Math.random() > 0.5,
+            new Date(2024, 0, Math.floor(Math.random() * 365)).toISOString().split('T')[0],
+            `Role ${Math.floor(Math.random() * 5) + 1}`,
+            `Company ${Math.floor(Math.random() * 10) + 1}`
+          ]);
+        }
+        value = {
+          data: largeData,
+          headers: ["Name", "Age", "Active", "Join Date", "Role", "Company"],
+          metadata: { dataset: "large", count: 100 }
+        };
+        break;
+      default:
+        // Reset to original
+        location.reload();
+    }
+  }
 </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="app-container">
+  <header>
+    <h1>🎨 @gradio/dataframe Demo</h1>
+    <p>Interactive demonstration of the Gradio Dataframe component for Svelte</p>
+  </header>
 
-  <div class="card">
-    <Counter />
-  </div>
+  <div class="main-layout">
+    <aside class="config-panel">
+      <ConfigPanel {loadSampleData} />
+    </aside>
 
-  <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>
+    <main class="dataframe-container">
+      <div class="dataframe-header">
+        <h2>📊 Dataframe Component</h2>
+        <div class="data-info">
+          <span>Rows: {value.data.length}</span>
+          <span>Columns: {value.headers.length}</span>
+          {#if value.metadata?.last_updated}
+            <span>Updated: {new Date(value.metadata.last_updated).toLocaleTimeString()}</span>
+          {/if}
+        </div>
+      </div>
 
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
+      <div class="dataframe-wrapper" class:custom-theme={$dataframeConfig.useCustomTheme}>
+        <Dataframe
+          bind:value
+          {datatype}
+          show_search={$dataframeConfig.showSearch}
+          show_row_numbers={$dataframeConfig.showRowNumbers}
+          show_copy_button={$dataframeConfig.showCopyButton}
+          show_fullscreen_button={$dataframeConfig.showFullscreenButton}
+          editable={$dataframeConfig.editable}
+          label={$dataframeConfig.showLabel ? "Employee Data Table" : null}
+          show_label={$dataframeConfig.showLabel}
+          column_widths={columnWidths}
+          max_height={$dataframeConfig.maxHeight}
+          max_chars={$dataframeConfig.maxChars}
+          line_breaks={$dataframeConfig.lineBreaks}
+          wrap={$dataframeConfig.wrap}
+          on:change={handleChange}
+          on:select={handleSelect}
+          on:input={handleInput}
+        />
+      </div>
+    </main>
+
+    <aside class="event-panel">
+      <EventLog />
+    </aside>
+  </div>
+
+  <footer>
+    <p>Built with Svelte + @gradio/dataframe | <a href="https://www.npmjs.com/package/@gradio/dataframe" target="_blank">View on npm</a></p>
+  </footer>
+</div>
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
+  .app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+
+  header {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
+
+  header h1 {
+    margin: 0;
+    color: #333;
+    font-size: 2rem;
+  }
+
+  header p {
+    margin: 0.5rem 0 0;
+    color: #666;
+  }
+
+  .main-layout {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 300px 1fr 350px;
+    gap: 1.5rem;
+    padding: 1.5rem;
+    max-width: 1600px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .config-panel, .event-panel, .dataframe-container {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  .dataframe-container {
+    display: flex;
+    flex-direction: column;
   }
-  .read-the-docs {
-    color: #888;
+
+  .dataframe-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dataframe-header h2 {
+    margin: 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .data-info {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .data-info span {
+    padding: 0.25rem 0.75rem;
+    background: #f3f4f6;
+    border-radius: 4px;
+  }
+
+  .dataframe-wrapper {
+    padding: 1.5rem;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .dataframe-wrapper.custom-theme {
+    --gr-df-accent: #7c3aed;
+    --gr-df-accent-soft: #e9d5ff;
+    --gr-df-table-bg-even: #fafafa;
+    --gr-df-table-bg-odd: #ffffff;
+    --gr-df-table-border: #e5e7eb;
+    --gr-df-table-radius: 8px;
+    --gr-df-font-size: 14px;
+  }
+
+  footer {
+    background: rgba(0, 0, 0, 0.1);
+    color: white;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  footer a {
+    color: white;
+    text-decoration: underline;
+  }
+
+  @media (max-width: 1200px) {
+    .main-layout {
+      grid-template-columns: 250px 1fr 300px;
+    }
+  }
+
+  @media (max-width: 968px) {
+    .main-layout {
+      grid-template-columns: 1fr;
+    }
+
+    .config-panel, .event-panel {
+      order: 2;
+    }
+
+    .dataframe-container {
+      order: 1;
+    }
+  }
+
+  @media (max-width: 640px) {
+    header h1 {
+      font-size: 1.5rem;
+    }
+
+    .main-layout {
+      padding: 1rem;
+      gap: 1rem;
+    }
+
+    .data-info {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
   }
-</style>
+</style>

src/app.css

@@ -1,25 +1,19 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
+  color-scheme: light;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
@@ -28,52 +22,45 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background: #f3f4f6;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+#app {
+  width: 100%;
+  min-height: 100vh;
 }
 
-.card {
-  padding: 2em;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
 }
-button:hover {
-  border-color: #646cff;
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+/* Accessibility */
+:focus-visible {
+  outline: 2px solid #667eea;
+  outline-offset: 2px;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+/* Responsive utilities */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+}

src/components/ConfigPanel.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { dataframeConfig } from "../stores/config";
+
+  export let loadSampleData: (type: string) => void;
+</script>
+
+<div class="panel">
+  <h3>⚙️ Configuration</h3>
+  
+  <div class="section">
+    <h4>Display Options</h4>
+    
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.showRowNumbers} />
+      Show Row Numbers
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.showCopyButton} />
+      Show Copy Button
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.showFullscreenButton} />
+      Show Fullscreen Button
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.showLabel} />
+      Show Label
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.editable} />
+      Editable Cells
+    </label>
+  </div>
+
+  <div class="section">
+    <h4>Search/Filter</h4>
+    <select bind:value={$dataframeConfig.showSearch}>
+      <option value="none">None</option>
+      <option value="search">Search</option>
+      <option value="filter">Filter</option>
+    </select>
+  </div>
+
+  <div class="section">
+    <h4>Layout Options</h4>
+    
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.lineBreaks} />
+      Line Breaks
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.wrap} />
+      Text Wrap
+    </label>
+
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.useCustomWidths} />
+      Custom Column Widths
+    </label>
+
+    <label>
+      Max Height (px)
+      <input type="number" bind:value={$dataframeConfig.maxHeight} min="200" max="1000" step="50" />
+    </label>
+
+    <label>
+      Max Characters
+      <input type="number" bind:value={$dataframeConfig.maxChars} min="10" max="200" step="10" />
+    </label>
+  </div>
+
+  <div class="section">
+    <h4>Theme</h4>
+    <label>
+      <input type="checkbox" bind:checked={$dataframeConfig.useCustomTheme} />
+      Use Custom Theme
+    </label>
+  </div>
+
+  <div class="section">
+    <h4>Sample Data</h4>
+    <div class="button-group">
+      <button on:click={() => loadSampleData('small')}>Small Dataset</button>
+      <button on:click={() => loadSampleData('large')}>Large Dataset (100 rows)</button>
+      <button on:click={() => loadSampleData('default')}>Reset Data</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .panel {
+    padding: 1.5rem;
+  }
+
+  h3 {
+    margin: 0 0 1.5rem;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .section {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .section:last-child {
+    border-bottom: none;
+  }
+
+  h4 {
+    margin: 0 0 0.75rem;
+    color: #666;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    color: #333;
+    cursor: pointer;
+  }
+
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+
+  input[type="number"], select {
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  button {
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+
+  button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  }
+
+  button:active {
+    transform: translateY(0);
+  }
+</style>

src/components/EventLog.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { eventLog } from "../stores/config";
+
+  function clearLog() {
+    $eventLog = [];
+  }
+
+  function getEventIcon(type: string) {
+    switch(type) {
+      case 'change': return '✏️';
+      case 'select': return '👆';
+      case 'input': return '🔍';
+      default: return '📝';
+    }
+  }
+
+  function formatDetail(detail: any) {
+    if (typeof detail === 'string' || detail === null) {
+      return detail || 'null';
+    }
+    return JSON.stringify(detail, null, 2);
+  }
+</script>
+
+<div class="panel">
+  <div class="header">
+    <h3>📋 Event Log</h3>
+    <button on:click={clearLog} class="clear-btn">Clear</button>
+  </div>
+
+  <div class="events">
+    {#if $eventLog.length === 0}
+      <div class="empty">
+        <p>No events yet</p>
+        <p class="hint">Try interacting with the dataframe!</p>
+      </div>
+    {:else}
+      {#each $eventLog as event}
+        <div class="event event-{event.type}">
+          <div class="event-header">
+            <span class="event-icon">{getEventIcon(event.type)}</span>
+            <span class="event-type">{event.type}</span>
+            <span class="event-time">{event.timestamp}</span>
+          </div>
+          <div class="event-detail">
+            <pre>{formatDetail(event.detail)}</pre>
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .panel {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .clear-btn {
+    padding: 0.25rem 0.75rem;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .clear-btn:hover {
+    background: #dc2626;
+  }
+
+  .events {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .empty {
+    text-align: center;
+    padding: 2rem;
+    color: #9ca3af;
+  }
+
+  .empty p {
+    margin: 0;
+  }
+
+  .hint {
+    margin-top: 0.5rem !important;
+    font-size: 0.875rem;
+  }
+
+  .event {
+    background: #f9fafb;
+    border-radius: 6px;
+    padding: 0.75rem;
+    border-left: 3px solid;
+  }
+
+  .event-change {
+    border-color: #10b981;
+  }
+
+  .event-select {
+    border-color: #3b82f6;
+  }
+
+  .event-input {
+    border-color: #f59e0b;
+  }
+
+  .event-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .event-icon {
+    font-size: 1rem;
+  }
+
+  .event-type {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: #333;
+    text-transform: uppercase;
+  }
+
+  .event-time {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+
+  .event-detail {
+    background: white;
+    border-radius: 4px;
+    padding: 0.5rem;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  pre {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #4b5563;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+</style>

src/stores/config.ts

@@ -0,0 +1,39 @@
+import { writable } from 'svelte/store';
+
+interface DataframeConfig {
+  showRowNumbers: boolean;
+  showCopyButton: boolean;
+  showFullscreenButton: boolean;
+  showLabel: boolean;
+  editable: boolean;
+  showSearch: "none" | "search" | "filter";
+  lineBreaks: boolean;
+  wrap: boolean;
+  useCustomWidths: boolean;
+  maxHeight: number;
+  maxChars: number;
+  useCustomTheme: boolean;
+}
+
+interface EventLogEntry {
+  type: string;
+  detail: any;
+  timestamp: string;
+}
+
+export const dataframeConfig = writable<DataframeConfig>({
+  showRowNumbers: true,
+  showCopyButton: true,
+  showFullscreenButton: true,
+  showLabel: true,
+  editable: true,
+  showSearch: "search",
+  lineBreaks: true,
+  wrap: false,
+  useCustomWidths: false,
+  maxHeight: 500,
+  maxChars: 100,
+  useCustomTheme: false
+});
+
+export const eventLog = writable<EventLogEntry[]>([]);