mirror of
https://github.com/informaticker/elia-li-website.git
synced 2024-11-24 02:31:59 +01:00
remove generative ml elements
This commit is contained in:
elijah
parent
e77c5c2c42
commit
b58856db6c
104
assets/api.js
104
assets/api.js
@ -1,104 +0,0 @@
|
||||
document.addEventListener('contextmenu', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
async function fetchTemperature() {
|
||||
const response = await fetch('https://language.apis.zhr1.infra.elia.network/v2/infra/temperature');
|
||||
return response.text();
|
||||
}
|
||||
async function fetchAndDisplay() {
|
||||
const responseDiv = document.querySelector('.response');
|
||||
const statsDiv = document.querySelector('.stats');
|
||||
let buffer = "";
|
||||
let charCount = 0;
|
||||
let startTime = performance.now();
|
||||
let initialText = responseDiv.textContent;
|
||||
const eraseDelay = 100;
|
||||
const printDelay = 50;
|
||||
const statsEraseDelay = 15;
|
||||
const statsPrintDelay = 30;
|
||||
let lastTemperature = "...";
|
||||
let lastTemperatureUpdateTime = 0;
|
||||
const response = await fetch('https://language.apis.zhr1.infra.elia.network/v2/text/generate');
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
while (initialText.length > 0) {
|
||||
initialText = initialText.slice(0, -1);
|
||||
responseDiv.textContent = initialText;
|
||||
await new Promise(resolve => setTimeout(resolve, eraseDelay));
|
||||
}
|
||||
async function updateStatsAndTemperature() {
|
||||
statsDiv.style.display = 'block';
|
||||
let currentTime = (performance.now() - startTime) / 1000;
|
||||
let charsPerSecond = charCount / currentTime;
|
||||
if (currentTime - lastTemperatureUpdateTime >= 3) {
|
||||
try {
|
||||
lastTemperature = await fetchTemperature();
|
||||
lastTemperatureUpdateTime = currentTime;
|
||||
} catch (error) {
|
||||
lastTemperature = "...";
|
||||
}
|
||||
}
|
||||
statsDiv.textContent = `${charsPerSecond.toFixed(1)} chars/s, ${charCount} chars, ${currentTime.toFixed(1)}s, Temp: ${lastTemperature}°C`;
|
||||
}
|
||||
async function appendTextSmoothly(textPart) {
|
||||
buffer += textPart;
|
||||
while (buffer.length > 0) {
|
||||
let pos = buffer.indexOf('**');
|
||||
if (pos === 0) {
|
||||
let endPos = buffer.indexOf('**', 2);
|
||||
if (endPos !== -1) {
|
||||
responseDiv.innerHTML += '<b>' + buffer.substring(2, endPos) + '</b>';
|
||||
buffer = buffer.slice(endPos + 2);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
let nextPos = pos !== -1 ? pos : buffer.length;
|
||||
for (let i = 0; i < nextPos; i++) {
|
||||
responseDiv.innerHTML += buffer[i];
|
||||
await new Promise(resolve => setTimeout(resolve, printDelay));
|
||||
charCount++;
|
||||
await updateStatsAndTemperature();
|
||||
}
|
||||
buffer = buffer.slice(nextPos);
|
||||
}
|
||||
}
|
||||
}
|
||||
while (true) {
|
||||
const { value, done } = await reader.read();
|
||||
if (done) {
|
||||
if (buffer) {
|
||||
responseDiv.innerHTML += buffer;
|
||||
}
|
||||
break;
|
||||
}
|
||||
const text = decoder.decode(value, { stream: true });
|
||||
await appendTextSmoothly(text);
|
||||
}
|
||||
let statsText = statsDiv.textContent;
|
||||
while (statsText.length > 0) {
|
||||
statsText = statsText.slice(0, -1);
|
||||
statsDiv.textContent = statsText;
|
||||
await new Promise(resolve => setTimeout(resolve, statsEraseDelay));
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
const message = '// credit to hartnett media \\\\';
|
||||
let messageIndex = 0;
|
||||
while (messageIndex < message.length) {
|
||||
statsDiv.textContent += message[messageIndex];
|
||||
messageIndex++;
|
||||
await new Promise(resolve => setTimeout(resolve, statsPrintDelay));
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', fetchAndDisplay);
|
||||
console.log(` ___
|
||||
／イ フ
|
||||
| _ _|
|
||||
/ ミ__xノ
|
||||
/ |
|
||||
/ ヽ ﾉ
|
||||
│ | | |
|
||||
／￣| | | |
|
||||
| (￣ヽ_ヽ_)_)
|
||||
＼二つ`);
|
||||
console.log("hello");
|
||||
190
assets/style.css
190
assets/style.css
@ -1,140 +1,122 @@
|
||||
@font-face {
|
||||
font-family: 'workbench';
|
||||
src: url('../assets/font.woff2') format('woff2');
|
||||
font-family: "workbench";
|
||||
src: url("../assets/font.woff2") format("woff2");
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'workbench', sans-serif;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "workbench", sans-serif;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
#background-video {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 101%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 101%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: none;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
background: none;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
position: relative; /* Added this line */
|
||||
z-index: 1; /* Added this line */
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
color: #db7bdb;
|
||||
text-shadow: 0 0 10px #db7bdb;
|
||||
font-size: 1.5rem;
|
||||
color: #db7bdb;
|
||||
text-shadow: 0 0 10px #db7bdb;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 1.2rem;
|
||||
color: #db7bdb;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
text-shadow: 0 0 3px #db7bdb;
|
||||
pointer-events: initial;
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.2rem;
|
||||
color: #db7bdb;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
text-shadow: 0 0 3px #db7bdb;
|
||||
pointer-events: initial;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #d6afd6;
|
||||
color: #d6afd6;
|
||||
}
|
||||
|
||||
.response {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
color: #783F8E;
|
||||
text-shadow: 0 0 10px #783F8E;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.response b {
|
||||
text-shadow:
|
||||
2px 2px 30px #9847b8,
|
||||
-2px -2px 30px #9847b8;
|
||||
color: #7f5191;
|
||||
}
|
||||
|
||||
.stats {
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1rem;
|
||||
color: rgba(128, 128, 128, 0.5);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
animation: fadeIn 1.5s;
|
||||
bottom: 1%;
|
||||
.credits {
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1rem;
|
||||
color: rgba(128, 128, 128, 0.5);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
animation: fadeIn 1.5s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.nav-links {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.response {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.nav-links li {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
138
index.html
138
index.html
@ -1,59 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="title" content="elia's website">
|
||||
<meta name="description" content="hello">
|
||||
<meta name="keywords" content="ich, hasse, mein, leben">
|
||||
<meta name="author" content="elia">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#33ccffaf">
|
||||
<link rel="shortcut icon" href="icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#33ccff">
|
||||
<meta name="msapplication-config" content="icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#33ccff">
|
||||
<meta property="og:title" content="elia's website">
|
||||
<meta property="og:description" content="hello">
|
||||
<meta property="og:url" content="https://elia's website">
|
||||
<meta property="og:site_name" content="elia's website">
|
||||
<meta property="og:image" content="https://elia.li/icons/favicon-32x32.png">
|
||||
<meta property="twitter:title" content="elia's website">
|
||||
<meta property="twitter:description" content="hello">
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:image" content="https://elia.li/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>elia's website</title>
|
||||
</head>
|
||||
<body>
|
||||
<video autoplay muted loop id="background-video">
|
||||
<source src="assets/background.mp4" type="video/mp4">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
<nav class="navbar">
|
||||
<div class="logo">
|
||||
<span>elia.li</span>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="title" content="elia's website" />
|
||||
<meta name="description" content="hello" />
|
||||
<meta name="keywords" content="ich, hasse, mein, leben" />
|
||||
<meta name="author" content="elia" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="icons/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="icons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="icons/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="icons/site.webmanifest" />
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="icons/safari-pinned-tab.svg"
|
||||
color="#33ccffaf"
|
||||
/>
|
||||
<link rel="shortcut icon" href="icons/favicon.ico" />
|
||||
<meta name="msapplication-TileColor" content="#33ccff" />
|
||||
<meta name="msapplication-config" content="icons/browserconfig.xml" />
|
||||
<meta name="theme-color" content="#33ccff" />
|
||||
<meta property="og:title" content="elia's website" />
|
||||
<meta property="og:description" content="hello" />
|
||||
<meta property="og:url" content="https://elia's website" />
|
||||
<meta property="og:site_name" content="elia's website" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://elia.li/icons/favicon-32x32.png"
|
||||
/>
|
||||
<meta property="twitter:title" content="elia's website" />
|
||||
<meta property="twitter:description" content="hello" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
property="twitter:image"
|
||||
content="https://elia.li/icons/favicon-32x32.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link rel="stylesheet" href="assets/style.css" />
|
||||
<title>elia's website</title>
|
||||
</head>
|
||||
<body>
|
||||
<video autoplay muted loop id="background-video">
|
||||
<source src="assets/background.mp4" type="video/mp4" />
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
<nav class="navbar">
|
||||
<div class="logo">
|
||||
<span>elia.li</span>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="https://elia.network">network</a></li>
|
||||
<li><a href="https://github.com/informaticker">github</a></li>
|
||||
<li><a href="mailto:me@elia.li">mail</a></li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
>imprint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="credits" class="credits">
|
||||
<span>// credit to hartnett media \\</span>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="https://elia.network">network</a></li>
|
||||
<li><a href="https://github.com/informaticker">github</a></li>
|
||||
<li><a href="mailto:me@elia.li">mail</a></li>
|
||||
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">imprint</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="response" class="response">
|
||||
<span></span>
|
||||
</div>
|
||||
<div id="stats" class="stats">
|
||||
<span id="charsPerSecond">0 chars/s</span>
|
||||
<span id="totalChars">0 chars</span>
|
||||
<span id="totalTime">0.0s</span>
|
||||
<span id="temperature">Temp: ...</span>
|
||||
</div>
|
||||
</body>
|
||||
<script src="assets/api.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("credits").style.display = "block";
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user