Hugging Face's logo

Spaces:
akhaliq
/
anycoder-00da736e
Running

App Files Community
anycoder-00da736e
File size: 6,443 Bytes 
ab9f226
dd1b723
 
 
da7d310
 
 
 
 
 
 
dd1b723
 
 
da7d310
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dd1b723
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<!DOCTYPE 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>