Spaces:

CosmickVisions
/

Domain-Vision

Running

App Files Files Community

CosmickVisions commited on Mar 21

Commit

e5b06bc

verified ·

1 Parent(s): e10cbb7

Update index.html

Browse files

Files changed (1) hide show

index.html +391 -22

index.html CHANGED Viewed

@@ -1,29 +1,398 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
-</head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Uni-Vision AI Suite</title>
+    <style>
+        :root {
+            --primary-gradient: linear-gradient(120deg, #2b4162 0%, #12100e 100%);
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --glass-bg: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --shadow-color: rgba(0, 0, 0, 0.2);
+            --text-primary: #ffffff;
+            --text-secondary: rgba(255, 255, 255, 0.8);
+            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        body {
+            background: var(--primary-gradient);
+            min-height: 100vh;
+            padding: 2rem;
+            color: var(--text-primary);
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+            padding: 3rem 2rem;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 20px 40px var(--shadow-color);
+            transform: translateZ(0);
+        }
+        .header h1 {
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
+        }
+        .header p {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+        .tabs {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            justify-content: center;
+            perspective: 1000px;
+        }
+        .tab {
+            padding: 1rem 2.5rem;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 1.1rem;
+            font-weight: 500;
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+        .tab::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--accent-gradient);
+            opacity: 0;
+            transition: var(--transition);
+            z-index: -1;
+        }
+        .tab:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .tab:hover::before {
+            opacity: 0.1;
+        }
+        .tab.active {
+            background: var(--accent-gradient);
+            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.25);
+            transform: translateY(-5px);
+        }
+        .iframe-container {
+            background: var(--glass-bg);
+            padding: 1.5rem;
+            border-radius: 24px;
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 30px 60px var(--shadow-color);
+            backdrop-filter: blur(20px);
+            position: relative;
+            transform-style: preserve-3d;
+            transition: var(--transition);
+        }
+        .iframe-container::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: var(--accent-gradient);
+            border-radius: 24px;
+            z-index: -1;
+            opacity: 0.1;
+            transition: var(--transition);
+        }
+        iframe {
+            width: 100%;
+            height: 700px;
+            border-radius: 16px;
+            transition: var(--transition);
+            opacity: 0;
+            transform: translateY(20px) scale(0.98);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        iframe.active {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            display: none;
+            z-index: 10;
+        }
+        .loading.active {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .loading::after {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border: 3px solid var(--text-secondary);
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .footer {
+            text-align: center;
+            color: var(--text-secondary);
+            margin-top: 3rem;
+            padding: 1.5rem;
+            font-size: 1rem;
+            opacity: 0.8;
+            background: var(--glass-bg);
+            border-radius: 16px;
+            backdrop-filter: blur(10px);
+        }
+        /* Modern Grid Layout for larger screens */
+        @media (min-width: 1200px) {
+            .container {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+            .tabs {
+                position: sticky;
+                top: 2rem;
+                z-index: 100;
+            }
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+            .header h1 {
+                font-size: 2.5rem;
+            }
+            .tabs {
+                flex-wrap: wrap;
+                gap: 0.5rem;
+            }
+            .tab {
+                flex: 1 1 calc(50% - 0.5rem);
+                padding: 0.8rem;
+                font-size: 0.9rem;
+            }
+            iframe {
+                height: 500px;
+            }
+        }
+        /* Modern Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-gradient);
+            border-radius: 4px;
+        }
+        /* Animation Keyframes */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
 <body>
+    <div class="container">
+        <header class="header">
+            <h1>Domain-Vision AI Suite</h1>
+            <p>Experience the future of AI-powered analysis across legal, technical, academic, and financial domains</p>
+        </header>
+        <div class="tabs">
+            <button class="tab active" data-tab="legal">
+                Legal Vision
+            </button>
+            <button class="tab" data-tab="tech">
+                Tech Vision
+            </button>
+            <button class="tab" data-tab="scholar">
+                Scholar Vision
+            </button>
+            <button class="tab" data-tab="fin">
+                Fin Vision
+            </button>
+        </div>
+        <div class="iframe-container">
+            <div class="loading">Loading Vision Interface...</div>
+            <iframe id="vision-frame"
+                    src="https://cosmickvisions-legal-visions.hf.space"
+                    frameborder="0"
+                    class="active"
+                    allow="accelerometer; camera; microphone">
+            </iframe>
+        </div>
+        <footer class="footer">
+            <p>© 2024 Calvin Allen Crawford | Powered by Advanced AI Technology</p>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const tabs = document.querySelectorAll('.tab');
+            const iframe = document.getElementById('vision-frame');
+            const loading = document.querySelector('.loading');
+            const urls = {
+                legal: 'https://cosmickvisions-legal-visions.hf.space',
+                tech: 'https://cosmickvisions-tech-vision.hf.space',
+                scholar: 'https://cosmickvisions-scholar-vision.hf.space',
+                fin: 'https://cosmickvisions-fin-vision.hf.space'
+            };
+            // Add hover effect to iframe container
+            const iframeContainer = document.querySelector('.iframe-container');
+            iframeContainer.addEventListener('mousemove', (e) => {
+                const { left, top, width, height } = iframeContainer.getBoundingClientRect();
+                const x = (e.clientX - left) / width;
+                const y = (e.clientY - top) / height;
+                iframeContainer.style.transform = `
+                    perspective(1000px)
+                    rotateX(${(y - 0.5) * 2}deg)
+                    rotateY(${(x - 0.5) * 2}deg)
+                `;
+            });
+            iframeContainer.addEventListener('mouseleave', () => {
+                iframeContainer.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+            });
+            function switchTab(tabName) {
+                // Update active tab with animation
+                tabs.forEach(tab => {
+                    tab.classList.remove('active');
+                    if(tab.dataset.tab === tabName) {
+                        tab.classList.add('active');
+                        tab.style.animation = 'pulse 0.4s ease';
+                        setTimeout(() => tab.style.animation = '', 400);
+                    }
+                });
+                // Show loading state
+                iframe.classList.remove('active');
+                loading.classList.add('active');
+                // Change iframe source
+                iframe.src = urls[tabName];
+                // Handle iframe load completion
+                iframe.onload = () => {
+                    loading.classList.remove('active');
+                    iframe.classList.add('active');
+                };
+            }
+            // Add click handlers to tabs
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const tabName = tab.dataset.tab;
+                    switchTab(tabName);
+                });
+            });
+            // Add keyboard navigation
+            document.addEventListener('keydown', (e) => {
+                if (e.altKey) {
+                    switch(e.key) {
+                        case '1': switchTab('legal'); break;
+                        case '2': switchTab('tech'); break;
+                        case '3': switchTab('scholar'); break;
+                        case '4': switchTab('fin'); break;
+                    }
+                }
+            });
+            // Handle iframe loading errors
+            iframe.onerror = () => {
+                loading.textContent = 'Error loading content. Please try again.';
+            };
+            // Add initial animation
+            document.querySelector('.header').style.animation = 'fadeIn 0.8s ease-out forwards';
+        });
+    </script>
+</body>
+</html>