Urdu AI Pro - مصنوعی ذہانت اردو میں

📑فہرست

1.تعارف
2.Web Speech API
3.Browser Support
4.Implementation
5.مکمل کوڈ
6.Best Practices

اس سبق میں آپ سیکھیں گے کہ کیسے Web Speech API استعمال کرکے آواز کو متن میں تبدیل کیا جائے۔ یہ feature آپ کے applications کو زیادہ accessible اور user-friendly بناتا ہے۔

📋 Prerequisites: HTML, CSS, JavaScript کی بنیادی معلومات ضروری ہے۔

🎙️Web Speech API

Web Speech API ایک browser API ہے جو speech recognition فراہم کرتی ہے۔ یہ API:

✅ فوائد:

Browser میں built-in
کوئی external library نہیں چاہیے
Real-time transcription
Multiple languages support

⚠️ Limitations:

Chrome/Edge میں بہتر کام کرتا ہے
Internet connection ضروری
Privacy concerns (data server پر بھیجتا ہے)
Limited language support

🌐Browser Support

Browser	Support
Google Chrome	✅ Full Support
Microsoft Edge	✅ Full Support
Safari	⚠️ Limited
Firefox	❌ No Support

💡 نوٹ: Code میں browser support check شامل ہے جو unsupported browsers کے لیے error message دکھاتا ہے۔

⚙️Implementation Steps

1. API Initialization

const SpeechRecognition = window.SpeechRecognition || 
      window.webkitSpeechRecognition;
recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'ur-PK';

continuous: true = مسلسل ریکارڈنگ
interimResults: true = جاری results دکھائیں
lang: 'ur-PK' = Urdu (Pakistan) زبان

2. Event Handlers

recognition.onstart = function() {
    // Recording started
};

recognition.onresult = function(event) {
    // Process results
};

recognition.onerror = function(event) {
    // Handle errors
};

recognition.onend = function() {
    // Recording ended
};

3. Permission Handling

⚠️ اہم: پہلی بار استعمال پر browser microphone permission مانگے گا۔ User کو allow کرنا ہوگا۔

💻مکمل HTML کوڈ

نیچے دیا گیا کوڈ مکمل وائس ریکگنیشن app ہے۔ اسے کاپی کریں اور test کریں۔

Complete Voice Recognition App

<!DOCTYPE html>
<html lang="ur">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آواز سے لکھیں</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: system-ui, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px; 
            direction: rtl;
            min-height: 100vh;
        }
        .container { 
            max-width: 700px; 
            margin: 0 auto; 
            background: white; 
            padding: 30px; 
            border-radius: 16px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            text-align: center;
            color: #1e293b;
            margin-bottom: 30px;
            font-size: 28px;
        }
        .status {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        .status.ready {
            background: #d1fae5;
            color: #065f46;
            border: 2px solid #10b981;
        }
        .status.recording {
            background: #fee2e2;
            color: #991b1b;
            border: 2px solid #ef4444;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .record-button {
            width: 100%;
            padding: 20px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .record-button.start {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        .record-button.start:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
        }
        .record-button.stop {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }
        .record-button.stop:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
        }
        .record-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .output-area {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            min-height: 200px;
            margin-bottom: 20px;
            font-size: 16px;
            line-height: 1.8;
        }
        .button-group {
            display: flex;
            gap: 10px;
        }
        .btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn.copy {
            background: #6366f1;
            color: white;
        }
        .btn.copy:hover {
            background: #4f46e5;
        }
        .btn.clear {
            background: #e2e8f0;
            color: #1e293b;
        }
        .btn.clear:hover {
            background: #cbd5e1;
        }
        .error {
            background: #fee2e2;
            color: #991b1b;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            border: 2px solid #ef4444;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎤 آواز سے لکھیں</h1>
        
        <div class="status ready" id="status">
            تیار - "ریکارڈ شروع کریں" پر کلک کریں
        </div>

        <button class="record-button start" id="recordBtn" onclick="toggleRecording()">
            🎤 ریکارڈ شروع کریں
        </button>

        <div class="output-area" id="output">
            یہاں آپ کی آواز کا متن ظاہر ہوگا...
        </div>

        <div class="button-group">
            <button class="btn copy" onclick="copyText()">📋 کاپی کریں</button>
            <button class="btn clear" onclick="clearText()">🗑️ صاف کریں</button>
        </div>

        <div id="error" class="error" style="display: none;"></div>
    </div>

    <script>
        let recognition;
        let isRecording = false;
        let finalTranscript = '';

        // Check if browser supports Speech Recognition
        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            recognition = new SpeechRecognition();
            
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'ur-PK'; // Urdu (Pakistan)

            recognition.onstart = function() {
                isRecording = true;
                document.getElementById('status').textContent = '🔴 ریکارڈنگ جاری ہے...';
                document.getElementById('status').className = 'status recording';
                document.getElementById('recordBtn').textContent = '⏹️ ریکارڈنگ روکیں';
                document.getElementById('recordBtn').className = 'record-button stop';
            };

            recognition.onresult = function(event) {
                let interimTranscript = '';
                
                for (let i = event.resultIndex; i < event.results.length; i++) {
                    const transcript = event.results[i][0].transcript;
                    if (event.results[i].isFinal) {
                        finalTranscript += transcript + ' ';
                    } else {
                        interimTranscript += transcript;
                    }
                }

                document.getElementById('output').textContent = finalTranscript + interimTranscript;
            };

            recognition.onerror = function(event) {
                showError('خرابی: ' + event.error);
                stopRecording();
            };

            recognition.onend = function() {
                stopRecording();
            };
        } else {
            document.getElementById('status').textContent = '❌ آپ کا براؤزر Speech Recognition سپورٹ نہیں کرتا';
            document.getElementById('recordBtn').disabled = true;
        }

        function toggleRecording() {
            if (!isRecording) {
                finalTranscript = '';
                recognition.start();
            } else {
                recognition.stop();
            }
        }

        function stopRecording() {
            isRecording = false;
            document.getElementById('status').textContent = '✅ ریکارڈنگ مکمل - "ریکارڈ شروع کریں" پر دوبارہ کلک کریں';
            document.getElementById('status').className = 'status ready';
            document.getElementById('recordBtn').textContent = '🎤 ریکارڈ شروع کریں';
            document.getElementById('recordBtn').className = 'record-button start';
        }

        function copyText() {
            const text = document.getElementById('output').textContent;
            navigator.clipboard.writeText(text).then(function() {
                alert('✅ متن کاپی ہو گیا!');
            }).catch(function(err) {
                showError('کاپی کرنے میں مسئلہ: ' + err);
            });
        }

        function clearText() {
            finalTranscript = '';
            document.getElementById('output').textContent = 'یہاں آپ کی آواز کا متن ظاہر ہوگا...';
        }

        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            setTimeout(function() {
                errorDiv.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html>

💡Best Practices

✅ Do's:

ہمیشہ browser support check کریں
User کو clear instructions دیں
Error handling شامل کریں
Recording status واضح کریں
Privacy policy mention کریں

❌ Don'ts:

بغیر permission کے microphone access نہ لیں
Error messages vague نہ رکھیں
Recording state unclear نہ رکھیں
Privacy concerns ignore نہ کریں