Spaces:

jasvir-singh1021
/

Easy-data-parser

Sleeping

App Files Files Community

jasvir-singh1021 commited on Jul 27, 2025

Commit

4f19981

verified ·

1 Parent(s): 8e8e99c

Update src/streamlit_app.py

Browse files

Files changed (1) hide show

src/streamlit_app.py +80 -752

src/streamlit_app.py CHANGED Viewed

@@ -1,752 +1,80 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document Parser - LlamaIndex & GPT-4</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-color: #1a1a2e;
-            --secondary-color: #16213e;
-            --accent-color: #0f3460;
-            --highlight-color: #e94560;
-            --text-primary: #ffffff;
-            --text-secondary: #b3b3b3;
-            --bg-primary: #0a0a0a;
-            --bg-secondary: #1a1a1a;
-            --bg-tertiary: #2a2a2a;
-            --success-color: #4ade80;
-            --warning-color: #fbbf24;
-            --error-color: #ef4444;
-            --border-radius: 12px;
-            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
-            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
-            --transition: all 0.3s ease;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 3rem;
-            animation: fadeInDown 0.6s ease;
-        }
-        .header h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--highlight-color), #ff6b6b);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 0.5rem;
-        }
-        .header p {
-            color: var(--text-secondary);
-            font-size: 1.2rem;
-        }
-        .card {
-            background: var(--bg-secondary);
-            border-radius: var(--border-radius);
-            padding: 2rem;
-            box-shadow: var(--shadow-lg);
-            border: 1px solid #333;
-            margin-bottom: 2rem;
-            transition: var(--transition);
-        }
-        .card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
-        }
-        .input-group {
-            margin-bottom: 1.5rem;
-        }
-        .input-label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-        .input-field {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            background: var(--bg-tertiary);
-            border: 1px solid #444;
-            border-radius: var(--border-radius);
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: var(--transition);
-        }
-        .input-field:focus {
-            outline: none;
-            border-color: var(--highlight-color);
-            box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.2);
-        }
-        .slider-container {
-            margin-bottom: 2rem;
-        }
-        .slider {
-            width: 100%;
-            height: 6px;
-            background: var(--bg-tertiary);
-            border-radius: 3px;
-            outline: none;
-            -webkit-appearance: none;
-            cursor: pointer;
-        }
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            background: var(--highlight-color);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        .slider::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-        }
-        .file-upload {
-            position: relative;
-            display: inline-block;
-            width: 100%;
-        }
-        .file-upload-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-            border: 2px dashed #555;
-            border-radius: var(--border-radius);
-            cursor: pointer;
-            transition: var(--transition);
-            background: var(--bg-tertiary);
-        }
-        .file-upload-label:hover {
-            border-color: var(--highlight-color);
-            background: var(--bg-secondary);
-        }
-        .file-upload-input {
-            display: none;
-        }
-        .upload-icon {
-            font-size: 3rem;
-            color: var(--highlight-color);
-            margin-bottom: 1rem;
-        }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.75rem 1.5rem;
-            background: var(--highlight-color);
-            color: white;
-            border: none;
-            border-radius: var(--border-radius);
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: var(--transition);
-            text-decoration: none;
-            gap: 0.5rem;
-        }
-        .btn:hover {
-            background: #ff5252;
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-md);
-        }
-        .btn-secondary {
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            border: 1px solid #555;
-        }
-        .btn-secondary:hover {
-            background: #444;
-        }
-        .btn-danger {
-            background: var(--error-color);
-        }
-        .btn-danger:hover {
-            background: #dc2626;
-        }
-        .chat-container {
-            max-height: 600px;
-            overflow-y: auto;
-            padding: 1rem;
-            background: var(--bg-secondary);
-            border-radius: var(--border-radius);
-            margin-bottom: 1rem;
-        }
-        .chat-message {
-            display: flex;
-            margin-bottom: 1rem;
-            animation: fadeInUp 0.3s ease;
-        }
-        .chat-message.user {
-            justify-content: flex-end;
-        }
-        .chat-message.assistant {
-            justify-content: flex-start;
-        }
-        .chat-bubble {
-            max-width: 70%;
-            padding: 1rem;
-            border-radius: var(--border-radius);
-            word-wrap: break-word;
-            position: relative;
-        }
-        .chat-message.user .chat-bubble {
-            background: linear-gradient(135deg, var(--highlight-color), #ff6b6b);
-            color: white;
-            border-bottom-right-radius: 4px;
-        }
-        .chat-message.assistant .chat-bubble {
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            border-bottom-left-radius: 4px;
-        }
-        .loading {
-            display: inline-block;
-            position: relative;
-            width: 20px;
-            height: 20px;
-        }
-        .loading div {
-            position: absolute;
-            top: 8px;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--text-secondary);
-            animation-timing-function: cubic-bezier(0, 1, 1, 0);
-        }
-        .loading div:nth-child(1) {
-            left: 0;
-            animation: loading1 0.6s infinite;
-        }
-        .loading div:nth-child(2) {
-            left: 6px;
-            animation: loading2 0.6s infinite;
-        }
-        .loading div:nth-child(3) {
-            left: 12px;
-            animation: loading2 0.6s infinite;
-        }
-        .loading div:nth-child(4) {
-            left: 18px;
-            animation: loading3 0.6s infinite;
-        }
-        @keyframes loading1 {
-            0% { transform: scale(0); }
-            100% { transform: scale(1); }
-        }
-        @keyframes loading3 {
-            0% { transform: scale(1); }
-            100% { transform: scale(0); }
-        }
-        @keyframes loading2 {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(6px, 0); }
-        }
-        @keyframes fadeInDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
-        }
-        .alert {
-            padding: 1rem;
-            border-radius: var(--border-radius);
-            margin-bottom: 1rem;
-            animation: fadeInUp 0.3s ease;
-        }
-        .alert-info {
-            background: rgba(59, 130, 246, 0.1);
-            border: 1px solid rgba(59, 130, 246, 0.3);
-            color: #93c5fd;
-        }
-        .alert-warning {
-            background: rgba(245, 158, 11, 0.1);
-            border: 1px solid rgba(245, 158, 11, 0.3);
-            color: #fbbf24;
-        }
-        .alert-error {
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            color: #f87171;
-        }
-        .file-list {
-            margin-top: 1rem;
-        }
-        .file-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.5rem 1rem;
-            background: var(--bg-tertiary);
-            border-radius: var(--border-radius);
-            margin-bottom: 0.5rem;
-            animation: fadeInUp 0.3s ease;
-        }
-        .file-name {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: var(--text-primary);
-        }
-        .file-icon {
-            color: var(--highlight-color);
-        }
-        .remove-file {
-            background: none;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            padding: 0.25rem;
-            transition: var(--transition);
-        }
-        .remove-file:hover {
-            color: var(--error-color);
-            transform: scale(1.1);
-        }
-        .references {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: var(--bg-tertiary);
-            border-radius: var(--border-radius);
-            border-left: 3px solid var(--highlight-color);
-        }
-        .references summary {
-            cursor: pointer;
-            font-weight: 600;
-            color: var(--highlight-color);
-        }
-        .references details {
-            margin-top: 0.5rem;
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-            .header h1 {
-                font-size: 2rem;
-            }
-            .grid {
-                grid-template-columns: 1fr;
-            }
-            .chat-bubble {
-                max-width: 85%;
-            }
-        }
-        .spinner {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(233, 69, 96, 0.3);
-            border-radius: 50%;
-            border-top-color: var(--highlight-color);
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1><i class="fas fa-file-alt"></i> Document Parser</h1>
-            <p>Upload documents and chat with GPT-4 powered AI</p>
-        </div>
-        <div class="card">
-            <div class="input-group">
-                <label class="input-label" for="apiKey">
-                    <i class="fas fa-key"></i> OpenAI API Key
-                </label>
-                <input type="password" id="apiKey" class="input-field" placeholder="Enter your OpenAI API key">
-            </div>
-            <div class="slider-container">
-                <label class="input-label">
-                    <i class="fas fa-thermometer-half"></i> Model Temperature
-                    <span id="tempValue">0.0</span>
-                </label>
-                <input type="range" id="temperature" class="slider" min="0" max="1" step="0.1" value="0">
-            </div>
-            <div class="input-group">
-                <label class="input-label">
-                    <i class="fas fa-cloud-upload-alt"></i> Upload Documents
-                </label>
-                <div class="file-upload">
-                    <label class="file-upload-label" for="fileInput">
-                        <div>
-                            <i class="fas fa-cloud-upload-alt upload-icon"></i>
-                            <p>Click to upload or drag files here</p>
-                            <small>Supported formats: PDF, DOCX, DOC, TXT, RTF, HTML</small>
-                        </div>
-                    </label>
-                    <input type="file" id="fileInput" class="file-upload-input" multiple accept=".pdf,.docx,.doc,.txt,.rtf,.html">
-                </div>
-                <div id="fileList" class="file-list"></div>
-            </div>
-            <div style="text-align: right; margin-top: 1rem;">
-                <button class="btn btn-danger" onclick="clearConversation()">
-                    <i class="fas fa-trash"></i> Clear History
-                </button>
-            </div>
-        </div>
-        <div id="chatSection" style="display: none;">
-            <div class="card">
-                <div class="input-group">
-                    <label class="input-label">
-                        <i class="fas fa-question-circle"></i> Ask a question
-                    </label>
-                    <div style="display: flex; gap: 0.5rem;">
-                        <input type="text" id="questionInput" class="input-field" placeholder="Ask about your documents...">
-                        <button class="btn" onclick="askQuestion()">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </div>
-                </div>
-                <div id="chatContainer" class="chat-container">
-                    <div id="chatMessages"></div>
-                </div>
-                <div class="grid">
-                    <button class="btn btn-secondary" onclick="downloadConversation('txt')">
-                        <i class="fas fa-download"></i> Download TXT
-                    </button>
-                    <button class="btn btn-secondary" onclick="downloadConversation('json')">
-                        <i class="fas fa-download"></i> Download JSON
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        let uploadedFiles = [];
-        let conversationHistory = [];
-        let isProcessing = false;
-        // Temperature slider
-        const tempSlider = document.getElementById('temperature');
-        const tempValue = document.getElementById('tempValue');
-        tempSlider.addEventListener('input', (e) => {
-            tempValue.textContent = e.target.value;
-        });
-        // File upload handling
-        const fileInput = document.getElementById('fileInput');
-        const fileList = document.getElementById('fileList');
-        fileInput.addEventListener('change', (e) => {
-            const files = Array.from(e.target.files);
-            uploadedFiles = [...uploadedFiles, ...files];
-            renderFileList();
-            document.getElementById('chatSection').style.display = 'block';
-        });
-        function renderFileList() {
-            fileList.innerHTML = '';
-            uploadedFiles.forEach((file, index) => {
-                const fileItem = document.createElement('div');
-                fileItem.className = 'file-item';
-                fileItem.innerHTML = `
-                    <div class="file-name">
-                        <i class="fas fa-file file-icon"></i>
-                        <span>${file.name}</span>
-                    </div>
-                    <button class="remove-file" onclick="removeFile(${index})">
-                        <i class="fas fa-times"></i>
-                    </button>
-                `;
-                fileList.appendChild(fileItem);
-            });
-        }
-        function removeFile(index) {
-            uploadedFiles.splice(index, 1);
-            renderFileList();
-            if (uploadedFiles.length === 0) {
-                document.getElementById('chatSection').style.display = 'none';
-            }
-        }
-        async function askQuestion() {
-            const apiKey = document.getElementById('apiKey').value;
-            const question = document.getElementById('questionInput').value;
-            const temperature = parseFloat(document.getElementById('temperature').value);
-            if (!apiKey) {
-                showAlert('Please enter your OpenAI API key', 'error');
-                return;
-            }
-            if (!question.trim()) {
-                showAlert('Please enter a question', 'warning');
-                return;
-            }
-            if (uploadedFiles.length === 0) {
-                showAlert('Please upload some documents first', 'warning');
-                return;
-            }
-            if (isProcessing) return;
-            isProcessing = true;
-            addMessage('user', question);
-            document.getElementById('questionInput').value = '';
-            const formData = new FormData();
-            formData.append('apiKey', apiKey);
-            formData.append('question', question);
-            formData.append('temperature', temperature);
-            uploadedFiles.forEach(file => {
-                formData.append('documents', file);
-            });
-            addMessage('assistant', '<div class="spinner"></div> Processing...');
-            try {
-                // Simulate processing delay
-                await new Promise(resolve => setTimeout(resolve, 2000));
-                // Mock response
-                const mockResponse = {
-                    answer: `Based on the uploaded documents, here's what I found: ${question}`,
-                    sources: [
-                        { page: 1, text: "This is a preview of the source text..." }
-                    ]
-                };
-                updateLastMessage(mockResponse.answer);
-            } catch (error) {
-                updateLastMessage('Error processing your request. Please try again.');
-                showAlert('Error processing request', 'error');
-            }
-            isProcessing = false;
-        }
-        function addMessage(role, content) {
-            const message = { role, content };
-            conversationHistory.push(message);
-            const chatMessages = document.getElementById('chatMessages');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `chat-message ${role}`;
-            messageDiv.innerHTML = `
-                <div class="chat-bubble">
-                    ${content}
-                </div>
-            `;
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-        function updateLastMessage(content) {
-            const chatMessages = document.getElementById('chatMessages');
-            const lastMessage = chatMessages.lastElementChild;
-            if (lastMessage) {
-                lastMessage.querySelector('.chat-bubble').innerHTML = content;
-            }
-            if (conversationHistory.length > 0) {
-                conversationHistory[conversationHistory.length - 1].content = content;
-            }
-        }
-        function clearConversation() {
-            conversationHistory = [];
-            document.getElementById('chatMessages').innerHTML = '';
-            document.getElementById('questionInput').value = '';
-        }
-        function downloadConversation(format) {
-            let content, filename, mimeType;
-            if (format === 'txt') {
-                content = conversationHistory.map(msg => `${msg.role.toUpperCase()}:\n${msg.content}\n`).join('\n');
-                filename = 'conversation.txt';
-                mimeType = 'text/plain';
-            } else {
-                content = JSON.stringify(conversationHistory, null, 2);
-                filename = 'conversation.json';
-                mimeType = 'application/json';
-            }
-            const blob = new Blob([content], { type: mimeType });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            a.click();
-            URL.revokeObjectURL(url);
-        }
-        function showAlert(message, type = 'info') {
-            const alertDiv = document.createElement('div');
-            alertDiv.className = `alert alert-${type}`;
-            alertDiv.textContent = message;
-            document.body.insertBefore(alertDiv, document.body.firstChild);
-            setTimeout(() => {
-                alertDiv.remove();
-            }, 5000);
-        }
-        // Drag and drop functionality
-        const uploadLabel = document.querySelector('.file-upload-label');
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            uploadLabel.addEventListener(eventName, preventDefaults, false);
-        });
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        ['dragenter', 'dragover'].forEach(eventName => {
-            uploadLabel.addEventListener(eventName, highlight);
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            uploadLabel.addEventListener(eventName, unhighlight);
-        });
-        function highlight() {
-            uploadLabel.style.borderColor = '#e94560';
-            uploadLabel.style.background = '#111';
-        }
-        function unhighlight() {
-            uploadLabel.style.borderColor = '#555';
-            uploadLabel.style.background = '#2a2a2a';
-        }
-        uploadLabel.addEventListener('drop', handleDrop);
-        function handleDrop(e) {
-            const files = Array.from(e.dataTransfer.files);
-            uploadedFiles = [...uploadedFiles, ...files];
-            renderFileList();
-            document.getElementById('chatSection').style.display = 'block';
-        }
-        // Enter key to send question
-        document.getElementById('questionInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                askQuestion();
-            }
-        });
-    </script>
-</body>
-</html>

