Spaces:

jasvir-singh1021
/

Easy-data-parser

Sleeping

App Files Files Community

jasvir-singh1021 commited on Jul 27, 2025

Commit

e7a4605

verified ·

1 Parent(s): 7aa8120

Upload src/streamlit_app.py with huggingface_hub

Browse files

Files changed (1) hide show

src/streamlit_app.py +752 -40

src/streamlit_app.py CHANGED Viewed

@@ -1,40 +1,752 @@
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-"""
-# Welcome to Streamlit!
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))

+<!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>