html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>tensorflow test</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
<h1>Enhanced Number Predictor</h1>
<div id="tensorflowStatus" class="status">Loading TensorFlow.js...</div>
<div class="container">
<h2>Even or Odd Number Classifier</h2>
<p>This AI will learn to predict if a number is even or odd!</p>
<div>
<button id="trainButton">Train Model</button>
<span id="trainingStatus" class="status"></span>
<div class="progress-bar" id="progressBar">
<div class="progress" id="progress"></div>
</div>
</div>
<div style="margin-top: 20px;">
<label for="testNumber">Test a number: </label>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Handlee&family=Noto+Serif+Hentaigana:wght@200..900&family=Noto+Serif+JP:wght@200..900&family=Pixelify+Sans:wght@400..700&family=Zen+Kurenaido&display=swap');
* {
font-family: Edu Au VIC WA NT Pre;
-webkit-tap-highlight-color: transparent;
}
body {
max-width: 800px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(
45deg,
#FF3CAC,
#40DC94,
#784BA0,
#FFB347
);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite, shimmer 3s ease infinite alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
js
js
1
BROWSER
Console
Run