Spaces:

Rakib023
/

fruit_predict

Sleeping

App Files Files Community

Rakib023 commited on 27 days ago

Commit

5488ae2

verified ·

1 Parent(s): 1950a3e

Create index.html

Browse files

Files changed (1) hide show

index.html +317 -0

index.html ADDED Viewed

	@@ -0,0 +1,317 @@

+<!DOCTYPE html>
+<html lang="bn">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fruits Prediction using Machine Learning</title>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Noto Sans Bengali', 'Poppins', sans-serif;
+      background: #ffffff;
+      margin: 0;
+      padding: 20px;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
+    }
+    .container {
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 20px;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+      padding: 30px;
+      max-width: 850px;
+      width: 100%;
+      animation: fadeIn 1s ease-in-out;
+      border: 1px solid #e0e0e0;
+    }
+    h1 {
+      color: #ff6f61;
+      font-size: 2.5em;
+      text-align: center;
+      margin-bottom: 25px;
+      font-family: 'Poppins', sans-serif;
+      font-weight: 600;
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    h2 {
+      color: #6b7280;
+      font-size: 1.7em;
+      margin-top: 30px;
+      text-align: center;
+      font-family: 'Poppins', sans-serif;
+      font-weight: 400;
+    }
+    .upload-section {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      margin-bottom: 25px;
+    }
+    input[type="file"] {
+      padding: 12px;
+      border: 2px dashed #a3bffa;
+      border-radius: 10px;
+      background: #f8fafc;
+      cursor: pointer;
+      transition: border-color 0.3s, background 0.3s;
+    }
+    input[type="file"]:hover {
+      border-color: #7f9cf5;
+      background: #eef2ff;
+    }
+    button {
+      padding: 12px 30px;
+      background: linear-gradient(45deg, #ff6f61, #feca57);
+      color: white;
+      border: none;
+      border-radius: 30px;
+      cursor: pointer;
+      font-size: 1.1em;
+      font-family: 'Poppins', sans-serif;
+      transition: transform 0.3s, box-shadow 0.3s;
+      box-shadow: 0 4px 10px rgba(255, 111, 97, 0.3);
+    }
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 15px rgba(255, 111, 97, 0.5);
+    }
+    .preview {
+      text-align: center;
+      margin: 20px 0;
+      font-size: 1.3em;
+      color: #4a5568;
+      font-weight: bold;
+      animation: slideIn 0.5s ease-in-out;
+      background: #fefcbf;
+      padding: 10px;
+      border-radius: 10px;
+    }
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      margin-top: 20px;
+      background: #ffffff;
+      border-radius: 15px;
+      overflow: hidden;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    }
+    th, td {
+      padding: 15px;
+      text-align: left;
+      border-bottom: 1px solid #e2e8f0;
+    }
+    th {
+      background: linear-gradient(to right, #a3bffa, #93c5fd);
+      color: #1a202c;
+      font-weight: 600;
+      font-family: 'Poppins', sans-serif;
+    }
+    td {
+      color: #4a5568;
+      font-size: 1em;
+    }
+    tr:nth-child(even) {
+      background: #f7fafc;
+    }
+    tr:hover {
+      background: #edf2f7;
+      transition: background 0.3s;
+    }
+    ul {
+      margin: 0;
+      padding-left: 20px;
+      color: #e53e3e;
+    }
+    li {
+      margin: 8px 0;
+      font-size: 0.95em;
+    }
+    .diabetes-section {
+      margin-top: 30px;
+    }
+    .diabetes-table th {
+      background: linear-gradient(to right, #feb2b2, #fc8181);
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes slideIn {
+      from { transform: translateY(15px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    @media (max-width: 600px) {
+      .container {
+        padding: 20px;
+      }
+      h1 {
+        font-size: 2em;
+      }
+      h2 {
+        font-size: 1.4em;
+      }
+      button {
+        padding: 10px 20px;
+        font-size: 1em;
+      }
+      .upload-section {
+        flex-direction: column;
+        gap: 15px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🍎 Fruits Prediction using Machine Learning</h1>
+    <div class="upload-section">
+      <input type="file" id="fileInput" accept="image/*">
+      <button onclick="uploadImage()">আপলোড ও চিনুন</button>
+    </div>
+    <div class="preview" id="preview"></div>
+    <h2>🍇 ফলের পুষ্টিগুণ</h2>
+    <table id="nutritionTable">
+      <tr>
+        <th>ভিটামিন</th>
+        <th>খনিজ</th>
+        <th>কার্বোহাইড্রেট</th>
+        <th>প্রোটিন</th>
+        <th>অ্যামিনো অ্যাসিড</th>
+      </tr>
+    </table>
+    <h2>🩺 স্বাস্থ্য উপকারিতা</h2>
+    <table id="benefitsTable">
+      <tr>
+        <th>প্রতিদিনের গ্রহণ</th>
+        <th>ডায়াবেটিস রোগীদের জন্য</th>
+        <th>উপকারিতা</th>
+      </tr>
+    </table>
+    <h2 class="diabetes-section">🩺 ডায়াবেটিস রোগীদের জন্য তথ্য</h2>
+    <table id="diabetesTable" class="diabetes-table">
+      <tr>
+        <th>গ্লাইসেমিক ইনডেক্স</th>
+        <th>পরিমাণ</th>
+        <th>সেরা সময়</th>
+        <th>সতর্কতা</th>
+      </tr>
+    </table>
+  </div>
+  <script>
+    async function uploadImage() {
+      const fileInput = document.getElementById('fileInput');
+      const file = fileInput.files[0];
+      if (!file) {
+        alert("দয়া করে একটি ছবি নির্বাচন করুন।");
+        return;
+      }
+      const formData = new FormData();
+      formData.append("file", file);
+      try {
+        const response = await fetch("/predict", {
+          method: "POST",
+          body: formData
+        });
+        if (!response.ok) {
+          throw new Error("চিত্র আপলোড ব্যর্থ হয়েছে।");
+        }
+        const result = await response.json();
+        const preview = document.getElementById("preview");
+        preview.innerHTML = `<p><strong>চিহ্নিত ফল:</strong> ${result.predicted_class}</p>`;
+        // Nutrition Table
+        const nutrition = result.nutrition;
+        const nutTable = document.getElementById("nutritionTable");
+        nutTable.innerHTML = `
+          <tr>
+            <th>ভিটামিন</th>
+            <th>খনিজ</th>
+            <th>কার্বোহাইড্রেট</th>
+            <th>প্রোটিন</th>
+            <th>অ্যামিনো অ্যাসিড</th>
+          </tr>
+          <tr>
+            <td>${nutrition.vitamin}</td>
+            <td>${nutrition.mineral}</td>
+            <td>${nutrition.carbohydrate}</td>
+            <td>${nutrition.protein}</td>
+            <td>${nutrition.amino_acid}</td>
+          </tr>
+        `;
+        // Benefits Table
+        const health = result.health;
+        const benefitTable = document.getElementById("benefitsTable");
+        benefitTable.innerHTML = `
+          <tr>
+            <th>প্রতিদিনের গ্রহণ</th>
+            <th>ডায়াবেটিস রোগীদের জন্য</th>
+            <th>উপকারিতা</th>
+          </tr>
+          <tr>
+            <td>${health.intake}</td>
+            <td>${health.diabetic}</td>
+            <td><ul>${health.benefits.map(b => `<li>${b}</li>`).join('')}</ul></td>
+          </tr>
+        `;
+        // Diabetes Table
+        const diabetes = result.diabetes;
+        const diabetesTable = document.getElementById("diabetesTable");
+        diabetesTable.innerHTML = `
+          <tr>
+            <th>গ্লাইসেমিক ইনডেক্স</th>
+            <th>পরিমাণ</th>
+            <th>সেরা সময়</th>
+            <th>সতর্কতা</th>
+          </tr>
+          <tr>
+            <td>${diabetes.glycemic_index}</td>
+            <td>${diabetes.portion_size}</td>
+            <td>${diabetes.best_time}</td>
+            <td>${diabetes.precautions}</td>
+          </tr>
+        `;
+      } catch (error) {
+        alert(error.message || "একটি ত্রুটি ঘটেছে। আবার চেষ্টা করুন।");
+      }
+    }
+  </script>
+</body>
+</html>