First Commit
This commit is contained in:
261
index.html
Normal file
261
index.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>WebGPU Attention Example</title>
|
||||
<base href="./">
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.panel{
|
||||
color: #d9d9d9;
|
||||
margin:0 auto;
|
||||
width: 400px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f5;
|
||||
background: rgba(28, 28, 30, 0.8);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.4),
|
||||
0 0 8px rgba(28, 28, 30, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(28, 28, 30, 0.95);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.6),
|
||||
0 0 15px rgba(28, 28, 30, 0.9);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background: rgba(28, 28, 30, 1);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.8),
|
||||
0 0 10px rgba(28, 28, 30, 1);
|
||||
}
|
||||
#controlPanel {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: rgba(30, 30, 30, 0.6);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inputRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inputRow label {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.inputRow button,
|
||||
.inputRow input {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f5;
|
||||
background: rgba(28, 28, 30, 0.9);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.4),
|
||||
0 0 6px rgba(28, 28, 30, 0.5);
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.inputRow button:hover {
|
||||
background: rgba(40, 40, 44, 0.95);
|
||||
}
|
||||
|
||||
.inputRow input {
|
||||
background: rgba(20, 20, 20, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.inputRow select {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f5;
|
||||
background: rgba(28, 28, 30, 0.9);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.4),
|
||||
0 0 6px rgba(28, 28, 30, 0.5);
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
appearance: none; /* Remove default arrow */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, #f0f0f5 50%),
|
||||
linear-gradient(135deg, #f0f0f5 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - 20px) calc(50% - 3px),
|
||||
calc(100% - 15px) calc(50% - 3px);
|
||||
background-size: 5px 5px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.inputRow select:hover {
|
||||
background: rgba(40, 40, 44, 0.95);
|
||||
}
|
||||
|
||||
.inputRow option {
|
||||
background: rgba(28, 28, 30, 0.95);
|
||||
color: #f0f0f5;
|
||||
}
|
||||
|
||||
.top-panel{
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #292929;
|
||||
display: flex;
|
||||
|
||||
gap: 2.5rem;
|
||||
padding: 1.75rem 2rem;
|
||||
background: rgb(20 20 20 / 95%);
|
||||
backdrop-filter: blur(35px);
|
||||
-webkit-backdrop-filter: blur(35px);
|
||||
color: white;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
user-select: none;
|
||||
|
||||
|
||||
width: calc(100vw);
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
.top-panel button{
|
||||
cursor:pointer;
|
||||
}
|
||||
body {
|
||||
background: #111111;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.vertical{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.training{
|
||||
overflow: auto;
|
||||
height: 50vh;
|
||||
}
|
||||
.scrollable {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #444444 #111111; /* thumb and track colors */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* WebKit-based browsers */
|
||||
.scrollable::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-track {
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb {
|
||||
background-color: #444444;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #777777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-panel"></div>
|
||||
|
||||
<div class="description panel">
|
||||
<h2>Simplified transformer-style attention mechanism in Javascript</h2>
|
||||
<p>This JavaScript implementation demonstrates a simplified transformer-style attention mechanism using basic linear algebra and embedding concepts. The code was developed with the assistance of AI, leveraging natural language instructions and automated code generation to build and organize the components efficiently.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Training</h2>
|
||||
</div>
|
||||
|
||||
<div class="vertical">
|
||||
<div class="trainingsData panel">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="training panel scrollable">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="prediction panel">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<canvas width="1000" height="1000"></canvas>
|
||||
<script type="module" src="./real.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user