Spaces:
Running
Running
File size: 4,101 Bytes
fd7abdd f546bbc fd7abdd f546bbc fd7abdd f546bbc fd7abdd | 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Analysis Models</title>
<style>
body {
font-family: "Georgia", serif;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
background-color: #f9f7f4;
color: #333;
}
.header {
text-align: center;
margin-bottom: 40px;
border-bottom: 2px solid #8b7d6b;
padding-bottom: 20px;
}
h1 {
font-size: 36px;
color: #5c4b3e;
font-weight: normal;
letter-spacing: 1px;
}
.model-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.model-card {
background-color: #fff;
border: 1px solid #d3c7b6;
border-radius: 5px;
padding: 25px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.model-card:hover {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.model-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, #8b7d6b, #d3c7b6);
}
.icon {
font-size: 36px;
display: block;
margin-bottom: 15px;
text-align: center;
}
h2 {
color: #5c4b3e;
margin: 0 0 20px 0;
font-size: 22px;
text-align: center;
font-weight: normal;
}
.btn {
display: inline-block;
background-color: #8b7d6b;
color: white;
border: none;
border-radius: 3px;
padding: 12px 0;
cursor: pointer;
font-family: "Georgia", serif;
font-size: 16px;
text-decoration: none;
text-align: center;
width: 100%;
transition: background-color 0.3s;
margin-top: 10px;
}
.btn:hover {
background-color: #5c4b3e;
}
.time-series {
background-color: #f4f1e9;
}
</style>
</head>
<body>
<div class="header">
<h1>API Analysis Models</h1>
</div>
<div class="model-container">
<!-- Regression Card -->
<div class="model-card">
<span class="icon">π</span>
<h2>Response Time</h2>
<a href="https://pranit144-detect1.hf.space" class="btn">Select</a>
</div>
<!-- Anomaly Detection Card -->
<div class="model-card">
<span class="icon">π₯</span>
<h2>Anomaly Detection</h2>
<a href="https://pranit144-detect2.hf.space" class="btn">Select</a>
</div>
<!-- Binary Classification Card -->
<div class="model-card">
<span class="icon">β
</span>
<h2>Error Prediction</h2>
<a href="https://pranit144-detect3.hf.space" class="btn">Select</a>
</div>
<!-- Multi-Class Classification Card -->
<div class="model-card">
<span class="icon">π¦</span>
<h2>Status Code</h2>
<a href="https://pranit144-detect5.hf.space" class="btn">Select</a>
</div>
<!-- Time Series Card -->
<div class="model-card time-series">
<span class="icon">π</span>
<h2>Time Series</h2>
<a href="https://pranit144-forecast1.hf.space" class="btn">Select</a>
</div>
</div>
</body>
</html> |