Spaces:

luxopes
/

rainbow-ai-chatter

Running

App Files Files Community

luxopes commited on Jan 17

Commit

5a96ab4

verified ·

1 Parent(s): 7d09e30

Make design more colorful and switching between models move down to prompt field.

Browse files

Files changed (3) hide show

README.md +8 -5
index.html +191 -18
style.css +81 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Rainbow Ai Chatter
-emoji: 🦀
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Rainbow AI Chatter 🦄
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,192 @@
 <!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="cs">
+<head>
+  <meta charset="utf-8">
+  <title>LuxAI Chat</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <link rel="stylesheet" href="style.css">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              50: '#f0fdfa',
+              100: '#ccfbf1',
+              500: '#10a37f',
+              600: '#0d9488',
+              700: '#0f766e',
+            },
+            dark: {
+              800: '#1e293b',
+              900: '#0f172a',
+            }
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-gray-50 dark:bg-dark-900 text-gray-900 dark:text-gray-100 h-screen flex flex-col">
+  <!-- Header -->
+  <header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 h-14 px-4 flex items-center justify-between shadow-lg">
+    <div class="flex items-center space-x-2">
+      <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
+        <i data-feather="cpu" class="text-purple-600 w-4 h-4"></i>
+      </div>
+      <h1 class="font-bold text-lg text-white">Rainbow AI</h1>
+    </div>
+    <button id="newChat" class="flex items-center space-x-1 bg-white/20 hover:bg-white/30 text-white border border-white/30 rounded-lg px-3 py-1.5 text-sm transition-colors backdrop-blur-sm">
+      <i data-feather="plus" class="w-4 h-4"></i>
+      <span>Nový chat</span>
+    </button>
+  </header>
+<!-- Chat Area -->
+  <main class="flex-1 overflow-y-auto p-4 md:p-6">
+    <div class="max-w-3xl mx-auto space-y-4" id="chat">
+      <div class="text-center text-gray-500 dark:text-gray-400 mt-12">
+        <i data-feather="message-square" class="w-12 h-12 mx-auto mb-4 opacity-30"></i>
+        <p class="text-lg">Začni nový rozhovor</p>
+      </div>
+    </div>
+  </main>
+  <!-- Input Area -->
+  <form id="chatForm" class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 dark:from-blue-700/20 dark:to-purple-700/20 border-t border-gray-200/50 dark:border-gray-700/50 px-4 py-3 backdrop-blur-sm">
+    <div class="max-w-3xl mx-auto">
+      <div class="flex items-center gap-2 mb-2">
+        <select id="modelSelect" class="bg-white/80 dark:bg-dark-800/80 border border-gray-200/50 dark:border-gray-700/50 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 shadow-sm">
+          <option value="gpt-a">GPT-A</option>
+          <option value="gpt2">GPT-2</option>
+        </select>
+        <div class="text-xs text-gray-500 dark:text-gray-400">Press Shift+Enter for new line</div>
+      </div>
+      <div class="flex items-end gap-2">
+        <div class="flex-1 relative">
+          <textarea id="input" rows="2" placeholder="Napiš zprávu…"
+            class="w-full bg-white/80 dark:bg-dark-700/80 border border-gray-200/50 dark:border-gray-600/50 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none shadow-sm"></textarea>
+          <button type="submit" class="absolute right-3 bottom-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white p-1 rounded-full hover:opacity-90 transition-opacity shadow-md">
+            <i data-feather="arrow-up" class="w-5 h-5"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+    <script>
+    // Rainbow color animation for empty state icon
+    function animateRainbowIcon() {
+      const icon = document.querySelector('.empty i');
+      if (icon) {
+        let hue = 0;
+        setInterval(() => {
+          hue = (hue + 1) % 360;
+          icon.style.color = `hsl(${hue}, 100%, 70%)`;
+        }, 50);
+      }
+    }
+    const MODELS = {
+"gpt-a": {
+        name: "GPT-A",
+        url: "https://luxopes-gpt-a.hf.space/generate"
+      },
+      "gpt2": {
+        name: "GPT-2",
+        url: "https://luxopes-gpt2-backend.hf.space/generate"
+      }
+    };
+    let currentModel = "gpt-a";
+    const chat = document.getElementById("chat");
+    const input = document.getElementById("input");
+    const form = document.getElementById("chatForm");
+    function appendMessage(text, cls, model=null) {
+      const div = document.createElement("div");
+      div.className = cls === "user"
+        ? "bg-gradient-to-r from-purple-500 to-pink-500 text-white px-5 py-4 rounded-xl rounded-tr-none max-w-[85%] ml-auto shadow-lg"
+        : "bg-white/90 dark:bg-dark-700/90 border border-gray-200/50 dark:border-gray-600/50 px-5 py-4 rounded-xl rounded-tl-none max-w-[85%] shadow-lg backdrop-blur-sm";
+if (model) {
+        const modelIndicator = document.createElement("div");
+        modelIndicator.className = "text-xs text-gray-500 dark:text-gray-400 mb-1";
+        modelIndicator.textContent = model;
+        div.appendChild(modelIndicator);
+      }
+      const content = document.createElement("div");
+      content.className = cls === "user" ? "text-white" : "text-gray-800 dark:text-gray-100";
+      content.textContent = text;
+      div.appendChild(content);
+      chat.appendChild(div);
+      chat.scrollTop = chat.scrollHeight;
+      document.querySelector(".empty")?.remove();
+      return div;
+    }
+    form.addEventListener("submit", async e => {
+      e.preventDefault();
+      const msg = input.value.trim();
+      if (!msg) return;
+      appendMessage(msg, "user");
+      input.value = "";
+      input.disabled = true;
+      const bot = appendMessage(
+        `${MODELS[currentModel].name} přemýšlí…`,
+        "bot",
+        MODELS[currentModel].name
+      );
+      bot.classList.add("opacity-80");
+      try {
+        const res = await fetch(MODELS[currentModel].url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ user_input: msg, model: currentModel })
+        });
+        const data = await res.json();
+        bot.classList.remove("opacity-80");
+        bot.lastChild.textContent = data.response || "Chyba odpovědi";
+      } catch (e) {
+        bot.classList.remove("opacity-80");
+        bot.lastChild.textContent = "Chyba připojení";
+      }
+      input.disabled = false;
+      input.focus();
+    });
+    document.getElementById("modelSelect").onchange = e => {
+      currentModel = e.target.value;
+      appendMessage(`Přepnuto na ${MODELS[currentModel].name}`, "bot", "System");
+    };
+    document.getElementById("newChat").onclick = () => {
+      chat.innerHTML = `
+        <div class="text-center text-gray-500 dark:text-gray-400 mt-12">
+          <i data-feather="message-square" class="w-12 h-12 mx-auto mb-4 opacity-30"></i>
+          <p class="text-lg">Začni nový rozhovor</p>
+        </div>
+      `;
+      feather.replace();
+      input.focus();
+    };
+    input.addEventListener("keydown", e => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        form.requestSubmit();
+      }
+    });
+    feather.replace();
+    animateRainbowIcon();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,90 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes rainbow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.message {
+  animation: fadeIn 0.3s ease-out;
+}
+.bot {
+  position: relative;
+}
+.bot:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
+.user:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+.bot::after {
+  content: "";
+  position: absolute;
+  left: -8px;
+  top: 0;
+  width: 8px;
+  height: 12px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 12V0H0l8 12z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
+  background-size: contain;
+  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.1));
+}
+.dark .bot::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 12V0H0l8 12z' fill='%231e293b'/%3E%3C/svg%3E");
+  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.2));
+}
+.user::before {
+  content: "";
+  position: absolute;
+  right: -8px;
+  top: 0;
+  width: 8px;
+  height: 12px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M0 0v12h8L0 0z' fill='%23a855f7'/%3E%3C/svg%3E") no-repeat;
+  background-size: contain;
+  filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.1));
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+.thinking {
+  position: relative;
+  display: inline-block;
 }
+.thinking::after {
+  content: "...";
+  position: absolute;
+  animation: pulse 1.5s infinite;
+}
+textarea {
+  min-height: 60px;
+  max-height: 200px;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
+.empty i {
+  animation: rainbowPulse 2s infinite;
 }
+@keyframes rainbowPulse {
+  0% { filter: drop-shadow(0 0 5px rgba(168,85,247,0.5)); }
+  25% { filter: drop-shadow(0 0 5px rgba(236,72,153,0.5)); }
+  50% { filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)); }
+  75% { filter: drop-shadow(0 0 5px rgba(16,185,129,0.5)); }
+  100% { filter: drop-shadow(0 0 5px rgba(168,85,247,0.5)); }
 }
+/* Smooth scrolling */
+main {
+  scroll-behavior: smooth;
+}