Hugging Face's logo

Spaces:
udd542
/
anycoder-825b2022
Running

App Files Community
udd542 commited on
Commit
ae4cb95
·
verified ·
1 Parent(s): a03434e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +160 -19
index.html CHANGED
@@ -1,19 +1,160 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- Just a taste of what I can create -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Modern AI Chat Interface</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body {
11
+ font-family: 'Segoe UI', system-ui, sans-serif;
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ min-height: 100vh;
14
+ color: #fff;
15
+ }
16
+ .chat-container {
17
+ max-width: 900px;
18
+ margin: 0 auto;
19
+ padding: 20px;
20
+ min-height: 100vh;
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+ .header {
25
+ text-align: center;
26
+ padding: 30px 0;
27
+ border-bottom: 1px solid rgba(255,255,255,0.1);
28
+ }
29
+ .header h1 {
30
+ font-size: 2.5rem;
31
+ background: linear-gradient(90deg, #00d9ff, #00ff88);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ margin-bottom: 10px;
35
+ }
36
+ .chat-messages {
37
+ flex: 1;
38
+ overflow-y: auto;
39
+ padding: 20px 0;
40
+ }
41
+ .message {
42
+ display: flex;
43
+ gap: 15px;
44
+ margin-bottom: 20px;
45
+ animation: fadeIn 0.3s ease;
46
+ }
47
+ @keyframes fadeIn {
48
+ from { opacity: 0; transform: translateY(10px); }
49
+ to { opacity: 1; transform: translateY(0); }
50
+ }
51
+ .avatar {
52
+ width: 45px;
53
+ height: 45px;
54
+ border-radius: 50%;
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ font-size: 1.2rem;
59
+ flex-shrink: 0;
60
+ }
61
+ .user .avatar { background: linear-gradient(135deg, #667eea, #764ba2); }
62
+ .assistant .avatar { background: linear-gradient(135deg, #11998e, #38ef7d); }
63
+ .message-content {
64
+ background: rgba(255,255,255,0.05);
65
+ padding: 15px 20px;
66
+ border-radius: 20px;
67
+ border-top-left-radius: 5px;
68
+ max-width: 70%;
69
+ line-height: 1.6;
70
+ }
71
+ .input-area {
72
+ display: flex;
73
+ gap: 15px;
74
+ padding: 20px 0;
75
+ }
76
+ .input-area input {
77
+ flex: 1;
78
+ padding: 18px 25px;
79
+ border: none;
80
+ border-radius: 50px;
81
+ background: rgba(255,255,255,0.1);
82
+ color: #fff;
83
+ font-size: 1rem;
84
+ outline: none;
85
+ transition: all 0.3s;
86
+ }
87
+ .input-area input:focus {
88
+ background: rgba(255,255,255,0.15);
89
+ box-shadow: 0 0 20px rgba(0,217,255,0.3);
90
+ }
91
+ .input-area button {
92
+ padding: 18px 35px;
93
+ border: none;
94
+ border-radius: 50px;
95
+ background: linear-gradient(90deg, #00d9ff, #00ff88);
96
+ color: #1a1a2e;
97
+ font-weight: bold;
98
+ cursor: pointer;
99
+ transition: all 0.3s;
100
+ }
101
+ .input-area button:hover {
102
+ transform: scale(1.05);
103
+ box-shadow: 0 0 30px rgba(0,217,255,0.4);
104
+ }
105
+ </style>
106
+ </head>
107
+ <body>
108
+ <div class="chat-container">
109
+ <header class="header">
110
+ <h1>🤖 AI Assistant</h1>
111
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: #00d9ff;">anycoder</a></p>
112
+ </header>
113
+ <div class="chat-messages" id="messages">
114
+ <div class="message assistant">
115
+ <div class="avatar">AI</div>
116
+ <div class="message-content">
117
+ Hello! I'm your AI assistant, here to help with questions, coding, creative projects, and more. How can I assist you today?
118
+ </div>
119
+ </div>
120
+ </div>
121
+ <div class="input-area">
122
+ <input type="text" id="userInput" placeholder="Type your message..." onkeypress="handleKeyPress(event)">
123
+ <button onclick="sendMessage()">Send</button>
124
+ </div>
125
+ </div>
126
+ <script>
127
+ function handleKeyPress(e) {
128
+ if (e.key === 'Enter') sendMessage();
129
+ }
130
+ function sendMessage() {
131
+ const input = document.getElementById('userInput');
132
+ const message = input.value.trim();
133
+ if (!message) return;
134
+
135
+ const messages = document.getElementById('messages');
136
+
137
+ // User message
138
+ messages.innerHTML += `
139
+ <div class="message user">
140
+ <div class="avatar">👤</div>
141
+ <div class="message-content">${message}</div>
142
+ </div>
143
+ `;
144
+
145
+ input.value = '';
146
+
147
+ // Simulated AI response
148
+ setTimeout(() => {
149
+ messages.innerHTML += `
150
+ <div class="message assistant">
151
+ <div class="avatar">🤖</div>
152
+ <div class="message-content">I'm a demo interface. In a real implementation, this would connect to an AI API like OpenAI, Anthropic, or Hugging Face. Would you like me to create a fully functional version with API integration?</div>
153
+ </div>
154
+ `;
155
+ messages.scrollTop = messages.scrollHeight;
156
+ }, 1000);
157
+ }
158
+ </script>
159
+ </body>
160
+ </html>