chat-interface-block.html

<html>
<head>
    <title>Course RAG Assistant</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Course Assistant</h1>
    <p>Ask questions about course materials and get AI-powered answers.</p>
    
    <div class="ai-assistant-container">
        <!-- Animated background particles -->
        <div class="ai-particles" id="particles">
            <!-- Particles will be added dynamically -->
        </div>
        
        <!-- Main content area -->
        <div class="main-content">
            <div class="greeting">Welcome to <span>Ontology Generation Assistant</span></div>
            <div class="iframe-container">
                <iframe src="http://127.0.0.1:7860" class="gradio-container" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    
    <!-- CSS to inject into the iframe to style send button as an arrow -->
    <div class="custom-styles-to-inject">
        /* Global styles for Gradio interface */
        :root {
            --ai-primary: #8a2be2;
            --ai-secondary: #4b0082;
            --ai-accent: #00ffc3;
            --ai-dark: #0c0521;
            --ai-light: #ffffff;
            --ai-glow: 0 0 10px rgba(138, 43, 226, 0.7);
        }
        
        /* Apply futuristic sci-fi fonts */
        body * {
            font-family: 'Orbitron', 'Raleway', sans-serif !important;
        }
        
        /* Overall container styling */
        .gradio-container, .wrap, .contain, .gap {
            background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.9), rgba(36, 36, 62, 0.95)) !important;
            border: none !important;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
        }
        
        /* Header elements */
        h1, h2, h3, h4 {
            color: var(--ai-light) !important;
            text-shadow: var(--ai-glow) !important;
            letter-spacing: 1.5px !important;
            font-weight: 500 !important;
        }
        
        /* Markdown areas - make them pop */
        .prose {
            color: var(--ai-light) !important;
            background: rgba(15, 12, 41, 0.4) !important;
            border-radius: 10px !important;
            padding: 15px !important;
            border-left: 2px solid var(--ai-accent) !important;
        }
        
        /* All buttons with futuristic design */
        button, .button-primary {
            background: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary)) !important;
            border: none !important;
            border-radius: 5px !important;
            color: var(--ai-light) !important;
            box-shadow: var(--ai-glow) !important;
            transition: all 0.3s ease !important;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        /* Button hover effects */
        button:hover, .button-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.9) !important;
        }
        
        /* Button active/click effect */
        button:active, .button-primary:active {
            transform: translateY(1px) !important;
        }
        
        /* Tabs with glowing borders */
        .tabs {
            background: rgba(15, 12, 41, 0.4) !important;
            border-radius: 8px !important;
            overflow: hidden !important;
        }
        
        .tab-nav {
            border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
            background: rgba(0, 0, 0, 0.3) !important;
        }
        
        .tab-item {
            color: var(--ai-light) !important;
            opacity: 0.7 !important;
            transition: all 0.3s ease !important;
        }
        
        .tab-item.selected {
            color: var(--ai-light) !important;
            opacity: 1 !important;
            border-bottom: 2px solid var(--ai-accent) !important;
            font-weight: bold !important;
            text-shadow: var(--ai-glow) !important;
        }
        
        /* Special arrow send button */
        .submit-btn {
            border-radius: 50% !important;
            padding: 8px !important;
            min-width: auto !important;
            width: 45px !important;
            height: 45px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary)) !important;
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.5) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .submit-btn::before {
            content: "↗" !important;
            font-size: 24px !important;
            margin: 0 !important;
            color: white !important;
            z-index: 2 !important;
            position: relative !important;
        }
        
        .submit-btn::after {
            content: "" !important;
            position: absolute !important;
            top: -10px !important;
            left: -10px !important;
            width: 0 !important;
            height: 0 !important;
            background: linear-gradient(135deg, var(--ai-accent), transparent) !important;
            border-radius: 50% !important;
            transition: all 0.5s ease !important;
            opacity: 0 !important;
        }
        
        .submit-btn:hover::after {
            width: 150% !important;
            height: 150% !important;
            opacity: 0.3 !important;
        }
        
        .submit-btn span {
            display: none !important;
        }
        
        /* Message styling for chat interface */
        .messages {
            background: rgba(15, 12, 41, 0.6) !important;
            border-radius: 10px !important;
            border: 1px solid rgba(138, 43, 226, 0.2) !important;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
        }
        
        .message {
            border-radius: 10px !important;
            margin: 10px !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        /* User message with cool glow effect */
        .user-message {
            background: rgba(138, 43, 226, 0.15) !important;
            border-left: 3px solid var(--ai-primary) !important;
        }
        
        .user-message::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(45deg, rgba(138, 43, 226, 0.1), transparent) !important;
            pointer-events: none !important;
        }
        
        /* Assistant message with different glow */
        .assistant-message {
            background: rgba(75, 0, 130, 0.15) !important;
            border-right: 3px solid var(--ai-secondary) !important;
        }
        
        .assistant-message::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(-45deg, rgba(0, 255, 195, 0.05), transparent) !important;
            pointer-events: none !important;
        }
        
        /* Input fields styling */
        input, textarea, select, .input {
            background: rgba(15, 12, 41, 0.3) !important;
            border: 1px solid rgba(138, 43, 226, 0.3) !important;
            border-radius: 8px !important;
            color: var(--ai-light) !important;
            padding: 12px !important;
            transition: all 0.3s ease !important;
        }
        
        input:focus, textarea:focus, select:focus, .input:focus {
            border: 1px solid var(--ai-primary) !important;
            box-shadow: 0 0 10px rgba(138, 43, 226, 0.5) !important;
            outline: none !important;
            background: rgba(15, 12, 41, 0.5) !important;
        }
        
        /* Labels and other text elements */
        label, p, span, div {
            color: var(--ai-light) !important;
        }
        
        /* Textbox with placeholder animation */
        .textbox:focus-within label {
            color: var(--ai-accent) !important;
            transform: translateY(-2px) !important;
        }
        
        /* Progress bars and sliders */
        progress, .progress, .slider-track {
            background: rgba(15, 12, 41, 0.4) !important;
            border-radius: 50px !important;
            height: 8px !important;
            border: none !important;
        }
        
        progress::-webkit-progress-value, .progress-bar, .slider-track-fill {
            background: linear-gradient(90deg, var(--ai-primary), var(--ai-accent)) !important;
            border-radius: 50px !important;
        }
        
        .slider-handle {
            background: var(--ai-primary) !important;
            border: 2px solid var(--ai-light) !important;
            box-shadow: 0 0 10px rgba(138, 43, 226, 0.5) !important;
        }
        
        /* Chatbot typing animation */
        @keyframes typing-dot {
            0%, 100% {
                opacity: 0.3;
                transform: translateY(0);
            }
            50% {
                opacity: 1;
                transform: translateY(-2px);
            }
        }
        
        .typing-animation span {
            display: inline-block !important;
            width: 8px !important;
            height: 8px !important;
            background: var(--ai-accent) !important;
            border-radius: 50% !important;
            margin: 0 2px !important;
            animation: typing-dot 1s infinite !important;
        }
        
        .typing-animation span:nth-child(2) {
            animation-delay: 0.2s !important;
        }
        
        .typing-animation span:nth-child(3) {
            animation-delay: 0.4s !important;
        }
        
        /* Code blocks styling */
        pre, code {
            background: rgba(0, 0, 0, 0.3) !important;
            border-radius: 8px !important;
            border: 1px solid rgba(0, 255, 195, 0.2) !important;
            color: var(--ai-accent) !important;
            font-family: monospace !important;
            padding: 10px !important;
        }
        
        /* Scrollbars styling */
        ::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(15, 12, 41, 0.2) !important;
            border-radius: 10px !important;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(var(--ai-primary), var(--ai-secondary)) !important;
            border-radius: 10px !important;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(var(--ai-primary), var(--ai-accent)) !important;
        }
    </div>

    <!-- Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create animated particles
            const particlesContainer = document.getElementById('particles');
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // Random properties
                const size = Math.random() * 8 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // Random animation delay and duration
                particle.style.animationDelay = `${Math.random() * 20}s`;
                particle.style.animationDuration = `${Math.random() * 20 + 10}s`;
                
                particlesContainer.appendChild(particle);
            }

            // Force iframe to full width
            const iframe = document.querySelector('.gradio-container');
            
            function adjustIframe() {
                const mainContent = document.querySelector('.main-content');
                const contentWidth = mainContent.offsetWidth;
                const contentHeight = mainContent.offsetHeight - document.querySelector('.greeting').offsetHeight;
                
                iframe.style.width = `${contentWidth}px`;
                iframe.style.height = `${contentHeight}px`;
            }
            
            // Adjust initially and on resize
            adjustIframe();
            window.addEventListener('resize', adjustIframe);
            
            // Function to load files from current directory
            function loadFiles() {
                // Set up sample files for now - will be replaced with actual directory listing
                const files = [
                    { name: 'app.py', icon: '📄' },
                    { name: 'elicitation.txt', icon: '📝' },
                    { name: 'README.md', icon: '📋' },
                    { name: 'requirements.txt', icon: '📄' },
                    { name: 'test_env.py', icon: '🧪' }
                ];
                
                const fileList = document.getElementById('file-list');
                fileList.innerHTML = '';
                
                files.forEach(file => {
                    const fileItem = document.createElement('li');
                    fileItem.className = 'file-item';
                    fileItem.innerHTML = `<span class="file-icon">${file.icon}</span>${file.name}`;
                    fileItem.addEventListener('click', function() {
                        // Remove active class from all items
                        document.querySelectorAll('.file-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        
                        // Add active class to clicked item
                        fileItem.classList.add('active');
                        
                        // When clicked, pass the filename to the iframe app
                        const iframeWindow = iframe.contentWindow;
                        
                        // We'll attempt to interact with the file browser in the Gradio app
                        // This is a complex operation that would require a custom solution
                        console.log(`Selected file: ${file.name}`);
                    });
                    
                    fileList.appendChild(fileItem);
                });
            }
            
            // Load files
            loadFiles();
            
            // Function to inject custom styles into the iframe after it loads
            iframe.addEventListener('load', function() {
                try {
                    // Get our custom styles
                    const customStyles = document.querySelector('.custom-styles-to-inject').textContent;
                    
                    // Create a style element
                    const styleElement = document.createElement('style');
                    styleElement.textContent = customStyles;
                    
                    // Append it to the iframe's head
                    const iframeHead = iframe.contentDocument.head;
                    iframeHead.appendChild(styleElement);
                    
                    console.log('Custom styles injected into iframe');
                    
                    // Attempt to find the send button and replace its text with an arrow
                    const observer = new MutationObserver(function(mutations) {
                        const sendButton = iframe.contentDocument.querySelector('.submit-btn');
                        if (sendButton) {
                            sendButton.innerHTML = '↗';
                            observer.disconnect();
                        }
                    });
                    
                    // Start observing the iframe document for when elements are added
                    observer.observe(iframe.contentDocument.body, {
                        childList: true,
                        subtree: true
                    });
                } catch (e) {
                    console.error('Error injecting styles into iframe:', e);
                }
            });
        });
    </script>
</body>
</html>