api4 / public /index.html
ngoctuanai's picture
Update public/index.html
dd561a8
raw
history blame
3.02 kB
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPENAI Reverse Proxy</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
// Function to generate the Reverse Proxy URL
function getExternalUrl(spaceId) {
try {
const [username, spacename] = spaceId.split("/");
return `https://${username}-${spacename.replace(/_/g, "-")}.hf.space/api/v1`;
} catch (e) {
return "";
}
}
// Get the Reverse Proxy URL and update the HTML element with id="reverseProxyUrl"
const spaceId = "ngoctuanai/openaiproxy";
const reverseProxyUrl = getExternalUrl(spaceId);
// Wait for the page to load before updating the HTML
window.addEventListener('DOMContentLoaded', function () {
const typed = new Typed('.typed', {
strings: ["Welcome to OPENAI Reverse Proxy"],
typeSpeed: 100,
showCursor: false,
onComplete: function () {
document.getElementById("reverseProxyUrl").textContent = reverseProxyUrl;
}
});
});
</script>
<style>
body {
font-family: 'Lato', sans-serif;
background-color: #f8f9fa;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
h1 {
font-size: 32px;
color: #007bff;
text-align: center;
margin-bottom: 10px;
}
p {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 20px;
}
.url {
font-weight: bold;
}
.url a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
.url a:hover {
color: #28a745;
}
</style>
</head>
<body>
<div class="container animate__animated animate__fadeIn">
<h1>
<span class="typed"></span>
</h1>
<p class="animate__animated animate__slideInLeft wow">This is your OpenAI Reverse Proxy URL:</p>
<p class="url text-center" id="reverseProxyUrl"></p>
</div>
</body>
</html>