Hugging Face's logo

Spaces:
Lap1official
/
Xylaria-chat
Running

App Files Community
Reality123b commited on
Commit
1f5fa0f
·
verified ·
1 Parent(s): 3dd016b

Update application/templates/index.html

Browse files
Files changed (1) hide show
  1. application/templates/index.html +37 -90
application/templates/index.html CHANGED
@@ -3,16 +3,17 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Enhanced AI Chat</title>
7
 
8
  <!-- Fonts -->
9
- <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
10
 
11
  <!-- Icons -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
 
14
  <!-- Syntax Highlighting -->
15
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/tokyo-night-dark.min.css">
16
 
17
  <!-- MathJax -->
18
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
@@ -24,42 +25,32 @@
24
  <body>
25
  <!-- Navigation -->
26
  <nav class="nav-container">
27
- <div class="nav-blur"></div>
28
  <div class="nav-content">
29
  <div class="nav-left">
30
  <div class="hamburger" id="hamburger">
31
  <div class="line1"></div>
32
  <div class="line2"></div>
33
- <div class="line3"></div>
34
  </div>
35
  <div class="brand">
36
- <div class="brand-icon">
37
- <div class="brand-animate"></div>
38
- </div>
39
  <span class="brand-text">Xylaria</span>
40
- <span class="brand-version">3.0</span>
41
  </div>
42
  </div>
43
 
44
  <div class="nav-center">
45
- <div class="model-selector">
46
- <select name="models" id="models" class="models">
47
- <option value="gpt-4">GPT-4 Turbo</option>
48
- <option value="gpt-3.5">GPT-3.5</option>
49
- <option value="claude">Claude 3</option>
50
- </select>
51
- <div class="model-indicator"></div>
52
- </div>
53
  </div>
54
 
55
  <div class="nav-right">
56
  <button class="theme-toggle" id="themeToggle">
57
  <i class="fas fa-moon"></i>
58
- <div class="toggle-ripple"></div>
59
  </button>
60
  <button class="settings-btn" id="settingsBtn">
61
  <i class="fas fa-cog"></i>
62
- <div class="settings-ripple"></div>
63
  </button>
64
  </div>
65
  </div>
@@ -67,98 +58,54 @@
67
 
68
  <!-- Sidebar Menu -->
69
  <div class="menu" id="menu">
70
- <div class="menu-blur"></div>
71
- <div class="menu-content">
72
- <div class="menu-header">
73
- <div class="new-chat" id="newChat">
74
- <div class="new-chat-icon">
75
- <i class="fas fa-plus"></i>
76
- </div>
77
- <span>New Chat</span>
78
- <div class="new-chat-shine"></div>
79
- </div>
80
- </div>
81
-
82
- <div class="menu-body">
83
- <div class="chats-header">
84
- <span class="chats-title">Recent Chats</span>
85
- <button class="clear-chats" id="clearChats">
86
- <i class="fas fa-trash-alt"></i>
87
- <div class="clear-ripple"></div>
88
- </button>
89
- </div>
90
- <div class="prev-chats-cont" id="prevChatsCont">
91
- <!-- Chat items will be dynamically added here -->
92
- </div>
93
  </div>
94
-
95
- <div class="menu-footer">
 
 
 
 
 
 
96
  </div>
 
 
 
 
 
 
 
 
97
  </div>
98
  </div>
99
 
100
  <!-- Main Container -->
101
  <div class="container" id="container">
102
  <div class="messages" id="messages">
103
- <div class="messages-container">
104
- <!-- Welcome Message -->
105
- <div class="message-group ai-group">
106
- <div class="avatar">
107
- <div class="avatar-img">AI</div>
108
- <div class="avatar-status"></div>
109
- </div>
110
- <div class="message ai-message">
111
- <div class="message-content">
112
- <p>Hello! I'm your AI assistant. How can I help you today?</p>
113
- </div>
114
- <div class="message-actions">
115
- <button class="action-btn copy-btn">
116
- <i class="fas fa-copy"></i>
117
- </button>
118
- <button class="action-btn like-btn">
119
- <i class="fas fa-thumbs-up"></i>
120
- </button>
121
- </div>
122
- </div>
123
- </div>
124
- </div>
125
  </div>
126
 
127
  <div class="input-container">
128
- <div class="input-blur"></div>
129
  <div class="inputs">
