Spaces:

LabAlproITS
/

CyberDAS-FE

Runtime error

App Files Files Community

Kadigas commited on Sep 30, 2023

Commit

6411ffa

1 Parent(s): 6db84c9

initial commit

Browse files

Files changed (4) hide show

Dockerfile +20 -0
main.py +44 -0
requirements.txt +18 -0
templates/index.html +136 -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"]

main.py ADDED Viewed

	@@ -0,0 +1,44 @@

+#!/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")
+model_file = open('insurance_model.pkl', 'rb')
+model = pickle.load(model_file, encoding='bytes')
+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,
+        }
+    )

requirements.txt ADDED Viewed

	@@ -0,0 +1,18 @@

+anyio>=3.7.1
+click==8.1.7
+fastapi==0.103.2
+h11==0.14.0
+httptools==0.6.0
+idna==3.4
+pydantic==2.4.2
+python-dotenv==1.0.0
+python-multipart==0.0.6
+PyYAML==6.0.1
+sniffio==1.3.0
+starlette>=0.27.0
+typing_extensions==4.8.0
+uvicorn==0.23.2
+watchfiles==0.20.0
+websockets==11.0.3
+scikit-learn
+jinja2

templates/index.html ADDED Viewed

	@@ -0,0 +1,136 @@

+<!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" />
+    <title>Aplikasi Prediksi Biaya Asuransi</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>
+    </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">Prediksi Biaya Asuransi Anda:</h1>
+          <form action="https://alproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col">
+            <label for="age" class="mb-2">Usia</label>
+            <input type="text" name="age" placeholder="Usia" required="required" class="p-4 bg-gray-100 rounded-md" />
+            <label for="sex" class="mt-4 mb-2">Jenis Kelamin:</label>
+            <select name="sex" id="sex" class="p-4 bg-gray-100 rounded-md">
+              <option value="1">Laki-laki</option>
+              <option value="0">Perempuan</option>
+            </select>
+            <label for="smoker" class="mt-4 mb-2">Perokok:</label>
+            <select name="smoker" id="smoker" class="p-4 bg-gray-100 rounded-md">
+              <option value="1">Ya</option>
+              <option value="0">Tidak</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">Jumlah Anak:</label>
+            <input type="text" name="children" placeholder="Jumlah Anak" 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">
+              PREDIKSI SEKARANG<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">Estimasi biaya asuransi Anda adalah</h1>
+            <h2 class="text-5xl font-bold">${{ '{:,.2f}'.format(insurance_cost) }}</h2>
+            {% if insurance_cost != 0 %}
+              <div class="mt-8">
+                <p><strong>Usia:</strong> {{ age }} tahun</p>
+                <p><strong>Jenis kelamin:</strong> {{ sex }}</p>
+                <p><strong>Status perokok:</strong> {{ smoker }}</p>
+                <p><strong>BMI:</strong> {{ bmi }}</p>
+                <p><strong>Jumlah Anak:</strong> {{ children }}</p>
+                <p><strong>Region:</strong> {{ region }}</p>
+              </div>
+            {% endif %}
+          </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>
+    <div id="Model2" class="Model bg-gradient-to-r from-green-400 to-green-700 text-gray-800">
+      <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
+        <section class="mt-8 flex-auto rounded-lg md:mt-0 md:ml-8">
+          <div class="bg-white p-16 rounded-lg">
+            <h1 class="text-3xl font-bold mb-8">Prediksi :</h1>
+            <form action="https://alproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col">
+              <label for="">
+              </label>
+              <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-green-400 to-green-700 text-white rounded-md">
+                PREDIKSI SEKARANG<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>
+          </div>
+        </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-3xl font-bold mb-8"> Hasil Prediksi :</h1>
+          </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>
+</html>