Upload 3 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/img/bg_main.jpg filter=lfs diff=lfs merge=lfs -text
+frontend/img/ic_logo.png filter=lfs diff=lfs merge=lfs -text

frontend/css/style.css

@@ -0,0 +1,453 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body,
+html {
+    position: relative;
+    min-height: 100vh;
+}
+
+body {
+    /* background:
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(23, 194, 106, 0.794), transparent 45%),
+        radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.08), transparent 50%),
+        radial-gradient(circle at 10% 85%, rgba(236, 72, 153, 0.08), transparent 45%),
+        linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #0f1629 50%, #189f18 75%, #0d1425 100%) !important;
+    background-size: cover;
+    background-attachment: fixed; */
+}
+
+/* ============================================
+   TECH GRID PATTERN
+   ============================================ */
+body {
+    position: relative;
+    background-image:
+        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    z-index: 1;
+    transform: unset !important;
+    background:
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(139, 92, 246, 0.1), transparent 45%),
+        radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.08), transparent 50%),
+        radial-gradient(circle at 10% 85%, rgba(236, 72, 153, 0.08), transparent 45%),
+        linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #0f1629 50%, #1e2139 75%, #0d1425 100%) !important;
+    /* animation: gridScroll 30s linear infinite; */
+}
+
+gradio-app {
+    background-color: transparent !important;
+}
+
+/* Hexagon pattern overlay */
+body::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+        repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(174, 246, 59, 0.015) 35px, rgba(93, 205, 18, 0.015) 70px),
+        repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(139, 92, 246, 0.015) 35px, rgba(139, 92, 246, 0.015) 70px);
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.header {
+    padding: 40px 30px;
+    background:
+        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.25), transparent 55%),
+        radial-gradient(circle at 85% 20%, rgba(45, 135, 255, 0.22), transparent 70%),
+        linear-gradient(135deg, #0e1a2b, #0f1032, #03011a);
+    color: white;
+    border-bottom-left-radius: 40px;
+    border-bottom-right-radius: 40px;
+    box-shadow: 0 50px 90px -20px rgba(0, 0, 0, 0.6);
+
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.header-logo {
+    flex: unset;
+    display: flex;
+    justify-content: flex-start;
+    width: 100px;
+}
+
+.header h1 {
+    margin: 0;
+    flex: 1;
+    text-align: center;
+    font-size: 2.5em;
+    font-weight: 800;
+    letter-spacing: 1px;
+    background: linear-gradient(to right, #fff 20%, #dce4ff 40%, #cedcff 60%);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+/* ============================================
+   FLOATING GLOWING ORBS
+   ============================================ */
+.contain {
+    position: relative;
+    z-index: 1;
+}
+
+.contain::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    right: 15%;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
+    border-radius: 50%;
+    filter: blur(80px);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.contain::after {
+    content: '';
+    position: absolute;
+    bottom: 15%;
+    left: 10%;
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);
+    border-radius: 50%;
+    filter: blur(70px);
+    pointer-events: none;
+    z-index: -1;
+}
+.iframe-container{
+    padding-bottom: 20px;
+}
+.results-heading.block{
+    padding-top: 20px;
+}
+.results-heading h2, .route-heading h3{
+    color: #fff;
+}
+.query-container{
+    padding: 40px 0;
+}
+.query-container>.styler {
+    flex-direction: row;
+        gap: 30px;
+}
+
+.query-container,
+.query-container .styler,
+.how-to-container,
+.how-to-container .styler,
+.query-form,
+.examples-block {
+    background: transparent;
+}
+.query-container .query-form .primary,
+.query-container .query-form .secondary{
+    width: 50%;
+    height: 45px;
+    border-radius: 10px;
+    border: 1px solid #204c6c;
+    color: #204c6c;
+}
+.query-container .query-form .primary,.query-container .query-form .secondary:hover{
+    color: #fff;
+    background-color: #204c6c;
+}
+.query-container .query-form .stretch{
+    gap: 20px;
+}
+.query-container .query-form .primary:hover{
+    opacity: 0.8;
+}
+.query-container .query-form, .query-container .examples-block {
+    width: 50%;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 20px;
+}
+.query-container .query-form h3, .query-container .examples-block h3{
+    background-color: #fff;
+    font-size: 20px;
+    padding-bottom: 10px;
+}
+.how-to-container ul{
+    margin: 0px;
+    flex-wrap: wrap;
+    display: flex;
+    gap: 20px;
+}
+.how-to-container h3{
+     font-size: 20px;
+    padding-bottom: 10px;
+    color: #fff;
+}
+.query-container .query-form .styler{
+    height: 100%;
+    justify-content: space-between;
+
+}
+.query-container .query-form textarea{
+        border: 1px solid rgb(199 199 199);
+    padding: 10px;
+    margin-bottom: 20px;
+}
+.query-container .examples-block .gallery{
+    padding: 0px 10px;
+}
+.query-container .examples-block .gallery-item{
+        border: 1px solid rgb(199 199 199);
+    box-shadow: unset;
+        padding: 10px;
+    border-radius: 10px;
+}
+.query-container .examples-block .gallery-item .gallery{
+    padding: 0;
+}
+/* ============================================
+   GRADIO CONTAINER IMPROVEMENTS
+   ============================================ */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Ensure all content is above background effects */
+.gradio-container>* {
+    position: relative;
+    z-index: 1;
+}
+
+/* ============================================
+   IMPROVED ROW & COLUMN SPACING
+   ============================================ */
+.gradio-container .row {
+    gap: 24px !important;
+    margin-bottom: 30px !important;
+}
+
+.gradio-container .column {
+    padding: 0 12px !important;
+}
+
+/* ============================================
+   CARD STYLING ENHANCEMENTS
+   ============================================ */
+.gradio-container div[style*="background:white"] {
+    border-radius: 20px !important;
+    transition: all 0.3s ease !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.gradio-container div[style*="background:white"]:hover {
+    transform: translateY(-8px) !important;
+    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ============================================
+   TEXT STYLING
+   ============================================ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    letter-spacing: 0.5px;
+    line-height: 1.3;
+}
+
+ul {
+    margin-left: 80px;
+}
+
+ul,
+li {
+    color: white;
+    line-height: 1.8;
+}
+
+
+
+p {
+    line-height: 1.7;
+}
+
+/* ============================================
+   BUTTON IMPROVEMENTS
+   ============================================ */
+a[style*="Launch Agent"],
+button {
+    box-shadow: 0 4px 12px rgba(32, 76, 108, 0.3) !important;
+    transition: all 0.3s ease !important;
+    font-weight: 600 !important;
+}
+
+a[style*="Launch Agent"]:hover {
+    box-shadow: 0 8px 20px rgba(32, 76, 108, 0.5) !important;
+}
+
+/* ============================================
+   SYSTEM STATUS BOX REFINEMENT
+   ============================================ */
+div[style*="margin-top: 50px"] {
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+/* ============================================
+   "HOW IT WORKS" SECTION ALIGNMENT
+   ============================================ */
+.gradio-container div[style*="margin-left: 130px"] {
+    margin-left: 0px !important;
+    padding: 30px 40px !important;
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    backdrop-filter: blur(8px) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"]:hover {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-color: rgba(59, 130, 246, 0.3) !important;
+    transform: translateY(-4px);
+}
+
+.gradio-container div[style*="margin-left: 130px"] h3 {
+    color: #ffffff !important;
+    font-size: 1.4em !important;
+    margin-bottom: 16px !important;
+    font-weight: 700 !important;
+    background: linear-gradient(to right, #3B82F6, #8B5CF6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.gradio-container div[style*="margin-left: 130px"] ul {
+    margin: 0 !important;
+    padding-left: 24px !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"] li {
+    margin: 10px 0 !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    font-size: 0.95em !important;
+}
+
+/* ============================================
+   HEADER SECTION REFINEMENT
+   ============================================ */
+div[style*="border-bottom-left-radius:40px"] {
+    margin-bottom: 40px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ============================================
+   RESPONSIVE IMPROVEMENTS
+   ============================================ */
+@media (max-width: 1200px) {
+    .gradio-container {
+        max-width: 95% !important;
+        padding: 20px !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .gradio-container div[style*="margin-left: 130px"] {
+        padding: 20px !important;
+    }
+
+    div[style*="flex:1; display:flex"] {
+        flex-direction: column !important;
+    }
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes gridScroll {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(60px, 60px);
+    }
+}
+
+@keyframes floatOrb1 {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.4;
+    }
+
+    33% {
+        transform: translate(-50px, 40px) scale(1.15);
+        opacity: 0.6;
+    }
+
+    66% {
+        transform: translate(30px, -30px) scale(0.9);
+        opacity: 0.5;
+    }
+}
+
+@keyframes floatOrb2 {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.35;
+    }
+
+    33% {
+        transform: translate(40px, -50px) scale(0.85);
+        opacity: 0.5;
+    }
+
+    66% {
+        transform: translate(-35px, 35px) scale(1.1);
+        opacity: 0.45;
+    }
+}
+
+/* ============================================
+   SMOOTH SCROLLING
+   ============================================ */
+html {
+    scroll-behavior: smooth;
+}
+
+/* ============================================
+   ACCESSIBILITY & POLISH
+   ============================================ */
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+    background: rgba(59, 130, 246, 0.3);
+    color: white;
+}