Hugging Face's logo

Spaces:
BikoRiko
/
anycoder-4e4382ca
Running

App Files Community
BikoRiko commited on
Commit
f263676
·
verified ·
1 Parent(s): 4f62875

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +122 -19
index.html CHANGED
@@ -1,19 +1,122 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DuckDuckGo AI Chatbot</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="preconnect" href="https://cdn.jsdelivr.net">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+ <div class="app-container">
13
+ <!-- Header -->
14
+ <header class="header">
15
+ <div class="header-content">
16
+ <div class="logo">
17
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <circle cx="16" cy="16" r="14" fill="url(#gradient)"/>
19
+ <path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
20
+ <defs>
21
+ <linearGradient id="gradient" x1="0" y1="0" x2="32" y2="32">
22
+ <stop stop-color="#4F46E5"/>
23
+ <stop offset="1" stop-color="#7C3AED"/>
24
+ </linearGradient>
25
+ </defs>
26
+ </svg>
27
+ <h1>DuckAI Chat</h1>
28
+ </div>
29
+ <div class="header-links">
30
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
31
+ Built with anycoder
32
+ </a>
33
+ </div>
34
+ </div>
35
+ </header>
36
+
37
+ <!-- Status Bar -->
38
+ <div class="status-bar" id="statusBar">
39
+ <div class="status-indicator"></div>
40
+ <span id="statusText">Ready to chat</span>
41
+ </div>
42
+
43
+ <!-- Chat Container -->
44
+ <main class="chat-container">
45
+ <div class="chat-messages" id="chatMessages">
46
+ <!-- Welcome Message -->
47
+ <div class="message ai-message">
48
+ <div class="message-avatar">
49
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
50
+ <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#4F46E5"/>
51
+ <path d="M2 17L12 22L22 17" stroke="#4F46E5" stroke-width="2"/>
52
+ <path d="M2 12L12 17L22 12" stroke="#7C3AED" stroke-width="2"/>
53
+ </svg>
54
+ </div>
55
+ <div class="message-content">
56
+ <p>👋 Hello! I'm your AI assistant powered by DuckDuckGo's Instant Answer API.</p>
57
+ <p>Ask me anything - I can search the web in real-time to get you accurate answers, definitions, and information on any topic!</p>
58
+ <div class="example-queries">
59
+ <p><strong>Try asking:</strong></p>
60
+ <ul>
61
+ <li>"What is quantum computing?"</li>
62
+ <li>"Who is the president of France?"</li>
63
+ <li>"What is the capital of Japan?"</li>
64
+ </ul>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </main>
70
+
71
+ <!-- Input Area -->
72
+ <footer class="input-area">
73
+ <form id="chatForm" class="chat-form">
74
+ <div class="input-wrapper">
75
+ <input
76
+ type="text"
77
+ id="userInput"
78
+ placeholder="Ask me anything..."
79
+ autocomplete="off"
80
+ required
81
+ >
82
+ <button type="submit" id="sendButton">
83
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
84
+ <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
85
+ <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
86
+ </svg>
87
+ </button>
88
+ </div>
89
+ </form>
90
+ <div class="api-info">
91
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
92
+ <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
93
+ <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
94
+ <circle cx="12" cy="8" r="1" fill="currentColor"/>
95
+ </svg>
96
+ <span>Powered by DuckDuckGo Instant Answer API</span>
97
+ </div>
98
+ </footer>
99
+ </div>
100
+
101
+ <!-- Loading Indicator Template -->
102
+ <template id="loadingTemplate">
103
+ <div class="message ai-message loading-message">
104
+ <div class="message-avatar">
105
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
106
+ <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#4F46E5"/>
107
+ </svg>
108
+ </div>
109
+ <div class="message-content">
110
+ <div class="typing-indicator">
111
+ <span></span>
112
+ <span></span>
113
+ <span></span>
114
+ </div>
115
+ <span class="loading-text">Searching DuckDuckGo...</span>
116
+ </div>
117
+ </div>
118
+ </template>
119
+
120
+ <script src="index.js"></script>
121
+ </body>
122
+ </html>