-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
147 lines (137 loc) · 6.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Djanglang Chat</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
/* Custom styles */
body {
font-family: Arial, sans-serif;
}
#chatBox {
height: 80vh; /* Use 80% of the screen height */
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.typing-indicator {
display: none;
}
</style>
</head>
<body>
<div id="loadingScreen" style="display: none;" class="d-flex justify-content-center align-items-center vh-100">
<div class="text-center w-75">
<h4 id="loadingMessage">Initializing...</h4>
<!-- Bootstrap Progress Bar -->
<div class="progress mt-3" role="progressbar" aria-label="Initializing..." aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div id="loadingProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
</div>
</div>
</div>
<div class="container mt-5" id="djanglang-chat-container" style="display: none;">
<div class="card">
<div class="card-header bg-primary text-white">Djanglang Chat</div>
<div class="card-body" id="chatBox">
<!-- Chat messages will be appended here -->
</div>
<div class="typing-indicator text-muted pl-2">Djanglang is typing...</div>
<div class="card-footer">
<div class="input-group">
<input type="text" id="query" class="form-control" placeholder="Ask a question related to Django...">
<div class="input-group-append">
<button class="btn btn-primary" type="submit" id="sendBtn">Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and other scripts -->
<script>
var progress_n = 0;
function buildDatabase() {
fetch('/build_db/')
.then(() => {
// Start checking the database status every 2 seconds
const interval = setInterval(() => {
fetch('/db_status/')
.then(response => response.json())
.then(data => {
if (data.exists) {
clearInterval(interval);
document.getElementById('loadingScreen').style = 'display: none!important';
document.getElementById('djanglang-chat-container').style = '';
} else {
// Update progress bar and message
const progressBar = document.getElementById('loadingProgressBar');
const progressMessages = [
"Building list of URLs...",
"Fetching the source data...",
"Building database...",
"Getting things ready..."
];
const progress = (progress_n+1) / progressMessages.length * 100;
progressBar.style.width = progress + '%';
document.getElementById('loadingMessage').innerText = progressMessages[progress_n];
if(progressMessages.length>progress_n+1)progress_n++;
}
});
}, 4000);
});
}
// Check if the database exists on page load
fetch('/db_status/')
.then(response => response.json())
.then(data => {
console.log(data)
if (data.exists) {
document.getElementById('djanglang-chat-container').style = '';
document.getElementById('loadingScreen').style = 'display: none!important';
} else {
document.getElementById('loadingScreen').style.display = '';
buildDatabase();
}
});
document.getElementById('sendBtn').addEventListener('click', function() {
const queryInput = document.getElementById('query');
const query = queryInput.value;
if (query.trim() === '') return; // Don't send empty messages
// Append user's message to chatBox
const chatBox = document.getElementById('chatBox');
const userMessage = document.createElement('div');
userMessage.className = 'message bg-light';
userMessage.innerHTML = `<strong>You:</strong> ${query} <span class="text-muted float-end">${new Date().toLocaleTimeString()}</span>`;
chatBox.appendChild(userMessage);
// Show typing indicator
document.querySelector('.typing-indicator').style.display = 'block';
// Fetch data from server
fetch('/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-CSRFToken': '{{ csrf_token }}'
},
body: `query=${query}`
})
.then(response => response.json())
.then(data => {
const botMessage = document.createElement('div');
botMessage.className = 'message bg-secondary text-white';
botMessage.innerHTML = `<strong>Djanglang:</strong> ${data.answer}<br><small>${data.sources}</small> <span class="text-muted float-end">${new Date().toLocaleTimeString()}</span>`;
chatBox.appendChild(botMessage);
// Scroll to the bottom of chatBox to show latest message
chatBox.scrollTop = chatBox.scrollHeight;
// Hide typing indicator
document.querySelector('.typing-indicator').style.display = 'none';
});
// Clear the input field
queryInput.value = '';
});
</script>
</body>
</html>