Spaces:

NitinBot001
/

chatbot_without_vector-seach

Sleeping

App Files Files Community

NitinBot001 commited on Sep 21, 2025

Commit

40360a9

verified ·

1 Parent(s): c625c75

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +356 -32

templates/index.html CHANGED Viewed

@@ -2,51 +2,314 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Hal Chat - Farmer Assistant (Milets)</title>
   <style>
     body {
-      font-family: Arial, sans-serif;
-      padding: 2rem;
-      background-color: #f4f4f4;
     }
-    h1 {
       color: #2c3e50;
     }
-    label, select, input, textarea, button {
       display: block;
-      margin-top: 1rem;
       width: 100%;
     }
     textarea {
-      height: 100px;
     }
-    #response {
       margin-top: 2rem;
-      background: #fff;
-      padding: 1rem;
-      border-radius: 5px;
     }
   </style>
 </head>
 <body>
-  <h1>Ask Hal (Farmer AI)</h1>
-  <form id="chatForm">
-    <label for="message">Your Question:</label>
-    <textarea id="message" required></textarea>
-    <label for="lang">Response Language:</label>
-    <select id="lang">
-      <option value="en">English</option>
-      <option value="hi">Hindi</option>
-      <option value="mr">Marathi</option>
-      <option value="te">Telugu</option>
-      <option value="bn">Bengali</option>
-    </select>
-    <button type="submit">Ask</button>
-  </form>
-  <div id="response"></div>
   <script>
     document.getElementById("chatForm").addEventListener("submit", async (e) => {
@@ -54,9 +317,28 @@
       const message = document.getElementById("message").value;
       const lang = document.getElementById("lang").value;
       const responseBox = document.getElementById("response");
-      responseBox.innerHTML = "Thinking...";
       try {
         const res = await fetch("/chat", {
@@ -68,11 +350,53 @@
         });
         const data = await res.json();
-        responseBox.innerHTML = `<strong>Response:</strong><br>${data.response || data.error}`;
       } catch (err) {
-        responseBox.innerHTML = "Error contacting the server.";
       }
     });
   </script>
 </body>
-</html>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hal Chat - Smart Farming Assistant</title>
   <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
     body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+    }
+    .container {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      width: 100%;
+      max-width: 600px;
+      padding: 2.5rem;
+      transition: all 0.3s ease;
+    }
+    .container:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 2.5rem;
     }
