File size: 6,835 Bytes
8eab558 623a404 8eab558 52af245 623a404 52af245 623a404 8eab558 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diamond AI / Pipeline</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<canvas id="canvas3d"></canvas>
<div class="atmospheric-grain"></div>
<div id="loader-overlay">
<div class="loader-container">
<div class="loader-line">
<div class="loader-progress" id="js-loader-bar"></div>
</div>
<div class="loader-text">PROCS / ANALYZING DATA [0%]</div>
</div>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="flash-container">
{% for message in messages %}
<div class="flash-message">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="container animate-up">
<nav>
<div class="nav-logo">DIAMOND / AI</div>
<div class="nav-meta">
<span>SYSTEM V1.0</span>
<span>2026</span>
</div>
</nav>
<header>
<p class="label-mini">Automated Grading Pipeline</p>
<h1>DIAMOND<br /><span class="italic">INTELLIGENCE</span></h1>
</header>
<main>
<div class="upload-card">
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>01 / SELECT IMAGE BUNDLE (ZIP)</label>
<input type="file" name="zip_file" accept=".zip" required>
</div>
<div class="form-group">
<label>02 / SELECT DATA MANIFEST (EXCEL)</label>
<input type="file" name="excel_file" accept=".xlsx, .xls" required>
</div>
<button type="submit" class="btn-launch">Execute Phase</button>
</form>
<div class="flush-section">
<form id="flush-form" action="/flush" method="post" onsubmit="return confirmFlush()">
<button type="submit" class="btn-flush-data">Flush System Data</button>
</form>
<p class="flush-hint">Resets all uploads and results to free up space.</p>
</div>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Simplified shader logic to be more lightweight and robust
const vertexShader = `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
const fragmentShader = `
uniform float uTime;
varying vec2 vUv;
// Simplex 2D noise
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ; m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 uv = vUv;
float n = snoise(uv * 1.5 + uTime * 0.05);
vec3 color = mix(vec3(0.02, 0.02, 0.05), vec3(0.08, 0.04, 0.15), n * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
`;
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas3d'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.PlaneGeometry(2, 2);
const uniforms = { uTime: { value: 0 } };
const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms });
scene.add(new THREE.Mesh(geometry, material));
const animate = (t) => {
uniforms.uTime.value = t * 0.001;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
document.getElementById('upload-form').addEventListener('submit', function () {
document.getElementById('loader-overlay').style.display = 'flex';
const loaderBar = document.getElementById('js-loader-bar');
const loaderText = document.querySelector('.loader-text');
let p = 0;
const itv = setInterval(() => {
if (p < 92) {
// Logic to simulate real work: slow down as it gets closer to 92
const increment = (92 - p) * 0.03 + 0.1;
p += increment;
}
const displayP = Math.floor(p);
loaderBar.style.width = displayP + '%';
let phase = "ANALYZING";
if (displayP > 25) phase = "INFERENCING";
if (displayP > 60) phase = "GRADATING";
if (displayP > 85) phase = "COMPILING REPORT";
loaderText.innerText = `PROCS / ${phase} DATA [${displayP}%]`;
}, 100);
});
function confirmFlush() {
return confirm("Are you sure you want to flush all data? This will permanently delete all uploaded images and generated reports.");
}
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
// Auto-hide flash messages
setTimeout(() => {
const flashes = document.querySelectorAll('.flash-message');
flashes.forEach(f => f.style.opacity = '0');
}, 3000);
</script>
</body>
</html> |