Spaces:

sathaye3
/

docuchat-oracle

Running

App Files Files Community

sathaye3 commited on Oct 24, 2025

Commit

a50c30f

verified ·

1 Parent(s): 047f6a2

it is not answering questions from the document

Browse files

I want answer that are fetched from the document

Got this : I received your question about "what is a deductible?". This would connect to a backend that processes the document

Want this :• A deductible is the amount of money you have to pay toward covered services each year before insurance will help pay. This amount is determined by your insurance plan and resets each year.

Files changed (6) hide show

README.md +8 -5
components/footer.js +49 -0
components/navbar.js +56 -0
index.html +156 -19
script.js +96 -0
style.css +19 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Docuchat Oracle
-emoji: 🦀
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DocuChat Oracle 🔮
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,49 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1F2937;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .links {
+          display: flex;
+          justify-content: center;
+          gap: 2rem;
+          margin-bottom: 1rem;
+        }
+        .links a {
+          color: #D1D5DB;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .links a:hover {
+          color: white;
+        }
+        .copyright {
+          color: #9CA3AF;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="links">
+            <a href="#">Privacy</a>
+            <a href="#">Terms</a>
+            <a href="#">Contact</a>
+          </div>
+          <p class="copyright">&copy; 2023 DocuChat Buddy. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,56 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: white;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .logo {
+          color: #6366F1;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .logo-icon {
+          color: #10B981;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: #4B5563;
+          text-decoration: none;
+          transition: color 0.2s;
+          font-weight: 500;
+        }
+        a:hover {
+          color: #6366F1;
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">
+          <i data-feather="message-square" class="logo-icon"></i>
+          <span>DocuChat Buddy</span>
+        </a>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="#">API Docs</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,156 @@
-<!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>DocuChat Buddy</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                500: '#6366F1',
+              },
+              secondary: {
+                500: '#10B981',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="p-6">
+                <h1 class="text-2xl font-bold text-gray-800 mb-6">DocuChat Buddy</h1>
+                <div class="border border-gray-200 rounded-lg p-4 h-96 overflow-y-auto mb-4" id="chat-container">
+                    <div class="flex items-start mb-4">
+                        <div class="bg-primary-500 text-white p-3 rounded-full mr-3">
+                            <i data-feather="message-square" class="w-4 h-4"></i>
+                        </div>
+                        <div class="bg-gray-100 p-3 rounded-lg max-w-xs">
+                            <p class="text-gray-700">Hello! Upload a document and I'll answer your questions about it.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2 mb-4">
+                    <label for="file-upload" class="cursor-pointer bg-secondary-500 text-white px-4 py-2 rounded-lg hover:bg-secondary-600 transition flex items-center gap-2">
+                        <i data-feather="upload" class="w-4 h-4"></i>
+                        <span>Upload Document</span>
+                        <input id="file-upload" type="file" class="hidden" accept=".pdf,.doc,.docx,.txt">
+                    </label>
+                    <span id="file-name" class="text-gray-500 text-sm truncate max-w-xs"></span>
+                </div>
+                <div class="flex gap-2">
+                    <input type="text" id="user-input" placeholder="Ask something about the document..." class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    <button id="send-btn" class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition flex items-center gap-2">
+                        <i data-feather="send" class="w-4 h-4"></i>
+                        <span>Send</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Simple chat functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chat-container');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const fileUpload = document.getElementById('file-upload');
+            const fileName = document.getElementById('file-name');
+            fileUpload.addEventListener('change', function(e) {
+                    if (e.target.files.length > 0) {
+                        fileName.textContent = e.target.files[0].name;
+                        await processDocument(e.target.files[0]);
+                        addMessage('bot', 'Document uploaded! You can now ask questions about it.');
+                    }
+});
+            sendBtn.addEventListener('click', sendMessage);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') sendMessage();
+            });
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (message) {
+                    addMessage('user', message);
+                    userInput.value = '';
+                    // Get answer from document
+                    setTimeout(async () => {
+                        try {
+                            const response = await askQuestion(message);
+                            if (response.answer.includes("couldn't find")) {
+                                addMessage('bot', response.answer);
+                            } else {
+                                // Format the answer better
+                                const formattedAnswer = "• " + response.answer.replace(/\n/g, '\n• ');
+                                addMessage('bot', formattedAnswer);
+                            }
+                        } catch (error) {
+                            addMessage('bot', "Sorry, I encountered an error processing your question.");
+                            console.error(error);
+                        }
+                    }, 800);
+}
+            }
+            function addMessage(sender, text) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `flex items-start mb-4 ${sender === 'user' ? 'justify-end' : ''}`;
+                const messageContent = document.createElement('div');
+                messageContent.className = sender === 'user'
+                    ? 'bg-primary-500 text-white p-3 rounded-lg max-w-xs'
+                    : 'bg-gray-100 p-3 rounded-lg max-w-xs';
+                messageContent.textContent = text;
+                const iconDiv = document.createElement('div');
+                iconDiv.className = sender === 'user'
+                    ? 'bg-primary-500 text-white p-3 rounded-full ml-3'
+                    : 'bg-primary-500 text-white p-3 rounded-full mr-3';
+                const icon = document.createElement('i');
+                icon.setAttribute('data-feather', sender === 'user' ? 'user' : 'message-square');
+                icon.className = 'w-4 h-4';
+                iconDiv.appendChild(icon);
+                if (sender === 'user') {
+                    messageDiv.appendChild(messageContent);
+                    messageDiv.appendChild(iconDiv);
+                } else {
+                    messageDiv.appendChild(iconDiv);
+                    messageDiv.appendChild(messageContent);
+                }
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+                feather.replace();
+            }
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,96 @@

