Hugging Face's logo

Spaces:
jatinmehra
/
PDF-Insight-PRO
Running

App Files Community
PDF-Insight-PRO
File size: 5,850 Bytes 
e3257b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1862c3b
e3257b5
 
 
 
 
 
 
 
6c81e4d
e3257b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6c81e4d
e3257b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Insight Beta</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- Add Highlight.js for code syntax highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- Add Marked.js for Markdown rendering -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- Mobile menu toggle button -->
        <button id="menu-toggle" class="menu-toggle hidden">
            <i class="fas fa-bars"></i>
        </button>
        
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="logo-container">
                <h1>PDF Insight <span class="beta">Beta</span></h1>
            </div>
            <div class="upload-container">
                <div class="upload-box" id="upload-box">
                    <i class="fas fa-file-pdf upload-icon"></i>
                    <p>Upload PDF Document</p>
                    <input type="file" id="pdf-upload" accept=".pdf,.txt" hidden>
                </div>
                <div class="model-selection">
                    <label for="model-select">Select Model:</label>
                    <select id="model-select">
                        <option value="meta-llama/llama-4-scout-17b-16e-instruct">Llama 4 Scout 17B</option>
                        <option value="llama-3.1-8b-instant">Llama 3.1 8B Instant</option>
                        <option value="llama-3.3-70b-versatile">Llama 3.3 70B Versatile</option>
                        <option value="openai/gpt-oss-120b">OpenAI GPT-oss-120b</option>
                    </select>
                </div>
                <div class="session-info hidden" id="session-info">
                    <div class="file-info">
                        <i class="fas fa-file-pdf"></i>
                        <span id="current-file-name">No file loaded</span>
                    </div>
                    <button id="clear-history" class="btn-clear">Clear History</button>
                    <button id="remove-pdf" class="btn-remove">Remove PDF</button>
                    <button id="new-chat" class="btn-new">New Document</button>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Welcome Screen -->
            <div class="welcome-screen" id="welcome-screen">
                <div class="welcome-header">
                    <h1>Welcome to PDF Insight Beta</h1>
                    <p>Upload a PDF document and start asking questions about it</p>
                </div>
                <div class="features">
                    <div class="feature">
                        <i class="fas fa-file-pdf"></i>
                        <h3>PDF Processing</h3>
                        <p>Upload any PDF document for instant analysis</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-robot"></i>
                        <h3>Agentic RAG</h3>
                        <p>Advanced retrieval augmented generation for accurate answers</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-search"></i>
                        <h3>Web Search Integration</h3>
                        <p>Verify document information with internet search capabilities</p>
                    </div>
                </div>
                <div class="get-started">
                    <button id="get-started-btn" class="btn-primary">Get Started</button>
                </div>
            </div>

            <!-- Chat Interface -->
            <div class="chat-container hidden" id="chat-container">
                <div class="chat-messages" id="chat-messages">
                    <div class="system-message">
                        <p>Upload successful! You can now ask questions about the document.</p>
                    </div>
                </div>
                <div class="chat-input-container">
                    <div class="search-toggle">
                        <input type="checkbox" id="search-toggle">
                        <label for="search-toggle">Use web search</label>
                    </div>
                    <div class="chat-input-box">
                        <textarea id="chat-input" placeholder="Ask a question about the document..."></textarea>
                        <button id="send-button" disabled>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Context Sidebar -->
        <div class="context-sidebar hidden" id="context-sidebar">
            <div class="context-header">
                <h3>Context Used</h3>
                <button id="toggle-context" class="btn-toggle">
                    <i class="fas fa-angle-right"></i>
                </button>
            </div>
            <div class="context-content" id="context-content">
                <p class="no-context">No context available yet. Ask a question first.</p>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="loading-overlay hidden" id="loading-overlay">
        <div class="spinner"></div>
        <p id="loading-text">Processing Document...</p>
    </div>

    <script src="js/app.js"></script>
</body>
</html>