दोस्तों, आज मैं आपको एक ऐसी वेबसाइट बनाने का तरीका बताने जा रहा हूँ जो न केवल AI की मदद से बनेगी, बल्कि इसका यूजर इंटरफेस भी काफी आकर्षक और उपयोगकर्ता-अनुकूल होगा।
इस वेबसाइट का टॉपिक ट्रेंडिंग है क्योंकि हम आज एक Question Solver App बनाने वाले हैं। इस वेबसाइट पर जो भी यूजर अपने सवाल पूछेगा, उसका जवाब AI स्वचालित रूप से देगा और उसे हल करेगा।
मजेदार बात यह है कि हम यह पूरी वेबसाइट Blogger पर बिल्कुल मुफ्त में बनाएँगे। यानी, हम Blogspot पर एक AI Question Solver वेबसाइट तैयार करेंगे।
तो अगर आप भी ऐसी ही AI Question Solver App बनाने की सोच रहे हैं, तो चलिए इसके बारे में विस्तार से समझते हैं।
AI Question Solver App क्या है?
AI Question Solver वेबसाइट ऐसी वेबसाइट को कहा जाता है जहाँ कोई भी यूजर अपनी समस्या या सवाल को App के AI से पूछता है, और वह App AI की सहायता से स्वचालित रूप से आपके सवाल का जवाब देती है।
यहाँ आप हर तरह के सवालों के जवाब प्राप्त कर सकते हैं, चाहे वह गणित का विषय हो, कोई कैलकुलेशन हो, या फिर विज्ञान, भौतिकी, रसायनशास्त्र जैसे टॉपिक्स हों। हालाँकि यह ChatGPT जैसे अन्य AI से कम चैट करती है, लेकिन यह वेबसाइट विशेष रूप से संबंधित सवालों के जवाब देने के लिए बनाई जाती है। यह विषय-विशेषज्ञ (Specialized) वेबसाइट होती है।
Read this Also: PDF Tool Website को AI से कैसे बनाएं?
AI Question Solver App कैसे बनाएँ?
AI Question Solver App बनाने के कई तरीके हैं। आप इसे किसी भी AI की मदद से बना सकते हैं या किसी वेब डेवलपर से कोड लिखवा सकते हैं। लेकिन सबसे बड़ी चुनौती तब आती है जब हम इसे मुफ्त में Blogspot पर बनाते हैं, क्योंकि Blogger पर HTML कोड को कस्टमाइज़ करना काफी मुश्किल होता है। यह WordPress जैसे प्लेटफॉर्म पर Elementor की मदद से बनाने जितना आसान नहीं है।
10
Please wait, generating website link
तो हम नीचे चार चरणों में ऐसी AI Question Solver App बनाना सीखेंगे, जिसमें मैं आपको प्रॉम्प्ट्स, HTML कोड, और अन्य सभी आवश्यक चीजें प्रदान करूँगा।
Convert Website into App: https://www.webintoapp.com
Step 1: Blogspot Blog Banaye
सबसे पहले, आपको blogger.com पर जाना होगा और अपने Gmail की मदद से एक Blogspot blog बनाना होगा। इसमें आप अपने ब्लॉग का URL जो रखना चाहते हैं, उसे डाल दें। वेबसाइट का नाम, विवरण, और अन्य बुनियादी जानकारी भर दें।
Step 2: Prompt 1 for Question AI
अब मैं आपको नीचे एक प्रॉम्पट दे रहा हूँ। इस प्रॉम्पट को आप Google AI Studio या ChatGPT Free में पेस्ट कर दें। यह आपको एक वेबसाइट बनाने का पूरा स्ट्रक्चर और कोड देगा, जिसे हम आगे चलकर अपने Blogspot पर इस्तेमाल करेंगे।
Step 3: Prompt 2 for API Key
अब मैं एक और प्रॉम्पट दे रहा हूँ। इसे भी आपको उसी AI टूल में पेस्ट करना होगा। यह आपकी वेबसाइट का डिज़ाइन सरल और साफ रखेगा, साथ ही API Key का सपोर्ट भी इनेबल करेगा।
इस प्रॉम्पट की मदद से आपकी वेबसाइट के लिए थीम डिज़ाइन, API, और सभी बुनियादी चीज़ें फ्री में मिल जाएँगी।
Step 4: Prompt 3 for Web App
अब हमारी वेबसाइट का डिज़ाइन तैयार हो चुका है। उपर के सारे कोड को आपको Blogger के थीम सेक्शन में जाकर Edit HTML में पेस्ट करना होगा। इससे आपकी वेबसाइट का डिज़ाइन बदल जाएगा.। इसके बाद, मैं जो प्रॉम्पट नीचे दे रहा हूँ, उसे आप Google AI Studio में डालें।
तो कुछ इस तरह से आपकी वेबसाइट पर आप Adsterra या किसी अन्य ऐड नेटवर्क प्लेटफार्म की एडवर्टाइज भी इनेबल कर सकते हो जिससे आपके AI क्वेश्चन सॉल्वर वेबसाइट पर ट्रैफिक आने के बाद अर्निंग भी स्टार्ट होगी।
Android App Complete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Question Solver</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 10px;
}
.app-container {
max-width: 500px;
margin: 0 auto;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
min-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
}
.header {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
padding: 20px;
text-align: center;
}
.header h1 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 5px;
}
.header p {
opacity: 0.9;
font-size: 0.9rem;
}
/* Ad Container Styles */
.ad-container {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
min-height: 70px;
}
.ad-container.top-ad {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-bottom: 2px solid #0ea5e9;
}
.ad-container.middle-ad {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 2px solid #22c55e;
border-radius: 12px;
margin: 10px;
}
.ad-container.bottom-ad {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-top: 2px solid #f59e0b;
margin-top: auto;
}
.ad-placeholder {
color: #6b7280;
font-size: 0.8rem;
text-align: center;
font-style: italic;
}
.content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.subjects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.subject-btn {
padding: 15px 8px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: white;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
font-weight: 500;
}
.subject-btn:hover {
border-color: #4f46e5;
transform: translateY(-2px);
}
.subject-btn.active {
background: #4f46e5;
color: white;
border-color: #4f46e5;
}
.subject-emoji {
display: block;
font-size: 1.5rem;
margin-bottom: 5px;
}
.input-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.question-input {
width: 100%;
min-height: 120px;
padding: 15px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: #f9fafb;
transition: all 0.2s ease;
}
.question-input:focus {
outline: none;
border-color: #4f46e5;
background: white;
}
.image-upload {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: #f9fafb;
}
.image-upload:hover {
border-color: #4f46e5;
background: #f0f9ff;
}
.image-upload.has-image {
border-color: #10b981;
background: #ecfdf5;
}
.upload-icon {
font-size: 2rem;
margin-bottom: 10px;
opacity: 0.7;
}
.upload-text {
font-size: 0.9rem;
color: #6b7280;
}
.image-preview {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
margin: 10px 0;
}
.file-input {
display: none;
}
.solve-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.solve-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}
.solve-btn:disabled {
background: #9ca3af;
cursor: not-allowed;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top: 3px solid #4f46e5;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.result {
display: none;
background: #f8fafc;
border-radius: 12px;
padding: 20px;
margin-top: 10px;
border-left: 4px solid #10b981;
}
.result-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.result-icon {
width: 30px;
height: 30px;
background: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.result-title {
font-weight: 600;
color: #1f2937;
}
.result-content {
line-height: 1.6;
color: #374151;
white-space: pre-wrap;
}
.error {
background: #fee2e2;
color: #991b1b;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #ef4444;
margin-top: 10px;
display: none;
}
.remove-image {
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
padding: 5px 10px;
font-size: 0.8rem;
cursor: pointer;
margin-top: 10px;
}
/* Responsive Ad Adjustments */
@media (max-width: 480px) {
.subjects {
grid-template-columns: repeat(2, 1fr);
}
.subject-btn {
padding: 12px 6px;
font-size: 0.8rem;
}
.ad-container {
padding: 10px;
min-height: 60px;
}
}
/* Ad Loading Animation */
.ad-loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-top: 2px solid #4f46e5;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<h1>🤖 AI Question Solver</h1>
<p>Get instant help with any subject</p>
</div>
<!-- Top Ad -->
<div class="ad-container top-ad">
<div id="topAd">
<div class="ad-loading"></div>
<span class="ad-placeholder">Loading Ad...</span>
</div>
</div>
<div class="content">
<div class="subjects">
<div class="subject-btn active" data-subject="math">
<span class="subject-emoji">🔢</span>
Math
</div>
<div class="subject-btn" data-subject="physics">
<span class="subject-emoji">⚛️</span>
Physics
</div>
<div class="subject-btn" data-subject="chemistry">
<span class="subject-emoji">🧪</span>
Chemistry
</div>
<div class="subject-btn" data-subject="biology">
<span class="subject-emoji">🧬</span>
Biology
</div>
<div class="subject-btn" data-subject="english">
<span class="subject-emoji">🇬🇧</span>
English
</div>
<div class="subject-btn" data-subject="hindi">
<span class="subject-emoji">🇮🇳</span>
Hindi
</div>
</div>
<!-- Middle Ad -->
<div class="ad-container middle-ad">
<div id="middleAd">
<div class="ad-loading"></div>
<span class="ad-placeholder">Loading Ad...</span>
</div>
</div>
<div class="input-section">
<textarea
id="questionInput"
class="question-input"
placeholder="Type your question here...
Examples:
• Solve: 2x + 5 = 15
• Explain photosynthesis
• What is Newton's first law?
• Balance: H2 + O2 → H2O"
></textarea>
<div class="image-upload" id="imageUpload">
<div class="upload-icon">📷</div>
<div class="upload-text">Tap to upload image</div>
<input type="file" id="fileInput" class="file-input" accept="image/*">
</div>
<button id="solveBtn" class="solve-btn">
🚀 Solve Question
</button>
</div>
<div id="loading" class="loading">
<div class="spinner"></div>
<p>AI is analyzing...</p>
</div>
<div id="result" class="result">
<div class="result-header">
<div class="result-icon">✅</div>
<div class="result-title">Solution</div>
</div>
<div id="resultContent" class="result-content"></div>
</div>
<div id="error" class="error"></div>
</div>
<!-- Bottom Ad -->
<div class="ad-container bottom-ad">
<div id="bottomAd">
<div class="ad-loading"></div>
<span class="ad-placeholder">Loading Ad...</span>
</div>
</div>
</div>
<!-- Adsterra Ad Scripts -->
<script type="text/javascript">
// Top Ad Configuration
var topAdOptions = {
'key': 'fe816c895838daf1001658b20dc9b941',
'format': 'iframe',
'height': 50,
'width': 320,
'params': {}
};
// Middle Ad Configuration
var middleAdOptions = {
'key': 'fe816c895838daf1001658b20dc9b941',
'format': 'iframe',
'height': 50,
'width': 320,
'params': {}
};
// Bottom Ad Configuration
var bottomAdOptions = {
'key': 'fe816c895838daf1001658b20dc9b941',
'format': 'iframe',
'height': 50,
'width': 320,
'params': {}
};
// Load ads after page loads
window.addEventListener('load', function() {
loadAds();
});
function loadAds() {
// Load Top Ad
setTimeout(() => {
loadAdInContainer('topAd', topAdOptions);
}, 1000);
// Load Middle Ad
setTimeout(() => {
loadAdInContainer('middleAd', middleAdOptions);
}, 2000);
// Load Bottom Ad
setTimeout(() => {
loadAdInContainer('bottomAd', bottomAdOptions);
}, 3000);
}
function loadAdInContainer(containerId, adOptions) {
const container = document.getElementById(containerId);
if (container) {
// Set global atOptions for this ad
window.atOptions = adOptions;
// Create and append the ad script
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//www.highperformanceformat.com/' + adOptions.key + '/invoke.js';
script.async = true;
// Clear loading placeholder
container.innerHTML = '';
container.appendChild(script);
// Fallback if ad doesn't load
setTimeout(() => {
if (container.children.length <= 1) {
container.innerHTML = '<div class="ad-placeholder">Advertisement</div>';
}
}, 5000);
}
}
</script>
<script>
class AIQuestionSolver {
constructor() {
this.apiKey = 'AIzaSyCt8qnhDRlLkGQtUuivJhh7cXt0AnL_HIw';
this.selectedSubject = 'math';
this.uploadedImage = null;
this.init();
}
init() {
this.setupEventListeners();
this.updatePlaceholder();
}
setupEventListeners() {
// Subject selection
document.querySelectorAll('.subject-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.subject-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.selectedSubject = btn.dataset.subject;
this.updatePlaceholder();
});
});
// Image upload
const imageUpload = document.getElementById('imageUpload');
const fileInput = document.getElementById('fileInput');
imageUpload.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
if (e.target.files[0]) this.handleImageUpload(e.target.files[0]);
});
// Solve button
document.getElementById('solveBtn').addEventListener('click', () => this.solveQuestion());
// Enter key to solve
document.getElementById('questionInput').addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.ctrlKey) {
e.preventDefault();
this.solveQuestion();
}
});
}
updatePlaceholder() {
const placeholders = {
math: `Type your Math question here...
Examples:
• Solve: 2x + 5 = 15
• Find derivative of x² + 3x
• Calculate area of circle r=5
• Simplify: (x+2)(x-3)`,
physics: `Type your Physics question here...
Examples:
• Calculate F = ma when m=10kg, a=5m/s²
• Explain Newton's laws
• Find velocity: u=0, a=10m/s², t=5s
• What is photoelectric effect?`,
chemistry: `Type your Chemistry question here...
Examples:
• Balance: H₂ + O₂ → H₂O
• What is molecular formula of water?
• Explain periodic trends
• Calculate molar mass of NaCl`,
biology: `Type your Biology question here...
Examples:
• Explain photosynthesis process
• What are parts of a cell?
• Describe digestive system
• What is DNA structure?`,
english: `Type your English question here...
Examples:
• Find adjectives in: "Beautiful red roses"
• Difference between metaphor and simile
• Correct: "She don't like apples"
• Explain Shakespeare's themes`,
hindi: `अपना हिंदी प्रश्न यहाँ लिखें...
उदाहरण:
• "राम स्कूल जाता है" - संज्ञा बताएं
• छंद की परिभाषा क्या है?
• व्याकरण की त्रुटि सुधारें
• कबीर के दोहे का अर्थ`
};
document.getElementById('questionInput').placeholder = placeholders[this.selectedSubject];
}
async handleImageUpload(file) {
if (!file.type.startsWith('image/')) {
this.showError('Please upload an image file only!');
return;
}
if (file.size > 4 * 1024 * 1024) {
this.showError('Image size must be less than 4MB!');
return;
}
try {
const base64 = await this.fileToBase64(file);
this.uploadedImage = {
data: base64.split(',')[1],
mimeType: file.type
};
const imageUpload = document.getElementById('imageUpload');
imageUpload.classList.add('has-image');
imageUpload.innerHTML = `
<div class="upload-icon">✅</div>
<div class="upload-text">Image uploaded successfully!</div>
<img src="${base64}" class="image-preview" alt="Uploaded image">
<button class="remove-image" onclick="aiSolver.removeImage()">Remove</button>
`;
} catch (error) {
this.showError('Error processing image. Please try again.');
}
}
removeImage() {
this.uploadedImage = null;
const imageUpload = document.getElementById('imageUpload');
imageUpload.classList.remove('has-image');
imageUpload.innerHTML = `
<div class="upload-icon">📷</div>
<div class="upload-text">Tap to upload image</div>
<input type="file" id="fileInput" class="file-input" accept="image/*">
`;
// Re-attach event listener
document.getElementById('fileInput').addEventListener('change', (e) => {
if (e.target.files[0]) this.handleImageUpload(e.target.files[0]);
});
}
fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
async solveQuestion() {
const question = document.getElementById('questionInput').value.trim();
if (!question && !this.uploadedImage) {
this.showError('Please enter a question or upload an image!');
return;
}
this.showLoading(true);
this.hideError();
this.hideResult();
try {
const prompt = this.createPrompt(question);
const response = await this.callGeminiAPI(prompt);
this.showResult(response);
} catch (error) {
console.error('Error:', error);
this.showError('Sorry, there was an error processing your question. Please try again.');
} finally {
this.showLoading(false);
}
}
createPrompt(question) {
const subjectContext = {
math: "You are a math tutor. Solve step by step with clear explanations.",
physics: "You are a physics teacher. Explain concepts clearly with examples.",
chemistry: "You are a chemistry expert. Show chemical equations and explain reactions.",
biology: "You are a biology teacher. Explain biological processes clearly.",
english: "You are an English teacher. Help with grammar, literature, and writing.",
hindi: "आप एक हिंदी शिक्षक हैं। व्याकरण और साहित्य में सहायता करें।"
};
let prompt = subjectContext[this.selectedSubject] + "\n\n";
if (question) {
prompt += `Question: ${question}\n\n`;
}
if (this.uploadedImage) {
prompt += "Please analyze the image and solve any problems or questions you see in it.\n\n";
}
prompt += "Provide a clear, step-by-step solution in the same language as the question.";
return prompt;
}
async callGeminiAPI(prompt) {
const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${this.apiKey}`;
const requestBody = {
contents: [{
parts: []
}]
};
// Add text part
requestBody.contents[0].parts.push({
text: prompt
});
// Add image part if exists
if (this.uploadedImage) {
requestBody.contents[0].parts.push({
inline_data: {
mime_type: this.uploadedImage.mimeType,
data: this.uploadedImage.data
}
});
}
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`);
}
const data = await response.json();
if (data.candidates && data.candidates[0] && data.candidates[0].content) {
return data.candidates[0].content.parts[0].text;
} else {
throw new Error('Invalid response format');
}
}
showLoading(show) {
document.getElementById('loading').style.display = show ? 'block' : 'none';
document.getElementById('solveBtn').disabled = show;
}
showResult(content) {
document.getElementById('resultContent').textContent = content;
document.getElementById('result').style.display = 'block';
}
hideResult() {
document.getElementById('result').style.display = 'none';
}
showError(message) {
document.getElementById('error').textContent = message;
document.getElementById('error').style.display = 'block';
setTimeout(() => this.hideError(), 5000);
}
hideError() {
document.getElementById('error').style.display = 'none';
}
}
// Initialize the app
const aiSolver = new AIQuestionSolver();
</script>
</body>
</html>
Conclusion
तो दोस्तों कुछ इस तरह से हमने AI क्वेश्चन सॉल्वर वेबसाइट बना ली है और यह ChatGPT जितनी प्रभावशाली और एक्यूरेट आंसर देगी क्योंकि यह वेबसाइट के बैकएंड में हमने AI API का इस्तेमाल किया है।
