api4 / public /index.html
ngoctuanai's picture
Update public/index.html
315eaf4
<!-- 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/openaireverseproxy";
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;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 30px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
}
h1 {
font-size: 2.5em;
color: #007bff;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
color: #555;
margin-bottom: 30px;
}
.url {
font-weight: bold;
font-size: 1.1em;
color: #007bff;
}
.url a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
.url a:hover {
color: #28a745;
}
.my-link {
display: inline-block;
margin-top: 20px;
text-decoration: none;
padding: 12px 24px;
background-color: #3498db;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}
.my-link:hover {
background-color: #007bff;
}
</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" id="reverseProxyUrl"></p>
<!-- PayPal Subscription Link -->
<a class="my-link" href="https://paypal.me/ngoctuanai" target="_blank">Everyone contributes so this project can be free forever</a>
</div>
</body>
</html>