Kadigas commited on
Commit
f1b6aff
·
1 Parent(s): 010ff02

feat: add model 2 -> YOLOv8 for Pothole

Browse files
Files changed (2) hide show
  1. .vscode/settings.json +1 -1
  2. templates/index.html +7 -28
.vscode/settings.json CHANGED
@@ -1,3 +1,3 @@
1
  {
2
- "liveServer.settings.port": 5501
3
  }
 
1
  {
2
+ "liveServer.settings.port": 5502
3
  }
templates/index.html CHANGED
@@ -8,7 +8,7 @@
8
  <title>Aplikasi Prediksi Biaya Asuransi</title>
9
  </head>
10
 
11
- <body>
12
  <div class="bg-black text-white flex flex-row justify-end py-1">
13
  <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>
14
  <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model2')">Model 2</button>
@@ -79,33 +79,8 @@
79
  </section>
80
  </div>
81
 
82
- <div id="Model2" class="Model bg-gradient-to-r from-green-400 to-green-700 text-gray-800">
83
- <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
84
- <section class="mt-8 flex-auto rounded-lg md:mt-0 md:ml-8">
85
- <div class="bg-white p-16 rounded-lg">
86
- <h1 class="text-3xl font-bold mb-8">Prediksi :</h1>
87
- <form action="https://alproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col">
88
- <label for="">
89
-
90
- </label>
91
- <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">
92
- 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">
93
- <line x1="5" y1="12" x2="19" y2="12"></line>
94
- <polyline points="12 5 19 12 12 19"></polyline>
95
- </svg>
96
- </button>
97
- </form>
98
- </div>
99
- </section>
100
- <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">
101
- <div class="bg-white p-16 rounded-lg">
102
- <h1 class="text-3xl font-bold mb-8"> Hasil Prediksi :</h1>
103
- </div>
104
- <div class="flex justify-around p-16 rounded-lg mt-8">
105
- <img class="h-24 md:h-28" src="https://elib.its.ac.id/conf/cyberdas/public/assets/img/img_navbar.svg" alt="logo-dts" />
106
- </div>
107
- </section>
108
- </section>
109
  </div>
110
 
111
  <style>
@@ -133,4 +108,8 @@
133
  evt.currentTarget.className += " active";
134
  }
135
  </script>
 
 
 
 
136
  </html>
 
8
  <title>Aplikasi Prediksi Biaya Asuransi</title>
9
  </head>
10
 
11
+ <body class="bg-gray-900">
12
  <div class="bg-black text-white flex flex-row justify-end py-1">
13
  <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>
14
  <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model2')">Model 2</button>
 
79
  </section>
80
  </div>
81
 
82
+ <div id="Model2" class="Model">
83
+ <gradio-app src="https://alproits-yolov8-pothole.hf.space"></gradio-app>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  </div>
85
 
86
  <style>
 
108
  evt.currentTarget.className += " active";
109
  }
110
  </script>
111
+ <script
112
+ type="module"
113
+ src="https://gradio.s3-us-west-2.amazonaws.com/3.45.2/gradio.js"
114
+ ></script>
115
  </html>