Upload folder using huggingface_hub

README.md

@@ -1,8 +1,8 @@
 ---
-title: New Space
-emoji: 🐠
+title: Trial
+emoji: 📊
 colorFrom: purple
-colorTo: purple
+colorTo: yellow
 sdk: static
 pinned: false
 ---

index.css

@@ -0,0 +1,271 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+:root {
+    --primary-color: #6a11cb;
+    --secondary-color: #2575fc;
+    --text-color: #333;
+    --bg-color: #f0f2f5;
+    --chat-bg: #ffffff;
+    --user-message-bg: #2575fc;
+    --ai-message-bg: #f1f3f5;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-image: var(--gradient);
+    background-attachment: fixed;
+}
+
+.chat-container {
+    background-color: var(--chat-bg);
+    border-radius: 20px;
+    box-shadow: var(--shadow);
+    width: 90%;
+    max-width: 800px;
+    height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-header {
+    background-image: var(--gradient);
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+.chat-header h1 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+}
+
+.model-selector {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.select, .button {
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: 20px;
+    border: none;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.select {
+    background-color: white;
+    color: var(--text-color);
+}
+
+.button {
+    background-color: white;
+    color: var(--primary-color);
+    cursor: pointer;
+}
+
+.button:hover:not(:disabled) {
+    background-color: var(--secondary-color);
+    color: white;
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.progress-container {
+    width: 100%;
+    background-color: #e0e0e0;
+    padding: 3px;
+    border-radius: 3px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
+}
+
+.progress-bar {
+    display: block;
+    height: 10px;
+    background: var(--gradient);
+    border-radius: 3px;
+    transition: width 0.3s ease-in-out;
+}
+
+.status {
+    padding: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: var(--primary-color);
+    background-color: var(--bg-color);
+}
+
+.chat-box {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background-color: var(--chat-bg);
+}
+
+.welcome-message {
+    text-align: center;
+    color: var(--text-color);
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.message {
+    max-width: 80%;
+    margin-bottom: 15px;
+    padding: 12px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    line-height: 1.4;
+    position: relative;
+}
+
+.user-message {
+    background-color: var(--user-message-bg);
+    color: white;
+    align-self: flex-end;
+    margin-left: auto;
+    border-bottom-right-radius: 0;
+}
+
+.assistant-message {
+    background-color: var(--ai-message-bg);
+    color: var(--text-color);
+    align-self: flex-start;
+    border-bottom-left-radius: 0;
+    box-shadow: var(--shadow);
+}
+
+.chat-input-container {
+    display: flex;
+    padding: 20px;
+    background-color: var(--chat-bg);
+    border-top: 1px solid var(--bg-color);
+}
+
+.input {
+    flex-grow: 1;
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 25px;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    outline: none;
+}
+
+.send-button {
+    background-image: var(--gradient);
+    color: white;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    transition: all 0.3s ease;
+}
+
+.send-button:hover:not(:disabled) {
+    transform: scale(1.1);
+}
+
+.chat-stats {
+    font-size: 12px;
+    color: var(--text-color);
+    text-align: center;
+    padding: 5px;
+    background-color: var(--bg-color);
+}
+
+.hidden {
+    display: none;
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--chat-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background-image: var(--gradient);
+    border-radius: 20px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.message {
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes typing {
+    0% { content: ''; }
+    25% { content: '.'; }
+    50% { content: '..'; }
+    75% { content: '...'; }
+    100% { content: ''; }
+}
+
+.typing::after {
+    content: '';
+    animation: typing 1s infinite;
+}
+
+.message p {
+  margin: 0 0 10px 0;
+}
+
+.message ul, .message ol {
+  margin: 0 0 10px 0;
+  padding-left: 20px;
+}
+
+.message pre {
+  background-color: #f4f4f4;
+  padding: 10px;
+  border-radius: 5px;
+  overflow-x: auto;
+}
+
+.message code {
+  background-color: #f4f4f4;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.message blockquote {
+  border-left: 4px solid #ccc;
+  margin: 0 0 10px 0;
+  padding-left: 10px;
+  color: #666;
+}

index.html

@@ -1,19 +1,38 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kanha AI</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="index.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <h1><img src="./Logo_Final.jpg" alt="Custom Icon" style="width: 30px; height: 30px; margin-right: 10px; vertical-align: middle;">Kanha</h1>
+        </div>
+        <div id="progress-container" class="progress-container hidden">
+            <div id="progress-bar" class="progress-bar"></div>
+        </div>
+        <div id="download-status" class="status hidden"></div>
+        <div id="chat-box" class="chat-box">
+            <div class="welcome-message">
+                <h2>Hello, I am Kanha!</h2>
+                <p>Type your message and press enter or click the send button to start chatting. The model will initialize on your first message.</p>
+            </div>
+        </div>
+        <div id="chat-stats" class="chat-stats hidden"></div>
+        <div class="chat-input-container">
+            <input type="text" id="user-input" class="input" placeholder="Type your message here..." required>
+            <button id="send" class="button send-button">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </div>
+    <script src="https://esm.run/@mlc-ai/web-llm" type="module"></script>
+    <script src="index.js" type="module"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,270 @@
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+const messages = [
+  {
+    content: "You are a helpful AI agent assisting users. And your name is 'Kanha'",
+    role: "system",
+  },
+];
+
+const modelLibURLPrefix = "https://huggingface.co/HarshvardhanCn01/";
+const modelVersion = "llama-3.2-1b-test_10steps_bs1_r0_lr2e-06_nq-q4f16_1-MLC";
+
+const appConfig = {
+  model_list: [
+    {
+      model: "https://huggingface.co/HarshvardhanCn01/llama-3.2-1b-test_10steps_bs1_r0_lr2e-06_nq-q4f16_1-MLC",
+      model_id: "llama-3.2-1b-test_10steps_bs1_r0_lr2e-06_nq-q4f16_1-MLC",
+      model_lib:
+        webllm.modelLibURLPrefix + webllm.modelVersion + "/Llama-3.2-1B-Instruct-q4f16_1-ctx4k_cs1k-webgpu.wasm",
+      vram_required_MB: 3672.07,
+      low_resource_required: false,
+      overrides: {
+        context_window_size: 4096,
+      },
+    },
+  ],
+};
+
+let selectedModel = "llama-3.2-1b-test_10steps_bs1_r0_lr2e-06_nq-q4f16_1-MLC";
+let engine = null;
+let isInitializing = false;
+
+async function createEngine() {
+  if (engine) return engine;
+  
+  engine = await webllm.CreateMLCEngine(selectedModel, { appConfig: appConfig });
+  engine.setInitProgressCallback(updateEngineInitProgressCallback);
+  return engine;
+}
+
+function updateEngineInitProgressCallback(report) {
+  console.log("initialize", report.progress);
+  const statusElement = document.getElementById("download-status");
+  statusElement.textContent = report.text;
+  statusElement.classList.remove("hidden");
+  
+  const progressBar = document.getElementById("progress-bar");
+  progressBar.style.width = `${report.progress * 100}%`;
+}
+
+function getPlatform() {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  if (/android/i.test(userAgent)) {
+    return "Android";
+  }
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+    return "iOS";
+  }
+  return "Other";
+}
+
+function getWebGPUInstructions(platform) {
+  switch (platform) {
+    case "Android":
+      return "To enable WebGPU on Android:\n1. Go to chrome://flags\n2. Enable 'WebGPU Developer Features' and 'Unsafe WebGPU Support'\n3. Restart your browser";
+    case "iOS":
+      return "To enable WebGPU on iOS:\n1. Open Settings\n2. Tap Safari\n3. Tap Advanced\n4. Tap Feature Flags\n5. Turn on WebGPU";
+    default:
+      return "WebGPU might not be supported on your device. Please check if your browser is up to date.";
+  }
+}
+
+async function checkWebGPUSupport() {
+  if (!navigator.gpu) {
+    const platform = getPlatform();
+    const instructions = getWebGPUInstructions(platform);
+    throw new Error(`WebGPU is not supported in this browser. ${instructions}`);
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    throw new Error("Couldn't request WebGPU adapter. Please make sure WebGPU is enabled on your device.");
+  }
+  const device = await adapter.requestDevice();
+  if (!device) {
+    throw new Error("Couldn't request WebGPU device. Please make sure WebGPU is enabled on your device.");
+  }
+  return true;
+}
+
+async function checkRAM() {
+  if (!navigator.deviceMemory) {
+    console.warn("Device memory information is not available.");
+    return true; // Assume it's okay if we can't check
+  }
+  const ramGB = navigator.deviceMemory;
+  if (ramGB < 3) {
+    throw new Error(`Insufficient RAM. Required: 2GB Free RAM, Available: ${ramGB}GB`);
+  }
+  return true;
+}
+
+async function initializeWebLLMEngine() {
+  if (isInitializing) return;
+  isInitializing = true;
+
+  const progressContainer = document.getElementById("progress-container");
+  const statusElement = document.getElementById("download-status");
+  
+  try {
+    // Check system requirements
+    await checkRAM();
+    await checkWebGPUSupport();
+
+    progressContainer.classList.remove("hidden");
+    statusElement.classList.remove("hidden");
+    
+    selectedModel = "llama-3.2-1b-test_10steps_bs1_r0_lr2e-06_nq-q4f16_1-MLC"; // Using the default model
+    const config = {
+      temperature: 1.0,
+      top_p: 1,
+    };
+    
+    const engine = await createEngine();
+    await engine.reload(selectedModel, config);
+
+    statusElement.textContent = "Model initialized successfully!";
+  } catch (error) {
+    console.error("Error initializing WebLLM engine:", error);
+    statusElement.textContent = `Error initializing: ${error.message}\n\nFor more information and troubleshooting, please visit kanha.ai/faq`;
+    statusElement.classList.remove("hidden");
+    throw error; // Re-throw the error to be caught in onMessageSend
+  } finally {
+    progressContainer.classList.add("hidden");
+    isInitializing = false;
+  }
+}
+
+async function streamingGenerating(messages, onUpdate, onFinish, onError) {
+  try {
+    let curMessage = "";
+    let usage;
+    const engine = await createEngine();
+    const completion = await engine.chat.completions.create({
+      stream: true,
+      messages,
+      stream_options: { include_usage: true },
+    });
+    for await (const chunk of completion) {
+      const curDelta = chunk.choices[0]?.delta.content;
+      if (curDelta) {
+        curMessage += curDelta;
+      }
+      if (chunk.usage) {
+        usage = chunk.usage;
+      }
+      onUpdate(curMessage);
+    }
+    const finalMessage = await engine.getMessage();
+    onFinish(finalMessage, usage);
+  } catch (err) {
+    onError(err);
+  }
+}
+
+async function onMessageSend() {
+  const input = document.getElementById("user-input");
+  const sendButton = document.getElementById("send");
+  const message = {
+    content: input.value.trim(),
+    role: "user",
+  };
+  if (message.content.length === 0) {
+    return;
+  }
+  sendButton.disabled = true;
+  sendButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+  messages.push(message);
+  appendMessage(message);
+
+  input.value = "";
+  input.setAttribute("placeholder", "AI is thinking...");
+
+  const aiMessage = {
+    content: "typing...",
+    role: "assistant",
+  };
+  appendMessage(aiMessage);
+
+  try {
+    if (!engine) {
+      await initializeWebLLMEngine();
+    }
+
+    const onFinishGenerating = (finalMessage, usage) => {
+      updateLastMessage(finalMessage);
+      sendButton.disabled = false;
+      sendButton.innerHTML = '<i class="fas fa-paper-plane"></i>';
+      input.setAttribute("placeholder", "Type your message here...");
+      if (usage) {
+        const usageText =
+          `Prompt tokens: ${usage.prompt_tokens}, ` +
+          `Completion tokens: ${usage.completion_tokens}, ` +
+          `Prefill: ${usage.extra.prefill_tokens_per_s.toFixed(2)} tokens/sec, ` +
+          `Decoding: ${usage.extra.decode_tokens_per_s.toFixed(2)} tokens/sec`;
+        document.getElementById("chat-stats").classList.remove("hidden");
+        document.getElementById("chat-stats").textContent = usageText;
+      }
+    };
+
+    await streamingGenerating(
+      messages,
+      updateLastMessage,
+      onFinishGenerating,
+      onError
+    );
+  } catch (error) {
+    onError(error);
+    // Update the AI message to show the error
+    updateLastMessage("I'm sorry, but I encountered an error: " + error.message);
+  }
+}
+
+function appendMessage(message) {
+  const chatBox = document.getElementById("chat-box");
+  const messageElement = document.createElement("div");
+  messageElement.classList.add("message");
+
+  if (message.role === "user") {
+    messageElement.classList.add("user-message");
+    messageElement.textContent = message.content;
+  } else {
+    messageElement.classList.add("assistant-message");
+    if (message.content === "typing...") {
+      messageElement.classList.add("typing");
+      messageElement.textContent = message.content;
+    } else {
+      messageElement.innerHTML = marked.parse(message.content);
+    }
+  }
+
+  chatBox.appendChild(messageElement);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+function updateLastMessage(content) {
+  const chatBox = document.getElementById("chat-box");
+  const messages = chatBox.getElementsByClassName("message");
+  const lastMessage = messages[messages.length - 1];
+  lastMessage.innerHTML = marked.parse(content);
+  lastMessage.classList.remove("typing");
+}
+
+function onError(err) {
+  console.error(err);
+  const statusElement = document.getElementById("download-status");
+  statusElement.textContent = `Error: ${err.message}\n\nFor more information and troubleshooting, please visit kanha.ai/faq`;
+  statusElement.classList.remove("hidden");
+  document.getElementById("send").disabled = false;
+  document.getElementById("send").innerHTML = '<i class="fas fa-paper-plane"></i>';
+}
+
+// UI binding
+document.getElementById("send").addEventListener("click", onMessageSend);
+document.getElementById("user-input").addEventListener("keypress", function(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    onMessageSend();
+  }
+});