Spaces:

akhaliq
/

anycoder-00da736e

Running

App Files Files Community

akhaliq HF Staff commited on 20 days ago

Commit

da7d310

verified ·

1 Parent(s): 196f698

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +144 -19

index.html CHANGED Viewed

@@ -2,28 +2,153 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
 </body>
 </html>

 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Apple Style Chatbot - Powered by Transformers.js</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
+  <div class="app-container">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-content">
+        <div class="logo">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round" />
+            <path d="M12 22V12" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round" />
+            <path d="M22 7L12 12L2 7" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round" />
+            <defs>
+              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color:#007AFF;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#5856D6;stop-opacity:1" />
+              </linearGradient>
+            </defs>
+          </svg>
+          <span>AI Chatbot</span>
+        </div>
+        <div class="header-actions">
+          <button id="clearBtn" class="header-btn">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6"/>
+                        </svg>
+                        Clear
+                    </button>
+          <button id="settingsBtn" class="header-btn">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 1.54l4.24 4.24M1 12h6m6 0h6"/>
+                        </svg>
+                        Settings
+                    </button>
+        </div>
+      </div>
+      <div class="attribution">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+      </div>
+    </header>
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Loading Screen -->
+      <div id="loadingScreen" class="loading-screen">
+        <div class="loading-content">
+          <div class="loading-spinner"></div>
+          <h2>Loading AI Model</h2>
+          <p>Initializing Gemma-3-270M model...</p>
+          <div class="progress-bar">
+            <div id="progressFill" class="progress-fill"></div>
+          </div>
+          <div id="loadingStatus" class="loading-status">Preparing...</div>
+        </div>
+      </div>
+      <!-- Chat Container -->
+      <div id="chatContainer" class="chat-container" style="display: none;">
+        <div id="messagesList" class="messages-list">
+          <!-- Welcome Message -->
+          <div class="message assistant">
+            <div class="message-avatar">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" />
+              </svg>
+            </div>
+            <div class="message-content">
+              <div class="message-text">
+                Hello! I'm your AI assistant powered by Gemma-3. How can I help you today?
+              </div>
+              <div class="message-time">Just now</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Input Area -->
+      <div id="inputArea" class="input-area" style="display: none;">
+        <div class="input-container">
+          <textarea
+                        id="messageInput"
+                        class="message-input"
+                        placeholder="Type your message here..."
+                        rows="1"
+                        maxlength="1000"
+                    ></textarea>
+          <button id="sendBtn" class="send-btn" disabled>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
+                        </svg>
+                    </button>
+        </div>
+        <div class="input-footer">
+          <span id="charCount">0 / 1000</span>
+          <span class="model-info">Gemma-3-270M • Transformers.js</span>
+        </div>
+      </div>
+    </main>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Settings</h2>
+          <button class="close-btn" id="closeSettings">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M18 6L6 18M6 6l12 12"/>
+                        </svg>
+                    </button>
+        </div>
+        <div class="modal-body">
+          <div class="setting-group">
+            <label for="maxTokens">Max Tokens</label>
+            <input type="range" id="maxTokens" min="128" max="1024" value="512" step="128">
+            <span id="maxTokensValue">512</span>
+          </div>
+          <div class="setting-group">
+            <label for="temperature">Temperature</label>
+            <input type="range" id="temperature" min="0" max="1" value="0.7" step="0.1">
+            <span id="temperatureValue">0.7</span>
+          </div>
+          <div class="setting-group">
+            <label>
+                            <input type="checkbox" id="streaming" checked>
+                            Enable streaming
+                        </label>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary" id="saveSettings">Save Settings</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="index.js"></script>
 </body>
 </html>