CHAT GPT CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Q&A Assistant</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
margin:0;
padding: 20px;
}
.container {
max-width:600px;
margin:auto;
background:white;
border-radius:8px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
h1 {text-align:center;}
textarea, select {
width:100%;
padding:10px;
margin:10px 0;
border:2px solid #ccc;
border-radius:4px;
font-size:16px;
resize:vertical;
}
button {
background:#6200ea;
border:2px solid #6200ea;
color:white;
padding:12px;
font-size:18px;
border-radius:4px;
cursor:pointer;
transition: background 0.3s, transform 0.2s;
width:100%;
}
button:hover {
background:#3700b3;
}
button:active {
transform:scale(0.98);
}
.response {
white-space:pre-wrap;
background:#eef;
padding:15px;
border-radius:4px;
margin-top:15px;
min-height:50px;
}
@media(max-width:400px){
textarea {font-size:14px;}
button {font-size:16px;}
}
</style>
</head>
<body>
<div class="container">
<h1>AI Q&A Assistant</h1>
<select id="subject">
<option value="ur">Urdu</option>
<option value="en">English</option>
<option value="math">Math</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</select>
<textarea id="question" rows="4" placeholder="Ask your question here..."></textarea>
<button id="askBtn">🧠 Ask AI</button>
<div id="answer" class="response">Your answer will appear here...</div>
</div>
<script>
document.getElementById('askBtn').addEventListener('click', async () => {
const subj = document.getElementById('subject').value;
const q = document.getElementById('question').value.trim();
const ans = document.getElementById('answer');
if (!q) { ans.textContent = 'Please enter a question.'; return; }
ans.textContent = 'Thinking...';
try {
const res = await fetch("https://generativelanguage.googleapis.com/v1beta2/models/gemini-2.5-flash-lite-preview:generateMessage?key=YOUR_API_KEY", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
prompt: {
text: `You are a helpful tutor specializing in ${subj}. Answer clearly: ${q}`
},
temperature: 0.2,
candidateCount: 1,
topP: 0.95,
maxOutputTokens: 512
})
});
const json = await res.json();
if (json.candidates && json.candidates.length) {
ans.textContent = json.candidates[0].content;
} else {
ans.textContent = 'No response or error: '+ (json.error?.message || JSON.stringify(json));
}
} catch (e) {
ans.textContent = 'Network or API error: ' + e.message;
}
});
</script>
</body>
</html>
AI STUDIO CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyBot - Monetized with Adsterra</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f8fafc;
color: #334155;
line-height: 1.6;
}
.app-container {
max-width: 800px;
margin: 0 auto;
background: white;
min-height: 100vh;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
}
.header h1 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 5px;
}
.header p {
font-size: 0.9rem;
opacity: 0.9;
}
.main-content {
padding: 20px;
}
/* ===== AD PLACEMENT STYLING ===== */
.ad-placeholder {
width: 100%;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 90px; /* Default height for a banner */
background-color: #f0f0f0; /* Optional: to see the placeholder before ad loads */
border: 1px dashed #ccc; /* Optional: to see the placeholder */
color: #999;
font-size: 14px;
text-align: center;
padding: 10px;
}
/* ================================= */
.subject-tabs {
display: flex;
overflow-x: auto;
gap: 8px;
margin-bottom: 20px;
padding: 5px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.subject-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
flex-shrink: 0;
padding: 8px 16px;
border: none;
border-radius: 20px;
background: #f1f5f9;
color: #64748b;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn:hover {
background: #e2e8f0;
}
.tab-btn.active {
background: #667eea;
color: white;
}
.input-section {
background: #f8fafc;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
}
.input-modes {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.mode-btn {
flex: 1;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: white;
color: #64748b;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mode-btn:hover {
border-color: #667eea;
}
.mode-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.text-input-area {
display: block;
}
.image-input-area {
display: none;
}
.image-input-area.active {
display: block;
}
.text-input-area.active {
display: block;
}
textarea {
width: 100%;
min-height: 100px;
padding: 15px;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
resize: vertical;
font-family: inherit;
transition: border-color 0.2s ease;
background: white;
}
textarea:focus {
outline: none;
border-color: #667eea;
}
.image-upload-zone {
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: white;
}
.image-upload-zone:hover {
border-color: #667eea;
background: #f8fafc;
}
.image-upload-zone.dragover {
border-color: #667eea;
background: #f0f4ff;
}
.upload-icon {
font-size: 2rem;
color: #94a3b8;
margin-bottom: 10px;
}
.upload-text {
color: #64748b;
font-size: 14px;
margin-bottom: 10px;
}
.file-input {
display: none;
}
.image-preview {
display: none;
margin-top: 15px;
text-align: center;
}
.image-preview img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.image-info {
margin-top: 10px;
font-size: 12px;
color: #64748b;
}
.remove-image {
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
margin-top: 8px;
}
.ask-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 15px;
}
.ask-button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.ask-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.loading {
display: none;
text-align: center;
padding: 20px;
color: #64748b;
}
.loading.active {
display: block;
}
.spinner {
width: 24px;
height: 24px;
border: 2px solid #e2e8f0;
border-top: 2px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.answer-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-top: 20px;
border: 1px solid #e2e8f0;
display: none;
}
.answer-section.active {
display: block;
}
.answer-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #334155;
font-weight: 600;
}
.answer-content {
color: #475569;
line-height: 1.7;
white-space: pre-wrap;
}
.error-message {
background: #fef2f2;
color: #dc2626;
padding: 15px;
border-radius: 8px;
border: 1px solid #fecaca;
margin-top: 15px;
}
.quick-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.quick-btn {
padding: 8px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
color: #64748b;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.quick-btn:hover {
border-color: #667eea;
color: #667eea;
}
.bottom-padding {
height: 20px;
}
@media (max-width: 768px) {
.app-container { box-shadow: none; }
.main-content { padding: 15px; }
.header { padding: 15px; }
.header h1 { font-size: 1.5rem; }
.input-section { padding: 15px; }
.input-modes { flex-direction: column; gap: 8px; }
}
</style>
</head>
<body>
<!-- ===== AD PLACEMENT SPOT: POP-UNDER / SOCIAL BAR ===== -->
<!-- Adsterra ka Pop-Under ya Social Bar Ad Code Yahan Paste Karein -->
<!-- ======================================================= -->
<div class="app-container">
<div class="header">
<h1>📚 StudyBot</h1>
<p>Your AI Learning Assistant</p>
</div>
<div class="main-content">
<!-- ===== AD PLACEMENT SPOT 1: TOP BANNER ===== -->
<div id="adsterra-top-banner" class="ad-placeholder">
Adsterra 728x90 ya 468x60 Banner Ad Code Yahan Paste Karein
</div>
<!-- ============================================ -->
<div class="subject-tabs">
<button class="tab-btn active" data-subject="general">🎯 General</button>
<button class="tab-btn" data-subject="urdu">🇵🇰 Urdu</button>
<button class="tab-btn" data-subject="english">🇬🇧 English</button>
<button class="tab-btn" data-subject="math">🔢 Math</button>
<button class="tab-btn" data-subject="physics">⚛️ Physics</button>
<button class="tab-btn" data-subject="chemistry">🧪 Chemistry</button>
<button class="tab-btn" data-subject="biology">🧬 Biology</button>
</div>
<div class="input-section">
<div class="input-modes">
<button class="mode-btn active" data-mode="text">
💬 Text Question
</button>
<button class="mode-btn" data-mode="image">
📷 Image Question
</button>
</div>
<div class="text-input-area active" id="textInput">
<textarea
id="questionText"
placeholder="Ask your question here..."
></textarea>
</div>
<div class="image-input-area" id="imageInput">
<div class="image-upload-zone" id="uploadZone">
<div class="upload-icon">📷</div>
<div class="upload-text">
<strong>Tap to upload an image</strong><br>
or drag and drop here
</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 5px;">
Supports JPG, PNG, WebP (max 4MB)
</div>
</div>
<input type="file" id="imageFile" class="file-input" accept="image/*">
<div class="image-preview" id="imagePreview">
<img id="previewImg" alt="Preview">
<div class="image-info" id="imageInfo"></div>
<button class="remove-image" id="removeImage">Remove Image</button>
</div>
<textarea
id="imageQuestionText"
placeholder="Ask a question about the image..."
style="margin-top: 15px; min-height: 60px;"
></textarea>
</div>
<button class="ask-button" id="askButton">
🚀 Get Answer
</button>
</div>
<!-- ===== AD PLACEMENT SPOT 2: MIDDLE BANNER ===== -->
<div id="adsterra-middle-banner" class="ad-placeholder">
Adsterra 300x250 Banner Ad Code Yahan Paste Karein
</div>
<!-- =============================================== -->
<div class="loading" id="loading">
<div class="spinner"></div>
<div>AI is thinking...</div>
</div>
<div class="answer-section" id="answerSection">
<div class="answer-header">
<span>🎯</span>
<span id="answerTitle">Answer</span>
</div>
<div class="answer-content" id="answerContent"></div>
<div class="quick-actions">
<button class="quick-btn" id="clearBtn">🗑️ Clear</button>
<button class="quick-btn" id="copyBtn">📋 Copy Answer</button>
</div>
</div>
<!-- ===== AD PLACEMENT SPOT 3: BOTTOM BANNER ===== -->
<div id="adsterra-bottom-banner" class="ad-placeholder">
Adsterra 728x90 ya 468x60 Banner Ad Code Yahan Paste Karein
</div>
<!-- =============================================== -->
</div>
<div class="bottom-padding"></div>
</div>
<script>
// Aapka poora JavaScript code yahan pehle jaisa hi rahega.
// Usmein koi tabdeeli nahi ki gayi hai.
class StudyBot {
constructor() {
this.apiKey = 'AIzaSyBpY0rfcPD_gOK7yB0FK0Rsdbq0QwMYhhw';
this.currentSubject = 'general';
this.currentMode = 'text';
this.selectedImage = null;
this.isProcessing = false;
this.initializeElements();
this.bindEvents();
}
initializeElements() {
this.subjectTabs = document.querySelectorAll('.tab-btn');
this.modeBtns = document.querySelectorAll('.mode-btn');
this.textInputArea = document.getElementById('textInput');
this.imageInputArea = document.getElementById('imageInput');
this.questionText = document.getElementById('questionText');
this.imageQuestionText = document.getElementById('imageQuestionText');
this.imageFile = document.getElementById('imageFile');
this.uploadZone = document.getElementById('uploadZone');
this.imagePreview = document.getElementById('imagePreview');
this.previewImg = document.getElementById('previewImg');
this.imageInfo = document.getElementById('imageInfo');
this.removeImage = document.getElementById('removeImage');
this.askButton = document.getElementById('askButton');
this.loading = document.getElementById('loading');
this.answerSection = document.getElementById('answerSection');
this.answerTitle = document.getElementById('answerTitle');
this.answerContent = document.getElementById('answerContent');
this.clearBtn = document.getElementById('clearBtn');
this.copyBtn = document.getElementById('copyBtn');
}
bindEvents() {
this.subjectTabs.forEach(tab => {
tab.addEventListener('click', () => this.switchSubject(tab));
});
this.modeBtns.forEach(btn => {
btn.addEventListener('click', () => this.switchMode(btn));
});
this.uploadZone.addEventListener('click', () => this.imageFile.click());
this.uploadZone.addEventListener('dragover', (e) => this.handleDragOver(e));
this.uploadZone.addEventListener('drop', (e) => this.handleDrop(e));
this.imageFile.addEventListener('change', (e) => this.handleImageSelect(e));
this.removeImage.addEventListener('click', () => this.clearImage());
this.askButton.addEventListener('click', () => this.askQuestion());
this.clearBtn.addEventListener('click', () => this.clearAll());
this.copyBtn.addEventListener('click', () => this.copyAnswer());
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'Enter') {
this.askQuestion();
}
});
}
switchSubject(tab) {
this.subjectTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
this.currentSubject = tab.dataset.subject;
const subjectNames = { general: 'General Question', urdu: 'Urdu Question', english: 'English Question', math: 'Math Problem', physics: 'Physics Problem', chemistry: 'Chemistry Problem', biology: 'Biology Question' };
this.answerTitle.textContent = subjectNames[this.currentSubject];
this.updatePlaceholder();
}
switchMode(btn) {
this.modeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.currentMode = btn.dataset.mode;
if (this.currentMode === 'text') {
this.textInputArea.classList.add('active');
this.imageInputArea.classList.remove('active');
} else {
this.textInputArea.classList.remove('active');
this.imageInputArea.classList.add('active');
}
}
updatePlaceholder() {
const placeholders = { general: 'Ask any question you have...', urdu: 'اردو میں اپنا سوال پوچھیں...', english: 'Ask your English question...', math: 'Enter your math problem...', physics: 'Ask your physics question...', chemistry: 'Ask your chemistry question...', biology: 'Ask your biology question...' };
this.questionText.placeholder = placeholders[this.currentSubject];
}
handleDragOver(e) { e.preventDefault(); this.uploadZone.classList.add('dragover'); }
handleDrop(e) { e.preventDefault(); this.uploadZone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { this.processImage(file); } }
handleImageSelect(e) { const file = e.target.files[0]; if (file) { this.processImage(file); } }
processImage(file) {
if (file.size > 4 * 1024 * 1024) { this.showError('Image size should be less than 4MB'); return; }
const reader = new FileReader();
reader.onload = (e) => {
this.selectedImage = e.target.result;
this.previewImg.src = this.selectedImage;
this.imageInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
this.imagePreview.style.display = 'block';
this.uploadZone.style.display = 'none';
};
reader.readAsDataURL(file);
}
clearImage() { this.selectedImage = null; this.imagePreview.style.display = 'none'; this.uploadZone.style.display = 'block'; this.imageFile.value = ''; }
async askQuestion() {
if (this.isProcessing) return;
const question = this.currentMode === 'text' ? this.questionText.value.trim() : this.imageQuestionText.value.trim();
if (!question && this.currentMode === 'text') { this.showError('Please enter a question!'); return; }
if (this.currentMode === 'image' && !this.selectedImage) { this.showError('Please upload an image!'); return; }
this.isProcessing = true;
this.showLoading(true);
this.askButton.disabled = true;
try {
const answer = await this.callGeminiAPI(question);
this.showAnswer(answer);
} catch (error) {
this.showError(error.message);
} finally {
this.showLoading(false);
this.askButton.disabled = false;
this.isProcessing = false;
}
}
async callGeminiAPI(question) {
const subjectContext = this.getSubjectContext();
let requestBody;
if (this.currentMode === 'image' && this.selectedImage) {
const base64Data = this.selectedImage.split(',')[1];
requestBody = { contents: [{ parts: [ { text: `${subjectContext}\n\n${question || 'Analyze this image and explain what you see.'}\n\nPlease provide a detailed answer.` }, { inline_data: { mime_type: "image/jpeg", data: base64Data } } ] }], generationConfig: { temperature: 0.7, topK: 40, topP: 0.95, maxOutputTokens: 2048, } };
} else {
requestBody = { contents: [{ parts: [{ text: `${subjectContext}\n\nQuestion: ${question}\n\nPlease provide a detailed, step-by-step answer.` }] }], generationConfig: { temperature: 0.7, topK: 40, topP: 0.95, maxOutputTokens: 2048, } };
}
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=${this.apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestBody) });
if (!response.ok) { const errorData = await response.json().catch(() => ({})); if (response.status === 400) { throw new Error('Invalid request format or image.'); } else if (response.status === 403) { throw new Error('API access denied.'); } else if (response.status === 429) { throw new Error('Too many requests. Please wait a moment.'); } else { throw new Error(`Error: ${errorData.error?.message || 'Unknown error'}`); } }
const data = await response.json();
if (!data.candidates || !data.candidates[0] || !data.candidates[0].content) { throw new Error('No response generated. Please try again.'); }
return data.candidates[0].content.parts[0].text;
}
getSubjectContext() {
const contexts = { general: 'You are a helpful educational assistant.', urdu: 'آپ ایک اردو زبان کے ماہر استاد ہیں۔', english: 'You are an English language expert.', math: 'You are a mathematics teacher. Show step-by-step solutions.', physics: 'You are a physics teacher. Explain with examples and formulas.', chemistry: 'You are a chemistry teacher. Explain reactions and processes.', biology: 'You are a biology teacher. Explain biological processes clearly.' };
return contexts[this.currentSubject];
}
showAnswer(answer) { this.answerContent.textContent = answer; this.answerSection.classList.add('active'); this.answerSection.scrollIntoView({ behavior: 'smooth' }); }
showError(message) { this.answerContent.innerHTML = `<div class="error-message">❌ ${message}</div>`; this.answerSection.classList.add('active'); }
showLoading(show) { this.loading.classList.toggle('active', show); if (show) { this.answerSection.classList.remove('active'); } }
clearAll() { this.questionText.value = ''; this.imageQuestionText.value = ''; this.clearImage(); this.answerSection.classList.remove('active'); }
async copyAnswer() { try { await navigator.clipboard.writeText(this.answerContent.textContent); this.copyBtn.textContent = '✅ Copied!'; setTimeout(() => { this.copyBtn.textContent = '📋 Copy Answer'; }, 2000); } catch (err) { console.error('Failed to copy text: ', err); } }
}
document.addEventListener('DOMContentLoaded', () => {
new StudyBot();
});
</script>
</body>
</html>
==================================================================================================================================================
CLAUDE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyBot - AI Learning Assistant</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f8fafc;
color: #334155;
line-height: 1.6;
}
.app-container {
max-width: 800px;
margin: 0 auto;
background: white;
min-height: 100vh;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
}
.header h1 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 5px;
}
.header p {
font-size: 0.9rem;
opacity: 0.9;
}
.main-content {
padding: 20px;
}
.subject-tabs {
display: flex;
overflow-x: auto;
gap: 8px;
margin-bottom: 20px;
padding: 5px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.subject-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
flex-shrink: 0;
padding: 8px 16px;
border: none;
border-radius: 20px;
background: #f1f5f9;
color: #64748b;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn:hover {
background: #e2e8f0;
}
.tab-btn.active {
background: #667eea;
color: white;
}
.input-section {
background: #f8fafc;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
}
.input-modes {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.mode-btn {
flex: 1;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: white;
color: #64748b;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mode-btn:hover {
border-color: #667eea;
}
.mode-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.text-input-area {
display: block;
}
.image-input-area {
display: none;
}
.image-input-area.active {
display: block;
}
.text-input-area.active {
display: block;
}
textarea {
width: 100%;
min-height: 100px;
padding: 15px;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
resize: vertical;
font-family: inherit;
transition: border-color 0.2s ease;
background: white;
}
textarea:focus {
outline: none;
border-color: #667eea;
}
.image-upload-zone {
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: white;
}
.image-upload-zone:hover {
border-color: #667eea;
background: #f8fafc;
}
.image-upload-zone.dragover {
border-color: #667eea;
background: #f0f4ff;
}
.upload-icon {
font-size: 2rem;
color: #94a3b8;
margin-bottom: 10px;
}
.upload-text {
color: #64748b;
font-size: 14px;
margin-bottom: 10px;
}
.file-input {
display: none;
}
.image-preview {
display: none;
margin-top: 15px;
text-align: center;
}
.image-preview img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.image-info {
margin-top: 10px;
font-size: 12px;
color: #64748b;
}
.remove-image {
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
margin-top: 8px;
}
.ask-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 15px;
}
.ask-button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.ask-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.loading {
display: none;
text-align: center;
padding: 20px;
color: #64748b;
}
.loading.active {
display: block;
}
.spinner {
width: 24px;
height: 24px;
border: 2px solid #e2e8f0;
border-top: 2px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.answer-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-top: 20px;
border: 1px solid #e2e8f0;
display: none;
}
.answer-section.active {
display: block;
}
.answer-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #334155;
font-weight: 600;
}
.answer-content {
color: #475569;
line-height: 1.7;
white-space: pre-wrap;
}
.error-message {
background: #fef2f2;
color: #dc2626;
padding: 15px;
border-radius: 8px;
border: 1px solid #fecaca;
margin-top: 15px;
}
.quick-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.quick-btn {
padding: 8px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
color: #64748b;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.quick-btn:hover {
border-color: #667eea;
color: #667eea;
}
.bottom-padding {
height: 20px;
}
@media (max-width: 768px) {
.app-container {
box-shadow: none;
}
.main-content {
padding: 15px;
}
.header {
padding: 15px;
}
.header h1 {
font-size: 1.5rem;
}
.input-section {
padding: 15px;
}
.input-modes {
flex-direction: column;
gap: 8px;
}
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<h1>📚 StudyBot</h1>
<p>Your AI Learning Assistant</p>
</div>
<div class="main-content">
<div class="subject-tabs">
<button class="tab-btn active" data-subject="general">🎯 General</button>
<button class="tab-btn" data-subject="urdu">🇵🇰 Urdu</button>
<button class="tab-btn" data-subject="english">🇬🇧 English</button>
<button class="tab-btn" data-subject="math">🔢 Math</button>
<button class="tab-btn" data-subject="physics">⚛️ Physics</button>
<button class="tab-btn" data-subject="chemistry">🧪 Chemistry</button>
<button class="tab-btn" data-subject="biology">🧬 Biology</button>
</div>
<div class="input-section">
<div class="input-modes">
<button class="mode-btn active" data-mode="text">
💬 Text Question
</button>
<button class="mode-btn" data-mode="image">
📷 Image Question
</button>
</div>
<div class="text-input-area active" id="textInput">
<textarea
id="questionText"
placeholder="Ask your question here..."
></textarea>
</div>
<div class="image-input-area" id="imageInput">
<div class="image-upload-zone" id="uploadZone">
<div class="upload-icon">📷</div>
<div class="upload-text">
<strong>Tap to upload an image</strong><br>
or drag and drop here
</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 5px;">
Supports JPG, PNG, WebP (max 4MB)
</div>
</div>
<input type="file" id="imageFile" class="file-input" accept="image/*">
<div class="image-preview" id="imagePreview">
<img id="previewImg" alt="Preview">
<div class="image-info" id="imageInfo"></div>
<button class="remove-image" id="removeImage">Remove Image</button>
</div>
<textarea
id="imageQuestionText"
placeholder="Ask a question about the image..."
style="margin-top: 15px; min-height: 60px;"
></textarea>
</div>
<button class="ask-button" id="askButton">
🚀 Get Answer
</button>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<div>AI is thinking...</div>
</div>
<div class="answer-section" id="answerSection">
<div class="answer-header">
<span>🎯</span>
<span id="answerTitle">Answer</span>
</div>
<div class="answer-content" id="answerContent"></div>
<div class="quick-actions">
<button class="quick-btn" id="clearBtn">🗑️ Clear</button>
<button class="quick-btn" id="copyBtn">📋 Copy Answer</button>
</div>
</div>
</div>
<div class="bottom-padding"></div>
</div>
<script>
class StudyBot {
constructor() {
this.apiKey = 'AIzaSyBpY0rfcPD_gOK7yB0FK0Rsdbq0QwMYhhw';
this.currentSubject = 'general';
this.currentMode = 'text';
this.selectedImage = null;
this.isProcessing = false;
this.initializeElements();
this.bindEvents();
}
initializeElements() {
// Subject tabs
this.subjectTabs = document.querySelectorAll('.tab-btn');
// Mode buttons
this.modeBtns = document.querySelectorAll('.mode-btn');
this.textInputArea = document.getElementById('textInput');
this.imageInputArea = document.getElementById('imageInput');
// Input elements
this.questionText = document.getElementById('questionText');
this.imageQuestionText = document.getElementById('imageQuestionText');
this.imageFile = document.getElementById('imageFile');
this.uploadZone = document.getElementById('uploadZone');
this.imagePreview = document.getElementById('imagePreview');
this.previewImg = document.getElementById('previewImg');
this.imageInfo = document.getElementById('imageInfo');
this.removeImage = document.getElementById('removeImage');
// Action elements
this.askButton = document.getElementById('askButton');
this.loading = document.getElementById('loading');
this.answerSection = document.getElementById('answerSection');
this.answerTitle = document.getElementById('answerTitle');
this.answerContent = document.getElementById('answerContent');
this.clearBtn = document.getElementById('clearBtn');
this.copyBtn = document.getElementById('copyBtn');
}
bindEvents() {
// Subject tabs
this.subjectTabs.forEach(tab => {
tab.addEventListener('click', () => this.switchSubject(tab));
});
// Mode buttons
this.modeBtns.forEach(btn => {
btn.addEventListener('click', () => this.switchMode(btn));
});
// Image upload
this.uploadZone.addEventListener('click', () => this.imageFile.click());
this.uploadZone.addEventListener('dragover', (e) => this.handleDragOver(e));
this.uploadZone.addEventListener('drop', (e) => this.handleDrop(e));
this.imageFile.addEventListener('change', (e) => this.handleImageSelect(e));
this.removeImage.addEventListener('click', () => this.clearImage());
// Actions
this.askButton.addEventListener('click', () => this.askQuestion());
this.clearBtn.addEventListener('click', () => this.clearAll());
this.copyBtn.addEventListener('click', () => this.copyAnswer());
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'Enter') {
this.askQuestion();
}
});
}
switchSubject(tab) {
this.subjectTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
this.currentSubject = tab.dataset.subject;
const subjectNames = {
general: 'General Question',
urdu: 'Urdu Question',
english: 'English Question',
math: 'Math Problem',
physics: 'Physics Problem',
chemistry: 'Chemistry Problem',
biology: 'Biology Question'
};
this.answerTitle.textContent = subjectNames[this.currentSubject];
this.updatePlaceholder();
}
switchMode(btn) {
this.modeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.currentMode = btn.dataset.mode;
if (this.currentMode === 'text') {
this.textInputArea.classList.add('active');
this.imageInputArea.classList.remove('active');
} else {
this.textInputArea.classList.remove('active');
this.imageInputArea.classList.add('active');
}
}
updatePlaceholder() {
const placeholders = {
general: 'Ask any question you have...',
urdu: 'اردو میں اپنا سوال پوچھیں...',
english: 'Ask your English question...',
math: 'Enter your math problem...',
physics: 'Ask your physics question...',
chemistry: 'Ask your chemistry question...',
biology: 'Ask your biology question...'
};
this.questionText.placeholder = placeholders[this.currentSubject];
}
handleDragOver(e) {
e.preventDefault();
this.uploadZone.classList.add('dragover');
}
handleDrop(e) {
e.preventDefault();
this.uploadZone.classList.remove('dragover');
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
this.processImage(file);
}
}
handleImageSelect(e) {
const file = e.target.files[0];
if (file) {
this.processImage(file);
}
}
processImage(file) {
if (file.size > 4 * 1024 * 1024) {
this.showError('Image size should be less than 4MB');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
this.selectedImage = e.target.result;
this.previewImg.src = this.selectedImage;
this.imageInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
this.imagePreview.style.display = 'block';
this.uploadZone.style.display = 'none';
};
reader.readAsDataURL(file);
}
clearImage() {
this.selectedImage = null;
this.imagePreview.style.display = 'none';
this.uploadZone.style.display = 'block';
this.imageFile.value = '';
}
async askQuestion() {
if (this.isProcessing) return;
const question = this.currentMode === 'text'
? this.questionText.value.trim()
: this.imageQuestionText.value.trim();
if (!question && this.currentMode === 'text') {
this.showError('Please enter a question!');
return;
}
if (this.currentMode === 'image' && !this.selectedImage) {
this.showError('Please upload an image!');
return;
}
this.isProcessing = true;
this.showLoading(true);
this.askButton.disabled = true;
try {
const answer = await this.callGeminiAPI(question);
this.showAnswer(answer);
} catch (error) {
this.showError(error.message);
} finally {
this.showLoading(false);
this.askButton.disabled = false;
this.isProcessing = false;
}
}
async callGeminiAPI(question) {
const subjectContext = this.getSubjectContext();
let requestBody;
if (this.currentMode === 'image' && this.selectedImage) {
// Remove the data:image/jpeg;base64, part
const base64Data = this.selectedImage.split(',')[1];
requestBody = {
contents: [{
parts: [
{
text: `${subjectContext}\n\n${question || 'Analyze this image and explain what you see.'}\n\nPlease provide a detailed answer.`
},
{
inline_data: {
mime_type: "image/jpeg",
data: base64Data
}
}
]
}],
generationConfig: {
temperature: 0.7,
topK: 40,
topP: 0.95,
maxOutputTokens: 2048,
}
};
} else {
requestBody = {
contents: [{
parts: [{
text: `${subjectContext}\n\nQuestion: ${question}\n\nPlease provide a detailed, step-by-step answer.`
}]
}],
generationConfig: {
temperature: 0.7,
topK: 40,
topP: 0.95,
maxOutputTokens: 2048,
}
};
}
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=${this.apiKey}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
if (response.status === 400) {
throw new Error('Invalid request format or image.');
} else if (response.status === 403) {
throw new Error('API access denied.');
} else if (response.status === 429) {
throw new Error('Too many requests. Please wait a moment.');
} else {
throw new Error(`Error: ${errorData.error?.message || 'Unknown error'}`);
}
}
const data = await response.json();
if (!data.candidates || !data.candidates[0] || !data.candidates[0].content) {
throw new Error('No response generated. Please try again.');
}
return data.candidates[0].content.parts[0].text;
}
getSubjectContext() {
const contexts = {
general: 'You are a helpful educational assistant.',
urdu: 'آپ ایک اردو زبان کے ماہر استاد ہیں۔',
english: 'You are an English language expert.',
math: 'You are a mathematics teacher. Show step-by-step solutions.',
physics: 'You are a physics teacher. Explain with examples and formulas.',
chemistry: 'You are a chemistry teacher. Explain reactions and processes.',
biology: 'You are a biology teacher. Explain biological processes clearly.'
};
return contexts[this.currentSubject];
}
showAnswer(answer) {
this.answerContent.textContent = answer;
this.answerSection.classList.add('active');
this.answerSection.scrollIntoView({ behavior: 'smooth' });
}
showError(message) {
this.answerContent.innerHTML = `<div class="error-message">❌ ${message}</div>`;
this.answerSection.classList.add('active');
}
showLoading(show) {
this.loading.classList.toggle('active', show);
if (show) {
this.answerSection.classList.remove('active');
}
}
clearAll() {
this.questionText.value = '';
this.imageQuestionText.value = '';
this.clearImage();
this.answerSection.classList.remove('active');
}
async copyAnswer() {
try {
await navigator.clipboard.writeText(this.answerContent.textContent);
this.copyBtn.textContent = '✅ Copied!';
setTimeout(() => {
this.copyBtn.textContent = '📋 Copy Answer';
}, 2000);
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
}
// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
new StudyBot();
});
</script>
</body>
</html>
0 Comments