130
  <button id="webSearch" class="web-search">
131
  <i class="fa-solid fa-globe"></i>
132
- <div class="button-ripple"></div>
133
  </button>
134
- <div class="text-box-container">
135
- <textarea
136
- id="textBox"
137
- class="text-box"
138
- placeholder="Send a message..."
139
- rows="1"
140
- ></textarea>
141
- <div class="text-box-actions">
142
- <button class="action-btn attach-btn">
143
- <i class="fas fa-paperclip"></i>
144
- </button>
145
- <button class="action-btn mic-btn">
146
- <i class="fas fa-microphone"></i>
147
- </button>
148
- </div>
149
- </div>
150
  <button id="sendBtn" class="send-btn">
151
  <i class="fa-solid fa-paper-plane"></i>
152
- <div class="button-ripple"></div>
153
  </button>
154
  </div>
155
  <div class="input-footer">
156
  <span class="input-info">AI may produce inaccurate information</span>
157
- <div class="typing-indicator">
158
- <span></span>
159
- <span></span>
160
- <span></span>
161
- </div>
162
  </div>
163
  </div>
164
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Xylaria AI Chat</title>
7
 
8
  <!-- Fonts -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
 
12
  <!-- Icons -->
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
 
15
  <!-- Syntax Highlighting -->
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
17
 
18
  <!-- MathJax -->
19
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 
25
  <body>
26
  <!-- Navigation -->
27
  <nav class="nav-container">
 
28
  <div class="nav-content">
29
  <div class="nav-left">
30
  <div class="hamburger" id="hamburger">
31
  <div class="line1"></div>
32
  <div class="line2"></div>
 
33
  </div>
34
  <div class="brand">
 
 
 
35
  <span class="brand-text">Xylaria</span>
36
+ <span class="brand-version">v2.0</span>
37
  </div>
38
  </div>
39
 
40
  <div class="nav-center">
41
+ <select name="models" id="models" class="models">
42
+ <option value="gpt-4">GPT-4</option>
43
+ <option value="gpt-3.5">GPT-3.5</option>
44
+ <option value="claude">Claude</option>
45
+ </select>
 
 
 
46
  </div>
47
 
48
  <div class="nav-right">
49
  <button class="theme-toggle" id="themeToggle">
50
  <i class="fas fa-moon"></i>
 
51
  </button>
52
  <button class="settings-btn" id="settingsBtn">
53
  <i class="fas fa-cog"></i>
 
54
  </button>
55
  </div>
56
  </div>
 
58
 
59
  <!-- Sidebar Menu -->
60
  <div class="menu" id="menu">
61
+ <div class="menu-header">
62
+ <div class="new-chat" id="newChat">
63
+ <i class="fas fa-plus"></i>
64
+ <span>New Chat</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
+ </div>
67
+
68
+ <div class="menu-content">
69
+ <div class="chats-header">
70
+ <span class="chats-title">Recent Chats</span>
71
+ <button class="clear-chats" id="clearChats">
72
+ <i class="fas fa-trash-alt"></i>
73
+ </button>
74
  </div>
75
+ <div class="prev-chats-cont" id="prevChatsCont"></div>
76
+ </div>
77
+
78
+ <div class="menu-footer">
79
+ <button class="discord-btn">
80
+ <i class="fab fa-discord"></i>
81
+ <span>Join Discord</span>
82
+ </button>
83
  </div>
84
  </div>
85
 
86
  <!-- Main Container -->
87
  <div class="container" id="container">
88
  <div class="messages" id="messages">
89
+ <!-- Messages will be dynamically inserted here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
 
92
  <div class="input-container">
 
93
  <div class="inputs">
94
  <button id="webSearch" class="web-search">
95
  <i class="fa-solid fa-globe"></i>
 
96
  </button>
97
+ <textarea
98
+ id="textBox"
99
+ class="text-box"
100
+ placeholder="Send a message..."
101
+ rows="1"
102
+ ></textarea>
 
 
 
 
 
 
 
 
 
 
103
  <button id="sendBtn" class="send-btn">
104
  <i class="fa-solid fa-paper-plane"></i>
 
105
  </button>
106
  </div>
107
  <div class="input-footer">
108
  <span class="input-info">AI may produce inaccurate information</span>
 
 
 
 
 
109
  </div>
110
  </div>
111
  </div>