Upload 13 files

README.md

@@ -1,58 +1,38 @@
----
-title: Df
-emoji: 🔥
-colorFrom: pink
-colorTo: gray
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: dist/index.html
----
+# sv
 
-# Svelte + TS + Vite
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+## Creating a project
 
-## Recommended IDE Setup
+If you're seeing this, you've probably already done this step. Congrats!
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+```sh
+# create a new project in the current directory
+npx sv create
 
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+# create a new project in my-app
+npx sv create my-app
+```
 
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+## Developing
 
-**Why include `.vscode/extensions.json`?**
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+```sh
+npm run dev
 
-**Why enable `allowJs` in the TS template?**
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+## Building
 
-**Why is HMR not preserving my local component state?**
+To create a production version of your app:
 
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+```sh
+npm run build
+```
 
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+You can preview the production build with `npm run preview`.
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from "svelte/store";
-export default writable(0);
-```
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package.json

@@ -1,20 +1,35 @@
 {
-  "name": "svelte",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.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"
-  }
+	"name": "test-df",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^7.0.4"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	},
+	"dependencies": {
+		"@gradio/dataframe": "https://pkg.pr.new/gradio-app/gradio/@gradio/dataframe@35c0b7c"
+	}
 }

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+{@render children?.()}

src/routes/+page.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+  import Dataframe from "@gradio/dataframe";
+  import { onMount } from 'svelte';
+  
+  interface Message {
+    text: string;
+    sender: "user" | "bot";
+  }
+  
+  let value = {
+    data: [
+      ["Alice", 25, "Yes", "2024-01-15", "Engineer", "San Francisco", 85000, "Active"],
+      ["Bob", 30, "No", "2024-02-20", "Designer", "New York", 75000, "Inactive"],
+      ["Charlie", 35, "Yes", "2024-03-10", "Manager", "Chicago", 95000, "Active"],
+      ["Diana", 28, "No", "2024-04-05", "Developer", "Austin", 80000, "Inactive"],
+      ["Eve", 32, "Yes", "2024-05-12", "Analyst", "Seattle", 70000, "Active"],
+      ["Frank", 29, "Yes", "2024-06-18", "Engineer", "Boston", 82000, "Active"],
+      ["Grace", 27, "No", "2024-07-22", "Designer", "Portland", 68000, "Inactive"],
+      ["Henry", 33, "Yes", "2024-08-30", "Manager", "Denver", 88000, "Active"],
+      ["Ivy", 26, "Yes", "2024-09-14", "Developer", "Miami", 72000, "Active"],
+      ["Jack", 31, "No", "2024-10-08", "Analyst", "Atlanta", 65000, "Inactive"],
+      ["Kate", 34, "Yes", "2024-11-25", "Engineer", "Phoenix", 90000, "Active"],
+      ["Liam", 28, "Yes", "2024-12-01", "Designer", "Dallas", 78000, "Active"],
+      ["Maya", 29, "No", "2025-01-15", "Manager", "Houston", 92000, "Inactive"],
+      ["Noah", 36, "Yes", "2025-02-20", "Developer", "Philadelphia", 85000, "Active"],
+      ["Olivia", 27, "Yes", "2025-03-10", "Analyst", "Detroit", 70000, "Active"]
+    ],
+    headers: ["Name", "Age", "Active", "Join Date", "Role", "Location", "Salary", "Status"],
+    metadata: null
+  };
+
+  let datatype = ["str", "number", "str", "date", "str", "str", "number", "str"];
+  
+  let messages: Message[] = [];
+  let newMessage = "What is Alice's salary?";
+  let isGenerating = false;
+  let generator: any = null;
+  let isModelReady = false;
+
+  onMount(async () => {
+    messages = [...messages, { text: "🤖 Model initializing...", sender: "bot" }];
+    await initializeModel();
+  });
+
+  async function initializeModel() {
+    try {
+      console.log('Initializing Gemma model...');
+      
+      // Load the library in chunks to prevent blocking
+      const transformersModule = await import('https://cdn.jsdelivr.net/npm/@huggingface/[email protected]');
+      
+      // Update loading message
+      messages = [...messages, { text: "📦 Loading model components...", sender: "bot" }];
+      
+      // Small delay to allow UI update
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      const { pipeline } = transformersModule;
+      
+      // Update loading message
+      messages = [...messages, { text: "🚀 Starting model...", sender: "bot" }];
+      
+      // Small delay to allow UI update
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      generator = await pipeline(
+        'text-generation',
+        'onnx-community/gemma-3-270m-it-ONNX',
+        { dtype: 'fp32' }
+      );
+      
+      console.log('Model loaded successfully');
+      isModelReady = true;
+      messages = [...messages, { text: "✅ Model ready! Ask me anything about the employee data.", sender: "bot" }];
+    } catch (error) {
+      console.error('Failed to initialize model:', error);
+      messages = [...messages, { text: "⚠️ Failed to load AI model. Please refresh the page to try again.", sender: "bot" }];
+    }
+  }
+
+  async function sendMessage() {
+    if (newMessage.trim() && !isGenerating) {
+      const userMessage = newMessage.trim();
+      messages = [...messages, { text: userMessage, sender: "user" }];
+      
+      if (!isModelReady) {
+        messages = [...messages, { text: "⏳ Model is still initializing. Please wait...", sender: "bot" }];
+        newMessage = "";
+        return;
+      }
+      
+      isGenerating = true;
+      newMessage = "";
+      
+      // Add a placeholder response that will be updated
+      const placeholderIndex = messages.length;
+      messages = [...messages, { text: "🤔 Thinking...", sender: "bot" }];
+      
+      // Use requestAnimationFrame to ensure UI updates before heavy processing
+      requestAnimationFrame(async () => {
+        try {
+          const systemPrompt = `You are a helpful AI assistant that answers questions about employee data. Here's the current data:
+
+${value.headers.join(' | ')}
+${value.data.map(row => row.join(' | ')).join('\n')}
+
+Keep your responses concise and helpful. Answer questions about the data above.`;
+
+          // Break the processing into smaller chunks to prevent blocking
+          const processInChunks = async () => {
+            const response = await generator([
+              { role: "system", content: systemPrompt },
+              { role: "user", content: userMessage }
+            ], {
+              max_new_tokens: 256,
+              do_sample: true,
+              temperature: 0.7,
+              top_p: 0.9
+            });
+
+            const generatedContent = response[0].generated_text.at(-1).content;
+            
+            // Update the placeholder message
+            messages = messages.map((msg, index) => 
+              index === placeholderIndex ? { text: generatedContent, sender: "bot" } : msg
+            );
+          };
+
+          // Use a small delay to allow UI to update
+          await new Promise(resolve => setTimeout(resolve, 50));
+          await processInChunks();
+          
+        } catch (error) {
+          console.error('Generation error:', error);
+          
+          // Update the placeholder message with error
+          messages = messages.map((msg, index) => 
+            index === placeholderIndex ? { text: 'Sorry, I encountered an error. Please try again.', sender: "bot" } : msg
+          );
+        } finally {
+          isGenerating = false;
+        }
+      });
+    }
+  }
+
+  function handleKeyPress(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      sendMessage();
+    }
+  }
+</script>
+
+<div class="container">
+  <div class="dataframe-section">
+    <Dataframe
+      bind:value
+      {datatype}
+      show_search="none"
+      show_row_numbers={false}
+      show_copy_button={false}
+      show_fullscreen_button={false}
+      editable={true}
+      show_label={false}
+    />
+    <div class="credits">
+      ❤︎ &nbsp; Built with Gemma 3 270M Onnx & Gradio's Dataframe.js
+    </div>
+  </div>
+  
+  <div class="chatbot-section">
+    <h2>Chatbot</h2>
+    <div class="chat-messages">
+      {#each messages as message}
+        <div class="message {message.sender}">
+          <div class="message-content">{message.text}</div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<div class="chat-input-container">
+  <div class="chat-input">
+    <input
+      type="text"
+      bind:value={newMessage}
+      placeholder="What is Alice's salary?"
+      on:keypress={handleKeyPress}
+      autofocus
+    />
+    <button on:click={sendMessage}>Send</button>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  .dataframe-section {
+    width: 80%;
+    padding: 20px;
+    border-right: 2px solid #e0e0e0;
+    overflow: hidden;
+    padding-bottom: 100px;
+  }
+
+  .credits {
+    text-align: center;
+    margin-top: 20px;
+    padding: 10px;
+    color: #666;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    border-top: 1px solid #e0e0e0;
+    background-color: #f8f9fa;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .chatbot-section {
+    width: 20%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    background-color: #f8f9fa;
+  }
+
+  h2 {
+    margin: 0 0 20px 0;
+    color: #333;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    margin-bottom: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 12px;
+    border: 1px solid #e1e5e9;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  .message {
+    margin-bottom: 12px;
+  }
+
+  .message.user {
+    text-align: right;
+  }
+
+  .message.bot {
+    text-align: left;
+  }
+
+  .message-content {
+    display: inline-block;
+    padding: 10px 16px;
+    border-radius: 20px;
+    max-width: 85%;
+    word-wrap: break-word;
+    font-size: 14px;
+    line-height: 1.4;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  .message.user .message-content {
+    background-color: #007acc;
+    color: white;
+    font-weight: 500;
+  }
+
+  .message.bot .message-content {
+    background-color: #f1f3f4;
+    color: #202124;
+    font-weight: 400;
+  }
+
+  .chat-input {
+    display: flex;
+    gap: 10px;
+  }
+
+  .chat-input input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 2px solid #e1e5e9;
+    border-radius: 8px;
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    transition: border-color 0.2s ease;
+  }
+
+  .chat-input input:focus {
+    outline: none;
+    border-color: #007acc;
+  }
+
+  .chat-input button {
+    padding: 12px 20px;
+    background-color: #007acc;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    transition: background-color 0.2s ease;
+  }
+
+  .chat-input button:hover {
+    background-color: #005a9e;
+  }
+
+  .chat-input-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top: 1px solid #e1e5e9;
+    padding: 20px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  .chat-input {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    gap: 10px;
+  }
+</style>

static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

svelte.config.js

@@ -1,7 +1,18 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-}
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

tsconfig.json

@@ -1,7 +1,19 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
 }

vite.config.ts

@@ -1,7 +1,6 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
-})
+	plugins: [sveltekit()]
+});