Hugging Face's logo

DaddyAloha
/
Bot-2

Adapters
Model card Files Community
DaddyAloha commited on
Commit
10470f9
·
verified ·
1 Parent(s): 14c1536

Create botbot2.html

Browse files
Files changed (1) hide show
  1. botbot2.html +198 -0
botbot2.html ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Interactive Terminal and Chat Bot</title>
7
+ <!-- jQuery Terminal CSS -->
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css">
9
+ <!-- Chart.js for Visualizations -->
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <!-- jQuery -->
12
+ <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
13
+ <!-- jQuery Terminal JS -->
14
+ <script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
15
+ <style>
16
+ body {
17
+ margin: 0;
18
+ background-color: #000;
19
+ color: #0f0;
20
+ font-family: monospace;
21
+ }
22
+ .container {
23
+ display: flex;
24
+ height: 100vh;
25
+ }
26
+ #terminal {
27
+ flex: 1;
28
+ border-right: 2px solid #0f0;
29
+ padding: 10px;
30
+ }
31
+ #chat {
32
+ flex: 1;
33
+ display: flex;
34
+ flex-direction: column;
35
+ padding: 10px;
36
+ color: #0f0;
37
+ }
38
+ #chat-messages {
39
+ flex: 1;
40
+ overflow-y: auto;
41
+ margin-bottom: 10px;
42
+ padding: 10px;
43
+ border: 1px solid #0f0;
44
+ background: #111;
45
+ }
46
+ #chat-input {
47
+ display: flex;
48
+ }
49
+ #chat-input input {
50
+ flex: 1;
51
+ padding: 5px;
52
+ background: #111;
53
+ color: #0f0;
54
+ border: 1px solid #0f0;
55
+ outline: none;
56
+ }
57
+ #chat-input button {
58
+ padding: 5px 10px;
59
+ background: #0f0;
60
+ color: #000;
61
+ border: none;
62
+ cursor: pointer;
63
+ }
64
+ canvas {
65
+ display: block;
66
+ margin: 10px auto;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <div class="container">
72
+ <!-- Terminal -->
73
+ <div id="terminal"></div>
74
+
75
+ <!-- Chat System -->
76
+ <div id="chat">
77
+ <div id="chat-messages"></div>
78
+ <div id="chat-input">
79
+ <input type="text" id="chat-text" placeholder="Type your message here...">
80
+ <button id="send-chat">Send</button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ <canvas id="chart" width="400" height="200"></canvas>
85
+
86
+ <script>
87
+ $(function () {
88
+ // Initialize the Terminal
89
+ const terminal = $('#terminal').terminal({
90
+ echo: function (...args) {
91
+ this.echo(args.join(' '));
92
+ },
93
+ optimize: function (type = 'matrix') {
94
+ if (type === 'matrix') {
95
+ this.echo('[[;cyan;]Performing Matrix Optimization...\\n]');
96
+ this.pause();
97
+ setTimeout(() => {
98
+ this.echo('Optimization complete: [[;yellow;]98% efficiency achieved]');
99
+ drawChart();
100
+ this.resume();
101
+ }, 2000);
102
+ } else {
103
+ this.error('Unsupported optimization type');
104
+ }
105
+ },
106
+ status: function () {
107
+ this.echo('[[;green;]Fetching statuses...\\n]');
108
+ this.echo('BrowserStack: [[;yellow;]Live - 100% uptime]');
109
+ this.echo('Coveralls: [[;yellow;]Coverage: 95%]');
110
+ },
111
+ js: function (code) {
112
+ try {
113
+ const result = eval(code);
114
+ this.echo('Result: ' + result);
115
+ } catch (e) {
116
+ this.error('Error: ' + e.message);
117
+ }
118
+ },
119
+ help: function () {
120
+ this.echo(`
121
+ Available commands:
122
+ - echo <text> : Echoes the input text
123
+ - optimize <type> : Performs optimization (type: matrix)
124
+ - status : Fetches statuses of services
125
+ - js <code> : Executes JavaScript code
126
+ - help : Shows this help message
127
+ `);
128
+ }
129
+ }, {
130
+ greetings: '[[;yellow;]Welcome to the Futuristic Interactive Terminal Bot!]',
131
+ name: 'interactive_terminal',
132
+ prompt: '>> '
133
+ });
134
+
135
+ // Chart.js Visualization
136
+ function drawChart() {
137
+ const ctx = document.getElementById('chart').getContext('2d');
138
+ new Chart(ctx, {
139
+ type: 'line',
140
+ data: {
141
+ labels: ['Start', 'Step 1', 'Step 2', 'Step 3', 'Complete'],
142
+ datasets: [{
143
+ label: 'Matrix Optimization Efficiency',
144
+ data: [10, 40, 70, 85, 98],
145
+ borderColor: 'cyan',
146
+ borderWidth: 2,
147
+ pointBackgroundColor: 'yellow',
148
+ fill: false
149
+ }]
150
+ },
151
+ options: {
152
+ scales: {
153
+ y: { beginAtZero: true }
154
+ }
155
+ }
156
+ });
157
+ }
158
+
159
+ // Chat Functionality
160
+ const chatMessages = $('#chat-messages');
161
+ const chatInput = $('#chat-text');
162
+
163
+ $('#send-chat').on('click', function () {
164
+ const message = chatInput.val().trim();
165
+ if (message) {
166
+ appendMessage('You', message);
167
+ handleChatBotResponse(message);
168
+ chatInput.val('');
169
+ }
170
+ });
171
+
172
+ chatInput.on('keypress', function (e) {
173
+ if (e.which === 13) {
174
+ $('#send-chat').click();
175
+ }
176
+ });
177
+
178
+ function appendMessage(sender, message) {
179
+ chatMessages.append(`<div><strong>${sender}:</strong> ${message}</div>`);
180
+ chatMessages.scrollTop(chatMessages[0].scrollHeight);
181
+ }
182
+
183
+ function handleChatBotResponse(message) {
184
+ // Basic chat bot responses
185
+ let response = "I'm not sure how to respond to that.";
186
+ if (message.toLowerCase().includes('hello')) {
187
+ response = "Hi there! How can I help you?";
188
+ } else if (message.toLowerCase().includes('status')) {
189
+ response = "All systems operational!";
190
+ } else if (message.toLowerCase().includes('optimize')) {
191
+ response = "Try running `optimize matrix` in the terminal for optimization!";
192
+ }
193
+ appendMessage('Bot', response);
194
+ }
195
+ });
196
+ </script>
197
+ </body>
198
+ </html>