Use /chat to interact.
" - -@app.route('/chat', methods=['POST']) -def chat(): - user_input = request.json.get('message') - response = get_response(user_input) # Call the response function - return jsonify({'response': response}) - -def get_response(user_input): - # Simple logic based on keywords - if "anxiety" in user_input.lower(): - return "It's okay to feel anxious. Consider practicing deep breathing." - elif "stress" in user_input.lower(): - return "Stress can be managed with meditation and exercise." - elif "depression" in user_input.lower(): - return "It's important to talk to someone. You're not alone." - else: - return "I'm here to help. Can you tell me more about what you're feeling?" +# Load the fine-tuned model and tokenizer +# Change this line: + +# To this line (removing the './'): +model = AutoModelForCausalLM.from_pretrained('fine_tuned_model') + +tokenizer = AutoTokenizer.from_pretrained('./fine_tuned_model') + +@app.route('/predict', methods=['POST']) +def predict(): + data = request.get_json() + input_text = data['text'] # Get the input text from the request + inputs = tokenizer.encode(input_text, return_tensors='pt') + + # Generate predictions + outputs = model.generate(inputs, max_length=100) + predicted_text = tokenizer.decode(outputs[0], skip_special_tokens=True) + + return jsonify({'response': predicted_text}) if __name__ == '__main__': app.run(debug=True) diff --git a/app/static/script.js b/app/static/script.js index bb4b931..97a3816 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -27,17 +27,36 @@ document.getElementById('send-button').onclick = function() { }); }; -// Add event listener for form submission (optional) -document.getElementById('chat-form').addEventListener('submit', function(event) { - event.preventDefault(); // Prevent default form submission - document.getElementById('send-button').click(); // Trigger the send button click +// Add event listener for 'Enter' key +document.getElementById('user-input').addEventListener('keydown', function(event) { + if (event.key === 'Enter') { // Check if the pressed key is 'Enter' + event.preventDefault(); // Prevent default action (e.g., adding a new line) + document.getElementById('send-button').click(); // Simulate a click on the send button + } }); // Function to display a message in the chatbox function displayMessage(message, sender) { const messageDiv = document.createElement('div'); messageDiv.classList.add(sender === 'user' ? 'user-message' : 'ai-message'); - messageDiv.textContent = message; + + // Create a container for the message + const messageContainer = document.createElement('div'); + messageContainer.classList.add('message-container'); + + // Add avatar for AI responses only + if (sender === 'ai') { + const avatar = document.createElement('img'); + avatar.src = 'path/to/ai-avatar.png'; // Update with the actual path to the AI avatar + avatar.classList.add('avatar'); + messageContainer.appendChild(avatar); // Append the avatar to the message container + } + + // Append message text to the container + messageContainer.appendChild(document.createTextNode(message)); + + messageDiv.appendChild(messageContainer); + document.getElementById('messages').appendChild(messageDiv); // Auto-scroll to latest message document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight; diff --git a/app/static/styles.css b/app/static/styles.css index eafd2b7..585e9e1 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1,35 +1,40 @@ body { font-family: Arial, sans-serif; - background-color: #f2f2f2; + background-color: #FFFFFF; /* No background color for full-screen effect */ + color: black; /* Black text for readability */ margin: 0; - padding: 20px; + padding: 0; /* Remove padding */ + height: 100vh; /* Full height */ } .container { - max-width: 600px; - margin: auto; - background: white; + max-width: 100%; /* Full width */ + height: calc(100vh - 50px); /* Full height minus footer space */ + margin: 0; /* Remove margin */ + background: #FFFFFF; /* White background */ padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border-radius: 0; /* Remove border radius */ + box-shadow: none; /* Remove box shadow */ + display: flex; + flex-direction: column; /* Stack elements vertically */ } h1 { text-align: center; - color: #333; + color: #001F3F; /* Dark blue text */ margin-bottom: 20px; } #chatbox { - height: 400px; + flex-grow: 1; /* Fill remaining space */ overflow-y: auto; - border: 1px solid #ccc; + border: 2px solid #003366; /* Dark blue border */ margin-bottom: 10px; padding: 10px; display: flex; flex-direction: column; border-radius: 5px; - background-color: #f9f9f9; + background-color: #F9F9F9; /* Light gray background */ } #messages { @@ -38,23 +43,32 @@ h1 { flex-grow: 1; } -.user-message, .ai-message { - padding: 10px; - margin: 5px 0; - border-radius: 5px; - transition: background-color 0.3s ease; /* Smooth transition for hover effect */ +.message-container { + display: flex; /* Align items horizontally */ + align-items: center; /* Center items vertically */ + margin: 5px 0; /* Space between messages */ } .user-message { - background-color: #e1ffc7; + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s ease; /* Smooth transition for hover effect */ + background-color: #3D9970; /* Dark green background */ + color: white; /* White text */ align-self: flex-end; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + max-width: 70%; /* Limit the width of user messages */ } .ai-message { - background-color: #d1e6ff; + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s ease; /* Smooth transition for hover effect */ + background-color: #0074D9; /* Dark blue background */ + color: white; /* White text */ align-self: flex-start; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + max-width: 70%; /* Limit the width of AI messages */ } .input-area { @@ -66,19 +80,19 @@ h1 { #user-input { flex-grow: 1; padding: 10px; - border: 1px solid #ccc; + border: 2px solid #003366; /* Dark blue border */ border-radius: 4px; transition: border-color 0.3s ease; /* Smooth transition for focus effect */ } #user-input:focus { - border-color: #4CAF50; /* Change border color on focus */ + border-color: #3D9970; /* Dark green border on focus */ outline: none; /* Remove default outline */ } #send-button { padding: 10px 15px; - background-color: #4CAF50; + background-color: #3D9970; /* Dark green button */ color: white; border: none; border-radius: 4px; @@ -87,20 +101,24 @@ h1 { } #send-button:hover { - background-color: #45a049; + background-color: #2C7A4B; /* Darker green on hover */ } +/* Helpline Styling */ #helpline { - margin-top: 10px; font-weight: bold; - white-space: nowrap; - overflow: hidden; - position: relative; + color: white; /* White text for helpline */ text-align: center; /* Center align helpline text */ + background-color: red; /* Full red background */ + padding: 10px; /* Add padding for better appearance */ + position: relative; /* Changed to relative for proper stacking */ + margin-top: 10px; /* Space above the helpline */ } .scrolling-helpline { - animation: scroll 10s linear infinite; + white-space: nowrap; /* Prevent line breaks */ + display: inline-block; /* Allow inline block for scrolling */ + animation: scroll 10s linear infinite; /* Continuous scrolling */ } @keyframes scroll { @@ -108,22 +126,26 @@ h1 { 100% { transform: translateX(-100%); } } -.helpline-number { - color: red; -} - footer { text-align: center; margin-top: 20px; font-size: 0.9em; - color: #777; + color: black; /* Black text */ } footer a { - color: #4CAF50; /* Link color */ + color: #3D9970; /* Dark green link color */ text-decoration: none; } footer a:hover { text-decoration: underline; /* Underline links on hover */ } + +/* Avatar styles */ +.avatar { + width: 40px; /* Set avatar width */ + height: 40px; /* Set avatar height */ + border-radius: 50%; /* Make it circular */ + margin-right: 10px; /* Space between avatar and message text */ +} diff --git a/app/templates/index.html b/app/templates/index.html index 6376c6b..de149a3 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -3,27 +3,24 @@ -