+// Document content storage
+let documentContent = '';
+// Process uploaded document
+async function processDocument(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            documentContent = e.target.result;
+            resolve({ success: true });
+        };
+        reader.readAsText(file);
+    });
+}
+// Enhanced document search function with semantic matching
+function searchDocument(question) {
+    if (!documentContent) return "Please upload a document first.";
+    const questionLower = question.toLowerCase();
+    const docLower = documentContent.toLowerCase();
+    // Split into paragraphs first for better context
+    const paragraphs = documentContent.split('\n\n');
+    // Search for direct matches first
+    for (const paragraph of paragraphs) {
+        const paraLower = paragraph.toLowerCase();
+        if (paraLower.includes(questionLower) ||
+            (questionLower.includes('what') && paraLower.includes('is') && paraLower.includes(questionLower.split('what is ')[1]))) {
+            // Clean up the paragraph and return the most relevant sentence
+            const sentences = paragraph.split(/[.!?]+/);
+            for (const sentence of sentences) {
+                if (sentence.toLowerCase().includes(questionLower)) {
+                    return sentence.trim() + '.';
+                }
+            }
+            return paragraph.trim();
+        }
+    }
+    // If no direct match, try to find related content
+    const keywords = questionLower.split(' ');
+    let bestMatch = '';
+    let highestScore = 0;
+    for (const paragraph of paragraphs) {
+        const paraLower = paragraph.toLowerCase();
+        let score = 0;
+        for (const word of keywords) {
+            if (word.length > 3 && paraLower.includes(word)) {
+                score++;
+            }
+        }
+        if (score > highestScore) {
+            highestScore = score;
+            bestMatch = paragraph;
+        }
+    }
+    if (bestMatch) {
+        // Extract the most relevant sentence
+        const sentences = bestMatch.split(/[.!?]+/);
+        for (const sentence of sentences) {
+            if (sentence.toLowerCase().includes(keywords[0])) {
+                return sentence.trim() + '.';
+            }
+        }
+        return bestMatch.trim();
+    }
+    return "I couldn't find a specific answer in the document. Please try rephrasing your question.";
+}
+async function askQuestion(question) {
+    if (!documentContent) {
+        return { answer: "Please upload a document first." };
+    }
+    const answer = searchDocument(question);
+    // Enhance simple answers with more context
+    let enhancedAnswer = answer;
+    if (answer.includes('is') && !answer.includes('.')) {
+        // Try to find the next sentence for more context
+        const sentences = documentContent.split(/[.!?]+/);
+        const idx = sentences.findIndex(s => s.trim() + '.' === answer);
+        if (idx !== -1 && idx < sentences.length - 1) {
+            enhancedAnswer += ' ' + sentences[idx+1].trim() + '.';
+        }
+    }
+    return { answer: enhancedAnswer };
+}

style.css CHANGED Viewed

@@ -1,28 +1,28 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom scrollbar for chat container */
+#chat-container::-webkit-scrollbar {
+    width: 6px;
 }
+#chat-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
+#chat-container::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 10px;
 }
+#chat-container::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
 }
+/* Animation for messages */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+#chat-container > div {
+    animation: fadeIn 0.3s ease-out;
+}