const predictionForm = document.getElementById("predictionForm");
const result = document.getElementById("result");
const amount = document.querySelectorAll("span");
let welcomeName = document.getElementById("name");
const prophesyBtn = document.getElementById("prophesyCost");
import * as tf from '@tensorflow/tfjs';
predictionForm.addEventListener("submit", (event) => {
resultVisibility();
handleFormSubmit(event);
});
//display the name of the user
let currName = "setah";
welcomeName.innerText = currName;
//display the amount
currAmount = "10,459";
amount.forEach((el) => (el.innerText = currAmount));
// the prediction result visibility
function resultVisibility() {
result.style.display = "flex";
prophesyBtn.style.display = "none";
}
function handleFormSubmit(event) {
event.preventDefault(); // Prevent default form submission
// Access form data using FormData object
const formData = new FormData(event.target);
for (const [key, value] of formData?.entries()) {
console.log(`${key}: ${value}`);
}
//Prediction capture
async function loadModel() {
const model = await tf.loadLayersModel('C:\Users\HUAWEI\OneDrive\Desktop\Medical-Insurance-main\Medical-Insurance-main\model\model.json'); // Replace with path
return model;
}
async function predictCost(children, age, sex, bmi,region) {
// Preprocess data
const data = tf.tensor([children,age, sex, bmi,region]); // Assuming numerical inputs
const prediction = model.predict(data);
const cost = prediction.dataSync()[0]; // Extract the predicted cost
document.getElementById('prophesy_cost').textContent = `prophesy Cost: $${cost.toFixed(2)}`;
return cost;
}
//display the name of the user
let currName = "setah";
welcomeName.innerText = currName;
//display the amount
currAmount = "10,459";
amount.forEach((el) => (el.innerText = currAmount));
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="#" />
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<header>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
<a href="./contact.html">Contact</a>
<a class="active">Start Prediction</a>
</nav>
<a href="/index.html">
<img src="/images/untitledh-removebg-preview-2.png" alt="" />
</a>
</header>
<div>
<h2 class="welcome">
Welcome
<p id="name"></p>
</h2>
<div class="prediction">
<form id="predictionForm">
<div>
<div>
<label class="red" for="age">Age</label>
<input required type="date" id="age" name="age" />
</div>
<div>
<label class="red" for="children">Children</label>
<input required id="children" type="number" />
</div>
</div>
<div>
<div>
<label class="red" for="Bmi">Bmi</label>
<input required type="number" id="Bmi" name="Bmi" />
</div>
<div>
<label class="red" for="region">Region</label>
<select required name="region" id="region">
<option disabled selected value="">Select your region</option>
<option value="1:Southwest">1:Southwest</option>
<option value="2:Southeast">2:Southeast</option>
<option value="3:Northwest">3:Northwest</option>
<option value="4:Northeast">4:Northeast</option>
</select>
</div>
</div>
<div class="radio">
<div>
<label class="red">Smoker</label>
<div>
<div class="smokerOption">
<input
type="radio"
id="smokerYes"
name="smoker"
value="1:yes"
/>
<label for="smokerYes">Yes</label><br />
</div>
<div class="smokerOption">
<input
required
type="radio"
id="smokerNo"
name="smoker"
value="0:no"
/>
<label for="smokerNo">No</label><br />
</div>
</div>
</div>
<div>
<label class="red">Sex</label>
<div>
<div class="sexOption">
<input type="radio" id="female" name="sex" value="1: Female" />
<label for="famale">female</label><br />
</div>
<div class="sexOption">
<input
required
type="radio"
id="male"
name="sex"
value="0: Male"
/>
<label for="male">male</label><br />
</div>
</div>
</div>
</div>
<button id="prophesyCost" type="submit">Prophesy</button>
<br>
<span id="prophesy_cost"></span>
</form>
<section id="result" class="result"> /* popup class */
<hr />
<p>Your expected insurance amount</p>
<div class="amount">
<img src="/images/green cir.svg" alt="" />
<h2><span>0</span> SAR</h2>
</div>
<div>
<p>Total Paid</p>
<p class="num"><span></span> SAR</p>
</div>
<a href="/index.html">
<button class="small">Home</button>
</a>
</section>
</div>
</div>
</body>
<script src="./prediction.js"></script>
</html>I built my ML in Python, and I need to integrate it into my website, "HTML, CSS, and JS.", I use @tensorflow.tfjs in my prediction. Js page, and I added the path of the ML file, but it is not working. I tried several ways, but all of them are not working. Anyone can help me, please! My website is a prediction of medical insurance costs. I want help. How can I integrate them?