Hugging Face's logo

Spaces:
malvika2003
/
AuthenticationChatbot
Runtime error

App Files Community
malvika2003 commited on
Commit
73c48e4
·
verified ·
1 Parent(s): b8aea56

Upload 2 files

Browse files
Files changed (2) hide show
  1. app..html +91 -0
  2. index.html +70 -0
app..html ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
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>Login Page</title>
8
+ <!-- Include Bootstrap CSS for styling (optional) -->
9
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
10
+ <style>
11
+ body {
12
+ background-color: #f0f0f0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ }
18
+ .login-container {
19
+ max-width: 400px;
20
+ background-color: #fff;
21
+ padding: 20px;
22
+ border-radius: 8px;
23
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
24
+ }
25
+ .login-container h2 {
26
+ text-align: center;
27
+ margin-bottom: 20px;
28
+ }
29
+ .form-group {
30
+ margin-bottom: 20px;
31
+ }
32
+ .form-group label {
33
+ font-weight: bold;
34
+ }
35
+ .form-group input {
36
+ width: 100%;
37
+ padding: 10px;
38
+ border: 1px solid #ccc;
39
+ border-radius: 4px;
40
+ box-sizing: border-box;
41
+ }
42
+ .form-group button {
43
+ width: 100%;
44
+ padding: 10px;
45
+ background-color: #007bff;
46
+ color: #fff;
47
+ border: none;
48
+ border-radius: 4px;
49
+ cursor: pointer;
50
+ }
51
+ .form-group button:hover {
52
+ background-color: #0056b3;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="login-container">
58
+ <h2>Login</h2>
59
+ <form id="loginForm">
60
+ <div class="form-group">
61
+ <label for="username">Username</label>
62
+ <input type="text" id="username" name="username" required>
63
+ </div>
64
+ <div class="form-group">
65
+ <label for="password">Password</label>
66
+ <input type="password" id="password" name="password" required>
67
+ </div>
68
+ <div class="form-group">
69
+ <button type="submit">Login</button>
70
+ </div>
71
+ </form>
72
+ </div>
73
+
74
+ <!-- Script for handling form submission -->
75
+ <script>
76
+ document.getElementById('loginForm').addEventListener('submit', function(event) {
77
+ event.preventDefault();
78
+ const username = document.getElementById('username').value;
79
+ const password = document.getElementById('password').value;
80
+
81
+ // Example validation (replace with your own logic)
82
+ if (username === 'admin' && password === 'password') {
83
+ // Redirect to main application page
84
+ window.location.href = 'index.html';
85
+ } else {
86
+ alert('Invalid username or password. Please try again.');
87
+ }
88
+ });
89
+ </script>
90
+ </body>
91
+ </html>
index.html ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Chatbot Interface</title>
7
+ <!-- Include Bootstrap CSS for styling (optional) -->
8
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
9
+ <style>
10
+ body {
11
+ padding: 20px;
12
+ }
13
+ .chatbot-container {
14
+ max-width: 800px;
15
+ margin: auto;
16
+ background-color: #fff;
17
+ padding: 20px;
18
+ border-radius: 8px;
19
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
20
+ }
21
+ .chatbot-container h1 {
22
+ text-align: center;
23
+ margin-bottom: 20px;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <div class="chatbot-container">
29
+ <h1>Question answering chatbot</h1>
30
+ <div id="chatbot-interface">
31
+ <!-- Chatbot UI will be dynamically added here -->
32
+ </div>
33
+ </div>
34
+ <iframe src="http://127.0.0.1:7865/" width="1500" height="1000" frameborder="0"></iframe>
35
+ <!-- Include Gradio JavaScript library -->
36
+ <script src="https://cdn.jsdelivr.net/npm/@gradio/chatbot"></script>
37
+ <script>
38
+ // Define function to initialize Gradio chatbot
39
+ function initializeChatbot() {
40
+ gr.Chatbot({
41
+ container: document.getElementById('chatbot-interface'),
42
+ steps: [
43
+ {
44
+ type: 'text',
45
+ name: 'input',
46
+ message: 'Enter your question or instruction here...',
47
+ },
48
+ {
49
+ type: 'model',
50
+ name: 'output',
51
+ model: 'http://127.0.0.1:7865/', // Replace with your actual chatbot endpoint
52
+
53
+ options: {
54
+ headers: {
55
+ 'Authorization': 'Bearer your_auth_token', // If authentication is required
56
+ 'Content-Type': 'application/json',
57
+ },
58
+ },
59
+ }
60
+ ]
61
+ });
62
+ }
63
+
64
+ // Wait for DOM content to load before initializing chatbot
65
+ document.addEventListener('DOMContentLoaded', function() {
66
+ initializeChatbot();
67
+ });
68
+ </script>
69
+ </body>
70
+ </html>