عملی سبق

مکمل گائیڈ: AI ٹولز کیسے بنائیں

بغیر ویب سائٹ کے AI ماڈل کیسے ٹیسٹ کریں - قدم بہ قدم سبق

⏱️10 منٹ
📖Beginner Level
🔧Setup Guide

اس سبق میں آپ سیکھیں گے کہ کیسے ایک سادہ HTML فائل بنا کر AI ماڈل کو ٹیسٹ کیا جائے۔ یہ بنیادی سبق ہے جو آپ کو AI API استعمال کرنے کا طریقہ سکھائے گا۔

💡 یاد رکھیں: یہ سبق مکمل طور پر عملی ہے۔ آپ کو کوڈ لکھنے کی ضرورت نہیں، صرف کاپی اور پیسٹ کریں!

1️⃣پہلا قدم: API Key حاصل کریں

AI API استعمال کرنے کے لیے آپ کو ایک API key کی ضرورت ہوگی۔ یہ key آپ کی شناخت ہے جو API کو بتاتی ہے کہ آپ مستخدم ہیں۔

کیسے حاصل کریں:

  1. OpenAI کی ویب سائٹ پر جائیں: platform.openai.com
  2. اکاؤنٹ بنائیں یا لاگ ان کریں
  3. API Keys سیکشن میں جائیں
  4. "Create new secret key" پر کلک کریں
  5. Key کو محفوظ جگہ کاپی کریں (یہ دوبارہ نہیں دکھائی جائے گی)

⚠️ اہم: API key کو کبھی بھی دوسروں کے ساتھ شیئر نہ کریں۔ یہ آپ کے اکاؤنٹ تک رسائی فراہم کر سکتی ہے۔

2️⃣دوسرا قدم: HTML فائل بنائیں

اپنے کمپیوٹر پر ایک نئی فائل بنائیں:

  1. کسی بھی ٹیکسٹ ایڈیٹر (Notepad, VS Code, یا TextEdit) کھولیں
  2. ایک نئی فائل بنائیں
  3. فائل کا نام ai-test.html رکھیں
  4. فائل کو اپنے Desktop یا کسی فولڈر میں محفوظ کریں

💡 تجویز: فائل کا نام .html extension کے ساتھ ضرور ختم ہونا چاہیے۔

3️⃣تیسرا قدم: مکمل HTML کوڈ کاپی کریں

نیچے دیا گیا کوڈ مکمل طور پر کاپی کریں اور اپنی HTML فائل میں پیسٹ کریں۔

Complete HTML File
<!DOCTYPE html>
<html lang="ur">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اردو AI ٹول</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 20px; direction: rtl; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        h1 { color: #1e293b; margin-bottom: 20px; text-align: center; }
        input, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; }
        button { background: #6366f1; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; width: 100%; }
        button:hover { background: #4f46e5; }
        #output { margin-top: 20px; padding: 20px; background: #f1f5f9; border-radius: 8px; min-height: 100px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI ٹیسٹ</h1>
        <input type="password" id="apiKey" placeholder="API Key (sk-...)">
        <textarea id="question" placeholder="مصنوعی ذہانت کیا ہے؟" rows="4"></textarea>
        <button onclick="callAI()">AI کو کال کریں</button>
        <div id="output"></div>
    </div>
    <script>
        async function callAI() {
            const key = document.getElementById('apiKey').value;
            const q = document.getElementById('question').value;
            const output = document.getElementById('output');
            
            if (!key || !q) {
                output.textContent = "براہ کرم API key اور سوال درج کریں";
                return;
            }
            
            output.textContent = "جارہا ہے...";
            try {
                const res = await fetch("https://api.openai.com/v1/chat/completions", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": 'Bearer ' + key
                    },
                    body: JSON.stringify({
                        model: "gpt-3.5-turbo",
                        messages: [{ role: "user", content: q }]
                    })
                });
                const data = await res.json();
                if (data.error) {
                    output.textContent = "خرابی: " + data.error.message;
                } else {
                    output.textContent = data.choices[0].message.content;
                }
            } catch (e) {
                output.textContent = "خرابی: " + e.message;
            }
        }
    </script>
</body>
</html>

💡 نوٹ: یہ کوڈ مکمل طور پر کام کرتا ہے۔ آپ اسے فوری طور پر استعمال کر سکتے ہیں!

4️⃣چوتھا قدم: ٹیسٹ کریں

اب آپ اپنی HTML فائل کو کھول کر ٹیسٹ کر سکتے ہیں:

کیسے کھولیں:

  1. فائل پر double-click کریں (یا right-click → Open with → Browser)
  2. براؤزر میں فائل کھل جائے گی
  3. API key فیلڈ میں اپنی key درج کریں
  4. سوال لکھیں (مثلاً: "مصنوعی ذہانت کیا ہے؟")
  5. "AI کو کال کریں" بٹن پر کلک کریں
  6. کچھ سیکنڈ انتظار کریں - جواب نیچے ظاہر ہوگا!

✅ کامیابی: اگر آپ کو جواب مل جاتا ہے تو مبارک ہو! آپ نے کامیابی سے AI API استعمال کیا ہے۔

💡اہم نکات

🔒حفاظت

  • API key کو کبھی بھی شیئر نہ کریں
  • GitHub یا کسی public repository میں commit نہ کریں
  • صرف اپنے مقامی کمپیوٹر پر استعمال کریں

💰لاگت

  • OpenAI API استعمال کرنے پر معمولی لاگت ہو سکتی ہے
  • free tier محدود استعمال فراہم کرتا ہے
  • اپنے usage کو monitor کریں

🐛عام مسائل

  • Error 401: API key غلط ہے یا expire ہو گئی ہے
  • Error 429: Rate limit exceeded - تھوڑی دیر انتظار کریں
  • No response: Internet connection چیک کریں