Spaces:

binoubinks
/

ADS_front

Sleeping

App Files Files Community

albin commited on Nov 13, 2024

Commit

b790a6c

1 Parent(s): afa5871

add front files and connect to the back

Browse files

Files changed (5) hide show

Dockerfile +20 -0
__pycache__/main.cpython-310.pyc +0 -0
main.cpython-310.pyc +0 -0
main.py +40 -0
templates/index.html +141 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,20 @@

+FROM python:3.9
+WORKDIR /code
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+ PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+COPY --chown=user . $HOME/app
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

__pycache__/main.cpython-310.pyc ADDED Viewed

Binary file (1.27 kB). View file

main.cpython-310.pyc ADDED Viewed

Binary file (1.27 kB). View file

main.py ADDED Viewed

	@@ -0,0 +1,40 @@

+#!/usr/bin/env python
+# encoding: utf-8
+from fastapi import FastAPI, Form, Depends, Request
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+import pickle
+import json
+app = FastAPI()
+# Menentukan direktori templates
+templates = Jinja2Templates(directory="templates")
+class Msg(BaseModel):
+    msg: str
+class Req(BaseModel):
+    age: int
+    sex: int
+    smoker: int
+    bmi: float
+    children: int
+    region: int
+@app.get("/welcomeMessage")
+async def welcome():
+    return {"message": "Hello World. Welcome to FastAPI!"}
+@app.get("/")
+async def root(request: Request):
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "insurance_cost": 0,
+        }
+    )

templates/index.html ADDED Viewed

	@@ -0,0 +1,141 @@

+<!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>
+    <div class="bg-black text-white flex flex-row justify-end py-1">
+      <button class="mx-8 font-bold tablink active rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model1')">Model 1</button>
+      <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model2')">Model 2</button>
+      <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model3')">Model 3</button>
+    </div>
+    <div id="Model1" class="Model bg-gradient-to-r from-purple-400 to-purple-700 text-gray-800">
+      <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
+        <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>
+        <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 estimate 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>
+    <style>
+      .active {
+        background-color: rgb(124 58 237);
+      }
+      #Model2 {
+        display: none;
+      }
+    </style>
+  </body>
+  <script>
+    function openModel(evt, modelName) {
+      var i, x, tablinks;
+      x = document.getElementsByClassName("Model");
+      for (i = 0; i < x.length; i++) {
+        x[i].style.display = "none";
+      }
+      tablinks = document.getElementsByClassName("tablink");
+      for (i = 0; i < x.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+      }
+      document.getElementById(modelName).style.display = "block";
+      evt.currentTarget.className += " active";
+    }
+  </script>
+  <script>
+    $(document).ready(function () {
+        $("#upload_form").submit(function (event) {
+            event.preventDefault();  // Prevent the default form submission
+            // Get the form data
+            var formData = new FormData(this);
+            // Make the Ajax request
+            $.ajax({
+                type: "POST",
+                url: "https://binoubinks-ads-back.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>
+</body>
+</html>