Spaces:

RushiMane2003
/

User_Soil_Report_Analysis

Sleeping

App Files Files Community

RushiMane2003 commited on Feb 28, 2025

Commit

13dbb80

verified ·

1 Parent(s): 6cacd85

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +343 -0

templates/index.html CHANGED Viewed

	@@ -0,0 +1,343 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Soil Report Analysis & Recommendations Generator</title>
+  <!-- Include Chart.js library -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    :root {
+      --primary-color: #007BFF;
+      --primary-dark: #0056b3;
+      --secondary-color: #2c5282;
+      --bg-color: #f4f4f4;
+      --text-color: #333;
+      --white: #ffffff;
+      --error-bg: #f8d7da;
+      --error-text: #721c24;
+      --container-bg: #ffffff;
+      --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      /* Distinct section background colors */
+      --section-bg-overview: #e0f7fa;
+      --section-bg-composition: #ffe0b2;
+      --section-bg-nutrients: #c8e6c9;
+      --section-bg-ph: #f3e5f5;
+      --section-bg-recommendations: #d1c4e9;
+    }
+    /* Base Styles */
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: var(--bg-color);
+      margin: 0;
+      padding: 0;
+      color: var(--text-color);
+    }
+    .container {
+      max-width: 900px;
+      margin: 50px auto;
+      background: var(--container-bg);
+      padding: 30px;
+      border-radius: 10px;
+      box-shadow: var(--shadow);
+    }
+    /* Title and Header */
+    .main-title {
+      font-size: 2.5rem;
+      text-align: center;
+      margin-bottom: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--secondary-color);
+    }
+    .title-icon {
+      font-size: 2.5rem;
+      margin-right: 10px;
+    }
+    /* Upload Section */
+    .upload-section {
+      background: var(--white);
+      padding: 25px;
+      border-radius: 10px;
+      margin-bottom: 30px;
+      box-shadow: var(--shadow);
+    }
+    .upload-section h2 {
+      text-align: center;
+      margin-bottom: 20px;
+      color: var(--secondary-color);
+    }
+    .file-input-container {
+      border: 2px dashed #cbd5e1;
+      padding: 30px;
+      border-radius: 10px;
+      text-align: center;
+      transition: border-color 0.3s ease;
+      cursor: pointer;
+    }
+    .file-input-container:hover {
+      border-color: var(--primary-color);
+    }
+    /* Button Styles */
+    button,
+    .upload-button {
+      background-color: var(--primary-color);
+      color: var(--white);
+      padding: 12px 24px;
+      border: none;
+      border-radius: 5px;
+      font-size: 1rem;
+      cursor: pointer;
+      display: block;
+      width: 100%;
+      transition: background-color 0.3s ease;
+      margin-top: 20px;
+    }
+    .upload-button:hover {
+      background-color: var(--primary-dark);
+    }
+    /* Loading Spinner */
+    .loading {
+      text-align: center;
+      margin: 20px 0;
+    }
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid var(--primary-color);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 20px auto;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    /* Flash Messages */
+    .flash-message {
+      background-color: var(--error-bg);
+      color: var(--error-text);
+      padding: 10px 15px;
+      border-radius: 5px;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+    /* Markdown Content Styling */
+    .markdown-body {
+      background-color: var(--white);
+      padding: 30px;
+      border-radius: 8px;
+      border: 1px solid #e1e4e8;
+      margin-top: 20px;
+      line-height: 1.6;
+    }
+    /* Section Heading Styles with distinct colors */
+    .markdown-body h1 {
+      background-color: var(--section-bg-overview);
+      padding: 10px;
+      border-radius: 5px;
+    }
+    .markdown-body h2:nth-of-type(1) {
+      background-color: var(--section-bg-overview);
+      padding: 8px;
+      border-radius: 5px;
+    }
+    .markdown-body h2:nth-of-type(2) {
+      background-color: var(--section-bg-composition);
+      padding: 8px;
+      border-radius: 5px;
+    }
+    .markdown-body h2:nth-of-type(3) {
+      background-color: var(--section-bg-nutrients);
+      padding: 8px;
+      border-radius: 5px;
+    }
+    .markdown-body h2:nth-of-type(4) {
+      background-color: var(--section-bg-ph);
+      padding: 8px;
+      border-radius: 5px;
+    }
+    .markdown-body h2:nth-of-type(5) {
+      background-color: var(--section-bg-recommendations);
+      padding: 8px;
+      border-radius: 5px;
+    }
+    /* Ensure canvas fills the container */
+    #chartContainer canvas {
+      max-width: 100%;
+    }
+    /* Responsive Adjustments */
+    @media (max-width: 768px) {
+      .container {
+        margin: 20px;
+        padding: 20px;
+      }
+      .main-title {
+        font-size: 2rem;
+      }
+      .upload-button {
+        font-size: 0.9rem;
+        padding: 10px;
+      }
+      .file-input-container {
+        padding: 20px;
+      }
+    }
+    #chartContainer {
+      margin-top: 20px;
+      padding: 20px;
+      background-color: #f9f9f9;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      display: none; /* Initially hidden until chart code is executed */
+    }
+    #chartContainer canvas {
+      max-width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 class="main-title">
+      <span class="title-icon">🌱</span>
+      Soil Report Analysis & Recommendations Generator
+    </h1>
+    {% with messages = get_flashed_messages() %}
+      {% if messages %}
+        {% for message in messages %}
+          <div class="flash-message">{{ message }}</div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+    <div class="upload-section">
+        <h2>Upload Soil Reports</h2>
+        <form id="uploadForm">
+          <div class="file-input-container">
+            <input type="file" name="files" accept=".pdf,.jpg,.jpeg,.png" multiple required>
+            <p>Drag & drop your soil reports here or click to select</p>
+          </div>
+          <div class="mb-4">
+            <label for="language" class="form-label">Response Language</label>
+            <select class="form-control" id="language" name="language" required>
+                <option value="English">English</option>
+                <option value="Hindi">Hindi</option>
+                <option value="Bengali">Bengali</option>
+                <option value="Telugu">Telugu</option>
+                <option value="Marathi">Marathi</option>
+                <option value="Tamil">Tamil</option>
+                <option value="Gujarati">Gujarati</option>
+                <option value="Urdu">Urdu</option>
+                <option value="Kannada">Kannada</option>
+                <option value="Odia">Odia</option>
+                <option value="Malayalam">Malayalam</option>
+            </select>
+          </div>
+          <button type="submit" class="upload-button">Generate Soil Analysis & Recommendations</button>
+        </form>
+      </div>
+    <div class="loading" id="loading" style="display:none;">
+      <div class="loading-spinner"></div>
+      <p>Analyzing soil reports and generating analysis...</p>
+    </div>
+    <div id="summaryContainer" class="markdown-body" style="display: none;"></div>
+    <!-- Chart Container with a canvas element -->
+    <div id="chartContainer">
+      <canvas id="myChart"></canvas>
+    </div>
+  </div>
+ <script>
+    document.getElementById('uploadForm').addEventListener('submit', function(e) {
+      e.preventDefault();
+      const formData = new FormData(this);
+      const loading = document.getElementById('loading');
+      const summaryContainer = document.getElementById('summaryContainer');
+      const chartContainer = document.getElementById('chartContainer');
+      loading.style.display = 'block';
+      summaryContainer.style.display = 'none';
+      chartContainer.style.display = 'none';
+      fetch('/', { method: 'POST', body: formData })
+        .then(response => response.json())
+        .then(data => {
+          loading.style.display = 'none';
+          summaryContainer.style.display = 'block';
+          if (data.error) {
+            summaryContainer.innerHTML = `<div class="flash-message">${data.error}</div>`;
+          } else {
+            summaryContainer.innerHTML = data.html_summary;
+            if (data.chart_img) {
+              chartContainer.style.display = 'block';
+              chartContainer.innerHTML = `<img src="${data.chart_img}" alt="Nutrient Chart" style="max-width:100%;"/>`;
+            }
+          }
+        })
+        .catch(error => {
+          loading.style.display = 'none';
+          summaryContainer.style.display = 'block';
+          summaryContainer.innerHTML = `<div class="flash-message">Error: ${error.message}</div>`;
+        });
+    });
+    // Drag and drop functionality
+    const fileInput = document.querySelector('input[type="file"]');
+    const dropZone = document.querySelector('.file-input-container');
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropZone.addEventListener(eventName, preventDefaults, false);
+    });
+    function preventDefaults(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropZone.addEventListener(eventName, highlight, false);
+    });
+    ['dragleave', 'drop'].forEach(eventName => {
+      dropZone.addEventListener(eventName, unhighlight, false);
+    });
+    function highlight(e) { dropZone.style.borderColor = '#3b82f6'; }
+    function unhighlight(e) { dropZone.style.borderColor = '#cbd5e1'; }
+    dropZone.addEventListener('drop', handleDrop, false);
+    function handleDrop(e) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      fileInput.files = files;
+    }
+ </script>
+</body>
+</html>