Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <title>Farm Tech System</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| .column { | |
| flex: 0 0 48%; | |
| padding: 30px; | |
| border: 1px solid #ccc; | |
| box-shadow: 2px 2px 12px #aaa; | |
| background-color: rgba(240, 240, 240, 0.7); | |
| } | |
| .attention { | |
| background-color: #ffcccc; | |
| padding: 10px; | |
| border: 1px solid #ff6666; | |
| margin-bottom: -200px; | |
| text-align: center; | |
| width: 48%; | |
| box-sizing: border-box; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0% { background-color: #ffcccc; } | |
| 50% { background-color: #ff9999; } | |
| 100% { background-color: #ffcccc; } | |
| } | |
| @keyframes pulsate { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .attention p { | |
| font-weight: bold; | |
| color: #cc0000; | |
| margin: 0; | |
| } | |
| .attention span { | |
| color: blue; | |
| } | |
| .attention-left { | |
| margin-right: 10px; | |
| } | |
| .attention-right { | |
| margin-left: auto; | |
| } | |
| .live { | |
| animation: pulsate 1s infinite; | |
| color: red; | |
| font-weight: bold; | |
| } | |
| .chatbot-icon, .voice-icon { | |
| position: fixed; | |
| bottom: 30px; | |
| background-color: #AC3B61; | |
| color: #fff; | |
| border-radius: 50%; | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| font-size: 24px; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .chatbot-icon { | |
| right: 30px; | |
| } | |
| .voice-icon { | |
| right: 110px; | |
| } | |
| .voice-active { | |
| animation: pulse 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .chatbox { | |
| position: fixed; | |
| bottom: 120px; | |
| right: 30px; | |
| width: 400px; | |
| max-width: 90%; | |
| height: 600px; | |
| max-height: 80vh; | |
| background: #fff; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| border-radius: 20px; | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .chatbox-header { | |
| padding: 15px; | |
| font-size: 20px; | |
| background: linear-gradient(45deg, #AC3B61, #8E2D4E); | |
| color: white; | |
| border-top-left-radius: 20px; | |
| border-top-right-radius: 20px; | |
| } | |
| .chatbox-body { | |
| height: calc(100% - 130px); | |
| padding: 20px; | |
| overflow-y: auto; | |
| background-color: #f7f7f7; | |
| } | |
| .chatbox-footer { | |
| padding: 15px; | |
| background-color: white; | |
| border-bottom-left-radius: 20px; | |
| border-bottom-right-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .chatbox-footer input { | |
| flex: 1; | |
| padding: 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 25px; | |
| font-size: 16px; | |
| margin-right: 10px; | |
| } | |
| .chatbox-footer button { | |
| padding: 12px 20px; | |
| background: linear-gradient(45deg, #AC3B61, #8E2D4E); | |
| color: white; | |
| border: none; | |
| border-radius: 25px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| .chatbox-footer button:hover { | |
| background: linear-gradient(45deg, #8E2D4E, #AC3B61); | |
| } | |
| .message { | |
| margin-bottom: 12px; | |
| padding: 8px 12px; | |
| border-radius: 16px; | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| animation: fadeIn 0.3s ease; | |
| font-size: 14px; /* Reduced font size for chat messages */ | |
| } | |
| .user-message { | |
| background-color: #E1F5FE; | |
| color: #0277BD; | |
| margin-left: auto; | |
| } | |
| .bot-message { | |
| background-color: #FFF3E0; | |
| color: #E65100; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| animation: blink 1.4s infinite both; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: .2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: .4s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="body"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <h1 class="animate-charcter">Farm Tech System-Home</h1> | |
| </div> | |
| </div> | |
| </div> | |
| <header> | |
| <nav class="navbar"> | |
| <ul class="nav-links"> | |
| <li><a href="sensors"><i class="fas fa-home"></i> Sensors</a></li> | |
| <li><a href="zones"><i class="fas fa-cogs"></i> Zones</a></li> | |
| <li><a href="activity-log"><i class="fas fa-envelope"></i> Activity Log</a></li> | |
| <li><a href="notification"><i class="fas fa-bell"></i> Notifications</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <h1 style="text-align: center; color: white;">Test your crop health!!!</h1> | |
| <p style="font-size: 20px; text-align: center; color: white;"> | |
| Temperature: 32°C, Humidity: 95%, Moisture: High (<span class="live">live</span>) | |
| </p> | |
| <div class="container"> | |
| <div class="attention attention-left"> | |
| <p> | |
| Attention: This weather condition may lead to outbreak of <span>Tea mosquito bug</span> (Action Needed) | |
| </p> | |
| </div> | |
| <div class="attention attention-right"> | |
| <p> | |
| Attention: This weather condition may lead to outbreak of <span>Blister blight disease</span> (Action Needed) | |
| </p> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="column"> | |
| <h2>Tea Crop Pest Detection</h2> | |
| <form method="post" enctype="multipart/form-data"> | |
| <input type="file" name="pest_file" accept="image/*" required> | |
| <br><br> | |
| <input type="submit" value="Upload"> | |
| </form> | |
| {% if pest_filename %} | |
| <h3>Uploaded Photo:</h3> | |
| <img src="{{ url_for('uploaded_file', filename=pest_filename) }}" alt="Uploaded Photo" style="max-width: 100%; height: auto;"> | |
| <h3>Detected Pest: <span>Tea mosquito bug</span></h3> | |
| <p>Remedy:</p> | |
| <ul> | |
| <li>Spray neem oil on the affected areas.</li> | |
| <li>Use yellow sticky traps to catch the bugs.</li> | |
| <li>Plant trap crops like castor or sunflower to divert them away from tea plants.</li> | |
| </ul> | |
| <audio id="pest_audio" src="{{ url_for('audio_file', filename=pest_audio_file) }}" controls autoplay></audio> | |
| {% endif %} | |
| </div> | |
| <div class="column"> | |
| <h2>Tea Crop Disease Detection</h2> | |
| <form method="post" enctype="multipart/form-data"> | |
| <input type="file" name="disease_file" accept="image/*" required> | |
| <br><br> | |
| <input type="submit" value="Upload"> | |
| </form> | |
| {% if disease_filename %} | |
| <h3>Uploaded Photo:</h3> | |
| <img src="{{ url_for('uploaded_file', filename=disease_filename) }}" alt="Uploaded Photo" style="max-width: 100%; height: auto;"> | |
| <h3>Detected Disease: <span>Brown Blight disease</span></h3> | |
| <p>Remedy:</p> | |
| <ul> | |
| <li>Remove and destroy infected leaves.</li> | |
| <li>Apply copper-based fungicides.</li> | |
| <li>Ensure proper air circulation around the plants.</li> | |
| </ul> | |
| <audio id="disease_audio" src="{{ url_for('audio_file', filename=disease_audio_file) }}" controls autoplay></audio> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Chatbot Icon --> | |
| <div class="chatbot-icon" id="chatbotIcon"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <!-- Voice Icon --> | |
| <div class="voice-icon" id="voiceIcon"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <!-- Chatbox --> | |
| <div class="chatbox" id="chatbox"> | |
| <div class="chatbox-header">Chat with AI</div> | |
| <div class="chatbox-body" id="chatBody"> | |
| <!-- Chat content goes here --> | |
| </div> | |
| <div class="chatbox-footer"> | |
| <input type="text" placeholder="Type your message here..." id="chatInput"> | |
| <button id="sendButton">Send</button> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript to handle the chatbot toggle | |
| document.getElementById('chatbotIcon').addEventListener('click', function() { | |
| var chatbox = document.getElementById('chatbox'); | |
| if (chatbox.style.display === 'none' || chatbox.style.display === '') { | |
| chatbox.style.display = 'flex'; | |
| } else { | |
| chatbox.style.display = 'none'; | |
| } | |
| }); | |
| // JavaScript for voice recognition | |
| var recognition; | |
| if ('webkitSpeechRecognition' in window) { | |
| recognition = new webkitSpeechRecognition(); | |
| } else if ('SpeechRecognition' in window) { | |
| recognition = new SpeechRecognition(); | |
| } else { | |
| alert('Your browser does not support speech recognition.'); | |
| } | |
| if (recognition) { | |
| recognition.continuous = false; | |
| recognition.interimResults = false; | |
| recognition.onstart = function() { | |
| document.getElementById('voiceIcon').classList.add('voice-active'); | |
| }; | |
| recognition.onend = function() { | |
| document.getElementById('voiceIcon').classList.remove('voice-active'); | |
| }; | |
| recognition.onresult = function(event) { | |
| var transcript = event.results[0][0].transcript; | |
| document.getElementById('chatInput').value = transcript; | |
| }; | |
| document.getElementById('voiceIcon').addEventListener('click', function() { | |
| recognition.start(); | |
| }); | |
| } | |
| // Chat functionality | |
| $(document).ready(function() { | |
| $('#sendButton').click(sendMessage); | |
| $('#chatInput').keypress(function(e) { | |
| if (e.which == 13) { | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| var message = $('#chatInput').val(); | |
| if (message.trim() !== '') { | |
| appendMessage('user', message); | |
| $('#chatInput').val(''); | |
| // Show a typing indicator | |
| appendMessage('bot', '<div class="typing-indicator">Typing<span>.</span><span>.</span><span>.</span></div>'); | |
| $.ajax({ | |
| url: '/chat', | |
| method: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify({message: message}), | |
| success: function(response) { | |
| // Remove the typing indicator | |
| $('.typing-indicator').parent().remove(); | |
| appendMessage('bot', response.response); | |
| }, | |
| error: function() { | |
| // Remove the typing indicator | |
| $('.typing-indicator').parent().remove(); | |
| appendMessage('bot', 'Sorry, there was an error processing your request.'); | |
| } | |
| }); | |
| } | |
| } | |
| function appendMessage(sender, message) { | |
| var messageClass = sender === 'user' ? 'user-message' : 'bot-message'; | |
| $('#chatBody').append('<div class="message ' + messageClass + '">' + message + '</div>'); | |
| $('#chatBody').scrollTop($('#chatBody')[0].scrollHeight); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |