prernaaaa1234/document-qa
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 7 <title>Document Q&A</title>8 9 <style>10 body {11 margin: 0;12 min-height: 100vh;13 font-family: Arial, sans-serif;14 background: linear-gradient(135deg, #667eea, #764ba2);15 display: flex;16 justify-content: center;17 align-items: center;18 padding: 20px;19 box-sizing: border-box;20 }21 22 .box {23 width: 100%;24 max-width: 700px;25 background: white;26 padding: 30px;27 border-radius: 22px;28 box-shadow: 0 10px 35px rgba(0,0,0,.2);29 }30 31 h1 {32 text-align: center;33 }34 35 .info {36 text-align: center;37 color: #666;38 margin-bottom: 25px;39 }40 41 input[type="file"] {42 width: 100%;43 padding: 15px;44 border: 2px dashed #aaa;45 border-radius: 12px;46 box-sizing: border-box;47 }48 49 textarea {50 width: 100%;51 height: 120px;52 margin-top: 20px;53 padding: 15px;54 box-sizing: border-box;55 border-radius: 12px;56 border: 1px solid #ccc;57 font-size: 16px;58 resize: vertical;59 }60 61 button {62 width: 100%;63 padding: 14px;64 margin-top: 15px;65 border: none;66 border-radius: 12px;67 background: #4f46e5;68 color: white;69 font-size: 16px;70 cursor: pointer;71 }72 73 button:disabled {74 background: #999;75 }76 77 #status {78 margin-top: 15px;79 text-align: center;80 font-weight: bold;81 }82 83 #answer {84 margin-top: 20px;85 padding: 18px;86 background: #f3f4f6;87 border-radius: 12px;88 line-height: 1.6;89 min-height: 50px;90 }91 </style>92</head>93 94<body>95 96<div class="box">97 98 <h1>📄 Document Q&A</h1>99 100 <p class="info">101 Upload a text document and ask questions about it.102 </p>103 104 <input105 type="file"106 id="fileInput"107 accept=".txt"108 >109 110 <textarea111 id="question"112 placeholder="Ask something about your document..."113 ></textarea>114 115 <button id="askButton" disabled>116 🤖 Ask Question117 </button>118 119 <div id="status"></div>120 121 <div id="answer">122 Your answer will appear here...123 </div>124 125</div>126 127<script>128 129let documentText = "";130 131const fileInput =132 document.getElementById("fileInput");133 134const question =135 document.getElementById("question");136 137const askButton =138 document.getElementById("askButton");139 140const status =141 document.getElementById("status");142 143const answer =144 document.getElementById("answer");145 146 147fileInput.addEventListener("change", async () => {148 149 const file = fileInput.files[0];150 151 if (!file) return;152 153 try {154 155 documentText =156 await file.text();157 158 status.innerText =159 "✅ Document loaded!";160 161 answer.innerText =162 "Ab document ke baare mein question poochho.";163 164 askButton.disabled = false;165 166 } catch (error) {167 168 status.innerText =169 "❌ Document read nahi ho paya.";170 171 }172 173});174 175 176askButton.addEventListener("click", () => {177 178 const q =179 question.value.trim().toLowerCase();180 181 if (!documentText) {182 answer.innerText =183 "⚠️ Pehle document upload karo.";184 return;185 }186 187 if (!q) {188 answer.innerText =189 "⚠️ Pehle question likho.";190 return;191 }192 193 const sentences =194 documentText195 .split(/[.!?]\s+/)196 .filter(Boolean);197 198 const words =199 q.split(/\s+/);200 201 let bestSentence = "";202 let bestScore = 0;203 204 sentences.forEach(sentence => {205 206 const lower =207 sentence.toLowerCase();208 209 let score = 0;210 211 words.forEach(word => {212 213 if (214 word.length > 2 &&215 lower.includes(word)216 ) {217 score++;218 }219 220 });221 222 if (score > bestScore) {223 224 bestScore = score;225 bestSentence = sentence;226 227 }228 229 });230 231 232 if (bestSentence) {233 234 answer.innerText =235 "📖 " + bestSentence;236 237 } else {238 239 answer.innerText =240 "🤔 Is document mein is question se related information nahi mili.";241 242 }243 244});245 246</script>247 248</body>249</html>