Spaces:

HilmiZr
/

PDST-Regression-FE-v1

Sleeping

App Files Files Community

HilmiZr commited on Nov 7, 2024

Commit

e5ae16b

1 Parent(s): 6334909

added: base files

Browse files

Files changed (4) hide show

Dockerfile +16 -0
app.py +17 -0
requirements.txt +7 -0
templates/index.html +128 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,16 @@

+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+FROM python:3.9
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py ADDED Viewed

	@@ -0,0 +1,17 @@

+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+app = FastAPI()
+# Define the directory for templates
+templates = Jinja2Templates(directory="templates")
+@app.get("/")
+async def root(request: Request):
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "insurance_cost": 0,
+        }
+    )

requirements.txt ADDED Viewed

	@@ -0,0 +1,7 @@

+fastapi
+pydantic
+python-multipart
+uvicorn
+starlette
+scikit-learn
+jinja2

templates/index.html ADDED Viewed

	@@ -0,0 +1,128 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <title>Insurance Cost Prediction Application</title>
+  </head>
+  <body>
+    <!-- Navigation Bar -->
+    <div class="bg-black text-white flex flex-row justify-end py-1">
+      <button class="mx-8 font-bold rounded-2xl p-2 hover:bg-purple-500 duration-150">Model 1</button>
+    </div>
+    <!-- Model 1 Section -->
+    <div id="Model1" class="Model bg-gradient-to-r from-purple-400 to-purple-700 text-gray-800 block">
+      <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
+        <!-- Prediction Form -->
+        <main class="bg-white p-16 rounded-lg">
+          <h1 class="text-3xl font-bold mb-8">Predict Your Insurance Cost:</h1>
+          <form enctype="multipart/form-data" class="flex flex-col" id="upload_form">
+            <label for="age" class="mb-2">Age</label>
+            <input type="text" name="age" placeholder="Age" required="required" class="p-4 bg-gray-100 rounded-md" />
+            <label for="sex" class="mt-4 mb-2">Gender:</label>
+            <select name="sex" id="sex" class="p-4 bg-gray-100 rounded-md">
+              <option value="1">Male</option>
+              <option value="0">Female</option>
+            </select>
+            <label for="smoker" class="mt-4 mb-2">Smoker:</label>
+            <select name="smoker" id="smoker" class="p-4 bg-gray-100 rounded-md">
+              <option value="1">Yes</option>
+              <option value="0">No</option>
+            </select>
+            <label for="bmi" class="mt-4 mb-2">BMI:</label>
+            <input type="text" name="bmi" placeholder="BMI" required="required" class="p-4 bg-gray-100 rounded-md" />
+            <label for="children" class="mt-4 mb-2">Children:</label>
+            <input type="text" name="children" placeholder="Children" required="required" class="p-4 bg-gray-100 rounded-md" />
+            <label for="region" class="mt-4 mb-2">Region:</label>
+            <select name="region" id="region" class="p-4 bg-gray-100 rounded-md">
+              <option value="3">Southwest</option>
+              <option value="2">Southeast</option>
+              <option value="1">Northwest</option>
+              <option value="0">Northeast</option>
+            </select>
+            <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-purple-400 to-purple-700 text-white rounded-md">
+              PREDICT NOW
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right ml-4">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+              </svg>
+            </button>
+          </form>
+        </main>
+        <!-- Response Display Section -->
+        <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">
+          <div class="bg-white p-16 rounded-lg">
+            <h1 class="text-2xl mb-8">Your estimated insurance cost:</h1>
+            <h2 class="text-5xl font-bold">$<span id="insurance_cost">0.00 USD</span></h2>
+            <div class="mt-8">
+              <p id="respAge"></p>
+              <p id="respSex"></p>
+              <p id="respSmoker"></p>
+              <p id="respBmi"></p>
+              <p id="respChildren"></p>
+              <p id="respRegion"></p>
+            </div>
+          </div>
+          <div class="flex justify-around p-16 rounded-lg mt-8">
+            <img class="h-24 md:h-28" src="https://elib.its.ac.id/conf/cyberdas/public/assets/img/img_navbar.svg" alt="logo-dts" />
+          </div>
+        </section>
+      </section>
+    </div>
+    <!-- Styling -->
+    <style>
+      .active {
+        background-color: rgb(124 58 237);
+      }
+    </style>
+  </body>
+  <!-- JavaScript for Form Submission and AJAX -->
+  <script>
+    $(document).ready(function () {
+      $("#upload_form").submit(function (event) {
+        event.preventDefault();
+        // Get the form data
+        var formData = new FormData(this);
+        // Make the Ajax request
+        $.ajax({
+          type: "POST",
+          url: "https://hilmizr-pdst-regression-be-v1.hf.space/predict",
+          data: formData,
+          processData: false,
+          contentType: false,
+          success: function (response) {
+            // Handle the response data
+            $('#respAge').html("<strong>Age:</strong> " + response.age + " tahun");
+            $('#respSex').html("<strong>Gender:</strong> " + response.sex);
+            $('#respSmoker').html("<strong>Smoker:</strong> " + response.smoker);
+            $('#respBmi').html("<strong>BMI:</strong> " + response.bmi);
+            $('#respChildren').html("<strong>Children:</strong> " + response.children);
+            $('#respRegion').html("<strong>Region:</strong> " + response.region);
+            $('#insurance_cost').html(parseFloat(response.insurance_cost).toFixed(2) + ' USD');
+            console.log(response);
+          },
+          error: function (error) {
+            console.error("Error:", error);
+          }
+        });
+      });
+    });
+  </script>
+</html>