remove generative ml elements

This commit is contained in:
elijah 2024-07-30 17:56:41 +02:00
parent e77c5c2c42
commit b58856db6c
3 changed files with 170 additions and 266 deletions

View File

@ -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");

View File

@ -1,14 +1,15 @@
@font-face {
font-family: 'workbench';
src: url('../assets/font.woff2') format('woff2');
font-family: "workbench";
src: url("../assets/font.woff2") format("woff2");
}
body, html {
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'workbench', sans-serif;
font-family: "workbench", sans-serif;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
@ -25,7 +26,7 @@ body, html {
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1;
z-index: 0;
object-fit: cover;
object-position: center;
}
@ -37,6 +38,8 @@ body, html {
justify-content: space-between;
align-items: center;
pointer-events: none;
position: relative; /* Added this line */
z-index: 1; /* Added this line */
}
.logo {
@ -71,27 +74,7 @@ body, html {
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 {
.credits {
position: absolute;
bottom: 0.5%;
left: 50%;
@ -102,12 +85,15 @@ body, html {
white-space: nowrap;
display: none;
animation: fadeIn 1.5s;
bottom: 1%;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 600px) {
@ -133,8 +119,4 @@ body, html {
margin: 0 10px;
text-align: center;
}
.response {
font-size: 1.5rem !important;
}
}

View File

@ -1,37 +1,61 @@
<!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">
<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">
<source src="assets/background.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
<nav class="navbar">
@ -42,18 +66,20 @@
<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>
<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 id="credits" class="credits">
<span>// credit to hartnett media \\</span>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("credits").style.display = "block";
});
</script>
</body>
<script src="assets/api.js"></script>
</html>