Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document Q&A</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| .box { | |
| width: 100%; | |
| max-width: 700px; | |
| background: white; | |
| padding: 30px; | |
| border-radius: 22px; | |
| box-shadow: 0 10px 35px rgba(0,0,0,.2); | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| .info { | |
| text-align: center; | |
| color: #666; | |
| margin-bottom: 25px; | |
| } | |
| input[type="file"] { | |
| width: 100%; | |
| padding: 15px; | |
| border: 2px dashed #aaa; | |
| border-radius: 12px; | |
| box-sizing: border-box; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 120px; | |
| margin-top: 20px; | |
| padding: 15px; | |
| box-sizing: border-box; | |
| border-radius: 12px; | |
| border: 1px solid #ccc; | |
| font-size: 16px; | |
| resize: vertical; | |
| } | |
| button { | |
| width: 100%; | |
| padding: 14px; | |
| margin-top: 15px; | |
| border: none; | |
| border-radius: 12px; | |
| background: #4f46e5; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| background: #999; | |
| } | |
| #status { | |
| margin-top: 15px; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| #answer { | |
| margin-top: 20px; | |
| padding: 18px; | |
| background: #f3f4f6; | |
| border-radius: 12px; | |
| line-height: 1.6; | |
| min-height: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <h1>📄 Document Q&A</h1> | |
| <p class="info"> | |
| Upload a text document and ask questions about it. | |
| </p> | |
| <input | |
| type="file" | |
| id="fileInput" | |
| accept=".txt" | |
| > | |
| <textarea | |
| id="question" | |
| placeholder="Ask something about your document..." | |
| ></textarea> | |
| <button id="askButton" disabled> | |
| 🤖 Ask Question | |
| </button> | |
| <div id="status"></div> | |
| <div id="answer"> | |
| Your answer will appear here... | |
| </div> | |
| </div> | |
| <script> | |
| let documentText = ""; | |
| const fileInput = | |
| document.getElementById("fileInput"); | |
| const question = | |
| document.getElementById("question"); | |
| const askButton = | |
| document.getElementById("askButton"); | |
| const status = | |
| document.getElementById("status"); | |
| const answer = | |
| document.getElementById("answer"); | |
| fileInput.addEventListener("change", async () => { | |
| const file = fileInput.files[0]; | |
| if (!file) return; | |
| try { | |
| documentText = | |
| await file.text(); | |
| status.innerText = | |
| "✅ Document loaded!"; | |
| answer.innerText = | |
| "Ab document ke baare mein question poochho."; | |
| askButton.disabled = false; | |
| } catch (error) { | |
| status.innerText = | |
| "❌ Document read nahi ho paya."; | |
| } | |
| }); | |
| askButton.addEventListener("click", () => { | |
| const q = | |
| question.value.trim().toLowerCase(); | |
| if (!documentText) { | |
| answer.innerText = | |
| "⚠️ Pehle document upload karo."; | |
| return; | |
| } | |
| if (!q) { | |
| answer.innerText = | |
| "⚠️ Pehle question likho."; | |
| return; | |
| } | |
| const sentences = | |
| documentText | |
| .split(/[.!?]\s+/) | |
| .filter(Boolean); | |
| const words = | |
| q.split(/\s+/); | |
| let bestSentence = ""; | |
| let bestScore = 0; | |
| sentences.forEach(sentence => { | |
| const lower = | |
| sentence.toLowerCase(); | |
| let score = 0; | |
| words.forEach(word => { | |
| if ( | |
| word.length > 2 && | |
| lower.includes(word) | |
| ) { | |
| score++; | |
| } | |
| }); | |
| if (score > bestScore) { | |
| bestScore = score; | |
| bestSentence = sentence; | |
| } | |
| }); | |
| if (bestSentence) { | |
| answer.innerText = | |
| "📖 " + bestSentence; | |
| } else { | |
| answer.innerText = | |
| "🤔 Is document mein is question se related information nahi mili."; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |