Hugging Face's logo

Spaces:
Severian
/
Chat
Running

App Files Community
Severian commited on
Commit
66ad91e
·
verified ·
1 Parent(s): 97813a3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +116 -18
index.html CHANGED
@@ -1,19 +1,117 @@
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">
6
+ <title>Chatbot Embed with AnythingLLM</title>
7
+
8
+ <!-- CSS Styles -->
9
+ <style>
10
+ /* Basic reset */
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ /* Body styling */
18
+ body {
19
+ font-family: Arial, sans-serif;
20
+ background-color: #f4f4f4;
21
+ min-height: 100vh;
22
+ display: flex;
23
+ flex-direction: column;
24
+ }
25
+
26
+ /* Header styling */
27
+ header {
28
+ background-color: #4CAF50;
29
+ color: white;
30
+ padding: 1rem;
31
+ text-align: center;
32
+ }
33
+
34
+ /* Main content styling */
35
+ main {
36
+ flex: 1;
37
+ padding: 2rem;
38
+ text-align: center;
39
+ }
40
+
41
+ /* Chatbot widget container */
42
+ .chatbot-widget {
43
+ position: fixed;
44
+ bottom: 20px;
45
+ right: 20px;
46
+ z-index: 1000;
47
+ }
48
+
49
+ /* Optional: Button to open the chatbot */
50
+ .chatbot-button {
51
+ background-color: #4CAF50;
52
+ color: white;
53
+ border: none;
54
+ padding: 15px;
55
+ border-radius: 50%;
56
+ cursor: pointer;
57
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
58
+ transition: background-color 0.3s ease;
59
+ font-size: 18px;
60
+ }
61
+
62
+ .chatbot-button:hover {
63
+ background-color: #45a049;
64
+ }
65
+ </style>
66
+ </head>
67
+ <body>
68
+
69
+ <!-- Header Section -->
70
+ <header>
71
+ <h1>Welcome to Our Website</h1>
72
+ <p>Interact with our chatbot below!</p>
73
+ </header>
74
+
75
+ <!-- Main Content -->
76
+ <main>
77
+ <h2>About Us</h2>
78
+ <p>Here is some information about our services...</p>
79
+ <!-- Add more content as needed -->
80
+ </main>
81
+
82
+ <!-- Chatbot Widget Container -->
83
+ <div class="chatbot-widget">
84
+ <!-- Optional: Chatbot Open Button -->
85
+ <button class="chatbot-button" id="open-chatbot">💬</button>
86
+ </div>
87
+
88
+ <!-- Chatbot Embed Script -->
89
+ <script
90
+ data-embed-id="f873bd25-2eb1-4e69-9f13-114ca6585a5b"
91
+ data-base-api-url="https://severian-anything.hf.space/api/embed"
92
+ src="https://severian-anything.hf.space/embed/anythingllm-chat-widget.min.js">
93
+ </script>
94
+
95
+ <!-- Optional: Script to Toggle Chatbot Visibility -->
96
+ <script>
97
+ // Wait for the DOM to load
98
+ document.addEventListener('DOMContentLoaded', function() {
99
+ const chatbotButton = document.getElementById('open-chatbot');
100
+
101
+ // Assuming the chat widget adds an iframe or a specific element, you may need to adjust the selector
102
+ chatbotButton.addEventListener('click', function() {
103
+ // Toggle visibility of the chatbot widget
104
+ const chatbotIframe = document.querySelector('iframe[src*="anythingllm-chat-widget"]');
105
+ if (chatbotIframe) {
106
+ if (chatbotIframe.style.display === 'none' || !chatbotIframe.style.display) {
107
+ chatbotIframe.style.display = 'block';
108
+ } else {
109
+ chatbotIframe.style.display = 'none';
110
+ }
111
+ }
112
+ });
113
+ });
114
+ </script>
115
+
116
+ </body>
117
  </html>