Spaces:

meet2akhil
/

Context-Eng

Running

App Files Files Community

meet2akhil commited on Jul 22

Commit

8db6041

verified ·

1 Parent(s): 6337ee8

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +570 -19

index.html CHANGED Viewed

@@ -1,19 +1,570 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat with Research Paper: Context Engineering for LLMs</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #4361ee;
+            --secondary: #3f37c9;
+            --accent: #4895ef;
+            --light: #f8f9fa;
+            --dark: #212529;
+            --success: #4cc9f0;
+            --user-bg: #4361ee;
+            --bot-bg: #f0f2f5;
+            --shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
+            color: var(--dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .header {
+            background: linear-gradient(to right, var(--primary), var(--secondary));
+            color: white;
+            padding: 1.5rem;
+            text-align: center;
+            box-shadow: var(--shadow);
+            position: relative;
+            z-index: 10;
+        }
+        .header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        .header p {
+            font-size: 0.9rem;
+            opacity: 0.9;
+            max-width: 800px;
+            margin: 0 auto;
+            line-height: 1.5;
+        }
+        .paper-info {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 1rem;
+            font-size: 0.85rem;
+        }
+        .info-chip {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 0.4rem 0.8rem;
+            border-radius: 2rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 900px;
+            width: 100%;
+            margin: 1.5rem auto;
+            background: white;
+            border-radius: 16px;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            position: relative;
+        }
+        .chat-history {
+            flex: 1;
+            padding: 1.5rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1.25rem;
+            background: #fafbfc;
+        }
+        .message {
+            max-width: 85%;
+            display: flex;
+            gap: 0.75rem;
+            animation: fadeIn 0.3s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .user-message {
+            align-self: flex-end;
+        }
+        .bot-message {
+            align-self: flex-start;
+        }
+        .avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            font-size: 1rem;
+        }
+        .user-avatar {
+            background: var(--user-bg);
+            color: white;
+        }
+        .bot-avatar {
+            background: var(--accent);
+            color: white;
+        }
+        .message-content {
+            padding: 0.9rem 1.2rem;
+            border-radius: 18px;
+            line-height: 1.5;
+            box-shadow: var(--shadow);
+            position: relative;
+        }
+        .user-message .message-content {
+            background: var(--user-bg);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        .bot-message .message-content {
+            background: var(--bot-bg);
+            color: var(--dark);
+            border-bottom-left-radius: 4px;
+        }
+        .input-area {
+            padding: 1.2rem;
+            background: white;
+            border-top: 1px solid #eaeaea;
+            display: flex;
+            gap: 0.8rem;
+        }
+        .input-container {
+            flex: 1;
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        #user-input {
+            width: 100%;
+            padding: 0.9rem 1.2rem;
+            padding-right: 3rem;
+            border: 1px solid #e0e0e0;
+            border-radius: 2rem;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.3s;
+            background: #f8f9fa;
+        }
+        #user-input:focus {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
+        }
+        .input-container i {
+            position: absolute;
+            right: 1.2rem;
+            color: #6c757d;
+            cursor: pointer;
+        }
+        #send-button {
+            background: var(--primary);
+            color: white;
+            border: none;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 1.1rem;
+            box-shadow: 0 4px 6px rgba(67, 97, 238, 0.3);
+        }
+        #send-button:hover {
+            background: var(--secondary);
+            transform: translateY(-2px);
+        }
+        .suggestions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.8rem;
+            padding: 0 1.5rem 1.5rem;
+            background: white;
+            border-top: 1px solid #eaeaea;
+        }
+        .suggestion-chip {
+            background: #edf2ff;
+            color: var(--primary);
+            padding: 0.6rem 1.2rem;
+            border-radius: 2rem;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid #dbe4ff;
+        }
+        .suggestion-chip:hover {
+            background: #dbe4ff;
+            transform: translateY(-2px);
+        }
+        .typing-indicator {
+            display: flex;
+            gap: 0.4rem;
+            padding: 0.9rem 1.2rem;
+            background: var(--bot-bg);
+            border-radius: 18px;
+            align-self: flex-start;
+            margin-bottom: 1.25rem;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: #6c757d;
+            border-radius: 50%;
+            animation: pulse 1.5s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(0.8); opacity: 0.5; }
+            50% { transform: scale(1); opacity: 1; }
+        }
+        .reference {
+            font-size: 0.8rem;
+            color: #6c757d;
+            margin-top: 0.5rem;
+            padding-left: 0.5rem;
+            border-left: 2px solid var(--accent);
+        }
+        @media (max-width: 768px) {
+            .chat-container {
+                margin: 0;
+                border-radius: 0;
+                height: calc(100vh - 160px);
+            }
+            .header {
+                padding: 1rem;
+            }
+            .header h1 {
+                font-size: 1.3rem;
+            }
+            .message {
+                max-width: 90%;
+            }
+            .chat-history {
+                padding: 1rem;
+            }
+            .input-area {
+                padding: 1rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .avatar {
+                width: 32px;
+                height: 32px;
+                font-size: 0.9rem;
+            }
+            .message-content {
+                padding: 0.7rem 1rem;
+                font-size: 0.95rem;
+            }
+            .suggestion-chip {
+                padding: 0.5rem 1rem;
+                font-size: 0.85rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>A Survey of Context Engineering for Large Language Models</h1>
+        <p>Chat with this research paper to explore its key concepts, components, and findings</p>
+        <div class="paper-info">
+            <div class="info-chip">
+                <i class="fas fa-user-graduate"></i>
+                <span>15 Researchers | Multiple Institutions</span>
+            </div>
+            <div class="info-chip">
+                <i class="fas fa-calendar-alt"></i>
+                <span>Published: July 17, 2025</span>
+            </div>
+            <div class="info-chip">
+                <i class="fas fa-tags"></i>
+                <span>Context Engineering, LLM, Multi-Agent Systems</span>
+            </div>
+        </div>
+    </div>
+    <div class="chat-container">
+        <div class="chat-history" id="chat-history">
+            <div class="message bot-message">
+                <div class="avatar bot-avatar">
+                    <i class="fas fa-book"></i>
+                </div>
+                <div class="message-content">
+                    <p>Hello! I'm a digital version of the research paper "A Survey of Context Engineering for Large Language Models." You can ask me about:</p>
+                    <ul style="margin-top: 0.5rem; padding-left: 1.2rem;">
+                        <li>Key concepts of Context Engineering</li>
+                        <li>Foundational components</li>
+                        <li>System implementations</li>
+                        <li>Research findings and limitations</li>
+                        <li>Authors and publication details</li>
+                    </ul>
+                    <p style="margin-top: 0.5rem;">What would you like to know about this research?</p>
+                </div>
+            </div>
+        </div>
+        <div class="suggestions">
+            <div class="suggestion-chip" data-question="What is Context Engineering?">
+                What is Context Engineering?
+            </div>
+            <div class="suggestion-chip" data-question="What are the foundational components?">
+                Foundational components
+            </div>
+            <div class="suggestion-chip" data-question="Explain RAG systems">
+                Explain RAG systems
+            </div>
+            <div class="suggestion-chip" data-question="What are the research limitations?">
+                Research limitations
+            </div>
+        </div>
+        <div class="input-area">
+            <div class="input-container">
+                <input type="text" id="user-input" placeholder="Ask about the research paper...">
+                <i class="fas fa-microphone"></i>
+            </div>
+            <button id="send-button">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatHistory = document.getElementById('chat-history');
+            const userInput = document.getElementById('user-input');
+            const sendButton = document.getElementById('send-button');
+            const suggestionChips = document.querySelectorAll('.suggestion-chip');
+            // Knowledge base about the research paper
+            const knowledgeBase = {
+                "what is context engineering": {
+                    answer: "Context Engineering is a formal discipline that transcends simple prompt design to encompass the systematic optimization of information payloads for Large Language Models (LLMs). It focuses on how contextual information provided during inference fundamentally determines LLM performance.",
+                    reference: "Abstract, Section 3.1"
+                },
+                "foundational components": {
+                    answer: "The foundational components of Context Engineering are:<br><br>1. <strong>Context Retrieval and Generation</strong>: Prompt-based generation and external knowledge acquisition<br>2. <strong>Context Processing</strong>: Long sequence processing, self-refinement, and structured information integration<br>3. <strong>Context Management</strong>: Memory hierarchies, compression, and optimization techniques",
+                    reference: "Section 4: Foundational Components"
+                },
+                "system implementations": {
+                    answer: "The paper identifies four sophisticated system implementations:<br><br>1. <strong>Retrieval-Augmented Generation (RAG)</strong>: Modular, agentic, and graph-enhanced architectures<br>2. <strong>Memory Systems</strong>: Enable persistent interactions<br>3. <strong>Tool-Integrated Reasoning</strong>: For function calling and environmental interaction<br>4. <strong>Multi-Agent Systems</strong>: Coordinating communication and orchestration",
+                    reference: "Section 5: System Implementations"
+                },
+                "research gap": {
+                    answer: "The survey reveals a critical research gap: While current models demonstrate remarkable proficiency in <strong>understanding</strong> complex contexts (with context engineering), they show pronounced limitations in <strong>generating</strong> equally sophisticated, long-form outputs. Addressing this asymmetry is a defining priority for future research.",
+                    reference: "Abstract, Section 3.2"
+                },
+                "rag systems": {
+                    answer: "Retrieval-Augmented Generation (RAG) systems integrate retrieval mechanisms with LLMs to enhance context. The paper identifies three architectural approaches:<br><br>1. <strong>Modular RAG</strong>: Fixed pipeline with separate retrieval and generation components<br>2. <strong>Agentic RAG</strong>: Dynamic systems that can plan and refine retrieval strategies<br>3. <strong>Graph-Enhanced RAG</strong>: Incorporates knowledge graphs for structured context representation",
+                    reference: "Section 5.1"
+                },
+                "context processing techniques": {
+                    answer: "Key context processing techniques include:<br><br>- <strong>Long Context Processing</strong>: Methods to handle extended sequences beyond standard context windows<br>- <strong>Contextual Self-Refinement</strong>: Models that iteratively improve context understanding<br>- <strong>Multimodal Context Integration</strong>: Combining text with visual, audio, or other sensory data<br>- <strong>Structured Context Representation</strong>: Using knowledge graphs or schemas to organize information",
+                    reference: "Section 4.2"
+                },
+                "authors": {
+                    answer: "The paper is authored by 15 researchers from multiple institutions:<br><br>- Lingrui Mei, Jiayu Yao, Yuyao Ge, Baolong Bi, Jiazhi Liu, Mingyu Li, Zhong-Zhi Li, Duzhen Zhang, Jiafeng Guo, Shenghua Liu (ICT, Chinese Academy of Sciences)<br>- Yiwei Wang (UC Merced)<br>- Yujun Cai (University of Queensland)<br>- Chenlin Zhou (Peking University)<br>- Jiayi Mao (Tsinghua University)<br>- Tianze Xia (University of Chinese Academy of Sciences)",
+                    reference: "Title Page"
+                },
+                "methodology": {
+                    answer: "This survey is based on systematic analysis of over 1,400 research papers. It establishes a technical roadmap for Context Engineering through:<br><br>1. Comprehensive taxonomy development<br>2. Component decomposition<br>3. Implementation analysis<br>4. Identification of research gaps<br>5. Development of a unified framework",
+                    reference: "Abstract, Section 1"
+                },
+                "contact": {
+                    answer: "Corresponding authors:<br><br>- Lingrui Mei: meilingrui23b@ict.ac.cn<br>- Shenghua Liu: liushenghua@ict.ac.cn<br><br>Code Repository: https://github.com/Meirtz/Awesome-Context-Engineering",
+                    reference: "Title Page"
+                }
+            };
+            // Add message to chat
+            function addMessage(text, isUser) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+                const avatar = document.createElement('div');
+                avatar.className = `avatar ${isUser ? 'user-avatar' : 'bot-avatar'}`;
+                avatar.innerHTML = `<i class="fas ${isUser ? 'fa-user' : 'fa-book'}"></i>`;
+                const content = document.createElement('div');
+                content.className = 'message-content';
+                content.innerHTML = `<p>${text}</p>`;
+                messageDiv.appendChild(avatar);
+                messageDiv.appendChild(content);
+                chatHistory.appendChild(messageDiv);
+                // Scroll to bottom
+                chatHistory.scrollTop = chatHistory.scrollHeight;
+            }
+            // Show typing indicator
+            function showTyping() {
+                const typingDiv = document.createElement('div');
+                typingDiv.className = 'typing-indicator';
+                typingDiv.id = 'typing-indicator';
+                for (let i = 0; i < 3; i++) {
+                    const dot = document.createElement('div');
+                    dot.className = 'typing-dot';
+                    typingDiv.appendChild(dot);
+                }
+                chatHistory.appendChild(typingDiv);
+                chatHistory.scrollTop = chatHistory.scrollHeight;
+                return typingDiv;
+            }
+            // Process user question
+            function processQuestion(question) {
+                // Add user message
+                addMessage(question, true);
+                // Show typing indicator
+                const typingIndicator = showTyping();
+                // Find best match in knowledge base (simple implementation)
+                const cleanQuestion = question.toLowerCase().trim();
+                let response = null;
+                // Check for direct matches first
+                for (const [key, value] of Object.entries(knowledgeBase)) {
+                    if (cleanQuestion.includes(key)) {
+                        response = value;
+                        break;
+                    }
+                }
+                // If no direct match, try to find similar
+                if (!response) {
+                    const keywords = Object.keys(knowledgeBase);
+                    for (const keyword of keywords) {
+                        if (cleanQuestion.includes(keyword.split(' ')[0]) ||
+                            cleanQuestion.includes(keyword.split(' ')[1])) {
+                            response = knowledgeBase[keyword];
+                            break;
+                        }
+                    }
+                }
+                // Default response if no match found
+                if (!response) {
+                    response = {
+                        answer: "I'm sorry, I don't have specific information about that aspect of the paper. " +
+                                "You might ask about:<br><br>" +
+                                "- What Context Engineering is<br>" +
+                                "- The foundational components<br>" +
+                                "- System implementations like RAG<br>" +
+                                "- Research findings and limitations",
+                        reference: ""
+                    };
+                }
+                // Simulate processing delay
+                setTimeout(() => {
+                    // Remove typing indicator
+                    if (typingIndicator) typingIndicator.remove();
+                    // Add bot response
+                    let fullResponse = response.answer;
+                    if (response.reference) {
+                        fullResponse += `<div class="reference">Reference: ${response.reference}</div>`;
+                    }
+                    addMessage(fullResponse, false);
+                }, 1500);
+            }
+            // Event listeners
+            sendButton.addEventListener('click', () => {
+                if (userInput.value.trim() !== '') {
+                    processQuestion(userInput.value);
+                    userInput.value = '';
+                }
+            });
+            userInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && userInput.value.trim() !== '') {
+                    processQuestion(userInput.value);
+                    userInput.value = '';
+                }
+            });
+            // Suggestion chips
+            suggestionChips.forEach(chip => {
+                chip.addEventListener('click', () => {
+                    const question = chip.getAttribute('data-question');
+                    userInput.value = question;
+                    processQuestion(question);
+                });
+            });
+        });
+    </script>
+</body>
+</html>