+import streamlit as st
+import json
+from io import StringIO
+# Configure page
+st.set_page_config(page_title="Document Parser", layout="wide")
+# Session state for conversation history
+if "conversation" not in st.session_state:
+    st.session_state.conversation = []
+# Sidebar: API key + temperature
+with st.sidebar:
+    st.title("⚙️ Settings")
+    api_key = st.text_input("🔑 OpenAI API Key", type="password")
+    temperature = st.slider("🔥 Model Temperature", 0.0, 1.0, 0.0, 0.1)
+# Main header
+st.title("📄 Document Parser")
+st.markdown("Upload documents and chat with a GPT-4 powered assistant.")
+# Upload documents
+uploaded_files = st.file_uploader(
+    "📤 Upload Documents (PDF, DOCX, TXT, etc.)",
+    type=["pdf", "docx", "doc", "txt", "rtf", "html"],
+    accept_multiple_files=True
+)
+if uploaded_files:
+    st.success(f"{len(uploaded_files)} document(s) uploaded.")
+else:
+    st.info("Please upload at least one document to continue.")
+# Input for user question
+question = st.text_input("💬 Ask a question about your documents:")
+# Send button
+if st.button("🚀 Ask") and question and uploaded_files and api_key:
+    with st.spinner("Processing..."):
+        # Here you'd pass files + question + temperature + API key to your backend
+        # Replace this with real logic (e.g., LlamaIndex + OpenAI)
+        mock_answer = f"🧠 Based on the uploaded documents, here's a mock answer to: '{question}'"
+        # Add to conversation history
+        st.session_state.conversation.append({"role": "user", "content": question})
+        st.session_state.conversation.append({"role": "assistant", "content": mock_answer})
+# Display conversation
+if st.session_state.conversation:
+    st.markdown("## 🧾 Conversation")
+    for msg in st.session_state.conversation:
+        if msg["role"] == "user":
+            st.markdown(f"**You:** {msg['content']}")
+        else:
+            st.markdown(f"**Assistant:** {msg['content']}")
+    st.markdown("---")
+    # Download buttons
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("🗑️ Clear Conversation"):
+            st.session_state.conversation = []
+            st.experimental_rerun()
+    with col2:
+        format = st.selectbox("Download Format", ["TXT", "JSON"])
+        if format == "TXT":
+            content = "\n\n".join(
+                f"{msg['role'].capitalize()}:\n{msg['content']}" for msg in st.session_state.conversation
+            )
+            mime = "text/plain"
+            filename = "conversation.txt"
+        else:
+            content = json.dumps(st.session_state.conversation, indent=2)
+            mime = "application/json"
+            filename = "conversation.json"
+        st.download_button("📥 Download", content, filename=filename, mime=mime)