<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI प्रॉम्प्ट जनरेटर</title>
<style>
.ai-prompt-generator {
font-family: 'Arial', sans-serif;
max-width: 700px;
margin: 20px auto;
padding: 25px;
background: #f8f9fa;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.generator-header {
text-align: center;
color: #2d3436;
margin-bottom: 25px;
}
.input-section {
margin-bottom: 20px;
}
.input-label {
display: block;
margin-bottom: 8px;
color: #636e72;
font-weight: 600;
}
.custom-select, .custom-textarea {
width: 100%;
padding: 12px;
border: 2px solid #dfe6e9;
border-radius: 8px;
font-size: 16px;
background: white;
}
.custom-textarea {
height: 120px;
resize: vertical;
}
.generate-btn {
background: #0984e3;
color: white;
padding: 14px 28px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
width: 100%;
transition: background 0.3s;
}
.generate-btn:hover {
background: #0767b1;
}
.result-box {
margin-top: 25px;
padding: 20px;
background: white;
border-radius: 8px;
border-left: 4px solid #0984e3;
}
.copy-btn {
background: #00b894;
color: white;
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="ai-prompt-generator">
<div class="generator-header">
<h2>🚀 AI प्रॉम्प्ट जनरेटर</h2>
<p>ChatGPT | Claude | Meta AI | DeepSeek</p>
</div>
<div class="input-section">
<label class="input-label">AI टूल:</label>
<select class="custom-select" id="aiTool">
<option value="chatgpt">ChatGPT</option>
<option value="metaai">Meta AI</option>
<option value="claude">Claude</option>
<option value="deepseek">DeepSeek</option>
</select>
</div>
<div class="input-section">
<label class="input-label">प्रकार:</label>
<select class="custom-select" id="category">
<option value="blog">ब्लॉग पोस्ट</option>
<option value="technical">टेक्निकल गाइड</option>
<option value="marketing">मार्केटिंग कॉपी</option>
<option value="analysis">विश्लेषण</option>
</select>
</div>
<div class="input-section">
<label class="input-label">आपका विषय:</label>
<textarea
class="custom-textarea"
id="userInput"
placeholder="उदाहरण: 'AI का भविष्य और मानव रोजगार पर प्रभाव'"
></textarea>
</div>
<button class="generate-btn" onclick="handleGenerate()">प्रॉम्प्ट बनाएं</button>
<div class="result-box" id="resultSection" style="display: none;">
<div id="generatedPrompt"></div>
<button class="copy-btn" onclick="copyToClipboard()">कॉपी करें</button>
</div>
</div>
<script>
const promptStrategies = {
chatgpt: {
blog: "एक विस्तृत ब्लॉग पोस्ट लिखें जो {topic} को कवर करे। संरचना: परिचय, मुख्य बिंदु, उदाहरण, निष्कर्ष।",
technical: "{topic} के लिए स्टेप-बाय-स्टेप टेक्निकल गाइड बनाएं।",
marketing: "{topic} के लिए आकर्षक मार्केटिंग कॉपी लिखें।",
analysis: "{topic} का गहन विश्लेषण प्रस्तुत करें।"
},
metaai: {
blog: "एक डिटेल्ड आर्टिकल तैयार करें जो {topic} के विभिन्न पहलुओं को एक्सप्लोर करे।",
technical: "{topic} के लिए एडवांस्ड टेक्निकल सॉल्यूशन प्रदान करें।",
marketing: "{topic} के लिए इनोवेटिव मार्केटिंग स्ट्रेटजी सजेस्ट करें।",
analysis: "{topic} का डेटा-ड्रिवेन विश्लेषण करें।"
},
claude: {
blog: "{topic} पर एक संपूर्ण लेख लिखें जिसमें विशेषज्ञ राय और केस स्टडी शामिल हों।",
technical: "{topic} के लिए बेस्ट प्रैक्टिसेज और ऑप्टिमाइजेशन टिप्स प्रदान करें।",
marketing: "{topic} के लिए सोशल मीडिया-फ्रेंडली मार्केटिंग कंटेंट जनरेट करें।",
analysis: "{topic} का तुलनात्मक अध्ययन प्रस्तुत करें।"
},
deepseek: {
blog: "{topic} पर टेक्निकल डीप डाइव आर्टिकल बनाएं।",
technical: "{topic} के लिए इंडस्ट्री-स्टैंडर्ड सॉल्यूशन प्रस्तुत करें।",
marketing: "{topic} के लिए डेटा-बेस्ड मार्केटिंग प्लान बनाएं।",
analysis: "{topic} का स्टैटिस्टिकल विश्लेषण करें।"
}
};
function handleGenerate() {
const aiTool = document.getElementById('aiTool').value;
const category = document.getElementById('category').value;
const userInput = document.getElementById('userInput').value.trim();
if(!userInput) {
showError("कृपया विषय दर्ज करें");
return;
}
const template = promptStrategies[aiTool][category];
const finalPrompt = template.replace("{topic}", userInput);
document.getElementById('generatedPrompt').innerHTML = `
<h3>${document.getElementById('aiTool').options[document.getElementById('aiTool').selectedIndex].text} प्रॉम्प्ट:</h3>
<p>${finalPrompt}</p>
`;
document.getElementById('resultSection').style.display = 'block';
}
function copyToClipboard() {
const text = document.querySelector('#generatedPrompt p').innerText;
navigator.clipboard.writeText(text)
.then(() => alert("प्रॉम्प्ट कॉपी हो गया!"))
.catch(err => console.error('कॉपी करने में त्रुटि:', err));
}
function showError(message) {
alert(message);
}
</script>
</body>
</html>
0 Comments