+    .header h1 {
       color: #2c3e50;
+      font-size: 2.2rem;
+      margin-bottom: 0.5rem;
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .header .subtitle {
+      color: #7f8c8d;
+      font-size: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+    .farm-icon {
+      width: 24px;
+      height: 24px;
+      background: linear-gradient(135deg, #27ae60, #2ecc71);
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
     }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    label {
       display: block;
+      margin-bottom: 0.5rem;
+      color: #2c3e50;
+      font-weight: 600;
+      font-size: 0.95rem;
+    }
+    textarea, select, button {
       width: 100%;
+      border: 2px solid #e0e6ed;
+      border-radius: 12px;
+      padding: 1rem;
+      font-size: 1rem;
+      transition: all 0.3s ease;
+      background: white;
     }
     textarea {
+      height: 120px;
+      resize: vertical;
+      font-family: inherit;
+    }
+    textarea:focus, select:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    select {
+      cursor: pointer;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 1rem center;
+      appearance: none;
+    }
+    button {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      position: relative;
+      overflow: hidden;
+    }
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+    }
+    button:active {
+      transform: translateY(0);
+    }
+    button:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
     }
+    .loading-spinner {
+      display: none;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: spin 1s ease-in-out infinite;
+      margin-right: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .response-container {
       margin-top: 2rem;
+    }
+    .response-box {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      border-radius: 12px;
+      padding: 1.5rem;
+      min-height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #6c757d;
+      transition: all 0.3s ease;
+    }
+    .response-box.has-content {
+      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+      border-color: #667eea;
+      color: #2c3e50;
+      text-align: left;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+    .response-box.loading {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .thinking-dots {
+      display: inline-flex;
+      gap: 4px;
+    }
+    .thinking-dots span {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: white;
+      animation: bounce 1.4s ease-in-out infinite both;
+    }
+    .thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
+    .thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+    .language-flag {
+      display: inline-block;
+      width: 20px;
+      height: 15px;
+      border-radius: 2px;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+    .flag-en { background: linear-gradient(to bottom, #012169 33%, white 33%, white 66%, #C8102E 66%); }
+    .flag-hi { background: linear-gradient(to bottom, #FF9933 33%, white 33%, white 66%, #138808 66%); }
+    .flag-mr { background: linear-gradient(to bottom, #FF9933 33%, white 33%, white 66%, #138808 66%); }
+    .flag-te { background: linear-gradient(to bottom, #FF9933 33%, white 33%, white 66%, #138808 66%); }
+    .flag-bn { background: linear-gradient(to bottom, #006A4E 50%, #F42A41 50%); }
+    @media (max-width: 768px) {
+      .container {
+        padding: 1.5rem;
+        margin: 1rem;
+      }
+      .header h1 {
+        font-size: 1.8rem;
+      }
+    }
+    .feature-pills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+      justify-content: center;
+    }
+    .pill {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      padding: 0.4rem 0.8rem;
+      border-radius: 20px;
+      font-size: 0.8rem;
+      font-weight: 500;
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <div class="header">
+      <h1>🌾 Hal Smart Farming</h1>
+      <div class="subtitle">
+        <span class="farm-icon">🚜</span>
+        Your AI-Powered Agricultural Assistant
+      </div>
+    </div>
+    <div class="feature-pills">
+      <span class="pill">Crop Guidance</span>
+      <span class="pill">Weather Insights</span>
+      <span class="pill">Pest Control</span>
+      <span class="pill">Soil Health</span>
+    </div>
+    <form id="chatForm">
+      <div class="form-group">
+        <label for="message">💬 Ask your farming question:</label>
+        <textarea
+          id="message"
+          placeholder="e.g., How can I improve millet yield in sandy soil? What's the best time to plant jowar?"
+          required
+        ></textarea>
+      </div>
+      <div class="form-group">
+        <label for="lang">🌍 Response Language:</label>
+        <select id="lang">
+          <option value="en"><span class="language-flag flag-en"></span>English</option>
+          <option value="hi"><span class="language-flag flag-hi"></span>Hindi (हिंदी)</option>
+          <option value="mr"><span class="language-flag flag-mr"></span>Marathi (मराठी)</option>
+          <option value="te"><span class="language-flag flag-te"></span>Telugu (తెలుగు)</option>
+          <option value="bn"><span class="language-flag flag-bn"></span>Bengali (বাংলা)</option>
+        </select>
+      </div>
+      <button type="submit" id="submitBtn">
+        <span class="loading-spinner"></span>
+        <span class="button-text">Get Smart Advice</span>
+      </button>
+    </form>
+    <div class="response-container">
+      <div id="response" class="response-box">
+        Ask me anything about farming, crops, weather, or agricultural practices!
+      </div>
+    </div>
+  </div>
   <script>
     document.getElementById("chatForm").addEventListener("submit", async (e) => {
       const message = document.getElementById("message").value;
       const lang = document.getElementById("lang").value;
       const responseBox = document.getElementById("response");
+      const submitBtn = document.getElementById("submitBtn");
+      const spinner = submitBtn.querySelector(".loading-spinner");
+      const buttonText = submitBtn.querySelector(".button-text");
+      // Update button state
+      submitBtn.disabled = true;
+      spinner.style.display = "inline-block";
+      buttonText.textContent = "Thinking...";
+      // Update response box
+      responseBox.className = "response-box loading";
+      responseBox.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 10px;">
+          <span>Analyzing your farming question</span>
+          <div class="thinking-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      `;
       try {
         const res = await fetch("/chat", {
         });
         const data = await res.json();
+        responseBox.className = "response-box has-content";
+        responseBox.innerHTML = `
+          <div style="border-left: 4px solid #667eea; padding-left: 1rem;">
+            <strong style="color: #667eea; display: block; margin-bottom: 0.5rem;">🤖 Hal's Advice:</strong>
+            <div style="line-height: 1.6;">${data.response || data.error}</div>
+          </div>
+        `;
       } catch (err) {
+        responseBox.className = "response-box has-content";
+        responseBox.innerHTML = `
+          <div style="border-left: 4px solid #e74c3c; padding-left: 1rem;">
+            <strong style="color: #e74c3c; display: block; margin-bottom: 0.5rem;">⚠️ Connection Error:</strong>
+            <div style="color: #e74c3c;">Unable to connect to the server. Please check your internet connection and try again.</div>
+          </div>
+        `;
+      } finally {
+        // Reset button state
+        submitBtn.disabled = false;
+        spinner.style.display = "none";
+        buttonText.textContent = "Get Smart Advice";
+      }
+    });
+    // Auto-resize textarea
+    const textarea = document.getElementById("message");
+    textarea.addEventListener("input", function() {
+      this.style.height = "auto";
+      this.style.height = Math.min(this.scrollHeight, 200) + "px";
+    });
+    // Add some sample questions on click
+    const sampleQuestions = [
+      "How can I increase millet productivity in drought conditions?",
+      "What are the best organic fertilizers for jowar cultivation?",
+      "How to identify and control pest attacks in finger millet?",
+      "When is the optimal time to harvest pearl millet?",
+      "What soil preparation is needed for foxtail millet?"
+    ];
+    let questionIndex = 0;
+    textarea.addEventListener("focus", function() {
+      if (!this.value) {
+        this.placeholder = sampleQuestions[questionIndex % sampleQuestions.length];
+        questionIndex++;
       }
     });
   </script>
 </body>
+</html>