new changes

sakshijoshi2812 · Oct 26, 2024 · 49dadda · 49dadda
1 parent 35dfe36
commit 49dadda
Show file tree

Hide file tree

Showing 8 changed files with 732 additions and 85 deletions.
diff --git a/app/app.py b/app/app.py
@@ -1,27 +1,28 @@
 from flask import Flask, request, jsonify
+from transformers import AutoModelForCausalLM, AutoTokenizer
 
+# Initialize Flask app
 app = Flask(__name__)
 
-@app.route('/')
-def home():
-    return "<h1>Welcome to the Mental Health Chatbot</h1><p>Use /chat to interact.</p>"
-
-@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
@@ -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
@@ -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,43 +101,51 @@ 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 {
     0% { transform: translateX(100%); }
     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
@@ -3,27 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mental Health Support Chatbot</title>
-    <link rel="stylesheet" href="styles.css"> <!-- Adjust the path if necessary -->
+    <link rel="stylesheet" href="/static/styles.css">
+    <title>Mental Health Chatbot</title>
 </head>
 <body>
     <div class="container">
-        <h1>Mental Health Support Chatbot</h1>
+        <h1>Mental Health Chatbot</h1>
         <div id="chatbox">
             <div id="messages"></div>
         </div>
         <div class="input-area">
-            <input type="text" id="user-input" placeholder="Type your message..." />
+            <input type="text" id="user-input" placeholder="Type your message here...">
             <button id="send-button">Send</button>
         </div>
-        <div id="helpline" class="scrolling-helpline">
-            If you need immediate help, please call <span class="helpline-number">1-800-273-8255</span>
-        </div>
+        <div id="helpline" class="scrolling-helpline">If you are in crisis, please call the national helpline at 1-800-273-TALK (1-800-273-8255).</div>
     </div>
     <footer>
         <p>&copy; 2024 Mental Health Chatbot. All rights reserved.</p>
-        <p><a href="https://www.mentalhealth.gov/" target="_blank">Mental Health Resources</a></p>
     </footer>
-    <script src="script.js"></script> <!-- Adjust the path if necessary -->
+    <script src="/static/script.js"></script>
 </body>
 </html>