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");
|
|
||||||
@ -1,14 +1,15 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'workbench';
|
font-family: "workbench";
|
||||||
src: url('../assets/font.woff2') format('woff2');
|
src: url("../assets/font.woff2") format("woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
body, html {
|
body,
|
||||||
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'workbench', sans-serif;
|
font-family: "workbench", sans-serif;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
@ -25,7 +26,7 @@ body, html {
|
|||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: -1;
|
z-index: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
@ -37,6 +38,8 @@ body, html {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
position: relative; /* Added this line */
|
||||||
|
z-index: 1; /* Added this line */
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@ -71,27 +74,7 @@ body, html {
|
|||||||
color: #d6afd6;
|
color: #d6afd6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.response {
|
.credits {
|
||||||
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;
|
position: absolute;
|
||||||
bottom: 0.5%;
|
bottom: 0.5%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -102,12 +85,15 @@ body, html {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: none;
|
display: none;
|
||||||
animation: fadeIn 1.5s;
|
animation: fadeIn 1.5s;
|
||||||
bottom: 1%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; }
|
from {
|
||||||
to { opacity: 1; }
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
@ -133,8 +119,4 @@ body, html {
|
|||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.response {
|
|
||||||
font-size: 1.5rem !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
110
index.html
110
index.html
@ -1,37 +1,61 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="title" content="elia's website">
|
<meta name="title" content="elia's website" />
|
||||||
<meta name="description" content="hello">
|
<meta name="description" content="hello" />
|
||||||
<meta name="keywords" content="ich, hasse, mein, leben">
|
<meta name="keywords" content="ich, hasse, mein, leben" />
|
||||||
<meta name="author" content="elia">
|
<meta name="author" content="elia" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
|
<link
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
|
rel="apple-touch-icon"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
|
sizes="180x180"
|
||||||
<link rel="manifest" href="icons/site.webmanifest">
|
href="icons/apple-touch-icon.png"
|
||||||
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#33ccffaf">
|
/>
|
||||||
<link rel="shortcut icon" href="icons/favicon.ico">
|
<link
|
||||||
<meta name="msapplication-TileColor" content="#33ccff">
|
rel="icon"
|
||||||
<meta name="msapplication-config" content="icons/browserconfig.xml">
|
type="image/png"
|
||||||
<meta name="theme-color" content="#33ccff">
|
sizes="32x32"
|
||||||
<meta property="og:title" content="elia's website">
|
href="icons/favicon-32x32.png"
|
||||||
<meta property="og:description" content="hello">
|
/>
|
||||||
<meta property="og:url" content="https://elia's website">
|
<link
|
||||||
<meta property="og:site_name" content="elia's website">
|
rel="icon"
|
||||||
<meta property="og:image" content="https://elia.li/icons/favicon-32x32.png">
|
type="image/png"
|
||||||
<meta property="twitter:title" content="elia's website">
|
sizes="16x16"
|
||||||
<meta property="twitter:description" content="hello">
|
href="icons/favicon-16x16.png"
|
||||||
<meta property="twitter:card" content="summary_large_image">
|
/>
|
||||||
<meta property="twitter:image" content="https://elia.li/icons/favicon-32x32.png">
|
<link rel="manifest" href="icons/site.webmanifest" />
|
||||||
<link rel="icon" type="image/png" href="favicon.png">
|
<link
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
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>
|
<title>elia's website</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<video autoplay muted loop id="background-video">
|
<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.
|
Your browser does not support HTML5 video.
|
||||||
</video>
|
</video>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
@ -42,18 +66,20 @@
|
|||||||
<li><a href="https://elia.network">network</a></li>
|
<li><a href="https://elia.network">network</a></li>
|
||||||
<li><a href="https://github.com/informaticker">github</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="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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="response" class="response">
|
<div id="credits" class="credits">
|
||||||
<span></span>
|
<span>// credit to hartnett media \\</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="stats" class="stats">
|
<script>
|
||||||
<span id="charsPerSecond">0 chars/s</span>
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
<span id="totalChars">0 chars</span>
|
document.getElementById("credits").style.display = "block";
|
||||||
<span id="totalTime">0.0s</span>
|
});
|
||||||
<span id="temperature">Temp: ...</span>
|
</script>
|
||||||
</div>
|
</body>
|
||||||
</body>
|
|
||||||
<script src="assets/api.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user