KarthikaRajagopal
/

Chatbot-llm

Text Generation

Model card Files Files and versions

xet

Community

KarthikaRajagopal commited on Nov 26, 2024

Commit

20681aa

verified ·

1 Parent(s): b29caa0

Upload index.html

Browse files

Files changed (1) hide show

index.html +216 -0

index.html ADDED Viewed

	@@ -0,0 +1,216 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Agri Chatbot</title>
+    <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="This is an Agriculture chatbot that helps farmers to make write desitions." />
+    <link rel="icon" type="image/png" href="static/images/favicon.ico"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- Option 1: Include in HTML -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+    <style>
+        .loading-message {
+            text-align: center;
+            font-style: italic;
+            color: #999;
+        }
+        #chat-container {
+            height: 60vh;
+            overflow-y: auto;
+        }
+        #user-input {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Krissi Help Chatbot</h1>
+        <p>Disclaimer:please have patience this might take some time</p>
+        <div class="row chat-container" id="chat-container"></div>
+        <div class="row">
+            <div class="col-xs-12">
+                <input type="text" class="form-control" id="user-input" placeholder="Type your message...">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <button class="btn btn-primary btn-block" id="send-btn">Send</button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <button class="btn btn-primary btn-block" id="record-btn">Record</button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <audio id="audio" controls></audio>
+            </div>
+        </div>
+        <footer class="footer">
+            <div class="footer-links">
+                <h2> Made by Mohammed Ashraf
+                <a href="https://www.linkedin.com/in/mohammed97ashraf" target="_blank"><i class="bi bi-linkedin"></i></a>
+                <a href="https://github.com/mohammed97ashraf" target="_blank"><i class="bi bi-github"></i></a></h2>
+            </div>
+        </footer>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('#send-btn').on('click', function() {
+                sendMessage();
+            });
+            $('#user-input').on('keypress', function(e) {
+                if (e.which === 13) {
+                    sendMessage();
+                }
+            });
+            $('#record-btn').on('click', function() {
+                toggleRecording();
+            });
+            var recording = false;
+            var recorder;
+            function toggleRecording() {
+                if (recording) {
+                    stopRecording();
+                    $('#record-btn').text('Record');
+                } else {
+                    startRecording();
+                    $('#record-btn').text('Stop Recording');
+                }
+                recording = !recording;
+            }
+            function startRecording() {
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    navigator.mediaDevices.getUserMedia({ audio: true })
+                        .then(function(stream) {
+                            recorder = new MediaRecorder(stream);
+                            var chunks = [];
+                            recorder.addEventListener('dataavailable', function(e) {
+                                chunks.push(e.data);
+                            });
+                            recorder.addEventListener('stop', function() {
+                                var audioBlob = new Blob(chunks, { type: 'audio/webm' });
+                                var formData = new FormData();
+                                formData.append('audio', audioBlob, 'audio.webm');
+                                sendAudio(formData);
+                            });
+                            recorder.start();
+                        })
+                        .catch(function(err) {
+                            console.error('Error accessing microphone:', err);
+                        });
+                } else {
+                    console.error('getUserMedia is not supported in this browser.');
+                }
+            }
+            function stopRecording() {
+                if (recorder) {
+                    recorder.stop();
+                }
+            }
+            function sendAudio(formData) {
+                $('#chat-container').append('<div class="col-xs-12"><p class="loading-message">Uploading audio...</p></div>');
+                scrollToBottom();
+                $.ajax({
+                    url: '/chat',
+                    type: 'POST',
+                    data: formData,
+                    contentType: false,
+                    processData: false,
+                    success: function(response) {
+                        $('#chat-container .loading-message:last').remove();
+                        var transcription = response.text;
+                        $('#user-input').val(transcription);
+                        sendMessage();
+                    },
+                    error: function(xhr, status, error) {
+                        console.error('Error uploading audio:', error);
+                    }
+                });
+            }
+            function sendMessage() {
+                var userInput = $('#user-input').val();
+                if (userInput.trim() !== '') {
+                    $('#user-input').val('');
+                    $('#chat-container').append('<div class="col-xs-12 text-right"><p class="alert alert-info">' + userInput + '</p></div>');
+                    scrollToBottom();
+                    $('#chat-container').append('<div class="col-xs-12"><p class="loading-message">Bot is typing...</p></div>');
+                    scrollToBottom();
+                    $.post('/chat', {text: userInput}, function(response) {
+                        $('#chat-container .loading-message:last').remove();
+                        $('#chat-container').append('<div class="col-xs-12 text-left"><p class="alert alert-success">' + response.text + '</p></div>');
+                        scrollToBottom();
+                        setVoice(response.voice);
+                        playNotificationSound();
+                        showNotification(response.text);
+                    });
+                }
+            }
+            function setVoice(voiceFile) {
+                var audio = document.getElementById('audio');
+                audio.pause();
+                audio.src = voiceFile;
+                audio.load();
+                audio.play();
+            }
+            function playNotificationSound() {
+                var audio = new Audio('{{ url_for('static', filename='audio/sound.mp3') }}');
+                audio.play();
+            }
+            function showNotification(message) {
+                if (Notification.permission === "granted") {
+                    var notification = new Notification("New Message", {
+                        body: message,
+                        icon: "{{ url_for('static', filename='img/notification-icon.png') }}"
+                    });
+                } else if (Notification.permission !== "denied") {
+                    Notification.requestPermission().then(function(permission) {
+                        if (permission === "granted") {
+                            var notification = new Notification("New Message", {
+                                body: message,
+                                icon: "{{ url_for('static', filename='img/notification-icon.png') }}"
+                            });
+                        }
+                    });
+                }
+            }
+            function scrollToBottom() {
+                $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
+            }
+        });
+    </script>
+</body>
+</html>